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>