sh-edraft.de/sh_discord_bot
4
1
Fork 1
Code Issues 21 Pull Requests Actions Packages Projects 3 Releases 27 Wiki Activity

Made hole app responsive #1.1.0

Browse Source
This commit is contained in:
Sven Heidemann 2023-08-17 23:36:44 +02:00
parent fa71759a20
commit b49512e28d
13 changed files with 142 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
kdb-web/src/app/modules/admin/auth-users/components/auth-user/auth-user.component.html
View File

@ -3,7 +3,7 @@
</h1>
<div class="content-wrapper">
<div class="content">
<p-table #dt [value]="users" dataKey="id" editMode="row" [rowHover]="true" [rows]="10"
<p-table #dt [value]="users" responsiveLayout="stack" [breakpoint]="'720px'" responsiveLayout="stack" [breakpoint]="'720px'" dataKey="id" editMode="row" [rowHover]="true" [rows]="10"
[rowsPerPageOptions]="[10,25,50]" [paginator]="true" [loading]="loading" [totalRecords]="totalRecords"
[lazy]="true" (onLazyLoad)="nextPage($event)">

4
kdb-web/src/app/modules/shared/components/config-list/config-list.component.html
View File

@ -4,7 +4,7 @@
{{translationKey | translate}}:
</div>
<div class="content-data-value-row">
<p-table #dt [value]="internal_data" dataKey="id" editMode="row">
<p-table #dt [value]="internal_data" responsiveLayout="stack" [breakpoint]="'720px'" dataKey="id" editMode="row">
<ng-template pTemplate="caption">
<div class="table-caption">
<div class="table-caption-btn-wrapper btn-wrapper">
@ -15,7 +15,7 @@
</div>
</ng-template>
<ng-template pTemplate="body" let-value let-editing="editing" let-ri="rowIndex">
<tr [pEditableRow]="value" style="display: flex;">
<tr class="content-table-row" [pEditableRow]="value" style="display: flex;">
<td style="flex: 1;">
<p-cellEditor>
<ng-template pTemplate="input">

2
kdb-web/src/app/modules/shared/components/feature-flag-list/feature-flag-list.component.html
View File

@ -4,7 +4,7 @@
{{'common.feature_flags' | translate}}:
</div>
<div class="content-data-value-row">
<p-table #dt [value]="internal_data" dataKey="id" editMode="row">
<p-table #dt [value]="internal_data" responsiveLayout="stack" [breakpoint]="'720px'" dataKey="id" editMode="row">
<ng-template pTemplate="caption">
<div class="table-caption">
<div class="table-caption-btn-wrapper btn-wrapper">

2
kdb-web/src/app/modules/view/server/achievements/components/achievement/achievement.component.html
View File

@ -3,7 +3,7 @@
</h1>
<div class="content-wrapper">
<div class="content">
<p-table #dt [value]="achievements" dataKey="id" editMode="row" [rowHover]="true" [rows]="10"
<p-table #dt [value]="achievements" responsiveLayout="stack" [breakpoint]="'720px'" dataKey="id" editMode="row" [rowHover]="true" [rows]="10"
[rowsPerPageOptions]="[10,25,50]" [paginator]="true" [loading]="loading" [totalRecords]="totalRecords"
[lazy]="true" (onLazyLoad)="nextPage($event)">

2
kdb-web/src/app/modules/view/server/auto-role/components/auto-roles-rules/auto-roles-rules.component.html
View File

@ -3,7 +3,7 @@
</h1>
<div class="content-wrapper">
<div class="content">
<p-table #dt [value]="rules" dataKey="id" editMode="row" [rowHover]="true" [rows]="10"
<p-table #dt [value]="rules" responsiveLayout="stack" [breakpoint]="'720px'" dataKey="id" editMode="row" [rowHover]="true" [rows]="10"
[rowsPerPageOptions]="[10,25,50]" [paginator]="true" [loading]="loading" [totalRecords]="totalRecords"
[lazy]="true" (onLazyLoad)="nextPage($event)">

2
kdb-web/src/app/modules/view/server/auto-role/components/auto-roles/auto-roles.component.html
View File

@ -3,7 +3,7 @@
</h1>
<div class="content-wrapper">
<div class="content">
<p-table #dt [value]="auto_roles" dataKey="id" editMode="row" [rowHover]="true" [rows]="10"
<p-table #dt [value]="auto_roles" responsiveLayout="stack" [breakpoint]="'720px'" dataKey="id" editMode="row" [rowHover]="true" [rows]="10"
[rowsPerPageOptions]="[10,25,50]" [paginator]="true" [loading]="loading" [totalRecords]="totalRecords"
[lazy]="true" (onLazyLoad)="nextPage($event)">

2
kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.html
View File

