Improve forms

2025-02-04 20:09:25 +01:00 · 2025-02-04 20:09:25 +01:00 · 34148466c7
parent b22e185d47
commit 34148466c7
5 changed files with 121 additions and 71 deletions
--- a/common/input.css
+++ b/common/input.css
@ -44,9 +44,9 @@
  transition: all 0.2s ease-out;
 } */

-form label {
+/* form label {
  @apply dark:text-slate-400;
-}
+} */

 .responsive-table {
  @apply dark:text-white mx-auto table-fixed;
@ -90,37 +90,37 @@ form label {
  }
 }

-form input,
+/* form input,
 select,
 textarea {
  @apply dark:border dark:border-slate-900 dark:bg-slate-500 dark:text-slate-100;
-}
+} */

 form input:disabled,
 select:disabled,
 textarea:disabled {
-  @apply dark:bg-slate-700 dark:text-slate-400;
+  @apply dark:bg-slate-800 dark:text-slate-500 cursor-not-allowed;
 }

 .errorlist {
  @apply mt-4 mb-1 pl-3 py-2 bg-red-600 text-slate-200 w-[300px];
 }

-@media screen and (min-width: 768px) {
+/* @media screen and (min-width: 768px) {
  form input,
  select,
  textarea {
    width: 300px;
  }
-}
+} */

-@media screen and (max-width: 768px) {
+/* @media screen and (max-width: 768px) {
  form input,
  select,
  textarea {
    width: 150px;
  }
-}
+} */

 #button-container button {
  @apply mx-1;
@ -169,3 +169,27 @@ textarea:disabled {
    
  }  
 } */
+
+label {
+  @apply dark:text-slate-500;
+}
+
+[type="text"], [type="datetime-local"], [type="datetime"], [type="date"], [type="number"], select, textarea {
+  @apply dark:bg-slate-600 dark:text-slate-300;
+}
+
+[type="submit"] {
+  @apply dark:text-white font-bold dark:bg-blue-600 px-4 py-2;
+}
+
+form div label {
+  @apply dark:text-white;
+}
+
+form div {
+  @apply flex flex-col;
+}
+
+div [type="submit"] {
+  @apply mt-3;
+}
--- a/games/static/base.css
+++ b/games/static/base.css
@ -1600,6 +1600,14 @@ input:checked + .toggle-bg {
  max-width: 20rem;
 }

+.max-w-full {
+  max-width: 100%;
+}
+
+.max-w-xl {
+  max-width: 36rem;
+}
+
 .flex-1 {
  flex: 1 1 0%;
 }
@ -1688,10 +1696,6 @@ input:checked + .toggle-bg {
  grid-template-columns: repeat(7, minmax(0, 1fr));
 }

-.flex-row {
-  flex-direction: row;
-}
-
 .flex-col {
  flex-direction: column;
 }
@ -1740,14 +1744,6 @@ input:checked + .toggle-bg {
  gap: 1.25rem;
 }

-.gap-3 {
-  gap: 0.75rem;
-}
-
-.gap-6 {
-  gap: 1.5rem;
-}
-
 .-space-x-px > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(-1px * var(--tw-space-x-reverse));
@ -2091,10 +2087,6 @@ input:checked + .toggle-bg {
  vertical-align: top;
 }

-.align-middle {
-  vertical-align: middle;
-}
-
 .font-mono {
  font-family: IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
@ -2242,6 +2234,11 @@ input:checked + .toggle-bg {
  color: rgb(203 213 225 / var(--tw-text-opacity));
 }

+.text-slate-400 {
+  --tw-text-opacity: 1;
+  color: rgb(148 163 184 / var(--tw-text-opacity));
+}
+
 .text-slate-500 {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity));
@ -2257,11 +2254,6 @@ input:checked + .toggle-bg {
  color: rgb(250 202 21 / var(--tw-text-opacity));
 }

-.text-slate-400 {
-  --tw-text-opacity: 1;
-  color: rgb(148 163 184 / var(--tw-text-opacity));
-}
-
 .underline {
  text-decoration-line: underline;
 }
@ -2419,10 +2411,9 @@ input:checked + .toggle-bg {
  transition: all 0.2s ease-out;
 } */

-form label:is(.dark *) {
-  --tw-text-opacity: 1;
-  color: rgb(148 163 184 / var(--tw-text-opacity));
-}
+/* form label {
+  @apply dark:text-slate-400;
+} */

 .responsive-table {
  margin-left: auto;
@ -2461,25 +2452,25 @@ form label:is(.dark *) {
  border-left-color: rgb(100 116 139 / var(--tw-border-opacity));
 }

-form input:is(.dark *),
-select:is(.dark *),
-textarea:is(.dark *) {
-  border-width: 1px;
-  --tw-border-opacity: 1;
-  border-color: rgb(15 23 42 / var(--tw-border-opacity));
-  --tw-bg-opacity: 1;
-  background-color: rgb(100 116 139 / var(--tw-bg-opacity));
-  --tw-text-opacity: 1;
-  color: rgb(241 245 249 / var(--tw-text-opacity));
+/* form input,
+select,
+textarea {
+  @apply dark:border dark:border-slate-900 dark:bg-slate-500 dark:text-slate-100;
+} */
+
+form input:disabled,
+select:disabled,
+textarea:disabled {
+  cursor: not-allowed;
 }

 form input:disabled:is(.dark *),
 select:disabled:is(.dark *),
 textarea:disabled:is(.dark *) {
  --tw-bg-opacity: 1;
-  background-color: rgb(51 65 85 / var(--tw-bg-opacity));
+  background-color: rgb(30 41 59 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
-  color: rgb(148 163 184 / var(--tw-text-opacity));
+  color: rgb(100 116 139 / var(--tw-text-opacity));
 }

 .errorlist {
@ -2495,21 +2486,21 @@ textarea:disabled:is(.dark *) {
  color: rgb(226 232 240 / var(--tw-text-opacity));
 }

-@media screen and (min-width: 768px) {
+/* @media screen and (min-width: 768px) {
  form input,
  select,
  textarea {
    width: 300px;
  }
-}
+} */

-@media screen and (max-width: 768px) {
+/* @media screen and (max-width: 768px) {
  form input,
  select,
  textarea {
    width: 150px;
  }
-}
+} */

 #button-container button {
  margin-left: 0.25rem;
@ -2618,6 +2609,47 @@ textarea:disabled:is(.dark *) {
  }  
 } */

+label:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(100 116 139 / var(--tw-text-opacity));
+}
+
+[type="text"]:is(.dark *), [type="datetime-local"]:is(.dark *), [type="datetime"]:is(.dark *), [type="date"]:is(.dark *), [type="number"]:is(.dark *), select:is(.dark *), textarea:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(71 85 105 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(203 213 225 / var(--tw-text-opacity));
+}
+
+[type="submit"] {
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  font-weight: 700;
+}
+
+[type="submit"]:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(28 100 242 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+form div label:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+form div {
+  display: flex;
+  flex-direction: column;
+}
+
+div [type="submit"] {
+  margin-top: 0.75rem;
+}
+
 .odd\:bg-white:nth-child(odd) {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
--- a/games/templates/add_game.html
+++ b/games/templates/add_game.html
@ -1,12 +1,7 @@
 <c-layouts.add>
 <c-slot name="additional_row">
-<tr>
-    <td></td>
-    <td>
    <input type="submit"
                        name="submit_and_redirect"
                        value="Submit & Create Purchase" />
-    </td>
-</tr>
 </c-slot>
 </c-layouts.add>
--- a/games/templates/cotton/layouts/add.html
+++ b/games/templates/cotton/layouts/add.html
@ -3,19 +3,18 @@
 {% if form_content %}
    {{ form_content }}
 {% else %}
+<div class="max-width-container">
+    <div class="form-container max-w-xl mx-auto">
        <form method="post" enctype="multipart/form-data">
-        <table class="mx-auto">
            {% csrf_token %}
-            {{ form.as_table }}
-            <tr>
-                <td></td>
-                <td>
-                    <input type="submit" value="Submit" />
-                </td>
-            </tr>
+            {{ form.as_div }}
+            <div><input type="submit" value="Submit" /></div>
+            <div class="submit-button-container">
                {{ additional_row }}
-        </table>
+            </div>
        </form>
+    </div>
+</div>
 {% endif %}
 <c-slot name="scripts">
 {% if script_name %}
--- a/games/views/session.py
+++ b/games/views/session.py
@ -217,7 +217,7 @@ def add_session(request: HttpRequest, game_id: int = 0) -> HttpResponse:
    context["title"] = "Add New Session"
    context["script_name"] = "add_session.js"
    context["form"] = form
-    return render(request, "add_session.html", context)
+    return render(request, "add.html", context)


@login_required