From 54a82c940927939578265d9db38abe8b4561d0c6 Mon Sep 17 00:00:00 2001 From: Daniel Wilkowski Date: Tue, 22 Oct 2024 11:55:16 +0200 Subject: [PATCH] Restyle homepage --- app/Http/Controllers/HomeController.php | 16 + app/Services/Session/Members.php | 7 + app/Services/Session/Renderer.php | 10 +- public/img/logo-dark.svg | 2 +- public/img/logo-light.svg | 2 +- resources/feature/theme/theme.scss | 33 + resources/js/components/microblog/comment.vue | 13 +- resources/sass/core.scss | 1 - resources/sass/core/_dark_homepage.scss | 104 --- resources/sass/core/_dark_topic.scss | 2 +- resources/sass/core/_navs.scss | 10 - resources/sass/icons/_icons.scss | 6 + resources/sass/layout/_footer.scss | 2 +- resources/sass/pages/_homepage.scss | 630 ++++++++++++++---- resources/views/home.twig | 114 ++-- resources/views/layout.twig | 5 +- 16 files changed, 641 insertions(+), 316 deletions(-) create mode 100644 app/Services/Session/Members.php delete mode 100644 resources/sass/core/_dark_homepage.scss diff --git a/app/Http/Controllers/HomeController.php b/app/Http/Controllers/HomeController.php index e94c55d084..6ae6bf774d 100644 --- a/app/Http/Controllers/HomeController.php +++ b/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, + ]; + } } diff --git a/app/Services/Session/Members.php b/app/Services/Session/Members.php new file mode 100644 index 0000000000..ce7257565c --- /dev/null +++ b/app/Services/Session/Members.php @@ -0,0 +1,7 @@ +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()) { diff --git a/public/img/logo-dark.svg b/public/img/logo-dark.svg index e500b44aa6..115df44e7d 100644 --- a/public/img/logo-dark.svg +++ b/public/img/logo-dark.svg @@ -1,3 +1,3 @@ - + diff --git a/public/img/logo-light.svg b/public/img/logo-light.svg index faef5d032c..c9b5c4225d 100644 --- a/public/img/logo-light.svg +++ b/public/img/logo-light.svg @@ -1,3 +1,3 @@ - + diff --git a/resources/feature/theme/theme.scss b/resources/feature/theme/theme.scss index 5fa39cdb4d..4b4f123852 100644 --- a/resources/feature/theme/theme.scss +++ b/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; + } +} diff --git a/resources/js/components/microblog/comment.vue b/resources/js/components/microblog/comment.vue index 9e0d651ca3..a3b44475ba 100644 --- a/resources/js/components/microblog/comment.vue +++ b/resources/js/components/microblog/comment.vue @@ -28,26 +28,25 @@
  • - {{ commentLabel }} - +
  • - + Odpowiedz - +
  • - + Zgłoś - +
    • diff --git a/resources/sass/core.scss b/resources/sass/core.scss index 2dbc15ead0..be32966cf3 100644 --- a/resources/sass/core.scss +++ b/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"; diff --git a/resources/sass/core/_dark_homepage.scss b/resources/sass/core/_dark_homepage.scss deleted file mode 100644 index 0acebeef76..0000000000 --- a/resources/sass/core/_dark_homepage.scss +++ /dev/null @@ -1,104 +0,0 @@ -body.theme-dark { - #box-forum { - .card.card-forum { - .nav.nav-forum { - border-bottom: 1px solid #2f2f2f; - - .nav-item .nav-link { - color: #acacac; - - &:hover { - border-color: #404040; - } - - &.active { - color: #dedede; - border-bottom: 2px solid #d7661c; - } - } - } - - #box-forum-headline { - .tab-content .tab-pane { - .row { - border-bottom: 1px solid #2f2f2f; - - &:nth-child(even) { - background-color: unset; - } - } - - a.title { - color: #acacac; - } - - small { - color: #7d7d7d; - } - } - } - - #stream-wrapper { - .media { - .media-object { - border: 1px solid #242a30; - background: #121212; - } - - .homepage-activity.post, - .homepage-activity.comment { - color: #acacac; - border-color: #2f2f2f; - background: #121212; - box-shadow: 0 1px 2px 0 #121212; - - &:after { - color: inherit; - } - } - } - - .recent-activity { - border-left-color: #242a30; - } - - small { - color: #7d7d7d; - } - - strong { - border-left-color: #2f2f2f; - } - } - } - } - - .card-reputation { - background-color: #1a1a1a; - - .media-body { - a.reputation-username { - color: #acacac; - } - } - - .media { - border-bottom-color: #2f2f2f; - - &:after { - color: #2f2f2f; - } - } - } - - h2.h4, - h4 { - color: #c8c8c8; - } - - .microblog-wrap { - &:after { - background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #1a1a1a 65%); - } - } -} diff --git a/resources/sass/core/_dark_topic.scss b/resources/sass/core/_dark_topic.scss index 7acb741db8..6a737103cd 100644 --- a/resources/sass/core/_dark_topic.scss +++ b/resources/sass/core/_dark_topic.scss @@ -19,7 +19,7 @@ body.theme-dark { border-bottom-color: #2f2f2f; border-bottom-width: 2px; - .nav-search { + .nav-search { // TODO remove this after new homepage .search-bar { background-color: #2a2a2a; diff --git a/resources/sass/core/_navs.scss b/resources/sass/core/_navs.scss index 2741fe224c..ca98c0a452 100644 --- a/resources/sass/core/_navs.scss +++ b/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; diff --git a/resources/sass/icons/_icons.scss b/resources/sass/icons/_icons.scss index 819e549048..390d6f2503 100644 --- a/resources/sass/icons/_icons.scss +++ b/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"; } diff --git a/resources/sass/layout/_footer.scss b/resources/sass/layout/_footer.scss index 573070ae73..8ec7acbc7a 100644 --- a/resources/sass/layout/_footer.scss +++ b/resources/sass/layout/_footer.scss @@ -114,7 +114,7 @@ footer { } } - #scroll-to-top { + .scroll-top { @include floater; box-sizing: content-box; font-size: 16px; diff --git a/resources/sass/pages/_homepage.scss b/resources/sass/pages/_homepage.scss index 5aad2e2993..9835795010 100644 --- a/resources/sass/pages/_homepage.scss +++ b/resources/sass/pages/_homepage.scss @@ -1,6 +1,9 @@ @charset "UTF-8"; +@import "../../feature/theme/theme"; +@import "../icons/icons"; @import "bootstrap/scss/mixins/breakpoints"; +@import "bootstrap/scss/mixins/text-truncate"; @mixin size($size) { @if ($size == 'intermediate') { @@ -17,201 +20,568 @@ } } -.card-reputation { - img, svg { - width: 40px; - height: 40px; +header nav.navbar { + .logo { + height: 30px; } +} - .progress { - width: 70%; +body.lookAndFeelModern { + $primary-color-light: #00a538; + $secondary-color-light: #005b12; + $card-background-dark: #181a1b; + $primary-background-light: #e7f7e6; + $opposite-color-light: #ffffff; + $border-color-light: #dddddd; + + $primary-color-dark: #00a538; + $secondary-color-dark: #bdd5c3; + $card-background-light: #ffffff; + $primary-background-dark: #001306; + $opposite-color-dark: #1a1a1a; + $border-color-dark: #242a30; + + @include light { + color: #646466; + background: #f0f2f5; } - .media { - border-bottom: 1px solid $card-border-color; - padding-bottom: 10px; - padding-top: 10px; - position: relative; - counter-increment: number; + @include dark { + color: #c8c8c8; + background: #121314; + } - &:after { - content: counter(number); - font-size: 40px; - color: $card-border-color; - position: absolute; - right: 10px; - top: 9px; + .text-primary { + @include light { + color: $primary-color-light !important; } + @include dark { + color: $primary-color-dark !important; + } + } - &:last-child { - border-bottom: none; + .img-thumbnail { + background: none; + border: none; + padding: 0; + + .user-avatar { + border-radius: 4px; + overflow: hidden; } } - .long-name { - display: none; - @include size(intermediate) { - display: initial; + .is-online { + width: 11px; + height: 11px; + border: none; + @include background-theme($primary-color-light, $primary-color-dark); + } + + header nav.navbar { + @include light { + color: #777777; + } + @include dark { + color: #eeeeee; + } + + .nav-link, + .btn-toggle-theme, + { + color: inherit; + } + + .logo { + width: 15px; + height: 20px; + } + + .btn-register { + @include light { + color: $opposite-color-light; + background: $primary-color-light; + border: 1px solid $primary-color-light; + &:hover { + background: #007e2b; + border-color: #007e2b; + } + &:focus { + border-color: #00fe56; + } + &:active { + background: #006522; + border-color: #006522; + } + &:disabled { + background: rgba($primary-color-light, 0.3); + border-color: rgba($primary-color-light, 0.3); + } + } + + @include dark { + color: $opposite-color-dark; + background: $primary-color-dark; + border: 1px solid $primary-color-dark; + &:hover { + background: #00c041; + border-color: #00c041; + } + &:focus { + border-color: #00fe56; + } + &:active { + background: #00e34d; + border-color: #00e34d; + } + &:disabled { + background: rgba($primary-color-dark, 0.3); + border-color: rgba($primary-color-dark, 0.3); + } + } + } + + .nav-search { + .search-bar { + border: none; + @include background-theme($card-background-light, $card-background-dark); + + input { + @include color-theme(#777777, #acacac); + @include background-theme($card-background-light, $card-background-dark); + } + + @include icon { + @include color-theme(#3c3c3c, #505050); + } + } } } - .short-name { - display: initial; - @include size(intermediate) { - display: none; + .community-banner, + .members-banner, + { + border-radius: 8px; + @include background-theme(#ffffff, #181a1b); + } + + .community-banner-subtitle, + .members-banner-title { + font-size: 0.85em; + } + + .community-banner-title, + .members-banner-value { + font-size: 1.33em; + font-weight: bold; + @include color-theme(#333333, #eeeeee); + } + + .community-banner { + .community-banner-subtitle { + @include color-theme(#005b12, #bdd5c3); } } -} -#box-forum { - #stream-wrapper { - @include media-breakpoint-down(xl) { - margin-top: 20px; - background-position-x: 10px; - padding-left: 15px; + .members-banner { + .members-banner-title { + @include color-theme(#646466, #c8c8c8); + } + + .members-banner-border-right { + @include light { + border-right: 1px solid #bbcad8; + } + @include dark { + border-right: 1px solid #464849; + } } } - #stream { - height: 365px; - position: relative; - overflow: hidden; + h2 { + font-size: 0.9em; + color: inherit; + } + + h4.heading { + font-size: 0.9em; + color: inherit; + @include theme { // this just overrides previous dark theme + border: none; + } + + i { + display: none; + } + } - @include media-breakpoint-down(md) { - padding-left: 15px; + a { + @include theme { + color: inherit; } } - #box-forum-headline { - margin-top: 20px; + a[data-user-id] { + @include color-theme($secondary-color-light, $secondary-color-dark); + } - .row { - border-bottom: 1px solid #e6e6e6; - padding: 4px 0 4px 0; - margin: 0; + .nav-pills { + .nav-link { + transition: none; - .display-count { - strong { - display: block; - text-align: center; - font-size: 16px; - } + @include theme { + color: inherit; + } - small { - display: block; - color: #7d7d7d; - text-align: center; - font-size: 10px; - } + &[href] { + cursor: pointer; } - &:nth-child(even) { - background-color: #f8f8f8; + &.active { + @include color-theme(black, white); } } - a.title { - color: $gray; - display: block; - @include text-truncate(); + .nav-link.active { + @include light { + border-bottom-color: $primary-color-light; + } + @include dark { + border-bottom-color: $primary-color-dark; + } } + } + + .microblog { + .media > .media-body { + .media-heading a { + @include dark { + color: $secondary-color-dark; + } + } - a.category { - font-size: 11px; + .microblog-comments .media a.username { + @include dark { + color: $secondary-color-dark; + } + } } - .float-end { - color: $gray-light; - font-size: 10px; + .microblog-actions .btn { + @include color-theme(#777777, #8f9ba5); } } - .recent-activity { - border-left: 1px solid $card-border-color; - margin: 10px 0 0 10px; + .default-avatar { + @include color-theme($primary-color-light, $primary-color-dark); + @include background-theme($primary-background-light, $primary-background-dark); + } + + .card { + border: none; + box-shadow: none; + border-radius: 8px; + @include color-theme(#555555, #acacac); + @include background-theme($card-background-light, $card-background-dark); + } - @include media-breakpoint-down(md) { - border-left: none; - margin-left: 0; + .card-tile { + border-radius: 6px; + @include background-theme(#eaecf1, #0f0f10); + } + + .viewers-online { + .viewer-pill { + @include background-theme($card-background-light, $card-background-dark); + @include theme { + border: none; + } + } + + .viewers-users .circle { + @include light { + border: 2px solid $card-background-light; + } + @include dark { + border: 2px solid $card-background-dark; + } + + &.circle-number { + line-height: 28px; + @include color-theme(#333333, #acacac); + @include background-theme($card-background-light, $card-background-dark); + } } } - .media { - padding: 0 0 0 20px; - font-size: 11px; - position: relative; - overflow: visible; + .card-reputation { + img, svg { + width: 40px; + height: 40px; + } - &:not(:first-child) { - margin-top: 15px; + .progress { + width: 70%; } - .homepage-activity { - box-shadow: 0 1px 2px #ccc; - border-radius: 50%; - border: 1px solid $card-border-color; - background: #fff; - position: absolute; - width: 20px; - height: 20px; - left: -11px; - top: 8px; + .ranking-row { + counter-increment: rank; + + .ranking-row-avatar { + border-radius: 4px; + overflow: hidden; + } + + &:last-child { + border-bottom: none; + } + + .counter { + align-self: center; + @include color-theme(#dddddd, #acacac); - .activity-icon { - margin-top: 2px; - text-align: center; - color: $gray-light; + &:after { + content: counter(rank); + } } - &::selection { - text-shadow: none; + .ranking-percentage-ray { + height: 3px; + border-radius: 3px; + @include light { + background: linear-gradient(270deg, $primary-color-light 0%, $opposite-color-light 100%); + } + + @include dark { + background: linear-gradient(270deg, $primary-color-dark 0%, $opposite-color-dark 100%); + } } } - @include media-breakpoint-down(md) { - padding: 0; + a.ranking-username { + @include color-theme(#646466, #acacac); } - .default-avatar { - svg { - width: 38px; - height: 38px; + .long-name { + display: none; + @include size(intermediate) { + display: initial; + } + } + + .short-name { + display: initial; + @include size(intermediate) { + display: none; } } } - .media-body { - min-width: 0; // makes flex children not exceed parent width + #box-forum { + #stream-wrapper { + padding-left: 2px; + + @include media-breakpoint-down(xl) { + background-position-x: 10px; + padding-left: 15px; + } + + #stream { + height: 365px; + position: relative; + overflow: hidden; + + @include media-breakpoint-down(md) { + padding-left: 15px; + } + + .media { + padding: 0 0 0 20px; + position: relative; + overflow: visible; + + @include media-breakpoint-down(md) { + padding: 0; + } + + &:not(:first-child) { + margin-top: 15px; + } + + .homepage-activity { + border-radius: 50%; + position: absolute; + width: 20px; + height: 20px; + left: -11px; + top: 8px; + justify-content: center; + align-items: center; + @include color-theme(#777777, #acacac); + @include background-theme(#ffffff, #121212); + @include light { + border: 1px solid #dddddd; + } + @include dark { + border: 1px solid #2f2f2f; + } + @include icon { + color: inherit; + } + } + + .media-object { + width: 42px; + background: #fff; + padding: 2px; + border-radius: 7px; + + .user-avatar { + max-width: 100%; + border-radius: 4px; + } + + @include dark { + border: 1px solid $border-color-dark; + background: #121212; + } + } + + .media-body { + min-width: 0; // makes flex children not exceed parent width + + p { + margin: 0; + @include text-truncate; + } + + strong { + display: block; + font-weight: normal; + padding: 0 0 0 10px; + margin: 10px 0 0 1px; + font-family: "Open Sans", sans-serif; + @include light { + border-left: 1px solid $border-color-light; + } + @include dark { + border-left: 1px solid #2f2f2f; + } + } + } + + .default-avatar { + img, svg { + width: 38px; + height: 38px; + } + } + } + } + } + + #box-forum-headline, + .interesting-topics, + { + margin-top: 20px; + + .row { + padding: 4px 0 4px 0; + margin: 0; + + @include light { + border-bottom: 1px solid #e6e6e6; + } + + @include dark { + border-bottom: 1px solid #181818; + } + + .display-count { + strong { + display: block; + text-align: center; + font-size: 16px; + @include color-theme(#333333, #acacac); + } + + small { + display: block; + text-align: center; + font-size: 10px; + @include theme { + color: #7d7d7d; + } + } + } + } + + a.title { + display: block; + @include color-theme(#555555, #acacac); + @include text-truncate; + } + + a.category { + font-size: 0.8em; + } - p { - margin: 0; - @include text-truncate(); + .topic-created { + font-size: 0.75em; + @include color-theme(#777777, #7d7d7d); + } } - strong { - font-weight: normal; - border-left: 1px solid $card-border-color; - padding: 0 0 0 10px; - margin: 10px 0 0 1px; - display: block; - font-family: "Open Sans", sans-serif; + .recent-activity { + margin: 10px 0 0 10px; + font-size: 0.8em; + + @include light { + border-left: 1px solid $border-color-light; + } + @include dark { + border-left: 1px solid $border-color-dark; + } + + @include media-breakpoint-down(md) { + border-left: none; + margin-left: 0; + } } } - .media-object { - border: 1px solid #d0d0d0; - box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); - width: 42px; - background: #fff; - padding: 2px; - border-radius: 3px; + .microblog-wrap { + &:after { + @include dark { + background: linear-gradient( + to bottom, + rgba(255, 255, 255, 0) 0, + $opposite-color-dark 65% + ); + } + } + } - img, svg { - max-width: 100%; + .recent-activity a, + .interesting-topics a.category, + { + @include color-theme(#005b12, #bdd5c3); + + &:hover { + text-decoration: underline; + @include light { + // TODO + } + @include dark { + color: $primary-color-dark; + } } } -} -.reputation-username { - color: #333; + footer { + .scroll-top { + @include color-theme($primary-color-light, $primary-color-dark); + @include background-theme($primary-background-light, $primary-background-dark); + } + } } diff --git a/resources/views/home.twig b/resources/views/home.twig index f0399a96f2..65d5dc1745 100644 --- a/resources/views/home.twig +++ b/resources/views/home.twig @@ -8,13 +8,41 @@ {% block container %} {{ render_block('homepage_banner') }} +
    +
    +
    + 4programmers +

    Największa społeczność programistyczna w Polsce

    +
    +
    +
    +
    +
    + Członkowie +
    + {{ members.usersTotal }} +
    +
    + Online +
    + {{ members.usersOnline }} +
    +
    + Gości +
    + {{ members.guestsOnline }} +
    +
    +
    +
    +
    -
    -

    +
    +

    Co nowego na forum?

    -
    +
    @@ -39,7 +67,7 @@ -
    +
    {% for topic in interesting %} @@ -60,7 +88,7 @@ {{ topic.forum }} - + {{ topic.last_post_created_at|format_date }}
    @@ -99,9 +127,9 @@
    -
      +
      • - + Ostatnia aktywność
        • @@ -110,18 +138,16 @@
        {% for activity in activities %}
        -
        -
        - {% if activity.object == 'microblog' %} - {{ icon('homepageActivityMicroblog') }} - {% elseif activity.object == 'comment' %} - {{ icon('homepageActivityPostComment') }} - {% elseif activity.object == 'topic' %} - {{ icon('homepageActivityTopic') }} - {% elseif activity.object == 'post' %} - {{ icon('homepageActivityPost') }} - {% endif %} -
        +
        + {% if activity.object == 'microblog' %} + {{ icon('homepageActivityMicroblog') }} + {% elseif activity.object == 'comment' %} + {{ icon('homepageActivityPostComment') }} + {% elseif activity.object == 'topic' %} + {{ icon('homepageActivityTopic') }} + {% elseif activity.object == 'post' %} + {{ icon('homepageActivityPost') }} + {% endif %}
        @@ -146,9 +172,7 @@
    -

    - Popularne wpisy na mikroblogu -

    +

    Popularne wpisy na mikroblogu

    @@ -173,10 +197,7 @@

    -

    - Reputacja użytkowników -

    - +

    Reputacja użytkowników

    {% for tab, users in reputation %} -
    +
    {% for user in users %} -
    -
    - - {{ user_avatar(user.photo, user.name) }} +
    + + {{ user_avatar(user.photo, user.name) }} + +
    + + {{ user.name }} -
    - -
    - - - {{ user.name }} - - - -
    -
    - - - {{ user.reputation|number_format(0, '', ' ') }} - - {{ declination(user.reputation, ['punkt', 'punkty', 'punktów'], true) }} - +
    + + {{ user.reputation }} pkt +
    +
    +
    +
    {% else %} diff --git a/resources/views/layout.twig b/resources/views/layout.twig index 8d4a5f5d96..daaa3d0b63 100644 --- a/resources/views/layout.twig +++ b/resources/views/layout.twig @@ -46,7 +46,7 @@ - + {{ render_region('body') }} {% block body %} @@ -71,7 +71,6 @@ {{ render_block('footer') }}
    - + {{ icon('scrollTop') }}