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

Design header search bar.

Browse Source
This commit is contained in:
Florian THIERRY
2024-06-05 10:23:38 +02:00
parent 2ba707c336
commit e5076f0c64
2 changed files with 36 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/components/header/header.component.html
View File

@@ -8,11 +8,13 @@
</a> </a>
</div> </div>
<div> <div>
<div class="search-bar">
<input name="search-query" placeholder="Search something..." /> <input name="search-query" placeholder="Search something..." />
<button type="button"> <button type="button">
<mat-icon>search</mat-icon> <mat-icon>search</mat-icon>
</button> </button>
</div> </div>
</div>
<div> <div>
<ng-container *ngIf="isAuthenticated; else anonymousRightMenu"> <ng-container *ngIf="isAuthenticated; else anonymousRightMenu">
<a [routerLink]="['/disconnect']">Disconnect</a> <a [routerLink]="['/disconnect']">Disconnect</a>

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

@@ -66,29 +66,39 @@ $headerHeight: 3.5em;
&:nth-child(2) { &:nth-child(2) {
flex: 1; flex: 1;
.search-bar {
flex: 1;
max-width: 50em;
$borderRadiusValue: 10em; $borderRadiusValue: 10em;
position: relative;
input { input {
flex: 1; flex: 1;
width: 60%; width: 60%;
max-width: 50em; max-width: 50em;
border-radius: $borderRadiusValue 0 0 $borderRadiusValue; border-radius: $borderRadiusValue;
background-color: white; background-color: white;
border: solid 1px #ccc; border: solid 1px #ddd;
margin: .5em 0; padding: .2em 2.7em .2em 1em;
padding: .2em .5em; height: 2em;
} }
button { button {
position: absolute;
display: flex; display: flex;
align-items: center; align-items: center;
border-radius: 0 $borderRadiusValue $borderRadiusValue 0; border-radius: $borderRadiusValue;
background-color: white; background-color: white;
border: solid 1px #ccc; border: none;
margin: .5em 0; margin: .5em 0;
right: 1.1em;
color: #aaaaaa;
&:hover { &:hover {
background-color: #eee; background-color: #eee;
cursor: pointer;
}
} }
} }
} }