Skip to content

Commit dddc95b

Browse files
crazyservercrazyserver
committed
MOBILE-4329 chore: Add generic table styles
1 parent 791903a commit dddc95b

10 files changed

+112
-98
lines changed

‎src/core/features/grades/pages/course/course.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ <h1>{{ title }}</h1>
1515
<core-loading [hideUntil]="loaded">
1616
<core-empty-box *ngIf="!rows.length" icon="fas-chart-bar" [message]="'core.grades.nogradesreturned' | translate" />
1717
<div *ngIf="rows.length" class="core-grades-container">
18-
<table class="core-grades-table" [class.summary]="showSummary">
18+
<table class="core-table core-grades-table" [class.summary]="showSummary">
1919
<thead>
2020
<tr>
2121
<th *ngFor="let column of columns" id="{{column.name}}" class="ion-text-start"

‎src/core/features/grades/pages/course/course.scss‎

Lines changed: 8 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,22 @@
11
@use "theme/globals" as *;
22

33
:host {
4-
--header-background: var(--white);
5-
--odd-cell-background: var(--light);
6-
--odd-cell-hover: var(--gray-200);
7-
--even-cell-background: var(--white);
8-
--even-cell-hover: var(--light);
94
--icon-color: var(--gray-500);
10-
--border-color: var(--stroke);
11-
12-
.odd {
13-
--cell-background: var(--odd-cell-background);
14-
--cell-hover: var(--odd-cell-hover);
15-
}
16-
17-
.even {
18-
--cell-background: var(--even-cell-background);
19-
--cell-hover: var(--even-cell-hover);
20-
}
21-
5+
--core-table-border-color: var(--stroke);
226
}
237

248
:host-context(html.dark) {
25-
--header-background: var(--gray-900);
26-
--odd-cell-background: var(--gray-800);
27-
--odd-cell-hover: var(--gray-600);
28-
--even-cell-background: var(--gray-900);
29-
--even-cell-hover: var(--gray-700);
309
--icon-color: var(--gray-200);
3110
}
3211

33-
.core-grades-table {
34-
border-collapse: collapse;
35-
line-height: 20px;
12+
table.core-table.core-grades-table {
3613
width: 100%;
37-
font-size: 16px;
38-
color: var(--ion-text-color);
39-
40-
tr {
41-
border-bottom: 1px solid var(--border-color);
42-
}
43-
44-
th, td {
45-
@include padding(8px, 8px, 8px, null);
46-
vertical-align: top;
47-
white-space: normal;
48-
text-align: start;
49-
}
50-
51-
thead th {
52-
vertical-align: bottom;
53-
font-weight: bold;
54-
background-color: var(--header-background);
55-
}
14+
margin: 0px;
5615

5716
thead #gradeitem {
5817
@include padding(null, null, null, 24px);
5918
}
6019

61-
tbody th {
62-
font-weight: normal;
63-
}
64-
6520
tbody tr.core-bold th {
6621
font-weight: inherit;
6722
}
@@ -70,9 +25,13 @@
7025
@include padding(null, null, null, 4px);
7126
}
7227

28+
th, td {
29+
@include padding(8px, 8px, 8px, 0px);
30+
vertical-align: top;
31+
}
32+
7333
.core-grades-table-gradeitem {
7434
@include padding(null, null, null, 4px);
75-
font-weight: bold;
7635

7736
&.column-itemname {
7837
@include padding(null, null, null, 0);
@@ -90,7 +49,6 @@
9049
--filter: var(--module-icon-filter);
9150
}
9251

93-
9452
ion-icon {
9553
color: var(--icon-color);
9654
}
@@ -130,21 +88,6 @@
13088
width: 0;
13189
}
13290

