1.1.0_responsive #347

Merged
edraft merged 2 commits from 1.1.0_responsive into 1.1.0 2023-08-17 23:38:21 +02:00
16 changed files with 179 additions and 72 deletions

View File

@ -1,6 +1,6 @@
{
"name": "kdb-web",
"version": "1.1.0.rc4",
"version": "1.1.0",
"scripts": {
"ng": "ng",
"update-version": "ts-node-esm update-version.ts",

View File

@ -8,7 +8,7 @@
{{frontendVersion.getVersionString()}}
</span>
</div>
<span class="version-divider">
<span class="divider">
|
</span>
<div class="backend-version">
@ -22,7 +22,7 @@
</div>
<div class="right">
<button pButton label="{{'footer.privacy' | translate}}" class="btn text-btn" (click)="navigateToPrivacy()"></button>
<span> | </span>
<span class="divider"> | </span>
<button pButton label="{{'footer.imprint' | translate}}" class="btn text-btn" (click)="navigateToImprint()"></button>
</div>
</footer>

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)">

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">

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">

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)">

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)">

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)">

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)">

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)">

View File

@ -2,6 +2,6 @@
"WebVersion": {
"Major": "1",
"Minor": "1",
"Micro": "0.rc4"
"Micro": "0"
}
}

View File

@ -79,7 +79,14 @@ header {
.logo {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
.app-name {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.header-menu {
@ -119,6 +126,7 @@ header {
.component-wrapper {
width: 100%;
overflow: hidden;
.component {
width: 100%;
@ -154,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 {
@ -204,7 +212,7 @@ header {
}
.content-input-field {
width: 50% !important;
width: 75% !important;
margin: 0 !important;
}
@ -250,6 +258,7 @@ header {
flex: 1;
flex-direction: row;
gap: 25px;
align-items: center;
.table-caption-text {
display: flex;
@ -316,8 +325,12 @@ header {
gap: 15px;
padding: 20px;
overflow: hidden;
.logo {
display: flex;
align-items: center;
justify-content: center;
img {
width: 4rem;
@ -337,6 +350,7 @@ header {
justify-content: center;
align-items: center;
word-break: break-word;
}
.data {
@ -480,7 +494,7 @@ header {
footer {
width: 100%;
height: $footerHeight;
min-height: $footerHeight;
padding: 0 10px;
display: flex;
@ -489,23 +503,18 @@ footer {
.left {
width: 50%;
display: flex;
// .frontend-version {
// }
.version-divider {
margin: 0 5px;
}
// .backend-version {
// }
gap: 10px;
}
.right {
width: 50%;
display: flex;
align-items: flex-end;
text-align: right;
justify-content: right;
gap: 10px;
.p-button-label {
font-weight: unset !important;
@ -633,3 +642,111 @@ p-inputNumber {
padding: 0 !important;
border: none !important;
}
@media (max-width: 720px) {
footer {
.left,
.right {
flex-direction: column;
.divider {
display: none;
}
}
}
.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;
}
}
}

View File

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

View File

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

View File

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

View File

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