update styling and responsiveness, remember geo/rank filters

HTTPArchive · Aug 15, 2023 · 0a05bb8 · 0a05bb8
1 parent 4996410
commit 0a05bb8
Show file tree

Hide file tree

Showing 12 changed files with 205 additions and 157 deletions.
diff --git a/src/js/components/tableCWVOverviewMulti.js b/src/js/components/tableCWVOverviewMulti.js
@@ -75,29 +75,31 @@ class tableCWVOverviewMulti extends HTMLElement {
         });
         const _latest = getLatestEntry(_clientDataSorted);
 
-        /* Fetch the templates for the rows and cells */
-        const rowTemplate = document.getElementById('table-general-row').content.cloneNode(true);
-        const headingCellTemplate = document.getElementById('table-general-heading-cell').content.cloneNode(true);
-
         /* Fill in the tech names as row headings */
-        headingCellTemplate.querySelector('th').textContent = technology;
-        rowTemplate.querySelector('tr').append(headingCellTemplate);
+        const row = document.createElement('tr');
+        const headingCell = document.createElement('th');
+        const technologyLinkEl = document.createElement('a');
+        technologyLinkEl.className = 'row-link';
+        technologyLinkEl.href = `/reports/techreport/drilldown/?tech=${technology}`;
+        technologyLinkEl.innerHTML = technology;
+        headingCell.append(technologyLinkEl);
+        row.append(headingCell);
 
         /* Fill in amount of origins tech has */
-        const origins = document.getElementById('table-general-cell').content.cloneNode(true);
-        origins.querySelector('td').textContent = _latest.origins;
-        rowTemplate.querySelector('tr').append(origins);
+        const origins = document.createElement('td');
+        origins.innerHTML = _latest.origins;
+        row.append(origins);
 
         /* Fill in the data for each of the core web vitals */
         coreWebVitals.forEach(cwv => {
-          const dataCellTemplate = document.getElementById('table-general-cell').content.cloneNode(true);
+          const dataCell = document.createElement('td');
           const percentageGood = parseInt(_latest[cwv?.origins_with_good] / _latest[cwv?.origins_eligible] * 10000) / 100;
-          dataCellTemplate.querySelector('td').textContent = `${percentageGood}%`;
-          rowTemplate.querySelector('tr').append(dataCellTemplate);
+          dataCell.innerHTML = `${percentageGood}%`;
+          row.append(dataCell);
         })
 
         /* Add the row to the table body */
-        tableBody.append(rowTemplate);
+        tableBody.append(row);
 
         /* Show the latest timestamp */
         this.shadowRoot.querySelector('.timestamp').innerHTML = _latest.date;

diff --git a/static/components/table.css b/static/components/table.css
@@ -1,3 +1,11 @@
+.table-ui-wrapper {
+  overflow: auto;
+}
+
+.table-ui-wrapper:focus-visible {
+  outline: 1.5px solid var(--color-teal-dark);
+  outline-offset: 1.5px;
+}
 
 .table-ui {
   width: 100%;
@@ -19,12 +27,12 @@
   border-bottom: 1px solid var(--color-text);
 }
 
