boxesserver: Move links and language selection to the top of the page

florianfesti · Dec 31, 2024 · 5c614fc · 5c614fc
1 parent ada5d0c
commit 5c614fc
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 31 deletions.
diff --git a/boxes/scripts/boxesserver.py b/boxes/scripts/boxesserver.py
@@ -246,6 +246,11 @@ def args2html(self, name, box, lang, action="", defaults={}):
 <div>
 <div class="clear"></div>
 <hr>
+<div class="linkbar">                                                                                                                                             <ul>
+{self.genLinks(lang)}
+</ul>
+</div>
+<hr>
 <h2 style="margin: 0px 0px 0px 20px;">{_(name)}</h2>
         <p>{_(box.__doc__) if box.__doc__ else ""}</p>
 <form action="{action}" method="GET" rel="nofollow">
@@ -294,7 +299,6 @@ def args2html(self, name, box, lang, action="", defaults={}):
 </div>
 </div>
 </div>
-{self.genPagePartFooter(lang)}
 </body>
 </html>
         ''')
@@ -320,7 +324,6 @@ def genPageMenu(self, lang):
 <div class="container">
 <div style="width: 75%; float: left;">
 {self.genPagePartHeader(lang)}
-
 <div class="modenav">
 <span class="modebutton"><a href="Gallery">{_("Gallery")}</a></span>
 <span class="modebutton modeactive">{_("Menu")}</span>
@@ -357,7 +360,6 @@ def genPageMenu(self, lang):
 <hr>
 </div>
 </div>
-{self.genPagePartFooter(lang)}
 </body>
 </html>
 """)
@@ -439,24 +441,23 @@ def genPagePartHeader(self, lang) -> str:
 <div>
 
 <div class="clear"></div>
+<hr/>
+<div class="linkbar">
+<ul>
+{self.genLinks(lang)}
+  <li class="right">\U0001f50d <input autocomplete="off" type="search" oninput="filterSearchItems();" name="search" id="search" placeholder="Search"></li>
+</ul>
+</div>
+<hr/>
+"""
 
-<div class="search">
-\U0001f50d <input autocomplete="off" type="search" oninput="filterSearchItems();" name="search" id="search" placeholder="Search">
-</div>"""
-
-    def genPagePartFooter(self, lang) -> str:
+    def genLinks(self, lang):
         _ = lang.gettext
-
-        return f"""
-<div class="footer">
-<ul>
-  <li>{self.genHTMLLanguageSelection(lang)}</li>
-  <li><a href="https://florianfesti.github.io/boxes/html/usermanual.html" target="_blank" rel="noopener">{_("Help")}</a></li>
+        return f"""  <li><a href="https://florianfesti.github.io/boxes/html/usermanual.html" target="_blank" rel="noopener">{_("Help")}</a></li>
   <li><a href="https://hackaday.io/project/10649-boxespy" target="_blank" rel="noopener">{_("Home Page")}</a></li>
   <li><a href="https://florianfesti.github.io/boxes/html/index.html" target="_blank" rel="noopener">{_("Documentation")}</a></li>
   <li><a href="https://github.com/florianfesti/boxes" target="_blank" rel="noopener">{_("Sources")}</a></li>
-</ul>
-</div>
+  <li class="right">{self.genHTMLLanguageSelection(lang)}</li>
 """
 
     def genPageError(self, name, e, lang) -> list[bytes]:
@@ -572,7 +573,6 @@ def serveGallery(self, environ, start_response, lang):
         result.append(f"""
 </div><div style="width: 5%; float: left;"></div>
         <div class="clear"></div><hr></div>
-{self.genPagePartFooter(lang)}
 </body>
 </html>
 """

diff --git a/static/self.css b/static/self.css
@@ -81,6 +81,7 @@ table tr p {
 .container {
     background-color: #FFF8EA;
     margin-top: 20px;
+    margin-bottom: 40px;
     margin-left: auto;
     margin-right: auto;
     padding: 10px;
@@ -124,33 +125,28 @@ video {
     width: 100%;
 }
 
-.footer {
-    margin-left: auto;
-    margin-right: auto;
-    padding: 10px;
-    padding-bottom: 15px;
-    width: 996px;
-    border-radius: 30px;
-    text-align: center;
+.linkbar {
+    padding-bottom: 0px;
     margin-top: 0px;
 }
 
-.footer ul {
+.linkbar ul {
     margin-top: 0px;
+    padding-left: 10px;
 }
 
-.footer ul li {
+.linkbar ul li {
     list-style-type: circle;
     display: inline-block;
     font-size: 0.9em;
 }
 
-.search {
-    float : right;
-    padding-top: 10px;
+.linkbar ul li.right {
+    float: right;
+    margin-right : 10px;
 }
 
-.footer ul li a {
+.linkbar ul li a {
     color: #555;
     margin-right: 10px;
 }