From d3987bf71bcd264e12cb613b4236ef1f02834a02 Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Wed, 28 Aug 2024 02:03:07 +0200 Subject: [PATCH 01/19] custom techreport header --- static/css/techreport/general.css | 5 + static/css/techreport/techreport.css | 66 ++++++++++- templates/main.html | 169 ++++++++++++++------------- templates/techreport/techreport.html | 24 +++- 4 files changed, 171 insertions(+), 93 deletions(-) diff --git a/static/css/techreport/general.css b/static/css/techreport/general.css index 3651401f..27c189d3 100644 --- a/static/css/techreport/general.css +++ b/static/css/techreport/general.css @@ -35,6 +35,11 @@ p { :is(a, button, select):focus-visible { outline: 1.5px solid var(--color-teal-dark); outline-offset: 1.5px; + border-radius: 3px; +} + +nav li:hover { + background-color: transparent; } /* Hidden visually, but still accessible through screen readers/other AT */ diff --git a/static/css/techreport/techreport.css b/static/css/techreport/techreport.css index 4f3e26cc..5c934852 100644 --- a/static/css/techreport/techreport.css +++ b/static/css/techreport/techreport.css @@ -3,6 +3,7 @@ /* Main colors to use */ --color-teal-faded: #c0ced0; --color-teal-medium: #6a797c; + --color-teal-accent: #4E848B; --color-teal-dark: #3a5c63; --color-teal-darker: #1c4750; --color-blue-dark: #3a7098; @@ -29,8 +30,12 @@ --color-page-border: var(--color-teal-medium); --color-tooltip-background: var(--color-card-background); --color-tooltip-border: var(--color-card-border); + --color-nav-active: var(--color-teal-accent); + --color-nav-inactive: var(--color-teal-medium); /* Font sizes */ + --font-size-small: 0.875rem; + --font-size-regular: 1rem; --font-size-medium: 1.75rem; --font-size-large: 2.15rem; --font-size-xlarge: 2.35rem; @@ -160,6 +165,10 @@ main :is(a, p a) { background-color: var(--color-card-background); border-top: 1px solid var(--color-page-background); border-bottom: 1px solid var(--color-page-background); + display: flex; + justify-content: space-between; + + padding: 0 2.5vw; } .report-navigation-content { @@ -170,28 +179,73 @@ main :is(a, p a) { .report-navigation ul li { text-transform: none; + margin-right: 1rem; +} + +.report-navigation ul li:last-of-type { + margin-right: 0; } .report-navigation ul li a { - padding: 0.75rem 0.25rem; + padding: 1rem 0.25rem; + font-size: var(--font-size-small); + color: var(--color-nav-inactive); +} + +.report-navigation ul li a[aria-current="page"] span { + padding-bottom: 0.1rem; + border-bottom: 2px solid var(--color-nav-active); + font-weight: 600; + color: var(--color-text); } -.report-navigation ul li a[aria-current="page"] { - border-bottom: 3px solid var(--color-text); +.report-navigation ul li.all-reports { + position: relative; + padding-right: 1.5rem; + margin-right: 1.5rem; +} + +.report-navigation ul li.all-reports:after { + content: ""; + display: block; + height: 1.5rem; + width: 2px; + background-color: var(--color-card-border); + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); } -.report-navigation ul li:hover { +.report-navigation ul li:focus-within { background-color: transparent; } +.report-navigation ul li a:focus-visible { + text-decoration: none; + padding: 0.25rem; + outline-color: var(--color-nav-inactive); + border-radius: 3px; + color: var(--color-text); +} + .report-navigation ul li a:hover { color: var(--color-text); background-color: transparent; text-decoration: none; } -.report-navigation ul li a:not([aria-current="page"]):hover { - border-bottom: 3px solid var(--color-teal-faded); +.report-navigation ul li a:not([aria-current="page"]):hover span { + padding-bottom: 0.1rem; + border-bottom: 2px solid var(--color-teal-faded); + color: var(--color-text); +} + +.report-navigation img { + max-height: 2rem; + position: relative; + top: 50%; + transform: translateY(-50%); } /* Page Filters */ diff --git a/templates/main.html b/templates/main.html index 94f4dd32..9e0656e8 100644 --- a/templates/main.html +++ b/templates/main.html @@ -89,92 +89,97 @@ {% endif %} -
-
-
- - - -
-
- + + +
- -
- + + + {% endif %} {% block report_navigation %}{% endblock %} diff --git a/templates/techreport/techreport.html b/templates/techreport/techreport.html index 4ce5d4f2..6b4290a8 100644 --- a/templates/techreport/techreport.html +++ b/templates/techreport/techreport.html @@ -10,7 +10,7 @@ {% endblock %} -{% block report_navigation %} +{% block custom_navigation %}

Beta version

@@ -19,11 +19,15 @@
+
+

Category info

+

Get detailed information about a category and its technologies.

+
{% endblock %} From 04628eb50d0fc7dc2261cbc46ab013192d9e7201 Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Fri, 30 Aug 2024 02:56:28 +0200 Subject: [PATCH 03/19] add filters in sidebar and change page based on amount of techs --- server/routes.py | 9 ++ src/js/components/drilldownHeader.js | 2 +- src/js/components/filters.js | 13 ++- src/js/techreport/index.js | 8 -- src/js/techreport/section.js | 1 - src/js/techreport/tableLinked.js | 2 - src/js/techreport/utils/ui.js | 3 - static/css/techreport/general.css | 11 ++ static/css/techreport/techreport.css | 110 +++++++++++++----- templates/techreport/comparison.html | 18 +-- templates/techreport/drilldown.html | 23 +--- templates/techreport/techreport.html | 11 +- templates/techreport/templates/filters.html | 16 +-- .../techreport/templates/selector_tech.html | 12 +- 14 files changed, 141 insertions(+), 98 deletions(-) diff --git a/server/routes.py b/server/routes.py index 1ce3e127..a1ba3f08 100644 --- a/server/routes.py +++ b/server/routes.py @@ -75,6 +75,12 @@ def techreport(page_id): # Get the configuration for the tech report tech_report = tech_report_util.get_report() + # Get the current page_id + if request.args.get("tech"): + requested_technologies = request.args.get("tech").split(",") + if len(requested_technologies) > 1: + page_id = "comparison" + # Get the settings for the current page active_tech_report = tech_report.get("pages").get(page_id) @@ -101,6 +107,9 @@ def techreport(page_id): active_tech_report["filters"] = filters + print(requested_technologies) + print(len(requested_technologies)) + return render_template( "techreport/%s.html" % page_id, active_page=page_id, diff --git a/src/js/components/drilldownHeader.js b/src/js/components/drilldownHeader.js index c31b9c8c..66aaeb31 100644 --- a/src/js/components/drilldownHeader.js +++ b/src/js/components/drilldownHeader.js @@ -1,5 +1,5 @@ function setTitle(title) { - const mainTitle = document.querySelector('h2 span.main-title'); + const mainTitle = document.querySelector('h1 span.main-title'); mainTitle.textContent = title; } diff --git a/src/js/components/filters.js b/src/js/components/filters.js index 6bf927e3..a1bbdbc9 100644 --- a/src/js/components/filters.js +++ b/src/js/components/filters.js @@ -146,7 +146,6 @@ class Filters { /* Update the list with categories */ updateCategories() { const selects = document.querySelectorAll('select[name="categories"]') || document.querySelectorAll('select[name="category"]'); - console.log('selects', selects); if(this.categories) { selects.forEach(select => { @@ -196,6 +195,7 @@ class Filters { /* Duplicate the technology dropdowns */ addTechnologySelector(event) { + console.log('> addTechnologySelector', event); event.preventDefault(); const selectorTemplate = document.getElementById('tech-selector').content.cloneNode(true); @@ -213,16 +213,18 @@ class Filters { const techId = `tech-${document.querySelectorAll('select.tech[name="tech"]').length + 1}`; selectElement.setAttribute('id', techId); labelElement.setAttribute('for', techId); - removeButton.dataset.tech = techId; categorySelect.setAttribute('id', `${techId}-category`); categoryLabel.setAttribute('for', `${techId}-category`); categorySelect.setAttribute('data-tech', techId); - removeButton.classList.remove('hidden'); + if(removeButton) { + removeButton.dataset.tech = techId; + removeButton.classList.remove('hidden'); - /* Bind functionality to the button */ - removeButton.addEventListener('click', this.removeTechnology); + /* Bind functionality to the button */ + removeButton.addEventListener('click', this.removeTechnology); + } /* Fill in all techs and select the first one */ selectElement.innerHTML = document.querySelector('select.tech').innerHTML; @@ -233,6 +235,7 @@ class Filters { /* Add the new tech to the end of the list */ const techs = document.getElementsByClassName('tech-selector-group'); + console.log('> techs', techs); const last = techs[techs.length - 1]; last.after(selectorTemplate); diff --git a/src/js/techreport/index.js b/src/js/techreport/index.js index 9a3cff78..d5e235bf 100644 --- a/src/js/techreport/index.js +++ b/src/js/techreport/index.js @@ -51,7 +51,6 @@ class TechReport { break; case 'category': - console.log('>>> FILTERS', this.filters); const category = this.filters.category || 'CMS'; this.initializeReport(); this.getCategoryData(category); @@ -314,21 +313,17 @@ class TechReport { technologies: allResults, summary: 'todo', }; - console.log('CATEGORY IS', category); this.updateCategoryComponents(category); }); }); } updateCategoryComponents (category) { - console.log('updateCategoryComponents', category.data); this.updateComponents(category.data.technologies); } // Update components and sections that are relevant to the current page updateComponents(data) { - console.log('updateComponents WITH', data); - console.log('this.pageId is', this.pageId); switch(this.pageId) { case 'landing': this.updateLandingComponents(data); @@ -345,7 +340,6 @@ class TechReport { break; case 'category': - console.log('we need to call updateComparisonComponents'); this.updateComparisonComponents(data); break; } @@ -402,9 +396,7 @@ class TechReport { // Update comparison components updateComparisonComponents(data) { - console.log('inside updateComparisonComponents', data); if(data && Object.keys(data).length > 0) { - console.log('we will call utils with', this.sections, data, data, this.page, this.labels); UIUtils.updateReportComponents(this.sections, data, data, this.page, this.labels); } else { this.updateWithEmptyData(); diff --git a/src/js/techreport/section.js b/src/js/techreport/section.js index 146186b9..03fd8ce7 100644 --- a/src/js/techreport/section.js +++ b/src/js/techreport/section.js @@ -66,7 +66,6 @@ class Section { } updateSection(content) { - console.log('pageFilters', this.pageFilters); Object.values(this.components).forEach(component => { if(component.data !== this.data) { component.data = this.data; diff --git a/src/js/techreport/tableLinked.js b/src/js/techreport/tableLinked.js index 02dd37f0..aaeb89e2 100644 --- a/src/js/techreport/tableLinked.js +++ b/src/js/techreport/tableLinked.js @@ -28,8 +28,6 @@ class TableLinked { id: this.id, }; - console.log('this.pageFilters.app', this.pageFilters.app); - tableConfig.apps.forEach(app => { const data = this.data[app]; const sorted = data?.sort((a, b) => new Date(b.date) - new Date(a.date)); diff --git a/src/js/techreport/utils/ui.js b/src/js/techreport/utils/ui.js index 026f1531..eeff761b 100644 --- a/src/js/techreport/utils/ui.js +++ b/src/js/techreport/utils/ui.js @@ -19,12 +19,9 @@ const getAppColor = (tech, technologies, colors) => { // Loop through all the sections in the report // Pass in the new data and config, and re-render const updateReportComponents = (sections, data) => { - console.log('inside updateReportComponents', sections, data); // Update sections Object.values(sections).forEach(section => { section.data = data; - console.log('updated section data', section.data); - console.log('appKeys', Object.keys(data)); section.pageFilters = { ...section.pageFilters, app: Object.keys(data), diff --git a/static/css/techreport/general.css b/static/css/techreport/general.css index 27c189d3..a068f11c 100644 --- a/static/css/techreport/general.css +++ b/static/css/techreport/general.css @@ -104,3 +104,14 @@ nav li:hover { .feedback h2 { margin-top: 0; } + +.split-view { + display: grid; + grid-template-columns: 20rem 1fr; + column-gap: 0; +} + +.split-view > .filters { + background-color: var(--color-card-background); + border-right: 1px solid var(--color-card-border); +} diff --git a/static/css/techreport/techreport.css b/static/css/techreport/techreport.css index 5c934852..5003f620 100644 --- a/static/css/techreport/techreport.css +++ b/static/css/techreport/techreport.css @@ -11,6 +11,9 @@ --color-blue-light: #e1f1ff; --color-gray-medium: #5c5c5d; + --color-teal-vibrant: #1C818D; + --color-teal-vibrant-darker: #136e78; + /* Colors based on function */ --color-link: var(--color-blue-dark); --color-text: #444; @@ -32,6 +35,9 @@ --color-tooltip-border: var(--color-card-border); --color-nav-active: var(--color-teal-accent); --color-nav-inactive: var(--color-teal-medium); + --color-button-background: var(--color-teal-vibrant); + --color-button-background-hover: var(--color-teal-vibrant-darker); + --color-button-text: #fff; /* Font sizes */ --font-size-small: 0.875rem; @@ -250,26 +256,32 @@ main :is(a, p a) { /* Page Filters */ #page-filters { - padding: 1.5rem; + padding: 1.5rem 1rem; + padding-right: 0.75rem; } -#page-filters button:not(.remove-tech) { - background-color: var(--color-teal-darker); - border-radius: 3px; - color: var(--color-blue-100); - font-weight: 600; +#page-filters button[type="submit"] { + background-color: var(--color-button-background); + border-radius: 4px; + color: var(--color-button-text); + font-weight: 400; border: none; padding: 0.25rem 0.5rem; + transition: background 0.15s ease-in; +} + +#page-filters button[type="submit"]:is(:hover, :focus-visible) { + background-color: var(--color-button-background-hover); } .remove-tech { background: none; border: none; border-radius: 10rem; - width: 44px; - height: 44px; + width: 1.5rem; + height: 1.5rem; position: relative; - top: -0.15rem; + top: -0.75rem; } .remove-tech:is(:hover, :focus) img { @@ -283,8 +295,8 @@ main :is(a, p a) { } #page-filters button[type="submit"] { - font-size: 1.25rem; - padding: 0.5rem; + font-size: 1rem; + padding: 0.65rem; width: 100%; margin-top: 1rem; } @@ -297,26 +309,40 @@ main :is(a, p a) { font-weight: 600; } +#page-filters legend.form-title { + font-size: 1.125rem; + font-weight: 400; + margin-bottom: 4.5rem; + color: var(--color-text-darker); +} + /* Page filters: Geo and rank */ #page-filters .lens { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr)); - margin: 0; - gap: 0.5rem 0.5rem; - margin-bottom: 0.5rem; + margin-bottom: 1.5rem; margin-right: 0; margin-top: 2rem; + border-bottom: 1px solid var(--color-card-border); + padding-bottom: 2.5rem; } -#page-filters .lens label, -#page-filters .lens select { - color: var(--color-text-lighter); - font-size: 0.8rem; + +#page-filters .lens label { + color: var(--color-text); + font-size: 0.875rem; + font-weight: 600; width: 100%; } -#page-filters .lens select { +#page-filters .lens .select-label select { + color: var(--color-text-darker); + font-size: 0.9rem; + width: 100%; border-color: var(--color-text-lighter); + padding: 0.825rem; +} + +#page-filters .lens .select-label:not(:last-of-type) { + margin-bottom: 2rem; } .select-label { @@ -395,10 +421,16 @@ main :is(a, p a) { color: var(--color-text) !important; } +.technology-filters { + border-bottom: 1px solid var(--color-card-border); + padding-bottom: 2.5rem; +} + .technology-filters label.tech { - font-size: 1.15rem; - font-weight: normal; margin-bottom: 0.5rem; + color: var(--color-text); + font-size: 0.875rem; + font-weight: 600; width: 100%; } @@ -411,11 +443,15 @@ main :is(a, p a) { appearance: none; background-color: transparent; padding: 0.5rem 0.5rem 0.5rem 0.75rem; + + color: var(--color-text-darker); + font-size: 0.9rem; + width: 100%; + border-color: var(--color-text-lighter); + padding: 0.5rem; } .technology-filters .tech-selector-group { - border-bottom: 1px solid #eee; - padding-bottom: 2rem; padding-top: 1.5rem; } @@ -423,13 +459,9 @@ main :is(a, p a) { margin-top: -1.5rem; } -.tech-selector-group:has(.remove-tech:is(:focus, :hover)) { - background-color: #f2f9ff; -} - .tech-selector-group { display: flex; - column-gap: 1rem; + column-gap: 0.5rem; align-items: end; } @@ -505,12 +537,14 @@ main :is(a, p a) { right: 0; top: 0.4rem; text-align: right; + padding-right: 0.15rem; } .categories-selector-group label { font-weight: 400; font-size: 0.825rem; margin-bottom: 0; + margin-top: -0.1rem; } .categories-selector-group select { @@ -522,8 +556,8 @@ main :is(a, p a) { font-size: 0.825rem; padding: 0; border-radius: 0; - width: 15ch; - border-bottom: 1px solid #959494; + width: 12ch; + margin-top: 0rem; } select { @@ -532,6 +566,18 @@ select { #add-tech { margin-top: 1.5rem; + border-radius: 3rem; + border: 1px dashed var(--color-nav-inactive); + background-color: transparent; + font-size: 0.75rem; + font-weight: 600; + color: var(--color-nav-inactive); + padding: 0.35rem 1rem; +} + +#add-tech span { + margin-right: 0.25rem; + font-weight: 800; } /* Results header */ diff --git a/templates/techreport/comparison.html b/templates/techreport/comparison.html index f2a2d488..863145a0 100644 --- a/templates/techreport/comparison.html +++ b/templates/techreport/comparison.html @@ -1,23 +1,15 @@ {% extends "techreport/report.html" %} +{% block filters %} + {% include "techreport/templates/filters.html" %} +{% endblock %} + {% block section %} {{ super() }} {% set technologies = tech_report_page.filters.app or tech_report_page.config.default.app %} {% set technologies_str = ','.join(technologies) %} -
-
-

- Tech Report - Comparison -

-
-
- {% include "techreport/templates/filters.html" %} -
-
- {% set filter_tech_title = technologies_str or tech_report_page.filters.app[0] or 'ALL' %} {% include "techreport/components/filter_info_header.html" %} @@ -29,7 +21,7 @@

data-type="section" data-api="cwv,lighthouse,page-weight" > -

Summary ({{ technologies | length }} technologies)

+

Summary ({{ technologies | length }} technologies)

{% set component = tech_report_page.config.tech_comparison_summary %} {% set id = component.id %} {% set client = request.args.get('client', '') or 'mobile' %} diff --git a/templates/techreport/drilldown.html b/templates/techreport/drilldown.html index ccc86f75..e7679801 100644 --- a/templates/techreport/drilldown.html +++ b/templates/techreport/drilldown.html @@ -1,32 +1,21 @@ {% extends "techreport/report.html" %} +{% block filters %} + {% include "techreport/templates/filters.html" %} +{% endblock %} + {% block section %} {{ super() }} -
-
-

- Tech Report - Drilldown -

- -
-
- {% include "techreport/templates/filters.html" %} -
-
- {% set filter_tech_title = tech_report_page.filters.app[0] or 'ALL' %} {% include "techreport/components/filter_info_header.html" %}
-

+

Results for ALL -

+
  • Placeholder
diff --git a/templates/techreport/techreport.html b/templates/techreport/techreport.html index 6b4290a8..d24dc51b 100644 --- a/templates/techreport/techreport.html +++ b/templates/techreport/techreport.html @@ -73,7 +73,16 @@ {% endblock %} {% block main %} - {% block section %}{% endblock %} +
+
+ {% block filters %}{% endblock %} +
+ +
+ {% block section %}{% endblock %} +
+
+