mirror of
https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend
synced 2025-12-31 09:37:15 +01:00
[HIMA-30] - corrections to search component
This commit is contained in:
Peter Skrlj
@@ -1,40 +1,64 @@
|
||||
<div class="article-search-container">
|
||||
<div class="article-section article-scan">
|
||||
<div><span class="article-scan-header">Artikel scannen</span></div>
|
||||
<div class="article-section article-scan">
|
||||
<div><span class="article-scan-header">Artikel scannen</span></div>
|
||||
</div>
|
||||
<div class="article-section article-search">
|
||||
<div class="align-center">
|
||||
<span class="article-search-title">Artikelsuche</span>
|
||||
</div>
|
||||
<div class="article-section article-search">
|
||||
<div class="align-center">
|
||||
<span class="article-search-title">Artikelsuche</span>
|
||||
</div>
|
||||
<div class="align-center">
|
||||
<span class="article-search-description">Welchen Artikel suchen Sie?</span>
|
||||
</div>
|
||||
<div class="align-center search-wrapper">
|
||||
<input [(ngModel)]="searchParams" (keypress)="keyHandler($event)" class="search-box" placeholder="Titel, Autor, Verlag, Schlagwort, ..."
|
||||
type="text" />
|
||||
<img (click)="search()" class="search-icon" src="../../../assets/images/search.svg">
|
||||
<img (click)="clear()" *ngIf="searchParams" class="clear-icon" src="../../../assets/images/close.svg">
|
||||
</div>
|
||||
<div *ngIf="searchParams">
|
||||
<app-filter></app-filter>
|
||||
</div>
|
||||
<div class="recent-search-continer align-center">
|
||||
<div class="recent-search-header">
|
||||
<div class="align-left">
|
||||
<span class="recent-searches-label">Deine letzten Suchanfragen</span>
|
||||
</div>
|
||||
<div class="align-right">
|
||||
<span class="show-all-label">Alle ansehen</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="recent-search-content">
|
||||
<div *ngFor="let article of recentArticles" class="recent-article">
|
||||
<div class="recent-article-container align-left">
|
||||
<div (click)="showRecentSearchResults(article)"><img class="lupe-icon" src="../../../assets/images/Lupe_Icon.svg"></div>
|
||||
<div class="recent-article-label">{{article.name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="align-center">
|
||||
<span class="article-search-description"
|
||||
>Welchen Artikel suchen Sie?</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="align-center search-container">
|
||||
<div class="search-wrapper">
|
||||
<input
|
||||
[(ngModel)]="searchParams"
|
||||
(keypress)="keyHandler($event)"
|
||||
class="search-box"
|
||||
placeholder="Titel, Autor, Verlag, Schlagwort, ..."
|
||||
type="text"
|
||||
autofocus
|
||||
/>
|
||||
<img
|
||||
(click)="clear()"
|
||||
*ngIf="searchParams"
|
||||
class="clear-icon"
|
||||
src="/assets/images/close.svg"
|
||||
/>
|
||||
<img
|
||||
(click)="search()"
|
||||
class="search-icon"
|
||||
src="/assets/images/search.svg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="searchParams">
|
||||
<app-filter></app-filter>
|
||||
</div>
|
||||
<div class="recent-search-continer align-center">
|
||||
<div class="recent-search-header">
|
||||
<div class="align-left">
|
||||
<span class="recent-searches-label">Deine letzten Suchanfragen</span>
|
||||
</div>
|
||||
<div class="align-right">
|
||||
<span class="show-all-label">Alle ansehen</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="recent-search-content">
|
||||
<div *ngFor="let article of recentArticles" class="recent-article">
|
||||
<div class="recent-article-container align-left">
|
||||
<div (click)="showRecentSearchResults(article)">
|
||||
<img
|
||||
class="lupe-icon"
|
||||
src="../../../assets/images/Lupe_Icon.svg"
|
||||
/>
|
||||
</div>
|
||||
<div class="recent-article-label">{{ article.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -37,6 +37,7 @@
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #5a728a;
|
||||
opacity: 0.8;
|
||||
text-align: left;
|
||||
line-height: 21px;
|
||||
}
|
||||
@@ -57,89 +58,67 @@
|
||||
|
||||
.article-search-title {
|
||||
font-weight: bold;
|
||||
font-size: 14pt;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.article-search-description {
|
||||
font-size: 13pt;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
width: 62%;
|
||||
height: 35px;
|
||||
border-radius: 40px;
|
||||
border: 1px solid $color-inactive;
|
||||
width: 100%;
|
||||
height: 49px;
|
||||
outline: none;
|
||||
padding-left: 15px;
|
||||
padding-right: 90px;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
margin-left: 20px;
|
||||
padding-top: 5px;
|
||||
text-overflow: ellipsis;
|
||||
padding-bottom: 5px;
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
font-size: 12pt;
|
||||
font-size: 21px;
|
||||
caret-color: $hima-button-color;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
right: 16%;
|
||||
top: calc(50% - 10px);
|
||||
z-index: 2;
|
||||
width: 20px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.clear-icon {
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
right: 19%;
|
||||
z-index: 2;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 964px) {
|
||||
.search-icon {
|
||||
right: 14%;
|
||||
}
|
||||
|
||||
.clear-icon {
|
||||
right: 18%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 663px) {
|
||||
.search-icon {
|
||||
right: 12%;
|
||||
}
|
||||
|
||||
.clear-icon {
|
||||
right: 17%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 495px) {
|
||||
.search-icon {
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 389px) {
|
||||
.search-icon {
|
||||
right: 8%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 331px) {
|
||||
.search-icon {
|
||||
right: 6%;
|
||||
}
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.search-box::placeholder {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1190px) {
|
||||
.search-wrapper {
|
||||
width: 62%;
|
||||
}
|
||||
}
|
||||
|
||||
.search-wrapper {
|
||||
margin-top: 20px;
|
||||
width: 75%;
|
||||
position: relative;
|
||||
height: 60px;
|
||||
border-radius: 40px;
|
||||
border: 1px solid $color-inactive;
|
||||
outline: none;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.recent-search-continer {
|
||||
|
||||
@@ -1,2 +1,2 @@
|
||||
<?xml version="1.0"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="512px" viewBox="0 0 512.00025 512" width="512px"><path d="m506.140625 477.859375-120.496094-120.496094c32.597657-39.078125 50.355469-87.851562 50.355469-139.363281 0-120.480469-97.5-218-218-218-120.480469 0-218 97.5-218 218 0 120.480469 97.5 218 218 218 51.511719 0 100.285156-17.757812 139.363281-50.355469l120.496094 120.496094c7.808594 7.8125 20.472656 7.8125 28.28125 0 7.8125-7.808594 7.8125-20.472656 0-28.28125zm-288.140625-81.859375c-98.148438 0-178-79.851562-178-178s79.851562-178 178-178 178 79.851562 178 178-79.851562 178-178 178zm0 0" fill="#ea0000"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="512px" viewBox="0 0 512.00025 512" width="512px"><path d="m506.140625 477.859375-120.496094-120.496094c32.597657-39.078125 50.355469-87.851562 50.355469-139.363281 0-120.480469-97.5-218-218-218-120.480469 0-218 97.5-218 218 0 120.480469 97.5 218 218 218 51.511719 0 100.285156-17.757812 139.363281-50.355469l120.496094 120.496094c7.808594 7.8125 20.472656 7.8125 28.28125 0 7.8125-7.808594 7.8125-20.472656 0-28.28125zm-288.140625-81.859375c-98.148438 0-178-79.851562-178-178s79.851562-178 178-178 178 79.851562 178 178-79.851562 178-178 178zm0 0" fill="#ea0000" stroke-width="10" stroke="#ea0000"/></svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 641 B After Width: | Height: | Size: 676 B |
Reference in New Issue
Block a user