However, you’ll notice that if you start to shrink the screen too much the author gets complete hidden. So we’re left with quite a good base of what we want. We’ll add this next layer of wrapping to make sure the author can shrink, the PR status cannot shrink, and the branches continue to shrink as expected. From the designs the author, branch details and PR status are all to the left, so I’ll group these all together in my HTML. The other element that can shrink is the author.
#Flexbox text overflow ellipsis full
Ok, we’re back in business now!Īnd that’s it for the branch details! The source and destination branches shrink equally while the arrow remains full width. While we’re at it, we can style the ending with an ellipsis using text-overflow: ellipsis.
Let‘s put that back by hiding overflowing text: overflow: hidden. This works in that the words don’t wrap, but it has the unfortunate side effect of stopping things from shrinking. We can stop words from wrapping with a quick white-space: nowrap rule. columns of text) but it isn’t what we want for the branch names. This wrapping makes sense for “normal” uses of flexbox (i.e. So if you play with it you can see everything shrinks equally and the branch names wrap across lines. Your-awesome-branch -> the-destination-branchĪt this point everything is flexible. Rather than think about the whole thing at once I focused on just the branch details section. I followed the (very good) advice I give to people new to programming: There were too many moving parts and I didn’t have a good enough understanding of how flexbox worked to hold all the parts in my head. I already had the HTML set up from another bit of work, so I’d just add the CSS. When I first got into it I figured I’d just work with everything all together. NOTE: to keep the CSS easy to read, the demo pages only work in Chrome.
Ok, so now we understand the problem, let’s start coding! branches should shrink faster than the author). After a little thought and discussion we decided that the branches should be more flexible than the author (i.e. Ultimately only the author and branches should be “flexible.” Everything else should always be completely visible. branch details (source, destination and an arrow between them).The pull request header (known as PRH from now on) has X main sections: So we don’t need to talk about what was there, we’re starting from scratch.
#Flexbox text overflow ellipsis how to
Nothing else relies on this piece of code and I had full control of how to implement this part of the feature (with lots of feedback from my fantastic colleagues!). I was fortunate enough to be able to throw away all existing HTML and CSS. Previously we were’t able to expand a branch name fully even though there was enough space for it. Obviously it’s got a ways to go, but this little bit is done! The main point is that we utilise all of the space available to us. Let’s take a look at what it’s currently like:Īdding flexbox is part of a much larger chunk of work, so my “finished product” looks like this: Today I spent some time implementing flexbox on our pull request page, specifically in the header. Well, the time has come!Īs you might know, I work for Atlassian on the Bitbucket Server product. That was a practice round because I knew I needed to use flexbox at work in the future. I recently wrote about using the flex-box rule in CSS. CSS: Flexbox in action - Bitbucket Server pull request header
0 kommentar(er)
