Better handling of mobile.

electionscience · Jun 12, 2024 · 6f1530c · 6f1530c
1 parent 5c247eb
commit 6f1530c
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 9 deletions.
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -45,20 +45,21 @@
                 </h3>
               </div>
               {#each election.contests as contest}
-                <div class="race">
-                  <a href="{base}/report/{election.path}/{contest.office}">
+              <div class="race">
+                <a href="{base}/report/{election.path}/{contest.office}">
+                  <div class="race-content">
                     <div class="title">
                       <strong>{contest.officeName}</strong>
                       {#each contest.winners as winner, i}
                         <span class="winner">{winner}{i == contest.winners.length-1 ? '' : ', '}</span>
                       {/each}
                     </div>
                     <div class="meta">
-                      <strong>{contest.numCandidates}</strong>
-                      candidates
+                      <strong>{contest.numCandidates}</strong> candidates
                     </div>
-                  </a>
-                </div>
+                  </div>
+                </a>
+              </div>
               {/each}
             {/each}
           </div>

diff --git a/static/style.css b/static/style.css
@@ -143,21 +143,40 @@ h3 strong {
   flex: 1;
 }
 
+.race {
+  margin-bottom: 1rem;
+}
+
 .race a {
-  display: flex;
+  display: block;
   color: #555555;
+  text-decoration: none;
   padding: 0.3125rem; /* 5px to rem */
   margin: 0 -0.3125rem; /* 5px to rem */
-  text-decoration: none;
 }
 
 .race a:hover {
   background: #eee;
 }
 
+.race-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.title {
+  flex: 1;
+  margin-right: 1rem;
+}
+
+.meta {
+  white-space: nowrap;
+}
+
 .race a .meta {
   text-align: right;
-  flex: 1;
+  flex-shrink: 0;
 }
 
 .race a .title strong {
@@ -168,3 +187,9 @@ hr {
   border: none;
   border-bottom: 1px dotted #ddd;
 }
+
+@media (max-width: 767px) {
+  .title .winner {
+    display: block;
+  }
+}