Merge branch 'better-mobile-support'

srobo · Apr 7, 2024 · 33bb6d3 · 33bb6d3
2 parents 68c6cd8 + fb93fdd
commit 33bb6d3
Show file tree

Hide file tree

Showing 9 changed files with 101 additions and 27 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -4,6 +4,8 @@
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en-GB" data-ng-app="app">
 
 <head>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
   {% capture title %}{{ page.title | replace:'$YYYY',site.year }} | {{ site.title }}{% endcapture %}
   <title>{{ title }}</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

diff --git a/_sass/brand b/_sass/brand
diff --git a/_sass/comp/common.scss b/_sass/comp/common.scss
@@ -109,7 +109,44 @@ ul.comp-nav {
     padding: 0 1em;
   }
 
-  > li:not(:first-child) {
-    border-left: 1px solid silver;
+  @include desktop-only {
+    > li:not(:first-child) {
+      border-left: 1px solid silver;
+    }
+  }
+
+  @include mobile-only {
+    max-width: 100%;
+    margin: 0 auto;
+    overflow: hidden;
+    flex-direction: column;
+
+    a {
+      text-decoration: none;
+    }
+
+    > li:not(:last-child) > a {
+      display: block;
+      border-bottom: 1px solid silver;
+      padding-top: .1rem;
+      padding-bottom: .1rem;
+    }
+  }
+}
+
+.floated-chooser {
+  float: right;
+  margin-left: 25px;
+  margin-bottom: 1em;
+
+  & > :last-child {
+    margin-bottom: 0;
+  }
+
+  & + * {
+    clear: both;
+    @include media-query("small") {
+      clear: none;
+    }
   }
 }
diff --git a/_sass/comp/index.scss b/_sass/comp/index.scss
@@ -22,9 +22,23 @@
 
     #live-stream-wrapper {
       text-align: center;
+      position: relative;
+      width: 100%;
+      max-width: 760px;
+      margin: auto;
+
+      & > iframe {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+      }
 
-      & > * {
-        margin: auto;
+      &::after {
+        content: "";
+        display: block;
+        padding-top: 56.25%;
       }
     }
 
@@ -47,9 +61,11 @@
     }
 
     div#leaderboard-container {
-      float: right;
-      padding-right: 40px;
-      width: 330px;
+      @include desktop-only {
+        float: right;
+        padding-right: 40px;
+        width: 330px;
+      }
     }
     div#leaderboard {
       margin-right: 50px;
@@ -68,9 +84,28 @@
 }
 
 #match-info {
-  float: left;
   text-align: center;
-  width: 600px;
+  @include desktop-only {
+    float: left;
+    width: 600px;
+  }
+
+  #more-scores {
+    position: absolute;
+    @include desktop-only {
+      margin-left: 50px;
+      left: 0;
+    }
+    @include mobile-only {
+      right: 0;
+    }
+  }
+
+  #latest-scores {
+    @include mobile-only {
+      text-align: left;
+    }
+  }
 
   div.match {
     padding: 5px 0;
@@ -108,6 +143,9 @@
 
     div.game.headings.single {
       margin-left: -35px;
+      @include mobile-only {
+        margin-left: -15px;
+      }
     }
   }
 }
diff --git a/_sass/comp/points.scss b/_sass/comp/points.scss
@@ -1,6 +1,5 @@
 .comp-points #content {
   #match-chooser {
-    float: right;
     margin-left: 50px;
 
     input {

diff --git a/_sass/comp/team.scss b/_sass/comp/team.scss
@@ -1,10 +1,6 @@
 @import "../brand/sass/srobo/variables/index";
 
 .comp-team #content {
-  #team-chooser {
-    float: right;
-  }
-
   #per-team-details {
     text-align: center;
   }

diff --git a/comp/index.html b/comp/index.html
@@ -9,13 +9,15 @@
 -->
 
 {% if site.youtube_stream_link %}
-  <div id="live-stream-wrapper" class="panel">
-    <iframe width="760"
-        height="427"
-        src="{{ site.youtube_stream_link }}"
-        frameborder="0"
-        allowfullscreen>
-    </iframe>
+  <div class="panel">
+    <div id="live-stream-wrapper">
+      <iframe width="760"
+          height="427"
+          src="{{ site.youtube_stream_link }}"
+          frameborder="0"
+          allowfullscreen>
+      </iframe>
+    </div>
   </div>
 {% endif %}
 
@@ -25,10 +27,10 @@
     <div id="match-info">
 
       <div class="scored match" style="position:relative;margin-top:10px;">
-        <span style="position:absolute;margin-left:50px;left:0">
-          <a href="{{ site.baseurl }}/comp/points">more scores&hellip;</a>
+        <span id="more-scores">
+          <a href="{{ site.baseurl }}/comp/points">more<span class="desktop-only"> scores</span>&hellip;</a>
         </span>
-        <h4>
+        <h4 id="latest-scores">
           Latest Scores<span data-ng-if="previous_match.exists">: [[ previous_match.display_name ]]</span>
         </h4>
         <p data-ng-if="!previous_match.exists">No scores yet recorded.</p>

diff --git a/comp/points.html b/comp/points.html
@@ -14,7 +14,7 @@
 
 <h1>Match Points</h1>
 
-<div id="match-chooser">
+<div id="match-chooser" class="floated-chooser">
     <!--- NB: local width style as otherwise Select2 doesn't get it right -->
     <select data-ng-model="$storage.chosenTeam"
             data-ui-select2

diff --git a/comp/team.html b/comp/team.html
@@ -6,7 +6,7 @@
 
 <h1>Team Information</h1>
 
-<div id="team-chooser">
+<div id="team-chooser" class="floated-chooser">
     <!--- NB: local width style as otherwise Select2 doesn't get it right -->
     <select data-ng-model="$storage.chosenTeam"
             data-placeholder="Choose a team"