[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.

This commit is contained in:
Eliseu Amaro 2021-08-31 18:33:58 +01:00 committed by Hugo Sales
parent 7dc390ca1c
commit 6ef07e04d1
Signed by: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
10 changed files with 166 additions and 191 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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>

Before

Width:  |  Height:  |  Size: 430 B

After

Width:  |  Height:  |  Size: 442 B

View File

@ -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>
<em>{{ 'Others - <Alt> + \"access key\"' | trans }}</em>
<br>
<p>
<em><b>Firefox based browser - </b> <kbd>Alt</kbd> + <kbd>Shift</kbd> + "access key"</em>
<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>

View File

@ -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>

View File

@ -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">
<summary class="section-title-menu">
{{ "Create a note" | trans }}
{{ icon('plus-circle', 'icon icon-plus') | raw }}
<details class="section-title-details">
<summary class="section-title-summary">
{{ "Create a note" | trans }} {{ icon('arrow-down', 'icon icon-details-open') | 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_widget(post_form.to) }}
{{ form_label(post_form.to) }}{{ form_widget(post_form.to) }}
</span>
{{ form_row(post_form.visibility, {'attr': {'class': 'section-form-scope'}}) }}