feat: Video Trimmer and more

templates/cms/crispy_custom_field.html

@@ -0,0 +1,82 @@
+{% load crispy_forms_field %}
+
+
+<style>
+  /* Form group styling */
+  .form-group {
+    margin-bottom: 1.5rem;
+  }
+
+  /* Control label container styling */
+  .control-label-container {
+    margin-bottom: 0.5rem;
+  }
+
+  /* Label styling */
+  .control-label {
+    display: flex;
+    align-items: baseline;
+    font-weight: bold;
+    font-size: 1rem;
+  }
+
+  /* Help text styling */
+  .help-text-inline {
+    font-size: 0.85rem;
+    color: #6c757d;
+    margin-left: 5px;
+    font-weight: normal;
+  }
+
+  /* Full width fields */
+  .controls.full-width input,
+  .controls.full-width textarea,
+  .controls.full-width select {
+    width: 100%;
+  }
+
+  /* Error styling */
+  .invalid-feedback {
+    color: #dc3545;
+    display: block;
+    margin-top: 0.25rem;
+  }
+
+  /* Button styling */
+  button[type="submit"],
+  input[type="submit"] {
+    background-color: #28a745;
+    border-color: #28a745;
+    color: white;
+  }
+
+  button[type="submit"]:hover,
+  input[type="submit"]:hover {
+    background-color: #218838;
+    border-color: #1e7e34;
+  }
+
+</style>
+
+<div class="form-group{% if field.errors %} has-error{% endif %}">
+    <div class="control-label-container">
+        {% if field.label %}
+            <label for="{{ field.id_for_label }}" class="control-label">
+                {{ field.label }}
+                {% if field.help_text %}
+                    <span class="help-text-inline">- {{ field.help_text|safe }}</span>
+                {% endif %}
+            </label>
+        {% endif %}
+    </div>
+    <div class="controls {% if field.name == 'title' or field.name == 'new_tags' or field.name == 'description' %}full-width{% endif %}">
+        {% crispy_field field %}
+        {% if field.errors %}
+            <div class="error-container">
+                {% for error in field.errors %}
+                    <p class="invalid-feedback">{{ error }}</p>
+                {% endfor %}
+            </div>
+        {% endif %}
+    </div>
+</div>