add responsive design for phone

This commit is contained in:
2025-11-03 06:12:44 +01:00
parent 823884d265
commit 3679b59a03
3 changed files with 107 additions and 28 deletions

View File

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

View File

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