diff --git a/components/Posting/Posting.php b/components/Posting/Posting.php index b732991aa3..037a007f94 100644 --- a/components/Posting/Posting.php +++ b/components/Posting/Posting.php @@ -36,8 +36,10 @@ use App\Entity\Note; use App\Entity\NoteToLink; use App\Util\Common; use App\Util\Exception\ClientException; +use App\Util\Exception\DuplicateFoundException; use App\Util\Exception\InvalidFormException; use App\Util\Exception\RedirectException; +use App\Util\Exception\ServerException; use InvalidArgumentException; use Symfony\Component\Form\Extension\Core\Type\ChoiceType; use Symfony\Component\Form\Extension\Core\Type\FileType; @@ -56,6 +58,10 @@ END; /** * HTML render event handler responsible for adding and handling * the result of adding the note submission form, only if a user is logged in + * + * @throws ClientException + * @throws RedirectException + * @throws ServerException */ public function onStartTwigPopulateVars(array &$vars): bool { @@ -81,8 +87,8 @@ END; $form = Form::create([ ['content', TextareaType::class, ['label' => ' ', 'data' => '', 'attr' => ['placeholder' => _m($placeholder_string[$rand_key])]]], ['attachments', FileType::class, ['label' => ' ', 'data' => null, 'multiple' => true, 'required' => false]], - ['visibility', ChoiceType::class, ['label' => _m('Visibility:'), 'expanded' => true, 'data' => 'public', 'choices' => [_m('Public') => 'public', _m('Instance') => 'instance', _m('Private') => 'private']]], - ['to', ChoiceType::class, ['label' => _m('To:'), 'multiple' => true, 'expanded' => true, 'choices' => $to_tags]], + ['visibility', ChoiceType::class, ['label' => _m('Visibility:'), 'multiple' => false, 'expanded' => false, 'data' => 'public', 'choices' => [_m('Public') => 'public', _m('Instance') => 'instance', _m('Private') => 'private']]], + ['to', ChoiceType::class, ['label' => _m('To:'), 'multiple' => false, 'expanded' => false, 'choices' => $to_tags]], ['post_note', SubmitType::class, ['label' => _m('Post')]], ]); @@ -106,6 +112,9 @@ END; * Store the given note with $content and $attachments, created by * $actor_id, possibly as a reply to note $reply_to and with flag * $is_local. Sanitizes $content and $attachments + * + * @throws DuplicateFoundException + * @throws ClientException|ServerException */ public static function storeNote(int $actor_id, ?string $content, array $attachments, bool $is_local, ?int $reply_to = null, ?int $repeat_of = null) { @@ -166,17 +175,26 @@ END; * Get a unique representation of a file on disk * * This can be used in the future to deduplicate images by visual content + * + * @param string $filename + * @param null|string $out_hash + * + * @return bool */ - public function onHashFile(string $filename, ?string &$out_hash) + public function onHashFile(string $filename, ?string &$out_hash): bool { $out_hash = hash_file(Attachment::FILEHASH_ALGO, $filename); return Event::stop; } /** - * Fill the list of allowed sizes for an attachment, to prevent potential DoS'ing by requesting thousands of different thumbnail sizes + * Fill the list with allowed sizes for an attachment, to prevent potential DoS'ing by requesting thousands of different thumbnail sizes + * + * @param null|array $sizes + * + * @return bool */ - public function onGetAllowedThumbnailSizes(?array &$sizes) + public function onGetAllowedThumbnailSizes(?array &$sizes): bool { $sizes[] = ['width' => Common::config('thumbnail', 'width'), 'height' => Common::config('thumbnail', 'height')]; return Event::next; diff --git a/public/assets/css/base.css b/public/assets/css/base.css index 46efd5437c..ab75ef7cb9 100644 --- a/public/assets/css/base.css +++ b/public/assets/css/base.css @@ -10,8 +10,8 @@ * small size - used in common text, borders */ --unit-size: 0.5rem; - --main-size: 1.4rem; - --medium-size: 1.15rem; + --main-size: 1.5rem; + --medium-size: 1.2rem; --small-size: 1rem; /* colours and shadows */ @@ -31,6 +31,39 @@ --fade-out: fadeOut 200ms cubic-bezier(0, 0.55, 0.45, 1); } +a, +a:visited { + text-decoration: none; + color: var(--white); + margin-bottom: 1px; + outline: 0; +} + +a:focus, +a:hover { + text-decoration: underline; + color: var(--white); + transition: var(--cubic-transition); +} + +figcaption a:link { + font-size: var(--small-size); + color: var(--white); +} + +hr { + all: unset; + display: block; + height: 2px; + background: var(--translucent); +} + +summary:focus { + animation-name: highlight; + animation-duration: 500ms; + animation-timing-function: ease-in-out; +} + /* BACKGROUND IMG GRADIENT */ .bg { background-color: var(--bg3); @@ -74,24 +107,14 @@ margin-left: 4px; } -#instance:focus svg, -#instance:hover svg { - fill: var(--bg1); - transition: var(--cubic-transition); -} - .icon { fill: var(--white); - width: 1em; - height: 1em; + align-self: center; } /* CURRENT PAGE LINK */ .active { - border-radius: 4px; - background: var(--white); - color: var(--bg1) !important; - transition: var(--cubic-transition); + font-weight: bold; } /* CONTAINS ALL ELEMENTS BESIDES HEADER */ @@ -99,13 +122,15 @@ margin-top: 3rem; margin-left: 20%; margin-right: 20%; - padding: var(--unit-size); + + padding: var(--unit-size) var(--unit-size) 0 var(--unit-size); } /* THE FOCUSED (middle) DIV */ .content { display: flex; flex-direction: column; + padding: var(--unit-size) var(--unit-size) 0 var(--unit-size); width: 100%; } @@ -145,14 +170,12 @@ /* NOTES */ .notes hr { margin-top: var(--unit-size); - margin-bottom: var(--main-size); + margin-bottom: var(--small-size); } .h-entry, .note { background-color: var(--translucent); - border: solid 2px var(--bg2); - /*border-top: solid 2px var(--bg3);*/ border-radius: var(--unit-size); } @@ -160,11 +183,14 @@ display: flex; justify-content: space-between; align-items: center; + + border: solid 2px var(--bg2); + border-bottom: unset; border-radius: var(--unit-size) var(--unit-size) 0 0; background-color: var(--translucent); font-size: var(--medium-size); - padding: 4px; + padding: 5px 10px 5px 10px; } .note-author { @@ -188,6 +214,9 @@ display: flex; vertical-align: middle; } +.note-actions button { + margin-left: 5px; +} .favourite-button-container { width: 1em !important; @@ -222,6 +251,10 @@ } .note-content { + border: solid 2px var(--bg2); + border-top: unset; + border-radius: 0 0 var(--unit-size) var(--unit-size); + padding: var(--small-size); } @@ -260,7 +293,6 @@ display: flex; flex-direction: column; width: 100%; - padding: var(--unit-size); background-color: var(--translucent); border-radius: var(--unit-size); @@ -271,56 +303,36 @@ color: var(--white); } -.section-title { +.section-title-details { font-family: var(--display-font); font-weight: 900; font-size: var(--main-size); border-radius: var(--unit-size); - padding: 2px var(--unit-size); + padding: 5px 10px 5px 10px; background-color: var(--translucent); } +.section-title-details[open] svg { + transform: rotate(180deg); + animation: var(--fade-out) +} -.section-title-menu { +/* SECTION DETAILS CLOSED */ +.section-title-details:not([open]) svg { + transform: initial; + animation: var(--fade-in); +} + +.section-title-summary { display: flex; justify-content: space-between; } -.section-title-menu svg { - align-self: center; - fill: var(--white); -} - .section-form { - display: flex; - flex-direction: column; padding: var(--unit-size); } -.section-form-legend { - padding: unset; - margin-bottom: var(--unit-size); -} - -.section-form-label { - display: block; - - font-family: var(--display-font); - font-size: var(--small-size); - font-weight: 700; - line-height: 1.00; - letter-spacing: -0.20px; - word-spacing: 1.00px; - text-transform: none; - - margin-bottom: 2px; -} - -.section-form-label + input { - width: 100%; -} - .help-text { font-style: italic; font-size: var(--small-size); @@ -348,13 +360,15 @@ } /* BUTTONS AND INPUT SHENANIGANS */ -button, -input:not([type=radio]):not([type=checkbox]):not([type=text]):not([type=password]):not([type=email]) { +button { font-size: var(--small-size) !important; + font-family: var(--display-font) !important; + font-weight: bold !important; background-image: linear-gradient(180deg, var(--bg2), transparent) !important; color: var(--white) !important; border: solid 2px var(--bg2) !important; + border-radius: var(--unit-size); } textarea, @@ -362,13 +376,12 @@ input[type=text], input[type=password], input[type=email] { font-size: inherit !important; - display: inline-block; + display: block; position: relative; color: var(--white); - border-radius: var(--unit-size); - padding: var(--unit-size); - box-sizing: border-box; + padding: 5px 10px 5px 10px; border: 2px solid var(--bg2); + border-radius: var(--unit-size); background-color: var(--translucent); } @@ -422,15 +435,6 @@ input:focus { 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), @@ -440,16 +444,22 @@ select:is(:disabled, :disabled:active) > button { /* file selector */ input[type=file] { + font-family: var(--main-font) !important; + font-weight: normal !important; background: linear-gradient(180deg, var(--bg2), transparent) !important; + border: 2px solid var(--bg2); + border-radius: var(--unit-size); } input[type=file]:focus, input[type=file]:hover { - background: linear-gradient(180deg, var(--bg2), var(--bg3) 200%) !important; + border: solid 2px var(--bg3) !important; } /* button part of file selector */ ::file-selector-button { + font-family: var(--display-font) !important; + font-weight: bold !important; color: var(--white) !important; } @@ -468,13 +478,18 @@ input[type=file]:hover { margin-top: 3rem; /* should occupy the entire vertical real estate */ - height: 100%; + height: calc(100% - 3rem); padding: var(--unit-size); } +.panel label { + font-family: var(--display-font); + font-weight: bold; +} @media (min-width: 1200px) { - .panel label { + #panel-left-icon, + #panel-right-icon { display: none; } @@ -486,7 +501,7 @@ input[type=file]:hover { a[id|="anchor"]:target + * { animation-name: highlight; animation-duration: 500ms; - animation-timing-function: ease; + animation-timing-function: ease-in-out; } } @@ -520,31 +535,6 @@ input[type=file]:hover { } } -/* ANIMATIONS */ -@keyframes fadeIn { - 0% { - opacity: 0; - transform: translateY(-10px); - } - - 100% { - opacity: unset; - transform: none; - } -} - -@keyframes fadeOut { - 100% { - opacity: 0; - transform: translateY(-10px); - } - - 0% { - opacity: unset; - transform: none; - } -} - .accessibility-menu { position: absolute; left: -1000px; @@ -578,24 +568,50 @@ input[type=file]:hover { overflow: hidden; } +/* ANIMATIONS */ +@keyframes fadeIn { + 0% { + opacity: 0; + transform: translateY(-10px); + } + + 100% { + opacity: unset; + transform: none; + } +} + +@keyframes fadeOut { + 100% { + opacity: 0; + transform: translateY(-10px); + } + + 0% { + opacity: unset; + transform: none; + } +} + @keyframes highlight { 0% { - border-radius: var(--unit-size); box-shadow: initial; + border-radius: var(--unit-size); } + 50% { border-radius: var(--unit-size); + box-shadow: inset 0 0 10px var(--white), - inset 10px 0 20px var(--bg3), - inset -10px 0 20px var(--bg2), - inset 10px 0 20px var(--bg3), - inset -10px 0 20px var(--bg2), + inset 10px 0 10px var(--bg3), + inset -10px 0 10px var(--bg2), 0 0 10px var(--white), -10px 0 10px var(--bg3), 10px 0 10px var(--bg2); } + 100% { - border-radius: var(--unit-size); box-shadow: initial; + border-radius: var(--unit-size); } } \ No newline at end of file diff --git a/public/assets/css/left/left.css b/public/assets/css/left/left.css index 6bbcc64648..961626780a 100644 --- a/public/assets/css/left/left.css +++ b/public/assets/css/left/left.css @@ -14,9 +14,6 @@ #panel-left-icon { cursor: pointer !important; border: 2px solid transparent; - - height: 100%; - width: auto; } .panel-left nav { @@ -38,6 +35,10 @@ box-sizing: border-box; } +.profile ~ * { + padding: var(--unit-size); +} + #user { align-content: center; } @@ -63,9 +64,7 @@ .timeline-nav h1 { display: flex; } -.timeline-nav h1 { - padding-left: var(--unit-size); -} + .timeline-nav hr { flex: 1; background: linear-gradient(90deg, var(--bg3), transparent); @@ -87,5 +86,6 @@ } .footer { + margin-top: auto; font-size: var(--small-size); } diff --git a/public/assets/css/reset.css b/public/assets/css/reset.css index b70698e13b..a44602b9b6 100644 --- a/public/assets/css/reset.css +++ b/public/assets/css/reset.css @@ -46,10 +46,6 @@ address { border: 0; } -form { - all: unset; -} - /* details element arrow */ details > summary { list-style: none; @@ -147,52 +143,6 @@ li { padding: 0; } -a { - text-decoration: none; - color: var(--white); - border-radius: 4px; - - padding-left: var(--unit-size); - padding-right: var(--unit-size); - margin-bottom: 1px; - outline: 0; -} - -a:visited { - color: var(--white); - padding-left: var(--unit-size); - padding-right: var(--unit-size); - outline: 0; - margin: 0; -} - -a:focus, -a:hover { - background: var(--white); - color: var(--bg1) !important; - transition: var(--cubic-transition); -} - -figcaption a:link { - font-size: var(--small-size); - color: var(--white); -} - -summary:hover > svg, -summary:focus > svg { - border-radius: 4px; - background-color: var(--white); - fill: var(--bg1); - transition: var(--cubic-transition); -} - -hr { - all: unset; - display: block; - height: 2px; - background: var(--translucent); -} - /* BUTTONS AND FILEPICKER */ button { cursor: pointer !important; @@ -207,11 +157,10 @@ input { button, input { all: unset; - font-size: var(--medium-size); - border-radius: var(--unit-size); - padding: 6px 12px; + padding: 5px 10px; } +/*noinspection CssInvalidPseudoSelector*/ *|*::-moz-button-content { all: unset; } @@ -232,7 +181,7 @@ input[type=radio] { width: 1em; height: 1em; border-radius: 50%; - margin: 3px 3px 0px 5px; + margin: 3px 3px 0 5px; } /* file selector */ @@ -242,9 +191,6 @@ input[type=file] { display: block !important; width: 100%; - font-family: var(--main-font); - font-size: var(--medium-size); - border-radius: var(--unit-size); } @@ -255,7 +201,6 @@ input + label { /* button part of file selector */ ::file-selector-button { - font-family: var(--display-font); cursor: pointer; background-color: unset; diff --git a/public/assets/css/right/right.css b/public/assets/css/right/right.css index 72179eeb34..2d8d0ef056 100644 --- a/public/assets/css/right/right.css +++ b/public/assets/css/right/right.css @@ -14,7 +14,4 @@ #panel-right-icon { cursor: pointer !important; border: 2px solid transparent; - - height: 100%; - width: auto; } \ No newline at end of file diff --git a/public/assets/css/settings/settings.css b/public/assets/css/settings/settings.css index 93439e0989..ef0cd635f2 100644 --- a/public/assets/css/settings/settings.css +++ b/public/assets/css/settings/settings.css @@ -125,9 +125,6 @@ animation: var(--fade-out) } -.section-title-settings[open] .set-nav li:first-of-type { -} - .section-title-settings[open] .set-nav li:last-of-type { margin-bottom: 0; } diff --git a/public/assets/icons/arrow-down.svg.twig b/public/assets/icons/arrow-down.svg.twig index edb5d58162..45708f4469 100644 --- a/public/assets/icons/arrow-down.svg.twig +++ b/public/assets/icons/arrow-down.svg.twig @@ -1,7 +1,7 @@ - arrow-down + Activate to view more. \ No newline at end of file diff --git a/templates/base.html.twig b/templates/base.html.twig index 18a5c24ba6..778fe848d6 100644 --- a/templates/base.html.twig +++ b/templates/base.html.twig @@ -11,10 +11,12 @@ {% block stylesheets %} + + - + {% for stylesheet in show_stylesheets() %} {% endfor %} @@ -33,10 +35,12 @@