app/assets/stylesheets/application.tailwind.css

@@ -6,20 +6,12 @@
     @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;
-}
 
-@media (min-width: 640px) {
+@layer components {
-    .today-table-grid {
+  .btn-primary {
-        grid-template-columns: 2fr repeat(3, 1fr);
+    @apply py-2 px-4 bg-blue-200;
   }
 }
 
-@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,39 +1,16 @@
 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,11 +1,4 @@
 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

@@ -1,42 +0,0 @@
-<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

@@ -1,27 +0,0 @@
-<% 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

@@ -0,0 +1,75 @@
+<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

@@ -1,21 +0,0 @@
-<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,9 +1,12 @@
 <h1 class="text-3xl font-medium">Today</h1>
 
-<div class="mt-4 py-2 w-full">
+<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 today-table-grid">
+            <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>
@@ -13,11 +16,10 @@
             <% @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 today-table-grid gap-2 <%= status_classes %>">
+              <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.course.title %>
                 </div>
@@ -31,10 +33,36 @@
                 </div>
 
                 <div class="whitespace-nowrap text-sm font-medium text-gray-900">
-            <%= render partial: 'lecture_action', locals: { lecture: } %>
+                  <% 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 %>
+                    <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>
+    </div>
+  </div>
 </div>

config/tailwind.config.js

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