Improved table responsive mode #1.1.0.rc5

This commit is contained in:
Sven Heidemann 2023-08-18 16:01:20 +02:00
parent 919970d199
commit 4ea1b5b94c
7 changed files with 61 additions and 2 deletions

View File

@ -123,6 +123,7 @@
<ng-template pTemplate="body" let-user let-editing="editing" let-ri="rowIndex"> <ng-template pTemplate="body" let-user let-editing="editing" let-ri="rowIndex">
<tr [pEditableRow]="user"> <tr [pEditableRow]="user">
<td hideable-td="first_name" [parent]="this"> <td hideable-td="first_name" [parent]="this">
<span class="p-column-title">{{'common.first_name' | translate}}:</span>
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
<input class="table-edit-input" pInputText type="text" [(ngModel)]="user.firstName" <input class="table-edit-input" pInputText type="text" [(ngModel)]="user.firstName"
@ -134,6 +135,7 @@
</p-cellEditor> </p-cellEditor>
</td> </td>
<td hideable-td="last_name" [parent]="this"> <td hideable-td="last_name" [parent]="this">
<span class="p-column-title">{{'common.last_name' | translate}}:</span>
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
<input class="table-edit-input" pInputText type="text" [(ngModel)]="user.lastName" <input class="table-edit-input" pInputText type="text" [(ngModel)]="user.lastName"
@ -145,6 +147,7 @@
</p-cellEditor> </p-cellEditor>
</td> </td>
<td hideable-td="email" [parent]="this"> <td hideable-td="email" [parent]="this">
<span class="p-column-title">{{'common.email' | translate}}:</span>
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
<input class="table-edit-input" pInputText type="email" [(ngModel)]="user.email" <input class="table-edit-input" pInputText type="email" [(ngModel)]="user.email"
@ -156,6 +159,7 @@
</p-cellEditor> </p-cellEditor>
</td> </td>
<td hideable-td="active" [parent]="this"> <td hideable-td="active" [parent]="this">
<span class="p-column-title">{{'common.active' | translate}}:</span>
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
<p-checkbox [binary]="true" [(ngModel)]="user.isConfirmed" <p-checkbox [binary]="true" [(ngModel)]="user.isConfirmed"
@ -169,6 +173,7 @@
</p-cellEditor> </p-cellEditor>
</td> </td>
<td hideable-td="auth_role" [parent]="this"> <td hideable-td="auth_role" [parent]="this">
<span class="p-column-title">{{'common.auth_role' | translate}}:</span>
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
<p-dropdown [options]="authRoles" [(ngModel)]="user.authRole" <p-dropdown [options]="authRoles" [(ngModel)]="user.authRole"
@ -180,6 +185,7 @@
</p-cellEditor> </p-cellEditor>
</td> </td>
<td hideable-td="password" [parent]="this"> <td hideable-td="password" [parent]="this">
<span class="p-column-title">{{'common.password' | translate}}:</span>
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
<input class="table-edit-input" pInputText type="password" [(ngModel)]="user.password" <input class="table-edit-input" pInputText type="password" [(ngModel)]="user.password"
@ -190,6 +196,7 @@
</p-cellEditor> </p-cellEditor>
</td> </td>
<td> <td>
<span class="p-column-title">{{'common.created_at' | translate}}:</span>
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
{{user.createdAt | date:'dd.MM.yy HH:mm'}} {{user.createdAt | date:'dd.MM.yy HH:mm'}}
@ -200,6 +207,7 @@
</p-cellEditor> </p-cellEditor>
</td> </td>
<td> <td>
<span class="p-column-title">{{'common.modified_at' | translate}}:</span>
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
{{user.modifiedAt | date:'dd.MM.yy HH:mm'}} {{user.modifiedAt | date:'dd.MM.yy HH:mm'}}

View File

