[TWIG][CSS] Fixed right panel buttons, fix issue where the form was invalid on send.
Signed-off-by: Eliseu Amaro <mail@eliseuama.ro>
This commit is contained in:
parent
203b16c5bf
commit
e546721ca1
GPG Key ID:
7D0C7EAFC9D835A0
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 %}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue