[CSS] You can hide Posting section on command now

This commit is contained in:
Eliseu Amaro 2021-12-06 21:07:45 +00:00
parent a6af3a9b7a
commit ef435b824b
Signed by: eliseuamaro
GPG Key ID: 96DA09D4B97BC2D5
2 changed files with 10 additions and 10 deletions

View File

@ -10,18 +10,18 @@
{% set blocks = handle_event('AppendRightPostingBlock', request) %} {% set blocks = handle_event('AppendRightPostingBlock', request) %}
{% if blocks['post_form'] is defined %} {% if blocks['post_form'] is defined %}
<section class="section-widget" title={{ 'Create a new note.' | trans }}> <section class="section-widget" title={{ 'Create a new note.' | trans }}>
<details class="section-title-details" <details class="section-widget-title-details" open="open"
title={{ 'Expand if you want to access more options.' | trans }}> title={{ 'Expand if you want to access more options.' | trans }}>
<summary class="section-title-summary"> <summary class="section-title-summary">
{{ "Create a note" | trans }}{{ icon('arrow-down', 'icon icon-details-open') | raw }} {{ "Create a note" | trans }}{{ icon('arrow-down', 'icon icon-details-open') | raw }}
</summary> </summary>
</details>
<div class="section-form"> <div class="section-form">
<fieldset> <fieldset>
{{ form(blocks['post_form']) }} {{ form(blocks['post_form']) }}
</fieldset> </fieldset>
</div> </div>
</details>
</section> </section>
{% endif %} {% endif %}

View File

@ -83,7 +83,7 @@
font-weight: 700; font-weight: 700;
} }
.section-title-details { .section-widget-title-details summary {
font-size: var(--small); font-size: var(--small);
font-weight: 700; font-weight: 700;
border-radius: var(--smaller); border-radius: var(--smaller);
@ -91,12 +91,12 @@
background: var(--gradient) !important; background: var(--gradient) !important;
} }
.section-title-details[open] svg { .section-widget-title-details[open] svg {
transform: rotate(180deg); transform: rotate(180deg);
animation: fadeOut 200ms cubic-bezier(0,0.55,0.45,1); animation: fadeOut 200ms cubic-bezier(0,0.55,0.45,1);
} }
.section-title-details:not([open]) svg { .section-widget-title-details:not([open]) svg {
transform: initial; transform: initial;
animation: fadeIn 200ms cubic-bezier(0,0.55,0.45,1); animation: fadeIn 200ms cubic-bezier(0,0.55,0.45,1);
} }