From ada52bad43a5c69b6c0d6ae83a480415db2a5d2f Mon Sep 17 00:00:00 2001 From: Amir Date: Thu, 12 Sep 2024 21:36:10 +0200 Subject: [PATCH] mobile version edited --- static/css/style.css | 83 +++++++++++++++++++++++++++------------- templates/base.html | 4 +- templates/header.html | 46 +++++----------------- templates/side_menu.html | 31 +++++++++++++++ 4 files changed, 100 insertions(+), 64 deletions(-) create mode 100644 templates/side_menu.html diff --git a/static/css/style.css b/static/css/style.css index 74992bee..d09dbb80 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -14,9 +14,9 @@ header { } .side-menu { - position: fixed; - top: 0; + position: fixed; right: 0; + top: 0; width: 256px; min-height: 100vh; overflow-y: scroll; @@ -57,7 +57,7 @@ header { } .menu_bar-top { - width: 25px; + width: 30px; } .menu_bar-mid { @@ -65,21 +65,7 @@ header { } .menu_bar-bot { - width: 25px; -} - -.menu-opened .menu_bar-top { - transform: rotate(45deg); - transform-origin: 15% 15%; -} - -.menu-opened .menu_bar-mid { - opacity: 0; -} - -.menu-opened .menu_bar-bot { - transform: rotate(-45deg); - transform-origin: 15% 95%; + width: 30px; } .side-toggle { @@ -99,12 +85,6 @@ header { text-decoration: none; } -.saburly-footer, -.content{ - margin-left: 10%; - margin-right: 10%; -} - footer { background-color: #5763AB; width: 100%; @@ -136,18 +116,45 @@ footer { color: white; } -/* Hide side menu on large screens */ @media (min-width: 1024px) { .side-menu { display: none; } + .saburly-footer, + .content { + margin-left: 10%; + margin-right: 10%; + } + .empty-menu{ + display: block; + } + .empty-menu-small{ + display: none; + } } -/* Show side menu on smaller screens */ @media (max-width: 1023px) { .side-menu { display: block; } + .empty-menu{ + display: none; + } + .empty-menu-small{ + display: block; + } + .side-panel { + width: 100%; + padding-left: 0; + padding-right: 0; + } + .content { + width: 100%; + margin-left: 0; + margin-right: 0; + padding-left: 0; + padding-right: 0; + } } .side-menu { @@ -168,3 +175,27 @@ footer { transform: translateY(0); transition: transform 0.3s ease; } + + +.side-menu.active { + display: block; +} + +.menu-opened .menu_bar-top { + transform: rotate(45deg); + transform-origin: 15% 15%; +} + +.menu-opened .menu_bar-mid { + opacity: 0; +} + +.menu-opened .menu_bar-bot { + transform: rotate(-45deg); + transform-origin: 15% 95%; +} + +.menu-opened .side-panel { + position:absolute; + left: -256px; +} \ No newline at end of file diff --git a/templates/base.html b/templates/base.html index f1e21a8b..d1c3f157 100644 --- a/templates/base.html +++ b/templates/base.html @@ -21,7 +21,7 @@ {% block extra_head %}{% endblock %} - +
{% include 'header.html' %}
@@ -30,6 +30,7 @@
{% include 'footer.html' %}
+ {% include 'side_menu.html'%}