Added server list to dashboard #72
This commit is contained in:
@@ -3,4 +3,5 @@ export interface ServerDTO {
|
||||
discordId: number;
|
||||
name: string;
|
||||
memberCount: number;
|
||||
iconURL: string | null;
|
||||
}
|
||||
@@ -2,11 +2,49 @@
|
||||
{{'view.dashboard.header' | translate}}
|
||||
</h1>
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header">
|
||||
<h2>
|
||||
<i class="pi pi-server"></i>
|
||||
{{'view.dashboard.server.header' | translate}}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<ul>
|
||||
<li *ngFor="let server of servers">
|
||||
{{server.name}}
|
||||
</li>
|
||||
</ul>
|
||||
<div class="server-list-wrapper">
|
||||
<div class="server-filter">
|
||||
<form [formGroup]="filterForm">
|
||||
<div class="input-field">
|
||||
<input type="text" pInputText formControlName="name"
|
||||
placeholder="{{'view.dashboard.filter.name' | translate}}" autocomplete="given-name">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="server-count">
|
||||
{{servers.length}} {{'view.dashboard.of' | translate}} {{totalRecords}} {{'view.dashboard.servers' | translate}}:
|
||||
<hr>
|
||||
</div>
|
||||
|
||||
<div class="server-list">
|
||||
<div class="server" *ngFor="let server of servers">
|
||||
<div class="logo">
|
||||
<img *ngIf="server.iconURL" [src]="server.iconURL">
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<h3 class="name">
|
||||
{{server.name}}
|
||||
</h3>
|
||||
|
||||
<div class="data">
|
||||
<i class="pi pi-users"></i>
|
||||
{{server.memberCount}}
|
||||
{{'view.dashboard.server.member_count' | translate}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -107,7 +107,16 @@
|
||||
},
|
||||
"view": {
|
||||
"dashboard": {
|
||||
"header": "Dashboard"
|
||||
"header": "Dashboard",
|
||||
"of": "von",
|
||||
"servers": "Server",
|
||||
"server": {
|
||||
"header": "Server",
|
||||
"member_count": "Mitglid(er)"
|
||||
},
|
||||
"filter": {
|
||||
"name": "Name"
|
||||
}
|
||||
},
|
||||
"user-list": {},
|
||||
"change-password": {
|
||||
|
||||
@@ -10,6 +10,8 @@ body {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
main {
|
||||
@@ -18,15 +20,19 @@ main {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 30px;
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 25px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
header {
|
||||
@@ -207,6 +213,59 @@ header {
|
||||
.table-header-small-dropdown {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.server-list-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
|
||||
.server-filter {
|
||||
}
|
||||
|
||||
.server-count {
|
||||
}
|
||||
|
||||
.server-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
gap: 15px;
|
||||
|
||||
.server {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
|
||||
padding: 20px;
|
||||
|
||||
.logo {
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
gap: 10px;
|
||||
|
||||
.name {
|
||||
margin: 0px;
|
||||
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.data {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -432,7 +432,7 @@
|
||||
color: $primaryTextColor !important;
|
||||
border: 0 !important;
|
||||
padding: 0px !important;
|
||||
|
||||
|
||||
&:hover {
|
||||
background-color: transparent !important;
|
||||
color: $primaryHeaderColor !important;
|
||||
|
||||
@@ -15,17 +15,10 @@
|
||||
$primaryErrorColor: #b00020;
|
||||
$secondaryErrorColor: #e94948;
|
||||
|
||||
$default-border: 1px solid $secondaryBackgroundColor3;
|
||||
$default-border: 2px solid $secondaryBackgroundColor3;
|
||||
|
||||
background-color: $primaryBackgroundColor !important;
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
color: $primaryHeaderColor;
|
||||
@@ -122,6 +115,35 @@
|
||||
.content-divider {
|
||||
border-bottom: $default-border;
|
||||
}
|
||||
|
||||
.server-list-wrapper {
|
||||
.server-filter {
|
||||
}
|
||||
|
||||
.server-count {
|
||||
}
|
||||
|
||||
.server-list {
|
||||
.server {
|
||||
border: $default-border;
|
||||
border-radius: 15px;
|
||||
|
||||
.logo {
|
||||
img {
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
color: $primaryHeaderColor;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $primaryHeaderColor !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -390,6 +412,9 @@
|
||||
|
||||
input,
|
||||
.p-password {
|
||||
border-radius: 10px;
|
||||
border: $default-border;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
@@ -434,7 +459,7 @@
|
||||
color: $primaryTextColor !important;
|
||||
border: 0 !important;
|
||||
padding: 0px !important;
|
||||
|
||||
|
||||
&:hover {
|
||||
background-color: transparent !important;
|
||||
color: $primaryHeaderColor !important;
|
||||
|
||||
Reference in New Issue
Block a user