florian/codiki-hexagonal
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Extract search bar into a standalone component and fix header design.

Browse Source
This commit is contained in:
Florian THIERRY
2024-08-30 09:52:00 +02:00
parent 090143fdae
commit b3a52f6a4b
7 changed files with 141 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
frontend/src/app/components/header/header.component.scss
View File

@@ -14,15 +14,17 @@ $headerHeight: 3.5em;
display: flex;
flex-direction: row;
justify-content: center;
position: relative;
height: $headerHeight;
&:nth-child(1) {
&.left {
position: absolute;
top: 0;
left: 0;
align-items: center;
gap: 1em;
padding: 0 1em;
z-index: 2;
button {
background-color: #3f51b5;
@@ -70,79 +72,56 @@ $headerHeight: 3.5em;
}
}
&:nth-child(2) {
&.middle {
flex: 1;
$borderRadiusValue: 10em;
position: relative;
transition: max-width .2s ease-in-out;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
.search-bar {
flex: 1;
$borderRadiusValue: 10em;
position: relative;
app-publications-search-bar {
width: 100%;
max-width: 12em;
transition: max-width .2s ease-in-out;
@media screen and (min-width: 435px) {
max-width: 16em;
}
@media screen and (min-width: 500px) {
max-width: 20em;
}
@media screen and (min-width: 700px) {
max-width: 24em;
}
@media screen and (min-width: 800px) {
max-width: 32em;
}
@media screen and (min-width: 900px) {
max-width: 38em;
}
@media screen and (min-width: 1000px) {
max-width: 45em;
}
@media screen and (min-width: 1100px) {
max-width: 50em;
}
input {
flex: 1;
width: 60%;
max-width: 50em;
border-radius: $borderRadiusValue;
background-color: white;
border: solid 1px #ddd;
padding: .2em 2.7em .2em 1em;
height: 2em;
}
button {
position: absolute;
display: flex;
align-items: center;
border-radius: $borderRadiusValue;
background-color: white;
border: none;
margin: .5em 0;
right: 1.1em;
color: #aaaaaa;
&:hover {
background-color: #eee;
cursor: pointer;
}
}
}
}
&:nth-child(3) {
&.right {
position: absolute;
top: 0;
right: 0;
z-index: 2;
a {
display: flex;
justify-content: center;