Improved mobile ux (#260)

* Banner padding * Font scaling and sidebar repositioning * Mobile logo logic, tweaked header display
pulibrary · Apr 11, 2022 · 3d38cb7 · 3d38cb7
1 parent 1974121
commit 3d38cb7
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 0 deletions.
diff --git a/app/assets/images/mobile_logo.png b/app/assets/images/mobile_logo.png
diff --git a/app/assets/stylesheets/blacklight.scss b/app/assets/stylesheets/blacklight.scss
@@ -9,3 +9,25 @@ dd.blacklight-abstract_tsim {
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
+
+// Responsive font sizes
+
+@media all and (max-width: 860px) {
+  body {
+    font-size: 1rem;
+  }
+
+  h1 {
+    font-size: 2.5rem;
+  }
+}
+
+@media all and (max-width: 736px) {
+  body {
+    font-size: 1rem;
+  }
+
+  h1 {
+    font-size: 1.5rem;
+  }
+}
diff --git a/app/assets/stylesheets/components/banner.scss b/app/assets/stylesheets/components/banner.scss
@@ -12,3 +12,9 @@
     font-size: 18px;
   }
 }
+
+@media all and (max-width: 860px) {
+  #banner {
+    padding: 10px 3px 5px 3px;
+  }
+}
diff --git a/app/assets/stylesheets/components/header.scss b/app/assets/stylesheets/components/header.scss
@@ -43,6 +43,12 @@
   max-width: 75%;
 }
 
+@media all and (max-width: 550px) {
+  .navbar-logo {
+    background-image: asset_url("mobile_logo.png");
+  }
+}
+
 /* Hide responsive hamburger menu -- not using it */
 .navbar .navbar-toggler {
   display: none;

diff --git a/app/assets/stylesheets/components/sidebar.scss b/app/assets/stylesheets/components/sidebar.scss
@@ -60,3 +60,19 @@
   line-height: 1.5;
   border-radius: 0.2rem;
 }
+
+@media all and (max-width: 860px) {
+}
+
+@media all and (max-width: 736px) {
+}
+
+@media all and (max-width: 550px) {
+  .sidebar {
+    float: none;
+  }
+
+  #sidebar-usage {
+    padding: 10px 0px;
+  }
+}