eliseuamaro/gnu-social
1
0
Fork 0
forked from GNUsocial/gnu-social
Code Issues Pull Requests 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 203b16c5bf
commit e546721ca1
Signed by untrusted user: 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);
}
.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;
}

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

@ -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 %}