Adding side bar menu.
This commit is contained in:
parent
4990ef0e71
commit
204c109b59
@ -173,13 +173,27 @@ body {
|
||||
width: 60%;
|
||||
height: 60%; }
|
||||
body nav.mobile-foldable {
|
||||
display: none;
|
||||
position: fixed;
|
||||
background: blueviolet;
|
||||
color: #f2eb8c; }
|
||||
color: #f2eb8c;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
top: 60px;
|
||||
height: calc(100% - 60px);
|
||||
display: block;
|
||||
z-index: 500;
|
||||
transition: left 0.5s ease-in; }
|
||||
body nav.mobile-foldable a {
|
||||
display: block; }
|
||||
display: block;
|
||||
font-size: 1.7em;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding-left: auto;
|
||||
padding-right: auto; }
|
||||
body nav.mobile-foldable div.child-categories-mobile {
|
||||
padding-left: 10%; }
|
||||
body nav.mobile-foldable.show {
|
||||
display: block; }
|
||||
left: 0; }
|
||||
body nav.mobile-shortcuts > a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -431,6 +445,8 @@ body {
|
||||
max-width: 694px; } }
|
||||
|
||||
@media (min-width: 1100px) {
|
||||
body nav.mobile-foldable, body nav.mobile-foldable.show {
|
||||
display: none; }
|
||||
body nav.mobile-shortcuts {
|
||||
display: none; }
|
||||
body div.search-in-page.active {
|
||||
@ -441,8 +457,6 @@ body {
|
||||
height: 80%;
|
||||
width: 90%;
|
||||
border: solid 1px black; }
|
||||
body div.page-contents nav.mobile-foldable, body div.page-contents nav.mobile-foldable.show {
|
||||
display: none; }
|
||||
body div.page-contents div.description.open-browser-container {
|
||||
margin-left: 0;
|
||||
margin-right: 0; }
|
||||
|
@ -24,39 +24,48 @@ body {
|
||||
z-index: 3;
|
||||
top: 0;
|
||||
flex-direction: column;
|
||||
|
||||
&.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
div.search-results {
|
||||
margin: 7px;
|
||||
|
||||
img {
|
||||
width: 75px;
|
||||
}
|
||||
|
||||
div.search-result {
|
||||
div.row-title-url-image {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
img {
|
||||
margin: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.bounding-search-bar {
|
||||
margin: 7px;
|
||||
width: calc(100% - 20px);
|
||||
border-radius: 10px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
|
||||
div.search {
|
||||
width: calc(100% - 60px);
|
||||
height: 60px;
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
a.up, a.down {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a.exit-search {
|
||||
width: 60px;
|
||||
background: whitesmoke;
|
||||
@ -64,17 +73,20 @@ body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.search {
|
||||
background: whitesmoke;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
display: flex;
|
||||
|
||||
a.search-icon {
|
||||
height: calc(100% - 28px);
|
||||
align-self: center;
|
||||
@ -87,15 +99,18 @@ body {
|
||||
border: solid gray 1px;
|
||||
aspect-ratio: 1 / 1;
|
||||
width: auto;
|
||||
|
||||
img {
|
||||
height: 80%;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
}
|
||||
|
||||
div.fake-text-box {
|
||||
width: calc(100% - 60px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
input[type="text"] {
|
||||
font-size: 30px;
|
||||
width: 100%;
|
||||
@ -106,6 +121,7 @@ body {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p, h1, h2, h3, h4, a {
|
||||
font-family: 'arial';
|
||||
}
|
||||
@ -205,8 +221,8 @@ body {
|
||||
text-decoration: none;
|
||||
color: $color_div;
|
||||
margin: 0;
|
||||
|
||||
background: $background_div;
|
||||
|
||||
&:hover, &:focus {
|
||||
background: $color_div;
|
||||
color: $background_div;
|
||||
@ -226,12 +242,14 @@ body {
|
||||
a {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
a.search-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
background: aliceblue;
|
||||
border-radius: 10px;
|
||||
@ -243,19 +261,36 @@ body {
|
||||
}
|
||||
|
||||
nav.mobile-foldable {
|
||||
display: none;
|
||||
position: fixed;
|
||||
background: $background_div;
|
||||
color: $color_div;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
top: 60px;
|
||||
height: calc(100% - 60px);
|
||||
display: block;
|
||||
z-index: 500;
|
||||
|
||||
transition: left 0.5s ease-in;
|
||||
|
||||
a {
|
||||
//background: $color_div;
|
||||
//color: $background_div;
|
||||
display: block;
|
||||
font-size: 1.7em;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding-left: auto;
|
||||
padding-right: auto;
|
||||
}
|
||||
div.child-categories-mobile {
|
||||
padding-left: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
nav.mobile-foldable.show {
|
||||
display: block;
|
||||
left: 0;
|
||||
|
||||
}
|
||||
|
||||
nav.mobile-shortcuts > a {
|
||||
@ -303,6 +338,7 @@ body {
|
||||
div.burguillos-logo-container.active > img {
|
||||
transform: rotate(-1.5707963268rad);
|
||||
}
|
||||
|
||||
div.search-in-page {
|
||||
display: none;
|
||||
position: fixed;
|
||||
@ -312,6 +348,7 @@ body {
|
||||
align-items: center;
|
||||
background: $background_div;
|
||||
z-index: 3;
|
||||
|
||||
a.up, a.down {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -326,19 +363,22 @@ body {
|
||||
border-radius: 10px;
|
||||
border: solid gray 1px;
|
||||
aspect-ratio: 1/1;
|
||||
|
||||
img {
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
span {
|
||||
color: whitesmoke;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
nav.mobile-shortcuts {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
@ -389,9 +429,11 @@ body {
|
||||
border: 3px solid $background_div;
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
|
||||
tr:hover {
|
||||
background: $background_div;
|
||||
color: $color_div;
|
||||
|
||||
th, td {
|
||||
border: 3px solid $color_div;
|
||||
}
|
||||
@ -626,10 +668,12 @@ body {
|
||||
a {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
div.page-contents {
|
||||
div.description {
|
||||
div.articles {
|
||||
@ -643,6 +687,7 @@ body {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 694px;
|
||||
}
|
||||
@ -652,22 +697,24 @@ body {
|
||||
|
||||
@media (min-width: 1100px) {
|
||||
body {
|
||||
nav.mobile-foldable, nav.mobile-foldable.show {
|
||||
display: none;
|
||||
}
|
||||
|
||||
nav.mobile-shortcuts {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div.search-in-page.active {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div.page-contents {
|
||||
nav.mobile-foldable, nav.mobile-foldable.show {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div.description.open-browser-container {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
div.description {
|
||||
margin-left: 10%;
|
||||
margin-right: 10%;
|
||||
@ -737,6 +784,7 @@ body {
|
||||
height: 120px;
|
||||
top: calc(100% - 120px);
|
||||
}
|
||||
|
||||
div.page-contents {
|
||||
height: calc(100% - 60px - 120px);
|
||||
}
|
||||
|
@ -57,6 +57,7 @@
|
||||
</div>
|
||||
<div class="complete-container">
|
||||
%= include 'page/_mobile_menu', categories => $categories
|
||||
%= include 'page/_mobile_foldable', categories => $categories
|
||||
<div class="search-in-page">
|
||||
<a href="#" class="down">
|
||||
<img alt="Next result" src="/img/down.svg"/>
|
||||
@ -67,7 +68,6 @@
|
||||
</div>
|
||||
<div class="page-contents">
|
||||
%= include 'page/_desktop_menu', categories => $categories, current_category_slug => $current_category_slug
|
||||
%= include 'page/_mobile_foldable', categories => $categories
|
||||
<div class="description android open-browser-container">
|
||||
<a href="<%= $current_route %>" class="open-in-browser">
|
||||
<img alt="" src="/img/firefox.svg"/>
|
||||
|
@ -2,7 +2,7 @@
|
||||
<nav class="mobile-shortcuts">
|
||||
<a class="go-to-index" href="<%='/'.$categories->{index}{slug}%>"><%== $categories->{index}{menu_text} %></a>
|
||||
%= include 'page/_search_bar'
|
||||
<a href="#mobile-foldable" class="menu-expand">
|
||||
<a class="menu-expand">
|
||||
<img class="open-menu-icon" src="/img/hamburger-menu-yellow.webp" alt="Expandir el menú."/>
|
||||
<img class="open-menu-icon-hover" src="/img/hamburger-menu-purple.webp" alt="Expandir el menú."/>
|
||||
</a>
|
||||
|
Loading…
Reference in New Issue
Block a user