Improve small scale styling a litle

Extract lecture actions into its own partial and add course homepage link
Add started text to table
2023-10-26 14:49:40 +01:00 · 2023-10-26 14:28:32 +01:00 · 2023-10-26 14:21:33 +01:00 · 2023-10-26 12:06:06 +01:00
9 changed files with 167 additions and 139 deletions
--- 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;
+    }
+}
--- a/app/controllers/attendance_tracker_controller.rb
+++ b/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
--- a/app/lib/toggl.rb
+++ b/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",
--- a/app/views/attendance_tracker/_course_table.erb
+++ b/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>
--- a/app/views/attendance_tracker/_lecture_action.html.erb
+++ b/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 %>
--- a/app/views/attendance_tracker/course_focus.erb
+++ b/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>
--- a/app/views/attendance_tracker/course_focus.html.erb
+++ b/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>
--- a/app/views/attendance_tracker/today.html.erb
+++ b/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-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-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="<%= 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>
+        <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">
-                  <% 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 class="whitespace-nowrap text-sm font-medium text-gray-900">
+            <%= render partial: 'lecture_action', locals: { lecture: } %>
          </div>
        </div>
-      </div>
+      <% end %>
    </div>
  </div>
 </div>
--- 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],
      },
Author	SHA1	Message	Date
Joshua Coles	a0e526662b	Improve small scale styling a litle All checks were successful Build and Publish Docker Container / build (push) Successful in 5m15s Details	2023-10-26 14:49:40 +01:00
Joshua Coles	9d9d920eef	Extract lecture actions into its own partial and add course homepage link	2023-10-26 14:28:32 +01:00
Joshua Coles	b0d134fabd	Add started text to table	2023-10-26 14:21:33 +01:00
Joshua Coles	9c6dea41f1	Extract course table to partial	2023-10-26 12:06:06 +01:00