gburri/recipes
1
0
Fork 0
Code Issues 6 Pull requests Projects Releases Packages Wiki Activity Actions

Add search frontend code

Browse source
This commit is contained in:
Greg Burri 2025-05-24 12:18:23 +02:00
parent 988849e598
commit 3e91f34303
22 changed files with 379 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

63
backend/scss/main.scss
View file

@ -4,6 +4,7 @@ $dark-theme: false !default;
@use 'constants' as consts with ($dark-theme: $dark-theme);
@use 'calendar';
@use 'search';
@use 'toast';
@use 'modal-dialog';
@use 'mixins';
@ -40,26 +41,26 @@ body {
}
.footer-container {
margin: consts.$margin;
margin: var(--margin);
align-self: center;
font-size: 0.7em;
}
/// HEADER ///
.header-container {
margin: calc(2 * consts.$margin);
margin: calc(2 * var(--margin));
display: flex;
align-items: flex-end;
justify-content: space-between;
.title {
font-size: 180%;
font-size: var(--title-font-size);
font-style: italic;
.logo {
width: 50px;
height: 50px;
width: var(--logo-size);
height: var(--logo-size);
vertical-align: bottom;
margin: 0px 10px 0px 0px;
@ -68,16 +69,16 @@ body {
.header-menu {
.user-menu {
margin: consts.$margin;
margin: var(--margin);
.user-edit-link {
margin-left: consts.$margin;
margin-left: var(--margin);
}
}
#select-website-language {
margin: consts.$margin;
padding: consts.$margin;
margin: var(--margin);
padding: var(--margin);
}
}
}
@ -87,16 +88,16 @@ body {
flex-direction: row;
#recipes-list {
margin: calc(2 * consts.$margin);
margin: calc(2 * var(--margin));
ul {
padding-left: 20px;
li {
margin-bottom: calc(consts.$margin / 2);
margin-bottom: calc(var(--margin) / 2);
a {
padding: calc(consts.$margin / 2);
padding: calc(var(--margin) / 2);
}
}
}
@ -130,7 +131,7 @@ body {
}
.content {
margin: calc(2 * consts.$margin);
margin: calc(2 * var(--margin));
flex-grow: 1;
@ -250,13 +251,11 @@ body {
}
}
// #dev-panel {
// }
form {
display: grid;
// <label> <input>.
grid-template-columns: auto 1fr;
gap: calc(consts.$margin / 2);
gap: calc(var(--margin) / 2);
align-items: center;
}
@ -279,14 +278,14 @@ body {
border: 0.1em solid consts.$color-3;
border-radius: 0.5em;
background-color: consts.$color-1;
margin: consts.$margin;
padding: consts.$margin;
margin: var(--margin);
padding: var(--margin);
}
textarea,
input {
margin: consts.$margin;
padding: calc(consts.$margin / 2) calc(2 * consts.$margin);
margin: var(--margin);
padding: calc(var(--margin) / 2) calc(2 * var(--margin));
background-color: consts.$color-1;
border: solid 1px consts.$color-3;
@ -300,8 +299,8 @@ input {
}
select {
margin: consts.$margin;
padding: calc(consts.$margin / 2) calc(2 * consts.$margin);
margin: var(--margin);
padding: calc(var(--margin) / 2) calc(2 * var(--margin));
background-color: consts.$color-1;
border: solid 1px consts.$color-3;
@ -316,8 +315,8 @@ select {
input[type="button"],
input[type="submit"],
.button {
margin: consts.$margin;
padding: calc(consts.$margin / 2) calc(2 * consts.$margin);
margin: var(--margin);
padding: calc(var(--margin) / 2) calc(2 * var(--margin));
border: 0.1em solid consts.$color-3;
border-radius: 0.5em;
@ -345,19 +344,19 @@ input[type="submit"],
width: 120px;
background-color: consts.$color-1;
text-align: center;
padding: consts.$margin 0;
padding: var(--margin) 0;
border: 0.1em solid consts.$color-3;
border-radius: 0.5em;
position: absolute;
z-index: 1;
z-index: 10;
cursor: default;
top: -(consts.$margin);
top: -(var(--margin));
left: 100%;
margin-left: consts.$margin;
margin-left: var(--margin);
}
&:hover .tooltiptext {
@ -369,8 +368,8 @@ input[type="submit"],
position: absolute;
top: 50%;
right: 100%;
margin-top: -(consts.$margin);
border-width: consts.$margin;
margin-top: -(var(--margin));
border-width: var(--margin);
border-style: solid;
border-color: transparent consts.$color-3 transparent transparent;
}
@ -378,7 +377,7 @@ input[type="submit"],
/// Toggle theme (dark, light).
#toggle-theme {
margin: consts.$margin;
margin: var(--margin);
position: relative;
display: inline-block;