From 370b16f4156ccdc9956dedc00e5dfb6106380d9d Mon Sep 17 00:00:00 2001 From: Matthew Lemon Date: Wed, 4 Sep 2024 12:07:17 +0100 Subject: UI changes - ripped out more w3 stuff - better login page template - redirects to home after successful login --- conf/settings/base.py | 2 + core/static/css/output.css | 1147 +++----------------- core/static/css/styles.css | 53 - core/templates/core/base.html | 13 - core/templates/registration/login.html | 101 +- templates/w3/accordion-group.html | 17 - templates/w3/accordion.html | 3 - templates/w3/betterform.html | 21 - templates/w3/display_form.html | 9 - templates/w3/errors.html | 8 - templates/w3/errors_formset.html | 8 - templates/w3/field.html | 81 -- templates/w3/inputs.html | 13 - templates/w3/layout/alert.html | 4 - templates/w3/layout/attrs.html | 1 - templates/w3/layout/baseinput.html | 9 - templates/w3/layout/button.html | 1 - templates/w3/layout/buttonholder.html | 4 - templates/w3/layout/checkboxselectmultiple.html | 29 - .../w3/layout/checkboxselectmultiple_inline.html | 14 - templates/w3/layout/column.html | 4 - templates/w3/layout/div.html | 4 - templates/w3/layout/field_errors.html | 5 - templates/w3/layout/field_errors_block.html | 5 - templates/w3/layout/field_file.html | 52 - templates/w3/layout/field_with_buttons.html | 17 - templates/w3/layout/fieldset.html | 6 - templates/w3/layout/formactions.html | 9 - templates/w3/layout/help_text.html | 7 - templates/w3/layout/help_text_and_errors.html | 13 - templates/w3/layout/inline_field.html | 29 - templates/w3/layout/modal.html | 15 - templates/w3/layout/multifield.html | 27 - templates/w3/layout/prepended_appended_text.html | 51 - templates/w3/layout/radioselect.html | 29 - templates/w3/layout/radioselect_inline.html | 14 - templates/w3/layout/row.html | 3 - templates/w3/layout/tab-link.html | 1 - templates/w3/layout/tab.html | 6 - templates/w3/layout/uneditable_input.html | 14 - templates/w3/table_inline_formset.html | 57 - templates/w3/uni_form.html | 11 - templates/w3/uni_formset.html | 8 - templates/w3/whole_uni_form.html | 14 - templates/w3/whole_uni_formset.html | 30 - 45 files changed, 221 insertions(+), 1748 deletions(-) delete mode 100644 core/static/css/styles.css delete mode 100644 templates/w3/accordion-group.html delete mode 100644 templates/w3/accordion.html delete mode 100644 templates/w3/betterform.html delete mode 100644 templates/w3/display_form.html delete mode 100644 templates/w3/errors.html delete mode 100644 templates/w3/errors_formset.html delete mode 100644 templates/w3/field.html delete mode 100644 templates/w3/inputs.html delete mode 100644 templates/w3/layout/alert.html delete mode 100644 templates/w3/layout/attrs.html delete mode 100644 templates/w3/layout/baseinput.html delete mode 100644 templates/w3/layout/button.html delete mode 100644 templates/w3/layout/buttonholder.html delete mode 100644 templates/w3/layout/checkboxselectmultiple.html delete mode 100644 templates/w3/layout/checkboxselectmultiple_inline.html delete mode 100644 templates/w3/layout/column.html delete mode 100644 templates/w3/layout/div.html delete mode 100644 templates/w3/layout/field_errors.html delete mode 100644 templates/w3/layout/field_errors_block.html delete mode 100644 templates/w3/layout/field_file.html delete mode 100644 templates/w3/layout/field_with_buttons.html delete mode 100644 templates/w3/layout/fieldset.html delete mode 100644 templates/w3/layout/formactions.html delete mode 100644 templates/w3/layout/help_text.html delete mode 100644 templates/w3/layout/help_text_and_errors.html delete mode 100644 templates/w3/layout/inline_field.html delete mode 100644 templates/w3/layout/modal.html delete mode 100644 templates/w3/layout/multifield.html delete mode 100644 templates/w3/layout/prepended_appended_text.html delete mode 100644 templates/w3/layout/radioselect.html delete mode 100644 templates/w3/layout/radioselect_inline.html delete mode 100644 templates/w3/layout/row.html delete mode 100644 templates/w3/layout/tab-link.html delete mode 100644 templates/w3/layout/tab.html delete mode 100644 templates/w3/layout/uneditable_input.html delete mode 100644 templates/w3/table_inline_formset.html delete mode 100644 templates/w3/uni_form.html delete mode 100644 templates/w3/uni_formset.html delete mode 100644 templates/w3/whole_uni_form.html delete mode 100644 templates/w3/whole_uni_formset.html diff --git a/conf/settings/base.py b/conf/settings/base.py index fb9b658..5f7301c 100644 --- a/conf/settings/base.py +++ b/conf/settings/base.py @@ -51,6 +51,7 @@ INSTALLED_APPS = [ "django.contrib.messages", "django.contrib.staticfiles", "django_htmx", + "widget_tweaks", # "debug_toolbar", ] @@ -79,6 +80,7 @@ ROOT_URLCONF = "ded.urls" # new auth user AUTH_USER_MODEL = "myuser.TeamUser" +LOGIN_REDIRECT_URL = "/" TEMPLATES = [ { diff --git a/core/static/css/output.css b/core/static/css/output.css index e25155d..1be34cb 100644 --- a/core/static/css/output.css +++ b/core/static/css/output.css @@ -825,36 +825,6 @@ html { } } -.alert { - display: grid; - width: 100%; - grid-auto-flow: row; - align-content: flex-start; - align-items: center; - justify-items: center; - gap: 1rem; - text-align: center; - border-radius: var(--rounded-box, 1rem); - border-width: 1px; - --tw-border-opacity: 1; - border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity))); - padding: 1rem; - --tw-text-opacity: 1; - color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); - --alert-bg: var(--fallback-b2,oklch(var(--b2)/1)); - --alert-bg-mix: var(--fallback-b1,oklch(var(--b1)/1)); - background-color: var(--alert-bg); -} - -@media (min-width: 640px) { - .alert { - grid-auto-flow: column; - grid-template-columns: auto minmax(auto,1fr); - justify-items: start; - text-align: start; - } -} - .avatar.placeholder > div { display: flex; align-items: center; @@ -898,19 +868,6 @@ html { color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); } - .menu li > *:not(ul, .menu-title, details, .btn):active, -.menu li > *:not(ul, .menu-title, details, .btn).active, -.menu li > details > summary:active { - --tw-bg-opacity: 1; - background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))); - --tw-text-opacity: 1; - color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity))); - } - - .tab:hover { - --tw-text-opacity: 1; - } - .table tr.hover:hover, .table tr.hover:nth-child(even):hover { --tw-bg-opacity: 1; @@ -918,127 +875,6 @@ html { } } -.btn { - display: inline-flex; - height: 3rem; - min-height: 3rem; - flex-shrink: 0; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; - flex-wrap: wrap; - align-items: center; - justify-content: center; - border-radius: var(--rounded-btn, 0.5rem); - border-color: transparent; - border-color: oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity)); - padding-left: 1rem; - padding-right: 1rem; - text-align: center; - font-size: 0.875rem; - line-height: 1em; - gap: 0.5rem; - font-weight: 600; - text-decoration-line: none; - transition-duration: 200ms; - transition-timing-function: cubic-bezier(0, 0, 0.2, 1); - border-width: var(--border-btn, 1px); - transition-property: color, background-color, border-color, opacity, box-shadow, transform; - --tw-text-opacity: 1; - color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); - --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); - --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); - outline-color: var(--fallback-bc,oklch(var(--bc)/1)); - background-color: oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity)); - --tw-bg-opacity: 1; - --tw-border-opacity: 1; -} - -.btn-disabled, - .btn[disabled], - .btn:disabled { - pointer-events: none; -} - -:where(.btn:is(input[type="checkbox"])), -:where(.btn:is(input[type="radio"])) { - width: auto; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; -} - -.btn:is(input[type="checkbox"]):after, -.btn:is(input[type="radio"]):after { - --tw-content: attr(aria-label); - content: var(--tw-content); -} - -.card { - position: relative; - display: flex; - flex-direction: column; - border-radius: var(--rounded-box, 1rem); -} - -.card:focus { - outline: 2px solid transparent; - outline-offset: 2px; -} - -.card-body { - display: flex; - flex: 1 1 auto; - flex-direction: column; - padding: var(--padding-card, 2rem); - gap: 0.5rem; -} - -.card-body :where(p) { - flex-grow: 1; -} - -.card figure { - display: flex; - align-items: center; - justify-content: center; -} - -.card.image-full { - display: grid; -} - -.card.image-full:before { - position: relative; - content: ""; - z-index: 10; - border-radius: var(--rounded-box, 1rem); - --tw-bg-opacity: 1; - background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))); - opacity: 0.75; -} - -.card.image-full:before, - .card.image-full > * { - grid-column-start: 1; - grid-row-start: 1; -} - -.card.image-full > figure img { - height: 100%; - -o-object-fit: cover; - object-fit: cover; -} - -.card.image-full > .card-body { - position: relative; - z-index: 20; - --tw-text-opacity: 1; - color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity))); -} - .checkbox { flex-shrink: 0; --chkbg: var(--fallback-bc,oklch(var(--bc)/1)); @@ -1055,144 +891,6 @@ html { --tw-border-opacity: 0.2; } -.collapse:not(td):not(tr):not(colgroup) { - visibility: visible; -} - -.collapse { - position: relative; - display: grid; - overflow: hidden; - grid-template-rows: auto 0fr; - transition: grid-template-rows 0.2s; - width: 100%; - border-radius: var(--rounded-box, 1rem); -} - -.collapse-title, -.collapse > input[type="checkbox"], -.collapse > input[type="radio"], -.collapse-content { - grid-column-start: 1; - grid-row-start: 1; -} - -.collapse > input[type="checkbox"], -.collapse > input[type="radio"] { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - opacity: 0; -} - -.collapse[open], -.collapse-open, -.collapse:focus:not(.collapse-close) { - grid-template-rows: auto 1fr; -} - -.collapse:not(.collapse-close):has(> input[type="checkbox"]:checked), -.collapse:not(.collapse-close):has(> input[type="radio"]:checked) { - grid-template-rows: auto 1fr; -} - -.collapse[open] > .collapse-content, -.collapse-open > .collapse-content, -.collapse:focus:not(.collapse-close) > .collapse-content, -.collapse:not(.collapse-close) > input[type="checkbox"]:checked ~ .collapse-content, -.collapse:not(.collapse-close) > input[type="radio"]:checked ~ .collapse-content { - visibility: visible; - min-height: -moz-fit-content; - min-height: fit-content; -} - -@media (hover: hover) { - .btm-nav > *.disabled:hover, - .btm-nav > *[disabled]:hover { - pointer-events: none; - --tw-border-opacity: 0; - background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))); - --tw-bg-opacity: 0.1; - color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); - --tw-text-opacity: 0.2; - } - - .btn:hover { - --tw-border-opacity: 1; - border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity))); - --tw-bg-opacity: 1; - background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity))); - } - - @supports (color: color-mix(in oklab, black, black)) { - .btn:hover { - background-color: color-mix( - in oklab, - oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1)) 90%, - black - ); - border-color: color-mix( - in oklab, - oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1)) 90%, - black - ); - } - } - - @supports not (color: oklch(0% 0 0)) { - .btn:hover { - background-color: var(--btn-color, var(--fallback-b2)); - border-color: var(--btn-color, var(--fallback-b2)); - } - } - - .btn.glass:hover { - --glass-opacity: 25%; - --glass-border-opacity: 15%; - } - - .btn-outline.btn-primary:hover { - --tw-text-opacity: 1; - color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity))); - } - - @supports (color: color-mix(in oklab, black, black)) { - .btn-outline.btn-primary:hover { - background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black); - border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black); - } - } - - .btn-disabled:hover, - .btn[disabled]:hover, - .btn:disabled:hover { - --tw-border-opacity: 0; - background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))); - --tw-bg-opacity: 0.2; - color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); - --tw-text-opacity: 0.2; - } - - @supports (color: color-mix(in oklab, black, black)) { - .btn:is(input[type="checkbox"]:checked):hover, .btn:is(input[type="radio"]:checked):hover { - background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black); - border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black); - } - } - - .tab[disabled], - .tab[disabled]:hover { - cursor: not-allowed; - color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); - --tw-text-opacity: 0.2; - } -} - -.form-control { - display: flex; - flex-direction: column; -} - .label { display: flex; -webkit-user-select: none; @@ -1236,55 +934,6 @@ html { text-decoration-line: underline; } -.menu li.disabled { - cursor: not-allowed; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; - color: var(--fallback-bc,oklch(var(--bc)/0.3)); -} - -.modal { - pointer-events: none; - position: fixed; - inset: 0px; - margin: 0px; - display: grid; - height: 100%; - max-height: none; - width: 100%; - max-width: none; - justify-items: center; - padding: 0px; - opacity: 0; - overscroll-behavior: contain; - z-index: 999; - background-color: transparent; - color: inherit; - transition-duration: 200ms; - transition-timing-function: cubic-bezier(0, 0, 0.2, 1); - transition-property: transform, opacity, visibility; - overflow-y: hidden; -} - -:where(.modal) { - align-items: center; -} - -.modal-open, -.modal:target, -.modal-toggle:checked + .modal, -.modal[open] { - pointer-events: auto; - visibility: visible; - opacity: 1; -} - -:root:has(:is(.modal-open, .modal:target, .modal-toggle:checked + .modal, .modal[open])) { - overflow: hidden; - scrollbar-gutter: stable; -} - .navbar { display: flex; align-items: center; @@ -1298,21 +947,6 @@ html { align-items: center; } -.radio { - flex-shrink: 0; - --chkbg: var(--bc); - height: 1.5rem; - width: 1.5rem; - cursor: pointer; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border-radius: 9999px; - border-width: 1px; - border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity))); - --tw-border-opacity: 0.2; -} - .select { display: inline-flex; cursor: pointer; @@ -1347,82 +981,6 @@ html { height: auto; } -.tabs { - display: grid; - align-items: flex-end; -} - -.tabs-lifted:has(.tab-content[class^="rounded-"]) - .tab:first-child:not(:is(.tab-active, [aria-selected="true"])), .tabs-lifted:has(.tab-content[class*=" rounded-"]) - .tab:first-child:not(:is(.tab-active, [aria-selected="true"])) { - border-bottom-color: transparent; -} - -.tab { - position: relative; - grid-row-start: 1; - display: inline-flex; - height: 2rem; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - flex-wrap: wrap; - align-items: center; - justify-content: center; - text-align: center; - font-size: 0.875rem; - line-height: 1.25rem; - line-height: 2; - --tab-padding: 1rem; - --tw-text-opacity: 0.5; - --tab-color: var(--fallback-bc,oklch(var(--bc)/1)); - --tab-bg: var(--fallback-b1,oklch(var(--b1)/1)); - --tab-border-color: var(--fallback-b3,oklch(var(--b3)/1)); - color: var(--tab-color); - padding-inline-start: var(--tab-padding, 1rem); - padding-inline-end: var(--tab-padding, 1rem); -} - -.tab:is(input[type="radio"]) { - width: auto; - border-bottom-right-radius: 0px; - border-bottom-left-radius: 0px; -} - -.tab:is(input[type="radio"]):after { - --tw-content: attr(aria-label); - content: var(--tw-content); -} - -.tab:not(input):empty { - cursor: default; - grid-column-start: span 9999; -} - -.tab-content { - grid-column-start: 1; - grid-column-end: span 9999; - grid-row-start: 2; - margin-top: calc(var(--tab-border) * -1); - display: none; - border-color: transparent; - border-width: var(--tab-border, 0); -} - -:checked + .tab-content:nth-child(2), - :is(.tab-active, [aria-selected="true"]) + .tab-content:nth-child(2) { - border-start-start-radius: 0px; -} - -input.tab:checked + .tab-content, -:is(.tab-active, [aria-selected="true"]) + .tab-content { - display: block; -} - .table { position: relative; width: 100%; @@ -1456,22 +1014,6 @@ input.tab:checked + .tab-content, background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); } -.btm-nav > *:where(.active) { - border-top-width: 2px; - --tw-bg-opacity: 1; - background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); -} - -.btm-nav > *.disabled, - .btm-nav > *[disabled] { - pointer-events: none; - --tw-border-opacity: 0; - background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))); - --tw-bg-opacity: 0.1; - color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); - --tw-text-opacity: 0.2; -} - .btm-nav > * .label { font-size: 1rem; line-height: 1.5rem; @@ -1507,100 +1049,6 @@ input.tab:checked + .tab-content, --tw-rotate: -135deg; } -@media (prefers-reduced-motion: no-preference) { - .btn { - animation: button-pop var(--animation-btn, 0.25s) ease-out; - } -} - -.btn:active:hover, - .btn:active:focus { - animation: button-pop 0s ease-out; - transform: scale(var(--btn-focus-scale, 0.97)); -} - -@supports not (color: oklch(0% 0 0)) { - .btn { - background-color: var(--btn-color, var(--fallback-b2)); - border-color: var(--btn-color, var(--fallback-b2)); - } - - .btn-primary { - --btn-color: var(--fallback-p); - } -} - -@supports (color: color-mix(in oklab, black, black)) { - .btn-outline.btn-primary.btn-active { - background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black); - border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black); - } -} - -.btn:focus-visible { - outline-style: solid; - outline-width: 2px; - outline-offset: 2px; -} - -.btn-primary { - --tw-text-opacity: 1; - color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity))); - outline-color: var(--fallback-p,oklch(var(--p)/1)); -} - -@supports (color: oklch(0% 0 0)) { - .btn-primary { - --btn-color: var(--p); - } -} - -.btn.glass { - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); - outline-color: currentColor; -} - -.btn.glass.btn-active { - --glass-opacity: 25%; - --glass-border-opacity: 15%; -} - -.btn-outline.btn-primary { - --tw-text-opacity: 1; - color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity))); -} - -.btn-outline.btn-primary.btn-active { - --tw-text-opacity: 1; - color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity))); -} - -.btn.btn-disabled, - .btn[disabled], - .btn:disabled { - --tw-border-opacity: 0; - background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))); - --tw-bg-opacity: 0.2; - color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); - --tw-text-opacity: 0.2; -} - -.btn:is(input[type="checkbox"]:checked), -.btn:is(input[type="radio"]:checked) { - --tw-border-opacity: 1; - border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity))); - --tw-bg-opacity: 1; - background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity))); - --tw-text-opacity: 1; - color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity))); -} - -.btn:is(input[type="checkbox"]:checked):focus-visible, .btn:is(input[type="radio"]:checked):focus-visible { - outline-color: var(--fallback-p,oklch(var(--p)/1)); -} - @keyframes button-pop { 0% { transform: scale(var(--btn-focus-scale, 0.98)); @@ -1615,44 +1063,6 @@ input.tab:checked + .tab-content, } } -.card :where(figure:first-child) { - overflow: hidden; - border-start-start-radius: inherit; - border-start-end-radius: inherit; - border-end-start-radius: unset; - border-end-end-radius: unset; -} - -.card :where(figure:last-child) { - overflow: hidden; - border-start-start-radius: unset; - border-start-end-radius: unset; - border-end-start-radius: inherit; - border-end-end-radius: inherit; -} - -.card:focus-visible { - outline: 2px solid currentColor; - outline-offset: 2px; -} - -.card.bordered { - border-width: 1px; - --tw-border-opacity: 1; - border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity))); -} - -.card.compact .card-body { - padding: 1rem; - font-size: 0.875rem; - line-height: 1.25rem; -} - -.card.image-full :where(figure) { - overflow: hidden; - border-radius: inherit; -} - .checkbox:focus { box-shadow: none; } @@ -1680,123 +1090,39 @@ input.tab:checked + .tab-content, background-color: var(--chkbg); background-image: linear-gradient(-45deg, transparent 65%, var(--chkbg) 65.99%), linear-gradient(45deg, transparent 75%, var(--chkbg) 75.99%), - linear-gradient(-45deg, var(--chkbg) 40%, transparent 40.99%), - linear-gradient( - 45deg, - var(--chkbg) 30%, - var(--chkfg) 30.99%, - var(--chkfg) 40%, - transparent 40.99% - ), - linear-gradient(-45deg, var(--chkfg) 50%, var(--chkbg) 50.99%); -} - -.checkbox:indeterminate { - --tw-bg-opacity: 1; - background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity))); - background-repeat: no-repeat; - animation: checkmark var(--animation-input, 0.2s) ease-out; - background-image: linear-gradient(90deg, transparent 80%, var(--chkbg) 80%), - linear-gradient(-90deg, transparent 80%, var(--chkbg) 80%), - linear-gradient(0deg, var(--chkbg) 43%, var(--chkfg) 43%, var(--chkfg) 57%, var(--chkbg) 57%); -} - -@keyframes checkmark { - 0% { - background-position-y: 5px; - } - - 50% { - background-position-y: -2px; - } - - 100% { - background-position-y: 0; - } -} - -details.collapse { - width: 100%; -} - -details.collapse summary { - position: relative; - display: block; - outline: 2px solid transparent; - outline-offset: 2px; -} - -details.collapse summary::-webkit-details-marker { - display: none; -} - -.collapse:focus-visible { - outline-style: solid; - outline-width: 2px; - outline-offset: 2px; - outline-color: var(--fallback-bc,oklch(var(--bc)/1)); -} - -.collapse:has(.collapse-title:focus-visible), -.collapse:has(> input[type="checkbox"]:focus-visible), -.collapse:has(> input[type="radio"]:focus-visible) { - outline-style: solid; - outline-width: 2px; - outline-offset: 2px; - outline-color: var(--fallback-bc,oklch(var(--bc)/1)); -} - -.collapse:not(.collapse-open):not(.collapse-close) > input[type="checkbox"], -.collapse:not(.collapse-open):not(.collapse-close) > input[type="radio"]:not(:checked), -.collapse:not(.collapse-open):not(.collapse-close) > .collapse-title { - cursor: pointer; -} - -.collapse:focus:not(.collapse-open):not(.collapse-close):not(.collapse[open]) > .collapse-title { - cursor: unset; -} - -:where(.collapse > input[type="checkbox"]), -:where(.collapse > input[type="radio"]) { - z-index: 1; + linear-gradient(-45deg, var(--chkbg) 40%, transparent 40.99%), + linear-gradient( + 45deg, + var(--chkbg) 30%, + var(--chkfg) 30.99%, + var(--chkfg) 40%, + transparent 40.99% + ), + linear-gradient(-45deg, var(--chkfg) 50%, var(--chkbg) 50.99%); } -.collapse-title, -:where(.collapse > input[type="checkbox"]), -:where(.collapse > input[type="radio"]) { - width: 100%; - padding: 1rem; - padding-inline-end: 3rem; - min-height: 3.75rem; - transition: background-color 0.2s ease-out; +.checkbox:indeterminate { + --tw-bg-opacity: 1; + background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity))); + background-repeat: no-repeat; + animation: checkmark var(--animation-input, 0.2s) ease-out; + background-image: linear-gradient(90deg, transparent 80%, var(--chkbg) 80%), + linear-gradient(-90deg, transparent 80%, var(--chkbg) 80%), + linear-gradient(0deg, var(--chkbg) 43%, var(--chkfg) 43%, var(--chkfg) 57%, var(--chkbg) 57%); } -.collapse[open] > :where(.collapse-content), -.collapse-open > :where(.collapse-content), -.collapse:focus:not(.collapse-close) > :where(.collapse-content), -.collapse:not(.collapse-close) > :where(input[type="checkbox"]:checked ~ .collapse-content), -.collapse:not(.collapse-close) > :where(input[type="radio"]:checked ~ .collapse-content) { - padding-bottom: 1rem; - transition: padding 0.2s ease-out, - background-color 0.2s ease-out; -} +@keyframes checkmark { + 0% { + background-position-y: 5px; + } -.collapse[open].collapse-arrow > .collapse-title:after, -.collapse-open.collapse-arrow > .collapse-title:after, -.collapse-arrow:focus:not(.collapse-close) > .collapse-title:after, -.collapse-arrow:not(.collapse-close) > input[type="checkbox"]:checked ~ .collapse-title:after, -.collapse-arrow:not(.collapse-close) > input[type="radio"]:checked ~ .collapse-title:after { - --tw-translate-y: -50%; - --tw-rotate: 225deg; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} + 50% { + background-position-y: -2px; + } -.collapse[open].collapse-plus > .collapse-title:after, -.collapse-open.collapse-plus > .collapse-title:after, -.collapse-plus:focus:not(.collapse-close) > .collapse-title:after, -.collapse-plus:not(.collapse-close) > input[type="checkbox"]:checked ~ .collapse-title:after, -.collapse-plus:not(.collapse-close) > input[type="radio"]:checked ~ .collapse-title:after { - content: "−"; + 100% { + background-position-y: 0; + } } .input input { @@ -1857,10 +1183,6 @@ details.collapse summary::-webkit-details-marker { text-align: inherit; } -.join > :where(*:not(:first-child)):is(.btn) { - margin-inline-start: calc(var(--border-btn) * -1); -} - .link:focus { outline: 2px solid transparent; outline-offset: 2px; @@ -1871,15 +1193,6 @@ details.collapse summary::-webkit-details-marker { outline-offset: 2px; } -.menu li > *:not(ul, .menu-title, details, .btn):active, -.menu li > *:not(ul, .menu-title, details, .btn).active, -.menu li > details > summary:active { - --tw-bg-opacity: 1; - background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))); - --tw-text-opacity: 1; - color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity))); -} - .mockup-phone .display { overflow: hidden; border-radius: 40px; @@ -1932,22 +1245,6 @@ details.collapse summary::-webkit-details-marker { opacity: 0.6; } -.modal:not(dialog:not(.modal-open)), - .modal::backdrop { - background-color: #0006; - animation: modal-pop 0.2s ease-out; -} - -.modal-open .modal-box, -.modal-toggle:checked + .modal .modal-box, -.modal:target .modal-box, -.modal[open] .modal-box { - --tw-translate-y: 0px; - --tw-scale-x: 1; - --tw-scale-y: 1; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - @keyframes modal-pop { 0% { opacity: 0; @@ -1960,32 +1257,6 @@ details.collapse summary::-webkit-details-marker { } } -.radio:focus { - box-shadow: none; -} - -.radio:focus-visible { - outline-style: solid; - outline-width: 2px; - outline-offset: 2px; - outline-color: var(--fallback-bc,oklch(var(--bc)/1)); -} - -.radio:checked, - .radio[aria-checked="true"] { - --tw-bg-opacity: 1; - background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity))); - background-image: none; - animation: radiomark var(--animation-input, 0.2s) ease-out; - box-shadow: 0 0 0 4px var(--fallback-b1,oklch(var(--b1)/1)) inset, - 0 0 0 4px var(--fallback-b1,oklch(var(--b1)/1)) inset; -} - -.radio:disabled { - cursor: not-allowed; - opacity: 0.2; -} - @keyframes radiomark { 0% { box-shadow: 0 0 0 12px var(--fallback-b1,oklch(var(--b1)/1)) inset, @@ -2071,126 +1342,6 @@ details.collapse summary::-webkit-details-marker { } } -.tabs-lifted > .tab:focus-visible { - border-end-end-radius: 0; - border-end-start-radius: 0; -} - -.tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]), .tab:is(input:checked) { - border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity))); - --tw-border-opacity: 1; - --tw-text-opacity: 1; -} - -.tab:focus { - outline: 2px solid transparent; - outline-offset: 2px; -} - -.tab:focus-visible { - outline: 2px solid currentColor; - outline-offset: -5px; -} - -.tab-disabled, - .tab[disabled] { - cursor: not-allowed; - color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity))); - --tw-text-opacity: 0.2; -} - -.tabs-bordered > .tab { - border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity))); - --tw-border-opacity: 0.2; - border-style: solid; - border-bottom-width: calc(var(--tab-border, 1px) + 1px); -} - -.tabs-lifted > .tab { - border: var(--tab-border, 1px) solid transparent; - border-width: 0 0 var(--tab-border, 1px) 0; - border-start-start-radius: var(--tab-radius, 0.5rem); - border-start-end-radius: var(--tab-radius, 0.5rem); - border-bottom-color: var(--tab-border-color); - padding-inline-start: var(--tab-padding, 1rem); - padding-inline-end: var(--tab-padding, 1rem); - padding-top: var(--tab-border, 1px); -} - -.tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]), .tabs-lifted > .tab:is(input:checked) { - background-color: var(--tab-bg); - border-width: var(--tab-border, 1px) var(--tab-border, 1px) 0 var(--tab-border, 1px); - border-inline-start-color: var(--tab-border-color); - border-inline-end-color: var(--tab-border-color); - border-top-color: var(--tab-border-color); - padding-inline-start: calc(var(--tab-padding, 1rem) - var(--tab-border, 1px)); - padding-inline-end: calc(var(--tab-padding, 1rem) - var(--tab-border, 1px)); - padding-bottom: var(--tab-border, 1px); - padding-top: 0; -} - -.tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):before, .tabs-lifted > .tab:is(input:checked):before { - z-index: 1; - content: ""; - display: block; - position: absolute; - width: calc(100% + var(--tab-radius, 0.5rem) * 2); - height: var(--tab-radius, 0.5rem); - bottom: 0; - background-size: var(--tab-radius, 0.5rem); - background-position: top left, - top right; - background-repeat: no-repeat; - --tab-grad: calc(69% - var(--tab-border, 1px)); - --radius-start: radial-gradient( - circle at top left, - transparent var(--tab-grad), - var(--tab-border-color) calc(var(--tab-grad) + 0.25px), - var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)), - var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.25px) - ); - --radius-end: radial-gradient( - circle at top right, - transparent var(--tab-grad), - var(--tab-border-color) calc(var(--tab-grad) + 0.25px), - var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)), - var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.25px) - ); - background-image: var(--radius-start), var(--radius-end); -} - -.tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):first-child:before, .tabs-lifted > .tab:is(input:checked):first-child:before { - background-image: var(--radius-end); - background-position: top right; -} - -[dir="rtl"] .tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):first-child:before, [dir="rtl"] .tabs-lifted > .tab:is(input:checked):first-child:before { - background-image: var(--radius-start); - background-position: top left; -} - -.tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):last-child:before, .tabs-lifted > .tab:is(input:checked):last-child:before { - background-image: var(--radius-start); - background-position: top left; -} - -[dir="rtl"] .tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):last-child:before, [dir="rtl"] .tabs-lifted > .tab:is(input:checked):last-child:before { - background-image: var(--radius-end); - background-position: top right; -} - -.tabs-lifted - > :is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]) - + .tabs-lifted - :is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):before, .tabs-lifted > .tab:is(input:checked) + .tabs-lifted .tab:is(input:checked):before { - background-image: var(--radius-end); - background-position: top right; -} - -.tabs-boxed .tab { - border-radius: var(--rounded-btn, 0.5rem); -} - .table:where([dir="rtl"], [dir="rtl"] *) { text-align: right; } @@ -2210,13 +1361,6 @@ details.collapse summary::-webkit-details-marker { background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))); } -.table-zebra tr.active, - .table-zebra tr.active:nth-child(even), - .table-zebra-zebra tbody tr:nth-child(even) { - --tw-bg-opacity: 1; - background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity))); -} - .table :where(thead tr, tbody tr:not(:last-child), tbody tr:first-child:last-child) { border-bottom-width: 1px; --tw-border-opacity: 1; @@ -2249,108 +1393,10 @@ details.collapse summary::-webkit-details-marker { } } -.btm-nav-xs > *:where(.active) { - border-top-width: 1px; -} - -.btm-nav-sm > *:where(.active) { - border-top-width: 2px; -} - -.btm-nav-md > *:where(.active) { - border-top-width: 2px; -} - -.btm-nav-lg > *:where(.active) { - border-top-width: 4px; -} - -.tabs-md :where(.tab) { - height: 2rem; - font-size: 0.875rem; - line-height: 1.25rem; - line-height: 2; - --tab-padding: 1rem; -} - -.tabs-lg :where(.tab) { - height: 3rem; - font-size: 1.125rem; - line-height: 1.75rem; - line-height: 2; - --tab-padding: 1.25rem; -} - -.tabs-sm :where(.tab) { - height: 1.5rem; - font-size: 0.875rem; - line-height: .75rem; - --tab-padding: 0.75rem; -} - -.tabs-xs :where(.tab) { - height: 1.25rem; - font-size: 0.75rem; - line-height: .75rem; - --tab-padding: 0.5rem; -} - -.card-compact .card-body { - padding: 1rem; - font-size: 0.875rem; - line-height: 1.25rem; -} - -.card-normal .card-body { - padding: var(--padding-card, 2rem); - font-size: 1rem; - line-height: 1.5rem; -} - -.join.join-vertical > :where(*:not(:first-child)):is(.btn) { - margin-top: calc(var(--border-btn) * -1); -} - -.join.join-horizontal > :where(*:not(:first-child)):is(.btn) { - margin-inline-start: calc(var(--border-btn) * -1); -} - -.table-sm :not(thead):not(tfoot) tr { - font-size: 0.875rem; - line-height: 1.25rem; -} - -.table-sm :where(th, td) { - padding-left: 0.75rem; - padding-right: 0.75rem; - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border-width: 0; -} - -.collapse { - visibility: collapse; -} - .static { position: static; } -.m-0 { - margin: 0px; -} - .mx-auto { margin-left: auto; margin-right: auto; @@ -2361,10 +1407,6 @@ details.collapse summary::-webkit-details-marker { margin-bottom: 2rem; } -.mb-0 { - margin-bottom: 0px; -} - .mb-1 { margin-bottom: 0.25rem; } @@ -2401,6 +1443,10 @@ details.collapse summary::-webkit-details-marker { margin-top: 0.25rem; } +.mt-10 { + margin-top: 2.5rem; +} + .mt-2 { margin-top: 0.5rem; } @@ -2433,16 +1479,12 @@ details.collapse summary::-webkit-details-marker { display: grid; } -.hidden { - display: none; -} - .h-4 { height: 1rem; } -.h-auto { - height: auto; +.min-h-full { + min-height: 100%; } .w-4 { @@ -2473,6 +1515,10 @@ details.collapse summary::-webkit-details-marker { grid-template-columns: repeat(1, minmax(0, 1fr)); } +.flex-col { + flex-direction: column; +} + .items-center { align-items: center; } @@ -2546,6 +1592,10 @@ details.collapse summary::-webkit-details-marker { border-width: 1px; } +.border-0 { + border-width: 0px; +} + .border-b { border-bottom-width: 1px; } @@ -2637,6 +1687,10 @@ details.collapse summary::-webkit-details-marker { background-color: rgb(254 249 195 / var(--tw-bg-opacity)); } +.p-1\.5 { + padding: 0.375rem; +} + .p-2 { padding: 0.5rem; } @@ -2679,6 +1733,16 @@ details.collapse summary::-webkit-details-marker { padding-bottom: 0.25rem; } +.py-1\.5 { + padding-top: 0.375rem; + padding-bottom: 0.375rem; +} + +.py-12 { + padding-top: 3rem; + padding-bottom: 3rem; +} + .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; @@ -2780,6 +1844,18 @@ details.collapse summary::-webkit-details-marker { text-transform: uppercase; } +.leading-6 { + line-height: 1.5rem; +} + +.leading-9 { + line-height: 2.25rem; +} + +.tracking-tight { + letter-spacing: -0.025em; +} + .tracking-wider { letter-spacing: 0.05em; } @@ -2814,6 +1890,11 @@ details.collapse summary::-webkit-details-marker { color: rgb(17 24 39 / var(--tw-text-opacity)); } +.text-indigo-600 { + --tw-text-opacity: 1; + color: rgb(79 70 229 / var(--tw-text-opacity)); +} + .text-red-600 { --tw-text-opacity: 1; color: rgb(220 38 38 / var(--tw-text-opacity)); @@ -2842,6 +1923,31 @@ details.collapse summary::-webkit-details-marker { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.ring-1 { + --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(1px + 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); +} + +.ring-inset { + --tw-ring-inset: inset; +} + +.ring-gray-300 { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity)); +} + +.placeholder\:text-gray-400::-moz-placeholder { + --tw-text-opacity: 1; + color: rgb(156 163 175 / var(--tw-text-opacity)); +} + +.placeholder\:text-gray-400::placeholder { + --tw-text-opacity: 1; + color: rgb(156 163 175 / var(--tw-text-opacity)); +} + .hover\:bg-blue-600:hover { --tw-bg-opacity: 1; background-color: rgb(37 99 235 / var(--tw-bg-opacity)); @@ -2852,6 +1958,11 @@ details.collapse summary::-webkit-details-marker { background-color: rgb(29 78 216 / var(--tw-bg-opacity)); } +.hover\:bg-indigo-500:hover { + --tw-bg-opacity: 1; + background-color: rgb(99 102 241 / var(--tw-bg-opacity)); +} + .hover\:bg-indigo-700:hover { --tw-bg-opacity: 1; background-color: rgb(67 56 202 / var(--tw-bg-opacity)); @@ -2872,6 +1983,11 @@ details.collapse summary::-webkit-details-marker { color: rgb(31 41 55 / var(--tw-text-opacity)); } +.hover\:text-indigo-500:hover { + --tw-text-opacity: 1; + color: rgb(99 102 241 / var(--tw-text-opacity)); +} + .hover\:underline:hover { text-decoration-line: underline; } @@ -2892,6 +2008,10 @@ details.collapse summary::-webkit-details-marker { box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } +.focus\:ring-inset:focus { + --tw-ring-inset: inset; +} + .focus\:ring-blue-500:focus { --tw-ring-opacity: 1; --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity)); @@ -2902,11 +2022,45 @@ details.collapse summary::-webkit-details-marker { --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity)); } +.focus\:ring-indigo-600:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(79 70 229 / var(--tw-ring-opacity)); +} + .focus\:ring-offset-2:focus { --tw-ring-offset-width: 2px; } +.focus-visible\:outline:focus-visible { + outline-style: solid; +} + +.focus-visible\:outline-2:focus-visible { + outline-width: 2px; +} + +.focus-visible\:outline-offset-2:focus-visible { + outline-offset: 2px; +} + +.focus-visible\:outline-indigo-600:focus-visible { + outline-color: #4f46e5; +} + @media (min-width: 640px) { + .sm\:mx-auto { + margin-left: auto; + margin-right: auto; + } + + .sm\:w-full { + width: 100%; + } + + .sm\:max-w-sm { + max-width: 24rem; + } + .sm\:rounded-lg { border-radius: 0.5rem; } @@ -2924,10 +2078,21 @@ details.collapse summary::-webkit-details-marker { font-size: 0.875rem; line-height: 1.25rem; } + + .sm\:leading-6 { + line-height: 1.5rem; + } } @media (min-width: 768px) { .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } +} + +@media (min-width: 1024px) { + .lg\:px-8 { + padding-left: 2rem; + padding-right: 2rem; + } } \ No newline at end of file diff --git a/core/static/css/styles.css b/core/static/css/styles.css deleted file mode 100644 index 23064c6..0000000 --- a/core/static/css/styles.css +++ /dev/null @@ -1,53 +0,0 @@ -.format-container { - margin: 20px; - display: flex; - justify-content: space-evenly; - align-items: flex-start; - height: 300px; - gap: 1em; -} - -.form-thing { - width: 50%; - border-style: solid; - border-width: 5px 2px; - border-color: black; - padding: 20px; - background-color: #dbefff; - margin: auto; -} - -.ep-table { - font-size: small; - border: 1px solid; - border-collapse: collapse; - color: black; - border-spacing: 0; -} - -.summary-table { - font-size: small; - border: 1px solid; - border-collapse: collapse; - color: black; - border-spacing: 0; -} - -.summary-table > tbody > tr > td { - border: 1px solid; -} - - -.ep-table > thead > tr > th { - padding: 10px; - border: 1px solid; -} - -.ep-table > tbody > tr > td { - border: 1px solid; - padding: 3px; -} - -.ep-table > tbody > tr > td > ul > li > a { - color: green; -} diff --git a/core/templates/core/base.html b/core/templates/core/base.html index 682395f..1bf6886 100644 --- a/core/templates/core/base.html +++ b/core/templates/core/base.html @@ -5,25 +5,12 @@ -{# #} - -{# #} {% block title %}{% endblock title %} {% block extra_head_tags %}{% endblock extra_head_tags %} - {% block navbar %} diff --git a/core/templates/registration/login.html b/core/templates/registration/login.html index 9e00087..f2f0284 100644 --- a/core/templates/registration/login.html +++ b/core/templates/registration/login.html @@ -1,43 +1,68 @@ {% extends "core/base.html" %} +{% load widget_tweaks %} +{% load static %} {% block content %} -
- {% if form.errors %} -

Your username and password didn't match. Please try again.

- {% endif %} - - {% if next %} - {% if user.is_authenticated %} -

Your account doesn't have access to this page. To proceed, - please login with an account that has access.

- {% else %} -

Please login to see this page.

- {% endif %} - {% endif %} - -
- {% csrf_token %} -
- {{ form.username.label_tag }} - {{ form.username }} -
- -
- {{ form.password.label_tag }} - {{ form.password }} -
- -
- -
- -
- -
- {# Assumes you set up the password_reset view in your URLconf #} - Lost password? -
- - {% endblock content %} +{#
#} +{# {% if form.errors %}#} +{#

Your username and password didn't match. Please try again.

#} +{# {% endif %}#} +{##} +{# {% if next %}#} +{# {% if user.is_authenticated %}#} +{#

Your account doesn't have access to this page. To proceed,#} +{# please login with an account that has access.

#} +{# {% else %}#} +{#

Please login to see this page.

#} +{# {% endif %}#} +{# {% endif %}#} + +
+
+

Defence Nuclear Security Regulator Engagement Database (DED)

+

Sign in to your + account

+
+ +
+
+ {% csrf_token %} +
+{# #} + {{ form.username.label_tag }} +
+{# #} + {% render_field form.username class+="block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %} +
+
+ +
+
+{# #} + {{ form.password.label_tag }} +
+ Forgot password? +
+
+
+{# #} + {% render_field form.password class+="block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %} +
+
+ +
+ +
+
+
+
+ + +{% endblock content %}
diff --git a/templates/w3/accordion-group.html b/templates/w3/accordion-group.html deleted file mode 100644 index 3d4f5e8..0000000 --- a/templates/w3/accordion-group.html +++ /dev/null @@ -1,17 +0,0 @@ -
- - -
-
- {{ fields }} -
-
-
diff --git a/templates/w3/accordion.html b/templates/w3/accordion.html deleted file mode 100644 index f3a9859..0000000 --- a/templates/w3/accordion.html +++ /dev/null @@ -1,3 +0,0 @@ -
- {{ content }} -
diff --git a/templates/w3/betterform.html b/templates/w3/betterform.html deleted file mode 100644 index 4516291..0000000 --- a/templates/w3/betterform.html +++ /dev/null @@ -1,21 +0,0 @@ -{% for fieldset in form.fieldsets %} -
- {% if fieldset.legend %} - {{ fieldset.legend }} - {% endif %} - - {% if fieldset.description %} -

{{ fieldset.description }}

- {% endif %} - - {% for field in fieldset %} - {% if field.is_hidden %} - {{ field }} - {% else %} - {% include "w3/field.html" %} - {% endif %} - {% endfor %} - {% if not forloop.last or not fieldset_open %} -
- {% endif %} -{% endfor %} diff --git a/templates/w3/display_form.html b/templates/w3/display_form.html deleted file mode 100644 index 9c891dd..0000000 --- a/templates/w3/display_form.html +++ /dev/null @@ -1,9 +0,0 @@ -{% if form.form_html %} - {% if include_media %}{{ form.media }}{% endif %} - {% if form_show_errors %} - {% include "w3/errors.html" %} - {% endif %} - {{ form.form_html }} -{% else %} - {% include "w3/uni_form.html" %} -{% endif %} diff --git a/templates/w3/errors.html b/templates/w3/errors.html deleted file mode 100644 index db09490..0000000 --- a/templates/w3/errors.html +++ /dev/null @@ -1,8 +0,0 @@ -{% if form.non_field_errors %} -
- {% if form_error_title %}

{{ form_error_title }}

{% endif %} -
    - {{ form.non_field_errors|unordered_list }} -
-
-{% endif %} diff --git a/templates/w3/errors_formset.html b/templates/w3/errors_formset.html deleted file mode 100644 index 0382973..0000000 --- a/templates/w3/errors_formset.html +++ /dev/null @@ -1,8 +0,0 @@ -{% if formset.non_form_errors %} -
- {% if formset_error_title %}

{{ formset_error_title }}

{% endif %} -
    - {{ formset.non_form_errors|unordered_list }} -
-
-{% endif %} diff --git a/templates/w3/field.html b/templates/w3/field.html deleted file mode 100644 index f73441f..0000000 --- a/templates/w3/field.html +++ /dev/null @@ -1,81 +0,0 @@ -{% load crispy_forms_field %} - -{% if field.is_hidden %} - {{ field }} -{% else %} - {% if field|is_checkbox %} -
- {% if label_class %} -
- {% endif %} - {% endif %} - <{% if tag %}{{ tag }}{% else %}div{% endif %} id="div_{{ field.auto_id }}" class="{% if not field|is_checkbox %}w3-input{% if 'form-horizontal' in form_class %} row{% endif %}{% else %}{%if use_custom_control%}{% if tag != 'td' %}custom-control {%endif%} custom-checkbox{% else %}form-check{% endif %}{% endif %}{% if wrapper_class %} {{ wrapper_class }}{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}"> - {% if field.label and not field|is_checkbox and form_show_labels %} - {# not field|is_radioselect in row below can be removed once Django 3.2 is no longer supported #} - - {% endif %} - - {% if field|is_checkboxselectmultiple %} - {% include 'w3/layout/checkboxselectmultiple.html' %} - {% endif %} - - {% if field|is_radioselect %} - {% include 'w3/layout/radioselect.html' %} - {% endif %} - - {% if not field|is_checkboxselectmultiple and not field|is_radioselect %} - {% if field|is_checkbox and form_show_labels %} - {%if use_custom_control%} - {% if field.errors %} - {% crispy_field field 'class' 'custom-control-input is-invalid' %} - {% else %} - {% crispy_field field 'class' 'custom-control-input' %} - {% endif %} - {% else %} - {% if field.errors %} - {% crispy_field field 'class' 'form-check-input is-invalid' %} - {% else %} - {% crispy_field field 'class' 'form-check-input' %} - {% endif %} - {% endif %} - - {% include 'w3/layout/help_text_and_errors.html' %} - {% elif field|is_file and use_custom_control %} - {% include 'w3/layout/field_file.html' %} - {% else %} - - {% if field|is_select and use_custom_control %} - {% if field.errors %} - {% crispy_field field 'class' 'custom-select is-invalid' %} - {% else %} - {% crispy_field field 'class' 'custom-select' %} - {% endif %} - {% elif field|is_file %} - {% if field.errors %} - {% crispy_field field 'class' 'form-control-file is-invalid' %} - {% else %} - {% crispy_field field 'class' 'form-control-file' %} - {% endif %} - {% else %} - {% if field.errors %} - {% crispy_field field 'class' 'form-control is-invalid' %} - {% else %} - {% crispy_field field 'class' 'form-control' %} - {% endif %} - {% endif %} - {% include 'w3/layout/help_text_and_errors.html' %} -
- {% endif %} - {% endif %} - - {% if field|is_checkbox %} - {% if label_class %} -
- {% endif %} -
- {% endif %} -{% endif %} diff --git a/templates/w3/inputs.html b/templates/w3/inputs.html deleted file mode 100644 index 250031c..0000000 --- a/templates/w3/inputs.html +++ /dev/null @@ -1,13 +0,0 @@ -{% if inputs %} -
- {% if label_class %} -
- {% endif %} - -
- {% for input in inputs %} - {% include "w3/layout/baseinput.html" %} - {% endfor %} -
-
-{% endif %} diff --git a/templates/w3/layout/alert.html b/templates/w3/layout/alert.html deleted file mode 100644 index ba20ae9..0000000 --- a/templates/w3/layout/alert.html +++ /dev/null @@ -1,4 +0,0 @@ - - {% if dismiss %}{% endif %} - {{ content }} - diff --git a/templates/w3/layout/attrs.html b/templates/w3/layout/attrs.html deleted file mode 100644 index c52de9e..0000000 --- a/templates/w3/layout/attrs.html +++ /dev/null @@ -1 +0,0 @@ -{% for name, value in widget.attrs.items %}{% if value is not False %} {{ name }}{% if value is not True %}="{{ value|stringformat:'s' }}"{% endif %}{% endif %}{% endfor %} diff --git a/templates/w3/layout/baseinput.html b/templates/w3/layout/baseinput.html deleted file mode 100644 index ffde644..0000000 --- a/templates/w3/layout/baseinput.html +++ /dev/null @@ -1,9 +0,0 @@ - diff --git a/templates/w3/layout/button.html b/templates/w3/layout/button.html deleted file mode 100644 index f41f9cf..0000000 --- a/templates/w3/layout/button.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/templates/w3/layout/buttonholder.html b/templates/w3/layout/buttonholder.html deleted file mode 100644 index bad9405..0000000 --- a/templates/w3/layout/buttonholder.html +++ /dev/null @@ -1,4 +0,0 @@ -
- {{ fields_output }} -
diff --git a/templates/w3/layout/checkboxselectmultiple.html b/templates/w3/layout/checkboxselectmultiple.html deleted file mode 100644 index c943fc4..0000000 --- a/templates/w3/layout/checkboxselectmultiple.html +++ /dev/null @@ -1,29 +0,0 @@ -{% load crispy_forms_filters %} -{% load l10n %} - -
- - {% for group, options, index in field|optgroups %} - {% if group %}{{ group }}{% endif %} - {% for option in options %} -
- - - {% if field.errors and forloop.last and not inline_class and forloop.parentloop.last %} - {% include 'w3/layout/field_errors_block.html' %} - {% endif %} -
- {% endfor %} - {% endfor %} - {% if field.errors and inline_class %} -
- {# the following input is only meant to allow boostrap to render the error message as it has to be after an invalid input. As the input has no name, no data will be sent. #} - - {% include 'w3/layout/field_errors_block.html' %} -
- {% endif %} - - {% include 'w3/layout/help_text.html' %} -
diff --git a/templates/w3/layout/checkboxselectmultiple_inline.html b/templates/w3/layout/checkboxselectmultiple_inline.html deleted file mode 100644 index 10f0e9e..0000000 --- a/templates/w3/layout/checkboxselectmultiple_inline.html +++ /dev/null @@ -1,14 +0,0 @@ -{% if field.is_hidden %} - {{ field }} -{% else %} -
- - {% if field.label %} - - {% endif %} - - {% include 'w3/layout/checkboxselectmultiple.html' %} -
-{% endif %} diff --git a/templates/w3/layout/column.html b/templates/w3/layout/column.html deleted file mode 100644 index e372c38..0000000 --- a/templates/w3/layout/column.html +++ /dev/null @@ -1,4 +0,0 @@ -
- {{ fields }} -
diff --git a/templates/w3/layout/div.html b/templates/w3/layout/div.html deleted file mode 100644 index 1651ddc..0000000 --- a/templates/w3/layout/div.html +++ /dev/null @@ -1,4 +0,0 @@ -
- {{ fields }} -
diff --git a/templates/w3/layout/field_errors.html b/templates/w3/layout/field_errors.html deleted file mode 100644 index f649872..0000000 --- a/templates/w3/layout/field_errors.html +++ /dev/null @@ -1,5 +0,0 @@ -{% if form_show_errors and field.errors %} - {% for error in field.errors %} - {{ error }} - {% endfor %} -{% endif %} diff --git a/templates/w3/layout/field_errors_block.html b/templates/w3/layout/field_errors_block.html deleted file mode 100644 index e788b79..0000000 --- a/templates/w3/layout/field_errors_block.html +++ /dev/null @@ -1,5 +0,0 @@ -{% if form_show_errors and field.errors %} - {% for error in field.errors %} -

{{ error }}

- {% endfor %} -{% endif %} diff --git a/templates/w3/layout/field_file.html b/templates/w3/layout/field_file.html deleted file mode 100644 index f58268a..0000000 --- a/templates/w3/layout/field_file.html +++ /dev/null @@ -1,52 +0,0 @@ -{% load crispy_forms_field %} - -
-{% for widget in field.subwidgets %} -{% if widget.data.is_initial %} -
-
- {{ widget.data.initial_text }} -
-
- - {{ field.value }} - - {% if not widget.data.required %} - - - - - - - {% endif %} -
-
-
-
- {{ widget.data.input_text }} -
-{% endif %} -
- - - -
- {% if not widget.data.is_initial %} - {% include 'w3/layout/help_text_and_errors.html' %} - {% endif %} -{% if widget.data.is_initial %} -
-
-{% include 'w3/layout/help_text_and_errors.html' %} -
-{% endif %} -{% endfor %} -
diff --git a/templates/w3/layout/field_with_buttons.html b/templates/w3/layout/field_with_buttons.html deleted file mode 100644 index 234b310..0000000 --- a/templates/w3/layout/field_with_buttons.html +++ /dev/null @@ -1,17 +0,0 @@ -{% load crispy_forms_field %} - - - {% if field.label and form_show_labels %} - - {% endif %} - -
-
- {% crispy_field field 'class' 'form-control' %} - {{ buttons }} -
- {% include 'w3/layout/help_text_and_errors.html' %} -
- diff --git a/templates/w3/layout/fieldset.html b/templates/w3/layout/fieldset.html deleted file mode 100644 index 85ae30b..0000000 --- a/templates/w3/layout/fieldset.html +++ /dev/null @@ -1,6 +0,0 @@ -
- {% if legend %}{{ legend }}{% endif %} - {{ fields }} -
diff --git a/templates/w3/layout/formactions.html b/templates/w3/layout/formactions.html deleted file mode 100644 index 04fed0b..0000000 --- a/templates/w3/layout/formactions.html +++ /dev/null @@ -1,9 +0,0 @@ - - {% if label_class %} -
- {% endif %} - -
- {{ fields_output }} -
- diff --git a/templates/w3/layout/help_text.html b/templates/w3/layout/help_text.html deleted file mode 100644 index 3b5695c..0000000 --- a/templates/w3/layout/help_text.html +++ /dev/null @@ -1,7 +0,0 @@ -{% if field.help_text %} - {% if help_text_inline %} - {{ field.help_text|safe }} - {% else %} - {{ field.help_text|safe }} - {% endif %} -{% endif %} diff --git a/templates/w3/layout/help_text_and_errors.html b/templates/w3/layout/help_text_and_errors.html deleted file mode 100644 index 7313246..0000000 --- a/templates/w3/layout/help_text_and_errors.html +++ /dev/null @@ -1,13 +0,0 @@ -{% if help_text_inline and not error_text_inline %} - {% include 'w3/layout/help_text.html' %} -{% endif %} - -{% if error_text_inline %} - {% include 'w3/layout/field_errors.html' %} -{% else %} - {% include 'w3/layout/field_errors_block.html' %} -{% endif %} - -{% if not help_text_inline %} - {% include 'w3/layout/help_text.html' %} -{% endif %} diff --git a/templates/w3/layout/inline_field.html b/templates/w3/layout/inline_field.html deleted file mode 100644 index aff23bb..0000000 --- a/templates/w3/layout/inline_field.html +++ /dev/null @@ -1,29 +0,0 @@ -{% load crispy_forms_field %} - -{% if field.is_hidden %} - {{ field }} -{% else %} - {% if field|is_checkbox %} -
- -
- {% else %} -
- - {% if field.errors %} - {% crispy_field field 'placeholder' field.label 'class' 'form-control is-invalid' %} - {% else %} - {% crispy_field field 'placeholder' field.label 'class' 'form-control' %} - {% endif %} -
- {% endif %} -{% endif %} diff --git a/templates/w3/layout/modal.html b/templates/w3/layout/modal.html deleted file mode 100644 index ab18198..0000000 --- a/templates/w3/layout/modal.html +++ /dev/null @@ -1,15 +0,0 @@ - diff --git a/templates/w3/layout/multifield.html b/templates/w3/layout/multifield.html deleted file mode 100644 index 0a2c050..0000000 --- a/templates/w3/layout/multifield.html +++ /dev/null @@ -1,27 +0,0 @@ -{% load crispy_forms_field %} - -{% if field.is_hidden %} - {{ field }} -{% else %} - - {% if field.label %} - - {% endif %} - -{% endif %} diff --git a/templates/w3/layout/prepended_appended_text.html b/templates/w3/layout/prepended_appended_text.html deleted file mode 100644 index 1cccf79..0000000 --- a/templates/w3/layout/prepended_appended_text.html +++ /dev/null @@ -1,51 +0,0 @@ -{% load crispy_forms_field %} - -{% if field.is_hidden %} - {{ field }} -{% else %} -
- - {% if field.label and form_show_labels %} - - {% endif %} - -
-
- {% if crispy_prepended_text %} -
- {{ crispy_prepended_text }} -
- {% endif %} - {% if field|is_select and use_custom_control %} - {% if field.errors %} - {% crispy_field field 'class' 'custom-select is-invalid' %} - {% else %} - {% crispy_field field 'class' 'custom-select' %} - {% endif %} - {% else %} - {% if field.errors %} - {% crispy_field field 'class' 'form-control is-invalid' %} - {% else %} - {% crispy_field field 'class' 'form-control' %} - {% endif %} - {% endif %} - {% if crispy_appended_text %} -
- {{ crispy_appended_text }} -
- {% endif %} - {% if error_text_inline %} - {% include 'w3/layout/field_errors.html' %} - {% else %} - {% include 'w3/layout/field_errors_block.html' %} - {% endif %} -
- {% if not help_text_inline %} - {% include 'w3/layout/help_text.html' %} - {% endif %} -
- -
-{% endif %} diff --git a/templates/w3/layout/radioselect.html b/templates/w3/layout/radioselect.html deleted file mode 100644 index d9c9e5a..0000000 --- a/templates/w3/layout/radioselect.html +++ /dev/null @@ -1,29 +0,0 @@ -{% load crispy_forms_filters %} -{% load l10n %} - -
- - {% for group, options, index in field|optgroups %} - {% if group %}{{ group }}{% endif %} - {% for option in options %} -
- - - {% if field.errors and forloop.last and not inline_class and forloop.parentloop.last %} - {% include 'w3/layout/field_errors_block.html' %} - {% endif %} -
- {% endfor %} - {% endfor %} - {% if field.errors and inline_class %} -
- {# the following input is only meant to allow boostrap to render the error message as it has to be after an invalid input. As the input has no name, no data will be sent. #} - - {% include 'w3/layout/field_errors_block.html' %} -
- {% endif %} - - {% include 'w3/layout/help_text.html' %} -
diff --git a/templates/w3/layout/radioselect_inline.html b/templates/w3/layout/radioselect_inline.html deleted file mode 100644 index 22ba321..0000000 --- a/templates/w3/layout/radioselect_inline.html +++ /dev/null @@ -1,14 +0,0 @@ -{% if field.is_hidden %} - {{ field }} -{% else %} -
- - {% if field.label %} - - {% endif %} - - {% include 'w3/layout/radioselect.html' %} -
-{% endif %} diff --git a/templates/w3/layout/row.html b/templates/w3/layout/row.html deleted file mode 100644 index 6922605..0000000 --- a/templates/w3/layout/row.html +++ /dev/null @@ -1,3 +0,0 @@ -
- {{ fields }} -
diff --git a/templates/w3/layout/tab-link.html b/templates/w3/layout/tab-link.html deleted file mode 100644 index 8f68f7c..0000000 --- a/templates/w3/layout/tab-link.html +++ /dev/null @@ -1 +0,0 @@ -
  • {{ link.name|capfirst }}{% if tab.errors %}!{% endif %}
    • diff --git a/templates/w3/layout/tab.html b/templates/w3/layout/tab.html deleted file mode 100644 index 59a03bd..0000000 --- a/templates/w3/layout/tab.html +++ /dev/null @@ -1,6 +0,0 @@ - - {{ links }} - -
    - {{ content }} -
    diff --git a/templates/w3/layout/uneditable_input.html b/templates/w3/layout/uneditable_input.html deleted file mode 100644 index 0af45e4..0000000 --- a/templates/w3/layout/uneditable_input.html +++ /dev/null @@ -1,14 +0,0 @@ -{% load crispy_forms_field %} -
    - -
    - {% if field|is_select and use_custom_control %} - {% crispy_field field 'class' 'custom-select' 'disabled' 'disabled' %} - {% elif field|is_file %} - {% crispy_field field 'class' 'form-control-file' 'disabled' 'disabled' %} - {% else %} - {% crispy_field field 'class' 'form-control' 'disabled' 'disabled' %} - {% endif %} - {% include 'w3/layout/help_text.html' %} -
    -
    diff --git a/templates/w3/table_inline_formset.html b/templates/w3/table_inline_formset.html deleted file mode 100644 index a4b951d..0000000 --- a/templates/w3/table_inline_formset.html +++ /dev/null @@ -1,57 +0,0 @@ -{% load crispy_forms_tags %} -{% load crispy_forms_utils %} -{% load crispy_forms_field %} - -{% specialspaceless %} -{% if formset_tag %} -
    -{% endif %} - {% if formset_method|lower == 'post' and not disable_csrf %} - {% csrf_token %} - {% endif %} - -
    - {{ formset.management_form|crispy }} -
    - - - - {% if formset.readonly and not formset.queryset.exists %} - {% else %} - - {% for field in formset.forms.0 %} - {% if field.label and not field.is_hidden %} - - {{ field.label }}{% if field.field.required and not field|is_checkbox %}*{% endif %} - - {% endif %} - {% endfor %} - - {% endif %} - - - - - {% for field in formset.empty_form %} - {% include 'w3/field.html' with tag="td" form_show_labels=False %} - {% endfor %} - - - {% for form in formset %} - {% if form_show_errors and not form.is_extra %} - {% include "w3/errors.html" %} - {% endif %} - - - {% for field in form %} - {% include 'w3/field.html' with tag="td" form_show_labels=False %} - {% endfor %} - - {% endfor %} - - - - {% include "w3/inputs.html" %} - -{% if formset_tag %}{% endif %} -{% endspecialspaceless %} diff --git a/templates/w3/uni_form.html b/templates/w3/uni_form.html deleted file mode 100644 index 6b63a3f..0000000 --- a/templates/w3/uni_form.html +++ /dev/null @@ -1,11 +0,0 @@ -{% load crispy_forms_utils %} - -{% specialspaceless %} - {% if include_media %}{{ form.media }}{% endif %} - {% if form_show_errors %} - {% include "w3/errors.html" %} - {% endif %} - {% for field in form %} - {% include field_template %} - {% endfor %} -{% endspecialspaceless %} diff --git a/templates/w3/uni_formset.html b/templates/w3/uni_formset.html deleted file mode 100644 index 5c6cd36..0000000 --- a/templates/w3/uni_formset.html +++ /dev/null @@ -1,8 +0,0 @@ -{% with formset.management_form as form %} - {% include 'w3/uni_form.html' %} -{% endwith %} -{% for form in formset %} -
    - {% include 'w3/uni_form.html' %} -
    -{% endfor %} diff --git a/templates/w3/whole_uni_form.html b/templates/w3/whole_uni_form.html deleted file mode 100644 index df71b0b..0000000 --- a/templates/w3/whole_uni_form.html +++ /dev/null @@ -1,14 +0,0 @@ -{% load crispy_forms_utils %} - -{% specialspaceless %} -{% if form_tag %}
    {% endif %} - {% if form_method|lower == 'post' and not disable_csrf %} - {% csrf_token %} - {% endif %} - - {% include "w3/display_form.html" %} - - {% include "w3/inputs.html" %} - -{% if form_tag %}
    {% endif %} -{% endspecialspaceless %} diff --git a/templates/w3/whole_uni_formset.html b/templates/w3/whole_uni_formset.html deleted file mode 100644 index ba40759..0000000 --- a/templates/w3/whole_uni_formset.html +++ /dev/null @@ -1,30 +0,0 @@ -{% load crispy_forms_tags %} -{% load crispy_forms_utils %} - -{% specialspaceless %} -{% if formset_tag %} -
    -{% endif %} - {% if formset_method|lower == 'post' and not disable_csrf %} - {% csrf_token %} - {% endif %} - -
    - {{ formset.management_form|crispy }} -
    - - {% include "w3/errors_formset.html" %} - - {% for form in formset %} - {% include "w3/display_form.html" %} - {% endfor %} - - {% if inputs %} -
    - {% for input in inputs %} - {% include "w3/layout/baseinput.html" %} - {% endfor %} -
    - {% endif %} -{% if formset_tag %}
    {% endif %} -{% endspecialspaceless %} -- cgit v1.2.3 From c3c570276244f89038797bc8a463af88bd4cfd5c Mon Sep 17 00:00:00 2001 From: Matthew Lemon Date: Wed, 4 Sep 2024 15:02:30 +0100 Subject: wip: sorting out forms for adding Engagements --- core/static/css/output.css | 173 +++------------------ engagements/forms.py | 1 + .../templates/engagements/engagement_form.html | 114 ++++++++------ 3 files changed, 91 insertions(+), 197 deletions(-) diff --git a/core/static/css/output.css b/core/static/css/output.css index 1be34cb..67f0dc9 100644 --- a/core/static/css/output.css +++ b/core/static/css/output.css @@ -875,22 +875,6 @@ html { } } -.checkbox { - flex-shrink: 0; - --chkbg: var(--fallback-bc,oklch(var(--bc)/1)); - --chkfg: var(--fallback-b1,oklch(var(--b1)/1)); - height: 1.5rem; - width: 1.5rem; - cursor: pointer; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border-radius: var(--rounded-btn, 0.5rem); - border-width: 1px; - border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity))); - --tw-border-opacity: 0.2; -} - .label { display: flex; -webkit-user-select: none; @@ -947,40 +931,6 @@ html { align-items: center; } -.select { - display: inline-flex; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - height: 3rem; - min-height: 3rem; - padding-inline-start: 1rem; - padding-inline-end: 2.5rem; - font-size: 0.875rem; - line-height: 1.25rem; - line-height: 2; - border-radius: var(--rounded-btn, 0.5rem); - border-width: 1px; - border-color: transparent; - --tw-bg-opacity: 1; - background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); - background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), - linear-gradient(135deg, currentColor 50%, transparent 50%); - background-position: calc(100% - 20px) calc(1px + 50%), - calc(100% - 16.1px) calc(1px + 50%); - background-size: 4px 4px, - 4px 4px; - background-repeat: no-repeat; -} - -.select[multiple] { - height: auto; -} - .table { position: relative; width: 100%; @@ -1063,54 +1013,6 @@ html { } } -.checkbox:focus { - box-shadow: none; -} - -.checkbox:focus-visible { - outline-style: solid; - outline-width: 2px; - outline-offset: 2px; - outline-color: var(--fallback-bc,oklch(var(--bc)/1)); -} - -.checkbox:disabled { - border-width: 0px; - cursor: not-allowed; - border-color: transparent; - --tw-bg-opacity: 1; - background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity))); - opacity: 0.2; -} - -.checkbox:checked, - .checkbox[aria-checked="true"] { - background-repeat: no-repeat; - animation: checkmark var(--animation-input, 0.2s) ease-out; - background-color: var(--chkbg); - background-image: linear-gradient(-45deg, transparent 65%, var(--chkbg) 65.99%), - linear-gradient(45deg, transparent 75%, var(--chkbg) 75.99%), - linear-gradient(-45deg, var(--chkbg) 40%, transparent 40.99%), - linear-gradient( - 45deg, - var(--chkbg) 30%, - var(--chkfg) 30.99%, - var(--chkfg) 40%, - transparent 40.99% - ), - linear-gradient(-45deg, var(--chkfg) 50%, var(--chkbg) 50.99%); -} - -.checkbox:indeterminate { - --tw-bg-opacity: 1; - background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity))); - background-repeat: no-repeat; - animation: checkmark var(--animation-input, 0.2s) ease-out; - background-image: linear-gradient(90deg, transparent 80%, var(--chkbg) 80%), - linear-gradient(-90deg, transparent 80%, var(--chkbg) 80%), - linear-gradient(0deg, var(--chkbg) 43%, var(--chkfg) 43%, var(--chkfg) 57%, var(--chkbg) 57%); -} - @keyframes checkmark { 0% { background-position-y: 5px; @@ -1288,50 +1190,6 @@ html { } } -.select:focus { - box-shadow: none; - border-color: var(--fallback-bc,oklch(var(--bc)/0.2)); - outline-style: solid; - outline-width: 2px; - outline-offset: 2px; - outline-color: var(--fallback-bc,oklch(var(--bc)/0.2)); -} - -.select-disabled, - .select:disabled, - .select[disabled] { - cursor: not-allowed; - --tw-border-opacity: 1; - border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity))); - --tw-bg-opacity: 1; - background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))); - color: var(--fallback-bc,oklch(var(--bc)/0.4)); -} - -.select-disabled::-moz-placeholder, .select:disabled::-moz-placeholder, .select[disabled]::-moz-placeholder { - color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity))); - --tw-placeholder-opacity: 0.2; -} - -.select-disabled::placeholder, - .select:disabled::placeholder, - .select[disabled]::placeholder { - color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity))); - --tw-placeholder-opacity: 0.2; -} - -.select-multiple, - .select[multiple], - .select[size].select:not([size="1"]) { - background-image: none; - padding-right: 1rem; -} - -[dir="rtl"] .select { - background-position: calc(0% + 12px) calc(1px + 50%), - calc(0% + 16px) calc(1px + 50%); -} - @keyframes skeleton { from { background-position: 150%; @@ -1402,6 +1260,11 @@ html { margin-right: auto; } +.my-2 { + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} + .my-8 { margin-top: 2rem; margin-bottom: 2rem; @@ -1479,16 +1342,12 @@ html { display: grid; } -.h-4 { - height: 1rem; -} - .min-h-full { min-height: 100%; } -.w-4 { - width: 1rem; +.w-2\/3 { + width: 66.666667%; } .w-full { @@ -1772,6 +1631,10 @@ html { padding-bottom: 2rem; } +.pt-1 { + padding-top: 0.25rem; +} + .pt-6 { padding-top: 1.5rem; } @@ -1895,6 +1758,11 @@ html { color: rgb(79 70 229 / var(--tw-text-opacity)); } +.text-red-500 { + --tw-text-opacity: 1; + color: rgb(239 68 68 / var(--tw-text-opacity)); +} + .text-red-600 { --tw-text-opacity: 1; color: rgb(220 38 38 / var(--tw-text-opacity)); @@ -1992,11 +1860,6 @@ html { text-decoration-line: underline; } -.focus\:border-blue-500:focus { - --tw-border-opacity: 1; - border-color: rgb(59 130 246 / var(--tw-border-opacity)); -} - .focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; @@ -2065,6 +1928,10 @@ html { border-radius: 0.5rem; } + .sm\:p-2 { + padding: 0.5rem; + } + .sm\:p-6 { padding: 1.5rem; } diff --git a/engagements/forms.py b/engagements/forms.py index a1c3c44..e3ac85a 100644 --- a/engagements/forms.py +++ b/engagements/forms.py @@ -186,6 +186,7 @@ class EngagementCreateForm(forms.ModelForm): "proposed_start_date", "proposed_end_date", "engagement_type", + "external_party", "officers", ] labels = { diff --git a/engagements/templates/engagements/engagement_form.html b/engagements/templates/engagements/engagement_form.html index 3dfe249..a0cdea2 100644 --- a/engagements/templates/engagements/engagement_form.html +++ b/engagements/templates/engagements/engagement_form.html @@ -1,60 +1,87 @@ {% extends "core/base.html" %} {% load static %} +{% load widget_tweaks %} {% block title %}Create new engagement{% endblock title %} {% block content %} -
    -
    -
    -

    {{ title }}

    -
    -
    -
    -
    -

    Step 1

    -

    To roughly plan out future events, you provide the minimal details here: start date, end date (optional), the type of Engagement (Assessment, Inspection or Sampling), the external site or operation and finally the inspectors who are carrying out the work.

    -

    Step 2

    -

    So that we can track the finer details involved with an Assessment or Inspection, each Engagement comprises additional components, such as Planning, On-site and Reporting. Inspector time can be allocated to these components. In addition, each component can be associated with Instruments, such as DSCs, etc. After you create the overarching Engagement using this form, you will have the opportunity to add components.

    +
    +
    +
    +

    {{ title }}

    +
    +
    +
    +
    +

    Step 1

    +

    To roughly plan out future events, you provide the minimal details here: + start date, end date (optional), the type of + Engagement (Assessment, Inspection or Sampling), the external + site or operation and finally the inspectors who are carrying + out the work.

    +

    Step 2

    +

    So that we can track the finer details involved with an Assessment or Inspection, each + Engagement comprises additional components, such as Planning, + On-site and Reporting. Inspector time can be allocated to + these components. In addition, each component can be associated with + Instruments, such as DSCs, etc. After you create the + overarching Engagement using this form, you will have the opportunity to add components.

    +
    -
    -
    -

    Enter main details:

    -
    -
    +
    +

    Enter main details:

    +
    {% csrf_token %} - {% for field in form %} -
    - - {% if field.field.widget.input_type == 'checkbox' %} -
    - - {{ field.help_text|safe }} -
    - {% elif field.field.widget.input_type == 'select' %} - - {% else %} - - {% endif %} - {% if field.help_text and field.field.widget.input_type != 'checkbox' %} -

    {{ field.help_text|safe }}

    - {% endif %} - {% for error in field.errors %} -

    {{ error }}

    +
    + {{ form.external_party.label_tag }} +
    + {% render_field form.external_party class+="block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %} + {% for error in form.external_party.errors %} +

    {{ error }}

    + {% endfor %} +
    +
    + +
    + {{ form.proposed_start_date.label_tag }} +
    + {% render_field form.proposed_start_date class+="block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %} +
    +
    + +
    + {{ form.proposed_end_date.label_tag }} +
    + {% render_field form.proposed_end_date class+="block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %} +
    +
    + +
    + {{ form.engagement_type.label_tag }} +
    + {% render_field form.engagement_type class+="block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %} + {% for error in form.engagement_type.errors %} +

    {{ error }}

    {% endfor %}
    - {% endfor %} +
    + +
    + {{ form.officers.label_tag }} +
    + {% render_field form.officers class+="block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %} + {% for error in form.officers.errors %} +

    {{ error }}

    + {% endfor %} +
    +
    +
    -
    @@ -64,5 +91,4 @@
    -
    {% endblock content %} -- cgit v1.2.3 From 89eed2aaa438ca0c0db8d11692dee22e1825d493 Mon Sep 17 00:00:00 2001 From: Matthew Lemon Date: Thu, 5 Sep 2024 11:26:32 +0100 Subject: wip: Improved form for adding engagement components - travel, planning, regulation and reporting forms look a bit nicer --- core/static/css/output.css | 25 +++++++ .../engagements/engagement_effort_create.html | 86 ++++++++++++++++------ 2 files changed, 87 insertions(+), 24 deletions(-) diff --git a/core/static/css/output.css b/core/static/css/output.css index 67f0dc9..89f69f1 100644 --- a/core/static/css/output.css +++ b/core/static/css/output.css @@ -1302,6 +1302,10 @@ html { margin-left: 1rem; } +.mr-2 { + margin-right: 0.5rem; +} + .mt-1 { margin-top: 0.25rem; } @@ -1342,6 +1346,11 @@ html { display: grid; } +.size-6 { + width: 1.5rem; + height: 1.5rem; +} + .min-h-full { min-height: 100%; } @@ -1378,6 +1387,10 @@ html { flex-direction: column; } +.items-end { + align-items: flex-end; +} + .items-center { align-items: center; } @@ -1773,6 +1786,18 @@ html { color: rgb(255 255 255 / var(--tw-text-opacity)); } +.underline { + text-decoration-line: underline; +} + +.decoration-pink-500 { + text-decoration-color: #ec4899; +} + +.decoration-2 { + text-decoration-thickness: 2px; +} + .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); diff --git a/engagements/templates/engagements/engagement_effort_create.html b/engagements/templates/engagements/engagement_effort_create.html index b776fd8..86deb2c 100644 --- a/engagements/templates/engagements/engagement_effort_create.html +++ b/engagements/templates/engagements/engagement_effort_create.html @@ -1,34 +1,72 @@ {% extends "core/base.html" %} +{% load widget_tweaks %} {% block title %}Add {{ etype }} effort to Engagement{% endblock title %} {% block content %} -
    -
    -

    Register your {{ etype|lower }} effort for the {{ engagement.engagement_type.name|title }} event

    -

    {{ engagement.external_party }} on {{ engagement.proposed_start_date }}

    - - - {% csrf_token %} - {% for field in form %} -
    - - {{ field }} - {% if field.help_text %} -

    {{ field.help_text }}

    - {% endif %} -
    - {% endfor %} -
    - +
    +
    + + +
    +
    +

    Register your {{ etype|lower }} effort for + the {{ engagement.engagement_type.name|title }} event

    +
    + + + + +

    {{ engagement.external_party }}

    - + +
    + + + +

    + {% if engagement.proposed_start_date == engagement.proposed_end_date %} + {{ engagement.proposed_start_date|date:"j M Y" }} + {% else %} + {{ engagement.proposed_start_date|date:"j M Y" }} - {{ engagement.proposed_end_date|date:"j M Y" }} + {% endif %} +

    +
    + +
    + {% csrf_token %} + {% for field in form %} +
    +
    + +
    +
    + {% render_field field class+="block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %} + {% for error in field.errors %} + {{ field }} + {% endfor %} +
    + {% if field.help_text %} +

    {{ field.help_text }}

    + {% endif %} +
    + {% endfor %} +
    + +
    +
    +
    -
    {% endblock content %} -- cgit v1.2.3 From 707128730185f67d24ccfed2a9c7056129478fec Mon Sep 17 00:00:00 2001 From: Matthew Lemon Date: Thu, 5 Sep 2024 12:02:02 +0100 Subject: Effort form looking much better --- core/static/css/output.css | 51 ++++++++++++++++++++ engagements/forms.py | 11 ++++- .../engagements/engagement_effort_create.html | 56 +++++++++++++++------- 3 files changed, 99 insertions(+), 19 deletions(-) diff --git a/core/static/css/output.css b/core/static/css/output.css index 89f69f1..0a5c4ee 100644 --- a/core/static/css/output.css +++ b/core/static/css/output.css @@ -1255,6 +1255,22 @@ html { position: static; } +.absolute { + position: absolute; +} + +.relative { + position: relative; +} + +.right-2 { + right: 0.5rem; +} + +.top-2 { + top: 0.5rem; +} + .mx-auto { margin-left: auto; margin-right: auto; @@ -1346,11 +1362,20 @@ html { display: grid; } +.size-4 { + width: 1rem; + height: 1rem; +} + .size-6 { width: 1.5rem; height: 1.5rem; } +.h-6 { + height: 1.5rem; +} + .min-h-full { min-height: 100%; } @@ -1359,6 +1384,10 @@ html { width: 66.666667%; } +.w-6 { + width: 1.5rem; +} + .w-full { width: 100%; } @@ -1387,6 +1416,10 @@ html { flex-direction: column; } +.flex-wrap { + flex-wrap: wrap; +} + .items-end { align-items: flex-end; } @@ -1480,6 +1513,11 @@ html { border-top-width: 1px; } +.border-blue-200 { + --tw-border-opacity: 1; + border-color: rgb(191 219 254 / var(--tw-border-opacity)); +} + .border-blue-500 { --tw-border-opacity: 1; border-color: rgb(59 130 246 / var(--tw-border-opacity)); @@ -1712,6 +1750,10 @@ html { font-weight: 500; } +.font-normal { + font-weight: 400; +} + .font-semibold { font-weight: 600; } @@ -1746,6 +1788,11 @@ html { color: rgb(37 99 235 / var(--tw-text-opacity)); } +.text-blue-800 { + --tw-text-opacity: 1; + color: rgb(30 64 175 / var(--tw-text-opacity)); +} + .text-gray-500 { --tw-text-opacity: 1; color: rgb(107 114 128 / var(--tw-text-opacity)); @@ -1790,6 +1837,10 @@ html { text-decoration-line: underline; } +.decoration-blue-500 { + text-decoration-color: #3b82f6; +} + .decoration-pink-500 { text-decoration-color: #ec4899; } diff --git a/engagements/forms.py b/engagements/forms.py index e3ac85a..2532892 100644 --- a/engagements/forms.py +++ b/engagements/forms.py @@ -16,6 +16,10 @@ class EngagementEffortReportingCreateForm(forms.ModelForm): class Meta: model = EngagementEffort + help_texts = { + "is_planned": ("To distinguish planned events from retrospective recording."), + "officers": ("Include yourself here but you can also add effort for your colleagues.") + } fields = [ 'is_planned', 'proposed_start_date', @@ -63,7 +67,7 @@ class EngagementEffortRegulationCreateForm(forms.ModelForm): "notes", ] help_texts = { - "is_planned": ("
    To distinguish planned events from retrospective recording") + "is_planned": ("To distinguish planned events from retrospective recording.") } widgets = { "proposed_start_date": forms.DateTimeInput( @@ -93,7 +97,7 @@ class EngagementEffortPlanningCreateForm(forms.ModelForm): "notes", ] help_texts = { - "is_planned": ("
    To distinguish planned events from retrospective recording") + "is_planned": ("To distinguish planned events from retrospective recording.") } widgets = { "proposed_start_date": forms.DateTimeInput( @@ -126,6 +130,9 @@ class EngagementEffortTravelCreateForm(forms.ModelForm): "proposed_start_date": forms.DateTimeInput(attrs={"type": "datetime-local"}), "proposed_end_date": forms.DateTimeInput(attrs={"type": "datetime-local"}), } + help_texts = { + "is_planned": ("To distinguish planned events from retrospective recording.") + } class EngagementEffortCreateForm(forms.ModelForm): diff --git a/engagements/templates/engagements/engagement_effort_create.html b/engagements/templates/engagements/engagement_effort_create.html index 86deb2c..09a357a 100644 --- a/engagements/templates/engagements/engagement_effort_create.html +++ b/engagements/templates/engagements/engagement_effort_create.html @@ -5,14 +5,14 @@ {% block content %} -
    -
    - -
    -
    -

    Register your {{ etype|lower }} effort for - the {{ engagement.engagement_type.name|title }} event

    +
    + + + + + +

    Register {{ etype|lower }} time

    -

    {{ engagement.external_party }}

    +
    +

    {{ engagement.external_party }}

    +

    + ({{ engagement.engagement_type.name|title }}) +

    +
    @@ -30,13 +35,23 @@ -

    - {% if engagement.proposed_start_date == engagement.proposed_end_date %} - {{ engagement.proposed_start_date|date:"j M Y" }} - {% else %} - {{ engagement.proposed_start_date|date:"j M Y" }} - {{ engagement.proposed_end_date|date:"j M Y" }} - {% endif %} -

    +

    + {% if engagement.proposed_start_date == engagement.proposed_end_date %} + {{ engagement.proposed_start_date|date:"j M Y" }} + {% else %} + {{ engagement.proposed_start_date|date:"j M Y" }} - + {{ engagement.proposed_end_date|date:"j M Y" }} + {% endif %} +

    +
    + +
    +

    + Please fill out the form below to log your {{ etype|lower }} effort for this engagement. + Make sure to provide accurate information for proper tracking and reporting. +

    +
    +

    Help

    @@ -44,7 +59,7 @@ {% for field in form %}
    -
    @@ -55,7 +70,14 @@ {% endfor %}
    {% if field.help_text %} -

    {{ field.help_text }}

    +
    + + + +

    {{ field.help_text }}

    +
    {% endif %}
    {% endfor %} -- cgit v1.2.3