From e546721ca1581ca150b93b80f78958fe291fbfe4 Mon Sep 17 00:00:00 2001
From: Eliseu Amaro <mail@eliseuama.ro>
Date: Mon, 26 Jul 2021 19:08:25 +0100
Subject: [PATCH] [TWIG][CSS] Fixed right panel buttons, fix issue where the
 form was invalid on send.

Signed-off-by: Eliseu Amaro <mail@eliseuama.ro>
---
 public/assets/css/right/right.css         | 86 +++++++++++++++++-----
 templates/sidepanel/right/right.html.twig | 88 ++++++++++++-----------
 2 files changed, 114 insertions(+), 60 deletions(-)

diff --git a/public/assets/css/right/right.css b/public/assets/css/right/right.css
index d7e6a47ad3..6e79ada04f 100644
--- a/public/assets/css/right/right.css
+++ b/public/assets/css/right/right.css
@@ -25,7 +25,7 @@
     border-radius: var(--unit-size);
 }
 
-.section-title legend {
+.section-title {
     display: flex;
     width: 100%;
     border-radius: var(--unit-size);
@@ -39,8 +39,7 @@
 }
 
 .section-content {
-    padding: var(--unit-size);
-    box-sizing: border-box;
+    margin: var(--unit-size);
 }
 
 .section-content hr {
@@ -63,12 +62,16 @@
 
 #post_visibility {
     display: flex;
-    justify-content: space-evenly;
+    justify-content: flex-start;
     font-size: var(--medium-size);
     padding: var(--unit-size);
     box-sizing: border-box;
 }
 
+#post_visibility input[type="radio"] {
+    margin-right: 5px;
+}
+
 #post_visibility label {
     margin-right: var(--main-size);
 }
@@ -80,21 +83,13 @@
 }
 
 .notice-options {
+    margin-top: var(--unit-size);
     display: flex;
-    font-family: var(--display-font);
-    padding: var(--unit-size);
+    flex-wrap: wrap;
     box-sizing: border-box;
-}
 
-.notice-options button {
-    font-size: var(--medium-size);
-    padding: var(--unit-size) var(--small-size);
-    border-radius: var(--unit-size);
-    border: none;
-}
-
-.attachments {
-    flex: 1;
+    font-family: var(--display-font);
+    width: 100%;
 }
 
 .post {
@@ -117,12 +112,65 @@
     box-sizing: border-box;
 }
 
+
 #post_attachments,
 #post_post {
     cursor: pointer;
 }
 
-.custom-file-upload {
-    display: inline-block;
-    font-size: var(--main-size);
+#post_post {
+    font-family: var(--display-font);
+    font-size: var(--medium-size);
+    padding: .2em .4em;
+
+    border-radius: var(--unit-size);
+    border: 2px solid var(--bg3);
+
+    background-color: var(--translucent);
+    color: var(--white);
+    transition: 0.4s;
+}
+
+.attachments {
+    flex: 1;
+}
+
+input[type=file]::file-selector-button {
+    font-family: var(--display-font);
+    font-size: var(--medium-size);
+    padding: .2em .4em;
+
+    border-radius: var(--unit-size);
+    border: 2px solid var(--bg3);
+
+    background-color: var(--translucent);
+    color: var(--white);
+    transition: 0.4s;
+}
+
+#post_post:hover {
+    border: 2px solid var(--white);
+    background-color: var(--white);
+    color: var(--bg1);
+}
+
+input[type=file]::file-selector-button:hover,
+input[type=button]:hover {
+    border: 2px solid var(--white);
+    background-color: var(--white);
+    color: var(--bg1);
+}
+
+.create-notice details {
+    font-family: var(--display-font);
+    padding: var(--unit-size);
+    box-sizing: border-box;
+    cursor: pointer;
+}
+
+#note-types {
+    padding: var(--unit-size);
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
 }
\ No newline at end of file
diff --git a/templates/sidepanel/right/right.html.twig b/templates/sidepanel/right/right.html.twig
index 10afb025cc..b295439d71 100644
--- a/templates/sidepanel/right/right.html.twig
+++ b/templates/sidepanel/right/right.html.twig
@@ -1,58 +1,64 @@
 <aside id='right-panel'>
 
     {% if post_form is defined %}
-        {{ form_start(post_form) }}
-        <section class="create-notice">
-            <form>
-                <fieldset class="section-title">
-                    <legend>Create a note</legend>
-                </fieldset>
 
-                <fieldset class="section-content">
-                    <span class="target">
-                        <div class="target-top">
-                            {{ form_label(post_form.to) }}
-                        </div>
-                        <div class="target-bot">
-                            {{ form_widget(post_form.to) }}
-                        </div>
-                    </span>
+        <section class="create-notice">
+            {{ form_start(post_form) }}
+            <fieldset>
+                <legend class="section-title">Create a note</legend>
+
+                <div class="section-content">
+                        <span class="target">
+                            <div class="target-top">
+                                {{ form_label(post_form.to) }}
+                            </div>
+                            <div class="target-bot">
+                                {{ form_widget(post_form.to) }}
+                            </div>
+                        </span>
 
                     <hr>
 
                     <span class="scope">
-                        <div class="visibility">
-                            {{ form_row(post_form.visibility) }}
-                        </div>
-                    </span>
+                            <div class="visibility">
+                                {{ form_row(post_form.visibility) }}
+                            </div>
+                        </span>
 
                     <hr>
 
-                    <span id="tabs">
-                        {% for tab in tabs %}
-                            <a href={{ path(tab['href']) }}>{{ tab['title'] }}</a>
-                        {% endfor %}
-
-                        <div class="input-wrapper">
-                            <div class="content-input">
-                                {{ form_row(post_form.content) }}
-                            </div>
-                        </div>
-
-                        <div class="notice-options">
-                            <div class="attachments">
-                                <label for="{{ post_form.attachments.vars.id }}" class="custom-file-upload">
-                                    {{ form_widget(post_form.attachments) }}
-                                </label>
+                    <span id="input">
+                            <div class="input-wrapper">
+                                <div class="content-input">
+                                    {{ form_row(post_form.content) }}
+                                </div>
                             </div>
 
-                            {{ form_row(post_form.post) }}
-                        </div>
-                    </span>
-                </fieldset>
-            </form>
+                            <div class="notice-options">
+                                <div class="attachments">
+                                    <label for="{{ post_form.attachments.vars.id }}" class="custom-file-upload">
+                                        {{ form_widget(post_form.attachments) }}
+                                    </label>
+                                </div>
+
+                                {{ form_row(post_form.post) }}
+                            </div>
+                        </span>
+                </div>
+            </fieldset>
+            {{ form_end(post_form) }}
+
+            <details>
+                <summary>Other notes...</summary>
+                <div id="note-types">
+                    {% for tab in tabs %}
+                        <a href={{ path(tab['href']) }}>{{ tab['title'] }}</a>
+                    {% endfor %}
+                </div>
+            </details>
+
         </section>
-        {{ form_end(post_form) }}
+
 
     {% endif %}