Use badges for instance languages/categories

pull/2131/head
Chocobozzz 2019-08-28 10:22:01 +02:00 committed by Chocobozzz
parent 421d935d25
commit 9fe1bc6855
2 changed files with 20 additions and 17 deletions

View File

@ -7,26 +7,16 @@
<div *ngIf="isContactFormEnabled" (click)="openContactModal()" i18n role="button" class="contact-admin">Contact administrator</div> <div *ngIf="isContactFormEnabled" (click)="openContactModal()" i18n role="button" class="contact-admin">Contact administrator</div>
</div> </div>
<div class="block instance-badges">
<span *ngFor="let category of categories" class="badge badge-primary category">{{ category }}</span>
<span *ngFor="let language of languages" class="badge badge-secondary language">{{ language }}</span>
</div>
<div class="short-description"> <div class="short-description">
<div class="block short-description">{{ shortDescription }}</div> <div class="block short-description">{{ shortDescription }}</div>
<div *ngIf="isNSFW" class="block dedicated-to-nsfw">This instance is dedicated to sensitive/NSFW content.</div> <div *ngIf="isNSFW" class="block dedicated-to-nsfw">This instance is dedicated to sensitive/NSFW content.</div>
<div class="block">
<div class="section-title" *ngIf="languages.length !== 0">Main instance languages</div>
<ul>
<li *ngFor="let language of languages">{{ language }}</li>
</ul>
</div>
<div class="block">
<div class="section-title" *ngIf="categories.length !== 0">Main instance categories</div>
<ul>
<li *ngFor="let category of categories">{{ category }}</li>
</ul>
</div>
</div> </div>
<div class="middle-title" *ngIf="html.administrator || maintenanceLifetime || businessModel"> <div class="middle-title" *ngIf="html.administrator || maintenanceLifetime || businessModel">

View File

@ -7,7 +7,6 @@
.title { .title {
font-size: 20px; font-size: 20px;
margin-bottom: 15px;
font-weight: $font-semibold; font-weight: $font-semibold;
} }
@ -19,6 +18,20 @@
} }
} }
.instance-badges {
font-size: 16px;
.badge {
font-size: 12px;
font-weight: $font-semibold;
margin-right: 5px;
&.category {
background-color: var(--mainColor);
}
}
}
.section-title { .section-title {
font-weight: $font-semibold; font-weight: $font-semibold;
font-size: 16px; font-size: 16px;