Update mobile scoreboard.

- Make team names not fall of the screen by calculating their max width.
- Make non mobile scoreboard not left-aligned.
- Add a bit of margin to the header.
- Make the problem boxes right aligned.
- Change the card at the top to show 2 lines (name + contestt time) on mobile.

Author: nickygerritsen

webapp/public/style_domjudge.css

@@ -219,6 +219,7 @@ del {
     display: block;
     overflow: hidden;
 }
+
 .toolong:after {
     content: "";
     width: 30%;
@@ -719,4 +720,4 @@ blockquote {
     -ms-transform:rotate(-35deg);
     -o-transform:rotate(-35deg);
     transform:rotate(-35deg);
-}
+}

webapp/templates/partials/scoreboard.html.twig

@@ -18,31 +18,37 @@
     {% endif %}
 
     <div class="card" {% if refreshstop is defined %}data-ajax-refresh-stop="1"{% endif %}>
-        <div class="card-header" style="font-family: Roboto, sans-serif; display: flex;">
-            <span style="font-weight: bold;">{{ current_contest.name }}</span>
-            <span id="contesttimer">
-                {% if scoreboard is null %}
-                    {{ current_contest | printContestStart }}
-                {% elseif scoreboard.freezeData.showFinal(jury) %}
-                    {% if current_contest.finalizetime is empty %}
-                        preliminary results - not final
-                    {% else %}
-                        final standings
-                    {% endif %}
-                {% elseif scoreboard.freezeData.stopped %}
-                    contest over, waiting for results
-                {% elseif static %}
-                    {% set now = 'now'|date('U') %}
-                    {{ current_contest.starttime | printelapsedminutes(now) }}
-                {% else %}
-                    {% if current_contest.freezeData.started %}
-                        started:
+        <div class="card-header" style="font-family: Roboto, sans-serif;">
+            <div class="row">
+                <div class="col-md-6 col-12">
+                    <span style="font-weight: bold;">{{ current_contest.name }}</span>
+                </div>
+                <div class="col-md-6 col-12 text-md-end text-start">
+                    <span id="contesttimer">
+                    {% if scoreboard is null %}
+                        {{ current_contest | printContestStart }}
+                    {% elseif scoreboard.freezeData.showFinal(jury) %}
+                        {% if current_contest.finalizetime is empty %}
+                            preliminary results - not final
+                        {% else %}
+                            final standings
+                        {% endif %}
+                    {% elseif scoreboard.freezeData.stopped %}
+                        contest over, waiting for results
+                    {% elseif static %}
+                        {% set now = 'now'|date('U') %}
+                        {{ current_contest.starttime | printelapsedminutes(now) }}
                     {% else %}
-                        starts:
+                        {% if current_contest.freezeData.started %}
+                            started:
+                        {% else %}
+                            starts:
+                        {% endif %}
+                        {{ current_contest.starttime | printtime }} - ends: {{ current_contest.endtime | printtime }}
                     {% endif %}
-                    {{ current_contest.starttime | printtime }} - ends: {{ current_contest.endtime | printtime }}
-                {% endif %}
-            </span>
+                </span>
+                </div>
+            </div>
         </div>
 
         {% if static %}

webapp/templates/public/scoreboard.html.twig

@@ -12,7 +12,7 @@
         {% set bannerImage = globalBannerAssetPath() %}
     {% endif %}
     {% if bannerImage %}
-        <img class="banner" src="{{ asset(bannerImage) }}" alt="Banner">
+        <img class="banner mt-2" src="{{ asset(bannerImage) }}" alt="Banner">
     {% endif %}
 
     <div data-ajax-refresh-target data-ajax-refresh-after="initializeScoreboard" class="mt-3">
@@ -53,6 +53,7 @@
                 {% if static and refresh is defined %}
                 disableRefreshOnModal();
                 {% endif %}
+                resizeMobileTeamNames();
             };
 
             {% if static and refresh is defined %}