mirror of
https://github.com/ae-utbm/sith.git
synced 2025-06-27 05:35:16 +00:00
Merge pull request #1106 from ae-utbm/navbar-keyboard-navigation
Refactor navbar css and use details instead of div for better semantics
This commit is contained in:
Bartuccio Antoine
GitHub
commit
be32486115
@ -1,5 +1,7 @@
|
||||
@import "colors";
|
||||
|
||||
$desktop-size: 500px;
|
||||
|
||||
nav.navbar {
|
||||
background-color: $primary-dark-color;
|
||||
margin: 1em;
|
||||
@ -7,15 +9,24 @@ nav.navbar {
|
||||
border-radius: 0.6em;
|
||||
min-height: 40px;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
@media (max-width: $desktop-size) {
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0;
|
||||
margin: .2em;
|
||||
|
||||
>.content[mobile-display="hidden"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> .expand-button {
|
||||
>.content[mobile-display="revealed"] {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
>.expand-button {
|
||||
background-color: transparent;
|
||||
display: none;
|
||||
position: relative;
|
||||
@ -27,27 +38,27 @@ nav.navbar {
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
|
||||
> i {
|
||||
>i {
|
||||
font-size: 1.5em;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
@media (max-width: $desktop-size) {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
> .content {
|
||||
@media (min-width: 500px) {display: flex;
|
||||
>.content {
|
||||
@media (min-width: $desktop-size) {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex !important;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
> .menu,
|
||||
> .link {
|
||||
>.menu,
|
||||
>.link {
|
||||
box-sizing: border-box;
|
||||
width: 130px;
|
||||
height: 52px;
|
||||
@ -56,7 +67,7 @@ nav.navbar {
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
@media (max-width: $desktop-size) {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
justify-content: flex-start;
|
||||
@ -64,80 +75,75 @@ nav.navbar {
|
||||
&:last-child {
|
||||
border-radius: 0 0 .6em .6em;
|
||||
|
||||
> .content {
|
||||
>.content {
|
||||
box-shadow: 3px 3px 3px 0 #dfdfdf;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .menu > .head,
|
||||
> .link {
|
||||
>.menu>.head,
|
||||
>.link {
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
>.menu>summary,
|
||||
>.link {
|
||||
@media (max-width: $desktop-size) {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
>.link {
|
||||
padding: 10px 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
.link:hover,
|
||||
.menu:hover {
|
||||
background-color: rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
||||
> .menu > .head,
|
||||
> .link {
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
box-sizing: border-box;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.link:hover,
|
||||
.menu:hover {
|
||||
background-color: rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
||||
> .menu:hover > .content,
|
||||
> .menu > .head:hover + .content,
|
||||
> .menu > .content:hover {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
> .menu {
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
> .content {
|
||||
details.menu {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
z-index: 10;
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
background-color: white;
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
width: 130px;
|
||||
box-shadow: 3px 3px 3px 0 #dfdfdf;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
display: inline-block;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
position: absolute;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
box-shadow: inset 3px 3px 3px 0 #dfdfdf;
|
||||
summary {
|
||||
list-style: none;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
|
||||
@media (min-width: $desktop-size) {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
> li > a {
|
||||
summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul.content {
|
||||
list-style-type: none;
|
||||
background: white;
|
||||
margin: 0;
|
||||
|
||||
@media (min-width: $desktop-size) {
|
||||
box-shadow: 3px 3px 3px 0 #dfdfdf;
|
||||
}
|
||||
|
||||
>li>a {
|
||||
display: flex;
|
||||
padding: 15px 20px;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
@media (max-width: $desktop-size) {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|
||||
@ -124,10 +124,27 @@
|
||||
|
||||
{% block script %}
|
||||
<script>
|
||||
const menuItems = document.querySelectorAll(".navbar details[name='navbar'].menu");
|
||||
const isMobile = () => {
|
||||
return window.innerWidth >= 500;
|
||||
}
|
||||
for (const item of menuItems){
|
||||
item.addEventListener("mouseover", () => {
|
||||
if (isMobile()){
|
||||
item.setAttribute("open", "");
|
||||
}
|
||||
})
|
||||
item.addEventListener("mouseout", () => {
|
||||
if (isMobile()){
|
||||
item.removeAttribute("open");
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function showMenu() {
|
||||
let navbar = document.getElementById("navbar-content");
|
||||
const current = navbar.style.getPropertyValue("display");
|
||||
navbar.style.setProperty("display", current === "none" ? "block" : "none");
|
||||
const current = navbar.getAttribute("mobile-display");
|
||||
navbar.setAttribute("mobile-display", current === "hidden" ? "revealed" : "hidden")
|
||||
}
|
||||
|
||||
document.addEventListener("keydown", (e) => {
|
||||
|
||||
@ -1,47 +1,47 @@
|
||||
<nav class="navbar">
|
||||
<button class="expand-button" onclick="showMenu()"><i class="fa fa-bars"></i></button>
|
||||
<div id="navbar-content" class="content" style="display: none;">
|
||||
<div id="navbar-content" class="content" mobile-display="hidden">
|
||||
<a class="link" href="{{ url('core:index') }}">{% trans %}Main{% endtrans %}</a>
|
||||
<div class="menu">
|
||||
<span class="head">{% trans %}Associations & Clubs{% endtrans %}</span>
|
||||
<details name="navbar" class="menu">
|
||||
<summary class="head">{% trans %}Associations & Clubs{% endtrans %}</summary>
|
||||
<ul class="content">
|
||||
<li><a href="{{ url('core:page', page_name='ae') }}">{% trans %}AE{% endtrans %}</a></li>
|
||||
<li><a href="{{ url('core:page', page_name='clubs') }}">{% trans %}AE's clubs{% endtrans %}</a></li>
|
||||
<li><a href="{{ url('core:page', page_name='utbm-associations') }}">{% trans %}Others UTBM's Associations{% endtrans %}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="menu">
|
||||
<span class="head">{% trans %}Events{% endtrans %}</span>
|
||||
</details>
|
||||
<details name="navbar" class="menu">
|
||||
<summary class="head">{% trans %}Events{% endtrans %}</summary>
|
||||
<ul class="content">
|
||||
<li><a href="{{ url('election:list') }}">{% trans %}Elections{% endtrans %}</a></li>
|
||||
<li><a href="{{ url('core:page', page_name='ga') }}">{% trans %}Big event{% endtrans %}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</details>
|
||||
<a class="link" href="{{ url('forum:main') }}">{% trans %}Forum{% endtrans %}</a>
|
||||
<a class="link" href="{{ url('sas:main') }}">{% trans %}Gallery{% endtrans %}</a>
|
||||
<a class="link" href="{{ url('eboutic:main') }}">{% trans %}Eboutic{% endtrans %}</a>
|
||||
<div class="menu">
|
||||
<span class="head">{% trans %}Services{% endtrans %}</span>
|
||||
<details name="navbar" class="menu">
|
||||
<summary class="head">{% trans %}Services{% endtrans %}</summary>
|
||||
<ul class="content">
|
||||
<li><a href="{{ url('matmat:search_clear') }}">{% trans %}Matmatronch{% endtrans %}</a></li>
|
||||
<li><a href="{{ url('core:file_list') }}">{% trans %}Files{% endtrans %}</a></li>
|
||||
<li><a href="{{ url('pedagogy:guide') }}">{% trans %}Pedagogy{% endtrans %}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="menu">
|
||||
<span class="head">{% trans %}My Benefits{% endtrans %}</span>
|
||||
</details>
|
||||
<details name="navbar" class="menu">
|
||||
<summary class="head">{% trans %}My Benefits{% endtrans %}</summary>
|
||||
<ul class="content">
|
||||
<li><a href="{{ url('core:page', page_name='partenaires')}}">{% trans %}Sponsors{% endtrans %}</a></li>
|
||||
<li><a href="{{ url('core:page', page_name='avantages') }}">{% trans %}Subscriber benefits{% endtrans %}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="menu">
|
||||
<span class="head">{% trans %}Help{% endtrans %}</span>
|
||||
</details>
|
||||
<details name="navbar" class="menu">
|
||||
<summary class="head">{% trans %}Help{% endtrans %}</summary>
|
||||
<ul class="content">
|
||||
<li><a href="{{ url('core:page', page_name='FAQ') }}">{% trans %}FAQ{% endtrans %}</a></li>
|
||||
<li><a href="{{ url('core:page', 'contacts') }}">{% trans %}Contacts{% endtrans %}</a></li>
|
||||
<li><a href="{{ url('core:page', page_name='Index') }}">{% trans %}Wiki{% endtrans %}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user