Improve small scale styling a litle

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;
 }
 
-/*
+.today-table-grid {
-
+    display: grid;
-@layer components {
-  .btn-primary {
-    @apply py-2 px-4 bg-blue-200;
-  }
 }
 
-*/
+@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;
+    }
+}

app/controllers/attendance_tracker_controller.rb

@@ -1,16 +1,39 @@
 class AttendanceTrackerController < ApplicationController
   def index
     @courses = Course.all.sort_by(&:title)
+    @current_lecture = get_current_lecture
   end
 
   def today
     @courses = Course.all.sort_by(&:title)
     @date = Date.today
-
+    @current_lecture = get_current_lecture
     @lectures = @courses.flat_map { |course| course.lectures.filter { |a| a.start_time.today? } }.sort_by { |l| l.start_time }
   end
 
   def course_focus
     @course = Course.find(params[:id])
+    @current_lecture = get_current_lecture
+  end
+
+  private
+
+  def get_current_lecture
+    current_time_entry = Toggl.current_time_entry
+    return nil if current_time_entry.nil?
+
+    lecture = Lecture
+                .joins(:course)
+                .find_by(title: current_time_entry['description'], course: { toggl_project: current_time_entry['project_id'] })
+
+    return lecture if lecture.present?
+
+    start_time = Time.new(current_time_entry['start'])
+    lecture = Lecture.joins(:course)
+                     .find_by(start_time: (start_time - 10.minutes)..(start_time + 10.minutes), course: { toggl_project: current_time_entry['project_id'] })
+
+    return lecture if lecture.present?
+
+    nil
   end
 end

app/lib/toggl.rb

@@ -1,4 +1,11 @@
 module Toggl
+  def self.current_time_entry
+    JSON.parse(HTTParty.get(
+      "#{TOGGL_PORTAL_URL}/current",
+      headers: { 'Accept' => 'application/json' }
+    ).body)
+  end
+
   def self.entries_for_project(toggl_project_id, start_time:, end_time:)
     JSON.parse(HTTParty.post(
       "#{TOGGL_PORTAL_URL}/report",

app/views/attendance_tracker/_course_table.erb

@@ -0,0 +1,42 @@
+<div class="divide-y divide-gray-300 w-full">
+  <div class="py-3.5 justify-between bg-gray-50 text-left text-sm font-semibold text-gray-900 px-6 grid grid-cols-4">
+    <div>Lecture</div>
+    <div>Status</div>
+    <div>Action</div>
+    <div>Recording</div>
+  </div>
+
+  <% course.lectures.sort_by(&:start_time).group_by(&:week_number).each do |(week_number, lectures)| %>
+    <div class="py-3.5 bg-gray-50 text-left text-sm font-semibold text-gray-900 px-6 grid grid-cols-4">
+      Week <%= week_number %>
+    </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?,
+                                      }) %>
+
+      <div class="<%= status_classes %> px-6 py-4 flex justify-between items-center grid grid-cols-4">
+        <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">
+          <%= render partial: 'lecture_action', locals: { lecture: } %>
+        </div>
+
+        <div class="whitespace-nowrap text-sm font-medium text-gray-900">
+          <% if lecture.recording %>
+            <%= link_to "Open recording", lecture.recording&.recording_url %>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+  <% end %>
+</div>

app/views/attendance_tracker/_lecture_action.html.erb

@@ -0,0 +1,27 @@
+<% joinable_time = lecture.start_time - 5.minutes %>
+
+<% if lecture == @current_lecture %>
+  <div class="py-1">
+    Started
+  </div>
+<% elsif joinable_time.future? %>
+  <%= button_to "Prepare",
+                lecture_start_preparation_path(id: lecture.id),
+                class: 'action-button'
+  %>
+<% elsif joinable_time.past? && !lecture.attended? %>
+  <% start_label = if lecture.is_live? then
+                     "Join"
+                   else
+                     "Start"
+                   end %>
+  <%= button_to start_label,
+                lectures_start_path(id: lecture.id),
+                class: 'action-button'
+  %>
+<% else %>
+  <%= button_to "Review",
+                lecture_start_review_path(id: lecture.id),
+                class: 'action-button'
+  %>
+<% end %>

app/views/attendance_tracker/course_focus.erb

@@ -1,75 +0,0 @@
-<h1 class="text-3xl font-medium"><%= @course.title %></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="py-3.5 justify-between bg-gray-50 text-left text-sm font-semibold text-gray-900 px-6 grid grid-cols-4">
-              <div>Lecture</div>
-              <div>Status</div>
-              <div>Action</div>
-              <div>Recording</div>
-            </div>
-
-            <% @course.lectures.sort_by(&:start_time).group_by(&:week_number).each do |(week_number, lectures)| %>
-              <div class="py-3.5 bg-gray-50 text-left text-sm font-semibold text-gray-900 px-6 grid grid-cols-4">
-                Week <%= week_number %>
-              </div>
-
-              <% lectures.each do |lecture| %>
-                <% status_classes = class_names({
-                                                  'lecture-future': lecture.start_time.future?,
-                                                  'bg-green-100': lecture.attended?,
-                                                }) %>
-
-                <div class="<%= status_classes %> px-6 py-4 flex justify-between bg-white items-center grid grid-cols-4">
-                  <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">
-                    <% joinable_time = lecture.start_time - 5.minutes %>
-
-                    <% if joinable_time.future? %>
-                      <%= button_to "Prepare",
-                                    lecture_start_preparation_path(id: lecture.id),
-                                    class: 'action-button'
-                      %>
-                    <% elsif joinable_time.past? && !lecture.attended? %>
-                      <% start_label = if lecture.is_live? then
-                                         "Join"
-                                       else
-                                         "Start"
-                                       end %>
-                      <%= button_to start_label,
-                                    lectures_start_path(id: lecture.id),
-                                    class: 'action-button'
-                      %>
-                    <% else %>
-                      <%= button_to "Review",
-                                    lecture_start_review_path(id: lecture.id),
-                                    class: 'action-button'
-                      %>
-                    <% end %>
-                  </div>
-
-                  <div class="whitespace-nowrap text-sm font-medium text-gray-900">
-                    <% if lecture.recording %>
-                      <%= link_to "Open recording", lecture.recording&.recording_url %>
-                    <% end %>
-                  </div>
-                </div>
-              <% end %>
-            <% end %>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>