@ -125,6 +125,7 @@
<ng-template pTemplate="body" let-achievement let-editing="editing" let-ri="rowIndex"> <ng-template pTemplate="body" let-achievement let-editing="editing" let-ri="rowIndex">
<tr [pEditableRow]="achievement"> <tr [pEditableRow]="achievement">
<td hideable-td="id" [parent]="this"> <td hideable-td="id" [parent]="this">
<span class="p-column-title">{{'common.id' | translate}}:</span>
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
{{achievement.id}} {{achievement.id}}
@ -136,6 +137,7 @@
</td> </td>
<td hideable-td="name" [parent]="this"> <td hideable-td="name" [parent]="this">
<span class="p-column-title">{{'common.name' | translate}}:</span>
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
<input class="table-edit-input" pInputText type="text" [(ngModel)]="achievement.name"> <input class="table-edit-input" pInputText type="text" [(ngModel)]="achievement.name">
@ -147,6 +149,7 @@
</td> </td>
<td hideable-td="description" [parent]="this"> <td hideable-td="description" [parent]="this">
<span class="p-column-title">{{'common.description' | translate}}:</span>
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
<input class="table-edit-input" pInputText type="text" [(ngModel)]="achievement.description"> <input class="table-edit-input" pInputText type="text" [(ngModel)]="achievement.description">
@ -158,6 +161,7 @@
</td> </td>
<td hideable-td="attribute" [parent]="this"> <td hideable-td="attribute" [parent]="this">
<span class="p-column-title">{{'common.attribute' | translate}}:</span>
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
<p-dropdown [options]="attributes" [(ngModel)]="achievement.attribute" <p-dropdown [options]="attributes" [(ngModel)]="achievement.attribute"
@ -170,6 +174,7 @@
</td> </td>
<td hideable-td="description" [parent]="this"> <td hideable-td="description" [parent]="this">
<span class="p-column-title">{{'common.operator' | translate}}:</span>
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
<p-dropdown [options]="operators" [(ngModel)]="achievement.operator" placeholder="{{'common.operator' | translate}}"></p-dropdown> <p-dropdown [options]="operators" [(ngModel)]="achievement.operator" placeholder="{{'common.operator' | translate}}"></p-dropdown>
@ -181,6 +186,7 @@
</td> </td>
<td hideable-td="value" [parent]="this"> <td hideable-td="value" [parent]="this">
<span class="p-column-title">{{'common.value' | translate}}:</span>
<p-cellEditor *ngIf="getAchievementAttributeByName(achievement.attribute)?.type === 'number'"> <p-cellEditor *ngIf="getAchievementAttributeByName(achievement.attribute)?.type === 'number'">
<ng-template pTemplate="input"> <ng-template pTemplate="input">
<input class="table-edit-input" pInputText min="0" type="number" [(ngModel)]="achievement.value"> <input class="table-edit-input" pInputText min="0" type="number" [(ngModel)]="achievement.value">
@ -210,6 +216,7 @@
</td> </td>
<td> <td>
<span class="p-column-title">{{'common.created_at' | translate}}:</span>
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
{{achievement.createdAt | date:'dd.MM.yy HH:mm'}} {{achievement.createdAt | date:'dd.MM.yy HH:mm'}}
@ -220,6 +227,7 @@
</p-cellEditor> </p-cellEditor>
</td> </td>
<td> <td>
<span class="p-column-title">{{'common.modified_at' | translate}}:</span>
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
{{achievement.modifiedAt | date:'dd.MM.yy HH:mm'}} {{achievement.modifiedAt | date:'dd.MM.yy HH:mm'}}

View File

