commit 0e7d664427925be7c85f3734f779a26b43076d46
parent 3e77e0e3fe0d5a8ff4a84c9a4f60d653f71b13b6
Author: Vincent Forest <vincent.forest@meso-star.com>
Date: Mon, 27 Feb 2023 22:06:48 +0100
Adjust page rendering for small screen
Until now, the menu was fixed and disappeared if it was off the screen.
In this commit, we remove the fixed attribute from the menu and make
further adjustments to resolve this rendering issue.
Diffstat:
| M | meso-menu.sh | | | 9 | +++++---- |
| M | meso.css | | | 68 | ++++++++++++++------------------------------------------------------ |
2 files changed, 19 insertions(+), 58 deletions(-)
diff --git a/meso-menu.sh b/meso-menu.sh
@@ -398,8 +398,9 @@ print_header() {
echo '</head>'
echo ""
echo "<body>"
-#echo "<aside class=\"menu\"><nav>"
- echo "<div id=\"menu\">"
+
+ echo "<aside id=\"menu\"><nav>"
+#echo "<div id=\"menu\">"
if [ "${section}" = "Home" ]; then
echo " <h2>Home</h2>"
print_home_sub_menu "${root}" "${name}"
@@ -443,8 +444,8 @@ print_header() {
echo " <h2><a href=\"${root}star-engine/star-engine.html\">Star-Engine</a></h2>"
fi
echo "<br>" # Enable CSS overflow here
- echo "</div>"
-#echo "</nav></aside>"
+#echo "</div>"
+ echo "</nav></aside>"
echo "<div id=\"content\">"
}
diff --git a/meso.css b/meso.css
@@ -88,41 +88,20 @@ hr {
}
/*******************************************************************************
- * Navigation bar
- ******************************************************************************/
-#navcontainer {
- padding-left: 2em;
- height: 2em;
-}
-
-#navcontainer ul {
- float: left;
- list-style-type: none;
- padding: 0.5em 0 0 0;
- margin: 0;
-}
-
-#navcontainer li {
- padding: 1em 1em 1em 1em;
- height: 1em;
- color: #000000;
- display: inline;
- font-weight: bold;
+ * Select
+******************************************************************************/
+#select {
font-variant: small-caps;
- position: relative;
-}
-
-#navcontainer li#cur {
- background-color: #ffffff;
+ float: right;
}
-#navcontainer a {
+#select a {
+ color: #AAAAAA;
text-decoration: none;
- color: #000000;
}
-#navcontainer a:hover {
- color: #777777
+#select a:hover {
+ color: #777777;
}
/*******************************************************************************
@@ -131,11 +110,12 @@ hr {
#menu {
text-align: left;
width: 17em;
- position: fixed;
+ /*position: fixed;*/
float: right;
max-height: 100%;
- margin-left: 55em;
- overflow: auto;
+
+ margin-left: 2em;
+ /*overflow: auto;*/
}
#menu h2 {
@@ -155,23 +135,6 @@ hr {
}
/*******************************************************************************
- * Select
- ******************************************************************************/
-#select {
- font-variant: small-caps;
- float: right;
-}
-
-#select a {
- color: #AAAAAA;
- text-decoration: none;
-}
-
-#select a:hover {
- color: #777777;
-}
-
-/*******************************************************************************
* Sub-menu
******************************************************************************/
#sub-menu ul {
@@ -225,8 +188,8 @@ hr {
padding: 1em 1.5em 1em 1.5em;
background-color: #ffffff;
text-align: left;
- width: 50em;
- float: left;
+ max-width: 50em;
+ /*float: left;*/
overflow: hidden;
}
@@ -317,7 +280,6 @@ hr {
******************************************************************************/
#footer {
text-align: left;
- clear: both;
color: #777;
padding: 1.0em 0em 0em 2em;
font-size: 8pt;
@@ -426,7 +388,6 @@ input[type=number]::-webkit-outer-spin-button {
font-weight: bold;
}
-
/*******************************************************************************
* Popup
******************************************************************************/
@@ -462,4 +423,3 @@ input[type=number]::-webkit-outer-spin-button {
.popup .show {
visibility: visible;
}
-