app/views/attendance_tracker/course_focus.html.erb

@@ -0,0 +1,21 @@
+<div class="flex flex-row gap-2 items-center">
+  <h1 class="text-3xl font-medium"><%= @course.title %></h1>
+
+  <% if @course.homepage.present? %>
+    <a class="align-middle" href="<%= @course.homepage %>">
+      <i class="fa fa-link text-blue-600"></i>
+    </a>
+  <% end %>
+</div>
+
+<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">
+          <%= render partial: 'course_table', locals: { course: @course, current_lecture: @current_lecture } %>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

app/views/attendance_tracker/today.html.erb

@@ -1,68 +1,40 @@
 <h1 class="text-3xl font-medium">Today</h1>
 
-<div class="flex flex-col gap-4">
+<div class="mt-4 py-2 w-full">
-  <div class="mt-8 flow-root">
+  <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 rounded-lg">
-    <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+    <div class="divide-y divide-gray-300 w-full">
-      <div class="inline-block py-2 align-middle px-6 lg:px-8 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 class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 rounded-lg">
+        <div>Course</div>
-          <div class="divide-y divide-gray-300 w-full">
+        <div>Lecture</div>
-            <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>Status</div>
-              <div>Course</div>
+        <div>Action</div>
-              <div>Lecture</div>
+      </div>
-              <div>Status</div>
-              <div>Action</div>
-            </div>
 
-            <% @lectures.each do |lecture| %>
+      <% @lectures.each do |lecture| %>
-              <% status_classes = class_names({
+        <% status_classes = class_names({
-                                                'lecture-future': lecture.start_time.future?,
+                                          'lecture-future': lecture.start_time.future?,
-                                                'bg-green-100': lecture.attended?,
+                                          'bg-purple-100': lecture == @current_lecture,
-                                              }) %>
+                                          'bg-green-100': lecture.attended?,
+                                        }) %>
 
-              <div class="<%= status_classes %> px-6 py-4 flex justify-between bg-white items-center grid grid-cols-4">
+        <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">
+          <div class="whitespace-nowrap text-sm font-medium text-gray-900">
-                  <%= lecture.course.title %>
+            <%= lecture.course.title %>
-                </div>
+          </div>
 
-                <div class="whitespace-nowrap text-sm font-medium text-gray-900">
+          <div class="whitespace-nowrap text-sm font-medium text-gray-900">
-                  <%= lecture.title %>
+            <%= lecture.title %>
-                </div>
+          </div>
 
-                <div class="whitespace-nowrap text-sm font-medium text-gray-900" data-controller="popover" data-action="mouseenter->popover#show mouseleave->popover#hide">
+          <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: } %>
+            <%= render partial: 'lecture_status_icons', locals: { lecture: } %>
-                </div>
+          </div>
 
-                <div class="whitespace-nowrap text-sm font-medium text-gray-900">
+          <div class="whitespace-nowrap text-sm font-medium text-gray-900">
-                  <% joinable_time = lecture.start_time - 5.minutes %>
+            <%= render partial: 'lecture_action', locals: { lecture: } %>
-                  <% if joinable_time.future? %>
-                    <%= button_to "Prepare",
-                                  lecture_start_preparation_path(id: lecture.id),
-                                  class: 'action-button'
-                    %>
-                  <% elsif joinable_time.past? && !lecture.attended? %>
-                    <% start_label = if lecture.is_live? then
-                                       "Join"
-                                     else
-                                       "Start"
-                                     end %>
-                    <%= button_to start_label,
-                                  lectures_start_path(id: lecture.id),
-                                  class: 'action-button'
-                    %>
-                  <% else %>
-                    <div class="flex justify-center">
-                      <%= button_to "Review",
-                                    lecture_start_review_path(id: lecture.id),
-                                    class: 'action-button'
-                      %>
-                    </div>
-                  <% end %>
-                </div>
-              </div>
-            <% end %>
           </div>
         </div>
-      </div>
+      <% end %>
     </div>
   </div>
 </div>

config/tailwind.config.js

@@ -9,6 +9,9 @@ module.exports = {
   ],
   theme: {
     extend: {
+      screens: {
+        'xs': '320px',
+      },
       fontFamily: {
         sans: ['Inter var', ...defaultTheme.fontFamily.sans],
       },