add responsive design for phone
This commit is contained in:
parent
823884d265
commit
3679b59a03
@ -1,4 +1,5 @@
|
||||
|
||||
|
||||
body
|
||||
{
|
||||
display: grid;
|
||||
@ -11,14 +12,12 @@ body
|
||||
"Menu Menu footer footer footer footer footer"
|
||||
}
|
||||
|
||||
|
||||
header{
|
||||
grid-area: header;
|
||||
width: 100%;
|
||||
.menu-button {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
body > main {
|
||||
width: 100%;
|
||||
header {
|
||||
grid-area: header;
|
||||
}
|
||||
|
||||
main
|
||||
@ -40,6 +39,74 @@ main > nav
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media only screen and (max-width: 600px)
|
||||
{
|
||||
body {
|
||||
grid-template-areas:
|
||||
"header"
|
||||
"main "
|
||||
"footer";
|
||||
}
|
||||
|
||||
.menu-header {
|
||||
font-size: 4vw;
|
||||
width: 20vw;
|
||||
height: 31vw;
|
||||
}
|
||||
|
||||
.menu-button {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.hide-menu {
|
||||
grid-template-areas:
|
||||
"header"
|
||||
"main "
|
||||
"footer";
|
||||
}
|
||||
|
||||
.print-menu
|
||||
{
|
||||
grid-template-areas:
|
||||
"header"
|
||||
"Menu"
|
||||
"main"
|
||||
"main"
|
||||
"footer";
|
||||
}
|
||||
|
||||
.print-menu > aside {
|
||||
max-width: unset;
|
||||
}
|
||||
|
||||
aside > nav {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: center;
|
||||
text-align: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
nav li {
|
||||
word-break: keep-all;
|
||||
width: 115px;
|
||||
height: 100px;
|
||||
|
||||
}
|
||||
|
||||
nav .icons {
|
||||
width: 80px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
aside
|
||||
{
|
||||
grid-area: Menu;
|
||||
@ -112,7 +179,6 @@ header > nav {
|
||||
}
|
||||
|
||||
aside > nav {
|
||||
|
||||
padding-left: 1.5vw;
|
||||
}
|
||||
|
||||
@ -152,4 +218,3 @@ nav > ul:first-of-type, ul
|
||||
color: var(--pico-color-grey-950);
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -1,21 +1,26 @@
|
||||
<header>
|
||||
<nav>
|
||||
<button class="menu-button menu-header" onclick="toggleMenu()">
|
||||
Menu
|
||||
<span class="menu-icon"></span>
|
||||
</button>
|
||||
|
||||
<a href="/logs/">
|
||||
<button>
|
||||
<button class="menu-header">
|
||||
Mes logs <br/>
|
||||
<span class="lists-rounded"></span>
|
||||
</button>
|
||||
</a>
|
||||
|
||||
<a href="/logout/">
|
||||
<button>
|
||||
Se déconnecter <br/>
|
||||
<button class="menu-header">
|
||||
Deconnexion <br/>
|
||||
<span class="logout"></span>
|
||||
</button>
|
||||
</a>
|
||||
|
||||
<details class="dropdown">
|
||||
<summary role="button" class="secondary">Theme</summary>
|
||||
<summary role="button" class="secondary menu-header">Theme</summary>
|
||||
<ul>
|
||||
<li><a href="#" data-theme-switcher="auto">Auto</a></li>
|
||||
<li><a href="#" data-theme-switcher="light">Clair</a></li>
|
||||
@ -25,3 +30,12 @@
|
||||
</nav>
|
||||
|
||||
</header>
|
||||
|
||||
<script>
|
||||
|
||||
function toggleMenu() {
|
||||
document.body.classList.toggle('print-menu');
|
||||
document.body.classList.add('hide-menu');
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@ -8,43 +8,43 @@
|
||||
<span class="blog"></span>
|
||||
Mon blog
|
||||
</h4>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
|
||||
<a href="/myblog/new-article/" {% if request.path == "/myblog/new-article/" %} class="invert" {% endif %} > <span class="new-article-blog"></span>
|
||||
<a href="/myblog/new-article/" {% if request.path == "/myblog/new-article/" %} class="invert" {% endif %} > <span class="icons new-article-blog"></span>
|
||||
Ecrire un billet </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/myblog/list-articles/" {% if request.path == "/myblog/list-articles/" %} class="invert" {% endif %} ><span class="list-articles-blog"></span>
|
||||
<a href="/myblog/list-articles/" {% if request.path == "/myblog/list-articles/" %} class="invert" {% endif %} ><span class="icons list-articles-blog"></span>
|
||||
Gérer mes billets
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/myblog/personalize/" {% if request.path == "/myblog/personalize/" %} class="invert" {% endif %} ><span class="custom-blog"></span>
|
||||
Configurer mon site et mon blog
|
||||
<a href="/myblog/personalize/" {% if request.path == "/myblog/personalize/" %} class="invert" {% endif %} ><span class="icons custom-blog"></span>
|
||||
Configurer mon site web
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/myblog/view/" {% if request.path == "/myblog/view/" %} class="invert" {% endif %} ><span class="view-blog" aria-hidden="true"></span>
|
||||
<a href="/myblog/view/" {% if request.path == "/myblog/view/" %} class="invert" {% endif %} ><span class="icons view-blog" aria-hidden="true"></span>
|
||||
Voir mon blog
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<h4>
|
||||
<span class="folder-home"></span> Mes fichiers
|
||||
</h4>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/view/" {% if request.path == "/view/" %} class="invert" {% endif %}> <span class="myfiles"></span> Mes dossiers personels </a>
|
||||
<a href="/view/" {% if request.path == "/view/" %} class="invert" {% endif %}> <span class="icons myfiles"></span> Mes dossiers personels </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/gallery/" {% if request.path == "/gallery/" %} class="invert" {% endif %} > <span class="mygallery"></span> Ma gallerie d'images </a>
|
||||
<a href="/gallery/" {% if request.path == "/gallery/" %} class="invert" {% endif %} > <span class="icons mygallery"></span> Ma gallerie d'images </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/filesupload/" {% if request.path == "/filesupload/" %} class="invert" {% endif %}> <span class="send-files"></span> Envoyer des fichiers </a>
|
||||
<a href="/filesupload/" {% if request.path == "/filesupload/" %} class="invert" {% endif %}> <span class="icons send-files"></span> Envoyer des fichiers </a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -57,12 +57,12 @@
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/mymailbox/alias" {% if request.path == "/mymailbox/messagerie" %} class="invert" {% endif %}><span class="infos-messaging"></span>
|
||||
<a href="/mymailbox/alias" {% if request.path == "/mymailbox/messagerie" %} class="invert" {% endif %}><span class="icons infos-messaging"></span>
|
||||
Ma messagerie
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/mymailbox/alias" {% if request.path == "/mymailbox/alias" %} class="invert" {% endif %} ><span class="myalias"></span>
|
||||
<a href="/mymailbox/alias" {% if request.path == "/mymailbox/alias" %} class="invert" {% endif %} ><span class="icons myalias"></span>
|
||||
Gerer mes alias
|
||||
</a>
|
||||
</li>
|
||||
@ -78,11 +78,11 @@
|
||||
<span class="caret"></span>
|
||||
</h4>
|
||||
<ul>
|
||||
<li ><a href="/profil/" {% if request.path == "/profil/" %} class="invert" {% endif %} ><span class="configure-profile"></span> Personnaliser mon profil</a></li>
|
||||
<li><a href="/profil/change-password/" {% if request.path == "/profil/change-password/" %} class="invert" {% endif %} > <span class="mypassword" aria-hidden="true"></span>
|
||||
<li ><a href="/profil/" {% if request.path == "/profil/" %} class="invert" {% endif %} ><span class="icons configure-profile"></span> Personnaliser mon profil</a></li>
|
||||
<li><a href="/profil/change-password/" {% if request.path == "/profil/change-password/" %} class="invert" {% endif %} > <span class="icons mypassword" aria-hidden="true"></span>
|
||||
Changer mon mot de passe </a></li>
|
||||
<li><a href="/delete_me/" {% if request.path == "/delete_me/" %} class="invert" {% endif %} ><span class="user-delete"></span> Supprimer mon compte </a></li>
|
||||
<li><a href="/invitation/" {% if request.path == "invitation/" %} class="invert" {% endif %} ><span class="invite"></span> Inviter une personne</a></li>
|
||||
<li><a href="/delete_me/" {% if request.path == "/delete_me/" %} class="invert" {% endif %} ><span class="icons user-delete"></span> Supprimer mon compte </a></li>
|
||||
<li><a href="/invitation/" {% if request.path == "invitation/" %} class="invert" {% endif %} ><span class="icons invite"></span> Inviter une personne</a></li>
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user