Add search frontend code
This commit is contained in:
parent
988849e598
commit
3e91f34303
22 changed files with 379 additions and 73 deletions
|
|
@ -14,7 +14,7 @@
|
|||
|
||||
.svg-arrow {
|
||||
display: block;
|
||||
margin: consts.$margin calc(consts.$margin / 2);
|
||||
margin: var(--margin) calc(var(--margin) / 2);
|
||||
fill: consts.$link-color;
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
}
|
||||
|
||||
.year {
|
||||
margin: consts.$margin;
|
||||
margin: var(--margin);
|
||||
}
|
||||
|
||||
.month {
|
||||
|
|
@ -82,7 +82,7 @@
|
|||
}
|
||||
|
||||
.remove-scheduled-recipe {
|
||||
padding: 0px calc(consts.$margin / 2);
|
||||
padding: 0px calc(var(--margin) / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,25 @@
|
|||
|
||||
$dark-theme: false !default;
|
||||
|
||||
$mobile-width: 1080px;
|
||||
|
||||
// Dynamic values depending of the screen width.
|
||||
@media (min-width: calc($mobile-width + 1px)) {
|
||||
:root {
|
||||
--margin: 5px;
|
||||
--title-font-size: 180%;
|
||||
--logo-size: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $mobile-width) {
|
||||
:root {
|
||||
--margin: 3px;
|
||||
--title-font-size: 130%;
|
||||
--logo-size: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
$color-1: #B29B89;
|
||||
$color-2: #89B29B;
|
||||
$color-3: #9B89B2;
|
||||
|
|
@ -9,21 +28,22 @@ $color-highlight: #cf2d2dff;
|
|||
|
||||
$text-color: color.adjust($color-1, $lightness: -30%);
|
||||
$text-highlight: color.adjust($color-1, $lightness: +30%);
|
||||
$text-dimished: color.adjust($color-1, $lightness: -15%, $saturation: -15%);
|
||||
|
||||
$link-color: color.adjust($color-3, $lightness: -25%);
|
||||
$link-hover-color: color.adjust($color-3, $lightness: +20%);
|
||||
|
||||
@if $dark-theme {
|
||||
$color-highlight: color.adjust($color-highlight, $lightness: +10%);
|
||||
|
||||
$text-color: color.adjust($color-1, $lightness: -10%);
|
||||
$text-highlight: color.adjust($color-1, $lightness: +10%);
|
||||
$color-highlight: color.adjust($color-highlight, $lightness: +10%);
|
||||
$text-dimished: color.adjust($color-1, $lightness: -20%, $saturation: -15%);
|
||||
|
||||
$link-color: color.adjust($color-3, $lightness: -5%);
|
||||
$link-hover-color: color.adjust($color-3, $lightness: +10%);
|
||||
|
||||
$color-1: color.adjust($color-1, $lightness: -47%);
|
||||
$color-2: color.adjust($color-2, $lightness: -47%);
|
||||
$color-3: color.adjust($color-2, $lightness: -47%);
|
||||
}
|
||||
|
||||
$margin: 5px;
|
||||
$color-3: color.adjust($color-3, $lightness: -50%);
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -35,6 +35,6 @@
|
|||
|
||||
color: consts.$text-color;
|
||||
text-align: center;
|
||||
padding: calc(2 * consts.$margin) calc(2 * consts.$margin);
|
||||
padding: calc(2 * var(--margin)) calc(2 * var(--margin));
|
||||
box-shadow: -1px 1px 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
#modal-dialog {
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
z-index: 5;
|
||||
left: 50%;
|
||||
width: 50%;
|
||||
transform: translate(-50%, 0%);
|
||||
|
|
@ -16,6 +16,6 @@
|
|||
padding: 0;
|
||||
|
||||
>div {
|
||||
padding: calc(2 * consts.$margin) calc(2 * consts.$margin);
|
||||
padding: calc(2 * var(--margin)) calc(2 * var(--margin));
|
||||
}
|
||||
}
|
||||
73
backend/scss/search.scss
Normal file
73
backend/scss/search.scss
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
@use 'sass:color';
|
||||
|
||||
@use 'constants' as consts;
|
||||
|
||||
#search {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
line-height: 28px;
|
||||
padding: 0 1rem;
|
||||
padding-left: 2.5rem;
|
||||
border-radius: 8px;
|
||||
background-color: consts.$color-2;
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
color: consts.$text-dimished;
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
left: 1rem;
|
||||
fill: consts.$color-3;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.results {
|
||||
display: none;
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
background-color: white;
|
||||
vertical-align: top;
|
||||
top: 100%;
|
||||
|
||||
border: solid 1px consts.$color-3;
|
||||
background-color: consts.$color-1;
|
||||
box-shadow: 0 0 5px color.adjust(consts.$color-3, $lightness: -20%);
|
||||
|
||||
.message {
|
||||
display: hidden;
|
||||
padding:
|
||||
var(--margin) calc(2 * var(--margin)) var(--margin) calc(2 * var(--margin));
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
|
||||
li {
|
||||
padding:
|
||||
var(--margin) calc(2 * var(--margin)) var(--margin) calc(2 * var(--margin));
|
||||
|
||||
list-style-type: none;
|
||||
|
||||
em {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
li:nth-child(odd) {
|
||||
background: consts.$color-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#hidden-templates-search {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
#toasts {
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
z-index: 6;
|
||||
left: 50%;
|
||||
top: 15px;
|
||||
transform: translate(-50%, 0%);
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
|
||||
@include mixins.popup;
|
||||
|
||||
margin: consts.$margin;
|
||||
margin: var(--margin);
|
||||
|
||||
.content {
|
||||
display: inline-block;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue