Improvements to social images layout and styling

- Prevent widows in headings. - Simplify JavaScript – no need to set font sizes in JS when we can do it in CSS instead. - Simplify vertical spacing. - Fix various font-sizing issues. - Move logos into base template, no need to repeat for each image.
mysociety · Oct 17, 2023 · 35d210e · 35d210e
1 parent 5acbc80
commit 35d210e
Show file tree

Hide file tree

Showing 7 changed files with 105 additions and 110 deletions.
diff --git a/caps/templatetags/caps_templatetags.py b/caps/templatetags/caps_templatetags.py
@@ -14,6 +14,13 @@
 register = template.Library()
 
 
+@register.filter
+@stringfilter
+def prevent_widow(s):
+    # Replace final space in string with &nbsp;
+    return mark_safe('&nbsp;'.join(s.rsplit(' ', 1)))
+
+
 @register.filter
 def randomize_and_limit(value: list, limit: int = 10) -> list:
     """

diff --git a/scoring/static/scoring/scss/open-graph-preview.scss b/scoring/static/scoring/scss/open-graph-preview.scss
@@ -48,24 +48,50 @@
     }
 
     h1 {
-        font-size: 4rem;
+        font-size: 5rem;
         font-weight: 900;
         margin-bottom: 0;
 
-        &#council-preview-heading {
-            font-size: 3rem;
+        &.count--long {
+            font-size: 4rem;
+        }
+    }
+
+    .council-overall-top-performer,
+    .council-section-top-performer {
+        h1 {
+            font-size: 6rem;
+
+            &.count--medium {
+                font-size: 5.5rem;
+            }
+
+            &.count--long {
+                font-size: 5rem;
+            }
+        }
+    }
+
+    .section-preview {
+        h1 {
+            font-size: 4.5rem;
         }
     }
 
     .subtitle {
         font-size: 2rem;
+
+        &::first-letter {
+            text-transform: uppercase;
+        }
     }
 
     header {
         margin-bottom: auto;
         display: flex;
         align-items: center;
         gap: 4rem;
+        margin-bottom: auto;
 
         img, svg {
             width: auto;
@@ -88,6 +114,7 @@
 
         th {
             border-bottom: 2px solid rgba($white, 0.5);
+
             .badge {
                 position: absolute;
                 top: -0.2rem;
@@ -99,7 +126,7 @@
         }
 
         td {
-            padding: 3vw 2vw;
+            padding: 2.5vw 2vw;
         }
 
         // "Overall Score" column
@@ -138,12 +165,12 @@
 
 .open-graph-preview__score {
     display: block;
-    font-size: 4.5rem;
-    line-height: 0.9;
+    font-size: 4rem;
+    line-height: 1;
     font-weight: bold;
 
     td:first-child & {
-        font-size: 8rem;
+        font-size: 7rem;
     }
 }
 
@@ -169,17 +196,15 @@
 
 .open-graph-preview__grid {
     display: grid;
-    grid-template-columns: 75% 20%;
-    column-gap: 5%;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: calc(100% - 10vw);
+    grid-template-columns: 70% 20%;
+    column-gap: 10%;
+    margin-bottom: auto;
+    align-items: end;
 
     .grid__name {
         grid-column: 1 / 1;
     }
+
     .grid__score {
         grid-column: 2 / 2;
         align-self: end;
@@ -191,35 +216,43 @@
     .open-graph-preview {
         font-size: 1.5vmin;
 
-        h1 {
-            &#council-preview-heading {
-                font-size: 4rem;
-            }
-        }
+        .council-preview {
+            h1 {
+                font-size: 6.5rem;
 
-        table {
-            margin-top: 9rem;
-        }
+                &.count--medium {
+                    font-size: 6rem;
+                }
 
-        .council-section-top-performer,
-        .council-overall-top-performer {
-            .open-graph-preview__score {
-                font-size: 11rem !important;
+                &.count--long {
+                    font-size: 5.5rem;
+                }
             }
         }
 
-        .council-preview,
         .section-preview {
             h1 {
-                font-size: 4rem;
+                font-size: 6rem;
+
+                &.count--long {
+                    font-size: 5.5rem;
+                }
             }
 
             .subtitle {
                 font-size: 3rem;
+                margin-top: 1rem;
             }
         }
     }
 
+    .council-section-top-performer,
+    .council-overall-top-performer {
+        .open-graph-preview__score {
+            font-size: 11rem !important;
+        }
+    }
+
     .open-graph-preview__grid {
         grid-template-columns: 100%;
         grid-template-rows: auto;

diff --git a/scoring/templates/scoring/base-preview.html b/scoring/templates/scoring/base-preview.html
@@ -16,44 +16,23 @@
 </head>
 <body class="{% block bodyclass %}{% endblock %}">
     <!-- Facebook OpenGraph image dimensions: 1200px wide, 630px tall -->
+    <header>
+        {% include 'caps/icons/council-climate-logo-2023.html' with classes='open-graph-preview__scorecards-logo' width='10em' height='auto' role='presentation' %}
+        <span class="open-graph-preview__year">2023</span>
+        <img src="{% static 'scoring/img/ceuk-logo-white.png' %}" alt="" class="open-graph-preview__ceuk-logo">
+    </header>
     {% block content %}{% endblock %}
     <script>
-        // Check aspect ratio
-        function getAspectRatio() {
-            function gcd(a, b) {
-                return (b === 0) ? a : gcd(b, a % b);
+        document.querySelectorAll('.js-count').forEach(function(el){
+            var l = el.innerText.trim().length;
+            if ( l > 40 ) {
+                el.classList.add('count--long');
+            } else if ( l > 32 ) {
+                el.classList.add('count--medium');
+            } else {
+                el.classList.add('count--short');
             }
-
-            var width = document.body.offsetWidth;
-            var height = document.body.offsetHeight;
-            var divisor = gcd(width, height);
-            var aspectWidth = width / divisor;
-            var aspectHeight = height / divisor;
-
-            return aspectWidth + "/" + aspectHeight;
-        }
-
-        function adjustText(id, fontSize) {
-            var councilName = document.getElementById(id);
-            if (councilName) {
-                var councilNameLength = councilName.innerText.trim().length;
-                if (councilNameLength < 25) {
-                    councilName.style.fontSize = fontSize;
-                }
-            }
-        }
-
-        if (getAspectRatio() === '1/1') {
-            adjustText('council-preview-heading', '6rem');
-            adjustText('section-preview-heading', '8rem');
-            adjustText('council-section-top-performer-heading', '7rem');
-            adjustText('council-overall-top-performer-heading', '7rem');
-        } else {
-            adjustText('council-preview-heading', '4rem');
-            adjustText('council-section-top-performer-heading', '6.5rem');
-            adjustText('council-overall-top-performer-heading', '6.5rem');
-        }
-
+        });
     </script>
 </body>
 </html>
diff --git a/scoring/templates/scoring/council-preview.html b/scoring/templates/scoring/council-preview.html
@@ -1,16 +1,10 @@
 {% extends "scoring/base-preview.html" %}
-{% load static %}
+{% load static caps_templatetags %}
 
 {% block bodyclass %}version-2-gradient council-preview{% endblock %}
 
 {% block content %}
-    <header class="mb-6">
-        {% include 'caps/icons/council-climate-logo-2023.html' with classes='open-graph-preview__scorecards-logo' width='10em' height='auto' role='presentation' %}
-        <span class="open-graph-preview__year">2023</span>
-        <img src="{% static 'scoring/img/ceuk-logo-white.png' %}" alt="" class="open-graph-preview__ceuk-logo">
-    </header>
-
-    <h1 id="council-preview-heading" class="text-shadow">{{ council.name }}</h1>
+    <h1 class="text-shadow js-count">{{ council.name|prevent_widow }}</h1>
     {% if plan_score.top_performer %}
     <span class="mb-5 me-auto fw-bold subtitle text-shadow text-yellow-300 mt-2">
         {% include 'caps/icons/scorecards-star.html' with classes='me-1 align-text-top' width='1.2em' height='auto' role='presentation' %}
@@ -33,7 +27,7 @@ <h1 id="council-preview-heading" class="text-shadow">{{ council.name }}</h1>
                 </td>
                 <td class="align-top">
                     <span class="open-graph-preview__score">{{ max_score.score|floatformat:0 }}%</span>
-                    <span class="open-graph-preview__section">{{ max_score.section.plan_section.description }}</span>
+                    <span class="open-graph-preview__section">{{ max_score.section.plan_section.description|cut:" (CA)" }}</span>
                     {% if max_score.section.top_performer %}
                     <span class="high-scoring-section-badge mt-3 mx-auto text-yellow-300 mt-3">
                         {% include 'caps/icons/scorecards-star.html' with classes='me-1 align-top' width='1em' height='auto' role='presentation' %}
@@ -43,7 +37,7 @@ <h1 id="council-preview-heading" class="text-shadow">{{ council.name }}</h1>
                 </td>
                 <td class="align-top">
                     <span class="open-graph-preview__score">{{ min_score.score|floatformat:0 }}%</span>
-                    <span class="open-graph-preview__section">{{ min_score.section.plan_section.description }}</span>
+                    <span class="open-graph-preview__section">{{ min_score.section.plan_section.description|cut:" (CA)" }}</span>
                 </td>
             </tr>
         </tbody>

diff --git a/scoring/templates/scoring/council-top-performer-overall-preview.html b/scoring/templates/scoring/council-top-performer-overall-preview.html
@@ -4,25 +4,19 @@
 {% block bodyclass %}version-3-gradient council-overall-top-performer{% endblock %}
 
 {% block content %}
-    <header class="mb-6">
-        {% include 'caps/icons/council-climate-logo-2023.html' with classes='open-graph-preview__scorecards-logo' width='10em' height='auto' role='presentation' %}
-        <span class="open-graph-preview__year">2023</span>
-        <img src="{% static 'scoring/img/ceuk-logo-white.png' %}" alt="" class="open-graph-preview__ceuk-logo">
-    </header>
-
+    <div class="mb-5 me-auto fw-bold text-shadow text-yellow-300 d-flex align-items-center" style="font-size: 3rem; line-height: 1.2;">
+        {% include 'caps/icons/scorecards-star.html' with classes='me-4 align-text-top' width='1.2em' height='auto' role='presentation' %}
+        <span>High scorer &mdash; {% include 'caps/includes/authority_type.html' with group=authority_type %} councils</span>
+    </div>
     <div class="open-graph-preview__grid">
         <div class="grid__name">
-            <div class="mb-5 me-auto fw-bold text-shadow text-yellow-300" style="font-size: 3rem">
-                {% include 'caps/icons/scorecards-star.html' with classes='me-1 align-text-top' width='1.2em' height='auto' role='presentation' %}
-                <span>High scoring council &mdash; {% include 'caps/includes/authority_type.html' with group=authority_type %}</span>
-            </div>
-            <h1 id="council-overall-top-performer-heading" class="text-shadow" style="font-size: 4.5rem">{{ council.name }}</h1>
+            <h1 class="text-shadow js-count">{{ council.name }}</h1>
         </div>
 
-        <div class="grid__score">
+        <div class="grid__score text-shadow">
             <div class="d-flex flex-column align-items-end justify-items-end">
-                <span class="mb-3 text-shadow" style="font-size: 4rem">Score</span>
-                <span class="open-graph-preview__score fw-bold text-shadow" style="font-size: 9rem">{{ score|floatformat:0 }}%</span>
+                <span class="mb-3 lh-1" style="font-size: 4rem">Score</span>
+                <span class="open-graph-preview__score fw-bold" style="font-size: 9rem">{{ score|floatformat:0 }}%</span>
             </div>
         </div>
 

diff --git a/scoring/templates/scoring/council-top-performer-preview.html b/scoring/templates/scoring/council-top-performer-preview.html
@@ -4,25 +4,19 @@
 {% block bodyclass %}version-4-gradient council-section-top-performer{% endblock %}
 
 {% block content %}
-    <header class="mb-6">
-        {% include 'caps/icons/council-climate-logo-2023.html' with classes='open-graph-preview__scorecards-logo' width='10em' height='auto' role='presentation' %}
-        <span class="open-graph-preview__year">2023</span>
-        <img src="{% static 'scoring/img/ceuk-logo-white.png' %}" alt="" class="open-graph-preview__ceuk-logo">
-    </header>
-
+    <div class="mb-5 me-auto fw-bold text-shadow text-yellow-300 d-flex align-items-center" style="font-size: 3rem; line-height: 1.2;">
+        {% include 'caps/icons/scorecards-star.html' with classes='me-4 align-text-top' width='1.2em' height='auto' role='presentation' %}
+        <span>High scorer &mdash; {{ section.description }}</span>
+    </div>
     <div class="open-graph-preview__grid">
         <div class="grid__name">
-            <div class="mb-5 me-auto fw-bold text-shadow text-yellow-300" style="font-size: 3rem">
-                {% include 'caps/icons/scorecards-star.html' with classes='me-1 align-text-top' width='1.2em' height='auto' role='presentation' %}
-                <span>High scoring council in {{ section.description }}</span>
-            </div>
-            <h1 class="text-shadow" id="council-section-top-performer-heading" style="font-size: 4.5rem">{{ council.name }}</h1>
+            <h1 class="text-shadow js-count">{{ council.name }}</h1>
         </div>
 
-        <div class="grid__score">
+        <div class="grid__score text-shadow">
             <div class="d-flex flex-column align-items-end justify-items-end">
-                <span class="mb-3 text-shadow" style="font-size: 4rem">Score</span>
-                <span class="open-graph-preview__score fw-bold text-shadow" style="font-size: 9rem">{{ score|floatformat:0 }}%</span>
+                <span class="mb-3 lh-1" style="font-size: 4rem">Score</span>
+                <span class="open-graph-preview__score fw-bold" style="font-size: 9rem">{{ score|floatformat:0 }}%</span>
             </div>
         </div>
     </div>

diff --git a/scoring/templates/scoring/section-preview.html b/scoring/templates/scoring/section-preview.html
@@ -1,17 +1,11 @@
 {% extends "scoring/base-preview.html" %}
-{% load static %}
+{% load static caps_templatetags %}
 
 {% block bodyclass %}section-preview{% endblock %}
 
 {% block content %}
-    <header class="mb-6">
-        {% include 'caps/icons/council-climate-logo-2023.html' with classes='open-graph-preview__scorecards-logo' width='10em' height='auto' role='presentation' %}
-        <span class="open-graph-preview__year">2023</span>
-        <img src="{% static 'scoring/img/ceuk-logo-white.png' %}" alt="" class="open-graph-preview__ceuk-logo">
-    </header>
-
-    <h1 id="section-preview-heading" class="text-shadow">{{ section.description }}</h1>
-    <span class="mb-5 me-auto fw-bold text-shadow subtitle">
+    <h1 class="text-shadow js-count">{{ section.description|cut:" (CA)"|prevent_widow }}</h1>
+    <span class="fw-bold text-shadow subtitle">
         {% include 'caps/includes/authority_type.html' with group=authority_type %} councils
     </span>