EVOgeek/Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-4329 chore: Add generic table styles

Browse Source
This commit is contained in:
Pau Ferrer Ocaña 2024-02-15 12:41:35 +01:00
parent 791903a80d
commit dddc95bfc6
10 changed files with 112 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/core/features/grades/pages/course/course.html
View File

@ -15,7 +15,7 @@
<core-loading [hideUntil]="loaded">
<core-empty-box *ngIf="!rows.length" icon="fas-chart-bar" [message]="'core.grades.nogradesreturned' | translate" />
<div *ngIf="rows.length" class="core-grades-container">
<table class="core-grades-table" [class.summary]="showSummary">
<table class="core-table core-grades-table" [class.summary]="showSummary">
<thead>
<tr>
<th *ngFor="let column of columns" id="{{column.name}}" class="ion-text-start"

73
src/core/features/grades/pages/course/course.scss
View File

@ -1,67 +1,22 @@
@use "theme/globals" as *;
:host {
--header-background: var(--white);
--odd-cell-background: var(--light);
--odd-cell-hover: var(--gray-200);
--even-cell-background: var(--white);
--even-cell-hover: var(--light);
--icon-color: var(--gray-500);
--border-color: var(--stroke);
.odd {
--cell-background: var(--odd-cell-background);
--cell-hover: var(--odd-cell-hover);
}
.even {
--cell-background: var(--even-cell-background);
--cell-hover: var(--even-cell-hover);
}
--core-table-border-color: var(--stroke);
}
:host-context(html.dark) {
--header-background: var(--gray-900);
--odd-cell-background: var(--gray-800);
--odd-cell-hover: var(--gray-600);
--even-cell-background: var(--gray-900);
--even-cell-hover: var(--gray-700);
--icon-color: var(--gray-200);
}
.core-grades-table {
border-collapse: collapse;
line-height: 20px;
table.core-table.core-grades-table {
width: 100%;
font-size: 16px;
color: var(--ion-text-color);
tr {
border-bottom: 1px solid var(--border-color);
}
th, td {
@include padding(8px, 8px, 8px, null);
vertical-align: top;
white-space: normal;
text-align: start;
}
thead th {
vertical-align: bottom;
font-weight: bold;
background-color: var(--header-background);
}
margin: 0px;
thead #gradeitem {
@include padding(null, null, null, 24px);
}
tbody th {
font-weight: normal;
}
tbody tr.core-bold th {
font-weight: inherit;
}
@ -70,9 +25,13 @@
@include padding(null, null, null, 4px);
}
th, td {
@include padding(8px, 8px, 8px, 0px);
vertical-align: top;
}
.core-grades-table-gradeitem {
@include padding(null, null, null, 4px);
font-weight: bold;
&.column-itemname {
@include padding(null, null, null, 0);
@ -90,7 +49,6 @@
--filter: var(--module-icon-filter);
}
ion-icon {
color: var(--icon-color);
}
@ -130,21 +88,6 @@
width: 0;
}
.ion-no-border {
border: 0 !important;
}
.dimmed_text,
.hidden {
opacity: .7;
}
.odd, .even {
td, th, th[aria-current="page"] {
background-color: var(--cell-background);
}
}
.core-grades-grade-clickable {
cursor: pointer;
&:hover {

BIN
src/core/features/login/tests/behat/snapshots/test-basic-usage-of-login-in-app-add-a-new-account-in-the-app--site-name-in-displayed-when-adding-a-new-account_13.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 33 KiB

After

Width:  |  Height:  |  Size: 33 KiB

BIN
src/core/features/login/tests/behat/snapshots/test-basic-usage-of-login-in-app-add-a-new-account-in-the-app--site-name-in-displayed-when-adding-a-new-account_9.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 28 KiB

4
src/core/features/reportbuilder/components/report-detail/report-detail.html
View File

@ -22,7 +22,7 @@
</ng-container>
<ng-container *ngIf="!isCardLayout">
<table>
<table class="core-table">
<thead>
<tr>
<th *ngFor="let header of state.report.data.headers">
@ -30,7 +30,7 @@
</th>
</tr>
</thead>
<tbody>
<tbody class="auto-striped">
<tr *ngFor="let row of state.report.data.rows">
<td *ngFor="let column of row.columns">
<core-format-text *ngIf="isString(column); else notText" [text]="column" [contextLevel]="source$ | async"

28
src/core/features/reportbuilder/components/report-detail/report-detail.scss
View File

@ -1,9 +1,4 @@
@use "theme/globals" as *;
:host {
--header-background: var(--white);
--border-color: var(--stroke);
.report-title {
ion-item {
width: 100%;
@ -11,32 +6,9 @@
}
table {
width: 98%;
margin: 1em auto;
border-collapse: collapse;
color: var(--ion-text-color);
overflow-x: auto;
display: block;
tbody {
display: table;
}
th {
background-color: var(--header-background);
}
tr {
border-bottom: 1px solid var(--border-color);
&:nth-child(even) {
background: var(--light);
}
}
th, td {
@include padding(8px, 8px, 8px, null);
text-align: start;
min-width: 200px;
}

BIN
src/core/tests/behat/snapshots/it-navigates-properly-in-pages-with-a-split-view-component-navigate-in-grades-tab-on-tablet_15.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 36 KiB

After

Width:  |  Height:  |  Size: 36 KiB

90
src/theme/theme.base.scss
View File

@ -1711,9 +1711,11 @@ ion-input .native-input {
}
}
input {
ion-input,
ion-input input,
ion-textarea {
--placeholder-color: var(--ion-placeholder-color);
--placeholder-opacity: .85;
--placeholder-opacity: .65;
}
// Disable scroll on parent ion contents to enabled PTR on the ones inside the splitview. See split-view component for more info.
@ -1905,6 +1907,10 @@ swiper-container {
}
.core-flex-no-grow {
flex-grow: 0;
}
// Loader animation.
.core-loading {
position: relative;
@ -2015,3 +2021,83 @@ ion-item.item-label-stacked ion-datetime-button {
margin-bottom: 8px;
align-self: self-end;
}
// Table App styles
table.core-table {
border-collapse: collapse;
line-height: 20px;
width: 98%;
margin: 1em auto;
color: var(--text-color);
thead th {
vertical-align: bottom;
font-weight: bold;
font-size: 14px;
background-color: var(--core-table-header-background);
}
tbody th {
font-weight: normal;
}
th, td {
padding: 8px;
white-space: normal;
text-align: start;
}
tr {
border-bottom: 1px solid var(--core-table-border-color);
}
tbody td {
font-size: 16px;
}
.odd {
--cell-background: var(--core-table-odd-cell-background);
--cell-hover: var(--core-table-odd-cell-hover);
}
.even {
--cell-background: var(--core-table-even-cell-background);
--cell-hover: var(--core-table-even-cell-hover);
}
.odd, .even {
td, th, th[aria-current="page"] {
background-color: var(--cell-background);
&:hover {
background-color: var(--cell-hover);
}
}
}
tbody.auto-striped tr:nth-child(odd) {
background-color: var(--core-table-odd-cell-background);
&:hover {
background-color: var(--core-table-even-odd-hover);
}
}
tbody.auto-striped tr:nth-child(even) {
background-color: var(--core-table-even-cell-background);
&:hover {
background-color: var(--core-table-even-cell-hover);
}
}
.ion-no-border {
border: 0 !important;
}
.dimmed_text,
.hidden {
opacity: .7;
}
}

6
src/theme/theme.dark.scss
View File

@ -169,4 +169,10 @@ html.dark {
--addon-forum-border-color: var(--gray-500);
--addon-forum-highlight-color: var(--gray-800);
--core-table-header-background: var(--gray-900);
--core-table-odd-cell-background: var(--gray-800);
--core-table-odd-cell-hover: var(--gray-600);
--core-table-even-cell-background: var(--gray-900);
--core-table-even-cell-hover: var(--gray-700);
}

7
src/theme/theme.light.scss
View File

@ -381,6 +381,13 @@ html {
--core-dd-question-radius: 10px;
--core-dd-question-border: var(--medium);
--core-table-header-background: var(--white);
--core-table-odd-cell-background: var(--light);
--core-table-odd-cell-hover: var(--gray-200);
--core-table-even-cell-background: var(--white);
--core-table-even-cell-hover: var(--light);
--core-table-border-color: var(--stroke);
--rotate-expandable: rotate(90deg);
&[dir=rtl] {
--rotate-expandable: rotate(-90deg);