GNUsocial/gnu-social
4
0
Fork 1
Code Issues Releases Wiki Activity

[TWIG][CSS] Fixed right panel buttons, fix issue where the form was invalid on send.

Browse Source 
Signed-off-by: Eliseu Amaro <mail@eliseuama.ro>
This commit is contained in:
Eliseu Amaro 2021-07-26 19:08:25 +01:00 committed by Hugo Sales
parent c7a28876aa
commit 0b9cc721c4
Signed by: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
2 changed files with 114 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
public/assets/css/right/right.css
View File

@ -25,7 +25,7 @@
border-radius: var(--unit-size); border-radius: var(--unit-size);
} }
.section-title legend { .section-title {
display: flex; display: flex;
width: 100%; width: 100%;
border-radius: var(--unit-size); border-radius: var(--unit-size);
@ -39,8 +39,7 @@
} }
.section-content { .section-content {
padding: var(--unit-size); margin: var(--unit-size);
box-sizing: border-box;
} }
.section-content hr { .section-content hr {
@ -63,12 +62,16 @@
#post_visibility { #post_visibility {
display: flex; display: flex;
justify-content: space-evenly; justify-content: flex-start;
font-size: var(--medium-size); font-size: var(--medium-size);
padding: var(--unit-size); padding: var(--unit-size);
box-sizing: border-box; box-sizing: border-box;
} }
#post_visibility input[type="radio"] {
margin-right: 5px;
}
#post_visibility label { #post_visibility label {
margin-right: var(--main-size); margin-right: var(--main-size);
} }
@ -80,21 +83,13 @@
} }
.notice-options { .notice-options {
margin-top: var(--unit-size);
display: flex; display: flex;
font-family: var(--display-font); flex-wrap: wrap;
padding: var(--unit-size);
box-sizing: border-box; box-sizing: border-box;
}
.notice-options button { font-family: var(--display-font);
font-size: var(--medium-size); width: 100%;
padding: var(--unit-size) var(--small-size);
border-radius: var(--unit-size);
border: none;
}
.attachments {
flex: 1;
} }
.post { .post {
@ -117,12 +112,65 @@
box-sizing: border-box; box-sizing: border-box;
} }
#post_attachments, #post_attachments,
#post_post { #post_post {
cursor: pointer; cursor: pointer;
} }
.custom-file-upload { #post_post {
display: inline-block; font-family: var(--display-font);
font-size: var(--main-size); 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;
} }

88
templates/sidepanel/right/right.html.twig
View File

@ -1,58 +1,64 @@
<aside id='right-panel'> <aside id='right-panel'>
{% if post_form is defined %} {% 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"> <section class="create-notice">
<span class="target"> {{ form_start(post_form) }}
<div class="target-top"> <fieldset>
{{ form_label(post_form.to) }} <legend class="section-title">Create a note</legend>
</div>
<div class="target-bot"> <div class="section-content">
{{ form_widget(post_form.to) }} <span class="target">
</div> <div class="target-top">
</span> {{ form_label(post_form.to) }}
</div>
<div class="target-bot">
{{ form_widget(post_form.to) }}
</div>
</span>
<hr> <hr>
<span class="scope"> <span class="scope">
<div class="visibility"> <div class="visibility">
{{ form_row(post_form.visibility) }} {{ form_row(post_form.visibility) }}
</div> </div>
</span> </span>
<hr> <hr>
<span id="tabs"> <span id="input">
{% for tab in tabs %} <div class="input-wrapper">
<a href={{ path(tab['href']) }}>{{ tab['title'] }}</a> <div class="content-input">
{% endfor %} {{ form_row(post_form.content) }}
</div>
<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>
</div> </div>
{{ form_row(post_form.post) }} <div class="notice-options">
</div> <div class="attachments">
</span> <label for="{{ post_form.attachments.vars.id }}" class="custom-file-upload">
</fieldset> {{ form_widget(post_form.attachments) }}
</form> </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> </section>
{{ form_end(post_form) }}
{% endif %} {% endif %}