From a0e526662bfe5d0c5ed58c02006c6e6b52edee1e Mon Sep 17 00:00:00 2001
From: Joshua Coles <josh@coles.to>
Date: Thu, 26 Oct 2023 14:49:40 +0100
Subject: [PATCH] Improve small scale styling a litle

---
 .../stylesheets/application.tailwind.css      | 22 ++++---
 app/views/attendance_tracker/today.html.erb   | 62 +++++++++----------
 config/tailwind.config.js                     |  3 +
 3 files changed, 46 insertions(+), 41 deletions(-)

diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css
index c6f38c5..5b3f79b 100644
--- a/app/assets/stylesheets/application.tailwind.css
+++ b/app/assets/stylesheets/application.tailwind.css
@@ -6,12 +6,20 @@
     @apply rounded bg-indigo-600 px-2 py-1 font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600;
 }
 
-/*
-
-@layer components {
-  .btn-primary {
-    @apply py-2 px-4 bg-blue-200;
-  }
+.today-table-grid {
+    display: grid;
 }
 
-*/
+@media (min-width: 640px) {
+    .today-table-grid {
+        grid-template-columns: 2fr repeat(3, 1fr);
+    }
+}
+
+@media (min-width: 480px) and (max-width: 639px) {
+    .today-table-grid {
+        grid-template-rows: 1fr 1fr;
+        grid-template-columns: 1fr 1fr;
+        grid-auto-flow: column;
+    }
+}
diff --git a/app/views/attendance_tracker/today.html.erb b/app/views/attendance_tracker/today.html.erb
index cafe8ae..894c501 100644
--- a/app/views/attendance_tracker/today.html.erb
+++ b/app/views/attendance_tracker/today.html.erb
@@ -1,46 +1,40 @@
 <h1 class="text-3xl font-medium">Today</h1>
 
-<div class="flex flex-col gap-4">
-  <div class="mt-8 flow-root">
-    <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
-      <div class="inline-block py-2 align-middle px-6 lg:px-8 w-full">
-        <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 rounded-lg">
-          <div class="divide-y divide-gray-300 w-full">
-            <div class="flex py-3.5 justify-between bg-gray-50 text-left text-sm font-semibold text-gray-900 px-6 grid grid-cols-4">
-              <div>Course</div>
-              <div>Lecture</div>
-              <div>Status</div>
-              <div>Action</div>
-            </div>
+<div class="mt-4 py-2 w-full">
+  <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 rounded-lg">
+    <div class="divide-y divide-gray-300 w-full">
+      <div class="flex py-3.5 justify-between bg-gray-50 text-left text-sm font-semibold text-gray-900 px-6 grid today-table-grid">
+        <div>Course</div>
+        <div>Lecture</div>
+        <div>Status</div>
+        <div>Action</div>
+      </div>
 
-            <% @lectures.each do |lecture| %>
-              <% status_classes = class_names({
-                                                'lecture-future': lecture.start_time.future?,
-                                                'bg-purple-100': lecture == @current_lecture,
-                                                'bg-green-100': lecture.attended?,
-                                              }) %>
+      <% @lectures.each do |lecture| %>
+        <% status_classes = class_names({
+                                          'lecture-future': lecture.start_time.future?,
+                                          'bg-purple-100': lecture == @current_lecture,
+                                          'bg-green-100': lecture.attended?,
+                                        }) %>
 
-              <div class="px-6 py-4 flex justify-between items-center grid grid-cols-4 <%= status_classes %>">
-                <div class="whitespace-nowrap text-sm font-medium text-gray-900">
-                  <%= lecture.course.title %>
-                </div>
+        <div class="px-6 py-4 flex justify-between items-center grid today-table-grid gap-2 <%= status_classes %>">
+          <div class="whitespace-nowrap text-sm font-medium text-gray-900">
+            <%= lecture.course.title %>
+          </div>
 
-                <div class="whitespace-nowrap text-sm font-medium text-gray-900">
-                  <%= lecture.title %>
-                </div>
+          <div class="whitespace-nowrap text-sm font-medium text-gray-900">
+            <%= lecture.title %>
+          </div>
 
-                <div class="whitespace-nowrap text-sm font-medium text-gray-900" data-controller="popover" data-action="mouseenter->popover#show mouseleave->popover#hide">
-                  <%= render partial: 'lecture_status_icons', locals: { lecture: } %>
-                </div>
+          <div class="whitespace-nowrap text-sm font-medium text-gray-900" data-controller="popover" data-action="mouseenter->popover#show mouseleave->popover#hide">
+            <%= render partial: 'lecture_status_icons', locals: { lecture: } %>
+          </div>
 
-                <div class="whitespace-nowrap text-sm font-medium text-gray-900">
-                  <%= render partial: 'lecture_action', locals: { lecture: } %>
-                </div>
-              </div>
-            <% end %>
+          <div class="whitespace-nowrap text-sm font-medium text-gray-900">
+            <%= render partial: 'lecture_action', locals: { lecture: } %>
           </div>
         </div>
-      </div>
+      <% end %>
     </div>
   </div>
 </div>
diff --git a/config/tailwind.config.js b/config/tailwind.config.js
index 39364de..9102b9e 100644
--- a/config/tailwind.config.js
+++ b/config/tailwind.config.js
@@ -9,6 +9,9 @@ module.exports = {
   ],
   theme: {
     extend: {
+      screens: {
+        'xs': '320px',
+      },
       fontFamily: {
         sans: ['Inter var', ...defaultTheme.fontFamily.sans],
       },