feature #43 [ui] tailwind-ify various ui elements

* fix ui for registration form * add reset button to login form * pages should span 3 cols by default @ md breakpoint * tailwind-ify todo crud * fix task list x on new list page * php cs fixer it up
rushlow-development · May 24, 2024 · e5a85c6 · e5a85c6
1 parent 360c15e
commit e5a85c6
Show file tree

Hide file tree

Showing 13 changed files with 77 additions and 57 deletions.
diff --git a/assets/controllers/task_controller.js b/assets/controllers/task_controller.js
@@ -35,7 +35,14 @@ export default class extends Controller {
     addRemoveButton(task) {
         let removeButton = document.createElement('button');
         removeButton.innerText = 'X';
-        removeButton.classList.add('btn', 'btn-outline-danger', 'ms-2');
+        removeButton.classList.add(
+            'px-4', 'py-2', 'm-0', 'mx-4',
+            'rounded-lg', 'box-border',
+            'hover:text-grey-900',
+            'ring-2', 'ring-offset-4', 'ring-offset-gray-800',
+            'bg-red-700/75', 'hover:bg-red-500',
+            'ring-red-500', 'hover:ring-red-800'
+        );
 
         removeButton.addEventListener('click', (e) => {
             e.preventDefault();

diff --git a/src/Form/RegistrationFormType.php b/src/Form/RegistrationFormType.php
@@ -63,6 +63,7 @@ public function configureOptions(OptionsResolver $resolver): void
     {
         $resolver->setDefaults([
             'data_class' => UserObject::class,
+            'attr' => ['id' => 'registration_form'],
         ]);
     }
 }
diff --git a/templates/components/Button/Form.html.twig b/templates/components/Button/Form.html.twig
@@ -17,7 +17,7 @@
 
 <{{ element }}
     type="{{ type }}"
-    {% if element == 'button' %}form="{{ form_id }}"{% endif %}
+    {% if element == 'button' and form_id is not null %}form="{{ form_id }}"{% endif %}
     {% if href != null %}href="{{ href }}"{% endif %}
     {{ attributes.defaults({class: style_class.apply({style})|tailwind_merge}) }}
 >

diff --git a/templates/note/edit.html.twig b/templates/note/edit.html.twig
@@ -3,17 +3,19 @@
 {% block title %}Edit Note{% endblock %}
 
 {% block body %}
-    <h1>Edit Note</h1>
+    <section class="md:col-span-3">
+        <h1 class="text-2xl">Edit Note</h1>
 
-    {{ include('note/_form.html.twig', {'button_label': 'Update'}) }}
+        {{ include('note/_form.html.twig', {'button_label': 'Update'}) }}
 
-    {{ include('_form_controls.html.twig', {
-        'cancel_redirect': 'app_main_index',
-        'has_delete_btn': true,
-        'submit_form_id': 'note-form',
-        'submit_button_label': 'Update',
-        'delete_form_id': 'note-form-delete',
-    }) }}
+        {{ include('_form_controls.html.twig', {
+            'cancel_redirect': 'app_main_index',
+            'has_delete_btn': true,
+            'submit_form_id': 'note-form',
+            'submit_button_label': 'Update',
+            'delete_form_id': 'note-form-delete',
+        }) }}
 
-    {{ include('note/_delete_form.html.twig') }}
+        {{ include('note/_delete_form.html.twig') }}
+    </section>
 {% endblock %}
diff --git a/templates/note/new.html.twig b/templates/note/new.html.twig
@@ -3,9 +3,11 @@
 {% block title %}New Note{% endblock %}
 
 {% block body %}
-    <h1>Create new Note</h1>
+    <section class="md:col-span-3">
+        <h1 class="text-2xl">Create new Note</h1>
 
-    {{ include('note/_form.html.twig') }}
+        {{ include('note/_form.html.twig') }}
 
-    {{ include('_form_controls.html.twig', {'cancel_redirect': 'app_main_index', 'submit_form_id': 'note-form'}) }}
+        {{ include('_form_controls.html.twig', {'cancel_redirect': 'app_main_index', 'submit_form_id': 'note-form'}) }}
+    </section>
 {% endblock %}
diff --git a/templates/profile/edit.token.html.twig b/templates/profile/edit.token.html.twig
@@ -3,7 +3,7 @@
 {% block title %}Update GitHub Token{% endblock %}
 
 {% block body %}
-    <article>
+    <section class="md:col-span-3">
         <h1>{{ app.user.displayName }}'s Profile</h1>
 
         {{ form_errors(form) }}
@@ -19,5 +19,5 @@
             'submit_form_id': 'token-form',
             'submit_button_label': 'Update Token',
         }) }}
-    </article>
+    </section>
 {% endblock %}
diff --git a/templates/profile/me.html.twig b/templates/profile/me.html.twig
@@ -3,19 +3,19 @@
 {% block title %}My Profile{% endblock %}
 
 {% block body %}
-<article>
-    <h1>{{ app.user.displayName }}'s Profile</h1>
+    <section class="md:col-span-3">
+        <h1>{{ app.user.displayName }}'s Profile</h1>
 
-    <section>
-        {% if app.user.gitHubToken is null %}
-            GitHub Token: <twig:Icon:XCircle />
-        {% else %}
-            GitHub Token: <twig:Icon:CheckMark />
-        {% endif %}
-    </section>
+        <section>
+            {% if app.user.gitHubToken is null %}
+                GitHub Token: <twig:Icon:XCircle />
+            {% else %}
+                GitHub Token: <twig:Icon:CheckMark />
+            {% endif %}
+        </section>
 
