diff --git a/Dockerfile b/Dockerfile index b040554..b916f9c 100644 --- a/Dockerfile +++ b/Dockerfile @@ -6,7 +6,7 @@ RUN npm install && \ FROM python:3.10-slim-bullseye -ENV VERSION_NUMBER 0.1.0-35-g2807c5e +ENV VERSION_NUMBER 0.1.0-36-ge6b5804 ENV PROD 1 RUN useradd --create-home --uid 1000 timetracker diff --git a/src/input.css b/src/input.css index c5dd3d1..e0e71c1 100644 --- a/src/input.css +++ b/src/input.css @@ -3,13 +3,20 @@ @tailwind utilities; form label { - @apply dark:text-slate-400; + @apply dark:text-slate-400; } -form input,select,textarea { - @apply dark:bg-slate-500 dark:border dark:border-slate-900 dark:text-slate-100; +form input, +select, +textarea { + @apply dark:border dark:border-slate-900 dark:bg-slate-500 dark:text-slate-100; } -form input[type=submit] { - @apply p-2 bg-purple-900; -} \ No newline at end of file +#session-table { + display: grid; + grid-template-columns: repeat(3, 2fr) 0.5fr 1fr; +} + +#button-container button { + @apply mx-1; +} diff --git a/src/web/tracker/static/base.css b/src/web/tracker/static/base.css index 57e7241..6ea24a9 100644 --- a/src/web/tracker/static/base.css +++ b/src/web/tracker/static/base.css @@ -750,8 +750,12 @@ select { display: flex; } -.grid { - display: grid; +.h-4 { + height: 1rem; +} + +.h-5 { + height: 1.25rem; } .min-h-screen { @@ -762,12 +766,20 @@ select { width: 100%; } -.max-w-screen-lg { - max-width: 1024px; +.w-7 { + width: 1.75rem; } -.grid-cols-5 { - grid-template-columns: repeat(5, minmax(0, 1fr)); +.w-4 { + width: 1rem; +} + +.w-5 { + width: 1.25rem; +} + +.max-w-screen-lg { + max-width: 1024px; } .flex-col { @@ -782,6 +794,10 @@ select { align-items: center; } +.justify-end { + justify-content: flex-end; +} + .justify-center { justify-content: center; } @@ -810,8 +826,8 @@ select { border-radius: 0.75rem; } -.border { - border-width: 1px; +.rounded-lg { + border-radius: 0.5rem; } .border-gray-200 { @@ -819,19 +835,24 @@ select { border-color: rgb(229 231 235 / var(--tw-border-opacity)); } -.border-red-900 { - --tw-border-opacity: 1; - border-color: rgb(127 29 29 / var(--tw-border-opacity)); -} - .bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.bg-red-700 { +.bg-green-600 { --tw-bg-opacity: 1; - background-color: rgb(185 28 28 / var(--tw-bg-opacity)); + background-color: rgb(22 163 74 / var(--tw-bg-opacity)); +} + +.bg-blue-600 { + --tw-bg-opacity: 1; + background-color: rgb(37 99 235 / var(--tw-bg-opacity)); +} + +.bg-red-600 { + --tw-bg-opacity: 1; + background-color: rgb(220 38 38 / var(--tw-bg-opacity)); } .p-4 { @@ -842,15 +863,21 @@ select { padding: 0.5rem; } -.p-1 { - padding: 0.25rem; -} - .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } +.py-1 { + padding-top: 0.25rem; + padding-bottom: 0.25rem; +} + +.px-2 { + padding-left: 0.5rem; + padding-right: 0.5rem; +} + .pl-3 { padding-left: 0.75rem; } @@ -863,6 +890,10 @@ select { text-align: center; } +.text-right { + text-align: right; +} + .text-4xl { font-size: 2.25rem; line-height: 2.5rem; @@ -883,9 +914,9 @@ select { line-height: 1.75rem; } -.text-sm { - font-size: 0.875rem; - line-height: 1.25rem; +.text-base { + font-size: 1rem; + line-height: 1.5rem; } .font-semibold { @@ -902,18 +933,47 @@ select { color: rgb(203 213 225 / var(--tw-text-opacity)); } +.text-red-400 { + --tw-text-opacity: 1; + color: rgb(248 113 113 / var(--tw-text-opacity)); +} + .shadow { --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +.transition { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.duration-200 { + transition-duration: 200ms; +} + +.ease-in { + transition-timing-function: cubic-bezier(0.4, 0, 1, 1); +} + .dark form label { --tw-text-opacity: 1; color: rgb(148 163 184 / var(--tw-text-opacity)); } -.dark form input,.dark select,.dark textarea { +.dark form input,.dark +select,.dark +textarea { border-width: 1px; --tw-border-opacity: 1; border-color: rgb(15 23 42 / var(--tw-border-opacity)); @@ -923,30 +983,69 @@ select { color: rgb(241 245 249 / var(--tw-text-opacity)); } -form input[type=submit] { +#session-table { + display: grid; + grid-template-columns: repeat(3, 2fr) 0.5fr 1fr; +} + +#button-container button { + margin-left: 0.25rem; + margin-right: 0.25rem; +} + +.hover\:bg-green-700:hover { --tw-bg-opacity: 1; - background-color: rgb(88 28 135 / var(--tw-bg-opacity)); - padding: 0.5rem; + background-color: rgb(21 128 61 / var(--tw-bg-opacity)); } -.hover\:border-dotted:hover { - border-style: dotted; -} - -.hover\:border-white:hover { - --tw-border-opacity: 1; - border-color: rgb(255 255 255 / var(--tw-border-opacity)); -} - -.hover\:bg-orange-700:hover { +.hover\:bg-blue-700:hover { --tw-bg-opacity: 1; - background-color: rgb(194 65 12 / var(--tw-bg-opacity)); + background-color: rgb(29 78 216 / var(--tw-bg-opacity)); +} + +.hover\:bg-red-700:hover { + --tw-bg-opacity: 1; + background-color: rgb(185 28 28 / var(--tw-bg-opacity)); } .hover\:underline:hover { text-decoration-line: underline; } +.focus\:outline-none:focus { + outline: 2px solid transparent; + outline-offset: 2px; +} + +.focus\:ring-2:focus { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + +.focus\:ring-green-500:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity)); +} + +.focus\:ring-blue-500:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity)); +} + +.focus\:ring-red-500:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity)); +} + +.focus\:ring-offset-2:focus { + --tw-ring-offset-width: 2px; +} + +.focus\:ring-offset-blue-200:focus { + --tw-ring-offset-color: #bfdbfe; +} + .dark .dark\:border-white { --tw-border-opacity: 1; border-color: rgb(255 255 255 / var(--tw-border-opacity)); @@ -999,4 +1098,4 @@ form input[type=submit] { .md\:flex-row { flex-direction: row; } -} \ No newline at end of file +} diff --git a/src/web/tracker/templates/list_sessions.html b/src/web/tracker/templates/list_sessions.html index a2f8dfd..b20df2b 100644 --- a/src/web/tracker/templates/list_sessions.html +++ b/src/web/tracker/templates/list_sessions.html @@ -3,34 +3,55 @@ {% block title %}Sessions{% endblock title %} {% block content %} -{% if purchase %} -
-

Listing sessions only for purchase "{{ purchase }}"

- View all sessions -
-{% endif %} -
-
Name
-
Start
-
End
-
Duration
-
- {% for data in dataset %} -
{{ data.purchase }}
-
{{ data.timestamp_start | date:"d/m/Y H:i" }}
-
- {% if data.unfinished %} - Not finished yet. - {% elif data.duration_manual %} - MANUAL - {% else %} - {{ data.timestamp_end | date:"d/m/Y H:i" }} - {% endif %} + {% if purchase %} +
+

Listing sessions only for purchase "{{ purchase }}"

+ View all sessions +
+ {% endif %} +
+
Name
+
Start
+
End
+
Duration
+
Manage
+ {% for data in dataset %} +
{{ data.purchase }}
+
{{ data.timestamp_start | date:"d/m/Y H:i" }}
+
+ {% if data.unfinished %} + Not finished yet. + {% elif data.duration_manual %} + -- + {% else %} + {{ data.timestamp_end | date:"d/m/Y H:i" }} + {% endif %} +
+
{{ data.duration_formatted }}{% if data.duration_manual %} (M){% endif %}
+
+ {% if data.unfinished %} + + + + {% endif %} + + + + +
+ {% endfor %}
-
{{ data.duration_formatted }}{% if data.duration_manual %} (M){% endif %}
-
- -
- {% endfor %} -
{% endblock content %} \ No newline at end of file