@ -92,6 +92,7 @@
<ng-template pTemplate="body" let-autoRoleRule let-editing="editing" let-ri="rowIndex"> <ng-template pTemplate="body" let-autoRoleRule let-editing="editing" let-ri="rowIndex">
<tr [pEditableRow]="autoRoleRule"> <tr [pEditableRow]="autoRoleRule">
<td hideable-td="id" [parent]="this"> <td hideable-td="id" [parent]="this">
<span class="p-column-title">{{'common.id' | translate}}:</span>
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
{{autoRoleRule.id}} {{autoRoleRule.id}}
@ -103,6 +104,7 @@
</td> </td>
<td hideable-td="role" [parent]="this"> <td hideable-td="role" [parent]="this">
<span class="p-column-title">{{'common.role' | translate}}:</span>
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
<p-dropdown [options]="roles" optionValue="value.id" [(ngModel)]="autoRoleRule.roleId" <p-dropdown [options]="roles" optionValue="value.id" [(ngModel)]="autoRoleRule.roleId"
@ -115,6 +117,7 @@
</td> </td>
<td hideable-td="emoji" [parent]="this"> <td hideable-td="emoji" [parent]="this">
<span class="p-column-title">{{'common.emoji' | translate}}:</span>
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
<p-dropdown [options]="emojis" optionValue="value.name" [(ngModel)]="autoRoleRule.emojiName" <p-dropdown [options]="emojis" optionValue="value.name" [(ngModel)]="autoRoleRule.emojiName"
@ -140,6 +143,7 @@
</td> </td>
<td> <td>
<span class="p-column-title">{{'common.created_at' | translate}}:</span>
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
{{autoRoleRule.createdAt | date:'dd.MM.yy HH:mm'}} {{autoRoleRule.createdAt | date:'dd.MM.yy HH:mm'}}
@ -152,6 +156,7 @@
<td> <td>
<p-cellEditor> <p-cellEditor>
<span class="p-column-title">{{'common.modified_at' | translate}}:</span>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
{{autoRoleRule.modifiedAt | date:'dd.MM.yy HH:mm'}} {{autoRoleRule.modifiedAt | date:'dd.MM.yy HH:mm'}}
</ng-template> </ng-template>

View File

@ -117,6 +117,7 @@
<ng-template pTemplate="body" let-autoRole let-editing="editing" let-ri="rowIndex"> <ng-template pTemplate="body" let-autoRole let-editing="editing" let-ri="rowIndex">
<tr [pEditableRow]="autoRole"> <tr [pEditableRow]="autoRole">
<td hideable-td="id" [parent]="this"> <td hideable-td="id" [parent]="this">
<span class="p-column-title">{{'common.id' | translate}}:</span>
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
{{autoRole.id}} {{autoRole.id}}
@ -128,6 +129,7 @@
</td> </td>
<td hideable-td="channel_id" [parent]="this"> <td hideable-td="channel_id" [parent]="this">
<span class="p-column-title">{{'common.channel_id' | translate}}:</span>
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
<p-dropdown [options]="channels" optionValue="value.id" [(ngModel)]="autoRole.channelId" <p-dropdown [options]="channels" optionValue="value.id" [(ngModel)]="autoRole.channelId"
@ -140,6 +142,7 @@
</td> </td>
<td hideable-td="channel_name" [parent]="this"> <td hideable-td="channel_name" [parent]="this">
<span class="p-column-title">{{'common.channel_name' | translate}}:</span>
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
{{autoRole.channelName}} {{autoRole.channelName}}
@ -151,6 +154,7 @@
</td> </td>
<td hideable-td="message_id" [parent]="this"> <td hideable-td="message_id" [parent]="this">
<span class="p-column-title">{{'common.message_id' | translate}}:</span>
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
<input pInputText class="table-edit-input" [(ngModel)]="autoRole.messageId"> <input pInputText class="table-edit-input" [(ngModel)]="autoRole.messageId">
@ -162,6 +166,7 @@
</td> </td>
<td hideable-td="rule_count" [parent]="this"> <td hideable-td="rule_count" [parent]="this">
<span class="p-column-title">{{'common.rule_count' | translate}}:</span>
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
{{autoRole.autoRoleRuleCount}} {{autoRole.autoRoleRuleCount}}
@ -173,6 +178,7 @@
</td> </td>
<td> <td>
<span class="p-column-title">{{'common.created_at' | translate}}:</span>
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
{{autoRole.createdAt | date:'dd.MM.yy HH:mm'}} {{autoRole.createdAt | date:'dd.MM.yy HH:mm'}}
@ -184,6 +190,7 @@
</td> </td>
<td> <td>
<span class="p-column-title">{{'common.modified_at' | translate}}:</span>
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
{{autoRole.modifiedAt | date:'dd.MM.yy HH:mm'}} {{autoRole.modifiedAt | date:'dd.MM.yy HH:mm'}}
@ -196,8 +203,6 @@
<td> <td>
<div class="btn-wrapper"> <div class="btn-wrapper">
<!-- <button *ngIf="!editing" pButton pInitEditableRow class="btn icon-btn" icon="pi pi-pencil"-->
<!-- (click)="onRowEditInit(dt, autoRole, ri)"></button>-->
<app-history-btn *ngIf="!isEditingNew" [id]="autoRole.id" [query]="query" translationKey="view.server.auto_roles.header"></app-history-btn> <app-history-btn *ngIf="!isEditingNew" [id]="autoRole.id" [query]="query" translationKey="view.server.auto_roles.header"></app-history-btn>
<button *ngIf="!editing" pButton pInitEditableRow class="btn icon-btn" icon="pi pi-sliders-h" [routerLink]="[autoRole.id, 'rules']"></button> <button *ngIf="!editing" pButton pInitEditableRow class="btn icon-btn" icon="pi pi-sliders-h" [routerLink]="[autoRole.id, 'rules']"></button>
<button *ngIf="!editing" pButton class="btn icon-btn danger-icon-btn" icon="pi pi-trash" <button *ngIf="!editing" pButton class="btn icon-btn danger-icon-btn" icon="pi pi-trash"

