pagesassos/server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Activity

fix(Home): more accesibles home tag nav button

Browse source
This commit is contained in:
Matthieu Bessat 2020-09-05 23:59:18 +02:00
parent 5bd5a5f0df
commit 0ec61c855d
2 changed files with 21 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
assets/development/styles/home.css
View file

@ -99,15 +99,26 @@ Nav
}
.nav-item {
width: 15em;
width: 18em;
padding: 1em;
border-radius: 4px;
margin-bottom: 0.7em;
border: 3px solid rgba(255, 111, 10, 0.7);
color: initial;
display: flex;
cursor: pointer;
transition: ease-in-out 0.1s;
height: 1.2em;
transition: all 0.2s !important;
text-decoration: unset;
font: inherit;
background: white;
height: auto;
text-align: left;
}
.nav-item:hover {
text-decoration: unset;
transform: scale(1.05);
color: initial;
}
.nav-item svg {
@ -162,10 +173,6 @@ Nav
opacity: 1;
}
.nav-item:hover {
transform: scale(1.05);
}
#nav-enabler {
display: none;
}
@ -370,7 +377,7 @@ Nav
}
.nav-item {
width: auto;
width: 100%;
}
.nav-item:hover {
transform: scale(1);

12
views/home.twig
View file

@ -6,7 +6,7 @@
{% endblock %}
{% block content %}
<div class="nav">
<div
<button
id="nav-enabler"
class="nav-item nav-mobile-enabler">
<div class="nav-icon">
@ -23,9 +23,9 @@
</i>
</div>
</div>
</div>
</button>
<div id="nav-content">
<div class="nav-item" id="nav-all">
<button class="nav-item" id="nav-all">
<div class="nav-icon">
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M328 256c0 39.8-32.2 72-72 72s-72-32.2-72-72 32.2-72 72-72 72 32.2 72 72zm104-72c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72zm-352 0c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72z"></path>
@ -44,9 +44,9 @@
</svg>
</div>
</div>
</div>
</button>
{% for tag in tags %}
<div class="nav-item" data-tag-id="{{ tag._id }}">
<button class="nav-item" data-tag-id="{{ tag._id }}">
<div class="nav-icon">
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 {{ tag.icon.width }} {{ tag.icon.height }}">
<path
@ -68,7 +68,7 @@
</svg>
</div>
</div>
</div>
</button>
{% endfor %}
</div>
</div>