Move navbar

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-top: 3em;
 }
 
 .view {
@@ -56,7 +57,7 @@ pre {
     border-top: 0;
     max-width:100%;
     width: 100%;
-    height: 100%;
+    height: calc(100vh - 3em);
 }
 
 .right {
@@ -67,7 +68,7 @@ pre {
     border-top: 0;
     max-width:100%;
     width: 100%;
-    height: 100%;
+    height: calc(100vh - 3em);
 }
 
 .fragment:before {
@@ -120,35 +121,32 @@ pre {
 }
 
 #sidebar {
-    padding-left: 5px;
-    padding-right: 5px;
-    margin-left: -10em;
-    left: 10em;
-    width: 10em;
+    padding: 10px 15px;
+    top: 0;
+    width: 100%;
     position: fixed;
-    height: 100%;
+    height: auto;
     z-index: 1000;
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+    justify-content: normal;
 }
 
 #next_prev_match {
-    margin-top: .4em;
+    margin: 0;
 }
 
 #passes {
-    margin-top: 10%;
-    margin-bottom: 10%;
-}
-
-.matches_group {
-    margin-bottom: .4em;
+    margin: 0;
 }
 
 .brand {
     text-align: center;
     vertical-align: middle;
-    width: 100%;
     height: 2.20em;
-    margin-top: 0.13em;
+    margin: 0;
+    padding-right: 25%;
 }
 
 a.index-link {

compare50/_renderer/templates/match_page.html

@@ -15,24 +15,23 @@
                 <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">
+                <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="group_nav">
+                <div id="btn-group">
                     <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 %}

setup.py

@@ -22,6 +22,6 @@
     packages=find_packages(exclude=["tests"]),
     scripts=["bin/compare50"],
     url="https://github.com/cs50/compare50",
-    version="1.2.14",
+    version="1.2.13",
     include_package_data=True,
 )