[UI] Fix left panel new dynamic components view

public/assets/css/left/left.css

@@ -6,13 +6,33 @@
       position: fixed;
       background-color: var(--bg1);
       margin-top: calc(3 * var(--main-size));
+      left: 0;
+      top: 0;
+      transition: 0.3s ease;
 }
+/* left navigation */
 .navbar .left-nav {
       flex: 1;
 }
-.navbar .left-nav a {
+.navbar .left-nav > a {
+      display: block;
+      color: var(--accent);
+      font-size: var(--medium-size);
+      margin-bottom: var(--unit-size);
       margin-left: var(--unit-size);
 }
+.navbar .left-nav > a:nth-child(1) {
+      margin-top: var(--unit-size);
+}
+.navbar .left-nav > a:last-child {
+      margin-bottom: 0;
+}
+.navbar .left-nav > a:hover,
+.navbar .left-nav > a:focus {
+      color: var(--fg);
+      transition: all 0.8s ease;
+}
+/* footer static pages links */
 .navbar .footer {
       display: flex;
       flex-wrap: wrap;
@@ -24,44 +44,18 @@
 }
 .navbar .footer a {
       margin-right: var(--unit-size);
-}
-.navbar {
-      left: 0;
-      top: 0;
-      transition: 0.3s ease;
-}
-.navbar a {
-      display: block;
       color: var(--accent);
       font-size: var(--medium-size);
 }
-.navbar .left-nav a {
-      margin-bottom: var(--unit-size);
-}
-.navbar .left-nav a:last-child {
-      margin-bottom: 0;
-}
-.navbar .left-nav a:nth-child(1) {
-      margin-top: var(--unit-size);
-}
-.navbar a:hover {
-      color: var(--fg);
-      transition: all 0.8s ease;
-}
-.navbar a:focus {
-      color: var(--fg);
-      transition: all 0.8s ease;
-}
 
+/* checkbox trick remnants */
 .icon-menu label {
       display: none;
       cursor: pointer
 }
-
 #toggle {
       display: none;
 }
-
 #toggle:checked+.navbar {
       display: block;
       left: 0;
@@ -69,6 +63,7 @@
       transition: 0.3s ease;
 }
 
+/* profile stats */
 .profile {
       display: flex;
       flex-wrap: wrap;
@@ -89,29 +84,26 @@
 .info {
       order: 2;
 }
-
 .info #nick {
       order: 1;
       margin-bottom: var(--small-size);
 }
-
 .info .tags {
       order: 2;
       margin-bottom: var(--small-size);
 }
-
 .info .stats {
       order: 3;
 }
-
+.info .stats span:last-child {
+      margin-left: var(--small-size);
+}
 .info .tags i {
       color: var(--accent);
 }
-
+.info .tags i:first-child {
+      margin-left: 0 !important;
+}
 .info .tags i:last-child {
       margin-left: var(--small-size);
 }
-
-.stats span:last-child {
-      margin-left: var(--small-size);
-}

public/assets/css/left/left_mid.css

@@ -4,79 +4,75 @@
       width: var(--nav-size);
       height: calc(100vh - (3 * var(--unit-size)));
       position: fixed;
-      background: var(--bg1);
+      background-color: var(--bg1);
       margin-top: calc(3 * var(--main-size));
 }
-.navbar .left-nav {
-      flex: 1;
-}
-.navbar .left-nav a {
-      margin-left: var(--unit-size);
-}
-.navbar .footer {
-      display: flex;
-      flex-wrap: wrap;
-      flex-direction: row;
-      font-size: var(--medium-size);
-      padding: var(--unit-size);
-      margin-bottom: var(--unit-size);
-}
-.navbar .footer a {
-      margin-right: var(--unit-size);
-}
 .navbar {
       left: -100%;
       top: 0;
       transition: 0.3s ease;
 }
