From 2fb1318f60ee6930167d2d0477cd6fe999b35eea Mon Sep 17 00:00:00 2001 From: Hendrik Huyskens Date: Tue, 24 Sep 2024 13:38:39 +0200 Subject: [PATCH 01/16] Add tailwind to project --- Makefile | 3 + .../static/css/tailwind.css | 555 ++++++ .../static/css/tailwind_input.css | 3 + building_dialouge_webapp/templates/base.html | 3 +- package-lock.json | 1500 +++++++++++++++++ package.json | 5 + tailwind.config.js | 8 + 7 files changed, 2076 insertions(+), 1 deletion(-) create mode 100644 Makefile create mode 100644 building_dialouge_webapp/static/css/tailwind.css create mode 100644 building_dialouge_webapp/static/css/tailwind_input.css create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 tailwind.config.js diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..b3c86a3 --- /dev/null +++ b/Makefile @@ -0,0 +1,3 @@ + +tailwind: + npx tailwindcss -i building_dialouge_webapp/static/css/tailwind_input.css -o building_dialouge_webapp/static/css/tailwind.css diff --git a/building_dialouge_webapp/static/css/tailwind.css b/building_dialouge_webapp/static/css/tailwind.css new file mode 100644 index 0000000..619203b --- /dev/null +++ b/building_dialouge_webapp/static/css/tailwind.css @@ -0,0 +1,555 @@ +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; + --tw-contain-size: ; + --tw-contain-layout: ; + --tw-contain-paint: ; + --tw-contain-style: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; + --tw-contain-size: ; + --tw-contain-layout: ; + --tw-contain-paint: ; + --tw-contain-style: ; +} + +/* +! tailwindcss v3.4.13 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +7. Disable tap highlights on iOS +*/ + +html, +:host { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ + -webkit-tap-highlight-color: transparent; + /* 7 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font-family by default. +2. Use the user's configured `mono` font-feature-settings by default. +3. Use the user's configured `mono` font-variation-settings by default. +4. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-feature-settings: normal; + /* 2 */ + font-variation-settings: normal; + /* 3 */ + font-size: 1em; + /* 4 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + letter-spacing: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +input:where([type='button']), +input:where([type='reset']), +input:where([type='submit']) { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} diff --git a/building_dialouge_webapp/static/css/tailwind_input.css b/building_dialouge_webapp/static/css/tailwind_input.css new file mode 100644 index 0000000..b5c61c9 --- /dev/null +++ b/building_dialouge_webapp/static/css/tailwind_input.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/building_dialouge_webapp/templates/base.html b/building_dialouge_webapp/templates/base.html index e6403a3..ae44408 100644 --- a/building_dialouge_webapp/templates/base.html +++ b/building_dialouge_webapp/templates/base.html @@ -26,6 +26,7 @@ {% compress css %} + {% endcompress %} {% endblock css %} {% compress css %} - + {% endcompress %} {% endblock css %} diff --git a/config/settings/base.py b/config/settings/base.py index efafed8..88e7e79 100644 --- a/config/settings/base.py +++ b/config/settings/base.py @@ -317,5 +317,10 @@ INSTALLED_APPS += ["compressor"] STATICFILES_FINDERS += ["compressor.finders.CompressorFinder"] +# django-libsass +# ------------------------------------------------------------------------------ +COMPRESS_PRECOMPILERS = [("text/x-scss", "django_libsass.SassCompiler")] +COMPRESS_CACHEABLE_PRECOMPILERS = (("text/x-scss", "django_libsass.SassCompiler"),) + # Your stuff... # ------------------------------------------------------------------------------ diff --git a/requirements/base.txt b/requirements/base.txt index c8efc8d..229d94a 100644 --- a/requirements/base.txt +++ b/requirements/base.txt @@ -19,3 +19,4 @@ django-crispy-forms==2.1 # https://github.com/django-crispy-forms/django-crispy crispy-bootstrap5==2024.2 # https://github.com/django-crispy-forms/crispy-bootstrap5 django-compressor==4.4 # https://github.com/django-compressor/django-compressor django-redis==5.4.0 # https://github.com/jazzband/django-redis +django-libsass==0.9 From c198d2a3241c14732b3e6e169a43bceafad5ca0b Mon Sep 17 00:00:00 2001 From: Hendrik Huyskens Date: Mon, 7 Oct 2024 09:16:55 +0200 Subject: [PATCH 04/16] Removed tailwind --- Makefile | 3 - .../static/css/tailwind.css | 653 ------------------ .../static/css/tailwind_input.css | 3 - building_dialouge_webapp/templates/base.html | 1 - 4 files changed, 660 deletions(-) delete mode 100644 Makefile delete mode 100644 building_dialouge_webapp/static/css/tailwind.css delete mode 100644 building_dialouge_webapp/static/css/tailwind_input.css diff --git a/Makefile b/Makefile deleted file mode 100644 index b3c86a3..0000000 --- a/Makefile +++ /dev/null @@ -1,3 +0,0 @@ - -tailwind: - npx tailwindcss -i building_dialouge_webapp/static/css/tailwind_input.css -o building_dialouge_webapp/static/css/tailwind.css diff --git a/building_dialouge_webapp/static/css/tailwind.css b/building_dialouge_webapp/static/css/tailwind.css deleted file mode 100644 index b6eefb0..0000000 --- a/building_dialouge_webapp/static/css/tailwind.css +++ /dev/null @@ -1,653 +0,0 @@ -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; - --tw-contain-size: ; - --tw-contain-layout: ; - --tw-contain-paint: ; - --tw-contain-style: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; - --tw-contain-size: ; - --tw-contain-layout: ; - --tw-contain-paint: ; - --tw-contain-style: ; -} - -/* -! tailwindcss v3.4.13 | MIT License | https://tailwindcss.com -*/ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -7. Disable tap highlights on iOS -*/ - -html, -:host { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ - -webkit-tap-highlight-color: transparent; - /* 7 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font-family by default. -2. Use the user's configured `mono` font-feature-settings by default. -3. Use the user's configured `mono` font-variation-settings by default. -4. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - /* 1 */ - font-feature-settings: normal; - /* 2 */ - font-variation-settings: normal; - /* 3 */ - font-size: 1em; - /* 4 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - letter-spacing: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -input:where([type='button']), -input:where([type='reset']), -input:where([type='submit']) { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden] { - display: none; -} - -.container { - width: 100%; -} - -@media (min-width: 640px) { - .container { - max-width: 640px; - } -} - -@media (min-width: 768px) { - .container { - max-width: 768px; - } -} - -@media (min-width: 1024px) { - .container { - max-width: 1024px; - } -} - -@media (min-width: 1280px) { - .container { - max-width: 1280px; - } -} - -@media (min-width: 1536px) { - .container { - max-width: 1536px; - } -} - -.collapse { - visibility: collapse; -} - -.static { - position: static; -} - -.my-4 { - margin-top: 1rem; - margin-bottom: 1rem; -} - -.mb-1 { - margin-bottom: 0.25rem; -} - -.mb-3 { - margin-bottom: 0.75rem; -} - -.mb-4 { - margin-bottom: 1rem; -} - -.mr-auto { - margin-right: auto; -} - -.block { - display: block; -} - -.inline { - display: inline; -} - -.table { - display: table; -} - -.px-4 { - padding-left: 1rem; - padding-right: 1rem; -} - -.py-4 { - padding-top: 1rem; - padding-bottom: 1rem; -} - -.text-3xl { - font-size: 1.875rem; - line-height: 2.25rem; -} - -.font-bold { - font-weight: 700; -} - -.underline { - text-decoration-line: underline; -} diff --git a/building_dialouge_webapp/static/css/tailwind_input.css b/building_dialouge_webapp/static/css/tailwind_input.css deleted file mode 100644 index b5c61c9..0000000 --- a/building_dialouge_webapp/static/css/tailwind_input.css +++ /dev/null @@ -1,3 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; diff --git a/building_dialouge_webapp/templates/base.html b/building_dialouge_webapp/templates/base.html index 8989a21..2e6baa2 100644 --- a/building_dialouge_webapp/templates/base.html +++ b/building_dialouge_webapp/templates/base.html @@ -28,7 +28,6 @@ - {% endcompress %} {% endblock css %} {% block modal %} From 1ed9f22da9c02a524f13e324775ad1783cfd79f5 Mon Sep 17 00:00:00 2001 From: Bryan Lancien Date: Tue, 8 Oct 2024 15:16:34 +0100 Subject: [PATCH 08/16] add sidebar --- .../static/css/base/_variables.scss | 5 +- .../static/css/layouts/_questions.scss | 64 +++++++++++++++++++ .../static/css/project.scss | 1 + building_dialouge_webapp/templates/base.html | 50 +++++++++++++-- 4 files changed, 115 insertions(+), 5 deletions(-) create mode 100644 building_dialouge_webapp/static/css/layouts/_questions.scss diff --git a/building_dialouge_webapp/static/css/base/_variables.scss b/building_dialouge_webapp/static/css/base/_variables.scss index c76a2b3..30c0326 100644 --- a/building_dialouge_webapp/static/css/base/_variables.scss +++ b/building_dialouge_webapp/static/css/base/_variables.scss @@ -29,6 +29,9 @@ $secondary-color: $blue-800; $body-color: $grey-900; $color-white: #ffffff; +// Breakpoints +$breakpoint-lg: 992px; + // Typography $font-size-2xl: 2rem; $font-size-xl: 1.5rem; @@ -37,7 +40,7 @@ $font-size-md: 1rem; $font-size-sm: 0.875rem; $font-size-xs: 0.75rem; -$font-weight-bold: 700; +$font-weight-bold: 600; $font-weight-regular: 400; $font-weight-light: 300; diff --git a/building_dialouge_webapp/static/css/layouts/_questions.scss b/building_dialouge_webapp/static/css/layouts/_questions.scss new file mode 100644 index 0000000..2a634c4 --- /dev/null +++ b/building_dialouge_webapp/static/css/layouts/_questions.scss @@ -0,0 +1,64 @@ +@import '../base/variables'; + +@mixin sidebar-items { + a { + color: $grey-400; + pointer-events: none; + } + + &.visited a { + color: $body-color; + pointer-events: auto; + } + + &.active a { + color: $body-color; + font-weight: $font-weight-bold; + pointer-events: auto; + } +} + +main .sidebar { + width: 18rem; + height: 100%; + background-color: $color-white; + + a { + color: $body-color; + text-decoration: none; + + &:hover, + &:active { + color: $grey-500; + } + } + + &__category { + font-size: $font-size-lg; + font-weight: $font-weight-bold; + } + + .sidebar-nav { + ul { + list-style: none; + } + + ul li { + padding-bottom: 0.5rem; + } + + &__category { + font-weight: $font-weight-bold; + text-decoration: underline; + @include sidebar-items; + } + + &__step { + @include sidebar-items; + } + } +} + +main .questions { + flex: 1; +} \ No newline at end of file diff --git a/building_dialouge_webapp/static/css/project.scss b/building_dialouge_webapp/static/css/project.scss index 106397e..1719bf1 100644 --- a/building_dialouge_webapp/static/css/project.scss +++ b/building_dialouge_webapp/static/css/project.scss @@ -1,6 +1,7 @@ @import 'base/variables'; @import 'base/base'; @import 'components/nav'; +@import 'layouts/questions'; .alert-debug { color: black; diff --git a/building_dialouge_webapp/templates/base.html b/building_dialouge_webapp/templates/base.html index df32676..f1f4eb4 100644 --- a/building_dialouge_webapp/templates/base.html +++ b/building_dialouge_webapp/templates/base.html @@ -49,7 +49,7 @@ {% block body %} -
+
-
+
{% if messages %} {% for message in messages %}
@@ -95,10 +95,52 @@ {% endif %} {% block main %} {% block content %} -
Use this document as a way to quick start any new project.
+
+
+ +
+ + + + +
+
+
+ +
+
{% endblock content %} {% endblock main %} -
+
{% endblock content %} From f7f5e9abc62e04297688aa64883d2659e017ee04 Mon Sep 17 00:00:00 2001 From: Bryan Lancien Date: Tue, 8 Oct 2024 17:12:05 +0100 Subject: [PATCH 10/16] increase help section on larger screens --- .../static/css/base/_variables.scss | 4 ++ .../static/css/layouts/_questions.scss | 42 +++++++++++++++++++ building_dialouge_webapp/templates/base.html | 7 ++-- 3 files changed, 50 insertions(+), 3 deletions(-) diff --git a/building_dialouge_webapp/static/css/base/_variables.scss b/building_dialouge_webapp/static/css/base/_variables.scss index 30c0326..b3b92d5 100644 --- a/building_dialouge_webapp/static/css/base/_variables.scss +++ b/building_dialouge_webapp/static/css/base/_variables.scss @@ -30,7 +30,11 @@ $body-color: $grey-900; $color-white: #ffffff; // Breakpoints +$breakpoint-md: 768px; $breakpoint-lg: 992px; +$breakpoint-xl: 1200px; +$breakpoint-2xl: 1400px; +$breakpoint-3xl: 1600px; // Typography $font-size-2xl: 2rem; diff --git a/building_dialouge_webapp/static/css/layouts/_questions.scss b/building_dialouge_webapp/static/css/layouts/_questions.scss index e326639..3c34084 100644 --- a/building_dialouge_webapp/static/css/layouts/_questions.scss +++ b/building_dialouge_webapp/static/css/layouts/_questions.scss @@ -32,6 +32,20 @@ background-color: $grey-100; height: auto; width: 28rem; + font-size: $font-size-sm; + display: none; + + @media screen and (min-width: $breakpoint-md) { + display: block; + } + + @media screen and (min-width: $breakpoint-2xl) { + width: 32rem + } + + @media screen and (min-width: $breakpoint-3xl) { + width: 40rem + } } } @@ -40,6 +54,11 @@ main .sidebar { height: 100%; background-color: $color-white; overflow-y: auto; + display: none; + + @media screen and (min-width: $breakpoint-md) { + display: block; + } a { color: $body-color; @@ -100,4 +119,27 @@ main .step-question { font-weight: $font-weight-bold; } } +} + +.help-background { + position: absolute; + top:0; + right:0; + width: 28rem; + background-color: $grey-100; + height: 100%; + z-index: -1; + display: none; + + @media screen and (min-width: $breakpoint-md) { + display: block; + } + + @media screen and (min-width: $breakpoint-2xl) { + width: 32rem + } + + @media screen and (min-width: $breakpoint-3xl) { + width: 40rem + } } \ No newline at end of file diff --git a/building_dialouge_webapp/templates/base.html b/building_dialouge_webapp/templates/base.html index 7fedb20..4978ba8 100644 --- a/building_dialouge_webapp/templates/base.html +++ b/building_dialouge_webapp/templates/base.html @@ -135,7 +135,7 @@
-
+

Angaben zu Gebäude

@@ -194,7 +194,6 @@

Angaben zu Gebäude

- Wohneiheiten: Die Anzahl der Wohneinheiten gibt an, wie viele separate Wohnungen oder Wohnbereiche in einem Gebäude oder einer Immobilie vorhanden sind.
@@ -235,7 +234,9 @@

Angaben zu Gebäude

-
+
+ Wohneiheiten: Die Anzahl der Wohneinheiten gibt an, wie viele separate Wohnungen oder Wohnbereiche in einem Gebäude oder einer Immobilie vorhanden sind. +
From 7ecfc3cae8bb7c832eb95824769d0585ac715c3e Mon Sep 17 00:00:00 2001 From: Bryan Lancien Date: Tue, 8 Oct 2024 17:23:07 +0100 Subject: [PATCH 11/16] add footer navigation --- .../static/css/components/_buttons.scss | 5 +++ .../static/css/components/_nav.scss | 2 +- .../static/css/project.scss | 1 + building_dialouge_webapp/templates/base.html | 36 ++++++++++++++----- 4 files changed, 35 insertions(+), 9 deletions(-) create mode 100644 building_dialouge_webapp/static/css/components/_buttons.scss diff --git a/building_dialouge_webapp/static/css/components/_buttons.scss b/building_dialouge_webapp/static/css/components/_buttons.scss new file mode 100644 index 0000000..0482ff8 --- /dev/null +++ b/building_dialouge_webapp/static/css/components/_buttons.scss @@ -0,0 +1,5 @@ +@import '../base/variables'; + +.btn { + border-radius: 100px !important; +} \ No newline at end of file diff --git a/building_dialouge_webapp/static/css/components/_nav.scss b/building_dialouge_webapp/static/css/components/_nav.scss index 889ba7c..ceaf872 100644 --- a/building_dialouge_webapp/static/css/components/_nav.scss +++ b/building_dialouge_webapp/static/css/components/_nav.scss @@ -25,7 +25,7 @@ nav.navbar { } } -footer.footer { +footer .footer { ul { display: flex; list-style: none; diff --git a/building_dialouge_webapp/static/css/project.scss b/building_dialouge_webapp/static/css/project.scss index c485527..680a8bb 100644 --- a/building_dialouge_webapp/static/css/project.scss +++ b/building_dialouge_webapp/static/css/project.scss @@ -1,5 +1,6 @@ @import 'base/variables'; @import 'base/base'; +@import 'components/buttons'; @import 'components/forms'; @import 'components/nav'; @import 'layouts/questions'; diff --git a/building_dialouge_webapp/templates/base.html b/building_dialouge_webapp/templates/base.html index 4978ba8..2241d88 100644 --- a/building_dialouge_webapp/templates/base.html +++ b/building_dialouge_webapp/templates/base.html @@ -244,14 +244,34 @@

Angaben zu Gebäude

{% endblock content %} {% endblock main %} - + {% endblock body %} {% block modal %} From 9ea3b355c529f11f418b855ea95142c94e3b1d3b Mon Sep 17 00:00:00 2001 From: Bryan Lancien Date: Tue, 8 Oct 2024 18:02:35 +0100 Subject: [PATCH 12/16] fix footer position --- .../static/css/base/_base.scss | 5 +++++ .../static/css/components/_nav.scss | 22 +++++++++++-------- building_dialouge_webapp/templates/base.html | 2 +- 3 files changed, 19 insertions(+), 10 deletions(-) diff --git a/building_dialouge_webapp/static/css/base/_base.scss b/building_dialouge_webapp/static/css/base/_base.scss index 26eafb8..447798a 100644 --- a/building_dialouge_webapp/static/css/base/_base.scss +++ b/building_dialouge_webapp/static/css/base/_base.scss @@ -3,4 +3,9 @@ body { font-family: Roboto, system-ui, 'Open Sans', 'Helvetica Neue', sans-serif; color: $body-color; + + main.main-view { + height: inherit; + height: -webkit-fill-available; + } } \ No newline at end of file diff --git a/building_dialouge_webapp/static/css/components/_nav.scss b/building_dialouge_webapp/static/css/components/_nav.scss index ceaf872..41d3dc2 100644 --- a/building_dialouge_webapp/static/css/components/_nav.scss +++ b/building_dialouge_webapp/static/css/components/_nav.scss @@ -25,14 +25,18 @@ nav.navbar { } } -footer .footer { - ul { - display: flex; - list-style: none; - margin-bottom: 0; - } - - a { - @include nav-links; +footer { + z-index: 99; + + .footer { + ul { + display: flex; + list-style: none; + margin-bottom: 0; + } + + a { + @include nav-links; + } } } \ No newline at end of file diff --git a/building_dialouge_webapp/templates/base.html b/building_dialouge_webapp/templates/base.html index 2241d88..4108a12 100644 --- a/building_dialouge_webapp/templates/base.html +++ b/building_dialouge_webapp/templates/base.html @@ -81,7 +81,7 @@ -
+
{% if messages %} {% for message in messages %}
From 66523a9f442566ea42965f8df2c913b68bce0904 Mon Sep 17 00:00:00 2001 From: Bryan Lancien Date: Wed, 9 Oct 2024 12:07:44 +0100 Subject: [PATCH 13/16] remove space between footer and window bottom --- building_dialouge_webapp/static/css/base/_base.scss | 5 ----- building_dialouge_webapp/templates/base.html | 4 ++-- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/building_dialouge_webapp/static/css/base/_base.scss b/building_dialouge_webapp/static/css/base/_base.scss index 447798a..26eafb8 100644 --- a/building_dialouge_webapp/static/css/base/_base.scss +++ b/building_dialouge_webapp/static/css/base/_base.scss @@ -3,9 +3,4 @@ body { font-family: Roboto, system-ui, 'Open Sans', 'Helvetica Neue', sans-serif; color: $body-color; - - main.main-view { - height: inherit; - height: -webkit-fill-available; - } } \ No newline at end of file diff --git a/building_dialouge_webapp/templates/base.html b/building_dialouge_webapp/templates/base.html index 4108a12..bef8bc6 100644 --- a/building_dialouge_webapp/templates/base.html +++ b/building_dialouge_webapp/templates/base.html @@ -81,7 +81,7 @@
-
+
{% if messages %} {% for message in messages %}
@@ -134,7 +134,7 @@
-
+
From 312812f2383e5092899bf95d296e6758f6b99a18 Mon Sep 17 00:00:00 2001 From: Bryan Lancien Date: Wed, 9 Oct 2024 12:28:35 +0100 Subject: [PATCH 14/16] update button colors --- .../static/css/base/_variables.scss | 28 ++++++------- .../static/css/components/_buttons.scss | 39 +++++++++++++++++++ 2 files changed, 53 insertions(+), 14 deletions(-) diff --git a/building_dialouge_webapp/static/css/base/_variables.scss b/building_dialouge_webapp/static/css/base/_variables.scss index b3b92d5..5fa8d29 100644 --- a/building_dialouge_webapp/static/css/base/_variables.scss +++ b/building_dialouge_webapp/static/css/base/_variables.scss @@ -1,4 +1,17 @@ -/* Primary & Neutral palette */ +// Primary palette +$blue-050: #eff7ff; +$blue-100: #dcecfd; +$blue-200: #c1dffc; +$blue-300: #96ccfa; +$blue-400: #65aff5; +$blue-500: #418ff0; +$blue-600: #2a71e5; +$blue-700: #235dd2; +$blue-800: #224bab; +$blue-900: #214387; +$blue-950: #192a52; + +/* Secondary & Neutral palette */ $grey-050: #fafafa; $grey-100: #f5f5f5; $grey-200: #e5e5e5; @@ -11,19 +24,6 @@ $grey-800: #262626; $grey-900: #171717; $grey-950: #0a0a0a; -// Secondary palette -$blue-050: #f2f6fc; -$blue-100: #e2eaf7; -$blue-200: #ccdbf1; -$blue-300: #a8c4e8; -$blue-400: #7fa5db; -$blue-500: #6087d1; -$blue-600: #4c6ec4; -$blue-700: #4059ad; -$blue-800: #3b4c92; -$blue-900: #334275; -$blue-950: #232b48; - $primary-color: $grey-900; $secondary-color: $blue-800; $body-color: $grey-900; diff --git a/building_dialouge_webapp/static/css/components/_buttons.scss b/building_dialouge_webapp/static/css/components/_buttons.scss index 0482ff8..9a5c179 100644 --- a/building_dialouge_webapp/static/css/components/_buttons.scss +++ b/building_dialouge_webapp/static/css/components/_buttons.scss @@ -2,4 +2,43 @@ .btn { border-radius: 100px !important; + + &.btn-primary { + background-color: $blue-600; + color: $color-white; + border: 1px solid $blue-600; + + &:hover, + &:active { + background-color: $blue-800; + color: $color-white; + border: 1px solid $blue-800; + } + } + + &.btn-secondary { + background-color: $grey-800; + color: $color-white; + border: 1px solid $grey-800; + + &:hover, + &:active { + background-color: $grey-950; + color: $color-white; + border: 1px solid $grey-950; + } + } + + &.btn-light { + background-color: $blue-050; + color: $blue-900; + border: 1px solid $blue-050; + + &:hover, + &:active { + background-color: $blue-100; + color: $blue-800; + border: 1px solid $blue-100; + } + } } \ No newline at end of file From 7d8c370c9db4bf3e9cebdaf90816d15568b5d37a Mon Sep 17 00:00:00 2001 From: Bryan Lancien Date: Wed, 9 Oct 2024 12:36:37 +0100 Subject: [PATCH 15/16] reduce help container width on smaller screens --- .../static/css/layouts/_questions.scss | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/building_dialouge_webapp/static/css/layouts/_questions.scss b/building_dialouge_webapp/static/css/layouts/_questions.scss index 3c34084..e862107 100644 --- a/building_dialouge_webapp/static/css/layouts/_questions.scss +++ b/building_dialouge_webapp/static/css/layouts/_questions.scss @@ -37,14 +37,15 @@ @media screen and (min-width: $breakpoint-md) { display: block; + width: 20rem; } @media screen and (min-width: $breakpoint-2xl) { - width: 32rem + width: 32rem; } @media screen and (min-width: $breakpoint-3xl) { - width: 40rem + width: 40rem; } } } @@ -56,7 +57,7 @@ main .sidebar { overflow-y: auto; display: none; - @media screen and (min-width: $breakpoint-md) { + @media screen and (min-width: $breakpoint-lg) { display: block; } @@ -133,13 +134,14 @@ main .step-question { @media screen and (min-width: $breakpoint-md) { display: block; + width: 20rem; } @media screen and (min-width: $breakpoint-2xl) { - width: 32rem + width: 32rem; } @media screen and (min-width: $breakpoint-3xl) { - width: 40rem + width: 40rem; } } \ No newline at end of file From 9e63192378b9f364d957d4b5f97c95670b2c109a Mon Sep 17 00:00:00 2001 From: Bryan Lancien Date: Wed, 9 Oct 2024 13:04:30 +0100 Subject: [PATCH 16/16] center main content on larger screens --- .../static/css/layouts/_questions.scss | 7 + building_dialouge_webapp/templates/base.html | 143 ++++++++++-------- 2 files changed, 86 insertions(+), 64 deletions(-) diff --git a/building_dialouge_webapp/static/css/layouts/_questions.scss b/building_dialouge_webapp/static/css/layouts/_questions.scss index e862107..c931f4e 100644 --- a/building_dialouge_webapp/static/css/layouts/_questions.scss +++ b/building_dialouge_webapp/static/css/layouts/_questions.scss @@ -22,10 +22,17 @@ display: flex; flex-direction: row; + .step-container { + flex: 1; + display: flex; + justify-content: center; + } + .main { background-color: $color-white; padding: $step-item-padding; flex: 1; + max-width: 60rem; } .help { diff --git a/building_dialouge_webapp/templates/base.html b/building_dialouge_webapp/templates/base.html index bef8bc6..3cbeea2 100644 --- a/building_dialouge_webapp/templates/base.html +++ b/building_dialouge_webapp/templates/base.html @@ -137,102 +137,117 @@
-
-

Angaben zu Gebäude

+
+
+

Angaben zu Gebäude

+
-
- Um das Potenzial Ihres Gebäudes genau einschätzen zu können, analysieren wir zuerst den aktuellen Energieverbrauch. +
+
+ Um das Potenzial Ihres Gebäudes genau einschätzen zu können, analysieren wir zuerst den aktuellen Energieverbrauch. +
-
- -
- - - bis - - +
+
+ +
+ + + bis + + +
-
- -
- - - kWh - +
+
+ +
+ + + kWh + +
-
- - +
+
+ + +
Wohneiheiten: Die Anzahl der Wohneinheiten gibt an, wie viele separate Wohnungen oder Wohnbereiche in einem Gebäude oder einer Immobilie vorhanden sind.
-
- - -
-
+
+
+ + +
+
-
-
- PV-Anlage vorhanden -
- - -
-
- - -
-
+
+
+
+ PV-Anlage vorhanden +
+ + +
+
+ + +
+
+
-
-
- Select Options -
- - -
-
- - -
-
+
+
+
+ Select Options +
+ + +
+
+ + +
+
+
Wohneiheiten: Die Anzahl der Wohneinheiten gibt an, wie viele separate Wohnungen oder Wohnbereiche in einem Gebäude oder einer Immobilie vorhanden sind.