Skip to content

Commit

Permalink
ARPA-840 Optimized mobile style
Browse files Browse the repository at this point in the history
  • Loading branch information
VILLAN3LL3 committed Feb 11, 2024
1 parent 8070abb commit 10e5625
Show file tree
Hide file tree
Showing 8 changed files with 206 additions and 91 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,12 @@

<!-- The feed template is projected into the graph-ql-feed component. -->
<ng-template #feed let-feed>
<arpa-table (lazyEvents)="feedSource.onLazy($event)" [columns]="columns" [feed] = feed (rowClickEvents)="onRowClick($event)"></arpa-table>
<div class="audit-log-table">
<arpa-table
(lazyEvents)="feedSource.onLazy($event)"
[columns]="columns"
[feed]="feed"
(rowClickEvents)="onRowClick($event)"
></arpa-table>
</div>
</ng-template>
55 changes: 28 additions & 27 deletions src/app/features/audit-log/audit-log/audit-log.component.scss
Original file line number Diff line number Diff line change
@@ -1,43 +1,44 @@
:host ::ng-deep {
.p-datatable .p-datatable-tbody > tr > td .p-column-title {
display: none;
}
.audit-log-table {
.p-datatable .p-datatable-tbody > tr > td .p-column-title {
display: none;
}

.action {
width: 4rem;
}
.action {
width: 4rem;
}

.p-datatable-wrapper table {
background-color: #1e1e1e;
.p-datatable-wrapper table {
background-color: #1e1e1e;
}
}
}

@media screen and (max-width: 50rem) {
:host ::ng-deep {
@media screen and (max-width: 959px) {
.p-datatable {
.p-datatable-thead > tr > th,
.p-datatable-tfoot > tr > td {
display: none !important;
}

.p-datatable-tbody > tr > td {
text-align: left;
display: block;
width: 100%;
float: left;
clear: left;
border: 0 none;
.p-datatable-tbody > tr {
padding: 0.5rem 0;
border-bottom: 1px solid var(--surface-d);

.p-column-title {
padding: .4rem;
min-width: 30%;
display: inline-block;
margin: -.4em 1em -.4em -.4rem;
font-weight: bold;
}
& > td {
text-align: left;
width: 100%;
float: left;
clear: left;
border: 0 none;
margin: 0.2rem;

&:last-child {
border-bottom: 1px solid var(--surface-d);
.p-column-title {
padding: 0.4rem;
min-width: 30%;
display: inline-block;
margin: -0.4em 1em -0.4em -0.4rem;
font-weight: bold;
}
}
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,7 @@
<ul>
<li *ngFor="let item of lastInvitation.successfulInvites | keyvalue">{{ item.key }} ({{ item.value }})</li>
</ul>
<p>
{{ 'INVITATION_HINT' | translate }}:
</p>
<p>{{ 'INVITATION_HINT' | translate }}:</p>
<ul>
<li *ngFor="let item of lastInvitation.personsWithMultipleEmailAddresses | keyvalue">
{{ item.key }} ({{ item.value.join(', ') }})
Expand All @@ -34,7 +32,7 @@
</ng-template>
</p-overlayPanel>
<ng-template #EMPTY>
<p>{{'NO_INVITATION_YET' | translate }}</p>
<p>{{ 'NO_INVITATION_YET' | translate }}</p>
</ng-template>
<button
class="p-mb-3"
Expand All @@ -51,12 +49,14 @@

<!-- The feed template is projected into the graph-ql-feed component. -->
<ng-template #feed let-feed>
<arpa-table
(lazyEvents)="feedSource.onLazy($event)"
[columns]="columns"
[feed]="feed"
[actionsTemplateRef]="actionsTemplate"
></arpa-table>
<div class="performer-list-table">
<arpa-table
(lazyEvents)="feedSource.onLazy($event)"
[columns]="columns"
[feed]="feed"
[actionsTemplateRef]="actionsTemplate"
></arpa-table>
</div>
</ng-template>

<ng-template #actionsTemplate let-row>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
:host ::ng-deep {
.performer-list-table {
.p-datatable .p-datatable-tbody > tr > td .p-column-title {
display: none;
}

.action {
width: 4rem;
}

.p-datatable-wrapper table {
background-color: #1e1e1e;
}
}

@media screen and (max-width: 959px) {
.p-datatable {
.p-datatable-thead > tr > th,
.p-datatable-tfoot > tr > td {
display: none !important;
}

arpa-avatar {
display: none;
}

.p-datatable-tbody > tr {
padding: 0.5rem 0;

& > td {
text-align: left;
width: 100%;
float: left;
clear: left;
border: 0 none;
margin: 0.2rem;
border-bottom: 1px solid var(--surface-d);

.p-column-title {
padding: 0.4rem;
min-width: 30%;
display: inline-block;
margin: -0.4em 1em -0.4em -0.4rem;
font-weight: bold;
}
}
}
}
}
}
34 changes: 19 additions & 15 deletions src/app/features/persons/person-list/person-list.component.html
Original file line number Diff line number Diff line change
@@ -1,24 +1,28 @@
<div class='p-formgroup-inline p-jc-between'>
<div class='p-field p-col p-text-left' >
<button label="{{ 'persons.ADD_NEW_PERSON' | translate }}"
icon='pi pi-plus' pButton
(click)='openPersonDetailDialog(null)'
type='button'></button>
<div class="p-formgroup-inline p-jc-between">
<div class="p-field p-col p-text-left">
<button
label="{{ 'persons.ADD_NEW_PERSON' | translate }}"
icon="pi pi-plus"
pButton
(click)="openPersonDetailDialog(null)"
type="button"
></button>
</div>
</div>

<!-- Graphql feed controls and holds graphql api results. -->
<arpa-graph-ql-feed #feedSource [contentTemplate]='feed' [query]='query'></arpa-graph-ql-feed>
<arpa-graph-ql-feed #feedSource [contentTemplate]="feed" [query]="query"></arpa-graph-ql-feed>

<router-outlet name='modal'></router-outlet>
<router-outlet name="modal"></router-outlet>

<!-- The feed template is projected into the graph-ql-feed component. -->
<ng-template #feed let-feed>
<arpa-table
(lazyEvents)='feedSource.onLazy($event)'
(rowClickEvents)='onRowClick($event)'
[columns]='columns'
[feed]='feed'
></arpa-table>
<div class="person-list-table">
<arpa-table
(lazyEvents)="feedSource.onLazy($event)"
(rowClickEvents)="onRowClick($event)"
[columns]="columns"
[feed]="feed"
></arpa-table>
</div>
</ng-template>

50 changes: 50 additions & 0 deletions src/app/features/persons/person-list/person-list.component.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
:host ::ng-deep {
.person-list-table {
.p-datatable .p-datatable-tbody > tr > td .p-column-title {
display: none;
}

.action {
width: 4rem;
}

.p-datatable-wrapper table {
background-color: #1e1e1e;
}
}

@media screen and (max-width: 959px) {
.p-datatable {
.p-datatable-thead > tr > th,
.p-datatable-tfoot > tr > td {
display: none !important;
}

arpa-avatar {
display: none;
}

.p-datatable-tbody > tr {
padding: 0.5rem 0;
border-bottom: 1px solid var(--surface-d);

& > td {
text-align: left;
width: 100%;
float: left;
clear: left;
border: 0 none;
margin: 0.2rem;

.p-column-title {
padding: 0.4rem;
min-width: 30%;
display: inline-block;
margin: -0.4em 1em -0.4em -0.4rem;
font-weight: bold;
}
}
}
}
}
}
24 changes: 13 additions & 11 deletions src/app/features/projects/project-list/project-list.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,19 @@

<!-- The feed template is projected into the graph-ql-feed component. -->
<ng-template #feed let-feed>
<arpa-table
(lazyEvents)="feedSource.onLazy($event)"
(rowClickEvents)="onRowClick($event)"
[actionsTemplateRef]="actionsTemplate"
[columns]="columns"
[feed]="feed"
>
<ng-template arpaTableColumn="completed" let-value>
<i *ngIf="value" class="pi pi-check"></i>
</ng-template>
</arpa-table>
<div class="project-list-table">
<arpa-table
(lazyEvents)="feedSource.onLazy($event)"
(rowClickEvents)="onRowClick($event)"
[actionsTemplateRef]="actionsTemplate"
[columns]="columns"
[feed]="feed"
>
<ng-template arpaTableColumn="completed" let-value>
<i *ngIf="value" class="pi pi-check"></i>
</ng-template>
</arpa-table>
</div>
</ng-template>

<!-- The actions template is used in the arpa-table component and added to each row. -->
Expand Down
55 changes: 28 additions & 27 deletions src/app/features/projects/project-list/project-list.component.scss
Original file line number Diff line number Diff line change
@@ -1,43 +1,44 @@
:host ::ng-deep {
.p-datatable .p-datatable-tbody > tr > td .p-column-title {
display: none;
}
.project-list-table {
.p-datatable .p-datatable-tbody > tr > td .p-column-title {
display: none;
}

.action {
width: 4rem;
}
.action {
width: 4rem;
}

.p-datatable-wrapper table {
background-color: #1e1e1e;
.p-datatable-wrapper table {
background-color: #1e1e1e;
}
}
}

@media screen and (max-width: 50rem) {
:host ::ng-deep {
@media screen and (max-width: 959px) {
.p-datatable {
.p-datatable-thead > tr > th,
.p-datatable-tfoot > tr > td {
display: none !important;
}

.p-datatable-tbody > tr > td {
text-align: left;
display: block;
width: 100%;
float: left;
clear: left;
border: 0 none;
.p-datatable-tbody > tr {
padding: 0.5rem 0;
border-bottom: 1px solid var(--surface-d);

.p-column-title {
padding: .4rem;
min-width: 30%;
display: inline-block;
margin: -.4em 1em -.4em -.4rem;
font-weight: bold;
}
& > td {
text-align: left;
width: 100%;
float: left;
clear: left;
border: 0 none;
margin: 0.2rem;

&:last-child {
border-bottom: 1px solid var(--surface-d);
.p-column-title {
padding: 0.4rem;
min-width: 30%;
display: inline-block;
margin: -0.4em 1em -0.4em -0.4rem;
font-weight: bold;
}
}
}
}
Expand Down

0 comments on commit 10e5625

Please sign in to comment.