sergiotarxz
/
burguillos.info
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Adding side bar menu.

This commit is contained in:
Sergiotarxz 2023-09-28 00:20:34 +02:00
parent 4990ef0e71
commit 204c109b59
4 changed files with 192 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
public/css/styles.css
View File

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

292
public/css/styles.scss
View File

@ -24,88 +24,104 @@ body {
z-index: 3;
top: 0;
flex-direction: column;
&.active {
display: flex;
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;
}
}
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;
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;
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;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
img {
width: 60%;
}
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;
margin: 7px;
display: flex;
background: aliceblue;
align-items: center;
padding: 7px;
border-radius: 10px;
border: solid gray 1px;
height: calc(100% - 28px);
align-self: center;
margin: 7px;
display: flex;
background: aliceblue;
align-items: center;
padding: 7px;
border-radius: 10px;
border: solid gray 1px;
aspect-ratio: 1 / 1;
width: auto;
img {
height: 80%;
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%;
height: 70%;
background: none;
border: none;
outline: none;
}
width: calc(100% - 60px);
display: flex;
align-items: center;
input[type="text"] {
font-size: 30px;
width: 100%;
height: 70%;
background: none;
border: none;
outline: none;
}
}
}
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,36 +242,55 @@ 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;
padding: 10%;
width: 60%;
height: 60%;
}
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
img {
background: aliceblue;
border-radius: 10px;
padding: 10%;
width: 60%;
height: 60%;
}
}
}
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,33 +348,37 @@ body {
align-items: center;
background: $background_div;
z-index: 3;
a.up, a.down {
display: flex;
align-items: center;
justify-content: center;
height: calc(100% - 28px);
align-self: center;
margin: 7px;
display: flex;
background: aliceblue;
align-items: center;
padding: 7px;
border-radius: 10px;
border: solid gray 1px;
aspect-ratio: 1/1;
img {
height: 80%;
}
a.up, a.down {
display: flex;
align-items: center;
justify-content: center;
height: calc(100% - 28px);
align-self: center;
margin: 7px;
display: flex;
background: aliceblue;
align-items: center;
padding: 7px;
border-radius: 10px;
border: solid gray 1px;
aspect-ratio: 1/1;
img {
height: 80%;
}
}
span {
color: whitesmoke;
font-size: 25px;
color: whitesmoke;
font-size: 25px;
}
&.active {
display: flex;
display: flex;
}
}
nav.mobile-shortcuts {
position: fixed;
display: flex;
@ -389,12 +429,14 @@ 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;
}
background: $background_div;
color: $color_div;
th, td {
border: 3px solid $color_div;
}
}
td, th {
@ -623,13 +665,15 @@ body {
@media (min-width: 694px) {
body {
div.carousel {
a {
font-size: 20px;
}
h3 {
font-size: 25px;
}
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;
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%;
@ -726,19 +773,20 @@ body {
}
@media (max-width: 200px) {
body {
font-size: 20px;
}
body {
font-size: 20px;
}
}
@media (max-height: 400px) {
body {
div.carousel {
height: 120px;
top: calc(100% - 120px);
}
div.page-contents {
height: calc(100% - 60px - 120px);
}
body {
div.carousel {
height: 120px;
top: calc(100% - 120px);
}
div.page-contents {
height: calc(100% - 60px - 120px);
}
}
}

2
templates/layouts/default.html.ep
View File

@ -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
templates/page/_mobile_menu.html.ep
View File

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