[RIGHT][CSS] Right panel now shows an intuitive icon for other note options available.

This commit is contained in:
Eliseu Amaro 2021-08-03 16:43:41 +01:00 committed by Hugo Sales
parent 625c056f30
commit bd9e86afe0
Signed by untrusted user: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
3 changed files with 36 additions and 22 deletions

View File

@ -126,6 +126,7 @@ a:hover {
transition: var(--cubic-transition);
}
button,
input[type=file]::file-selector-button {
font-family: var(--display-font);
@ -154,15 +155,16 @@ button {
#instance:focus svg,
#instance:hover svg {
fill: var(--bg1);
transition: all 0.4s ease;
transition: all 400ms ease;
}
summary:hover > svg,
summary:focus > svg {
border-radius: var(--unit-size);
padding: var(--unit-size) !important;
background: var(--white) !important;
background-color: var(--white);
fill: var(--bg1) !important;
stroke: var(--bg1) !important;
border: unset !important;
transition: var(--cubic-transition);
}

View File

@ -23,15 +23,29 @@
}
.section-title {
flex: 1;
display: flex;
flex-direction: column;
border-radius: var(--unit-size);
padding: var(--unit-size);
box-sizing: border-box;
background-color: var(--translucent);
font-family: var(--display-font);
}
.section-title-plus {
fill: var(--white);
width: var(--main-size);
height: auto;
}
.section-title-plus summary {
display: block;
position: absolute;
top: var(--unit-size);
right: var(--unit-size);
padding: var(--unit-size);
}
.section-content {
margin: var(--unit-size);
}
@ -137,14 +151,6 @@
.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;
}

View File

@ -4,7 +4,20 @@
<section class="create-notice bg">
{{ form_start(post_form) }}
<legend class="section-title">Create a note</legend>
<legend class="section-title">
<h1>Create a note</h1>
<details class="section-title-plus">
<summary>
{{ icon('plus-circle', 'icon icon-plus') | raw }}
</summary>
<div id="note-types">
{% for tab in tabs %}
<a href={{ path(tab['href']) }}>{{ tab['title'] }}</a>
{% endfor %}
</div>
</details>
</legend>
<div class="section-content">
<span class="target">
@ -47,14 +60,7 @@
</div>
{{ 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>