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

12
views/home.twig
View file

@ -6,7 +6,7 @@
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="nav"> <div class="nav">
<div <button
id="nav-enabler" id="nav-enabler"
class="nav-item nav-mobile-enabler"> class="nav-item nav-mobile-enabler">
<div class="nav-icon"> <div class="nav-icon">
@ -23,9 +23,9 @@
</i> </i>
</div> </div>
</div> </div>
</div> </button>
<div id="nav-content"> <div id="nav-content">
<div class="nav-item" id="nav-all"> <button class="nav-item" id="nav-all">
<div class="nav-icon"> <div class="nav-icon">
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <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> <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> </svg>
</div> </div>
</div> </div>
</div> </button>
{% for tag in tags %} {% 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"> <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 }}"> <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 <path
@ -68,7 +68,7 @@
</svg> </svg>
</div> </div>
</div> </div>
</div> </button>
{% endfor %} {% endfor %}
</div> </div>
</div> </div>