Skip to content

Commit ad9a9dc

Browse files
yscikyscik
authored
Use theme colors for job overlay, improve dashboard on small screens (#2810)
1 parent 2224b9e commit ad9a9dc

15 files changed

+422
-79
lines changed

‎assets/css/job-dashboard.scss

+82-21
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,14 @@
22
@import 'mixins';
33
@import 'job-overlay';
44

5-
.jm-dashboard {
5+
.jm-dashboard-table {
6+
container-name: jm-dashboard-table;
67
container-type: inline-size;
7-
88
--jm-dashboard-company-logo-size: calc(var(--jm-ui-icon-size) + 2 * var(--jm-ui-space-xs));
9+
10+
&.jm-dashboard-table--large {
11+
container-name: jm-dashboard-table-large;
12+
}
913
}
1014

1115
.jm-dashboard-job, .jm-dashboard-header {
@@ -42,14 +46,10 @@
4246
.jm-dashboard-job-column {
4347
flex: 1 1 calc(50% - var(--jm-ui-space-sm));
4448
min-width: 0;
45-
}
46-
47-
.jm-dashboard small {
48-
font-size: var(--jm-ui-font-size-s);
49-
}
50-
51-
.jm-dashboard .job_title {
52-
flex: 1 1 200%;
49+
line-height: 1.2;
50+
small {
51+
white-space: nowrap;
52+
}
5353
}
5454

5555
.jm-dashboard-job-column.company {
@@ -80,10 +80,6 @@
8080
width: var(--jm-ui-icon-size-s);
8181
height: var(--jm-ui-icon-size-s);
8282
}
83-
84-
.job-status-rejected {
85-
color: var(--jm-ui-error-color);
86-
}
8783
}
8884

8985
.jm-dashboard img.company_logo {
@@ -92,27 +88,47 @@
9288
object-fit: contain;
9389
}
9490

95-
9691
.jm-dashboard-job-column.actions {
97-
flex: 0.5 1 100%;
9892
text-align: right;
9993
display: flex;
10094
justify-content: flex-end;
10195
align-items: center;
102-
gap: var(--jm-ui-space-m);
96+
gap: var(--jm-ui-space-s);
10397
}
10498

10599
.jm-dashboard-job-column a.job-title {
106100
font-weight: 600;
107101
font-size: var(--jm-ui-font-size);
108-
line-height: 1.2;
109102
text-decoration: unset;
110103
}
111104

112105
.jm-dashboard-job-column a.job-title:hover {
113106
text-decoration: underline;
114107
}
115108

109+
.jm-dashboard-job-column-label {
110+
text-transform: uppercase;
111+
font-size: var(--jm-ui-font-size-s);
112+
font-weight: 200;
113+
color: fadeCurrentColor( 70% );
114+
}
115+
116+
.jm-dashboard-job .jm-dashboard-job-column-label {
117+
display: none;
118+
}
119+
120+
.jm-dashboard small {
121+
font-size: var(--jm-ui-font-size-s);
122+
}
123+
124+
.jm-dashboard-table .job_title {
125+
flex: 1 1 200%;
126+
}
127+
128+
.jm-dashboard-table--large .job_title {
129+
flex: 1 1 150%;
130+
}
131+
116132
.jm-dashboard-action {
117133
display: block;
118134
text-decoration: none;
@@ -126,12 +142,33 @@
126142
color: inherit;
127143
}
128144

129-
.job-dashboard-action-delete {
145+
.jm-dashboard .job-dashboard-action-delete {
130146
color: var(--jm-ui-danger-color);
131147
}
132148

133-
@container (width < 540px)
134-
{
149+
.jm-dashboard .job-manager-pagination {
150+
ul.page-numbers {
151+
display: flex;
152+
flex-wrap: wrap;
153+
align-items: center;
154+
justify-content: center;
155+
font-size: var(--jm-ui-font-size);
156+
border: unset;
157+
gap: 12px;
158+
}
159+
li {
160+
min-width: 32px;
161+
text-align: center;
162+
border: 1px solid var(--jm-ui-border-light);
163+
border-radius: 2px;
164+
165+
}
166+
}
167+
168+
@mixin jm-dashboard-job-mobile {
169+
.jm-dashboard-job-column:where(:not(.job_title):not(.actions):not(.company)) .jm-dashboard-job-column-label {
170+
display: block;
171+
}
135172
.jm-dashboard-job {
136173
flex-wrap: wrap;
137174
align-items: flex-start;
@@ -149,4 +186,28 @@
149186
flex-basis: calc( 100% - var(--jm-dashboard-company-logo-size) - var(--jm-ui-space-sm) );
150187
order: -1;
151188
}
189+
190+
}
191+
192+
@container jm-dashboard-table-large (width < 940px)
193+
{
194+
.jm-dashboard-job-column.job_title {
195+
flex-basis: 100%;
196+
}
197+
}
198+
199+
@container jm-dashboard-table (width < 540px)
200+
{
201+
@include jm-dashboard-job-mobile;
202+
}
203+
@container jm-dashboard-table-large (width < 780px)
204+
{
205+
@include jm-dashboard-job-mobile;
206+
}
207+
208+
@container jm-dashboard-table-large (540px < width < 780px)
209+
{
210+
.jm-dashboard-job-column {
211+
flex: 1 1 calc(33% - 2 * var(--jm-ui-space-sm));
212+
}
152213
}

‎assets/css/job-overlay.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@
131131
.jm-job-stats {
132132

133133
--jm-stat-color-page-view: var(--jm-ui-accent-color);
134-
--jm-stat-color-unique-view: color-mix(in srgb, #000, var(--jm-stat-color-page-view) 40%);
134+
--jm-stat-color-unique-view: var(--jm-ui-accent-alt-color);
135135
}
136136

137137
.jm-job-stat-details {

‎assets/css/ui.dialog.scss

+4
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
}
2222

2323
.jm-dialog {
24+
font-family: var(--jm-ui-font-family);
2425
font-size: var(--jm-ui-font-size);
2526
--jm-dialog-padding: var(--jm-ui-space-l);
2627
}
@@ -54,6 +55,9 @@
5455
overflow: auto;
5556
overscroll-behavior: contain;
5657

58+
body & a:not(:hover):not(:active):not(:focus) {
59+
color: var(--jm-ui-accent-color, #1a1a1a);
60+
}
5761
}
5862
.jm-dialog-modal-container {
5963
position: relative;

‎assets/css/ui.elements.scss

+19-5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11

2+
.jm-ui {
3+
font-family: var(--jm-ui-font-family);
4+
}
5+
26
.jm-ui-row {
37
display: flex;
48
gap: var(--jm-ui-space-xs);
@@ -26,6 +30,7 @@
2630
text-decoration: none;
2731
outline: unset;
2832
cursor: pointer;
33+
border: unset;
2934
}
3035

3136
.jm-ui-button,
@@ -51,6 +56,14 @@
5156
}
5257
}
5358

59+
a[href].jm-ui-button,
60+
a[href].jm-ui-button--outline,
61+
a[href].jm-ui-button--icon {
62+
html body & {
63+
text-decoration: none;
64+
}
65+
}
66+
5467
.jm-ui-button {
5568
border: 1px solid currentColor;
5669

@@ -67,13 +80,10 @@
6780
}
6881
}
6982

70-
.jm-ui-button--small,
83+
.jm-ui-button--small
7184
{
72-
padding: var(--jm-ui-space-xxs) var(--jm-ui-space-s);
7385
gap: var(--jm-ui-space-xs);
7486
font-size: var(--jm-ui-font-size-s);
75-
font-weight: 400;
76-
letter-spacing: -0.1px;
7787
}
7888

7989
.jm-ui-button__a {
@@ -83,6 +93,10 @@
8393
.jm-ui-button--outline {
8494
background: unset;
8595
border: 1px solid currentColor;
96+
97+
&:hover, &:focus {
98+
border: 1px solid currentColor;
99+
}
86100
}
87101

88102
.jm-ui-button--icon {
@@ -238,7 +252,7 @@
238252
font-size: var(--jm-ui-font-size-s);
239253
text-align: left;
240254
white-space: nowrap;
241-
255+
line-height: 1.5;
242256
display: flex;
243257
flex-direction: column;
244258
}

‎assets/css/ui.neutral.scss

+6-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11

2-
:root {
2+
:where(:root) {
33
--jm-ui-border-light: #{fadeCurrentColor(15%)};
44
--jm-ui-border-faint: #{fadeCurrentColor(5%)};
55
--jm-ui-border-strong: currentColor;
@@ -17,14 +17,16 @@
1717

1818
--jm-ui-faint-color: #{fadeCurrentColor(2.5%)};
1919
--jm-ui-accent-color: inherit;
20+
--jm-ui-accent-alt-color: inherit;
2021
--jm-ui-danger-color: #cc1818;
21-
--jm-ui-error-color: #cc1818;
22+
--jm-ui-danger-color-dark-mode: #f86c80;
23+
--jm-ui-error-color: var(--jm-ui-danger-color);
2224
--jm-ui-info-color: #4e71ec;
2325
--jm-ui-success-color: #4ab866;
2426
--jm-ui-accent-color-contrast: #ffffff;
2527

2628
--jm-ui-button-color: var(--jm-ui-accent-color, inherit);
27-
--jm-ui-button-contrast: var(--jm-ui-accent-color-contrast, #ffffff);
29+
--jm-ui-button-color-contrast: var(--jm-ui-accent-color-contrast, #ffffff);
2830
--jm-ui-link-color: var(--jm-ui-accent-color, inherit);
2931

3032
--jm-ui-notice-error: var(--jm-ui-danger-color);
@@ -50,6 +52,7 @@
5052
--jm-ui-space-xl: calc(16 * var(--jm-ui-space-base)); // 64px
5153
--jm-ui-space-xxl: calc(24 * var(--jm-ui-space-base)); // 96px
5254

55+
--jm-ui-font-family: inherit;
5356
--jm-ui-font-size: 16px;
5457
--jm-ui-font-size-m: 14px;
5558
--jm-ui-font-size-s: 12px;

‎assets/js/job-dashboard.js

-2
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@
22

33
import domReady from '@wordpress/dom-ready';
44

5-
import './ui';
6-
75
// eslint-disable-next-line camelcase
86
const { i18nConfirmDelete, overlayEndpoint, statsEnabled } = job_manager_job_dashboard;
97

0 commit comments

Comments
 (0)