senaduka/old-saburly-wagtail-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added some style for small-devices

Browse Source
This commit is contained in:
Amir
2024-09-13 00:53:51 +02:00
parent ada52bad43
commit 7356bb11c0
4 changed files with 55 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
static/css/style.css
View File

@@ -24,7 +24,7 @@ header {
background-color: #5763ab; background-color: #5763ab;
z-index: 0; z-index: 0;
display: none; display: none;
transition: all 0.25s ease; transition: transform 0.5s ease-out;
} }
@@ -57,7 +57,7 @@ header {
} }
.menu_bar-top { .menu_bar-top {
width: 30px; width: 25px;
} }
.menu_bar-mid { .menu_bar-mid {
@@ -65,7 +65,7 @@ header {
} }
.menu_bar-bot { .menu_bar-bot {
width: 30px; width: 25px;
} }
.side-toggle { .side-toggle {
@@ -137,6 +137,10 @@ footer {
.side-menu { .side-menu {
display: block; display: block;
} }
.saburly-footer{
margin-left: 10%;
margin-right: 10%;
}
.empty-menu{ .empty-menu{
display: none; display: none;
} }
@@ -145,26 +149,26 @@ footer {
} }
.side-panel { .side-panel {
width: 100%; width: 100%;
padding-left: 0;
padding-right: 0;
} }
.content { .content {
width: 100%; width: 95%;
margin-left: 0; margin-left: 2.5%;
margin-right: 0; margin-right: 2.5%;
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
} }
.saburly-menu {
z-index: 9999;
margin-left: 5%;
margin-right: 5%;
}
.saburly-logo{
margin-right: 112px;
padding-top: 5px;
padding-bottom: 5px;
}
} }
.side-menu {
display: none;
}
.side-menu.active {
display: block;
transform: translateX(0);
}
.header-hidden { .header-hidden {
transform: translateY(-100%); transform: translateY(-100%);
@@ -176,26 +180,34 @@ footer {
transition: transform 0.3s ease; transition: transform 0.3s ease;
} }
.side-menu {
display: none;
}
.side-menu.active { .side-menu.active {
display: block; display: block;
} }
.menu-opened .menu_bar-top { .content:before {
transform: rotate(45deg); content: '';
transform-origin: 15% 15%; background-color: rgba(0, 0, 0, 0);
}
.content-open:before {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 99;
}
.content-open{
margin-left: -256px;
transition: margin-left 0.1s;
background-color: rgba(0, 0, 0, 0.5);
} }
.menu-opened .menu_bar-mid { .header-move{
opacity: 0; margin-left: -256px;
} transition: margin-left 0.1s;
background-color: rgba(55, 65, 105, 1.0);
.menu-opened .menu_bar-bot {
transform: rotate(-45deg);
transform-origin: 15% 95%;
}
.menu-opened .side-panel {
position:absolute;
left: -256px;
} }

9
templates/base.html
View File

@@ -24,13 +24,13 @@
<body class="font-sans"> <body class="font-sans">
<main class="side-panel panel"> <main class="side-panel panel">
{% include 'header.html' %} {% include 'header.html' %}
{% include 'side_menu.html'%}
<div class="content"> <div class="content">
{% block content %} {% block content %}
{% endblock %} {% endblock %}
</div> </div>
{% include 'footer.html' %} {% include 'footer.html' %}
</main> </main>
{% include 'side_menu.html'%}
<script> <script>
//side menu //side menu
@@ -38,17 +38,22 @@
const sideToggle = document.querySelector('.side-toggle'); const sideToggle = document.querySelector('.side-toggle');
const sideMenu = document.querySelector('.side-menu'); const sideMenu = document.querySelector('.side-menu');
const sideCloseButtons = document.querySelectorAll('.side-close'); const sideCloseButtons = document.querySelectorAll('.side-close');
const toggleButton = document.querySelector('.menu_icon'); const content = document.querySelector('.content');
const headermove = document.getElementById('header');
sideToggle.addEventListener('click', function() { sideToggle.addEventListener('click', function() {
sideMenu.classList.toggle('active'); sideMenu.classList.toggle('active');
this.classList.toggle('menu-opened'); this.classList.toggle('menu-opened');
content.classList.toggle('content-open');
headermove.classList.toggle('header-move');
}); });
sideCloseButtons.forEach(button => { sideCloseButtons.forEach(button => {
button.addEventListener('click', function() { button.addEventListener('click', function() {
sideMenu.classList.remove('active'); sideMenu.classList.remove('active');
sideToggle.classList.remove('menu-opened'); sideToggle.classList.remove('menu-opened');
content.classList.remove('content-open');
headermove.classList.remove('header-move');
}); });
}); });
}) })

4
templates/header.html
View File

@@ -1,8 +1,8 @@
<header id="header" class="header-visible"> <header id="header" class="header-visible">
<div class="saburly-menu"> <div class="saburly-menu">
<nav class="container mx-auto flex items-center justify-between lg:p-6 p-4"> <nav class="container mx-auto flex items-center justify-between lg:p-6 p-2">
<a href="/"> <a href="/">
<div class="max-w-xs mr-8"> <div class="max-w-xs mr-8 saburly-logo">
{% load static %} {% load static %}
<img <img
src="{% static './images/saburly-logo-w.svg' %}" src="{% static './images/saburly-logo-w.svg' %}"

2
templates/side_menu.html
View File

@@ -1,6 +1,6 @@
<div class="side-menu hidden"> <div class="side-menu hidden">
<ul class="m-0 p-0 mt-4 side-navigation list-reset"> <ul class="m-0 p-0 mt-4 side-navigation list-reset">
<br /> <div class="side-close text-white text-3xl font-bold px-4 m-2 opacity-50 hover:opacity-100">X</div>
<a href="/" class="side-close menu-home no-underline"> <a href="/" class="side-close menu-home no-underline">
<li class="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white"> <li class="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
Home Home