Styling: clean up site table (#148)

* tighten up spacing * make site query row clickable * add hover state to site sidebar
Automattic · Jun 18, 2024 · 3dda9d2 · 3dda9d2
1 parent 8deb010
commit 3dda9d2
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 8 deletions.
diff --git a/plugin/blocks/src/components/site-template/block.json b/plugin/blocks/src/components/site-template/block.json
@@ -44,5 +44,6 @@
 	},
 	"render": "file:./render.php",
 	"editorScript": "file:./index.js",
-	"editorStyle": "file:./index.css"
+	"editorStyle": "file:./index.css",
+	"viewScript": "file:./view.js"
 }
diff --git a/plugin/blocks/src/components/site-template/view.js b/plugin/blocks/src/components/site-template/view.js
@@ -0,0 +1,15 @@
+(() => {
+	console.log('site-template view.js');
+	document.querySelectorAll('.wpcloud-site-template tr, .wp-block-query .wp-block-wpcloud-site-card').forEach((row) => {
+		row.addEventListener('click', (event) => {
+			const targetLink = event.target.closest('a');
+			if (targetLink) {
+				return true;
+			}
+			const link = row.querySelector('.site-title a');
+			if (link) {
+				window.location = link.href;
+			}
+		});
+	});
+})()
diff --git a/theme/assets/blocks/src/core-query.css b/theme/assets/blocks/src/core-query.css
@@ -1,13 +1,19 @@
 & {
 	&.wpcloud-site-list--sidebar {
-		max-width: 400px;;
+		max-width: 400px;
+		.wp-block-wpcloud-site-card + .wp-block-wpcloud-site-card {
+			border-top: 1px solid var(--wp--preset--color--border-primary);
+		}
 		.wp-block-wpcloud-site-card {
 			margin: 0;
 			padding: 11px 16px;
-			border-bottom: 1px solid var(--wp--preset--color--border-primary);
+
 			&.is-current {
 				background-color: var(--wp--preset--color--background-secondary);
 			}
+			&:hover {
+				background-color: var(--wp--preset--color--background-secondary);
+			}
 		}
 	}
 }
diff --git a/theme/assets/blocks/src/wpcloud-site-card.css b/theme/assets/blocks/src/wpcloud-site-card.css
@@ -36,7 +36,7 @@
 			line-height: 10px;
 			font-weight: 400;
 			&:hover {
-				filter: brightness(80%);
+				color: var(--wp--preset--color--accent-primary);
 				text-decoration: none;
 			}
 		}

diff --git a/theme/assets/blocks/src/wpcloud-site-template.css b/theme/assets/blocks/src/wpcloud-site-template.css
@@ -21,10 +21,14 @@
 		text-align: left;
 	}
 
