From c7a28876aa6c779215a53f285cfb0b27b956be59 Mon Sep 17 00:00:00 2001 From: Eliseu Amaro Date: Mon, 26 Jul 2021 18:11:14 +0100 Subject: [PATCH] [TWIG][CSS] Right panel WIP. Create a note now looks better, need to style in some way the default user agent buttons without removing features (e.g. current file chosen). Signed-off-by: Eliseu Amaro --- public/assets/css/base.css | 7 +- public/assets/css/right/right.css | 109 ++++++++++++++++++++-- templates/sidepanel/right/right.html.twig | 81 +++++++++------- 3 files changed, 152 insertions(+), 45 deletions(-) diff --git a/public/assets/css/base.css b/public/assets/css/base.css index d7a7696262..083d746842 100644 --- a/public/assets/css/base.css +++ b/public/assets/css/base.css @@ -20,6 +20,7 @@ --bg2: #434A60; --bg3: #5C6684; --translucent: #00000033; + --translucent-light: #FFFFFF33; --white: #EEDFD4; --accent-blue: #8E8DBE; @@ -231,14 +232,14 @@ html { border-radius: var(--unit-size); box-sizing: border-box; - background-color: #00000022; + background-color: var(--translucent); font-size: var(--main-size); padding: var(--unit-size); } .note-info .avatar { - width: var(--main-size); - height: auto; + width: auto; + height: var(--main-size); } .note-content { diff --git a/public/assets/css/right/right.css b/public/assets/css/right/right.css index 441a5349ac..d7e6a47ad3 100644 --- a/public/assets/css/right/right.css +++ b/public/assets/css/right/right.css @@ -19,17 +19,110 @@ } .create-notice { + background-image: radial-gradient(ellipse at 10% 10%, var(--bg3), var(--accent-blue)), + url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAElBMVEUAAACUkpSEhoSMioyMjoyEgoRr6djFAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAU1JREFUKJEVUcl1xTAIpAVLSgECXIAYUoCAX0Bi919LlCPLm5ValiOUUe2+ZRVFuYpKXFsUX9aIp0V6GtC8VRhNL0X2fikvswhKrNDhes7pbpPkufFAtI0B76LEjfc2bgdHDk6RX4A/sjt6LCylfoYpNYYJx/9COhIugsjluzN9VGZ/Hnl51jIH2ba+Ywsy2RJCFdoDe8Obw61TXGAv+ewExMRJs7gd7YcimPuk42uMqY2VJ1fK+bDL32rb7kwok/la/u7Mrz7Xf0DTssSP2Btp1ZS0zw35tM/SsJKgWNLcRh+/th1QqntwtM3Tx0LNosoBYbM3qjJFiMeLsMH2i5BcQdU3n9sJHOE1Hoqn1GA/bm4s0YkVB/y4r0PbltF32FpljXmdlOOwbDvFWkoDYLppSG4pnM6UxX3Src1lhXeU36FOu3o+R2vNaHME/wESUl9/3zMniwAAAABJRU5ErkJggg==); + background-blend-mode: multiply; border-radius: var(--unit-size); - padding: var(--small-size); +} + +.section-title legend { + display: flex; + width: 100%; + border-radius: var(--unit-size); + + padding: var(--unit-size); + box-sizing: border-box; + + background-color: var(--translucent); + font-family: var(--display-font); + font-size: var(--main-size); +} + +.section-content { + padding: var(--unit-size); + box-sizing: border-box; +} + +.section-content hr { + all: unset; + display: block; + height: 2px; + background-image: linear-gradient(to left, var(--translucent-light), transparent 90%); + margin-bottom: var(--unit-size); +} + +.target, +.scope { + border-radius: var(--unit-size); +} + +.target label, +.scope label { + font-family: var(--display-font); +} + +#post_visibility { + display: flex; + justify-content: space-evenly; + font-size: var(--medium-size); + padding: var(--unit-size); + box-sizing: border-box; +} + +#post_visibility label { + margin-right: var(--main-size); +} + +#tabs { + display: flex; + flex-direction: column; + font-family: var(--display-font); +} + +.notice-options { + display: flex; + font-family: var(--display-font); + padding: var(--unit-size); + 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; +} + +.post { + align-self: flex-end; +} + +#post_content { + border-radius: var(--unit-size); + background-color: var(--translucent); + + width: 100%; + margin-top: var(--unit-size); + padding: var(--unit-size); + resize: vertical; + height: calc(6 * var(--main-size)); + + font-family: var(--main-font); + font-size: var(--medium-size); + color: var(--white); + box-sizing: border-box; +} + +#post_attachments, +#post_post { + cursor: pointer; } .custom-file-upload { display: inline-block; - padding: var(--small-size) var(--medium-size); -} - -#post_attachments { - font-family: var(--display-font); - font-size: var(--medium-size); - cursor: pointer; + font-size: var(--main-size); } \ No newline at end of file diff --git a/templates/sidepanel/right/right.html.twig b/templates/sidepanel/right/right.html.twig index bbf7708557..10afb025cc 100644 --- a/templates/sidepanel/right/right.html.twig +++ b/templates/sidepanel/right/right.html.twig @@ -2,43 +2,56 @@ {% if post_form is defined %} {{ form_start(post_form) }} -
-
-
- {{ form_label(post_form.to) }} -
-
- {{ form_widget(post_form.to) }} -
-
-
-
-
- {{ form_row(post_form.visibility) }} -
-
+
+
+
+ Create a note +
+ +
+ +
+ {{ form_label(post_form.to) }} +
+
+ {{ form_widget(post_form.to) }} +
+ + +
+ + +
+ {{ form_row(post_form.visibility) }} +
+ + +
+ + {% for tab in tabs %} {{ tab['title'] }} {% endfor %} -
-
-
-
- {{ form_row(post_form.content) }} -
-
-
-
- -
-
- {{ form_row(post_form.post) }} -
-
-
-
+ +
+
+ {{ form_row(post_form.content) }} +
+
+ +
+
+ +
+ + {{ form_row(post_form.post) }} +
+ + + + {{ form_end(post_form) }} {% endif %}