diff --git a/public/templates/artists/_show_layout.html b/public/templates/artists/_show_layout.html index ea3668d9..ffb76683 100644 --- a/public/templates/artists/_show_layout.html +++ b/public/templates/artists/_show_layout.html @@ -1,6 +1,6 @@ -
+
-
+

{{artist.name}}

@@ -18,7 +18,7 @@
-
    +
    • Profile
    • Content
    • diff --git a/resources/assets/styles/components/components.less b/resources/assets/styles/components/components.less index cae87153..3ec2eb0d 100644 --- a/resources/assets/styles/components/components.less +++ b/resources/assets/styles/components/components.less @@ -286,17 +286,58 @@ html body { } } +@keyframes dropdown-open { + 0% { + transform: scaleY(0); + } + 100% { + transform: scaleY(1); + } +} + +@keyframes dropdown-link { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +@iterations: 10; +.link-loop (@i) when (@i > 0) { + @time: ((@i - 1) / 20); + html .dropdown-menu > li:nth-child(@{i}) { + animation-delay: ~"@{time}s"; + } + .link-loop(@i - 1); +} +.link-loop (@iterations); + html .dropdown-menu { - .border-radius(0px); - padding: 0px; + .border-radius(4px); + border: 0; + padding: 0; overflow-y: auto; + animation: dropdown-open 0.2s; + animation-timing-function: @swift-ease-out; + animation-fill-mode: forwards; + transform-origin: top left; > li { margin: 0px; + animation: dropdown-link 0.2s; + animation-timing-function: @swift-ease-in-out; + animation-fill-mode: forwards; + opacity: 0; > a { - padding: 8px 10px; - font-size: 10pt; + padding: 14px 16px; + font-size: 14px; + line-height: 18px; + &:hover { + background-color: #eeeeee; + } } > .dont-close { diff --git a/resources/assets/styles/content.less b/resources/assets/styles/content.less index 9736983e..cbe9d012 100644 --- a/resources/assets/styles/content.less +++ b/resources/assets/styles/content.less @@ -151,13 +151,16 @@ &.artist-details { > header { padding: 15px; + background-size: cover; + background-position: center; > img { width: 150px; height: 150px; float: left; background: #fff; - box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); + border-radius: 50%; + .material-shadow(2); } > .artist-right { @@ -165,11 +168,10 @@ margin-top: 5px; > h1, .follower-count { + text-shadow: 0 1px 3px black; font-size: 20pt; color: #fff; - background: rgba(0,0,0,0.5); padding: 5px 10px; - margin-bottom: 5px; display: table; } diff --git a/resources/assets/styles/layout.less b/resources/assets/styles/layout.less index dd91a3ca..e23c54c4 100644 --- a/resources/assets/styles/layout.less +++ b/resources/assets/styles/layout.less @@ -57,6 +57,7 @@ header { } .dropdown-menu { + transform-origin: top right; left: auto !important; right: 0px; } diff --git a/resources/assets/styles/mobile.less b/resources/assets/styles/mobile.less index 2b57a4e6..d1e41f75 100644 --- a/resources/assets/styles/mobile.less +++ b/resources/assets/styles/mobile.less @@ -19,7 +19,6 @@ .site-body { overflow-x: hidden; - margin-top: 64px + 44px; } .now-playing { @@ -95,6 +94,20 @@ } } + .search-button { + display: block; + position: absolute; + font-size: 22px; + top: 0; + left: 60px; + color: #fff; + padding: 16px 7px; + + &:hover, &:focus, &:active { + color: #fff; + } + } + .search { width: 100%; margin-top: 14px; @@ -203,6 +216,7 @@ > header { margin-bottom: 0px; + padding-bottom: 40px !important; > img { float: none !important; @@ -229,6 +243,31 @@ } } } + + .tabs.header { + width: 100vw; + margin-top: -44px; + margin-bottom: 10px; + + li a { + color: #fff; + border-bottom: 0; + opacity: 0.5; + text-transform: uppercase; + text-decoration: none; + + &:hover { + background: rgba(255, 255, 255, 0.2); + } + } + + li.active a { + border-bottom: 4px solid #fff; + background: transparent; + color: #fff; + opacity: 1; + } + } } .tabs li a { @@ -312,9 +351,14 @@ .notification-menu { position: fixed; top: 0; - right: 54px !important; - margin-top: 13px; - margin-right: 10px !important; + right: 53px !important; + font-size: 22px; + margin-right: 0 !important; + margin-top: 16px !important; + + a { + padding: 17px 7px; + } a, a:active, a:hover, a:focus { color: #fff; @@ -349,7 +393,7 @@ display: flex; white-space: nowrap; border-bottom: 0; - height: 41px; + height: 44px; li { a { @@ -410,8 +454,6 @@ .notification-menu { top: 0; right: 54px; - margin-right: 13px; - margin-top: 13px; } .top-bar .logo { @@ -425,6 +467,11 @@ margin-top: 12px; } + .search-button { + right: 90px; + left: initial; + } + .top-bar .burger-wrapper { top: 22px; left: 16px;