Profouzors
/
boxespy
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make Gallery the default view 

and add large buttons to switch between Gallery and Menu.

Needs some more love to really look good.
This commit is contained in:
Florian Festi 2023-04-16 22:18:24 +02:00
parent 0e9b8a760e
commit 91c8ef31f9
2 changed files with 46 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
scripts/boxesserver
View File

@ -235,7 +235,7 @@ class BServer:
</head> </head>
<body onload="initPage({len(box.argparser._action_groups) - 3})"> <body onload="initPage({len(box.argparser._action_groups) - 3})">
<div class="container" style="background-color: #FFF8EA;"> <div class="container">
<div style="float: left;"> <div style="float: left;">
<a href="./{langparam}"><h1>{_("Boxes.py")}</h1></a> <a href="./{langparam}"><h1>{_("Boxes.py")}</h1></a>
</div> </div>
@ -316,10 +316,15 @@ class BServer:
{self.genHTMLJS()} {self.genHTMLJS()}
</head> </head>
<body onload="initPage()"> <body onload="initPage()">
<div class="container" style="background-color: #FFF8EA;"> <div class="container">
<div style="width: 75%; float: left;"> <div style="width: 75%; float: left;">
{self.genPagePartHeader(lang)} {self.genPagePartHeader(lang)}
<div class="modenav">
<span class="modebutton"><a href="Gallery">{_("Gallery")}</a></span>
<span class="modebutton modeactive">{_("Menu")}</span>
</div>
<br>
<div class="menu" style="width: 100%"> <div class="menu" style="width: 100%">
<img style="width: 200px;" id="sample-preview" src="{self.static_url}/nothing.png" alt=""> <img style="width: 200px;" id="sample-preview" src="{self.static_url}/nothing.png" alt="">
"""] """]
@ -433,7 +438,6 @@ class BServer:
<div> <div>
<div class="clear"></div> <div class="clear"></div>
<hr>
<div class="search"> <div class="search">
\U0001f50d <input autocomplete="off" type="search" oninput="filterSearchItems();" name="search" id="search" placeholder="Search"> \U0001f50d <input autocomplete="off" type="search" oninput="filterSearchItems();" name="search" id="search" placeholder="Search">
@ -443,14 +447,13 @@ class BServer:
_ = lang.gettext _ = lang.gettext
return """ return """
<div class="footer container"> <div class="footer">
<ul> <ul>
<li>""" + self.genHTMLLanguageSelection(lang) + """</li> <li>""" + self.genHTMLLanguageSelection(lang) + """</li>
<li><a href="https://florianfesti.github.io/boxes/html/usermanual.html" target="_blank" rel="noopener">""" + _("Help") + """</a></li> <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://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://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> <li><a href="https://github.com/florianfesti/boxes" target="_blank" rel="noopener">""" + _("Sources") + """</a></li>
<li><a href="Gallery">""" + _("Gallery") + """</a></li>
</ul> </ul>
</div> </div>
""" """
@ -543,9 +546,13 @@ class BServer:
{self.genHTMLJS()} {self.genHTMLJS()}
</head> </head>
<body onload="initPage()"> <body onload="initPage()">
<div class="container" style="background-color: #FFF8EA;"> <div class="container">
<div style="width: 75%; float: left;"> <div style="width: 75%; float: left;">
{self.genPagePartHeader(lang)} {self.genPagePartHeader(lang)}
<div class="modenav">
<span class="modebutton modeactive">{_("Gallery")}</span>
<span class="modebutton"><a href="Menu">{_("Menu")}</a></span>
</div>
"""] """]
for nr, group in enumerate(self.groups): for nr, group in enumerate(self.groups):
result.append(f"<h2>{_(group.title)}</h2>\n") result.append(f"<h2>{_(group.title)}</h2>\n")
@ -562,6 +569,8 @@ class BServer:
result.append(f""" <span class="gallery" id="search_id_{name}"><a title="{_(name)} - {_(box.__doc__)}" href="{href}"><img alt="{alt}" src="{thumbnail}"/></a></span>\n""") result.append(f""" <span class="gallery" id="search_id_{name}"><a title="{_(name)} - {_(box.__doc__)}" href="{href}"><img alt="{alt}" src="{thumbnail}"/></a></span>\n""")
result.append(f""" result.append(f"""
</div><div style="width: 5%; float: left;"></div>
<div class="clear"></div><hr></div>
{self.genPagePartFooter(lang)} {self.genPagePartFooter(lang)}
</body> </body>
</html> </html>
@ -590,7 +599,7 @@ class BServer:
lang = self.getLanguage(args, environ.get("HTTP_ACCEPT_LANGUAGE", "")) lang = self.getLanguage(args, environ.get("HTTP_ACCEPT_LANGUAGE", ""))
_ = lang.gettext _ = lang.gettext
if name == "Gallery": if not name or name == "Gallery":
return self.serveGallery(environ, start_response, lang) return self.serveGallery(environ, start_response, lang)
box_cls = self.boxes.get(name, None) box_cls = self.boxes.get(name, None)

31
static/self.css
View File

@ -79,6 +79,7 @@ table tr p {
/* Container */ /* Container */
.container { .container {
background-color: #FFF8EA;
margin-top: 20px; margin-top: 20px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@ -124,7 +125,12 @@ video {
} }
.footer { .footer {
box-shadow: none; margin-left: auto;
margin-right: auto;
padding: 10px;
padding-bottom: 15px;
width: 996px;
border-radius: 30px;
text-align: center; text-align: center;
margin-top: 0px; margin-top: 0px;
} }
@ -141,6 +147,7 @@ video {
.search { .search {
float : right; float : right;
padding-top: 10px;
} }
.footer ul li a { .footer ul li a {
@ -206,3 +213,25 @@ textarea {
max-width : 200px; max-width : 200px;
margin : 5px; margin : 5px;
} }
.modenav {
overflow: hidden;
}
.modebutton {
float: left;
border: none;
outline: none;
padding: 10px 16px;
margin-right: 10px;
text-align : center;
border-radius: 10px;
font-size: 17px;
width: 25%;
background-color: #EFE8DA;
}
.modeactive {
background-color: #DFD8BA;
}