Restyle homepage

app/Http/Controllers/HomeController.php

@@ -17,6 +17,7 @@
 use Coyote\Services\Microblogs\Builder;
 use Coyote\Services\Parser\Extensions\Emoji;
 use Coyote\Services\Session\Renderer;
+use Coyote\User;
 use Illuminate\Contracts\Cache;
 use Illuminate\View\View;
 use Neon\Domain;
@@ -59,6 +60,8 @@ public function index(): View
             ),
 
             'globalViewers' => $this->globalViewers(),
+            'members'       => $this->members(),
+            'lookAndFeel'   => 'lookAndFeelModern',
         ])
             ->with('settings', $this->getSettings());
     }
@@ -97,4 +100,17 @@ private function flags(): array
             ->get();
         return FlagResource::collection($resourceFlags)->toArray($this->request);
     }
+
+    private function members(): array
+    {
+        /** @var Renderer $renderer */
+        $renderer = app(Renderer::class);
+
+        $viewers = $renderer->sessionViewers('/');
+        return [
+            'usersTotal'   => User::query()->count(),
+            'usersOnline'  => \count($viewers->users),
+            'guestsOnline' => $viewers->guestsCount,
+        ];
+    }
 }

app/Services/Session/Members.php

@@ -0,0 +1,7 @@
+<?php
+namespace Coyote\Services\Session;
+
+class Members
+{
+
+}

app/Services/Session/Renderer.php

@@ -1,7 +1,7 @@
 <?php
 namespace Coyote\Services\Session;
 
-use Coyote\Domain\Online\SessionRepository;
+use Coyote\Domain\Online\FakeSessionRepository;
 use Coyote\Domain\Online\Viewers;
 use Coyote\Domain\Online\ViewersStore;
 use Coyote\Domain\Spacer;
@@ -13,9 +13,9 @@ class Renderer
     private Spacer $spacer;
 
     public function __construct(
-        private SessionRepository $session,
-        private ViewersStore      $store,
-        private Request           $request,
+        private FakeSessionRepository $session,
+        private ViewersStore          $store,
+        private Request               $request,
     )
     {
         $this->spacer = new Spacer(8);
@@ -41,7 +41,7 @@ public function render(string $requestUri, bool $local, bool $iconVisible = true
         ]);
     }
 
-    private function sessionViewers(string $requestUri): Viewers
+    public function sessionViewers(string $requestUri): Viewers
     {
         $sessions = $this->session->sessionsIn($requestUri);
         if ($this->isUserLogged()) {

resources/feature/theme/theme.scss

@@ -21,3 +21,36 @@
     }
   }
 }
+
+@mixin theme {
+  /**
+   * The dark() and light() mixins increase selector specificity.
+   * In some cases, it's necessary to apply a common style to both
+   * themes, overriding a previously defined style. 
+   * Thus, we need to artificially elevate the specificity 
+   * of the style, without actually changing any style.
+   */
+  html.theme-light &,
+  html.theme-dark &,
+  {
+    @content;
+  }
+}
+
+@mixin color-theme($light, $dark) {
+  @include light {
+    color: $light;
+  }
+  @include dark {
+    color: $dark;
+  }
+}
+
+@mixin background-theme($light, $dark) {
+  @include light {
+    background: $light;
+  }
+  @include dark {
+    background: $dark;
+  }
+}

resources/js/components/microblog/comment.vue

@@ -28,26 +28,25 @@
             </a>
           </li>
           <li class="list-inline-item">
-            <a
+            <span
               @click="checkAuth(vote, comment)"
               @mouseenter.once="loadVoters(comment)"
               :aria-label="commentVoters"
               :class="{'vote-active': comment.is_voted}"
-              href="javascript:"
               data-balloon-pos="up"
               data-balloon-break>
               {{ commentLabel }}
-            </a>
+            </span>
           </li>
           <li class="list-inline-item">
