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

18
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; @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 { @media (min-width: 640px) {
.btn-primary { .today-table-grid {
@apply py-2 px-4 bg-blue-200; 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;
}
}

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

@ -1,12 +1,9 @@
<h1 class="text-3xl font-medium">Today</h1> <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="-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="overflow-hidden shadow ring-1 ring-black ring-opacity-5 rounded-lg">
<div class="divide-y divide-gray-300 w-full"> <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 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>Course</div>
<div>Lecture</div> <div>Lecture</div>
<div>Status</div> <div>Status</div>
@ -20,7 +17,7 @@
'bg-green-100': lecture.attended?, 'bg-green-100': lecture.attended?,
}) %> }) %>
<div class="px-6 py-4 flex justify-between items-center grid grid-cols-4 <%= status_classes %>"> <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>
@ -40,7 +37,4 @@
<% end %> <% end %>
</div> </div>
</div> </div>
</div>
</div>
</div>
</div> </div>

3
config/tailwind.config.js
View File

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