Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use theme colors for job overlay, improve dashboard on small screens #2810

Merged
merged 8 commits into from
Apr 25, 2024
Merged

Use theme colors for job overlay, improve dashboard on small screens #2810

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
f1d376f
Fix modal initialization
yscik Apr 22, 2024
dee4ca9
Tweak dashboard styles, columns
yscik Apr 22, 2024
e51a18c
Expand theme support script
yscik Apr 22, 2024
b4e70de
Fix loading for admin overlay
yscik Apr 22, 2024
8998cec
Fix issues
yscik Apr 24, 2024
9e6910e
Color fixes
yscik Apr 24, 2024
b5d3ae5
Fix variable overrides
yscik Apr 24, 2024
df2ed43
Update docs
yscik Apr 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
103 changes: 82 additions & 21 deletions assets/css/job-dashboard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,14 @@
@import 'mixins';
@import 'job-overlay';

.jm-dashboard {
.jm-dashboard-table {
container-name: jm-dashboard-table;
container-type: inline-size;

--jm-dashboard-company-logo-size: calc(var(--jm-ui-icon-size) + 2 * var(--jm-ui-space-xs));

&.jm-dashboard-table--large {
container-name: jm-dashboard-table-large;
}
}

.jm-dashboard-job, .jm-dashboard-header {
Expand Down Expand Up @@ -42,14 +46,10 @@
.jm-dashboard-job-column {
flex: 1 1 calc(50% - var(--jm-ui-space-sm));
min-width: 0;
}

.jm-dashboard small {
font-size: var(--jm-ui-font-size-s);
}

.jm-dashboard .job_title {
flex: 1 1 200%;
line-height: 1.2;
small {
white-space: nowrap;
}
}

.jm-dashboard-job-column.company {
Expand Down Expand Up @@ -80,10 +80,6 @@
width: var(--jm-ui-icon-size-s);
height: var(--jm-ui-icon-size-s);
}

.job-status-rejected {
color: var(--jm-ui-error-color);
}
}

.jm-dashboard img.company_logo {
Expand All @@ -92,27 +88,47 @@
object-fit: contain;
}


.jm-dashboard-job-column.actions {
flex: 0.5 1 100%;
text-align: right;
display: flex;
justify-content: flex-end;
align-items: center;
gap: var(--jm-ui-space-m);
gap: var(--jm-ui-space-s);
}

.jm-dashboard-job-column a.job-title {
font-weight: 600;
font-size: var(--jm-ui-font-size);
line-height: 1.2;
text-decoration: unset;
}

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

.jm-dashboard-job-column-label {
text-transform: uppercase;
font-size: var(--jm-ui-font-size-s);
font-weight: 200;
color: fadeCurrentColor( 70% );
}

.jm-dashboard-job .jm-dashboard-job-column-label {
display: none;
}

.jm-dashboard small {
font-size: var(--jm-ui-font-size-s);
}

.jm-dashboard-table .job_title {
flex: 1 1 200%;
}

.jm-dashboard-table--large .job_title {
flex: 1 1 150%;
}

.jm-dashboard-action {
display: block;
text-decoration: none;
Expand All @@ -126,12 +142,33 @@
color: inherit;
}

.job-dashboard-action-delete {
.jm-dashboard .job-dashboard-action-delete {
color: var(--jm-ui-danger-color);
}

@container (width < 540px)
{
.jm-dashboard .job-manager-pagination {
ul.page-numbers {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
font-size: var(--jm-ui-font-size);
border: unset;
gap: 12px;
}
li {
min-width: 32px;
text-align: center;
border: 1px solid var(--jm-ui-border-light);
border-radius: 2px;

}
}

@mixin jm-dashboard-job-mobile {
.jm-dashboard-job-column:where(:not(.job_title):not(.actions):not(.company)) .jm-dashboard-job-column-label {
display: block;
}
.jm-dashboard-job {
flex-wrap: wrap;
align-items: flex-start;
Expand All @@ -149,4 +186,28 @@
flex-basis: calc( 100% - var(--jm-dashboard-company-logo-size) - var(--jm-ui-space-sm) );
order: -1;
}

}

@container jm-dashboard-table-large (width < 940px)
gikaragia marked this conversation as resolved.
Show resolved Hide resolved
{
.jm-dashboard-job-column.job_title {
flex-basis: 100%;
}
}

@container jm-dashboard-table (width < 540px)
{
@include jm-dashboard-job-mobile;
}
@container jm-dashboard-table-large (width < 780px)
{
@include jm-dashboard-job-mobile;
}

@container jm-dashboard-table-large (540px < width < 780px)
{
.jm-dashboard-job-column {
flex: 1 1 calc(33% - 2 * var(--jm-ui-space-sm));
}
}
2 changes: 1 addition & 1 deletion assets/css/job-overlay.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@
.jm-job-stats {

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

.jm-job-stat-details {
Expand Down
4 changes: 4 additions & 0 deletions assets/css/ui.dialog.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
}

.jm-dialog {
font-family: var(--jm-ui-font-family);
font-size: var(--jm-ui-font-size);
--jm-dialog-padding: var(--jm-ui-space-l);
}
Expand Down Expand Up @@ -54,6 +55,9 @@
overflow: auto;
overscroll-behavior: contain;

body & a:not(:hover):not(:active):not(:focus) {
color: var(--jm-ui-accent-color, #1a1a1a);
}
}
.jm-dialog-modal-container {
position: relative;
Expand Down
24 changes: 19 additions & 5 deletions assets/css/ui.elements.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@

.jm-ui {
font-family: var(--jm-ui-font-family);
}

.jm-ui-row {
display: flex;
gap: var(--jm-ui-space-xs);
Expand Down Expand Up @@ -26,6 +30,7 @@
text-decoration: none;
outline: unset;
cursor: pointer;
border: unset;
}

.jm-ui-button,
Expand All @@ -51,6 +56,14 @@
}
}

a[href].jm-ui-button,
a[href].jm-ui-button--outline,
a[href].jm-ui-button--icon {
html body & {
text-decoration: none;
}
}

.jm-ui-button {
border: 1px solid currentColor;

Expand All @@ -67,13 +80,10 @@
}
}

.jm-ui-button--small,
.jm-ui-button--small
{
padding: var(--jm-ui-space-xxs) var(--jm-ui-space-s);
gap: var(--jm-ui-space-xs);
font-size: var(--jm-ui-font-size-s);
font-weight: 400;
letter-spacing: -0.1px;
}

.jm-ui-button__a {
Expand All @@ -83,6 +93,10 @@
.jm-ui-button--outline {
background: unset;
border: 1px solid currentColor;

&:hover, &:focus {
border: 1px solid currentColor;
}
}

.jm-ui-button--icon {
Expand Down Expand Up @@ -238,7 +252,7 @@
font-size: var(--jm-ui-font-size-s);
text-align: left;
white-space: nowrap;

line-height: 1.5;
display: flex;
flex-direction: column;
}
Expand Down
9 changes: 6 additions & 3 deletions assets/css/ui.neutral.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@

:root {
:where(:root) {
--jm-ui-border-light: #{fadeCurrentColor(15%)};
--jm-ui-border-faint: #{fadeCurrentColor(5%)};
--jm-ui-border-strong: currentColor;
Expand All @@ -17,14 +17,16 @@

--jm-ui-faint-color: #{fadeCurrentColor(2.5%)};
--jm-ui-accent-color: inherit;
--jm-ui-accent-alt-color: inherit;
--jm-ui-danger-color: #cc1818;
--jm-ui-error-color: #cc1818;
--jm-ui-danger-color-dark-mode: #f86c80;
--jm-ui-error-color: var(--jm-ui-danger-color);
--jm-ui-info-color: #4e71ec;
--jm-ui-success-color: #4ab866;
--jm-ui-accent-color-contrast: #ffffff;

--jm-ui-button-color: var(--jm-ui-accent-color, inherit);
--jm-ui-button-contrast: var(--jm-ui-accent-color-contrast, #ffffff);
--jm-ui-button-color-contrast: var(--jm-ui-accent-color-contrast, #ffffff);
--jm-ui-link-color: var(--jm-ui-accent-color, inherit);

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

--jm-ui-font-family: inherit;
--jm-ui-font-size: 16px;
--jm-ui-font-size-m: 14px;
--jm-ui-font-size-s: 12px;
Expand Down
2 changes: 0 additions & 2 deletions assets/js/job-dashboard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@

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

import './ui';

// eslint-disable-next-line camelcase
const { i18nConfirmDelete, overlayEndpoint, statsEnabled } = job_manager_job_dashboard;

Expand Down
Loading
Loading