[Posting][CSS] Right panel form uses a select box instead of radio buttons. Hover and focus of <a> elements using just an underline. Note author and actions padding redone. File-picker font is now correct. Left panel hierarchy should now be more clear.

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']]],
+            ['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' => true, 'expanded' => true, 'choices' => $to_tags]],
+            ['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;

public/assets/css/base.css

@@ -10,8 +10,8 @@
      * small size     - used in common text, borders
      */
     --unit-size: 0.5rem;
-    --main-size: 1.4rem;
+    --main-size: 1.5rem;
-    --medium-size: 1.15rem;
+    --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;
+    align-self: center;
-    height: 1em;
 }
 
 /* CURRENT PAGE LINK */
 .active {
-    border-radius: 4px;
+    font-weight: bold;
-    background: var(--white);
-    color: var(--bg1) !important;
-    transition: var(--cubic-transition);
 }
 
 /* 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,
+button {
-input:not([type=radio]):not([type=checkbox]):not([type=text]):not([type=password]):not([type=email]) {
     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: 5px 10px 5px 10px;
-    padding: var(--unit-size);
-    box-sizing: border-box;
     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 10px var(--bg3),
-        inset -10px 0 20px var(--bg2),
+        inset -10px 0 10px var(--bg2),
-        inset 10px 0 20px var(--bg3),
-        inset -10px 0 20px 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);
     }
 }

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);
 }

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);
+    padding: 5px 10px;
-    border-radius: var(--unit-size);
-    padding: 6px 12px;
 }
 
+/*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;

public/assets/css/right/right.css

@@ -14,7 +14,4 @@
 #panel-right-icon {
     cursor: pointer !important;
     border: 2px solid transparent;
-
-    height: 100%;
-    width: auto;
 }

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;
 }

public/assets/icons/arrow-down.svg.twig

@@ -1,7 +1,7 @@
 <!-- https://github.com/primer/octicons -->
 <!-- MIT License -->
 <svg class="{{ iconClass|default('') }}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
-    <title>arrow-down</title>
+    <title>Activate to view more.</title>
     <path fill-rule="evenodd"
           d="M13.03 8.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.47 9.28a.75.75 0 011.06-1.06l2.97 2.97V3.75a.75.75 0 011.5 0v7.44l2.97-2.97a.75.75 0 011.06 0z"></path>
 </svg>

templates/base.html.twig

@@ -11,10 +11,12 @@
     </title>
 
     {% block stylesheets %}
+        <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/reset.css') }}">
+
         <link rel='stylesheet' type='text/css' href="{{ asset('assets/fonts/inter/inter.css') }}">
         <link rel='stylesheet' type='text/css' href="{{ asset('assets/fonts/manrope/manrope.css') }}">
         <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/base.css') }}">
-        <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/reset.css') }}">
+
         {% for stylesheet in show_stylesheets() %}
             <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/' ~ stylesheet) }}">
         {% endfor %}
@@ -33,10 +35,12 @@
 <aside class="accessibility-menu" accesskey="o" tabindex="0">
     <h2>{{ 'Select page section:' | trans }}</h2>
     <br>
-    <em>{{ 'Firefox based browser - <Alt> + <Shift> + \"access key\"' | trans }}</em>
+
-    <br>
+    <p>
-    <em>{{ 'Others - <Alt> + \"access key\"' | trans }}</em>
+        <em><b>Firefox based browser - </b> <kbd>Alt</kbd> + <kbd>Shift</kbd> + "access key"</em>
-    <br>
+        <br>
+        <em><b>Others - </b> <kbd>Alt</kbd> + "access key"</em>
+    </p>
 
     <ul>
         <li><a href="#anchor-menu" accesskey="m">{{ 'This menu (press \'m\' to access).' | trans }}</a></li>

templates/sidepanel/left/left.html.twig

@@ -41,7 +41,7 @@
                     {{ link | raw }}
                 {% endfor %}
                 <a href="{{ path('settings') }}"
-                   class='hover-effect {{ active('settings_') }}'>Settings</a>
+                   class='{{ active('settings') }}'>Settings</a>
                 <a href='{{ path('logout') }}'>Logout</a>
             </nav>
 

templates/sidepanel/right/right.html.twig

@@ -7,10 +7,9 @@
 
         {% if post_form is defined %}
             <section class="section-widget" role="complementary" aria-label={{ 'Create a new note.' | trans }}>
-                <details class="section-title">
+                <details class="section-title-details">
-                    <summary class="section-title-menu">
+                    <summary class="section-title-summary">
-                        {{ "Create a note" | trans }}
+                        {{ "Create a note" | trans }} {{ icon('arrow-down', 'icon icon-details-open') | raw }}
-                        {{ icon('plus-circle', 'icon icon-plus') | raw }}
                     </summary>
 
                     {% for tab in tabs %}
@@ -22,8 +21,7 @@
                     {{ form_start(post_form) }}
 
                     <span class="section-form-target">
-                    {{ form_label(post_form.to) }}
+                    {{ form_label(post_form.to) }}{{ form_widget(post_form.to) }}
-                        {{ form_widget(post_form.to) }}
                 </span>
 
                     {{ form_row(post_form.visibility, {'attr': {'class': 'section-form-scope'}}) }}