From 37ca2c636dd40b9dd52c622fa2dc195e7a2671c6 Mon Sep 17 00:00:00 2001
From: Mstiekema <m.stiekema@students.uu.nl>
Date: Mon, 27 May 2024 19:53:36 +0200
Subject: [PATCH] Added CSS for mobile compatibility

---
 .../static/AdminBoardView/styles.css          | 50 ++++++++++++++--
 admin_board_view/templates/base.html          | 57 ++++++++++++-------
 admin_board_view/templates/home.html          |  2 +-
 admin_board_view/templates/products.html      |  2 +-
 admin_board_view/templates/settings.html      |  2 +-
 admin_board_view/templates/transactions.html  |  2 +-
 admin_board_view/templates/user.html          |  6 +-
 admin_board_view/templates/user_home.html     |  2 +-
 8 files changed, 91 insertions(+), 32 deletions(-)

diff --git a/admin_board_view/static/AdminBoardView/styles.css b/admin_board_view/static/AdminBoardView/styles.css
index 59e0eae..3d16992 100644
--- a/admin_board_view/static/AdminBoardView/styles.css
+++ b/admin_board_view/static/AdminBoardView/styles.css
@@ -1,8 +1,34 @@
-.container {
-  max-height: calc(100vh - 65px);
-  overflow-y: scroll;
-  margin-top: 0 !important;
-  padding-top: 10px;
+/* Mobile specific CSS */
+@media (max-width: 768px) {
+  /* General settings */
+  .container {
+    max-height: calc(100vh - 65px);
+    overflow-y: scroll;
+    margin: 0;
+    margin-top: 0 !important;
+    padding-top: 10px;
+    width: 100%;
+  }
+
+  .undead-cols {
+    display: block;
+  }
+
+  .undead-cols > .col {
+    width: 100%;
+    margin-bottom: 10px;
+  }
+}
+
+/* Container settings for desktop */
+@media (min-width: 768px) {
+  .container {
+    max-height: calc(100vh - 65px);
+    overflow-y: scroll;
+    margin-top: 0 !important;
+    padding-top: 10px;
+    width: calc(100% - 300px);
+  }
 }
 
 .board-color {
@@ -25,3 +51,17 @@ a {
 .pagination {
   width: fit-content;
 }
+
+#sidebar {
+  width: 50px;
+}
+
+#dropdownUser {
+  width: 50px;
+  height: 50px;
+}
+
+#dropdownUser > svg {
+  /* Margin to make sure it's properly aligned: (50-16)/2 */
+  margin: 17px;
+}
diff --git a/admin_board_view/templates/base.html b/admin_board_view/templates/base.html
index d0f8073..180fccd 100644
--- a/admin_board_view/templates/base.html
+++ b/admin_board_view/templates/base.html
@@ -8,17 +8,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <!-- Styling -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap"> 
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <link rel="stylesheet" href="{% static 'AdminBoardView/styles.css' %}" type="text/css" title="Default Styles" media="screen">
 
     <!-- JS -->
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
-    <script 
-      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
-      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
-      crossorigin="anonymous">
+    {% comment %} <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> {% endcomment %}
     </script>
     <script type="text/javascript" src="{% static 'AdminBoardView/script.js' %}" defer></script>
 
@@ -35,34 +31,56 @@
         </a>
       </div>
     </nav>
-    <div class="d-flex" style="min-height: calc(100vh - 56px);">
-      <div class="d-flex flex-column flex-shrink-0 p-3 text-white bg-dark" style="width: 280px;">
-        <div class="nav nav-pills flex-column mb-auto">
+    <div class="d-flex col-auto px-0" style="min-height: calc(100vh - 56px);">
+      <div id="sidebar" class="d-flex flex-column flex-shrink-0 text-white bg-dark border-end">
+        <div class="nav nav-pills flex-column mb-auto" data-bs-parent="#sidebar">
           <a href="/" class="nav-link text-white" aria-current="page">
-            Home
+            {% comment %} Home {% endcomment %}
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house" viewBox="0 0 16 16">
+              <path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293zM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5z"/>
+            </svg>
           </a>
           {% if user.is_superuser %}
           <a href="/products" class="nav-link text-white">