-    <section>
-        <a href="{{ path('app_profile_update_github_token') }}" class="p-2 underline decoration-cyan-500 hover:text-cyan-500 hover:decoration-gray-500">Edit Token</a>
+        <section>
+            <a href="{{ path('app_profile_update_github_token') }}" class="p-2 underline decoration-cyan-500 hover:text-cyan-500 hover:decoration-gray-500">Edit Token</a>
+        </section>
     </section>
-</article>
 {% endblock %}
diff --git a/templates/registration/register.html.twig b/templates/registration/register.html.twig
@@ -3,20 +3,22 @@
 {% block title %}Register{% endblock %}
 
 {% block body %}
-    <h1>Register</h1>
+    <section class="md:col-span-3">
+        <h1 class="text-2xl">Register</h1>
 
-    {{ form_errors(registrationForm) }}
+        {{ form_errors(registrationForm) }}
 
-    {{ form_start(registrationForm) }}
-        {{ form_row(registrationForm.displayName) }}
-        {{ form_row(registrationForm.username) }}
-        {{ form_row(registrationForm.plainPassword, {
-            label: 'Password'
-        }) }}
+        {{ form_start(registrationForm) }}
+            {{ form_row(registrationForm.displayName) }}
+            {{ form_row(registrationForm.username) }}
+            {{ form_row(registrationForm.plainPassword, {
+                label: 'Password'
+            }) }}
 
-        <div class="mb-3">
-            <button type="submit">Register</button>
-            <button type="reset">Reset</button>
-        </div>
-    {{ form_end(registrationForm) }}
+            <section class="block m-6">
+                <twig:Button:Form form_id="registration_form">Register</twig:Button:Form>
+                <twig:Button:Form type="reset" style="warning">Reset</twig:Button:Form>
+            </section>
+        {{ form_end(registrationForm) }}
+    </section>
 {% endblock %}
diff --git a/templates/security/login.html.twig b/templates/security/login.html.twig
@@ -3,7 +3,7 @@
 {% block title %}Log in!{% endblock %}
 
 {% block body %}
-    <section>
+    <section class="md:col-span-3">
         <h1 class="text-2xl">Please Sign In</h1>
         <form method="post" id="login-form">
             {% if error %}
@@ -33,6 +33,7 @@
 
                 <section class="block m-6">
                     <twig:Button:Form form_id="login-form">Sign in</twig:Button:Form>
+                    <twig:Button:Form type="reset" style="warning">Reset</twig:Button:Form>
                 </section>
             {% endif %}
         </form>

diff --git a/templates/todo_list/_delete_form.html.twig b/templates/todo_list/_delete_form.html.twig
@@ -1,4 +1,3 @@
-<form method="post" action="{{ path('app_todo_list_delete', {'id': todo_list.id}) }}" onsubmit="return confirm('Are you sure you want to delete this item?');">
+<form method="post" id="todo-list-form-delete" action="{{ path('app_todo_list_delete', {'id': todo_list.id}) }}" onsubmit="return confirm('Are you sure you want to delete this item?');">
     <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ todo_list.id) }}">
-    <button>Delete</button>
 </form>
diff --git a/templates/todo_list/_form.html.twig b/templates/todo_list/_form.html.twig
@@ -2,7 +2,7 @@
     'index': form.tasks|length > 0 ? form.tasks|last.vars.name + 1 : 0,
     'formPrototype': form_widget(form.tasks.vars.prototype)
 }) }}>
-    {{ form_start(form) }}
+    {{ form_start(form, {attr: {id: 'todo-list-form'}}) }}
         {{ form_row(form.name) }}
 
         <p>Tasks:
@@ -16,10 +16,5 @@
                 {{ form_widget(task) }}
             {% endfor %}
         </div>
-
-        <div>
-            <button>{{ button_label|default('Save') }}</button>
-            <a href="{{ path('app_main_index') }}">Cancel</a>
-        </div>
     {{ form_end(form) }}
 </div>
diff --git a/templates/todo_list/edit.html.twig b/templates/todo_list/edit.html.twig
@@ -3,11 +3,19 @@
 {% block title %}Edit TodoList{% endblock %}
 
 {% block body %}
-    <h1>Edit TodoList</h1>
+    <section class="md:col-span-3">
+        <h1 class="text-2xl">Edit TodoList</h1>
 
-    {{ include('todo_list/_form.html.twig', {'button_label': 'Update'}) }}
+        {{ include('todo_list/_form.html.twig', {'button_label': 'Update'}) }}
+
+        {{ include('_form_controls.html.twig', {
+            'cancel_redirect': 'app_main_index',
+            'has_delete_btn': true,
+            'submit_form_id': 'todo-list-form',
+            'submit_button_label': 'Update',
+            'delete_form_id': 'todo-list-form-delete',
+        }) }}
 
-    <div>
         {{ include('todo_list/_delete_form.html.twig') }}
-    </div>
+    </section>
 {% endblock %}
diff --git a/templates/todo_list/new.html.twig b/templates/todo_list/new.html.twig
@@ -3,7 +3,10 @@
 {% block title %}New TodoList{% endblock %}
 
 {% block body %}
-    <h1>Create new TodoList</h1>
+    <section class="md:col-span-3">
+        <h1 class="text-2xl">Create new TodoList</h1>
 
-    {{ include('todo_list/_form.html.twig') }}
+        {{ include('todo_list/_form.html.twig') }}
+        {{ include('_form_controls.html.twig', {'cancel_redirect': 'app_main_index', 'submit_form_id': 'todo-list-form'}) }}
+    </section>
 {% endblock %}