From 85f76efc9ed7f91e1579336b46d2f005827f5a94 Mon Sep 17 00:00:00 2001 From: Jan Cavan Boulas Date: Thu, 11 May 2017 13:35:47 -0700 Subject: [PATCH] Reader: Following Manage UI nits (#13787) * 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 --- .../reader-recommended-sites/style.scss | 52 ++++---- .../email-settings.jsx | 3 +- .../reader-subscription-list-item/style.scss | 112 +++++++++++------- 3 files changed, 97 insertions(+), 70 deletions(-) diff --git a/client/blocks/reader-recommended-sites/style.scss b/client/blocks/reader-recommended-sites/style.scss index ac82e078c57b4c..92c11f31799f1e 100644 --- a/client/blocks/reader-recommended-sites/style.scss +++ b/client/blocks/reader-recommended-sites/style.scss @@ -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; @@ -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; @@ -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} { @@ -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, @@ -94,7 +102,7 @@ $reader-related-card-v2-breakpoint-small: "( max-width: 535px )"; } @include breakpoint( "<660px" ) { - top: -2px; + top: 3px; } } } @@ -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 { @@ -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; } } @@ -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 ); } } diff --git a/client/blocks/reader-subscription-list-item/email-settings.jsx b/client/blocks/reader-subscription-list-item/email-settings.jsx index d53facfe388a86..3604fb30ec157c 100644 --- a/client/blocks/reader-subscription-list-item/email-settings.jsx +++ b/client/blocks/reader-subscription-list-item/email-settings.jsx @@ -87,9 +87,8 @@ class ReaderEmailSubscriptionSettingsPopout extends Component { - + Settings diff --git a/client/blocks/reader-subscription-list-item/style.scss b/client/blocks/reader-subscription-list-item/style.scss index dc9a96e4068c31..8d4a97dc8ff38e 100644 --- a/client/blocks/reader-subscription-list-item/style.scss +++ b/client/blocks/reader-subscription-list-item/style.scss @@ -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; } } } @@ -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% ); } @@ -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; @@ -93,7 +111,7 @@ fill: $blue-medium; @include breakpoint( "<660px" ) { - left: 6px; + left: 3px; } } @@ -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 { @@ -137,21 +157,6 @@ .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 @@ -159,7 +164,6 @@ display: flex; flex-direction: column; min-width: 250px; - min-height: 150px; } .reader-subscription-list-item__email-popout-header { @@ -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; @@ -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