Update Navbar component

Bootstrap imports corrects and navbar.html fixed Fix navbar implementstaion Update main.less Fix Search bar Fix navbar Fixed dropdowns
metabrainz · May 23, 2022 · a2070db · a2070db
1 parent 6df60d3
commit a2070db
Show file tree

Hide file tree

Showing 13 changed files with 216 additions and 426 deletions.
diff --git a/listenbrainz/webserver/static/css/huesound.less b/listenbrainz/webserver/static/css/huesound.less
@@ -1,11 +1,11 @@
 .huesound-container {
   &:extend(.flex-center all);
   flex-flow: wrap;
-  
+
   .colour-picker-container {
     flex: 0 1;
   }
-  
+
   .cover-art-grid {
     flex: 1 0 320px;
     border-radius: 10px;
@@ -15,28 +15,28 @@
     grid-template-columns: repeat(5,1fr);
     grid-auto-flow: row;
     justify-content: center;
-    
+
     padding: 1em;
     margin: 1em;
     min-height: 375px;
-    
+
     @media(max-width: @screen-sm) {
       grid-template-columns: repeat(4,1fr);
       min-height: 580px;
     }
-    
+
     @media(max-width: @screen-xs) {
       grid-template-columns: repeat(3,1fr);
     }
-    
+
     @media(min-width: @screen-md) {
       min-height: 600px;
     }
-    
+
     @media(min-width: @screen-lg) {
       min-height: 794px;
     }
-    &.invisible{
+    &.invisible {
       flex: 0 1 0px;
       width: 0px;
       padding: 0;
@@ -47,7 +47,7 @@
       background: none;
       border: none;
       padding: initial;
-      
+
       img {
         -webkit-transform: scale(1);
         transform: scale(1);
@@ -72,4 +72,4 @@
   font-style: italic;
   vertical-align: .8em;
   color: @orange;
-}
+}
diff --git a/listenbrainz/webserver/static/css/main.less b/listenbrainz/webserver/static/css/main.less
@@ -17,7 +17,6 @@
 @import "metadata-viewer.less";
 @import "musicbrainz-entity-icons.less";
 
-
 @icon-font-path:"/static/fonts/";
 
 @pager-border-radius: @border-radius-base;
@@ -36,53 +35,15 @@ body {
    width: auto !important;
 }
 
-.navbar {
-  .nav {
-    > li {
-      > a { color: @blue; }
-    }
-  }
-}
-
-.btn {
-  .glyphicon {
-    margin-right: 4px;
-  }
-}
-
-// Navbar
-@grid-float-breakpoint: @screen-md; // Point at which the navbar becomes uncollapsed
-.navbar {
-  .beta {
-    float: right;
-    color: @red;
-  }
-  @logo-width: 165px + 15px;
-  .navbar-variant(#353070, @logo-width);
-  .import-link {
-    > a {
-      color: white !important;
-      font-size: 1.5em !important;
-      background-color: @orange !important;
-      &:hover, &:focus {
-        background-color: darken(@orange, 6.5%) !important;
-      }
-    }
-  }
-  .navbar-form {
-    padding-right: 0px;
-    .btn {
-      background-color: @orange;
-      margin-right: 0px;
-    }
-  }
-}
-
 // Content Wrapper
 .wrapper {
   min-height: 70vh;
 }
 
+.dropdown-menu{
+  width: max-content;
+}
+
 /* Footer */
 .footer {
   background: #fff;
@@ -259,12 +220,6 @@ body {
   }
 }
 
-.sticky-top {
-  position: -webkit-sticky;
-  position: sticky;
-  top: 20px;
-}
-
 #feedback-button {
   .icon {
     > :not(:first-child){

diff --git a/listenbrainz/webserver/static/css/theme/links.less b/listenbrainz/webserver/static/css/theme/links.less
@@ -15,13 +15,6 @@ a {
     &.active, &.active:hover, &.active:focus { color: @list-group-active-color; }
     &:hover { color: @list-group-link-color; }
   }
-  .navbar-default &.navbar-brand:visited { color: @navbar-default-brand-color; }
-  .navbar-inverse &.navbar-brand:visited { color: @navbar-inverse-brand-color; }
-  .nav-tabs > li > &:visited { color: @link-color; }
-  .nav-pills > li > &:visited { color: @link-color; }
-  .nav-pills > li.active > &:visited {
-    &, &:hover, &:focus { color: @nav-pills-active-link-hover-color; }
-  }
   .dropdown-menu > li > &:visited {
     color: @dropdown-link-color;
     &:hover,

diff --git a/listenbrainz/webserver/static/css/theme/navbars.less b/listenbrainz/webserver/static/css/theme/navbars.less
diff --git a/listenbrainz/webserver/static/css/theme/theme.less b/listenbrainz/webserver/static/css/theme/theme.less
@@ -1,6 +1,5 @@
 @import "variables.less";
 @import "links.less";
-@import "navbars.less";
 
 // Fonts
 @import "google-fonts.less";