+
 	tr {
 		vertical-align: middle;
 		border-bottom: 1px solid var(--wp--preset--color-border-primary);
-		&:hover {
+		td:first-child, th {
+			padding-left: 0.5rem;
+		}
+		&:not(thead tr):hover {
 			background-color: var(--wp--preset--color--background-secondary);
 		}
 	}

diff --git a/theme/theme.json b/theme/theme.json
@@ -246,7 +246,7 @@
     },
     "blocks": {
       "core/query": {
-        "css": "&.wpcloud-site-list--sidebar {\n\tmax-width: 400px;\n};\n&.wpcloud-site-list--sidebar .wp-block-wpcloud-site-card {\n\tmargin: 0;\n\tpadding: 11px 16px;\n\tborder-bottom: 1px solid var(--wp--preset--color--border-primary);\n};\n&.wpcloud-site-list--sidebar .wp-block-wpcloud-site-card.is-current {\n\tbackground-color: var(--wp--preset--color--background-secondary);\n}"
+        "css": "&.wpcloud-site-list--sidebar {\n\tmax-width: 400px;\n}\n&.wpcloud-site-list--sidebar .wp-block-wpcloud-site-card + .wp-block-wpcloud-site-card {\n\tborder-top: 1px solid var(--wp--preset--color--border-primary);\n}\n&.wpcloud-site-list--sidebar .wp-block-wpcloud-site-card {\n\tmargin: 0;\n\tpadding: 11px 16px;\n}\n&.wpcloud-site-list--sidebar .wp-block-wpcloud-site-card.is-current {\n\tbackground-color: var(--wp--preset--color--background-secondary);\n}\n&.wpcloud-site-list--sidebar .wp-block-wpcloud-site-card:hover {\n\tbackground-color: var(--wp--preset--color--background-secondary);\n}"
       },
       "wpcloud/button": {
         "color": {
@@ -313,7 +313,7 @@
             "top": "var(--wp--preset--spacing--30)"
           }
         },
-        "css": "& {\n\tdisplay: grid;\n\tgrid-template-columns: 40px 1fr;\n\tgrid-template-rows: repeat(2, 20px);\n\tgrid-column-gap: 12px;\n\tmargin: 7px 0;\n\n\n}\n\n& img {\n\tgrid-area: 1 / 1 / 3 / 2;\n\tborder-radius: 4px;\n}\n\n& h2 {\n\tline-height: 0;\n}\n\n& h3 {\n\tline-height: 0;\n}\n\n& h2 {\n\tmargin: 0;\n\tpadding: 0;\n\tgrid-area: 1 / 2 / 2 / 3;\n}\n\n& h3 {\n\tmargin: 0;\n\tpadding: 0;\n\tgrid-area: 2 / 2 / 3 / 3;\n}\n\n& .site-title {\n\tmargin-top: 5px;\n}\n\n& .site-title a {\n\tfont-size: var(--wp--preset--font-size--body-medium);\n\tcolor: var(--wp--preset--color--foreground-primary);\n\tline-height: 10px;\n\tfont-weight: 400;\n}\n\n& .site-title a:hover {\n\tfilter: brightness(80%);\n\ttext-decoration: none;\n}\n\n& .site-url {\n\tmargin-top: 5px;\n}\n\n& .site-url a {\n\tfont-size: var(--wp--preset--font-size--body-small);\n\tcolor: var(--wp--preset--color--foreground-secondary);\n\tfont-weight: 400;\n\tline-height: 10px;\n}\n\n& .site-url a:hover {\n\tcolor: var(--wp--preset--color--accent-primary);\n\ttext-decoration: none;\n}\n\n&.wpcloud-site-card--primary {\n\n\tgrid-template-columns: 56px 1fr;\n\tgrid-template-rows: repeat(2, 28px);\n}\n\n&.wpcloud-site-card--primary h2 {\n\talign-self: center;\n}\n\n&.wpcloud-site-card--primary img {\n\twidth: 56px;\n}\n\n&.wpcloud-site-card--primary .site-title a {\n\tfont-size: var(--wp--preset--font-size--title-medium);\n\tfont-weight: 500;\n}\n\n&.wpcloud-site-card--primary .site-url a {\n\tfont-size: var(--wp--preset--font-size--body-medium);\n}\n"
+        "css": "& {\n\tdisplay: grid;\n\tgrid-template-columns: 40px 1fr;\n\tgrid-template-rows: repeat(2, 20px);\n\tgrid-column-gap: 12px;\n\tmargin: 7px 0;\n\n\n}\n\n& img {\n\tgrid-area: 1 / 1 / 3 / 2;\n\tborder-radius: 4px;\n}\n\n& h2 {\n\tline-height: 0;\n}\n\n& h3 {\n\tline-height: 0;\n}\n\n& h2 {\n\tmargin: 0;\n\tpadding: 0;\n\tgrid-area: 1 / 2 / 2 / 3;\n}\n\n& h3 {\n\tmargin: 0;\n\tpadding: 0;\n\tgrid-area: 2 / 2 / 3 / 3;\n}\n\n& .site-title {\n\tmargin-top: 5px;\n}\n\n& .site-title a {\n\tfont-size: var(--wp--preset--font-size--body-medium);\n\tcolor: var(--wp--preset--color--foreground-primary);\n\tline-height: 10px;\n\tfont-weight: 400;\n}\n\n& .site-title a:hover {\n\tcolor: var(--wp--preset--color--accent-primary);\n\ttext-decoration: none;\n}\n\n& .site-url {\n\tmargin-top: 5px;\n}\n\n& .site-url a {\n\tfont-size: var(--wp--preset--font-size--body-small);\n\tcolor: var(--wp--preset--color--foreground-secondary);\n\tfont-weight: 400;\n\tline-height: 10px;\n}\n\n& .site-url a:hover {\n\tcolor: var(--wp--preset--color--accent-primary);\n\ttext-decoration: none;\n}\n\n&.wpcloud-site-card--primary {\n\n\tgrid-template-columns: 56px 1fr;\n\tgrid-template-rows: repeat(2, 28px);\n}\n\n&.wpcloud-site-card--primary h2 {\n\talign-self: center;\n}\n\n&.wpcloud-site-card--primary img {\n\twidth: 56px;\n}\n\n&.wpcloud-site-card--primary .site-title a {\n\tfont-size: var(--wp--preset--font-size--title-medium);\n\tfont-weight: 500;\n}\n\n&.wpcloud-site-card--primary .site-url a {\n\tfont-size: var(--wp--preset--font-size--body-medium);\n}\n"
       },
       "wpcloud/site-detail": {
         "color": {
@@ -374,7 +374,7 @@
         "color": {
           "text": "var(--wp--preset--color--foreground-primary)"
         },
-        "css": "& {\n\twidth: 100%;\n\tborder-collapse: collapse;\n}\n\n& th {\n\tcolor: var(--wp--preset--color--foreground-secondary);\n\tborder: none;\n\tpadding-top: 13px;\n\tpadding-bottom: 18px;\n}\n\n& th h2 {\n\tfont-weight: 400;\n\tfont-size: var(--wp--preset--font-size--small-caps);\n\tcolor: var(--wp--preset--color--foreground-secondary);\n\ttext-transform: uppercase;\n}\n\n& th svg {\n\tfill: currentColor;\n}\n\n& th {\n\ttext-align: left;\n}\n\n& td {\n\ttext-align: left;\n}\n\n& tr {\n\tvertical-align: middle;\n\tborder-bottom: 1px solid var(--wp--preset--color-border-primary);\n}\n\n& tr:hover {\n\tbackground-color: var(--wp--preset--color--background-secondary);\n}\n\n& .wpcloud-block-site-detail {\n\tmargin-top: 0;\n}\n\n& .wp-block-post-author__content a:hover {\n\ttext-decoration: none;\n\tcolor: var(--wp--preset--color--accent-primary);\n}"
+        "css": "& {\n\twidth: 100%;\n\tborder-collapse: collapse;\n}\n\n& th {\n\tcolor: var(--wp--preset--color--foreground-secondary);\n\tborder: none;\n\tpadding-top: 13px;\n\tpadding-bottom: 18px;\n}\n\n& th h2 {\n\tfont-weight: 400;\n\tfont-size: var(--wp--preset--font-size--small-caps);\n\tcolor: var(--wp--preset--color--foreground-secondary);\n\ttext-transform: uppercase;\n}\n\n& th svg {\n\tfill: currentColor;\n}\n\n& th {\n\ttext-align: left;\n}\n\n& td {\n\ttext-align: left;\n}\n\n& tr {\n\tvertical-align: middle;\n\tborder-bottom: 1px solid var(--wp--preset--color-border-primary);\n}\n\n& tr td:first-child {\n\tpadding-left: 0.5rem;\n}\n\n& tr th {\n\tpadding-left: 0.5rem;\n}\n\n& tr:not(thead tr):hover {\n\tbackground-color: var(--wp--preset--color--background-secondary);\n}\n\n& .wpcloud-block-site-detail {\n\tmargin-top: 0;\n}\n\n& .wp-block-post-author__content a:hover {\n\ttext-decoration: none;\n\tcolor: var(--wp--preset--color--accent-primary);\n}"
       },
       "wpcloud/ssh-user-list": {
         "color": {