Use css variables for navbar customization

pehala · Dec 29, 2023 · fd793c1 · fd793c1
1 parent cf9e9b7
commit fd793c1
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 107 deletions.
diff --git a/backend/templates/songs/index.html b/backend/templates/songs/index.html
@@ -90,7 +90,7 @@ <h6 class="d-inline" ><%:author%></h6>
         <input type="text" class="form-control" id="searchInput" placeholder="{% trans "Number, text or author" %}">
       </div>
     </div>
-    <table id="datatable" class="accordion accordion-flush w-100 table table-borderless">
+    <table id="datatable" class="accordion accordion-flush w-100 h-100 table table-borderless">
         <thead class="d-none"></thead>
         <tbody class="w-100 m-0"></tbody>
     </table>
@@ -156,7 +156,14 @@ <h6 class="d-inline" ><%:author%></h6>
             }
         ],
         data: JSON.parse("{{ songs|escapejs }}"),
-        pageLength: 50,
+        //pageLength: 50,
+        //scrollResize: true,
+        scrollX: false,
+        scrollY: "90vh",
+        scrollCollapse: true,
+        paging: true,
+        scroller: true,
+        lengthChange: true,
         {% datatables_language %}
     });
 

diff --git a/frontend/static/_colors.sass b/frontend/static/_colors.sass
diff --git a/frontend/static/navbar4.sass b/frontend/static/navbar4.sass
diff --git a/frontend/static/styles.sass b/frontend/static/styles.sass
@@ -1,6 +1,19 @@
-@import colors
+$bgDefault      : #f9f9f9
+$bgHighlight    : #c4c2bd
+$colDefault     : #7793f3
+$colHighlight   : #e81c1c
 $border-color: $bgHighlight
 
+.navbar
+  --bs-navbar-color: #{$colDefault}
+  --bs-navbar-hover-color: #{$colHighlight}
+  --bs-navbar-active-color: #{$colHighlight}
+  --bs-navbar-brand-color: #{$colDefault}
+  --bs-navbar-brand-hover-color: #{$colHighlight}
+
+.dropdown-menu
+  --bs-dropdown-link-color: #{$colDefault}
+
 .chord
   position: absolute
   line-height: 0

diff --git a/frontend/templates/base/index.html b/frontend/templates/base/index.html
@@ -23,13 +23,12 @@
               defer></script>
     <link rel="stylesheet" type="text/css" href="{% static 'icons/css/songs.css' %}">
     <link rel="stylesheet" type="text/css" href="{% sass_src 'styles.sass' %}">
-    <link rel="stylesheet" type="text/css" href="{% sass_src 'navbar4.sass' %}">
     {% block extra_head %} {% endblock %}
 </head>
 <body>
 <div>
-    <nav class="navbar navbar-expand-lg navbar-light">
-        <a class="navbar-brand ms-3" href="#">{{ request.tenant.display_name }}</a>
+    <nav class="navbar navbar-expand-lg">
+        <a class="navbar-brand ms-3" href="{{ reqeust.tenant.index_redirect }}">{{ request.tenant.display_name }}</a>
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
                 aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>