Retire l’affreux hack du titre de la page sur mobile (#4650)

Sur mobile et tablette, le titre de la page dans l’en-tête (juste à
droite du logo de gauche) était créé depuis le CSS avec l’attribut
`data-title` sur l’élément `.header-logo`, et positionné avec un
vilain `position: absolute;`.

J’ai donc créé un nouveau “véritable” élément `.header-mobile-page-title`.

J’ai retiré l’attribut `data-title` vu qu’après inspection du JS du
menu, il m’a semblé inutilisé.

Ce patch a pour “effet de bord” de corriger #4354 (c’est marrant,
c’était pas trop le but au départ).

Fix #4354.

assets/scss/layout/_header.scss

@@ -129,6 +129,22 @@ $logo-width: 240px;
         background: #EEE;
     }
 
+    .header-mobile-page-title {
+        flex-grow: 1;
+        flex-basis: 0;
+
+        color: white;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        margin: 0 0.5em;
+        line-height: 50px;
+        font-size: 1.7rem;
+        @media only screen and #{$media-wide} {
+            display: none;
+        }
+    }
+
     .arrow {
         display: none;
         width: 20px;
@@ -401,25 +417,6 @@ $logo-width: 240px;
             background-size: 100%;
             width: 100%;
             height: 100%;
-
-            &:after {
-                display: block;
-                content: attr(data-title);
-                position: absolute;
-                top: 0;
-                left: 95px;
-                right: 155px;
-                line-height: 50px;
-                text-indent: 0;
-                text-align: left;
-                font-weight: normal;
-                font-size: 17px;
-                font-size: 1.7rem;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-                overflow: hidden;
-                max-width: 200px;
-            }
         }
 
         header .header-menu {

templates/base.html

@@ -167,22 +167,19 @@
             <header>
                 <div class="mobile-menu-btn ico-after"></div>
 
-                {% captureas mobiletitle %}
-                    {% block mobile_title %}
-                        {{app.site.literal_name}}
-                    {% endblock %}
-                {% endcaptureas %}
-
                 {# Logo #}
                 <div class="header-logo">
                     <a href="{% url "homepage" %}"
-                       class="header-logo-link"
-                       data-title="{{ mobiletitle }}"
-                    >
+                       class="header-logo-link">
                         {{app.site.literal_name}}
                     </a>
                 </div>
 
+                <div class="header-mobile-page-title">
+                    {% block mobile_title %}
+                        {{app.site.literal_name}}
+                    {% endblock %}
+                </div>
 
                 {# Menu #}
                 <nav class="header-menu" id="menu" data-title="Menu"