Skip to content

Commit

Permalink
Sharing: Handle narrow screens better.
Browse files Browse the repository at this point in the history
When screens get narrow, the 'Share with:' label starts to wrap to two lines.
Since this is a translated string, we can't really just set a minimum width on
it and expect it to always work, but we can handle the wrapping case better.

This reduces the line-height to look less terrible, and keeps the labels
centered with the rest of the content when they need to wrap.
  • Loading branch information
Matt Lee committed Jun 10, 2015
1 parent 82fac18 commit 2e0292a
Show file tree
Hide file tree
Showing 2 changed files with 6 additions and 1 deletion.
5 changes: 5 additions & 0 deletions r2/r2/public/static/css/components/mixins.less
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,11 @@
display: flex;
}

.align-items(@props) {
-webkit-align-items: @props;
align-items: @props;
}

.clearfix() {
&:before,
&:after {
Expand Down
2 changes: 1 addition & 1 deletion r2/r2/public/static/css/post-sharing.less
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@
display: block;

.c-form-group {
.align-items(center);
.display-flex();

> * {
Expand All @@ -57,7 +58,6 @@

> .post-sharing-label {
.flex(0 0 20%);
line-height: @post-sharing-icon-size + (@margin-small * 1px);
padding-right: @margin-small * 1px;
text-align: right;
}
Expand Down

0 comments on commit 2e0292a

Please sign in to comment.