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

76
static/css/style.css
View File

@@ -24,7 +24,7 @@ header {
background-color: #5763ab;
z-index: 0;
display: none;
transition: all 0.25s ease;
transition: transform 0.5s ease-out;
}
@@ -57,7 +57,7 @@ header {
}
.menu_bar-top {
width: 30px;
width: 25px;
}
.menu_bar-mid {
@@ -65,7 +65,7 @@ header {
}
.menu_bar-bot {
width: 30px;
width: 25px;
}
.side-toggle {
@@ -137,6 +137,10 @@ footer {
.side-menu {
display: block;
}
.saburly-footer{
margin-left: 10%;
margin-right: 10%;
}
.empty-menu{
display: none;
}
@@ -145,26 +149,26 @@ footer {
}
.side-panel {
width: 100%;
padding-left: 0;
padding-right: 0;
}
.content {
width: 100%;
margin-left: 0;
margin-right: 0;
width: 95%;
margin-left: 2.5%;
margin-right: 2.5%;
padding-left: 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 {
transform: translateY(-100%);
@@ -176,26 +180,34 @@ footer {
transition: transform 0.3s ease;
}
.side-menu {
display: none;
}
.side-menu.active {
display: block;
display: block;
}
.menu-opened .menu_bar-top {
transform: rotate(45deg);
transform-origin: 15% 15%;
.content:before {
content: '';
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 {
opacity: 0;
.header-move{
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;
}

11
templates/base.html
View File

@@ -24,13 +24,13 @@
<body class="font-sans">
<main class="side-panel panel">
{% include 'header.html' %}
{% include 'side_menu.html'%}
<div class="content">
{% block content %}
{% endblock %}
</div>
{% include 'footer.html' %}
</main>
{% include 'side_menu.html'%}
<script>
//side menu
@@ -38,17 +38,22 @@
const sideToggle = document.querySelector('.side-toggle');
const sideMenu = document.querySelector('.side-menu');
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() {
sideMenu.classList.toggle('active');
this.classList.toggle('menu-opened');
content.classList.toggle('content-open');
headermove.classList.toggle('header-move');
});
sideCloseButtons.forEach(button => {
button.addEventListener('click', function() {
sideMenu.classList.remove('active');
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">
<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="/">
<div class="max-w-xs mr-8">
<div class="max-w-xs mr-8 saburly-logo">
{% load static %}
<img
src="{% static './images/saburly-logo-w.svg' %}"

2
templates/side_menu.html
View File

@@ -1,6 +1,6 @@
<div class="side-menu hidden">
<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">
<li class="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
Home