@ -3,7 +3,7 @@
</h1>
<div class="content-wrapper">
<div class="content">
<p-table #dt [value]="levels" dataKey="id" editMode="row" [rowHover]="true" [rows]="10"
<p-table #dt [value]="levels" responsiveLayout="stack" [breakpoint]="'720px'" dataKey="id" editMode="row" [rowHover]="true" [rows]="10"
[rowsPerPageOptions]="[10,25,50]" [paginator]="true" [loading]="loading" [totalRecords]="totalRecords"
[lazy]="true" (onLazyLoad)="nextPage($event)">

2
kdb-web/src/app/modules/view/server/members/members.component.html
View File

@ -3,7 +3,7 @@
</h1>
<div class="content-wrapper">
<div class="content">
<p-table #dt [value]="members" dataKey="id" editMode="row" [rowHover]="true" [rows]="10"
<p-table #dt [value]="members" responsiveLayout="stack" [breakpoint]="'720px'" dataKey="id" editMode="row" [rowHover]="true" [rows]="10"
[rowsPerPageOptions]="[10,25,50]" [paginator]="true" [loading]="loading" [totalRecords]="totalRecords"
[lazy]="true" (onLazyLoad)="nextPage($event)">

164
kdb-web/src/styles.scss
View File

@ -162,43 +162,43 @@ header {
flex-direction: row;
flex: 1;
margin: 5px 0;
}
.content-column {
display: flex;
flex: 1;
}
.content-data-name {
display: flex;
flex: 1;
align-items: center;
font-size: 18px;
}
.content-data-value {
display: flex;
flex: 1;
align-items: center;
font-size: 18px;
input {
width: 100% !important;
.content-column {
display: flex;
flex: 1;
}
}
.content-data-value-row {
display: flex;
flex: 1;
flex-direction: column;
.content-data-name {
display: flex;
flex: 1;
align-items: center;
font-size: 18px;
}
font-size: 18px;
}
.content-divider {
margin: 5px 0;
.content-data-value {
display: flex;
flex: 1;
align-items: center;
font-size: 18px;
input {
width: 100% !important;
}
}
.content-data-value-row {
display: flex;
flex: 1;
flex-direction: column;
font-size: 18px;
}
.content-divider {
margin: 5px 0;
}
}
p-panel {
@ -212,7 +212,7 @@ header {
}
.content-input-field {
width: 50% !important;
width: 75% !important;
margin: 0 !important;
}
@ -258,6 +258,7 @@ header {
flex: 1;
flex-direction: row;
gap: 25px;
align-items: center;
.table-caption-text {
display: flex;
@ -329,6 +330,7 @@ header {
.logo {
display: flex;
align-items: center;
justify-content: center;
img {
width: 4rem;
@ -509,7 +511,7 @@ footer {
width: 50%;
display: flex;
align-items: end;
align-items: flex-end;
text-align: right;
justify-content: right;
gap: 10px;
@ -652,5 +654,99 @@ p-inputNumber {
}
}
}
.app {
.component-wrapper {
.component {
.content-wrapper {
.content {
.server-list-wrapper {
.server-list {
.server {
flex-direction: column;
}
}
}
.table-caption {
flex-direction: column;
.table-caption-btn-wrapper {
.p-button {
padding: 0.75rem 0 !important;
}
}
.table-caption-table-info,
.table-caption-btn-wrapper {
flex-direction: column;
align-items: baseline !important;
.p-multiselect-chip .p-multiselect-label {
flex-direction: column !important;
}
}
}
.content-row {
.content-column {
flex-direction: column;
word-break: break-word;
}
}
}
}
}
}
}
.p-datatable-wrapper {
border-top: 1px solid white;
}
.hidden-column {
display: none !important;
}
app-multi-select-columns {
width: 100%;
}
app-config-list {
.content-row {
.content-column {
flex-direction: column;
.content-data-name {
}
.content-data-value-row {
.content-table-row {
flex-direction: column;
}
}
}
}
}
.p-multiselect {
width: 100% !important;
}
.p-paginator {
flex-direction: column !important;
align-items: center;
justify-content: center;
}
.p-panel-content {
display: flex;
flex-direction: column;
gap: 10px;
.content-row {
flex-direction: column !important;
gap: 5px;
}
}
}

4
kdb-web/src/styles/themes/default-dark-theme.scss
View File

@ -411,9 +411,7 @@
}
}
.table-caption-btn-wrapper {
height: 30px !important;
}
}
.table-edit-input {

4
kdb-web/src/styles/themes/default-light-theme.scss
View File

@ -411,9 +411,7 @@
}
}
.table-caption-btn-wrapper {
height: 30px !important;
}
}
.table-edit-input {

4
kdb-web/src/styles/themes/sh-edraft-dark-theme.scss
View File

@ -416,10 +416,6 @@
}
}
}
.table-caption-btn-wrapper {
height: 30px !important;
}
}
.table-edit-input {

4
kdb-web/src/styles/themes/sh-edraft-light-theme.scss
View File

@ -411,9 +411,7 @@
}
}
.table-caption-btn-wrapper {
height: 30px !important;
}
}
.table-edit-input {