tom/hermes-web-angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added more css changes for Filters

Browse Source
This commit is contained in:
Tom 2025-01-07 17:55:14 +00:00
parent 08c146a9e9
commit 96441946b6
5 changed files with 61 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/tts-filters/filter-item/filter-item.component.html
View File

@ -1,9 +1,13 @@
<ul> <ul>
<li> <li>
{{item.search}} <span>
{{item.search}}
</span>
</li> </li>
<li> <li>
{{item.replace}} <span>
{{item.replace}}
</span>
</li> </li>
<li> <li>
<mat-menu #filterMenu> <mat-menu #filterMenu>
@ -11,7 +15,7 @@
<button mat-menu-item (click)="onDelete.emit(item)">Delete</button> <button mat-menu-item (click)="onDelete.emit(item)">Delete</button>
</mat-menu> </mat-menu>
<button mat-icon-button [matMenuTriggerFor]="filterMenu"> <button mat-icon-button class="small-button" [matMenuTriggerFor]="filterMenu">
<mat-icon>more_vert</mat-icon> <mat-icon>more_vert</mat-icon>
</button> </button>
</li> </li>

11
src/app/tts-filters/filter-item/filter-item.component.scss
View File

@ -13,9 +13,14 @@ ul {
li { li {
list-style-type: none; list-style-type: none;
white-space: pre; white-space: pre;
text-align: justify; text-align: start;
text-wrap: wrap; text-wrap: wrap;
span {
overflow: hidden;
text-overflow: hidden;
}
> button { > button {
background: #dddddd; background: #dddddd;
border-radius: 50%; border-radius: 50%;
@ -31,3 +36,7 @@ ul {
flex: 1; flex: 1;
} }
} }
.small-button {
transform: scale(0.8);
}

2
src/app/tts-filters/filter-list/filter-list.component.html
View File

@ -1,5 +1,5 @@
<div> <div>
<ul> <ul class="data">
<li> <li>
<ul class="header"> <ul class="header">
<li>Search</li> <li>Search</li>

56
src/app/tts-filters/filter-list/filter-list.component.scss
View File

@ -1,40 +1,50 @@
ul { div {
margin: 0; background-color: #fafafa;
padding: 0;
} }
li { ul.data {
margin: 0;
padding: 0;
> li {
display: block; display: block;
list-style-type: none; list-style-type: none;
padding: 0.75em 1em; padding: 0.75em 1em;
border-bottom: 1px solid #aaaaaa; border-bottom: 1px solid #aaaaaa;
} }
li:first-child { > li:first-child {
padding: 0 1em; padding: 0 1em;
border-bottom: 0 solid #aaaaaa; border-bottom: 0 solid #aaaaaa;
} }
li:last-child { > li:last-child {
border-bottom: 0 solid #aaaaaa; border-bottom: 0 solid #aaaaaa;
}
> li:nth-child(2n) {
background-color: #f5f5f5;
}
} }
ul.header { ul.header {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-evenly; justify-content: space-evenly;
background-color: #fafafa;
li { li {
border-bottom: 0 solid #aaaaaa; border-bottom: 0 solid #aaaaaa;
font-weight: 500; font-weight: 500;
list-style-type: none; list-style-type: none;
white-space: pre; white-space: pre;
text-align: justify; text-align: justify;
} background-color: #fafafa;
}
li:nth-child(1), li:nth-child(1),
li:nth-child(2) { li:nth-child(2) {
flex: 1; flex: 1;
} }
} }

12
src/app/tts-filters/filters/filters.component.scss
View File

@ -1,5 +1,13 @@
main {
background-color: #fafafa;
}
article { article {
display: flex; display: flex;
justify-content: space-between; justify-content: center;
width: 70%; gap: 10em;
}
button {
transform: scale(0.7);
} }