move navbar to bottom

bxngyn · bxngyn · commit bd39cfd4f057 · 2025-07-29T14:20:22.000-04:00
diff --git a/compare50/_renderer/static/match.css b/compare50/_renderer/static/match.css
@@ -12,7 +12,7 @@ body {
 }
 
 .wrapper {
-    margin-top: 3em;
+    margin-bottom: 3em;
 }
 
 .view {
@@ -31,7 +31,7 @@ body {
 
 .sub_name {
     margin-top: 0.33em;
-    padding-right: 0px;
+    padding-left: 10px;
 }
 
 .row {
@@ -121,16 +121,20 @@ pre {
 }
 
 #sidebar {
-    padding: 10px 15px;
-    top: 0;
-    width: 100%;
     position: fixed;
-    height: auto;
+    bottom: 0;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5em 1em;
     z-index: 1000;
+}
+
+.sidebar-right {
     display: flex;
     align-items: center;
     gap: 0.5em;
-    justify-content: normal;
 }
 
 #next_prev_match {
diff --git a/compare50/_renderer/templates/match_page.html b/compare50/_renderer/templates/match_page.html
@@ -11,27 +11,27 @@
     </head>
     <body>
         <div class="wrapper" id="page">
-            <nav class="bg-dark text-center" id="sidebar">
+            <nav class="bg-dark text-light" id="sidebar">
                 <div class="brand text-light">
                     <h4><a href="index.html" class="index-link"><b>compare50</b></a></h4>
                 </div>
-                <div class="text-light id" id="{{id}}">{{id}} / {{max_id}}</div>
-                <div class="btn-group" role="group" aria-label="NextPrev" id="next_prev_match">
-                    <button type="button" class="btn btn-outline-light prev_match" id="prev_match" {{'disabled' if id <= 1 else ''}}><<</button>
-                    <button type="button" class="btn btn-outline-light next_match" id="next_match" {{'disabled' if id >= max_id else ''}}>>></button>
-                </div>
-                <div class="btn-group" role="group" aria-label="Views" id="passes">
-                {% for pass_ in passes %}
-                    <button type="button" class="btn btn-outline-light view_selector" id="{{pass_.__name__}}selector" title="{{pass_.__doc__}}">{{pass_.__name__}}</button>
-                {% endfor %}
-                </div>
-                <div id="btn-group">
+                <div class="sidebar-right">
+                    <div class="text-light id" id="{{id}}">{{id}} / {{max_id}}</div>
+                    <div class="btn-group" role="group" aria-label="NextPrev" id="next_prev_match">
+                        <button type="button" class="btn btn-outline-light prev_match" id="prev_match" {{'disabled' if id <= 1 else ''}}><<</button>
+                        <button type="button" class="btn btn-outline-light next_match" id="next_match" {{'disabled' if id >= max_id else ''}}>>></button>
+                    </div>
+                    <div class="btn-group" role="group" aria-label="Views" id="passes">
+                        {% for pass_ in passes %}
+                            <button type="button" class="btn btn-outline-light view_selector" id="{{pass_.__name__}}selector" title="{{pass_.__doc__}}">{{pass_.__name__}}</button>
+                        {% endfor %}
+                    </div>
                     <div class="btn-group" role="group" aria-label="NextPrevGroup">
                         <button type="button" class="btn btn-outline-light matches_group" id="previous_group">&lt;</button>
                         <button type="button" class="btn btn-outline-light matches_group" id="next_group">&gt;</button>
                     </div>
+                    <div class="text-light" id="group_counter"></div>
                 </div>
-                <div class="text-light" id="group_counter"></div>
             </nav>
             <div id="content">
                 {% for match in matches %}
