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

mobile version edited

Browse Source
This commit is contained in:
Amir
2024-09-12 21:36:10 +02:00
parent 8c109d6712
commit ada52bad43
4 changed files with 100 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
static/css/style.css
View File

@@ -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;
}

4
templates/base.html
View File

@@ -21,7 +21,7 @@
{% block extra_head %}{% endblock %}
</head>
<body class="font-sans mx-auto">
<body class="font-sans">
<main class="side-panel panel">
{% include 'header.html' %}
<div class="content">
@@ -30,6 +30,7 @@
</div>
{% include 'footer.html' %}
</main>
{% include 'side_menu.html'%}
<script>
//side menu
@@ -37,6 +38,7 @@
const sideToggle = document.querySelector('.side-toggle');
const sideMenu = document.querySelector('.side-menu');
const sideCloseButtons = document.querySelectorAll('.side-close');
const toggleButton = document.querySelector('.menu_icon');
sideToggle.addEventListener('click', function() {
sideMenu.classList.toggle('active');

46
templates/header.html
View File

@@ -43,41 +43,13 @@
</div>
</nav>
</div>
<div class="side-menu hidden">
<ul class="m-0 p-0 mt-4 side-navigation list-reset">
<button class="text-white text-2xl m-2 opacity-50 hover:opacity-100 px-2 side-close">
</button>
<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
</li>
</a>
<a href="/services" class="side-close menu-services no-underline">
<li class="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
Services
</li>
</a>
<a href="/about" class="side-close menu-about no-underline">
<li class="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
About Us
</li>
</a>
<a href="/contact" class="side-close menu-contact no-underline">
<li class="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
Request a quote
</li>
</a>
<a href="tel:7206432025" class="side-close menu-contact no-underline">
<li class="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
<i class="fas fa-phone mr-2 fa-flip-horizontal"></i>
720-643-2025
</li>
</a>
</ul>
</div>
</header>
</br>
</br>
</br>
</br>
<div class="empty-menu">
<br />
<br />
<br />
</div>
<div class="empty-menu-small">
<br />
<br />
</div>

31
templates/side_menu.html Normal file
View File

@@ -0,0 +1,31 @@
<div class="side-menu hidden">
<ul class="m-0 p-0 mt-4 side-navigation list-reset">
<br />
<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
</li>
</a>
<a href="/services" class="side-close menu-services no-underline">
<li class="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
Services
</li>
</a>
<a href="/about" class="side-close menu-about no-underline">
<li class="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
About Us
</li>
</a>
<a href="/contact" class="side-close menu-contact no-underline">
<li class="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
Request a quote
</li>
</a>
<a href="tel:7206432025" class="side-close menu-contact no-underline">
<li class="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
<i class="fas fa-phone mr-2 fa-flip-horizontal"></i>
720-643-2025
</li>
</a>
</ul>
</div>