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

Adding side bar menu.

Browse Source
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%; width: 60%;
height: 60%; } height: 60%; }
body nav.mobile-foldable { body nav.mobile-foldable {
display: none; position: fixed;
background: blueviolet; 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 { 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 { body nav.mobile-foldable.show {
display: block; } left: 0; }
body nav.mobile-shortcuts > a { body nav.mobile-shortcuts > a {
display: flex; display: flex;
align-items: center; align-items: center;
@ -431,6 +445,8 @@ body {
max-width: 694px; } } max-width: 694px; } }
@media (min-width: 1100px) { @media (min-width: 1100px) {
body nav.mobile-foldable, body nav.mobile-foldable.show {
display: none; }
body nav.mobile-shortcuts { body nav.mobile-shortcuts {
display: none; } display: none; }
body div.search-in-page.active { body div.search-in-page.active {
@ -441,8 +457,6 @@ body {
height: 80%; height: 80%;
width: 90%; width: 90%;
border: solid 1px black; } 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 { body div.page-contents div.description.open-browser-container {
margin-left: 0; margin-left: 0;
margin-right: 0; } margin-right: 0; }

292
public/css/styles.scss
View File

@ -24,88 +24,104 @@ body {
z-index: 3; z-index: 3;
top: 0; top: 0;
flex-direction: column; flex-direction: column;
&.active { &.active {
display: flex; display: flex;
} }
div.search-results { div.search-results {
margin: 7px; margin: 7px;
img {
width: 75px; img {
} width: 75px;
div.search-result { }
div.row-title-url-image {
display: flex; div.search-result {
flex-direction: row; div.row-title-url-image {
img { display: flex;
margin: 10px; flex-direction: row;
}
} img {
margin: 10px;
}
} }
}
} }
div.bounding-search-bar { div.bounding-search-bar {
margin: 7px; margin: 7px;
width: calc(100% - 20px); width: calc(100% - 20px);
border-radius: 10px; 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; height: 60px;
display: flex; display: flex;
div.search { justify-content: center;
width: calc(100% - 60px); align-items: center;
height: 60px;
margin-left: 0px; img {
margin-right: 0px; width: 60%;
}
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%;
}
} }
}
} }
} }
div.search { div.search {
background: whitesmoke; background: whitesmoke;
margin-left: 10px; margin-left: 10px;
margin-right: 10px; margin-right: 10px;
display: flex; display: flex;
a.search-icon { a.search-icon {
height: calc(100% - 28px); height: calc(100% - 28px);
align-self: center; align-self: center;
margin: 7px; margin: 7px;
display: flex; display: flex;
background: aliceblue; background: aliceblue;
align-items: center; align-items: center;
padding: 7px; padding: 7px;
border-radius: 10px; border-radius: 10px;
border: solid gray 1px; border: solid gray 1px;
aspect-ratio: 1 / 1;
width: auto;
img {
height: 80%;
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
width: auto; }
img {
height: 80%;
aspect-ratio: 1 / 1;
}
} }
div.fake-text-box { div.fake-text-box {
width: calc(100% - 60px); width: calc(100% - 60px);
display: flex; display: flex;
align-items: center; align-items: center;
input[type="text"] {
font-size: 30px; input[type="text"] {
width: 100%; font-size: 30px;
height: 70%; width: 100%;
background: none; height: 70%;
border: none; background: none;
outline: none; border: none;
} outline: none;
}
} }
} }
p, h1, h2, h3, h4, a { p, h1, h2, h3, h4, a {
font-family: 'arial'; font-family: 'arial';
} }
@ -205,8 +221,8 @@ body {
text-decoration: none; text-decoration: none;
color: $color_div; color: $color_div;
margin: 0; margin: 0;
background: $background_div; background: $background_div;
&:hover, &:focus { &:hover, &:focus {
background: $color_div; background: $color_div;
color: $background_div; color: $background_div;
@ -226,36 +242,55 @@ body {
a { a {
vertical-align: middle; vertical-align: middle;
} }
a.search-icon { a.search-icon {
width: 60px; width: 60px;
height: 60px; height: 60px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
img {
background: aliceblue; img {
border-radius: 10px; background: aliceblue;
padding: 10%; border-radius: 10px;
width: 60%; padding: 10%;
height: 60%; width: 60%;
} height: 60%;
}
} }
} }
nav.mobile-foldable { nav.mobile-foldable {
display: none; position: fixed;
background: $background_div; background: $background_div;
color: $color_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 { a {
//background: $color_div; //background: $color_div;
//color: $background_div; //color: $background_div;
display: block; 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 { nav.mobile-foldable.show {
display: block; left: 0;
} }
nav.mobile-shortcuts > a { nav.mobile-shortcuts > a {
@ -303,6 +338,7 @@ body {
div.burguillos-logo-container.active > img { div.burguillos-logo-container.active > img {
transform: rotate(-1.5707963268rad); transform: rotate(-1.5707963268rad);
} }
div.search-in-page { div.search-in-page {
display: none; display: none;
position: fixed; position: fixed;
@ -312,33 +348,37 @@ body {
align-items: center; align-items: center;
background: $background_div; background: $background_div;
z-index: 3; 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 { span {
color: whitesmoke; color: whitesmoke;
font-size: 25px; font-size: 25px;
} }
&.active { &.active {
display: flex; display: flex;
} }
} }
nav.mobile-shortcuts { nav.mobile-shortcuts {
position: fixed; position: fixed;
display: flex; display: flex;
@ -389,12 +429,14 @@ body {
border: 3px solid $background_div; border: 3px solid $background_div;
border-collapse: collapse; border-collapse: collapse;
width: 100%; width: 100%;
tr:hover { tr:hover {
background: $background_div; background: $background_div;
color: $color_div; color: $color_div;
th, td {
border: 3px solid $color_div; th, td {
} border: 3px solid $color_div;
}
} }
td, th { td, th {
@ -623,13 +665,15 @@ body {
@media (min-width: 694px) { @media (min-width: 694px) {
body { body {
div.carousel { div.carousel {
a { a {
font-size: 20px; font-size: 20px;
} }
h3 {
font-size: 25px; h3 {
} font-size: 25px;
}
} }
div.page-contents { div.page-contents {
div.description { div.description {
div.articles { div.articles {
@ -643,6 +687,7 @@ body {
} }
} }
} }
img { img {
max-width: 694px; max-width: 694px;
} }
@ -652,22 +697,24 @@ body {
@media (min-width: 1100px) { @media (min-width: 1100px) {
body { body {
nav.mobile-foldable, nav.mobile-foldable.show {
display: none;
}
nav.mobile-shortcuts { nav.mobile-shortcuts {
display: none; display: none;
} }
div.search-in-page.active { div.search-in-page.active {
display: none; display: none;
} }
div.page-contents { div.page-contents {
nav.mobile-foldable, nav.mobile-foldable.show {
display: none;
}
div.description.open-browser-container { div.description.open-browser-container {
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
} }
div.description { div.description {
margin-left: 10%; margin-left: 10%;
margin-right: 10%; margin-right: 10%;
@ -726,19 +773,20 @@ body {
} }
@media (max-width: 200px) { @media (max-width: 200px) {
body { body {
font-size: 20px; font-size: 20px;
} }
} }
@media (max-height: 400px) { @media (max-height: 400px) {
body { body {
div.carousel { div.carousel {
height: 120px; height: 120px;
top: calc(100% - 120px); top: calc(100% - 120px);
}
div.page-contents {
height: calc(100% - 60px - 120px);
}
} }
div.page-contents {
height: calc(100% - 60px - 120px);
}
}
} }

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

@ -57,6 +57,7 @@
</div> </div>
<div class="complete-container"> <div class="complete-container">
%= include 'page/_mobile_menu', categories => $categories %= include 'page/_mobile_menu', categories => $categories
%= include 'page/_mobile_foldable', categories => $categories
<div class="search-in-page"> <div class="search-in-page">
<a href="#" class="down"> <a href="#" class="down">
<img alt="Next result" src="/img/down.svg"/> <img alt="Next result" src="/img/down.svg"/>
@ -67,7 +68,6 @@
</div> </div>
<div class="page-contents"> <div class="page-contents">
%= include 'page/_desktop_menu', categories => $categories, current_category_slug => $current_category_slug %= 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"> <div class="description android open-browser-container">
<a href="<%= $current_route %>" class="open-in-browser"> <a href="<%= $current_route %>" class="open-in-browser">
<img alt="" src="/img/firefox.svg"/> <img alt="" src="/img/firefox.svg"/>

2
templates/page/_mobile_menu.html.ep
View File

@ -2,7 +2,7 @@
<nav class="mobile-shortcuts"> <nav class="mobile-shortcuts">
<a class="go-to-index" href="<%='/'.$categories->{index}{slug}%>"><%== $categories->{index}{menu_text} %></a> <a class="go-to-index" href="<%='/'.$categories->{index}{slug}%>"><%== $categories->{index}{menu_text} %></a>
%= include 'page/_search_bar' %= 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" 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ú."/> <img class="open-menu-icon-hover" src="/img/hamburger-menu-purple.webp" alt="Expandir el menú."/>
</a> </a>