[Beta] Release WP Job Manager 2.3.0

.github/workflows/build.yml

@@ -40,7 +40,7 @@ jobs:
       - name: Build Plugin
         run: npm run build
       - name: Decompress plugin
-        run: unzip wp-job-manager.zip -d wp-job-manager
+        run: unzip build/wp-job-manager.zip -d wp-job-manager
       - name: Store Artifact
         uses: actions/upload-artifact@v2
         with:

.psalm/psalm-baseline.xml

@@ -402,21 +402,6 @@
       <code><![CDATA[! defined( 'ABSPATH' )]]></code>
     </ParadoxicalCondition>
   </file>
-  <file src="lib/emogrifier/class-emogrifier.php">
-    <InvalidArgument>
-      <code><![CDATA[function ($matches) use (&$media) {
-				$media .= $matches[0];
-			}]]></code>
-      <code><![CDATA[usort($cssRules, [$this, 'sortBySelectorPrecedence'])]]></code>
-    </InvalidArgument>
-    <InvalidReturnStatement>
-      <code><![CDATA[$this->caches[self::CACHE_KEY_CSS][$cssKey]]]></code>
-      <code><![CDATA[$this->caches[self::CACHE_KEY_SELECTOR][$selectorKey]]]></code>
-    </InvalidReturnStatement>
-    <RedundantCondition>
-      <code><![CDATA[$node->parentNode && is_callable([$node->parentNode, 'removeChild'])]]></code>
-    </RedundantCondition>
-  </file>
   <file src="lib/usage-tracking/class-wp-job-manager-usage-tracking-base.php">
     <FalsableReturnStatement>
       <code>false</code>

assets/css/job-dashboard.scss

@@ -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 {
@@ -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 {
@@ -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 {
@@ -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;
@@ -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;
@@ -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)
+{
+	.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));
+	}
 }

assets/css/job-overlay.scss

@@ -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 {

assets/css/ui.dialog.scss

@@ -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);
 }
@@ -54,6 +55,9 @@
 	overflow: auto;
 	overscroll-behavior: contain;
 
+	a:where(:not(:hover):not(:active):not(:focus)) {
+		color: var(--jm-ui-accent-color, #1a1a1a);
+	}
 }
 .jm-dialog-modal-container {
 	position: relative;

assets/css/ui.elements.scss

@@ -1,4 +1,8 @@
 
+.jm-ui {
+	font-family: var(--jm-ui-font-family);
+}
+
 .jm-ui-row {
 	display: flex;
 	gap: var(--jm-ui-space-xs);
@@ -26,6 +30,7 @@
 	text-decoration: none;
 	outline: unset;
 	cursor: pointer;
+	border: unset;
 }
 
 .jm-ui-button,
@@ -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;
 
@@ -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 {
@@ -83,6 +93,10 @@
 .jm-ui-button--outline {
 	background: unset;
 	border: 1px solid currentColor;
+
+	&:hover, &:focus {
+		border: 1px solid currentColor;
+	}
 }
 
 .jm-ui-button--icon {
@@ -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;
 }

assets/css/ui.neutral.scss

@@ -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);
@@ -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;

assets/js/job-dashboard.js

@@ -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;