-            <a @click="checkAuth(reply)" href="javascript:">
+            <span @click="checkAuth(reply)">
               Odpowiedz
-            </a>
+            </span>
           </li>
           <li v-if="isAuthorized" class="list-inline-item">
-            <a href="javascript:" :data-metadata="comment.metadata" :data-url="comment.url">
+            <span :data-metadata="comment.metadata" :data-url="comment.url">
               Zgłoś
-            </a>
+            </span>
           </li>
         </ul>
 

resources/sass/core.scss

@@ -47,7 +47,6 @@
 @import "core/dark_flash";
 @import "core/dark_footer";
 @import "core/dark_header";
-@import "core/dark_homepage";
 @import "core/dark_input";
 @import "core/dark_job";
 @import "core/dark_job_offers";
@@ -63,7 +62,8 @@
 @import "core/dark_wiki";
 
 @import "components/tags";
-@import "components/forum/post"; // it needs to be here because post's placeholder use styles in this specific file
+@import "components/forum/post";
+// it needs to be here because post's placeholder use styles in this specific file
 
 @import "pages/auth";
 @import "pages/errors";
@@ -79,6 +79,20 @@
 @import "pages/user";
 @import "pages/wiki";
 
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.user-avatar-border {
+  padding: 2px;
+  border-radius: 6px;
+  @include background-theme(white, #181a1b);
+
+  .user-avatar {
+    border-radius: 4px;
+  }
+}
+
 @import "../feature/stickyAside/sticky-aside";
 @import "../feature/viewersOnline/viewers-online";
 @import "../js/components/defaultAvatar";
@@ -87,7 +101,7 @@
 
 #cache-break {
   opacity: 0.01; // increment this value to break cache
-  
+
   /**
    * Webpack [contenthash] take into account contents of .css/.scss files,
    * but PurgeCss removes unused css elements. When editing .twig file,

resources/sass/core/_dark_topic.scss

@@ -17,9 +17,8 @@ body.theme-dark {
   header {
     nav.navbar {
       border-bottom-color: #2f2f2f;
-      border-bottom-width: 2px;
 
-      .nav-search {
+      .nav-search { // TODO remove this after new homepage
         .search-bar {
           background-color: #2a2a2a;
 

resources/sass/core/_navs.scss

@@ -24,16 +24,6 @@
   }
 }
 
-.nav-pills {
-  .nav-link {
-    &.nav-link-style-only {
-      // Style an element to look like a nav link, 
-      // without any functionality of nav link.
-      cursor: default;
-    }
-  }
-}
-
 .nav-tabs {
   .nav-link.active {
     border-top: 2px solid $alt-link-hover-color;
@@ -46,14 +36,18 @@
   .nav-link {
     cursor: pointer;
     color: #777777;
-  }
 
-  .nav-link.active {
-    color: black;
+    &.active {
+      color: black;
 
-    &, &:hover, &:focus, &:active {
-      border-bottom: 2px solid $alt-link-hover-color;
-      margin-bottom: -1px;
+      &,
+      &:hover,
+      &:focus,
+      &:active,
+      {
+        border-bottom: 2px solid $alt-link-hover-color;
+        margin-bottom: -2px;
+      }
     }
   }
 }

resources/sass/icons/_icons.scss

@@ -90,6 +90,12 @@ $icon-admin-table-sort: $fa-var-sort;
 $icon-admin-table-sort-asc: $fa-var-sort-down;
 $icon-admin-table-sort-desc: $fa-var-sort-up;
 
+@mixin icon {
+  i.fa-fw {
+    @content;
+  }
+}
+
 .fa-square-question:before {
   content: "\f2fd";
 }

resources/sass/layout/_footer.scss

@@ -114,7 +114,7 @@ footer {
     }
   }
 
-  #scroll-to-top {
+  .scroll-top {
     @include floater;
     box-sizing: content-box;
     font-size: 16px;