-.navbar a {
+/* left navigation */
+.navbar .left-nav {
+      flex: 1;
+}
+.navbar .left-nav > a {
       display: block;
       color: var(--accent);
       font-size: var(--medium-size);
-}
-.navbar .left-nav a {
       margin-bottom: var(--unit-size);
+      margin-left: var(--unit-size);
 }
-.navbar .left-nav a:last-child {
+.navbar .left-nav > a:nth-child(1) {
-      margin-bottom: 0;
-}
-.navbar .left-nav a:nth-child(1) {
       margin-top: var(--unit-size);
 }
-.navbar a:hover {
+.navbar .left-nav > a:last-child {
+      margin-bottom: 0;
+}
+.navbar .left-nav > a:hover,
+.navbar .left-nav > a:focus {
       color: var(--fg);
       transition: all 0.8s ease;
 }
-.navbar a:focus {
+/* footer static pages links */
-      color: var(--fg);
+.navbar .footer {
-      transition: all 0.8s ease;
+      display: flex;
+      flex-wrap: wrap;
+      flex-direction: row;
+      justify-content: space-evenly;
+      font-size: var(--medium-size);
+      padding: var(--unit-size);
+      margin-bottom: var(--unit-size);
+}
+.navbar .footer a {
+      margin-right: var(--unit-size);
+      color: var(--accent);
+      font-size: var(--medium-size);
 }
 
+/* checkbox trick */
 .icon-menu label {
       display: block;
-      cursor: pointer;
+      cursor: pointer
 }
-
 #toggle {
       position: absolute;
       z-index: 2;
       cursor: pointer;
       opacity: 0;
 }
-.left-panel input[type=checkbox] {
-    transform: scale(3);
-    -ms-transform: scale(3);
-    -webkit-transform: scale(3);
-    padding: 10px;
-}
-
 #toggle:checked~.navbar {
       display: flex;
       left: 0;
       top: 0;
       transition: 0.3s ease;
 }
+input.larger {
+      width: calc(1.5 * var(--main-size));
+      height: calc(1.5 * var(--main-size));
+}
 
+/* profile stats */
 .profile {
       display: flex;
       flex-wrap: wrap;
@@ -90,36 +86,33 @@
 .icon-avatar {
       order: 1;
       height: calc(5 * var(--unit-size));
-      width: calc(5 * var(--unit-size));
+calc(5 * var(--unit-size));
       margin-right: var(--small-size);
 }
 
 .info {
       order: 2;
 }
-
 .info #nick {
       order: 1;
       margin-bottom: var(--small-size);
 }
-
 .info .tags {
       order: 2;
       margin-bottom: var(--small-size);
 }
-
 .info .stats {
       order: 3;
 }
-
+.info .stats span:last-child {
+      margin-left: var(--small-size);
+}
 .info .tags i {
       color: var(--accent);
 }
-
+.info .tags i:first-child {
+      margin-left: 0 !important;
+}
 .info .tags i:last-child {
       margin-left: var(--small-size);
 }
-
-.stats span:last-child {
-      margin-left: var(--small-size);
-}

public/assets/css/left/left_small.css

@@ -4,79 +4,75 @@
       width: var(--nav-size);
       height: calc(100vh - (3 * var(--unit-size)));
       position: fixed;
-      background: var(--bg1);
+      background-color: var(--bg1);
       margin-top: calc(3 * var(--main-size));
 }
+.navbar {
+      left: -100%;
+      top: 0;
+      transition: 0.3s ease;
+}
+/* left navigation */
 .navbar .left-nav {
       flex: 1;
 }
-.navbar .left-nav a {
+.navbar .left-nav > a {
+      display: block;
+      color: var(--accent);
+      font-size: var(--medium-size);
+      margin-bottom: var(--unit-size);
       margin-left: var(--unit-size);
 }
+.navbar .left-nav > a:nth-child(1) {
+      margin-top: var(--unit-size);
+}
+.navbar .left-nav > a:last-child {
+      margin-bottom: 0;
+}
+.navbar .left-nav > a:hover,
+.navbar .left-nav > a:focus {
+      color: var(--fg);
+      transition: all 0.8s ease;
+}
+/* footer static pages links */
 .navbar .footer {
       display: flex;
       flex-wrap: wrap;
       flex-direction: row;
+      justify-content: space-evenly;
       font-size: var(--medium-size);
       padding: var(--unit-size);
       margin-bottom: var(--unit-size);
 }
 .navbar .footer a {
       margin-right: var(--unit-size);
-}
-.navbar {
-      left: -100%;
-      top:0;
-      transition: 0.3s ease;
-}
-.navbar a {
-      display: block;
       color: var(--accent);
       font-size: var(--medium-size);
 }
-.navbar .left-nav a {
-      margin-bottom: var(--unit-size);
-}
-.navbar .left-nav a:last-child {
-      margin-bottom: 0;
-}
-.navbar .left-nav a:nth-child(1) {
-      margin-top: var(--unit-size);
-}
-.navbar a:hover {
-      color: var(--fg);
-      transition: all 0.8s ease;
-}
-.navbar a:focus {
-      color: var(--fg);
-      transition: all 0.8s ease;
-}
 
+/* checkbox trick */
 .icon-menu label {
       display: block;
-      cursor: pointer;
+      cursor: pointer
 }
-
 #toggle {
       position: absolute;
       z-index: 2;
       cursor: pointer;
       opacity: 0;
 }
-.left-panel input[type=checkbox] {
-    transform: scale(2);
-    -ms-transform: scale(2);
-    -webkit-transform: scale(2);
-    padding: 10px;
-}
-
 #toggle:checked~.navbar {
       display: flex;
       left: 0;
       top: 0;
       transition: 0.3s ease;
 }
+input.larger {
+      width: calc(1.5 * var(--main-size));
+      height: calc(1.5 * var(--main-size));
+}
 
+/* profile stats */
 .profile {
       display: flex;
       flex-wrap: wrap;
@@ -90,40 +86,33 @@
 .icon-avatar {
       order: 1;
       height: calc(5 * var(--unit-size));
-      width: calc(5 * var(--unit-size));
+calc(5 * var(--unit-size));
       margin-right: var(--small-size);
 }
 
 .info {
       order: 2;
 }
-
 .info #nick {
       order: 1;
       margin-bottom: var(--small-size);
 }
-
 .info .tags {
       order: 2;
       margin-bottom: var(--small-size);
 }
-
 .info .stats {
       order: 3;
 }
-
+.info .stats span:last-child {
+      margin-left: var(--small-size);
+}
 .info .tags i {
       color: var(--accent);
 }
-
+.info .tags i:first-child {
+      margin-left: 0 !important;
+}
 .info .tags i:last-child {
       margin-left: var(--small-size);
 }
-
-.stats span:last-child {
-      margin-left: var(--small-size);
-}
-
-input {
-      filter: none;
-}

templates/left/left.html.twig

@@ -10,7 +10,7 @@
 {% block left %}
   {% if app.user %}
     <div id='left-panel'>
-      <input type="checkbox" id="toggle" autofocus>
+      <input type="checkbox" id="toggle" class="larger" autofocus>
         <div class="icon-menu">
           <label for="toggle" id='menu' tabindex="0"></label>
         </div>