From 5a094c82d3925aa725ace42643e62b609ac67962 Mon Sep 17 00:00:00 2001 From: James Barnsley Date: Mon, 26 Jun 2017 08:32:45 +1200 Subject: [PATCH] Refining modal styles and responsive structures --- src/js/components/Modal/KioskModeModal.js | 2 +- .../views/discover/DiscoverRecommendations.js | 7 +- src/scss/components/_context-menu.scss | 15 ++++ src/scss/components/_header.scss | 6 +- src/scss/components/_lists.scss | 9 ++- src/scss/components/_modal.scss | 12 +++- src/scss/components/_notifications.scss | 6 +- src/scss/components/_playback-controls.scss | 39 ++++++++++ src/scss/components/_sidebar.scss | 72 ++++++------------- src/scss/global/_core.scss | 2 +- src/scss/global/_forms.scss | 4 +- src/scss/global/_variables.scss | 1 + src/scss/views/_album.scss | 23 ++++-- src/scss/views/_artist.scss | 24 ++++--- src/scss/views/_discover.scss | 5 +- src/scss/views/_playlist.scss | 23 ++++-- src/scss/views/_search.scss | 1 + 17 files changed, 166 insertions(+), 85 deletions(-) diff --git a/src/js/components/Modal/KioskModeModal.js b/src/js/components/Modal/KioskModeModal.js index 5594f5ba..f5d38bf5 100755 --- a/src/js/components/Modal/KioskModeModal.js +++ b/src/js/components/Modal/KioskModeModal.js @@ -39,7 +39,7 @@ export default class KioskModeModal extends React.Component{
{ this.props.current_track ? this.props.current_track.name : - }
- { this.props.current_track ? : } + { this.props.current_track ? : }
diff --git a/src/js/views/discover/DiscoverRecommendations.js b/src/js/views/discover/DiscoverRecommendations.js index f3253fdf..130f30f4 100755 --- a/src/js/views/discover/DiscoverRecommendations.js +++ b/src/js/views/discover/DiscoverRecommendations.js @@ -229,15 +229,14 @@ class Discover extends React.Component{ render(){ return (
-
-

Explore new music

-

+

Explore new music

+

Add seeds below to build your sound. Let's start with {this.props.authorized ? " two of your favorite artists" : " the chill genre"}. -

+ {this.renderSeeds()}
diff --git a/src/scss/components/_context-menu.scss b/src/scss/components/_context-menu.scss index 3f3bc3e0..d5d92012 100755 --- a/src/scss/components/_context-menu.scss +++ b/src/scss/components/_context-menu.scss @@ -245,10 +245,25 @@ max-width: 90vw; position: relative; z-index: 2; + border-radius: 3px; .title { padding: 16px 20px; box-sizing: border-box; + border-radius: 3px 3px 0 0; + } + + & > span { + + button, + .button { + color: $white; + font-weight: 800; + } + + .dropdown-field { + color: $white; + } } .menu-item-wrapper { diff --git a/src/scss/components/_header.scss b/src/scss/components/_header.scss index b2c4e369..0b383b2d 100755 --- a/src/scss/components/_header.scss +++ b/src/scss/components/_header.scss @@ -56,7 +56,6 @@ main { top: 0; left: 0; width: 100%; - background: rgba(0,0,0,0.1); color: $white; z-index: 95; @@ -69,6 +68,7 @@ main { @include responsive( $bp_medium ){ padding: 10px 10px 10px 0; + margin-bottom: -20px; .icon { visibility: hidden; @@ -76,11 +76,11 @@ main { h1 { vertical-align: top; - padding-top: 8px; + padding-top: 6px; } .options { - top: 10px; + top: 8px; right: 0; .context-menu-trigger { diff --git a/src/scss/components/_lists.scss b/src/scss/components/_lists.scss index c82c757a..c328b77c 100755 --- a/src/scss/components/_lists.scss +++ b/src/scss/components/_lists.scss @@ -202,8 +202,9 @@ } @include responsive( $bp_medium ){ + .list-item { - padding: 7px 30px 7px 48px !important; + padding: 12px !important; .source { position: static; @@ -303,5 +304,11 @@ } } } + + &.track-list { + .list-item { + padding: 7px 30px 7px 48px !important; + } + } } } \ No newline at end of file diff --git a/src/scss/components/_modal.scss b/src/scss/components/_modal.scss index 54cada1a..97e1fac7 100755 --- a/src/scss/components/_modal.scss +++ b/src/scss/components/_modal.scss @@ -5,7 +5,7 @@ left: 0; bottom: 0; right: 0; - z-index: 99; + z-index: 999; background: $overlay_dark; overflow-y: scroll; @@ -109,6 +109,12 @@ } } + &.add_to_queue, + &.create_playlist { + h1 { + padding-bottom: 50px; + } + } &.image_zoom { .content { @@ -184,6 +190,10 @@ .current-track { padding-top: 50px; font-size: 30px; + + .artist-sentence { + opacity: 0.5; + } } } } diff --git a/src/scss/components/_notifications.scss b/src/scss/components/_notifications.scss index 2d502e20..2167d4b8 100755 --- a/src/scss/components/_notifications.scss +++ b/src/scss/components/_notifications.scss @@ -124,9 +124,9 @@ } @include responsive( $bp_medium ){ - bottom: 48px; - left: 0; - right: 0; + bottom: 60px; + left: 10px; + right: 10px; width: auto; .loading { diff --git a/src/scss/components/_playback-controls.scss b/src/scss/components/_playback-controls.scss index 373111e1..0529d770 100755 --- a/src/scss/components/_playback-controls.scss +++ b/src/scss/components/_playback-controls.scss @@ -27,6 +27,45 @@ .thumbnail { float: left; margin: 12px; + + &:before { + @include animate(); + display: block; + content: "\f065"; + font-family: "FontAwesome"; + position: absolute; + top: 50%; + left: 0; + bottom: 0; + right: 0; + margin-top: -9px; + text-align: center; + font-size: 18px; + color: $white; + z-index: 1; + opacity: 0; + } + + &:after { + @include animate(); + content: ''; + display: block; + background: rgba(0,0,0,0.75); + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + border-radius: 3px; + opacity: 0; + } + + &:hover{ + &:after, + &:before { + opacity: 1; + } + } } .title { diff --git a/src/scss/components/_sidebar.scss b/src/scss/components/_sidebar.scss index c19df0af..6e6aa078 100755 --- a/src/scss/components/_sidebar.scss +++ b/src/scss/components/_sidebar.scss @@ -16,59 +16,17 @@ aside{ top: 0; left: 0; right: 0; - bottom: 0; + bottom: 120px; box-sizing: border-box; z-index: 2; - } - - @include responsive( $bp_medium ){ - width: 220px; - left: -220px; - position: fixed; - z-index: 98; - - .sidebar-open & { - left: 0px; - } - - .liner { - bottom: 0 !important; - } - - .thumbnail { - display: none; - } - } - - @include responsive( null, null, $bp_shallow ){ - .liner { - bottom: 60px; - } - } - - .thumbnail { - position: absolute; - top: -30px; - right: -30px; - bottom: -30px; - left: -30px; - height: auto; - width: auto; - max-width: none; - z-index: 1; - opacity: 0.2; - - .image { - @include blur(); - padding-bottom: 0; - height: 100%; - } + overflow-y: auto; } nav { z-index: 2; position: relative; - padding-top: 25px; + padding-top: 20px; + line-height: 1em; a { @include feature_font(); @@ -78,15 +36,15 @@ aside{ color: $darkest_grey; text-decoration: none; display: block; - padding: 8px 10px 6px; + padding: 9px 10px 5px; margin: 0 20px; border-radius: 3px; + line-height: 18px; .icon { height: 14px; padding-right: 8px; vertical-align: top; - margin-top: 1px; } &.active { @@ -127,9 +85,25 @@ aside{ color: $mid_grey; } } - } @include responsive( $bp_medium ){ + width: 220px; + left: -220px; + padding-bottom: 0; + position: fixed; + z-index: 100; + + .sidebar-open & { + left: 0px; + } + + .liner { + bottom: 0 !important; + } + + .thumbnail { + display: none; + } } } \ No newline at end of file diff --git a/src/scss/global/_core.scss b/src/scss/global/_core.scss index c691fea3..859c84a7 100755 --- a/src/scss/global/_core.scss +++ b/src/scss/global/_core.scss @@ -66,7 +66,7 @@ main { @include responsive( $bp_medium ){ .content-wrapper { - padding: 40px 10px 40px; + padding: 20px 10px 40px; } section.list-wrapper { diff --git a/src/scss/global/_forms.scss b/src/scss/global/_forms.scss index a3b2120c..638de460 100755 --- a/src/scss/global/_forms.scss +++ b/src/scss/global/_forms.scss @@ -167,11 +167,11 @@ input[type="submit"] { @include responsive( $bp_medium ){ margin-right: 10px; + padding-left: 20px; + padding-right: 20px; } @include responsive( $bp_narrow ){ - padding-left: 20px; - padding-right: 20px; } } diff --git a/src/scss/global/_variables.scss b/src/scss/global/_variables.scss index 56cf5576..0f125da4 100755 --- a/src/scss/global/_variables.scss +++ b/src/scss/global/_variables.scss @@ -19,6 +19,7 @@ $overlay_dark: rgba(10, 10, 10, 0.95); $bp_wide: 1000px; $bp_medium: 800px; +$bp_small: 500px; $bp_narrow: 350px; $bp_shallow: 650px; diff --git a/src/scss/views/_album.scss b/src/scss/views/_album.scss index abfd81e1..ef34ab44 100755 --- a/src/scss/views/_album.scss +++ b/src/scss/views/_album.scss @@ -38,7 +38,9 @@ main .album-view { .thumbnail-wrapper { width: 40%; - padding: 10px 20px 10px 10px; + padding: 10px 20px 10px 0; + float: left; + position: static; .thumbnail { float: none; @@ -48,8 +50,7 @@ main .album-view { } .title { - padding: 20px 20px 20px 40%; - min-height: 30vw; + padding: 30px 0 20px 40%; .details { padding: 5px 0; @@ -57,8 +58,20 @@ main .album-view { } .actions { - text-align: center; - padding: 20px 5px; + @include clearfix(); + padding: 10px 0 20px 40%; + } + } + + @include responsive( $bp_small ){ + .title { + @include clearfix(); + padding: 20px 20px 10px 40%; + min-height: 20vw; + } + + .actions { + padding: 0; } } } diff --git a/src/scss/views/_artist.scss b/src/scss/views/_artist.scss index 4715b5e7..1f999a4a 100755 --- a/src/scss/views/_artist.scss +++ b/src/scss/views/_artist.scss @@ -84,7 +84,7 @@ @include responsive( $bp_medium ){ .intro { - margin-bottom: 20px; + margin-bottom: 0; .parallax { canvas { @@ -93,20 +93,28 @@ } .liner { - text-align: center; - padding-left: 20px; - padding-right: 20px; + padding-left: 0; + padding-right: 0; padding-top: 10vh; .thumbnail { position: static; - float: none; - margin: 0 auto 20px; - max-width: 65%; + float: left; + margin: 0 20px 0 20px; + width: 30%; + } + + h1 { + @include clearfix(); + padding: 12vw 10px 0 0; + } + + .actions { + padding: 30px 10px 10px; } .sub-views { - margin-left: 0; + margin-left: 5px; .option { margin: 0 8px; diff --git a/src/scss/views/_discover.scss b/src/scss/views/_discover.scss index d5238acd..df88a5d0 100755 --- a/src/scss/views/_discover.scss +++ b/src/scss/views/_discover.scss @@ -3,7 +3,7 @@ .intro { position: relative; - padding: 200px 40px 80px 40px; + padding: 90px 40px 70px; z-index: 1; .parallax { @@ -40,6 +40,7 @@ } .seeds { + padding-top: 40px; .seed { display: inline-block; @@ -110,7 +111,7 @@ .discover-new-releases-view { .intro { position: relative; - padding-top: 130px; + padding-top: 80px; header { margin-bottom: 0; diff --git a/src/scss/views/_playlist.scss b/src/scss/views/_playlist.scss index 258d52bb..db16f310 100755 --- a/src/scss/views/_playlist.scss +++ b/src/scss/views/_playlist.scss @@ -38,7 +38,9 @@ main .playlist-view { .thumbnail-wrapper { width: 40%; - padding: 10px 20px 10px 10px; + padding: 10px 20px 10px 0; + float: left; + position: static; .thumbnail { float: none; @@ -48,8 +50,7 @@ main .playlist-view { } .title { - padding: 20px 20px 20px 40%; - min-height: 30vw; + padding: 30px 0 20px 40%; .details { padding: 5px 0; @@ -57,8 +58,20 @@ main .playlist-view { } .actions { - text-align: center; - padding: 20px 5px; + @include clearfix(); + padding: 10px 0 20px 40%; + } + } + + @include responsive( $bp_small ){ + .title { + @include clearfix(); + padding: 20px 20px 10px 40%; + min-height: 20vw; + } + + .actions { + padding: 0; } } } diff --git a/src/scss/views/_search.scss b/src/scss/views/_search.scss index d8f6ac4d..08482dba 100755 --- a/src/scss/views/_search.scss +++ b/src/scss/views/_search.scss @@ -35,6 +35,7 @@ .search-form { top: 18px; left: 50px; + right: 60px; input { font-size: 1.8rem;