Merge pull request #117 from cs50/move-navbar

bxngyn · web-flow · commit e4928f20803a · 2025-07-29T14:55:56.000-04:00
Move navbar
diff --git a/compare50/_renderer/static/match.css b/compare50/_renderer/static/match.css
@@ -8,10 +8,11 @@ body, h1, h4, h5 {
 
 body {
     font-family: Proxima-Nova, sans-serif;
+    overflow: hidden;
 }
 
 .wrapper {
-    margin-left: 10em;
+    margin-bottom: 3em;
 }
 
 .view {
@@ -30,7 +31,7 @@ body {
 
 .sub_name {
     margin-top: 0.33em;
-    padding-right: 0px;
+    padding-left: 10px;
 }
 
 .row {
@@ -56,7 +57,7 @@ pre {
     border-top: 0;
     max-width:100%;
     width: 100%;
-    height: 100%;
+    height: 90vh;
 }
 
 .right {
@@ -67,7 +68,7 @@ pre {
     border-top: 0;
     max-width:100%;
     width: 100%;
-    height: 100%;
+    height: 90vh;
 }
 
 .fragment:before {
@@ -119,36 +120,36 @@ pre {
     font-family: Consolas, monospace;
 }
 
-#sidebar {
-    padding-left: 5px;
-    padding-right: 5px;
-    margin-left: -10em;
-    left: 10em;
-    width: 10em;
+#botbar {
     position: fixed;
-    height: 100%;
+    bottom: 0;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5em 1em;
     z-index: 1000;
 }
 
-#next_prev_match {
-    margin-top: .4em;
+.botbar-right {
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
 }
 
-#passes {
-    margin-top: 10%;
-    margin-bottom: 10%;
+#next_prev_match {
+    margin: 0;
 }
 
-.matches_group {
-    margin-bottom: .4em;
+#passes {
+    margin: 0;
 }
 
 .brand {
     text-align: center;
     vertical-align: middle;
-    width: 100%;
     height: 2.20em;
-    margin-top: 0.13em;
+    margin: 0;
 }
 
 a.index-link {
diff --git a/compare50/_renderer/templates/match_page.html b/compare50/_renderer/templates/match_page.html
@@ -11,22 +11,21 @@
     </head>
     <body>
         <div class="wrapper" id="page">
-            <nav class="bg-dark text-center" id="sidebar">
+            <nav class="bg-dark text-light" id="botbar">
                 <div class="brand text-light">
                     <h4><a href="index.html" class="index-link"><b>compare50</b></a></h4>
                 </div>
-                <br/>
-                <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-vertical" 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="group_nav">
+                <div class="botbar-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>
diff --git a/setup.py b/setup.py
@@ -22,6 +22,6 @@
     packages=find_packages(exclude=["tests"]),
     scripts=["bin/compare50"],
     url="https://github.com/cs50/compare50",
-    version="1.2.15",
+    version="1.2.14",
     include_package_data=True,
 )

Original file line number	Diff line number	Diff line change
`@@ -22,6 +22,6 @@`
`22`	`22`	`packages=find_packages(exclude=["tests"]),`
`23`	`23`	`scripts=["bin/compare50"],`
`24`	`24`	`url="https://github.com/cs50/compare50",`
`25`		`- version="1.2.15",`
	`25`	`+ version="1.2.14",`
`26`	`26`	`include_package_data=True,`
`27`	`27`	`)`