From f5182773bbf9fdfbdd0cff0446662ae27442ecc0 Mon Sep 17 00:00:00 2001 From: Chris Manson Date: Thu, 15 Feb 2024 17:11:48 +0000 Subject: [PATCH] use sidebar styles from ember-styleguide --- addon/styles/addon.css | 86 --------------------- addon/styles/on-this-page.css | 19 ----- addon/styles/table-of-contents.css | 67 ---------------- app/templates/components/guides-article.hbs | 4 +- app/templates/version.hbs | 2 +- package-lock.json | 17 ++-- package.json | 2 +- 7 files changed, 13 insertions(+), 184 deletions(-) delete mode 100644 addon/styles/on-this-page.css delete mode 100644 addon/styles/table-of-contents.css diff --git a/addon/styles/addon.css b/addon/styles/addon.css index bd43aaac..96ceccdc 100644 --- a/addon/styles/addon.css +++ b/addon/styles/addon.css @@ -39,10 +39,6 @@ a.old-version-button:hover, a.old-version-button:active { color: var(--color-button-secondary-text-hover); } -main { - padding: 0 2em; -} - .es-header { padding: 0 var(--spacing-4); justify-content: start; @@ -52,13 +48,6 @@ main { max-width: 100%; } -.sidebar-container { - margin: 0; - grid-template-columns: var(--sidebar-width) minmax(0, 1fr); - max-width: 100%; - padding: 0; -} - .info-banner-wrapper { margin: var(--spacing-1); padding: var(--spacing-1); @@ -72,91 +61,16 @@ main { } } -.guides-article-wrapper { - display: grid; - gap: 3em; - grid-template-columns: minmax(20ch, 80ch) 16em; - padding-top: var(--spacing-4); - padding-bottom: var(--spacing-4); - justify-content: center; -} - .pagination-wrapper { margin: var(--spacing-4) 0; } -.on-this-page-wrapper { - margin-top: .6em; -} - @media (max-width: 80em) { - .guides-article-wrapper { - display: grid; - grid-template-columns: minmax(20ch, 80ch); - justify-content: center; - padding-bottom: var(--spacing-2); - } - - .guides-article-toc { - display: none; - } - .pagination-wrapper { margin: var(--spacing-2) 0; } } -/* TODO figure out how much of this media query needs to go into the styleguide */ -@media (max-width: 844px) { - main .es-sidebar[aria-expanded="true"] { - padding: var(--spacing-2); - z-index: 1; - display: flex; - flex-direction: row-reverse; - margin: var(--spacing-2) 0 0 0; - background: var(--color-white); - } - - main .es-sidebar-toggle { - z-index: 2; - } - - main .es-sidebar-content { - flex-grow: 1; - margin-top: var(--spacing-2); - } - - main .es-sidebar-close { - float: none; - height: 52px; - margin-left: var(--spacing-1); - } -} - -@media screen and (min-width: 54em) { - .sidebar { - border-bottom: 0; - border-right: 1px solid #F8E7CF; - padding: 3em 1.618em 3em 0; - } - - .sidebar:last-child { - margin-right: 0; - } - - label[for="toc-toggle"] { - display: none; - } - - .toc-container { - display: block; - } - - .toc-container[style] { - display: block !important; - } -} - .article-title { display: flex; justify-content: space-between; diff --git a/addon/styles/on-this-page.css b/addon/styles/on-this-page.css deleted file mode 100644 index b809ed9f..00000000 --- a/addon/styles/on-this-page.css +++ /dev/null @@ -1,19 +0,0 @@ -.on-this-page-wrapper ul { - list-style: none; - padding: 0; -} - -.on-this-page-wrapper-header { - color: var(--color-gray-600); -} - -.on-this-page-wrapper hr { - margin-top: 0; - display: none; -} - -main .on-this-page-wrapper a { - text-decoration: none; - color: var(--color-text); - background: none; -} diff --git a/addon/styles/table-of-contents.css b/addon/styles/table-of-contents.css deleted file mode 100644 index eccecaf5..00000000 --- a/addon/styles/table-of-contents.css +++ /dev/null @@ -1,67 +0,0 @@ -/* All the .es-sidebar styling should probably move to the ember-styleguide when we agree this is the right thing to do */ -.es-sidebar { - padding: var(--spacing-4) var(--spacing-4); - margin-left: calc(-1 * var(--spacing-4)); - background-color: var(--color-gray-200); -} - -.table-of-contents { - list-style-type: none; - padding-left: 0; - font-size: var(--font-size-base); - font-weight: var(--font-weight-3); -} - -.sub-table-of-contents { - padding-left: var(--spacing-1); - font-size: var(--font-size-base); - font-weight: var(--font-weight-2); -} - -.sub-table-of-contents .sub-table-of-contents { - padding-left: var(--spacing-3); - margin-bottom: 0; -} - -.table-of-contents a:link { - background: none; -} - -.sub-table-of-contents .toc-item a { - display: block; - padding: var(--spacing-1); - border-radius: var(--radius); - line-height: var(--line-height-xs); - color: var(--color-gray-700); - border-left: 0 solid transparent; - transition: border-width .3s; -} - -.sub-table-of-contents .toc-item a:hover { - border-left: 4px solid var(--color-gray-400); - border-radius: 0; -} - -.sub-table-of-contents .toc-item.selected > a { - border-left: 4px solid var(--color-brand-hc-dark); - border-radius: 0; -} - -.table-of-contents li { - margin: 3px 0; -} - -li.toc-heading { - margin-top: var(--spacing-4); - color: var(--color-gray-600); -} - -li.toc-heading:first-child { - margin-top: 0; -} - -@media (max-width: 844px) { - .table-of-contents { - font-size: var(--font-size-lg); - } -} diff --git a/app/templates/components/guides-article.hbs b/app/templates/components/guides-article.hbs index aa6c43b1..9ad97f69 100644 --- a/app/templates/components/guides-article.hbs +++ b/app/templates/components/guides-article.hbs @@ -1,5 +1,5 @@ {{! template-lint-disable no-link-to-positional-params link-rel-noopener no-curly-component-invocation no-implicit-this }} -
+
{{#if (not (eq this.version this.currentVersion))}}
@@ -43,7 +43,7 @@
-
+
diff --git a/app/templates/version.hbs b/app/templates/version.hbs index fa9d28cd..6d252b71 100644 --- a/app/templates/version.hbs +++ b/app/templates/version.hbs @@ -1,5 +1,5 @@ {{!-- template-lint-disable no-action --}} -
+
{{#if this.versions}} diff --git a/package-lock.json b/package-lock.json index aae9ea2d..7c922c52 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,7 +22,7 @@ "ember-href-to": "^5.0.0", "ember-power-select": "^6.0.0", "ember-showdown-shiki": "^1.0.3", - "ember-styleguide": "^8.3.0", + "ember-styleguide": "^9.1.1", "ember-tether": "^2.0.1", "ember-truth-helpers": "^3.0.0", "sanitize-html": "^2.11.0" @@ -67,6 +67,7 @@ "lint-to-the-future-ember-template": "^1.1.0", "lint-to-the-future-eslint": "^1.0.0", "loader.js": "^4.7.0", + "normalize.css": "^8.0.1", "npm-run-all": "^4.1.5", "prember": "^2.0.0", "prettier": "^2.5.1", @@ -22220,9 +22221,9 @@ } }, "node_modules/ember-styleguide": { - "version": "8.3.0", - "resolved": "https://registry.npmjs.org/ember-styleguide/-/ember-styleguide-8.3.0.tgz", - "integrity": "sha512-FN0FNXDXFRoimaICswP7/5aSI8gH/sVO00ju134wbWeUR/xMHE1bA/xT1P8UGPPXM6D9IE6mrxdt9Pf2iyaYRg==", + "version": "9.1.1", + "resolved": "https://registry.npmjs.org/ember-styleguide/-/ember-styleguide-9.1.1.tgz", + "integrity": "sha512-JnPNhPOm2C52yhfnsVPK2sneqiWvijj/9Efxg8zVTRSHkz/LYBR5kio0RCozCWW9+A58sEIMP6dW5oKnrHGM2A==", "dependencies": { "@ember/render-modifiers": "^2.0.2", "@glimmer/component": "^1.0.4", @@ -22243,7 +22244,7 @@ "static-postcss-addon-tree": "^2.0.0" }, "engines": { - "node": "12.* || 14.* || >= 16" + "node": "18.* || >= 20" } }, "node_modules/ember-styleguide/node_modules/broccoli-merge-trees": { @@ -55900,9 +55901,9 @@ } }, "ember-styleguide": { - "version": "8.3.0", - "resolved": "https://registry.npmjs.org/ember-styleguide/-/ember-styleguide-8.3.0.tgz", - "integrity": "sha512-FN0FNXDXFRoimaICswP7/5aSI8gH/sVO00ju134wbWeUR/xMHE1bA/xT1P8UGPPXM6D9IE6mrxdt9Pf2iyaYRg==", + "version": "9.1.1", + "resolved": "https://registry.npmjs.org/ember-styleguide/-/ember-styleguide-9.1.1.tgz", + "integrity": "sha512-JnPNhPOm2C52yhfnsVPK2sneqiWvijj/9Efxg8zVTRSHkz/LYBR5kio0RCozCWW9+A58sEIMP6dW5oKnrHGM2A==", "requires": { "@ember/render-modifiers": "^2.0.2", "@glimmer/component": "^1.0.4", diff --git a/package.json b/package.json index 5916a8e5..344366f3 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,7 @@ "ember-href-to": "^5.0.0", "ember-power-select": "^6.0.0", "ember-showdown-shiki": "^1.0.3", - "ember-styleguide": "^8.3.0", + "ember-styleguide": "^9.1.1", "ember-tether": "^2.0.1", "ember-truth-helpers": "^3.0.0", "sanitize-html": "^2.11.0"