Skip to content

Commit

Permalink
Reader: Following Manage UI nits (Automattic#13787)
Browse files Browse the repository at this point in the history 
* Reader: SoM nits

* Align Follow and cog icons

* Remove no match styling (to be handled in a separate PR)

* Limit site title, byline, url

* Remove unnecessary properties for site url

* Align Follow buttons, fix breakpoints

* Increase calc width

* Move cog to left

* move popout to the gear

* Align Following and Settings buttons

* Remove unnecessary flex properties

* Fix issues after rebase

* Fix site title fade

* Remove fade from loading placeholders
  • Loading branch information
@jancavan
jancavan authored May 11, 2017
1 parent e5e73ff commit 85f76ef
Show file tree
Hide file tree
Showing 3 changed files with 97 additions and 70 deletions.
52 changes: 30 additions & 22 deletions client/blocks/reader-recommended-sites/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ $reader-related-card-v2-breakpoint-medium: "( min-width: 661px ) and ( max-width
$reader-related-card-v2-breakpoint-small: "( max-width: 535px )";

.reader-recommended-sites {
padding-bottom: 12px;

@include breakpoint( "<660px" ) {
margin: 0 15px;
Expand All @@ -16,10 +15,14 @@ $reader-related-card-v2-breakpoint-small: "( max-width: 535px )";
font-size: 14px;
font-weight: 600;
letter-spacing: 0.01em;
margin: 13px 0 17px;
margin: 13px 0 10px;
position: relative;
text-transform: uppercase;

@include breakpoint( ">660px" ) {
margin: 13px 0 17px;
}

.gridicon {
fill: lighten( $gray, 10% );
margin-right: 5px;
Expand All @@ -31,7 +34,7 @@ $reader-related-card-v2-breakpoint-small: "( max-width: 535px )";
.reader-recommended-sites__list {
display: flex;
flex-direction: row;
margin: 0;
margin: 0 0 20px;
padding: 0;

@media #{$reader-related-card-v2-breakpoint-medium} {
Expand All @@ -51,35 +54,40 @@ $reader-related-card-v2-breakpoint-small: "( max-width: 535px )";

.reader-recommended-sites__site-list-item {
display: flex;
flex: 1 1 0;
flex: 1;
flex-direction: column;
list-style-type: none;
margin-top: -40px;
min-width: 0;
position: relative;
top: -40px;

@media #{$reader-related-card-v2-breakpoint-medium} {
flex-direction: row;
flex: 0;
top: 0;
margin-top: 0;

& + & {
margin-top: 10px;
}
}

@media #{$reader-related-card-v2-breakpoint-small} {
flex-direction: row;
flex: 0;
top: 0;
margin-top: 0;

& + & {
margin-top: 10px;
}
}

:nth-child(2) {
flex: 1 1 0;
> :nth-child(2) {
flex: 1;
}

.reader-recommended-sites__recommended-site-dismiss {
display: flex;
height: 30px;

.button {
float: right;
}
justify-content: flex-end;

.button.is-borderless .gridicon,
.gridicon,
Expand All @@ -94,7 +102,7 @@ $reader-related-card-v2-breakpoint-small: "( max-width: 535px )";
}

@include breakpoint( "<660px" ) {
top: -2px;
top: 3px;
}
}
}
Expand All @@ -107,8 +115,8 @@ $reader-related-card-v2-breakpoint-small: "( max-width: 535px )";
margin: 0 0 0 10px;
}

@include breakpoint( "<480px" ) {
margin: 0 0 0 10px;
@include breakpoint( "<660px" ) {
margin: 10px 0 0 10px;
}

.follow-button .follow-button__label {
Expand Down Expand Up @@ -146,7 +154,8 @@ $reader-related-card-v2-breakpoint-small: "( max-width: 535px )";
&:last-child {

@media #{$reader-related-card-v2-breakpoint-medium} {
margin: 0;
margin-left: 0;
margin-right: 0;
}
}

Expand All @@ -161,12 +170,11 @@ $reader-related-card-v2-breakpoint-small: "( max-width: 535px )";

.reader-subscription-list-item__site-title {
color: $blue-medium;
margin-bottom: 3px;
width: calc( 100% - 70px );
width: calc( 100% - 20px );
word-break: break-all;

@include breakpoint( "<960px" ) {
width: calc( 100% - 20px );
@include breakpoint( ">960px" ) {
width: calc( 100% - 70px );
}
}

Expand Down
3 changes: 1 addition & 2 deletions client/blocks/reader-subscription-list-item/email-settings.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,9 +87,8 @@ class ReaderEmailSubscriptionSettingsPopout extends Component {
<span
className="reader-subscription-list-item__settings-menu"
onClick={ this.togglePopoverVisibility }
ref={ this.savePopoutSpanRef }
>
<Gridicon icon="cog" size={ 24 } />
<Gridicon icon="cog" size={ 24 } ref={ this.savePopoutSpanRef } />
<span className="reader-subscription-list-item__settings-label">Settings</span>
</span>

Expand Down
112 changes: 66 additions & 46 deletions client/blocks/reader-subscription-list-item/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,27 +5,23 @@

.reader-subscription-list-item__byline {
color: darken( $gray, 30% );
flex: 1 0 0;
padding-right: 10px;
margin-right: 16px;
flex: 1;
}

.reader-subscription-list-item__options {
.following-manage__subscriptions-list .reader-subscription-list-item__options {
display: flex;
flex-direction: column;
}
min-width: 24px;

.reader-subscription-list-item__site-title {
display: block;
font-weight: 600;
height: 20px;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
width: 100%;
@include breakpoint( ">660px" ) {
min-width: 90px;
}

&:not(.is-placeholder) {
&::after {
@include long-content-fade( $size: 20% );
.button.follow-button {

@include breakpoint( ">660px" ) {
display: flex;
}
}
}
Expand All @@ -34,20 +30,15 @@
display: block;
max-height: 16px * 2.8;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
text-overflow: ellipsis;
width: 100%;

@include breakpoint( ">660px" ) {
max-height: 16px * 1.4;
}

&::after{
height: 16px * 1.4;
top: auto;
}

&:not(.is-placeholder) {
&:not( .is-placeholder )::after {
&::after {
@include long-content-fade( $size: 20% );
}
Expand Down Expand Up @@ -85,6 +76,33 @@
}
}

.reader-subscription-list-item__site-url,
.reader-subscription-list-item__site-url:visited {
color: lighten( $gray, 10% );
}

.reader-subscription-list-item__site-title,
.reader-subscription-list-item__by-text,
.reader-subscription-list-item__site-url {
display: block;
height: 20px;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
width: 100%;
word-break: break-all;

&:not( .is-placeholder )::after {
&::after {
@include long-content-fade( $size: 20% );
}
}
}

.reader-subscription-list-item__site-title {
font-weight: 600;
}

.reader-subscription-list-item .follow-button {
border: 0;
padding: 0;
Expand All @@ -93,7 +111,7 @@
fill: $blue-medium;

@include breakpoint( "<660px" ) {
left: 6px;
left: 3px;
}
}

Expand All @@ -116,17 +134,19 @@
.reader-subscription-list-item .gridicons-cog {
fill: lighten( $gray, 10% );
height: 18px;
padding-right: 7px;
position: relative;
left: 7px;
left: 0;
top: 4px;
width: 18px;

@include breakpoint( ">660px" ) {
left: 4px;
left: -4px;
}
}

.reader-subscription-list-item__settings-label {
margin-left: -2px;
}

.reader-subscription-list-item .follow-button__label,
.reader-subscription-list-item .reader-subscription-list-item__settings-label {

Expand All @@ -137,29 +157,13 @@

.reader-subscription-list-item__settings-menu {
color: $gray;
padding-left: 0;

@include breakpoint( ">660px" ) {
padding-left: 8px;
}
}

.reader-subscription-list-item__site-title {
font-weight: 600;
}

.reader-subscription-list-item__options {
display: flex;
flex-direction: column;
margin-left: auto;
}

// Settings popover
.reader-subscription-list-item__email-popout-wrapper {
display: flex;
flex-direction: column;
min-width: 250px;
min-height: 150px;
}

.reader-subscription-list-item__email-popout-header {
Expand All @@ -180,19 +184,30 @@
border-color: lighten( $gray, 20% );
}

.reader-subscription-list-item__settings-menu-popout.popover.is-bottom-left .popover__arrow::before {
top: 2px;
// Popover arrows
.reader-subscription-list-item__settings-menu-popout.popover.is-bottom-left .popover__arrow::before,
.reader-subscription-list-item__settings-menu-popout.popover.is-top-left .popover__arrow::before {
border: 10px solid $gray-light;
content: " ";
position: absolute;
left: 50%;
margin-left: -10px;
border-bottom-style: solid;
border-left-color: transparent;
border-right-color: transparent;
}

.reader-subscription-list-item__settings-menu-popout.popover.is-bottom-left .popover__arrow::before {
top: 2px;
border-bottom-style: solid;
border-top: none;
}

.reader-subscription-list-item__settings-menu-popout.popover.is-top-left .popover__arrow::before {
bottom: 2px;
border-top-style: solid;
border-bottom: none;
}

.reader-subscription-list-item__email-popout-toggle {
color: $gray-dark;
display: flex;
Expand All @@ -214,6 +229,11 @@
.reader-subscription-list-item__site-url:visited {
color: lighten( $gray, 10% );
display: block;
height: 20px;
overflow: hidden;
position: relative;
width: 100%;
word-break: break-all;
}

// Placeholders
Expand Down

0 comments on commit 85f76ef

Please sign in to comment.