personal/lecture-attendance-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve small scale styling a litle
All checks were successful
Build and Publish Docker Container / build (push) Successful in 5m15s
Details

Browse Source
This commit is contained in:
Joshua Coles 2023-10-26 14:49:40 +01:00
parent 9d9d920eef
commit a0e526662b
3 changed files with 46 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
app/assets/stylesheets/application.tailwind.css
View File

@ -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;
}
}

62
app/views/attendance_tracker/today.html.erb
View File

@ -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>

3
config/tailwind.config.js
View File

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