From 72c2981d6638ca3f862da0eb70e2a54acd41b373 Mon Sep 17 00:00:00 2001 From: imperosol Date: Sun, 22 Dec 2024 20:01:23 +0100 Subject: [PATCH] rework form style --- core/static/core/forms.scss | 755 ++++++++++++++++-- core/static/core/header.scss | 8 +- core/static/core/style.scss | 15 +- core/static/user/user_edit.scss | 76 +- core/templates/core/user_edit.jinja | 110 ++- core/views/forms.py | 3 + counter/forms.py | 2 + counter/templates/counter/product_list.jinja | 2 +- .../eboutic/eboutic_makecommand.jinja | 3 +- 9 files changed, 761 insertions(+), 213 deletions(-) diff --git a/core/static/core/forms.scss b/core/static/core/forms.scss index 36f41d945..ae6f8a21d 100644 --- a/core/static/core/forms.scss +++ b/core/static/core/forms.scss @@ -1,95 +1,145 @@ @import "colors"; /** - * Style related to forms + * Style related to forms and form inputs */ -a.button, -button, -input[type="button"], -input[type="submit"], -input[type="reset"], -input[type="file"] { - border: none; - text-decoration: none; - background-color: $background-button-color; - padding: 0.4em; - margin: 0.1em; - font-size: 1.2em; - border-radius: 5px; - color: black; - - &:hover { - background: hsl(0, 0%, 83%); +/** + * Inputs that are not enclosed in a form element. + */ +:not(form) { + a.button, + button, + input[type="button"], + input[type="submit"], + input[type="reset"], + input[type="file"] { + border: none; + text-decoration: none; + background-color: $background-button-color; + padding: 0.4em; + margin: 0.1em; + font-size: 1.2em; + border-radius: 5px; + color: black; + + &:hover { + background: hsl(0, 0%, 83%); + } } -} -a.button, -input[type="button"], -input[type="submit"], -input[type="reset"], -input[type="file"] { - font-weight: bold; -} + a.button, + input[type="button"], + input[type="submit"], + input[type="reset"], + input[type="file"] { + font-weight: bold; + } -a.button:not(:disabled), -button:not(:disabled), -input[type="button"]:not(:disabled), -input[type="submit"]:not(:disabled), -input[type="reset"]:not(:disabled), -input[type="checkbox"]:not(:disabled), -input[type="file"]:not(:disabled) { - cursor: pointer; -} + a.button:not(:disabled), + button:not(:disabled), + input[type="button"]:not(:disabled), + input[type="submit"]:not(:disabled), + input[type="reset"]:not(:disabled), + input[type="checkbox"]:not(:disabled), + input[type="file"]:not(:disabled) { + cursor: pointer; + } -input, -textarea[type="text"], -[type="number"] { - border: none; - text-decoration: none; - background-color: $background-button-color; - padding: 0.4em; - margin: 0.1em; - font-size: 1.2em; - border-radius: 5px; - max-width: 95%; -} + input, + textarea[type="text"], + [type="number"] { + border: none; + text-decoration: none; + background-color: $background-button-color; + padding: 0.4em; + margin: 0.1em; + font-size: 1.2em; + border-radius: 5px; + max-width: 95%; + } -textarea { - border: none; - text-decoration: none; - background-color: $background-button-color; - padding: 7px; - font-size: 1.2em; - border-radius: 5px; - font-family: sans-serif; -} + textarea { + border: none; + text-decoration: none; + background-color: $background-button-color; + padding: 7px; + font-size: 1.2em; + border-radius: 5px; + font-family: sans-serif; + } -select { - border: none; - text-decoration: none; - font-size: 1.2em; - background-color: $background-button-color; - padding: 10px; - border-radius: 5px; - cursor: pointer; -} + select { + border: none; + text-decoration: none; + font-size: 1.2em; + background-color: $background-button-color; + padding: 10px; + border-radius: 5px; + cursor: pointer; + } -a:not(.button) { - text-decoration: none; - color: $primary-dark-color; + a:not(.button) { + text-decoration: none; + color: $primary-dark-color; - &:hover { - color: $primary-light-color; - } + &:hover { + color: $primary-light-color; + } - &:active { - color: $primary-color; + &:active { + color: $primary-color; + } } } form { - margin: 0 auto 10px; + // Input size - used for height/padding calculations + --nf-input-size: 1rem; + + --nf-input-font-size: calc(var(--nf-input-size) * 0.875); + --nf-small-font-size: calc(var(--nf-input-size) * 0.875); + + // Input + --nf-input-color: $text-color; + --nf-input-border-radius: 0.25rem; + --nf-input-placeholder-color: #929292; + --nf-input-border-color: #c0c4c9; + --nf-input-border-width: 1px; + --nf-input-border-style: solid; + --nf-input-border-bottom-width: 2px; + --nf-input-focus-border-color: #3b4ce2; + --nf-input-background-color: #f3f6f7; + + // Valid/invalid + --nf-invalid-input-border-color: var(--nf-input-border-color); + --nf-invalid-input-background-color: var(--nf-input-background-color); + --nf-invalid-input-color: var(--nf-input-color); + --nf-valid-input-border-color: var(--nf-input-border-color); + --nf-valid-input-background-color: var(--nf-input-background-color); + --nf-valid-input-color: inherit; + --nf-invalid-input-border-bottom-color: red; + --nf-valid-input-border-bottom-color: green; + + // Label variables + --nf-label-font-size: var(--nf-small-font-size); + --nf-label-color: #374151; + --nf-label-font-weight: 500; + + // Slider variables + --nf-slider-track-background: #dfdfdf; + --nf-slider-track-height: 0.25rem; + --nf-slider-thumb-size: calc(var(--nf-slider-track-height) * 4); + --nf-slider-track-border-radius: var(--nf-slider-track-height); + --nf-slider-thumb-border-width: 2px; + --nf-slider-thumb-border-focus-width: 1px; + --nf-slider-thumb-border-color: #ffffff; + --nf-slider-thumb-background: var(--nf-input-focus-border-color); + + display: block; + margin: calc(var(--nf-input-size) * 1.5) auto 10px; + line-height: 1; + white-space: nowrap; .helptext { margin-top: .25rem; @@ -107,9 +157,16 @@ form { } } + // ------------- LABEL label, legend { + font-weight: var(--nf-label-font-weight); display: block; - margin-bottom: 8px; + margin-bottom: calc(var(--nf-input-size) / 2); + white-space: initial; + + + small { + font-style: initial; + } &.required:after { margin-left: 4px; @@ -118,7 +175,555 @@ form { } } + // wrap texts + label, legend, ul.errorlist>li, .helptext { + text-wrap: wrap; + } + .choose_file_widget { display: none; } + + // ------------- SMALL + + small { + display: block; + font-weight: normal; + opacity: 0.75; + font-size: var(--nf-small-font-size); + margin-bottom: calc(var(--nf-input-size) * 0.75); + + &:last-child { + margin-bottom: 0; + } + } + + // ------------- LEGEND + + legend { + font-weight: var(--nf-label-font-weight); + display: block; + margin-bottom: calc(var(--nf-input-size) / 5); + } + + .form-group, + > p, + > div { + margin-top: calc(var(--nf-input-size) / 2); + } + + // ------------ ERROR LIST + ul.errorlist { + list-style-type: none; + margin: 0; + opacity: 60%; + color: var(--nf-invalid-input-border-bottom-color); + + > li { + text-align: left; + margin-top: 5px; + } + } + + input[type="text"], + input[type="email"], + input[type="tel"], + input[type="url"], + input[type="password"], + input[type="number"], + input[type="date"], + input[type="week"], + input[type="time"], + input[type="month"], + input[type="search"], + textarea, + select { + min-width: 300px; + + &.grow { + width: 95%; + } + } + + input[type="text"], + input[type="checkbox"], + input[type="radio"], + input[type="email"], + input[type="tel"], + input[type="url"], + input[type="password"], + input[type="number"], + input[type="date"], + input[type="datetime-local"], + input[type="week"], + input[type="time"], + input[type="month"], + input[type="search"], + textarea, + select { + background: var(--nf-input-background-color); + font-size: var(--nf-input-font-size); + border-color: var(--nf-input-border-color); + border-width: var(--nf-input-border-width); + border-style: var(--nf-input-border-style); + box-shadow: none; + border-radius: var(--nf-input-border-radius); + border-bottom-width: var(--nf-input-border-bottom-width); + color: var(--nf-input-color); + max-width: 95%; + box-sizing: border-box; + padding: calc(var(--nf-input-size) * 0.65); + line-height: normal; + appearance: none; + transition: all 0.15s ease-out; + + // ------------- VALID/INVALID + + &.error { + &:not(:placeholder-shown):invalid { + background-color: var(--nf-invalid-input-background-color); + border-color: var(--nf-valid-input-border-color); + border-bottom-color: var(--nf-invalid-input-border-bottom-color); + color: var(--nf-invalid-input-color); + + // Reset to default when focus + + &:focus { + background-color: var(--nf-input-background-color); + border-color: var(--nf-input-border-color); + color: var(--nf-input-color); + } + } + + &:not(:placeholder-shown):valid { + background-color: var(--nf-valid-input-background-color); + border-color: var(--nf-valid-input-border-color); + border-bottom-color: var(--nf-valid-input-border-bottom-color); + color: var(--nf-valid-input-color); + } + } + + // ------------- DISABLED + + &:disabled { + cursor: not-allowed; + opacity: 0.75; + } + + // -------- PLACEHOLDERS + + &::-webkit-input-placeholder { + color: var(--nf-input-placeholder-color); + letter-spacing: 0; + } + + &:-ms-input-placeholder { + color: var(--nf-input-placeholder-color); + letter-spacing: 0; + } + + &::-moz-placeholder { + color: var(--nf-input-placeholder-color); + letter-spacing: 0; + } + + &:-moz-placeholder { + color: var(--nf-input-placeholder-color); + letter-spacing: 0; + } + + // -------- FOCUS + + &:focus { + outline: none; + border-color: var(--nf-input-focus-border-color); + } + + // -------- ADDITIONAL TEXT BENEATH INPUT FIELDS + + + small { + margin-top: 0.5rem; + } + + // -------- ICONS + + --icon-padding: calc(var(--nf-input-size) * 2.25); + --icon-background-offset: calc(var(--nf-input-size) * 0.75); + + &.icon-left { + background-position: left var(--icon-background-offset) bottom 50%; + padding-left: var(--icon-padding); + background-size: var(--nf-input-size); + } + + &.icon-right { + background-position: right var(--icon-background-offset) bottom 50%; + padding-right: var(--icon-padding); + background-size: var(--nf-input-size); + } + + // When a field has a icon and is autofilled, the background image is removed + // by the browser. To negate this we reset the padding, not great but okay + + &:-webkit-autofill { + padding: calc(var(--nf-input-size) * 0.75) !important; + } + } + + // -------- SEARCH + + input[type="search"] { + &:placeholder-shown { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); + background-position: left calc(var(--nf-input-size) * 0.75) bottom 50%; + padding-left: calc(var(--nf-input-size) * 2.25); + background-size: var(--nf-input-size); + background-repeat: no-repeat; + } + + &::-webkit-search-cancel-button { + -webkit-appearance: none; + width: var(--nf-input-size); + height: var(--nf-input-size); + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E"); + } + + &:focus { + padding-left: calc(var(--nf-input-size) * 0.75); + background-position: left calc(var(--nf-input-size) * -1) bottom 50%; + } + } + + // -------- EMAIL + + input[type="email"][class^="icon"] { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-at-sign'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + } + + // -------- TEL + + input[type="tel"][class^="icon"] { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-phone'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + } + + // -------- URL + + input[type="url"][class^="icon"] { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-link'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + } + + // -------- PASSWORD + + input[type="password"] { + letter-spacing: 2px; + + &[class^="icon"] { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-lock'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + } + } + + // -------- RANGE + + input[type="range"] { + -webkit-appearance: none; + width: 100%; + cursor: pointer; + + &:focus { + outline: none; + } + + // NOTE: for some reason grouping these doesn't work (just like :placeholder) + + @mixin track { + width: 100%; + height: var(--nf-slider-track-height); + background: var(--nf-slider-track-background); + border-radius: var(--nf-slider-track-border-radius); + } + + @mixin thumb { + height: var(--nf-slider-thumb-size); + width: var(--nf-slider-thumb-size); + border-radius: var(--nf-slider-thumb-size); + background: var(--nf-slider-thumb-background); + border: 0; + border: var(--nf-slider-thumb-border-width) solid var(--nf-slider-thumb-border-color); + appearance: none; + } + + @mixin thumb-focus { + box-shadow: 0 0 0 var(--nf-slider-thumb-border-focus-width) var(--nf-slider-thumb-background); + } + + &::-webkit-slider-runnable-track { + @include track; + } + + &::-moz-range-track { + @include track; + } + + &::-webkit-slider-thumb { + @include thumb; + margin-top: calc( + ( + calc(var(--nf-slider-track-height) - var(--nf-slider-thumb-size)) * + 0.5 + ) + ); + } + + &::-moz-range-thumb { + @include thumb; + box-sizing: border-box; + } + + &:focus::-webkit-slider-thumb { + @include thumb-focus; + } + + &:focus::-moz-range-thumb { + @include thumb-focus; + } + } + + // -------- COLOR + + input[type="color"] { + border: var(--nf-input-border-width) solid var(--nf-input-border-color); + border-bottom-width: var(--nf-input-border-bottom-width); + height: calc(var(--nf-input-size) * 2); + border-radius: var(--nf-input-border-radius); + padding: calc(var(--nf-input-border-width) * 2); + + &:focus { + outline: none; + border-color: var(--nf-input-focus-border-color); + } + + &::-webkit-color-swatch-wrapper { + padding: 5%; + } + + @mixin swatch { + border-radius: calc(var(--nf-input-border-radius) / 2); + border: none; + } + + &::-moz-color-swatch { + @include swatch; + } + + &::-webkit-color-swatch { + @include swatch; + } + } + + // --------------- NUMBER + + input[type="number"] { + width: auto; + } + + // --------------- DATES + + input[type="date"], + input[type="datetime-local"], + input[type="week"], + input[type="month"] { + min-width: 300px; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-calendar'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E"); + } + + input[type="time"] { + min-width: 6em; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-clock'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E"); + } + + input[type="date"], + input[type="datetime-local"], + input[type="week"], + input[type="time"], + input[type="month"] { + background-position: right calc(var(--nf-input-size) * 0.75) bottom 50%; + background-repeat: no-repeat; + background-size: var(--nf-input-size); + + &::-webkit-inner-spin-button, + &::-webkit-calendar-picker-indicator { + -webkit-appearance: none; + cursor: pointer; + opacity: 0; + } + + // FireFox reset + // FF has restricted control of styling the date/time inputs. + // That's why we don't show icons for FF users, and leave basic styling in place. + @-moz-document url-prefix() { + min-width: auto; + width: auto; + background-image: none; + } + } + + // --------------- TEXAREA + + textarea { + height: auto; + } + + // --------------- CHECKBOX/RADIO + + input[type="checkbox"], + input[type="radio"] { + width: var(--nf-input-size); + height: var(--nf-input-size); + padding: inherit; + margin: 0; + display: inline-block; + vertical-align: top; + border-radius: calc(var(--nf-input-border-radius) / 2); + border-width: var(--nf-input-border-width); + cursor: pointer; + background-position: center center; + + &:focus:not(:checked) { + border: var(--nf-input-border-width) solid var(--nf-input-focus-border-color); + outline: none; + } + + &:hover { + border: var(--nf-input-border-width) solid var(--nf-input-focus-border-color); + } + + + label { + display: inline-block; + margin-bottom: 0; + padding-left: calc(var(--nf-input-size) / 2.5); + font-weight: normal; + user-select: none; + cursor: pointer; + max-width: calc(100% - calc(var(--nf-input-size) * 2)); + line-height: normal; + + > small { + margin-top: calc(var(--nf-input-size) / 4); + } + } + } + + input[type="checkbox"] { + &:checked { + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center center/85%; + background-color: var(--nf-input-focus-border-color); + border-color: var(--nf-input-focus-border-color); + } + } + + input[type="radio"] { + border-radius: 100%; + + &:checked { + background-color: var(--nf-input-focus-border-color); + border-color: var(--nf-input-focus-border-color); + box-shadow: 0 0 0 3px white inset; + } + } + + // --------------- SWITCH + + --switch-orb-size: var(--nf-input-size); + --switch-orb-offset: calc(var(--nf-input-border-width) * 2); + --switch-width: calc(var(--nf-input-size) * 2.5); + --switch-height: calc( + calc(var(--nf-input-size) * 1.25) + var(--switch-orb-offset) + ); + + input[type="checkbox"].switch { + width: var(--switch-width); + height: var(--switch-height); + border-radius: var(--switch-height); + position: relative; + + &::after { + background: var(--nf-input-border-color); + border-radius: var(--switch-orb-size); + height: var(--switch-orb-size); + left: var(--switch-orb-offset); + position: absolute; + top: 50%; + transform: translateY(-50%); + width: var(--switch-orb-size); + content: ""; + transition: all 0.2s ease-out; + } + + + label { + margin-top: calc(var(--switch-height) / 8); + } + + &:checked { + background: var(--nf-input-focus-border-color) none initial; + + &::after { + transform: translateY(-50%) translateX( + calc(calc(var(--switch-width) / 2) - var(--switch-orb-offset)) + ); + background: white; + } + } + } + + // ---------------- FILE + + input[type="file"] { + background: rgba(0, 0, 0, 0.025); + padding: calc(var(--nf-input-size) / 2); + display: block; + font-weight: normal; + width: 95%; + box-sizing: border-box; + border-radius: var(--nf-input-border-radius); + border: 1px dashed var(--nf-input-border-color); + outline: none; + cursor: pointer; + + &:focus, + &:hover { + border-color: var(--nf-input-focus-border-color); + } + + @mixin button { + background: var(--nf-input-focus-border-color); + border: 0; + appearance: none; + border-radius: var(--nf-input-border-radius); + color: white; + margin-right: 0.75rem; + outline: none; + cursor: pointer; + } + + &::file-selector-button { + @include button(); + } + + &::-webkit-file-upload-button { + @include button(); + } + } + + // ---------------- SELECT + + select { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); + background-position: right calc(var(--nf-input-size) * 0.75) bottom 50%; + background-repeat: no-repeat; + background-size: var(--nf-input-size); + } } diff --git a/core/static/core/header.scss b/core/static/core/header.scss index e1430bba6..fd2cae8cc 100644 --- a/core/static/core/header.scss +++ b/core/static/core/header.scss @@ -33,8 +33,8 @@ $hovered-red-text-color: #ff4d4d; flex-direction: row; gap: 10px; - >a { - color: $text-color; + > a { + color: $text-color!important; } &:hover>a { @@ -395,9 +395,9 @@ $hovered-red-text-color: #ff4d4d; } >input[type=text] { - box-sizing: border-box; - max-width: 100%; width: 100%; + min-width: unset; + border: unset; height: 35px; border-radius: 5px; font-size: .9em; diff --git a/core/static/core/style.scss b/core/static/core/style.scss index 61eb71e0c..43f76bea9 100644 --- a/core/static/core/style.scss +++ b/core/static/core/style.scss @@ -439,6 +439,11 @@ body { column-gap: $i * $col-gap; } } + + // Make an element of the row take as much space as needed + .grow { + flex: 1; + } } /*---------------------------------NEWS--------------------------------*/ @@ -1451,16 +1456,6 @@ footer { width: 97%; } -#user_edit { - * { - text-align: center; - } - - img { - width: 100px; - } -} - #cash_summary_form label, .inline { display: inline; diff --git a/core/static/user/user_edit.scss b/core/static/user/user_edit.scss index 94b6ad6c7..888ae729b 100644 --- a/core/static/user/user_edit.scss +++ b/core/static/user/user_edit.scss @@ -1,26 +1,9 @@ - @media (max-width: 750px) { .title { text-align: center; } } -.field-error { - height: auto !important; - - > ul { - list-style-type: none; - margin: 0; - color: indianred; - - > li { - text-align: left !important; - line-height: normal; - margin-top: 5px; - } - } -} - .profile { &-visible { display: flex; @@ -87,11 +70,7 @@ max-height: 100%; } - > i { - font-size: 32px; - } - - >p { + > p { text-align: left !important; width: 100% !important; } @@ -107,16 +86,6 @@ > div { max-width: 100%; - > input { - font-weight: normal; - cursor: pointer; - text-align: left !important; - } - - > button { - min-width: 30%; - } - @media (min-width: 750px) { height: auto; align-items: center; @@ -124,8 +93,8 @@ overflow: hidden; > input { - width: 70%; font-size: .6em; + &::file-selector-button { height: 30px; } @@ -167,7 +136,7 @@ max-width: 100%; } - >* { + > * { width: 100%; max-width: 300px; @@ -181,45 +150,22 @@ } &-content { - - >* { + > * { box-sizing: border-box; text-align: left !important; - line-height: 40px; - max-width: 100%; - width: 100%; - height: 40px; margin: 0; - >* { + > * { text-align: left !important; } } + } - - >textarea { - height: 120px; - min-height: 40px; - min-width: 300px; - max-width: 300px; - line-height: initial; - - @media (max-width: 750px) { - max-width: 100%; - } - } - - >input[type="file"] { - font-size: small; - line-height: 30px; - } - - >input[type="checkbox"] { - width: 20px; - height: 20px; - margin: 0; - float: left; - } + textarea { + height: 7rem; + } + .final-actions { + text-align: center; } } } \ No newline at end of file diff --git a/core/templates/core/user_edit.jinja b/core/templates/core/user_edit.jinja index aa797ddf2..64227d8e3 100644 --- a/core/templates/core/user_edit.jinja +++ b/core/templates/core/user_edit.jinja @@ -63,9 +63,7 @@ {%- trans -%}Delete{%- endtrans -%} -

- {{ form[field_name].label }} -

+ {{ form[field_name].label_tag() }} {{ form[field_name].errors }} {%- else -%} {% trans %}To edit your profile picture, ask a member of the AE{% endtrans %} @@ -118,68 +116,68 @@ {# All fields #}
{%- for field in form -%} - {%- - if field.name in ["quote","profile_pict","avatar_pict","scrub_pict","is_subscriber_viewable","forum_signature"] - -%} - {%- continue -%} - {%- endif -%} + {%- if field.name in ["quote","profile_pict","avatar_pict","scrub_pict","is_subscriber_viewable","forum_signature"] -%} + {%- continue -%} + {%- endif -%} -
-
{{ field.label }}
-
- {{ field }} - {%- if field.errors -%} -
{{ field.errors }}
- {%- endif -%} +
+
{{ field.label }}
+
+ {{ field }} + {%- if field.errors -%} +
{{ field.errors }}
+ {%- endif -%} +
-
-{%- endfor -%} -
+ {%- endfor -%} +
{# Textareas #} -
- {%- for field in [form.quote, form.forum_signature] -%} -
-
{{ field.label }}
-
- {{ field }} - {%- if field.errors -%} -
{{ field.errors }}
- {%- endif -%} -
+
+ {%- for field in [form.quote, form.forum_signature] -%} +
+
{{ field.label }}
+
+ {{ field }} + {%- if field.errors -%} +
{{ field.errors }}
+ {%- endif -%} +
+
+ {%- endfor -%}
- {%- endfor -%} -
{# Checkboxes #} -
- {{ form.is_subscriber_viewable }} - {{ form.is_subscriber_viewable.label }} -
+
+ {{ form.is_subscriber_viewable }} + {{ form.is_subscriber_viewable.label }} +
+
+ + {%- if form.instance == user -%} +

+ {%- trans -%}Change my password{%- endtrans -%} +

+ {%- elif user.is_root -%} +

+ + {%- trans -%}Change user password{%- endtrans -%} + +

+ {%- endif -%} + +

+ +

+
+ -{%- if form.instance == user -%} -

- {%- trans -%}Change my password{%- endtrans -%} -

-{%- elif user.is_root -%}

- - {%- trans -%}Change user password{%- endtrans -%} - + {%- trans -%}Username: {%- endtrans -%} {{ form.instance.username }} +
+ {%- if form.instance.customer -%} + {%- trans -%}Account number: {%- endtrans -%} {{ form.instance.customer.account_id }} + {%- endif -%}

-{%- endif -%} - -

- -

- - -

- {%- trans -%}Username: {%- endtrans -%} {{ form.instance.username }} -
- {%- if form.instance.customer -%} - {%- trans -%}Account number: {%- endtrans -%} {{ form.instance.customer.account_id }} - {%- endif -%} -

{%- endblock -%} diff --git a/core/views/forms.py b/core/views/forms.py index 8a998ab01..c1d02b940 100644 --- a/core/views/forms.py +++ b/core/views/forms.py @@ -173,6 +173,9 @@ class Meta: class UserProfileForm(forms.ModelForm): """Form handling the user profile, managing the files""" + required_css_class = "required" + error_css_class = "error" + class Meta: model = User fields = [ diff --git a/counter/forms.py b/counter/forms.py index 80a0e0ad5..7103d4d7c 100644 --- a/counter/forms.py +++ b/counter/forms.py @@ -47,6 +47,8 @@ class Meta: class StudentCardForm(forms.ModelForm): """Form for adding student cards""" + error_css_class = "error" + class Meta: model = StudentCard fields = ["uid"] diff --git a/counter/templates/counter/product_list.jinja b/counter/templates/counter/product_list.jinja index 3a52e7473..0ee8dffa6 100644 --- a/counter/templates/counter/product_list.jinja +++ b/counter/templates/counter/product_list.jinja @@ -32,7 +32,7 @@ x-model.debounce.500ms="search" /> -
+
{% trans %}Product state{% endtrans %}
diff --git a/eboutic/templates/eboutic/eboutic_makecommand.jinja b/eboutic/templates/eboutic/eboutic_makecommand.jinja index 845e83024..e18514e91 100644 --- a/eboutic/templates/eboutic/eboutic_makecommand.jinja +++ b/eboutic/templates/eboutic/eboutic_makecommand.jinja @@ -77,8 +77,7 @@ > {% csrf_token %} {{ billing_form }} -
-
+