Fixes more style bugs

parent baa84ea2
Pipeline #16199 failed with stages
in 1 minute and 44 seconds
......@@ -3,9 +3,10 @@
<input type="text"
class="rounded p-1 w-100 mb-3"
[placeholder]="'component.nickname_categories.filter' | translate"
[title]="'component.nickname_categories.filter' | translate"
(input)="filterForKeyword($event)"/>
</div>
<div class="col-12 nickCategoryWrapper"
<div class="col-12 col-md-6 nickCategoryWrapper"
[class.col-sm-4]="hasSelectedCategory()">
<div class="row">
<div *ngFor="let cat of availableNickCategories()"
......@@ -24,18 +25,22 @@
</div>
</div>
<div *ngIf="hasSelectedCategory()"
class="col-12 col-sm-8 nickNameWrapper pt-2 mt-2 mt-sm-0">
<button [innerHTML]="('component.nickname_categories.' + (hasSelectedAllNicks() ? 'remove' : 'choose') + '_all') | translate"
class="btn btn-block pointer"
[class.btn-warning]="hasSelectedAllNicks()"
[class.btn-success]="!hasSelectedAllNicks()"
(click)="toggleAllNicks()"></button>
<div *ngFor="let nick of availableNicks[selectedCategory]"
(click)="selectNick(nick)"
class="nickStyle nickName pointer"
[class.selectedNickName]="hasSelectedNick(nick)">
class="col-12 col-md-8">
<div class="nickNameWrapper pt-2 mt-2 mt-sm-0">
<button class="btn btn-block pointer"
[class.btn-warning]="hasSelectedAllNicks()"
[class.btn-success]="!hasSelectedAllNicks()"
(click)="toggleAllNicks()">
<span *ngIf="hasSelectedAllNicks()">{{'component.nickname_categories.remove_all' | translate}}</span>
<span *ngIf="!hasSelectedAllNicks()">{{'component.nickname_categories.choose_all' | translate}}</span>
</button>
<div *ngFor="let nick of availableNicks[selectedCategory]"
(click)="selectNick(nick)"
class="nickStyle nickName pointer"
[class.selectedNickName]="hasSelectedNick(nick)">
<span [innerHTML]="parseAvailableNick(nick)"
class="nickName d-inline-block pb-1"></span>
</div>
</div>
</div>
</div>
......@@ -35,16 +35,18 @@ h3 {
.selectedCategory {
text-decoration: underline;
&:after {
content: ' ';
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 10px solid white;
border-bottom: 10px solid transparent;
right: 0;
top: 35%;
position: absolute;
@include media-breakpoint-up(md) {
&:after {
content: ' ';
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 10px solid white;
border-bottom: 10px solid transparent;
right: 0;
top: 35%;
position: absolute;
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment