Merge pull request #27 from ohmstance/smallscreen-opt-and-firefox-fix

Fix CSS in Firefox and optimize for small screen
sameerdhoot · Jul 26, 2023 · ffb81d8 · ffb81d8
2 parents 0f2491f + d739882
commit ffb81d8
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 72 deletions.
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" style="min-width: 900px;" data-bs-theme="auto">
+<html lang="en" data-bs-theme="auto">
 
 <head>
     <meta charset="utf-8">
@@ -79,19 +79,19 @@ <h6 style="margin-top: -4px;">/wolweb/wake/<span class="text-secondary">&lt;Devi
                     </tr>
                     <tr>
                         <td>Success&nbsp;&nbsp;
-                            <span style="font-style: italic;font-size: 12px;">Type: BOOLEAN</span>&nbsp;
+                            <span style="font-style: italic;font-size: 12px;">Type:&nbsp;BOOLEAN</span>&nbsp;
                         </td>
                         <td>Returns a value based on whether the magic packet was sent</td>
                     </tr>
                     <tr>
                         <td>Message&nbsp;&nbsp;
-                            <span style="font-style: italic;font-size: 12px;">Type: STRING</span>
+                            <span style="font-style: italic;font-size: 12px;">Type:&nbsp;STRING</span>
                         </td>
                         <td>Returns a description of any action taken</td>
                     </tr>
                     <tr>
                         <td>Error&nbsp;&nbsp;
-                            <span style="font-style: italic;font-size: 12px;">Type: JSONObject</span>
+                            <span style="font-style: italic;font-size: 12px;">Type:&nbsp;JSONObject</span>
                         </td>
                         <td>Returns errors as a JSON, converted from any raised GOLANG Error Objects</td>
                     </tr>

diff --git a/static/css/styles.css b/static/css/styles.css
@@ -9,18 +9,19 @@
 html[data-bs-theme="light"] {
   --alert-error-bg: #f3cdcd;
   --alert-success-bg: #e1ede1;
+}
 
-  & nav.navbar {
-    background-color: var(--bs-gray-900);
-  }
+html[data-bs-theme="light"] nav.navbar {
+  background-color: var(--bs-gray-900);
 }
+
 html[data-bs-theme="dark"] {
   --alert-error-bg: #532c2c;
   --alert-success-bg: #3e503e;
+}
 
-  & nav.navbar {
-    background-color: rgb(var(--bs-emphasis-color-rgb), 0.1);
-  }
+html[data-bs-theme="dark"] nav.navbar {
+  background-color: rgb(var(--bs-emphasis-color-rgb), 0.1);
 }
 
 .api-method-pill {
@@ -33,13 +34,12 @@ html[data-bs-theme="dark"] {
   width: fit-content;
   justify-content: center;
   color: white;
-
-  & p {
-    margin-bottom: 0;
-    font-size: smaller;
-  }
 }
 
+.api-method-pill p {
+  margin-bottom: 0;
+  font-size: smaller;
+}
 
 
 
@@ -69,10 +69,10 @@ html[data-bs-theme="dark"] {
 .alert button.close {
   margin: 0.45rem 1rem;
   opacity: 0.75;
+}
 
-  &:hover {
-    opacity: 1;
-  }
+.alert button.close:hover {
+  opacity: 1;
 }
 
 .alert-icon,
@@ -108,12 +108,14 @@ html[data-bs-theme="dark"] {
 
 .alert ul {
   margin: 0;
-  li {
-    margin-bottom: 0.2rem;
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
+}
+
+.alert ul li {
+  margin-bottom: 0.2rem;
+}
+
+.alert ul li:last-child {
+  margin-bottom: 0;
 }
 
 
@@ -122,88 +124,89 @@ html[data-bs-theme="dark"] {
 /* .alert-warning {
   background-color: lighten(var(--alert-warning), 48%);
   border-color: lighten(var(--alert-warning), 35%);
+}
 
-  .alert-text h5 {
-    color: var(--alert-warning);
-  }
+.alert-warning .alert-text h5 {
+  color: var(--alert-warning);
+}
 
-  button.close {
-    color: var(--alert-warning);
-  }
+.alert-warning button.close {
+  color: var(--alert-warning);
+}
 
-  .alert-icon {
-    background-color: var(--alert-warning);
-  }
-} */
+.alert-warning .alert-icon {
+  background-color: var(--alert-warning);
+}*/
 
 /* Help */
 /* .alert-help {
   background-color: lighten(var(--alert-hel), 48%);
   border-color: lighten(var(--alert-help), 34%);
+} 
 
-  .alert-text h4 {
-    color: var(--alert-help);
-  }
+.alert-help .alert-text h4 {
+  color: var(--alert-help);
+}
 
-  button.close {
-    color: var(--alert-help);
-  }
+.alert-help button.close {
+  color: var(--alert-help);
+}
 
-  .alert-icon {
-    background-color: var(--alert-help);
-  }
-} */
+.alert-help .alert-icon {
+  background-color: var(--alert-help);
+}*/
 
 /* Info */
 /* .alert-info {
   background-color: lighten(var(--alert-info), 38%);
   border-color: lighten(var(--alert-info), 30%);
+} 
 
-  .alert-text h5 {
-    color: var(--alert-info);
-  }
+.alert-info .alert-text h5 {
+  color: var(--alert-info);
+}
 
-  button.close {
-    color: var(--alert-info);
-  }
+.alert-info button.close {
+  color: var(--alert-info);
+}
 
-  .alert-icon {
-    background-color: var(--alert-info);
-  }
-} */
+.alert-info .alert-icon {
+  background-color: var(--alert-info);
+}
+*/
 
 /* Error */
 .alert-error {
   background-color: var(--alert-error-bg);
   border-color: var(--alert-error-border);
+}
 
-  & .alert-text h5 {
-    color: var(--alert-error);
-  }
+.alert-error .alert-text h5 {
+  color: var(--alert-error);
+}
 
-  & button.close {
-    color: var(--alert-error);
-  }
+.alert-error button.close {
+  color: var(--alert-error);
+}
 
-  & .alert-icon {
-    background-color: var(--alert-error);
-  }
+.alert-error .alert-icon {
+  background-color: var(--alert-error);
 }
 
 /* Success */
 .alert-success {
   background-color: var(--alert-success-bg);
   border-color: var(--alert-success-border);
+}
 
-  & .alert-text h5 {
-    color: var(--alert-success);
-  }
+.alert-success .alert-text h5 {
+  color: var(--alert-success);
+}
 
-  & button.close {
-    color: var(--alert-success);
-  }
+.alert-success button.close {
+  color: var(--alert-success);
+}
 
-  & .alert-icon {
-    background-color: var(--alert-success);
-  }
+.alert-success .alert-icon {
+  background-color: var(--alert-success);
 }
diff --git a/static/css/wolweb.css b/static/css/wolweb.css
@@ -19,4 +19,8 @@
 
 .hideMe {
     display: none;
+}
+
+.jsgrid-table {
+    min-width: 900px;
 }