133-
.ion-no-border {
134-
border: 0 !important;
135-
}
136-
137-
.dimmed_text,
138-
.hidden {
139-
opacity: .7;
140-
}
141-
142-
.odd, .even {
143-
td, th, th[aria-current="page"] {
144-
background-color: var(--cell-background);
145-
}
146-
}
147-
14891
.core-grades-grade-clickable {
14992
cursor: pointer;
15093
&:hover {

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

-79 Bytes
Loading

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

-107 Bytes
Loading

‎src/core/features/reportbuilder/components/report-detail/report-detail.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,15 +22,15 @@
2222
</ng-container>
2323

2424
<ng-container *ngIf="!isCardLayout">
25-
<table>
25+
<table class="core-table">
2626
<thead>
2727
<tr>
2828
<th *ngFor="let header of state.report.data.headers">
2929
{{ header }}
3030
</th>
3131
</tr>
3232
</thead>
33-
<tbody>
33+
<tbody class="auto-striped">
3434
<tr *ngFor="let row of state.report.data.rows">
3535
<td *ngFor="let column of row.columns">
3636
<core-format-text *ngIf="isString(column); else notText" [text]="column" [contextLevel]="source$ | async"

‎src/core/features/reportbuilder/components/report-detail/report-detail.scss‎

Lines changed: 0 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,14 @@
1-
@use "theme/globals" as *;
2-
31
:host {
4-
--header-background: var(--white);
5-
--border-color: var(--stroke);
6-
72
.report-title {
83
ion-item {
94
width: 100%;
105
}
116
}
127

138
table {
14-
width: 98%;
15-
margin: 1em auto;
16-
border-collapse: collapse;
17-
color: var(--ion-text-color);
189
overflow-x: auto;
19-
display: block;
20-
21-
tbody {
22-
display: table;
23-
}
24-
25-
th {
26-
background-color: var(--header-background);
27-
}
28-
29-
tr {
30-
border-bottom: 1px solid var(--border-color);
31-
32-
&:nth-child(even) {
33-
background: var(--light);
34-
}
35-
}
3610

3711
th, td {
38-
@include padding(8px, 8px, 8px, null);
39-
text-align: start;
4012
min-width: 200px;
4113
}
4214

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

35 Bytes
Loading

‎src/theme/theme.base.scss‎

Lines changed: 88 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1711,9 +1711,11 @@ ion-input .native-input {
17111711
}
17121712
}
17131713

1714-
input {
1714+
ion-input,
1715+
ion-input input,
1716+
ion-textarea {
17151717
--placeholder-color: var(--ion-placeholder-color);
1716-
--placeholder-opacity: .85;
1718+
--placeholder-opacity: .65;
17171719
}
17181720

17191721
// 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 {
19051907
}
19061908

19071909

1910+
.core-flex-no-grow {
1911+
flex-grow: 0;
1912+
}
1913+
19081914
// Loader animation.
19091915
.core-loading {
19101916
position: relative;
@@ -2015,3 +2021,83 @@ ion-item.item-label-stacked ion-datetime-button {
20152021
margin-bottom: 8px;
20162022
align-self: self-end;
20172023
}
2024+
2025+
// Table App styles
2026+
table.core-table {
2027+
border-collapse: collapse;
2028+
line-height: 20px;
2029+
width: 98%;
2030+
margin: 1em auto;
2031+
color: var(--text-color);
2032+
2033+
2034+
thead th {
2035+
vertical-align: bottom;
2036+
font-weight: bold;
2037+
font-size: 14px;
2038+
background-color: var(--core-table-header-background);
2039+
}
2040+
2041+
tbody th {
2042+
font-weight: normal;
2043+
}
2044+
2045+
th, td {
2046+
padding: 8px;
2047+
white-space: normal;
2048+
text-align: start;
2049+
}
2050+
2051+
tr {
2052+
border-bottom: 1px solid var(--core-table-border-color);
2053+
}
2054+
2055+
tbody td {
2056+
font-size: 16px;
2057+
}
2058+
2059+
.odd {
2060+
--cell-background: var(--core-table-odd-cell-background);
2061+
--cell-hover: var(--core-table-odd-cell-hover);
2062+
}
2063+
2064+
.even {
2065+
--cell-background: var(--core-table-even-cell-background);
2066+
--cell-hover: var(--core-table-even-cell-hover);
2067+
}
2068+
2069+
.odd, .even {
2070+
td, th, th[aria-current="page"] {
2071+
background-color: var(--cell-background);
2072+
2073+
&:hover {
2074+
background-color: var(--cell-hover);
2075+
}
2076+
}
2077+
}
2078+
2079+
tbody.auto-striped tr:nth-child(odd) {
2080+
background-color: var(--core-table-odd-cell-background);
2081+
2082+
&:hover {
2083+
background-color: var(--core-table-even-odd-hover);
2084+
}
2085+
}
2086+
2087+
tbody.auto-striped tr:nth-child(even) {
2088+
background-color: var(--core-table-even-cell-background);
2089+
2090+
&:hover {
2091+
background-color: var(--core-table-even-cell-hover);
2092+
}
2093+
}
2094+
2095+
.ion-no-border {
2096+
border: 0 !important;
2097+
}
2098+
2099+
.dimmed_text,
2100+
.hidden {
2101+
opacity: .7;
2102+
}
2103+
}

‎src/theme/theme.dark.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -169,4 +169,10 @@ html.dark {
169169

170170
--addon-forum-border-color: var(--gray-500);
171171
--addon-forum-highlight-color: var(--gray-800);
172+
173+
--core-table-header-background: var(--gray-900);
174+
--core-table-odd-cell-background: var(--gray-800);
175+
--core-table-odd-cell-hover: var(--gray-600);
176+
--core-table-even-cell-background: var(--gray-900);
177+
--core-table-even-cell-hover: var(--gray-700);
172178
}

‎src/theme/theme.light.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -381,6 +381,13 @@ html {
381381
--core-dd-question-radius: 10px;
382382
--core-dd-question-border: var(--medium);
383383

384+
--core-table-header-background: var(--white);
385+
--core-table-odd-cell-background: var(--light);
386+
--core-table-odd-cell-hover: var(--gray-200);
387+
--core-table-even-cell-background: var(--white);
388+
--core-table-even-cell-hover: var(--light);
389+
--core-table-border-color: var(--stroke);
390+
384391
--rotate-expandable: rotate(90deg);
385392
&[dir=rtl] {
386393
--rotate-expandable: rotate(-90deg);

0 commit comments

Comments
 (0)