[CSS] Overall typography resizing to provide proper text hierarchy. Radio buttons polish, notes author box is now smaller. Better organization of CSS rules according to their filename and thus, their aim.
This commit is contained in:
Eliseu Amaro
Hugo Sales
parent
1962a004aa
commit
e15044fe36
|
|
@ -31,13 +31,7 @@
|
|||
--fade-out: fadeOut 200ms cubic-bezier(0, 0.55, 0.45, 1);
|
||||
}
|
||||
|
||||
#instance:focus svg,
|
||||
#instance:hover svg {
|
||||
fill: var(--bg1);
|
||||
transition: var(--cubic-transition);
|
||||
}
|
||||
|
||||
/* DEFAULTS */
|
||||
/* BACKGROUND IMG GRADIENT */
|
||||
.bg {
|
||||
background-color: var(--bg3);
|
||||
background-image: url(../images/bg.png);
|
||||
|
|
@ -46,6 +40,7 @@
|
|||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
/* HEADER AND SIDEPANELS */
|
||||
#header {
|
||||
z-index: 1;
|
||||
|
||||
|
|
@ -63,6 +58,8 @@
|
|||
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
/* content should be rendered after the header, not bellow */
|
||||
#header + * {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
|
@ -72,10 +69,9 @@
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.active {
|
||||
border-radius: var(--unit-size);
|
||||
background: var(--white);
|
||||
color: var(--bg1) !important;
|
||||
#instance:focus svg,
|
||||
#instance:hover svg {
|
||||
fill: var(--bg1);
|
||||
transition: var(--cubic-transition);
|
||||
}
|
||||
|
||||
|
|
@ -84,6 +80,40 @@
|
|||
fill: var(--white);
|
||||
}
|
||||
|
||||
.panel aside {
|
||||
font-size: var(--medium-size);
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
|
||||
width: 20%;
|
||||
animation: var(--fade-in);
|
||||
padding: var(--unit-size);
|
||||
}
|
||||
|
||||
.panel aside .footer {
|
||||
display: inline-block;
|
||||
position: fixed;
|
||||
|
||||
max-width: 20%;
|
||||
|
||||
bottom: var(--unit-size);
|
||||
left: var(--unit-size);
|
||||
font-size: var(--small-size);
|
||||
}
|
||||
|
||||
.icon {
|
||||
fill: var(--white);
|
||||
}
|
||||
|
||||
/* CURRENT PAGE LINK */
|
||||
.active {
|
||||
border-radius: var(--unit-size);
|
||||
background: var(--white);
|
||||
color: var(--bg1) !important;
|
||||
transition: var(--cubic-transition);
|
||||
}
|
||||
|
||||
/* CONTAINS ALL ELEMENTS BESIDES HEADER */
|
||||
.container {
|
||||
display: flex;
|
||||
|
|
@ -152,7 +182,7 @@
|
|||
|
||||
background-color: var(--translucent);
|
||||
font-size: var(--main-size);
|
||||
padding: var(--unit-size);
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.note-info .avatar {
|
||||
|
|
@ -164,7 +194,6 @@
|
|||
padding: var(--small-size);
|
||||
}
|
||||
.note-content p {
|
||||
font-size: var(--medium-size);
|
||||
padding-left: var(--small-size);
|
||||
padding-right: var(--small-size);
|
||||
}
|
||||
|
|
@ -193,58 +222,31 @@
|
|||
height: auto;
|
||||
}
|
||||
|
||||
/* SIDE PANELS */
|
||||
/* BUTTONS AND INPUT */
|
||||
|
||||
.panel {
|
||||
font-size: var(--main-size);
|
||||
}
|
||||
|
||||
.panel aside {
|
||||
animation: var(--fade-in);
|
||||
padding: var(--unit-size);
|
||||
|
||||
|
||||
box-sizing: border-box;
|
||||
width: 20%;
|
||||
|
||||
display: block;
|
||||
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
}
|
||||
|
||||
.panel aside .footer {
|
||||
max-width: 20%;
|
||||
|
||||
display: inline-block;
|
||||
position: fixed;
|
||||
|
||||
bottom: var(--unit-size);
|
||||
left: var(--unit-size);
|
||||
font-size: var(--small-size);
|
||||
}
|
||||
|
||||
.icon {
|
||||
fill: var(--white);
|
||||
vertical-align: middle;
|
||||
}
|
||||
.icon-left,
|
||||
.icon-right {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* MEDIA RESIZE */
|
||||
@media (max-width: 1200px) {
|
||||
@media (min-width: 1200px) {
|
||||
/* no need to make the panels disappear at this size */
|
||||
.icon-left,
|
||||
.icon-right {
|
||||
display: flex;
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
/* content should occupy the entire width at this size */
|
||||
.content {
|
||||
margin: unset;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* we need to control panel's view at this size */
|
||||
.icon-left,
|
||||
.icon-right {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* by default they are hidden */
|
||||
.panel aside {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -285,6 +287,73 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* BUTTONS AND INPUT SHENANIGANS */
|
||||
button,
|
||||
input:not([type=text]) {
|
||||
font-size: var(--small-size) !important;
|
||||
background-image: linear-gradient(180deg, var(--bg2), transparent) !important;
|
||||
color: var(--white) !important;
|
||||
|
||||
border: solid 2px var(--bg2) !important;
|
||||
}
|
||||
|
||||
textarea:hover,
|
||||
textarea:focus {
|
||||
border-color: var(--bg3) !important;
|
||||
}
|
||||
|
||||
/* TODO: hover and focus feedback, checkbox */
|
||||
input[type=radio]:hover,
|
||||
input[type=radio]:focus {
|
||||
border-color: var(--bg3) !important;
|
||||
}
|
||||
input[type=radio] {
|
||||
border: solid 0.25em var(--bg2) !important;
|
||||
background-color: var(--bg1) !important;
|
||||
}
|
||||
input[type=radio]:checked {
|
||||
background-color: var(--white) !important;
|
||||
}
|
||||
|
||||
button:hover,
|
||||
button:focus,
|
||||
input:hover,
|
||||
input:focus {
|
||||
border-color: var(--bg3) !important;
|
||||
color: var(--white) !important;
|
||||
}
|
||||
|
||||
button:hover,
|
||||
input:is([type=reset], [type=button], [type=submit]):hover {
|
||||
color: var(--white) !important;
|
||||
}
|
||||
|
||||
:focus-visible::-moz-focus-inner {
|
||||
border-color: var(--bg3) !important;
|
||||
}
|
||||
|
||||
:is(:disabled, :disabled:active)::file-selector-button,
|
||||
button:is(:disabled, :disabled:active),
|
||||
input:is([type=reset], [type=button], [type=submit]):is(:disabled, :disabled:active),
|
||||
select:is(:disabled, :disabled:active) > button {
|
||||
color: var(--white) !important;
|
||||
}
|
||||
|
||||
/* file selector */
|
||||
input[type=file] {
|
||||
background: linear-gradient(180deg, var(--bg2), transparent) !important;
|
||||
}
|
||||
input[type=file]:focus,
|
||||
input[type=file]:hover {
|
||||
background: linear-gradient(180deg, var(--bg2), var(--bg3) 200%) !important;
|
||||
}
|
||||
|
||||
/* button part of file selector */
|
||||
::file-selector-button {
|
||||
color: var(--white) !important;
|
||||
}
|
||||
|
||||
|
||||
/* ANIMATIONS */
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
|
|
|
|||
|
|
@ -62,7 +62,6 @@
|
|||
|
||||
#user-tags {
|
||||
font-family: var(--main-font);
|
||||
font-size: var(--medium-size);
|
||||
padding-left: var(--unit-size);
|
||||
}
|
||||
|
||||
|
|
@ -91,8 +90,3 @@
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sec-nav {
|
||||
font-size: var(--medium-size);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
@ -1,91 +0,0 @@
|
|||
.poll .poll-question {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.poll #pollresponse_Options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#pollresponse > * > label {
|
||||
vertical-align: top;
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.poll .form-single,
|
||||
.create-poll-notice .form-single {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: var(--small-size);
|
||||
}
|
||||
|
||||
.poll .result {
|
||||
display: flex;
|
||||
padding-top: var(--unit-size);
|
||||
}
|
||||
|
||||
.poll .result-vote {
|
||||
font-weight: 650;
|
||||
padding-left: var(--unit-size);
|
||||
}
|
||||
|
||||
.create-poll-notice {
|
||||
padding: var(--unit-size);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#post_poll_visibility {
|
||||
font-size: var(--medium-size);
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
#post_poll_visibility > * {
|
||||
padding-right: var(--unit-size);
|
||||
}
|
||||
|
||||
|
||||
#post_poll > * {
|
||||
padding: calc(var(--unit-size) * 0.2);
|
||||
}
|
||||
|
||||
|
||||
/* FORMS ------------------------------*/
|
||||
.poll label {
|
||||
display: inline-block;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
width: 100%;
|
||||
padding: 0.5em 0.1em;
|
||||
}
|
||||
|
||||
.poll input[type=text],
|
||||
.create-poll-notice input[type=text] {
|
||||
margin-top: calc(var(--unit-size) * 0.5);
|
||||
width: calc(100% - var(--unit-size));
|
||||
background-color: var(--bg2);
|
||||
box-shadow: var(--shadow);
|
||||
border: solid 2px var(--accent-low);
|
||||
padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
|
||||
color: var(--fg);
|
||||
border-radius: calc(var(--unit-size) * 0.5);
|
||||
font-size: var(--medium-size);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
.poll button[type=submit],
|
||||
.create-poll-notice button[type=submit] {
|
||||
background: var(--bg1);
|
||||
padding: calc(var(--unit-size) * 0.8) calc(var(--unit-size) * 2);
|
||||
color: var(--fg);
|
||||
border-style: solid;
|
||||
border-color: var(--accent);
|
||||
border-radius: var(--unit-size);
|
||||
border-width: 2px;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-size: var(--small-size);
|
||||
font-weight: 700;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -71,7 +71,8 @@ details > summary::-webkit-details-marker {
|
|||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
vertical-align: middle !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
/* TYPOGRAPHY AND GENERAL SELECTORS */
|
||||
|
|
@ -84,6 +85,7 @@ html {
|
|||
background-attachment: fixed;
|
||||
color: var(--white);
|
||||
font-family: var(--main-font);
|
||||
font-size: var(--small-size);
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
@ -106,8 +108,8 @@ h2 {
|
|||
|
||||
h3 {
|
||||
font-family: var(--display-font);
|
||||
font-size: var(--medium-size);
|
||||
font-weight: 600;
|
||||
font-size: var(--small-size);
|
||||
font-weight: 700;
|
||||
line-height: 1.00;
|
||||
letter-spacing: -0.20px;
|
||||
word-spacing: 1.00px;
|
||||
|
|
@ -116,7 +118,7 @@ h3 {
|
|||
|
||||
p {
|
||||
font-family: var(--main-font);
|
||||
font-size: var(--medium-size);
|
||||
font-size: var(--small-size);
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.30px;
|
||||
word-spacing: -0.10px;
|
||||
|
|
@ -124,6 +126,14 @@ p {
|
|||
text-transform: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
font-family: var(--main-font);
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.30px;
|
||||
word-spacing: -0.10px;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
text-decoration: none;
|
||||
margin: 0;
|
||||
|
|
@ -197,83 +207,35 @@ input:not([type=text]) {
|
|||
cursor: pointer;
|
||||
font-size: var(--medium-size);
|
||||
|
||||
background-image: linear-gradient(180deg, var(--bg2), transparent);
|
||||
color: var(--white);
|
||||
|
||||
border: solid 2px var(--bg2);
|
||||
border-radius: var(--unit-size);
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
textarea:hover,
|
||||
textarea:focus {
|
||||
border: solid 2px var(--bg3) !important;
|
||||
}
|
||||
|
||||
*|*::-moz-button-content {
|
||||
all: unset;
|
||||
}
|
||||
|
||||
/* TODO: hover and focus feedback, checkbox */
|
||||
input[type=radio]:hover,
|
||||
input[type=radio]:focus {
|
||||
border: solid 5px var(--bg3) !important;
|
||||
}
|
||||
|
||||
input[type=radio] {
|
||||
all: unset;
|
||||
display: inline-block;
|
||||
width: var(--unit-size);
|
||||
height: var(--unit-size);
|
||||
border: solid 5px var(--bg2);
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
border-radius: 50%;
|
||||
margin: 3px 3px 0px 5px;
|
||||
background-color: var(--bg1);
|
||||
}
|
||||
input[type=radio]:checked {
|
||||
background-color: var(--white);
|
||||
}
|
||||
|
||||
button:hover,
|
||||
button:focus,
|
||||
input:hover,
|
||||
input:focus {
|
||||
border: solid 2px var(--bg3);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
button:hover,
|
||||
input:is([type=reset], [type=button], [type=submit]):hover {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
:focus-visible::-moz-focus-inner {
|
||||
border-color: var(--bg3) !important;
|
||||
}
|
||||
|
||||
:is(:disabled, :disabled:active)::file-selector-button,
|
||||
button:is(:disabled, :disabled:active),
|
||||
input:is([type=reset], [type=button], [type=submit]):is(:disabled, :disabled:active),
|
||||
select:is(:disabled, :disabled:active) > button {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
/* file selector */
|
||||
input[type=file] {
|
||||
all: unset;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
background: linear-gradient(135deg, var(--bg2), transparent);
|
||||
|
||||
display: block !important;
|
||||
width: 100%;
|
||||
|
||||
font-family: var(--main-font);
|
||||
font-size: var(--medium-size);
|
||||
|
||||
border-radius: var(--unit-size);
|
||||
}
|
||||
input[type=file]:focus,
|
||||
input[type=file]:hover {
|
||||
background: linear-gradient(135deg, var(--bg2), var(--bg3) 200%);
|
||||
}
|
||||
|
||||
input + label {
|
||||
all: unset;
|
||||
|
|
@ -286,8 +248,7 @@ input + label {
|
|||
cursor: pointer;
|
||||
|
||||
background-color: unset;
|
||||
color: var(--white);
|
||||
|
||||
border: unset;
|
||||
margin: 5px;
|
||||
margin: 3px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
right: 0;
|
||||
}
|
||||
|
||||
.create-notice {
|
||||
.section-widget {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
|
|
@ -10,84 +10,52 @@
|
|||
background-color: var(--translucent);
|
||||
border-radius: var(--unit-size);
|
||||
border: solid 2px var(--bg2);
|
||||
}
|
||||
|
||||
.create-notice textarea {
|
||||
width: 100%;
|
||||
font-family: var(--main-font);
|
||||
font-weight: 400;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: var(--display-font);
|
||||
font-weight: 900;
|
||||
font-size: var(--main-size);
|
||||
|
||||
border-radius: var(--unit-size);
|
||||
padding: var(--unit-size);
|
||||
padding: 2px var(--unit-size);
|
||||
|
||||
background-color: var(--translucent);
|
||||
font-family: var(--display-font);
|
||||
}
|
||||
.section-title-hamburger {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.section-title-hamburger svg {
|
||||
align-self: center;
|
||||
fill: var(--white);
|
||||
}
|
||||
|
||||
.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);
|
||||
.section-form {
|
||||
padding: var(--unit-size);
|
||||
}
|
||||
|
||||
.section-content {
|
||||
margin: var(--unit-size);
|
||||
}
|
||||
.section-content hr {
|
||||
all: unset;
|
||||
display: inline;
|
||||
height: 2px;
|
||||
background-image: linear-gradient(to left, var(--translucent), transparent 90%);
|
||||
.form-options {
|
||||
display: block !important;
|
||||
margin-bottom: var(--unit-size);
|
||||
}
|
||||
|
||||
.target,
|
||||
.scope {
|
||||
border-radius: var(--unit-size);
|
||||
}
|
||||
|
||||
.target label:first-child,
|
||||
.scope label:first-child {
|
||||
font-family: var(--display-font);
|
||||
}
|
||||
|
||||
#tabs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: var(--display-font);
|
||||
}
|
||||
|
||||
.notice-options {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#post_content {
|
||||
.form-input {
|
||||
border-radius: var(--unit-size);
|
||||
background-color: var(--translucent);
|
||||
color: var(--white);
|
||||
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: calc(6 * var(--main-size));
|
||||
|
||||
border: 2px solid var(--bg2);
|
||||
border: 2px solid transparent;
|
||||
margin-top: var(--unit-size);
|
||||
margin-bottom: var(--unit-size);
|
||||
padding: var(--unit-size);
|
||||
resize: vertical;
|
||||
|
||||
font-family: var(--main-font);
|
||||
font-size: var(--medium-size);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.attachments {
|
||||
margin-bottom: var(--unit-size);
|
||||
}
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
.main-nav {
|
||||
background-color: var(--translucent);
|
||||
margin-bottom: var(--unit-size);
|
||||
font-size: var(--main-size);
|
||||
border-radius: var(--unit-size);
|
||||
padding: var(--unit-size);
|
||||
box-sizing: border-box;
|
||||
|
|
@ -30,13 +29,11 @@
|
|||
}
|
||||
|
||||
.main-nav ul li {
|
||||
font-size: var(--medium-size);
|
||||
border-radius: var(--unit-size);
|
||||
}
|
||||
|
||||
.form {
|
||||
display: flex;
|
||||
font-size: var(--main-size);
|
||||
border-radius: var(--unit-size);
|
||||
padding: var(--unit-size);
|
||||
box-sizing: border-box;
|
||||
|
|
@ -57,7 +54,6 @@
|
|||
.form #save {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: var(--medium-size);
|
||||
padding: var(--unit-size);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -77,7 +73,6 @@
|
|||
position: relative;
|
||||
|
||||
color: var(--white);
|
||||
font-size: var(--medium-size);
|
||||
border-radius: var(--unit-size);
|
||||
padding: var(--unit-size);
|
||||
box-sizing: border-box;
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
<li>
|
||||
<details class="section-title-settings">
|
||||
<summary>
|
||||
<h1>Profile {{ icon('arrow-down', 'icon icon-details-open') | raw }}</h1>
|
||||
<h2>Profile {{ icon('arrow-down', 'icon icon-details-open') | raw }}</h2>
|
||||
|
||||
<em>Personal Information, Avatar and Profile</em>
|
||||
</summary>
|
||||
|
|
@ -34,8 +34,8 @@
|
|||
<li>
|
||||
<details class="section-title-settings">
|
||||
<summary>
|
||||
<h1>Personal
|
||||
Info{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h1>
|
||||
<h3>Personal
|
||||
Info{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h3>
|
||||
|
||||
<em>Nickname, Homepage, Bio, Self Tags and more.</em>
|
||||
</summary>
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
<li>
|
||||
<details class="section-title-settings">
|
||||
<summary>
|
||||
<h1>{{ tab['title'] }}{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h1>
|
||||
<h3>{{ tab['title'] }}{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h3>
|
||||
|
||||
<em>{{ tab['desc'] }}</em>
|
||||
</summary>
|
||||
|
|
@ -79,7 +79,7 @@
|
|||
<li>
|
||||
<details class="section-title-settings">
|
||||
<summary>
|
||||
<h1>Account{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h1>
|
||||
<h2>Account{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h2>
|
||||
<em>Email, Password and Language</em>
|
||||
</summary>
|
||||
|
||||
|
|
@ -96,7 +96,7 @@
|
|||
<li>
|
||||
<details class="section-title-settings">
|
||||
<summary>
|
||||
<h1>Notifications{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h1>
|
||||
<h2>Notifications{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h2>
|
||||
<em>Enable/disable notifications (Email, XMPP, Replies...)</em>
|
||||
</summary>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,78 +1,53 @@
|
|||
<aside id='right-panel'>
|
||||
|
||||
{% if post_form is defined %}
|
||||
|
||||
<section class="create-notice">
|
||||
|
||||
<section class="section-widget">
|
||||
<legend class="section-title">
|
||||
<h1>Create a note</h1>
|
||||
|
||||
<details class="section-title-plus">
|
||||
<summary>
|
||||
{{ icon('plus-circle', 'icon icon-plus') | raw }}
|
||||
<details>
|
||||
<summary class="section-title-hamburger">
|
||||
Create a note {{ 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>
|
||||
|
||||
{% for tab in tabs %}
|
||||
<a class="section-title-hamburger-element" href={{ path(tab['href']) }}>{{ tab['title'] }}</a>
|
||||
{% endfor %}
|
||||
</details>
|
||||
</legend>
|
||||
|
||||
<div class="section-content">
|
||||
<div class="section-form">
|
||||
{{ form_start(post_form) }}
|
||||
<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 class="form-target">
|
||||
{{ form_label(post_form.to) }}
|
||||
{{ form_widget(post_form.to) }}
|
||||
</span>
|
||||
|
||||
<hr>
|
||||
{{ form_row(post_form.visibility, {'attr': {'class': 'form-scope'}}) }}
|
||||
|
||||
<span id="input">
|
||||
<div class="input-wrapper">
|
||||
<div class="content-input">
|
||||
{{ form_row(post_form.content) }}
|
||||
</div>
|
||||
</div>
|
||||
{{ form_row(post_form.content, {'attr': {'class': 'form-input'}}) }}
|
||||
|
||||
<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>
|
||||
</span>
|
||||
<label for="{{ post_form.attachments.vars.id }}" class="form-options">
|
||||
{{ form_widget(post_form.attachments) }}
|
||||
</label>
|
||||
|
||||
{{ form_row(post_form.post) }}
|
||||
{{ form_row(post_form.post, {'attr': {'class': 'form-send'}}) }}
|
||||
|
||||
{{ form_end(post_form) }}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
{% endif %}
|
||||
|
||||
{% set current_path = app.request.get('_route') %}
|
||||
{% if right_panel_vars is defined %}
|
||||
{% for block in handle_event('AppendRightPanelBlock', {'path': current_path, 'vars': right_panel_vars}) %}
|
||||
{{ block | raw }}
|
||||
<section class="section-widget">
|
||||
{{ block | raw }}
|
||||
</section>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
{% for block in handle_event('AppendRightPanelBlock', {'path': current_path}) %}
|
||||
{{ block | raw }}
|
||||
<section class="section-widget">
|
||||
{{ block | raw }}
|
||||
</section>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</aside>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user