[Favourite][TWIG][CSS] Favourite shows alt-text and properly sets colours. Titles translated on the right panel.

plugins/Favourite/Favourite.php

@@ -58,17 +58,24 @@ class Favourite extends Plugin
         }
 
         // if note is favourited, "is_set" is 1
-        $opts   = ['note_id' => $note->getId(), 'gsactor_id' => $user->getId()];
+        $opts     = ['note_id' => $note->getId(), 'gsactor_id' => $user->getId()];
-        $is_set = DB::find('favourite', $opts) != null;
+        $is_set   = DB::find('favourite', $opts) != null;
-        $form   = Form::create([
+        $form_fav = Form::create([
-            ['is_set',    HiddenType::class, ['data' => $is_set ? '1' : '0']],
+            ['submit_fav', SubmitType::class,
+                [
+                    'label' => ' ',
+                    'attr'  => [
+                        'class' => $is_set ? 'favourite-button-on' : 'favourite-button-off',
+                    ],
+                ],
+            ],
             ['note_id',   HiddenType::class, ['data' => $note->getId()]],
-            ["favourite-{$note->getId()}", SubmitType::class, ['label' => ' ', 'attr' => ['class' => $is_set ? 'favourite-button-on' : 'favourite-button-off']]],
+            ["favourite-{$note->getId()}",   HiddenType::class, ['data' => $is_set ? '1' : '0']],
         ]);
 
         // Form handler
         $ret = self::noteActionHandle(
-         $request, $form, $note, "favourite-{$note->getId()}",          /**
+         $request, $form_fav, $note, "favourite-{$note->getId()}",          /**
          * Called from form handler
          *
          * @param $note Note to be favourited
@@ -77,11 +84,11 @@ class Favourite extends Plugin
          * @throws RedirectException Always thrown in order to prevent accidental form re-submit from browser
          */ function ($note, $data) use ($opts, $request) {
              $fave = DB::find('favourite', $opts);
-             if ($data['is_set'] === '0' && $fave === null) {
+             if ($data["favourite-{$note->getId()}"] === '0' && $fave === null) {
                  DB::persist(Entity\Favourite::create($opts));
                  DB::flush();
              } else {
-                 if ($data['is_set'] === '1' && $fave !== null) {
+                 if ($data["favourite-{$note->getId()}"] === '1' && $fave !== null) {
                      DB::remove($fave);
                      DB::flush();
                  }
@@ -97,7 +104,7 @@ class Favourite extends Plugin
             return $ret;
         }
 
-        $actions[] = $form->createView();
+        $actions[] = $form_fav->createView();
         return Event::next;
     }
 

public/assets/css/base.css

@@ -195,27 +195,18 @@
     display: block;
 }
 
-.favourite-button-off {
+.favourite-button-container button {
-    all: unset;
-
-    cursor: pointer !important;
-    border: none !important;
     width: 1em !important;
     height: 1em !important;
-    background-size: cover !important;
+    border: unset !important;
-    background-image: url(../icons/heart.svg) !important;
+    padding: unset !important;
-    filter: invert(26%) sepia(21%) saturate(580%) hue-rotate(201deg) brightness(96%) contrast(93%);
+    mask-image: url("../icons/heart.svg") !important;
+}
+.favourite-button-off {
+    background: var(--bg2) !important;
 }
 .favourite-button-on {
-    all: unset;
+    background: var(--white) !important;
-
-    cursor: pointer !important;
-    border: none !important;
-    width: 1em !important;
-    height: 1em !important;
-    background-size: cover !important;
-    background-image: url(../icons/heart.svg) !important;
-    filter: invert(100%);
 }
 
 .note-content {

public/assets/css/right/right.css

@@ -26,11 +26,11 @@
 
     background-color: var(--translucent);
 }
-.section-title-hamburger {
+.section-title-menu {
     display: flex;
     justify-content: space-between;
 }
-.section-title-hamburger svg {
+.section-title-menu svg {
     align-self: center;
     fill: var(--white);
 }

public/assets/css/security/security.css

@@ -1,56 +0,0 @@
-form {
-    width: 50%;
-    margin-left: auto;
-    margin-right: auto;
-
-    padding: var(--main-size);
-    border-radius: var(--unit-size);
-}
-
-fieldset {
-    display: flex;
-    flex-direction: column;
-
-    font-family: var(--display-font);
-    font-size: var(--main-size);
-}
-
-fieldset legend {
-    margin-bottom: var(--main-size);
-}
-
-br {
-    margin-bottom: var(--unit-size);
-}
-
-label {
-    font-family: var(--display-font);
-    font-size: var(--medium-size);
-}
-
-input[type="text"]:hover,
-input[type="password"]:hover,
-input[type="email"]:hover,
-input[type="text"]:focus,
-input[type="password"]:focus,
-input[type="email"]:focus {
-    background: var(--white) !important;
-    color: var(--bg1) !important;
-    transition: all 0.4s ease;
-}
-
-input[type="text"],
-input[type="password"],
-input[type="email"] {
-    all: unset;
-    background: var(--translucent);
-    padding: var(--unit-size) var(--small-size);
-    box-sizing: border-box;
-    border-radius: var(--unit-size);
-    font-size: var(--medium-size);
-    width: 100%;
-}
-
-fieldset div:last-child {
-    text-align: end;
-}

templates/base.html.twig

@@ -29,7 +29,7 @@
 </head>
 
 <body class="bg">
-{% block header %}
+    {% block header %}
         <div id='header'>
             <details class="panel" id="left-container">
                 <summary tabindex="1">

templates/note/view.html.twig

@@ -14,10 +14,15 @@
         {% endif %}
 
         <div class="note-actions">
-
             {% if have_user %}
-                {% for act in get_note_actions(note) %}
+                {% for current_action in get_note_actions(note) %}
-                    {{ form(act) }}
+                    {{ form_start(current_action) }}
+                        {% if current_action.submit_fav is defined %}
+                            <span title="Favourite this note." class="favourite-button-container">
+                                {{ form_widget(current_action.submit_fav) }}
+                            </span>
+                        {% endif %}
+                    {{ form_end(current_action) }}
                 {% endfor %}
             {% endif %}
         </div>

templates/security/login.html.twig

@@ -5,7 +5,7 @@
     <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/security/security.css') }}">
 {% endblock %}
 
-{% block title %}Log in!{% endblock %}
+{% block title %}{{ "Log in!" | trans }}{% endblock %}
 
 {% block body %}
     <div class='content'>
@@ -17,34 +17,26 @@
                     <div class="alert alert-danger">{{ error.messageKey | trans(error.messageData, 'security') }}</div>
                 {% endif %}
 
-                <p>
+                {% if app.user %}
-                    {% if app.user %}
+                    <h1 class="mb-3">
-                <h1 class="mb-3">
+                        {{ "You are logged in as" | trans }} {{ app.user.username }}.
-                    You are logged in as {{ app.user.username }}.
+                        <button class="btn btn-lg btn-primary">
-                    <br>
+                            <a href="{{ path('app_logout') }}">{{ "Logout" | trans }}</a>
-                    <button class="btn btn-lg btn-primary">
+                        </button>
-                        <a href="{{ path('app_logout') }}">{{ "Logout" | trans }}</a>
+                    </h1>
-                    </button>
+                {% else %}
-                </h1>
+                    {# TODO: Login can be done with email, so the id's and stuff should reflect that, along with using the translation facilities #}
-              {% else %}
+                    <label for="inputNickname">{{ "Nickname or Email" | trans }}</label>
-                {# TODO: Login can be done with email, so the id's and stuff should reflect that, along with using the translation facilities #}
+                    <input type="text" value="{{ last_login_id }}" name="nickname" id="inputNickname" class="form-control" required autofocus>
-                <label for="inputNickname">{{ "Nickname or Email" | trans }}</label>
-                <br>
-                <input type="text" value="{{ last_login_id }}" name="nickname" id="inputNickname"
-                       class="form-control" required autofocus>
                 {% endif %}
-                </p>
 
-                <p>
+                <label for="inputPassword">{{ "Password" | trans }}</label>
-                    <label for="inputPassword">{{ "Password" | trans }}</label>
+                <input type="password" name="password" id="inputPassword" class="form-control" required>
-                    <br>
-                    <input type="password" name="password" id="inputPassword" class="form-control" required>
-                </p>
 
                 <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
 
                 <p class="checkbox mb-3">
-                    <label>{{ "Remember me" | trans}}</label>
+                    <label>{{ "Remember me" | trans }}</label>
                     <input type="checkbox" name="_remember_me">
                 </p>
 

templates/sidepanel/right/right.html.twig

@@ -1,17 +1,16 @@
 <aside id='right-panel'>
     {% if post_form is defined %}
         <section class="section-widget">
-            <legend class="section-title">
+            <details class="section-title">
-                <details>
+                <summary class="section-title-menu">
-                    <summary class="section-title-hamburger">
+                    {{ "Create a note" | trans }}
-                        Create a note {{ icon('plus-circle', 'icon icon-plus') | raw }}
+                    {{ icon('plus-circle', 'icon icon-plus') | raw }}
-                    </summary>
+                </summary>
 
-                    {% for tab in tabs %}
+                {% for tab in tabs %}
-                        <a class="section-title-hamburger-element" href={{ path(tab['href']) }}>{{ tab['title'] }}</a>
+                    <a class="section-title-menu-element" href={{ path(tab['href']) }}>{{ tab['title'] }}</a>
-                    {% endfor %}
+                {% endfor %}
-                </details>
+            </details>
-            </legend>
 
             <div class="section-form">
                 {{ form_start(post_form) }}