Profile page tweaks and tab updates

public/templates/artists/_show_layout.html

@@ -1,6 +1,6 @@
-<div class="resource-details artist-details fixed-tabs" ng-class="::{'x-archived': artist.is_archived}">
+<div class="resource-details artist-details" ng-class="::{'x-archived': artist.is_archived}">
 
-    <header ng-style="{'background-image': 'linear-gradient(135deg, ' + artist.avatar_colors[0] + ' 15%, ' + artist.avatar_colors[1] + ' 100%)'}">
+    <header ng-style="{'background-image': 'linear-gradient(180deg, ' + artist.avatar_colors[0] + ' 15%, ' + artist.avatar_colors[1] + ' 100%)'}">
         <img src="{{artist.avatars.normal}}">
         <div class="artist-right">
             <h1>{{artist.name}}<i class="fa fa-star admin-star" ng-show="::artist.isAdmin" data-title="Admin" bs-tooltip></i></h1>
@@ -18,7 +18,7 @@
 
         </div>
     </header>
-    <ul class="tabs fixed">
+    <ul class="tabs header">
         <li ui-sref-active="active"><a ui-sref=".profile">Profile</a></li>
         <li ui-sref-active="active"><a ui-sref=".content">Content</a></li>
         <li ng-if="::!artist.is_archived" ui-sref-active="active">

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);
+  .border-radius(4px);
-  padding: 0px;
+  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;
+      padding: 14px 16px;
-      font-size: 10pt;
+      font-size: 14px;
+      line-height: 18px;
+      &:hover {
+        background-color: #eeeeee;
+      }
     }
 
     > .dont-close {

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;
         }
 

resources/assets/styles/layout.less

@@ -57,6 +57,7 @@ header {
     }
 
     .dropdown-menu {
+      transform-origin: top right;
       left: auto !important;
       right: 0px;
     }

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;
+    right: 53px !important;
-    margin-top: 13px;
+    font-size: 22px;
-    margin-right: 10px !important;
+    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;