-            Products
+            {% comment %} Products {% endcomment %}
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-basket" viewBox="0 0 16 16">
+              <path d="M5.757 1.071a.5.5 0 0 1 .172.686L3.383 6h9.234L10.07 1.757a.5.5 0 1 1 .858-.514L13.783 6H15a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1v4.5a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 1 13.5V9a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h1.217L5.07 1.243a.5.5 0 0 1 .686-.172zM2 9v4.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V9zM1 7v1h14V7zm3 3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3A.5.5 0 0 1 4 10m2 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3A.5.5 0 0 1 6 10m2 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3A.5.5 0 0 1 8 10m2 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 1 .5-.5m2 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 1 .5-.5"/>
+            </svg>
           </a>
           <a href="/users" class="nav-link text-white">
-            Users
+            {% comment %} Users {% endcomment %}
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-people" viewBox="0 0 16 16">
+              <path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1zm-7.978-1L7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002-.014.002zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4m3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0M6.936 9.28a6 6 0 0 0-1.23-.247A7 7 0 0 0 5 9c-4 0-5 3-5 4q0 1 1 1h4.216A2.24 2.24 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816M4.92 10A5.5 5.5 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275ZM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0m3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4"/>
+            </svg>
           </a>
           <a href="/settings" class="nav-link text-white">
-            Settings
+            {% comment %} Settings gear {% endcomment %}
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gear" viewBox="0 0 16 16">
+              <path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492M5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0"/>
+              <path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115z"/>
+            </svg>
           </a>
           <a href="/transactions" class="nav-link text-white">
-            Transactions
+            {% comment %} Transactions cash icon {% endcomment %}
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cash-coin" viewBox="0 0 16 16">
+              <path fill-rule="evenodd" d="M11 15a4 4 0 1 0 0-8 4 4 0 0 0 0 8m5-4a5 5 0 1 1-10 0 5 5 0 0 1 10 0"/>
+              <path d="M9.438 11.944c.047.596.518 1.06 1.363 1.116v.44h.375v-.443c.875-.061 1.386-.529 1.386-1.207 0-.618-.39-.936-1.09-1.1l-.296-.07v-1.2c.376.043.614.248.671.532h.658c-.047-.575-.54-1.024-1.329-1.073V8.5h-.375v.45c-.747.073-1.255.522-1.255 1.158 0 .562.378.92 1.007 1.066l.248.061v1.272c-.384-.058-.639-.27-.696-.563h-.668zm1.36-1.354c-.369-.085-.569-.26-.569-.522 0-.294.216-.514.572-.578v1.1zm.432.746c.449.104.655.272.655.569 0 .339-.257.571-.709.614v-1.195z"/>
+              <path d="M1 0a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h4.083q.088-.517.258-1H3a2 2 0 0 0-2-2V3a2 2 0 0 0 2-2h10a2 2 0 0 0 2 2v3.528c.38.34.717.728 1 1.154V1a1 1 0 0 0-1-1z"/>
+              <path d="M9.998 5.083 10 5a2 2 0 1 0-3.132 1.65 6 6 0 0 1 3.13-1.567"/>
+            </svg>
           </a>
           {% endif %}
         </div>
-        <hr>
+        <hr class="p-0 m-0">
         {% if user.is_authenticated %}
         <div class="dropdown">
-          <a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
-            <strong>{{ user.email }}</strong>
+          <a href="#" class="d-flex align-items-center text-white text-decoration-none" id="dropdownUser" data-bs-toggle="dropdown" aria-expanded="false">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-circle" viewBox="0 0 16 16">
+              <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0"/>
+              <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1"/>
+            </svg>
           </a>
-          <ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
+          <ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser">
             <form action="{% url 'oidc_logout' %}" method="post">
               {% csrf_token %}
               <input class="dropdown-item" type="submit" value="Sign out">
@@ -71,7 +89,7 @@
         </div>
         {% endif %}
       </div>
-      <main class="container d-flex flex-column mt-3" style="width: calc(100% - 300px);">
+      <main class="container d-flex flex-column mt-3">
         {% block body %}
         {% endblock body %}
         <div class="toast-container position-fixed top-0 end-0 p-3">
@@ -101,4 +119,5 @@ <h5 class="modal-title" id="confirm-title"></h5>
       </main>
     </div>
   </body>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
 </html>