View File

@ -112,6 +112,7 @@
<ng-template pTemplate="body" let-level let-editing="editing" let-ri="rowIndex"> <ng-template pTemplate="body" let-level let-editing="editing" let-ri="rowIndex">
<tr [pEditableRow]="level"> <tr [pEditableRow]="level">
<td hideable-th="id" [parent]="this"> <td hideable-th="id" [parent]="this">
<span class="p-column-title">{{'common.id' | translate}}:</span>
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
{{level.id}} {{level.id}}
@ -123,6 +124,7 @@
</td> </td>
<td hideable-th="name" [parent]="this"> <td hideable-th="name" [parent]="this">
<span class="p-column-title">{{'common.name' | translate}}:</span>
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
<input class="table-edit-input" pInputText type="text" [(ngModel)]="level.name"> <input class="table-edit-input" pInputText type="text" [(ngModel)]="level.name">
@ -134,6 +136,7 @@
</td> </td>
<td hideable-th="color" [parent]="this"> <td hideable-th="color" [parent]="this">
<span class="p-column-title">{{'common.color' | translate}}:</span>
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
<input class="table-edit-input" pInputText type="text" [(ngModel)]="level.color"> <input class="table-edit-input" pInputText type="text" [(ngModel)]="level.color">
@ -145,6 +148,7 @@
</td> </td>
<td hideable-th="min_xp" [parent]="this"> <td hideable-th="min_xp" [parent]="this">
<span class="p-column-title">{{'common.min_xp' | translate}}:</span>
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
<input class="table-edit-input" pInputText min="0" type="number" [(ngModel)]="level.minXp"> <input class="table-edit-input" pInputText min="0" type="number" [(ngModel)]="level.minXp">
@ -156,6 +160,7 @@
</td> </td>
<td hideable-th="permissions" [parent]="this"> <td hideable-th="permissions" [parent]="this">
<span class="p-column-title">{{'common.permissions' | translate}}:</span>
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
<input class="table-edit-input" pInputText min="0" type="text" [(ngModel)]="level.permissions"> <input class="table-edit-input" pInputText min="0" type="text" [(ngModel)]="level.permissions">
@ -167,6 +172,7 @@
</td> </td>
<td> <td>
<span class="p-column-title">{{'common.created_at' | translate}}:</span>
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
{{level.createdAt | date:'dd.MM.yy HH:mm'}} {{level.createdAt | date:'dd.MM.yy HH:mm'}}
@ -177,6 +183,7 @@
</p-cellEditor> </p-cellEditor>
</td> </td>
<td> <td>
<span class="p-column-title">{{'common.modified_at' | translate}}:</span>
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
{{level.modifiedAt | date:'dd.MM.yy HH:mm'}} {{level.modifiedAt | date:'dd.MM.yy HH:mm'}}