-.table-ui thead th {
-  padding: 1rem 0;
+.table-ui :is(td, th) {
+  min-width: 5rem;
 }
 
-.table-ui tbody :is(td, th) {
-  padding: 1rem 0;
+.table-ui :is(td, th):not(:last-child) {
+  padding: 1rem 2rem 1rem 0;
 }
 
 .table-ui tbody tr {
@@ -47,6 +55,8 @@
 .table-ui tr a {
   color: var(--color-link);
   text-decoration: underline;
+  width: 100%;
+  display: block;
 }
 
 .table-ui tr .row-link:is(:hover, :focus) {

diff --git a/static/css/techreport/landing.css b/static/css/techreport/landing.css
@@ -1,9 +1,14 @@
+.landing-content {
+  margin-top: 10rem;
+}
+
 .choices {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
   column-gap: 2rem;
   row-gap: 1rem;
   margin-bottom: 4rem;
+  margin-top: -15rem;
 }
 
 .choices .card {
@@ -21,6 +26,14 @@
   padding: 0;
 }
 
+.choices .card .img-placeholder {
+  display: block;
+  width: 100%;
+  height: 17rem;
+  background-color: #EEEEEE;
+  margin-top: 1rem;
+}
+
 .latest-info h2 {
   font-size: 1rem;
   font-weight: 600;
@@ -42,18 +55,6 @@
   font-weight: 600;
 }
 
-.report-summary-wrapper {
-  background-image:
-    linear-gradient(
-      var(--color-teal-faded) 60%,
-      var(--color-page-background)
-    );
-  background-size: 100% 25rem;
-  background-repeat: no-repeat;
-  border-top: 1px solid var(--color-teal-medium);
-  padding-bottom: 5rem;
-}
-
 .report-summary-tables {
   padding: 4rem 0;
 }

diff --git a/static/css/techreport/techreport.css b/static/css/techreport/techreport.css
@@ -37,10 +37,6 @@
   margin-top: 0;
   background-color: transparent;
   padding: 4rem 0;
-  display: grid;
-  grid-template-columns: 1fr 20rem;
-  column-gap: 2rem;
-  row-gap: 2rem;
 }
 
 .intro h1 {
@@ -176,16 +172,21 @@
 }
 
 /* Filters */
-#filter-bar {
-  padding: 1rem;
+#filter-bar > div {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+#filter-bar > div > *:not(:last-child) {
+  margin-right: 1.5rem;
 }
 
 #filter-bar label {
   margin-bottom: 0.25rem;
+  display: block;
 }
 
 #filter-bar select {
-  display: block;
   width: 20rem;
   max-width: 100%;
   margin-bottom: 1rem;
@@ -341,4 +342,3 @@ button#add-tech {
     position: static;
   }
 }
-
diff --git a/templates/techreport/comparison.html b/templates/techreport/comparison.html
@@ -8,7 +8,7 @@
 
 
   <div class="intro block-m">
-    <div>
+    <div class="info">
       <h1>
         <span class="subtitle">Tech Report</span>
         <span class="main-title">Comparison</span>

diff --git a/templates/techreport/drilldown.html b/templates/techreport/drilldown.html
@@ -4,7 +4,7 @@
   {{ super() }}
 
   <div class="intro block-m">
-    <div>
+    <div class="info">
       <h1>
         <span class="subtitle">Tech Report</span>
         <span class="main-title">Drilldown</span>
@@ -121,7 +121,7 @@ <h3>All data</h3>
         <table-general
           data-scope="all-data"
           client="mobile"
-          columns="date,client,median_lighthouse_score_accessibility,median_lighthouse_score_performance,median_lighthouse_score_pwa,median_lighthouse_score_seo, median_lighthouse_score_best_practices"
+          columns="date,client,median_lighthouse_score_accessibility,median_lighthouse_score_performance,median_lighthouse_score_pwa,median_lighthouse_score_seo,median_lighthouse_score_best_practices"
         >
         </table-general>
       </div>

diff --git a/templates/techreport/landing.html b/templates/techreport/landing.html
@@ -6,32 +6,54 @@
 {% endblock %}
 
 {% block section %}
-  <div class="choices block-m">
-    <div class="card">
-      <h2><a href="/reports/techreport/drilldown">Technology Drilldown</a></h2>
-      <p>Get detailed information about <strong>one</strong> technology. </p>
-    </div>
-    <div class="card">
-      <h2><a href="/reports/techreport/comparison">Technology Comparison</a></h2>
-      <p>Get detailed information about <strong>two to ten</strong> technologies. </p>
+  <div class="intro block-m">
+    <div>
+      <h1>
+        <span class="subtitle">Reports</span>
+        <span class="title">Tech Report</span>
+      </h1>
+      <p>
+        Placeholder text: A short description about what it is that we display in the Core Web Vitals report, and how it can be used. There should probably be links here to the individual technology pages and a few interesting comparison pages, as well as to the methodology page and the discussions etc like the reports have today.
+      </p>
     </div>
   </div>
 