diff --git a/admin_board_view/templates/home.html b/admin_board_view/templates/home.html
index 93f3f48..006f7f1 100644
--- a/admin_board_view/templates/home.html
+++ b/admin_board_view/templates/home.html
@@ -6,7 +6,7 @@ <h1>Home</h1>
   This is the admin portal for Undead Mongoose / Magnificent Sloth.
 </p>
 <hr/>
-<div class="row row-cols-2">
+<div class="undead-cols row row-cols-2">
   <div class="col">
     <div class="card">
       <h5 class="card-header">Add balance to user</h5>
diff --git a/admin_board_view/templates/products.html b/admin_board_view/templates/products.html
index 09cd14e..6debca3 100644
--- a/admin_board_view/templates/products.html
+++ b/admin_board_view/templates/products.html
@@ -8,7 +8,7 @@ <h3 class="flex-grow-1">Products</h3>
       <a href="/products?edit=0"><button class="btn btn-success">Add product</button></a>
     </section> 
   </div>
-  <div class="card-body">
+  <div class="card-body overflow-x-auto">
     <input id="filter-products" class="form-control" type="text" placeholder="Type product..." />
     <hr/>
     <table class="table table-striped table-hover text-center align-middle">
diff --git a/admin_board_view/templates/settings.html b/admin_board_view/templates/settings.html
index 51bc00c..371b93e 100644
--- a/admin_board_view/templates/settings.html
+++ b/admin_board_view/templates/settings.html
@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 {% load static %}
 {% block body %}
-<article class="row row-cols-2">
+<article class="undead-cols row row-cols-2">
   <section class="col">
     <div class="card">
       <div class="card-header">
diff --git a/admin_board_view/templates/transactions.html b/admin_board_view/templates/transactions.html
index 987dfbe..c4a1509 100644
--- a/admin_board_view/templates/transactions.html
+++ b/admin_board_view/templates/transactions.html
@@ -35,7 +35,7 @@ <h5>Transaction history</h5>
         <button class="nav-link" id="top-ups-tab" data-bs-toggle="tab" data-bs-target="#top-ups" type="button" role="tab">Top Ups</button>
       </li>
     </ul>
-    <div class="tab-content" id="myTabContent">
+    <div class="tab-content overflow-x-auto" id="myTabContent">
       <div class="tab-pane fade" id="sales" role="tabpanel">
         <table class="table table-striped table-hover text-center align-middle">
           <thead>
diff --git a/admin_board_view/templates/user.html b/admin_board_view/templates/user.html
index 6df9245..d8bad6c 100644
--- a/admin_board_view/templates/user.html
+++ b/admin_board_view/templates/user.html
@@ -7,7 +7,7 @@ <h5 class="mb-2">
   Current balance: <b>{{ user_info.euro_balance }}</b>
 </h5>
 <hr/>
-<div class="row row-cols-2">
+<div class="undead-cols row row-cols-2">
   <div class="col">
     <div class="card">
       <h5 class="card-header">Add balance to user</h5>
@@ -63,7 +63,7 @@ <h5 class="card-header">Cards</h5>
   </div>
 </div>
 <hr/>
-<div class="row row-cols-2">
+<div class="undead-cols row row-cols-2">
   <div class="col">
     <div class="card">
       <h5 class="card-header">Top ups</h5>
@@ -138,7 +138,7 @@ <h5 class="card-header">Find user</h5>
     <btn class="btn btn-primary" id="show-user">Show user</btn>
   </div>
 </div>
-<div class="card w-100 mt-3">
+<div class="card w-100 mt-3 overflow-x-auto">
   <table class="table table-striped table-hover text-center align-middle">
     <thead>
       <tr>
diff --git a/admin_board_view/templates/user_home.html b/admin_board_view/templates/user_home.html
index 05c4d53..736ad21 100644
--- a/admin_board_view/templates/user_home.html
+++ b/admin_board_view/templates/user_home.html
@@ -7,7 +7,7 @@ <h5 class="mb-2">
     Current balance: <b>{{ user_info.euro_balance }}</b>
   </h5>  
   <hr/>
-  <div class="row row-cols-2">
+  <div class="undead-cols row row-cols-2">
     <div class="col">
       <div class="card">
         <h5 class="card-header">Product sales</h5>