View File

@ -135,6 +135,7 @@
<ng-template pTemplate="body" let-member let-editing="editing" let-ri="rowIndex"> <ng-template pTemplate="body" let-member let-editing="editing" let-ri="rowIndex">
<tr [pEditableRow]="member"> <tr [pEditableRow]="member">
<td hideable-th="id" [parent]="this"> <td hideable-th="id" [parent]="this">
<span class="p-column-title">{{'common.id' | translate}}:</span>
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
{{member.id}} {{member.id}}
@ -145,6 +146,7 @@
</p-cellEditor> </p-cellEditor>
</td> </td>
<td hideable-th="discord_id" [parent]="this"> <td hideable-th="discord_id" [parent]="this">
<span class="p-column-title">{{'common.discord_id' | translate}}:</span>
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
{{member.discordId}} {{member.discordId}}
@ -155,6 +157,7 @@
</p-cellEditor> </p-cellEditor>
</td> </td>
<td hideable-th="name" [parent]="this"> <td hideable-th="name" [parent]="this">
<span class="p-column-title">{{'common.name' | translate}}:</span>
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
{{member.name}} {{member.name}}
@ -165,6 +168,7 @@
</p-cellEditor> </p-cellEditor>
</td> </td>
<td hideable-th="xp" [parent]="this"> <td hideable-th="xp" [parent]="this">
<span class="p-column-title">{{'common.xp' | translate}}:</span>
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
<input class="table-edit-input" pInputText min="0" type="number" [(ngModel)]="member.xp"> <input class="table-edit-input" pInputText min="0" type="number" [(ngModel)]="member.xp">
@ -175,6 +179,7 @@
</p-cellEditor> </p-cellEditor>
</td> </td>
<td hideable-th="ontime" [parent]="this"> <td hideable-th="ontime" [parent]="this">
<span class="p-column-title">{{'common.ontime' | translate}}:</span>
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
{{member.ontime}} {{member.ontime}}
@ -185,6 +190,7 @@
</p-cellEditor> </p-cellEditor>
</td> </td>
<td hideable-th="left_server" [parent]="this"> <td hideable-th="left_server" [parent]="this">
<span class="p-column-title">{{'common.left_server' | translate}}:</span>
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
{{!member.leftServer | bool}} {{!member.leftServer | bool}}
@ -195,6 +201,7 @@
</p-cellEditor> </p-cellEditor>
</td> </td>
<td hideable-th="level" [parent]="this"> <td hideable-th="level" [parent]="this">
<span class="p-column-title">{{'common.level' | translate}}:</span>
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
<p-dropdown [options]="levels" [(ngModel)]="member.level" placeholder="{{'common.level' | translate}}"></p-dropdown> <p-dropdown [options]="levels" [(ngModel)]="member.level" placeholder="{{'common.level' | translate}}"></p-dropdown>
@ -205,6 +212,7 @@
</p-cellEditor> </p-cellEditor>
</td> </td>
<td> <td>
<span class="p-column-title">{{'common.created_at' | translate}}:</span>
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
{{member.createdAt | date:'dd.MM.yy HH:mm'}} {{member.createdAt | date:'dd.MM.yy HH:mm'}}
@ -215,6 +223,7 @@
</p-cellEditor> </p-cellEditor>
</td> </td>
<td> <td>
<span class="p-column-title">{{'common.modified_at' | translate}}:</span>
<p-cellEditor> <p-cellEditor>
<ng-template pTemplate="input"> <ng-template pTemplate="input">
{{member.modifiedAt | date:'dd.MM.yy HH:mm'}} {{member.modifiedAt | date:'dd.MM.yy HH:mm'}}

View File

@ -729,8 +729,25 @@ p-inputNumber {
} }
} }
td {
.btn-wrapper {
width: 100%;
justify-content: center;
}
}
.p-column-title {
min-width: 50%;
font-weight: 600;
}
p-cellEditor { p-cellEditor {
width: 100%; width: 100%;
display: flex;
justify-content: flex-end;
text-align: end;
word-break: break-word;
} }
.p-multiselect { .p-multiselect {