-  <div class="block-m">
-    <h2>Explore</h2>
-    <p>Placeholder</p>
+  <div class="report-content landing-content">
+    <div class="choices block-m">
+      <div class="card">
+        <h2><a href="/reports/techreport/drilldown">Technology Drilldown</a></h2>
+        <p>Get detailed information about <strong>one</strong> technology. </p>
+        <span class="img-placeholder"></span>
+      </div>
+      <div class="card">
+        <h2><a href="/reports/techreport/comparison">Technology Comparison</a></h2>
+        <p>Get detailed information about <strong>two to ten</strong> technologies. </p>
+        <span class="img-placeholder"></span>
+      </div>
+    </div>
+
+    <div class="block-m">
+      <h2>Explore</h2>
+      <p>Placeholder</p>
+
+      <div class="card table-ui-wrapper">
+        <h3>Popular CMSes</h3>
+        <p>Description</p>
 
-    <div class="card table-ui-wrapper">
-      <h3>Popular CMSes</h3>
-      <p>Description</p>
+        <table-cwv-overview-multitech
+          data-scope="all-data"
+          client="mobile"
+          technologies="{{ ','.join(tech_report_page.config.popular_tech.filters.app) }}"
+        >
+        </table-cwv-overview-multitech>
 
-      <table-cwv-overview-multitech
-        data-scope="all-data"
-        client="mobile"
-        technologies="{{ ','.join(tech_report_page.config.popular_tech.filters.app) }}"
-      >
-      </table-cwv-overview-multitech>
+        <p>
+          <a href="/reports/techreport/comparison?tech={{ ','.join(tech_report_page.config.popular_tech.filters.app) }}" class="cta-link">
+            Compare technologies
+          </a>
+        </p>
 
+      </div>
     </div>
   </div>
 {% endblock %}
diff --git a/templates/techreport/techreport.html b/templates/techreport/techreport.html
@@ -19,38 +19,42 @@
   </div>
 
   <nav class="report-navigation">
-      <ul class="navigation-items block-l">
-        <li>
-          {% set ariaCurrent = "false" %}
-          {% if active_page == "landing" %}{% set ariaCurrent = "page" %}{% endif %}
-          <a
-            href="/reports/techreport/landing"
-            aria-current="{{ ariaCurrent }}"
-          >
-            Home
-          </a>
-        </li>
-        <li>
-          {% set ariaCurrent = "false" %}
-          {% if active_page == "drilldown" %}{% set ariaCurrent = "page" %}{% endif %}
-          <a
-            href="/reports/techreport/drilldown"
-            aria-current="{{ ariaCurrent }}"
-          >
-            Drilldown
-          </a>
-        </li>
-        <li>
-          {% set ariaCurrent = "false" %}
-          {% if active_page == "comparison" %}{% set ariaCurrent = "page" %}{% endif %}
-          <a
-            href="/reports/techreport/comparison"
-            aria-current="{{ ariaCurrent }}"
-          >
-            Comparison
-          </a>
-        </li>
-      </ul>
+    {% set filters = "" %}
+    {% if tech_report_page.filters %}
+      {% set filters = "?geo=" + tech_report_page.filters.geo + "&rank=" + tech_report_page.filters.rank %}
+    {% endif %}
+    <ul class="navigation-items block-l">
+      <li>
+        {% set ariaCurrent = "false" %}
+        {% if active_page == "landing" %}{% set ariaCurrent = "page" %}{% endif %}
+        <a
+          href="/reports/techreport/landing"
+          aria-current="{{ ariaCurrent }}"
+        >
+          Home
+        </a>
+      </li>
+      <li>
+        {% set ariaCurrent = "false" %}
+        {% if active_page == "drilldown" %}{% set ariaCurrent = "page" %}{% endif %}
+        <a
+          href="/reports/techreport/drilldown{{ filters }}"
+          aria-current="{{ ariaCurrent }}"
+        >
+          Drilldown
+        </a>
+      </li>
+      <li>
+        {% set ariaCurrent = "false" %}
+        {% if active_page == "comparison" %}{% set ariaCurrent = "page" %}{% endif %}
+        <a
+          href="/reports/techreport/comparison{{ filters }}"
+          aria-current="{{ ariaCurrent }}"
+        >
+          Comparison
+        </a>
+      </li>
+    </ul>
   </nav>
 {% endblock %}