improve css

src/genlab_bestilling/forms.py

@@ -108,6 +108,7 @@ class EquipmentQuantityCollection(ContextFormCollection):
     min_siblings = 1
     add_label = "Add equipment"
     equipments = EquipmentOrderQuantityForm()
+    default_renderer = FormRenderer(field_css_classes="mb-3")
 
     def retrieve_instance(self, data):
         if data := data.get("equipments"):
@@ -212,15 +213,17 @@ class Meta:
             ),
             "location": Selectize(search_lookup="name_icontains"),
             "type": Selectize(search_lookup="name_icontains"),
-            "markers": DualSortableSelector(search_lookup="name_icontains"),
+            "markers": Selectize(search_lookup="name_icontains"),
             "date": DateInput(),
+            "notes": forms.widgets.Textarea(attrs={"rows": 1, "cols": 10}),
         }
 
 
 class SamplesCollection(ContextFormCollection):
     min_siblings = 1
     add_label = "Add sample"
     samples = SampleForm()
+    default_renderer = FormRenderer(field_css_classes="mb-3")
 
     def update_holder_instances(self, name, holder):
         if name == "samples":

src/theme/static_src/src/styles.css

@@ -7,15 +7,19 @@
     .alert {
         @apply flex w-full bg-opacity-30 text-lg font-bold text-black border-l-4 md:p-7 border mb-1 items-center justify-between;
     }
+
     .alert.alert-success {
         @apply border-green-500 bg-green-300;
     }
+
     .alert.alert-info {
         @apply border-blue-500 bg-blue-300;
     }
+
     .alert.alert-danger {
         @apply border-red-500 bg-red-300;
     }
+
     .alert.alert-warning {
         @apply border-yellow-500 bg-yellow-300;
     }
@@ -40,3 +44,134 @@
         @apply px-3 py-2;
     }
 }
+
+
+
+.formset-label {
+    @apply text-sm text-gray-600;
+}
+
+.formset-text-input,
+.formset-email-input,
+.formset-date-input,
+.formset-select,
+.formset-select-multiple,
+.formset-number-input,
+.formset-textarea,
+.formset-password-input,
+.formset-url-input {
+    @apply w-full px-3 py-2 placeholder-gray-300 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300;
+}
+
+.formset-dual-selector-select {
+    @apply formset-select-multiple rounded-t-none w-full !important;
+}
+
+.formset-dual-selector-select optgroup {
+    @apply font-bold;
+}
+
+.formset-dual-selector-lookup {
+    @apply formset-text-input border-b-0 rounded-b-none !important;
+}
+
+.dj-dual-selector~.dj-field-errors {
+    @apply text-end;
+}
+
+[is="django-dual-selector"] {
+    @apply w-full;
+}
+
+.formset-checkbox,
+.formset-checkbox-multiple {
+    @apply mr-2 focus:ring-indigo-100 border-gray-300 rounded;
+}
+
+.formset-radio-select {
+    @apply mr-2 focus:ring-indigo-100 border-gray-300;
+}
+
+.formset-inlined {
+    @apply mr-3 inline-block;
+}
+
+.formset-help-text {
+    @apply text-gray-500;
+}
+
+.formset-button-default {
+    @apply text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800;
+}
+
+.formset-button-default:disabled {
+    @apply text-white bg-blue-400 dark:bg-blue-500 cursor-not-allowed font-medium rounded-lg text-sm px-5 py-2.5 text-center;
+}
+
+.formset-button-light {
+    @apply text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700;
+}
+
+.formset-button-green {
+    @apply focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800;
+}
+
+.formset-button-red {
+    @apply focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900;
+}
+
+.formset-button-yellow {
+    @apply focus:outline-none text-white bg-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:focus:ring-yellow-900;
+}
+
+.formset-button-purple {
+    @apply focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900;
+}
+
+.dj-choose-file {
+    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
+}
+
+.dj-delete-file {
+    @apply bg-yellow-200 hover:bg-yellow-600 text-black hover:text-white font-semibold text-sm py-1 px-3 rounded;
+}
+
+.dj-download-file {
+    @apply bg-gray-200 hover:bg-gray-300 text-black font-semibold py-1 px-3 text-sm rounded;
+}
+
+.dj-richtext-wrapper dialog {
+    @apply p-0 break-words bg-white border rounded-lg shadow-lg;
+}
+
+.dj-richtext-wrapper dialog .dialog-header {
+    @apply p-4 border-b border-gray-300;
+}
+
+.dj-richtext-wrapper dialog .dialog-body {
+    @apply p-4 relative flex-1;
+}
+
+.dj-richtext-wrapper dialog .dialog-footer {
+    @apply p-4 border-t border-gray-300;
+}
+
+.dj-richtext-wrapper dialog h3 {
+    @apply text-lg font-semibold;
+}
+
+.dj-richtext-wrapper a {
+    @apply text-blue-500 underline;
+}
+
+django-form-collection {
+    @apply border-b-4 pb-5 mb-5;
+}
+
+django-form-collection .dj-form {
+    @apply flex gap-2 flex-wrap;
+}
+
+django-form-collection .dj-form .dj-form-errors {
+    @apply w-100;
+}

src/theme/static_src/tailwind.config.js

@@ -28,16 +28,19 @@ module.exports = {
          */
         '../../**/templates/**/*.html',
 
-        '../../../.venv/lib/python3.11/site-packages/**/templates/**/*.html',
+        '../../../.venv/lib64/python3.11/site-packages/tailwind_ui/templates/**/*.html',
+        '../../../.venv/lib64/python3.11/site-packages/formset/templates/formset/tailwind/**/*.html',
+        '../../../.venv/lib64/python3.11/site-packages/formset/renders/tailwind.py',
+        '../../../.venv/lib64/python3.11/site-packages/formset/templates/formset/tailwind/*.html',
 
         /**
          * JS: If you use Tailwind CSS in JavaScript, uncomment the following lines and make sure
          * patterns match your project structure.
          */
         /* JS 1: Ignore any JavaScript in node_modules folder. */
-        // '!../../**/node_modules',
+        '!../../**/node_modules',
         /* JS 2: Process all JavaScript files in the project. */
-        // '../../**/*.js',
+        '../../**/*.js',
 
         /**
          * Python: If you use Tailwind CSS classes in Python, uncomment the following line