From 5e7d50468339bbd3549015d63502190c2a94911d Mon Sep 17 00:00:00 2001 From: Daniel Wilkowski Date: Tue, 22 Oct 2024 11:55:16 +0200 Subject: [PATCH] Restyle homepage --- app/Domain/Icon/FontAwesomeFree.php | 3 - app/Domain/Icon/FontAwesomePro.php | 3 - app/Http/Controllers/HomeController.php | 1 + app/Services/Session/Renderer.php | 8 +- public/img/logo-dark.svg | 2 +- public/img/logo-light.svg | 2 +- resources/feature/theme/theme.scss | 24 + 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 | 692 ++++++++++++++---- resources/views/home.twig | 89 +-- resources/views/layout.twig | 5 +- 17 files changed, 645 insertions(+), 322 deletions(-) delete mode 100644 resources/sass/core/_dark_homepage.scss diff --git a/app/Domain/Icon/FontAwesomeFree.php b/app/Domain/Icon/FontAwesomeFree.php index 490ca8c1bb..18fe67c0b7 100644 --- a/app/Domain/Icon/FontAwesomeFree.php +++ b/app/Domain/Icon/FontAwesomeFree.php @@ -29,9 +29,6 @@ public function icons(): array 'loginGithub' => 'fab fa-github', // homepage - 'microblogsPopular' => 'far fa-comments', - 'reputationRanking' => 'fas fa-star', - 'forumNews' => 'fas fa-star', 'viewersOnlineLocal' => 'fas fa-eye', 'viewersOnlineGlobal' => 'fas fa-users', 'homepageActivityMicroblog' => 'far fa-person', diff --git a/app/Domain/Icon/FontAwesomePro.php b/app/Domain/Icon/FontAwesomePro.php index c4eda00272..4955bf462f 100644 --- a/app/Domain/Icon/FontAwesomePro.php +++ b/app/Domain/Icon/FontAwesomePro.php @@ -30,9 +30,6 @@ public function icons(): array 'loginGithub' => 'fa-brand fa-github', // homepage - 'microblogsPopular' => 'fa-light fa-fire-flame-curved', - 'reputationRanking' => 'fa-light fa-trophy', - 'forumNews' => 'fa-light fa-inbox-in', 'viewersOnlineLocal' => 'fa-light fa-eye', 'viewersOnlineGlobal' => 'fa-light fa-users', 'homepageActivityMicroblog' => 'fa-light fa-person', diff --git a/app/Http/Controllers/HomeController.php b/app/Http/Controllers/HomeController.php index ad7c358b61..94c166f358 100644 --- a/app/Http/Controllers/HomeController.php +++ b/app/Http/Controllers/HomeController.php @@ -59,6 +59,7 @@ public function index(): View ), 'globalViewers' => $this->globalViewers(), + 'lookAndFeel' => 'lookAndFeelModern', ]) ->with('settings', $this->getSettings()); } diff --git a/app/Services/Session/Renderer.php b/app/Services/Session/Renderer.php index 5cd5a63a42..9c1f6af995 100644 --- a/app/Services/Session/Renderer.php +++ b/app/Services/Session/Renderer.php @@ -1,7 +1,7 @@ spacer = new Spacer(8); 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..09651ca556 100644 --- a/resources/feature/theme/theme.scss +++ b/resources/feature/theme/theme.scss @@ -21,3 +21,27 @@ } } } + +@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; + } +} 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 b22b1d0c6a..7a0f10d147 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 c25b6d1037..47d1c1bef3 100644 --- a/resources/sass/core/_dark_topic.scss +++ b/resources/sass/core/_dark_topic.scss @@ -15,7 +15,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 78af7a102b..5846b90a45 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..db4040087c 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,634 @@ } } -.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 light { + background-color: $primary-color-light; + } + @include dark { + background-color: $primary-color-dark; } } - .short-name { - display: initial; - @include size(intermediate) { - display: none; + 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 light { + background: $card-background-light; + input { + color: #777777; + background: $card-background-light; + } + } + @include dark { + background: $card-background-dark; + input { + color: #acacac; + background: $card-background-dark; + } + } + @include icon { + @include light { + color: #3c3c3c; + } + @include dark { + color: #505050; + } + } + } } } -} -#box-forum { - #stream-wrapper { - @include media-breakpoint-down(xl) { - margin-top: 20px; - background-position-x: 10px; - padding-left: 15px; + 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; } } - #stream { - height: 365px; - position: relative; - overflow: hidden; + a { + @include theme { + color: inherit; + } + } - @include media-breakpoint-down(md) { - padding-left: 15px; + a[data-user-id] { + @include light { + color: $secondary-color-light; + } + @include dark { + color: $secondary-color-dark; } } - #box-forum-headline { - margin-top: 20px; + .nav-pills { + .nav-link { + transition: none; - .row { - border-bottom: 1px solid #e6e6e6; - padding: 4px 0 4px 0; - margin: 0; + @include theme { + color: inherit; + } - .display-count { - strong { - display: block; - text-align: center; - font-size: 16px; + &[href] { + cursor: pointer; + } + + &.active { + @include light { + color: black; + } + @include dark { + color: white; } + } + } - small { - display: block; - color: #7d7d7d; - text-align: center; - font-size: 10px; + .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; } } - &:nth-child(even) { - background-color: #f8f8f8; + .microblog-comments .media a.username { + @include dark { + color: $secondary-color-dark; + } } } - a.title { - color: $gray; - display: block; - @include text-truncate(); + .microblog-actions .btn { + @include light { + color: #777777; + } + @include dark { + color: #8f9ba5; + } } + } - a.category { - font-size: 11px; + .default-avatar { + @include light { + color: $primary-color-light; + background: $primary-background-light; } + @include dark { + color: $primary-color-dark; + background: $primary-background-dark; + } + } + + .card { + border: none; + box-shadow: none; + border-radius: 8px; + @include light { + color: #555555; + background: $card-background-light; + } + @include dark { + color: #acacac; + background: $card-background-dark; + } + } - .float-end { - color: $gray-light; - font-size: 10px; + .card-tile { + border-radius: 6px; + @include light { + background: #eaecf1; + } + @include dark { + background: #0f0f10; } } - .recent-activity { - border-left: 1px solid $card-border-color; - margin: 10px 0 0 10px; + .viewers-online { + .viewer-pill { + @include theme { + border: none; + } + + @include light { + background-color: $card-background-light; + } + @include dark { + background-color: $card-background-dark; + } + } + + .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 media-breakpoint-down(md) { - border-left: none; - margin-left: 0; + @include light { + color: #333333; + background: $card-background-light; + } + @include dark { + color: #acacac; + background: $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 light { + color: #dddddd; + } + @include dark { + color: #acacac; + } + + &:after { + content: counter(rank); + } + } + + .ranking-percentage-ray { + height: 3px; + border-radius: 3px; + @include light { + background: linear-gradient(270deg, $primary-color-light 0%, $opposite-color-light 100%); + } - .activity-icon { - margin-top: 2px; - text-align: center; - color: $gray-light; + @include dark { + background: linear-gradient(270deg, $primary-color-dark 0%, $opposite-color-dark 100%); + } } + } - &::selection { - text-shadow: none; + a.ranking-username { + @include light { + color: #646466; + } + @include dark { + color: #acacac; } } - @include media-breakpoint-down(md) { - padding: 0; + .long-name { + display: none; + @include size(intermediate) { + display: initial; + } } - .default-avatar { - svg { - width: 38px; - height: 38px; + .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; - p { - margin: 0; - @include text-truncate(); + @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 light { + color: #777777; + } + @include dark { + color: #acacac; + } + @include light { + border: 1px solid #dddddd; + background: #ffffff; + } + @include dark { + border: 1px solid #2f2f2f; + background: #121212; + } + @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; + } + } + } + } } - 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; + #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 light { + color: #333333; + } + @include dark { + color: #acacac; + } + } + + small { + display: block; + text-align: center; + font-size: 10px; + @include theme { + color: #7d7d7d; + } + } + } + } + + a.title { + display: block; + @include light { + color: #555555; + } + @include dark { + color: #acacac; + } + @include text-truncate; + } + + a.category { + font-size: 0.8em; + } + + .topic-created { + font-size: 0.75em; + @include light { + color: #777777; + } + @include dark { + color: #7d7d7d; + } + } + } + + .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 light { + color: #005b12; + } + @include dark { + color: #bdd5c3; + } + + &:hover { + text-decoration: underline; + @include light { + // TODO + } + @include dark { + color: $primary-color-dark; + } } } -} -.reputation-username { - color: #333; + footer { + .scroll-top { + @include light { + color: $primary-color-light; + background: $primary-background-light; + } + @include dark { + color: $primary-color-dark; + background: $primary-background-dark; + } + } + } } diff --git a/resources/views/home.twig b/resources/views/home.twig index 45a3cbf41e..d467d78e60 100644 --- a/resources/views/home.twig +++ b/resources/views/home.twig @@ -10,12 +10,11 @@
    -
    -

    - {{ icon('forumNews') }} +
    +

    Co nowego na forum?

    -
    +
    @@ -40,7 +39,7 @@ -
    +
    {% for topic in interesting %} @@ -61,7 +60,7 @@ {{ topic.forum }} - + {{ topic.last_post_created_at|format_date }}
    @@ -100,9 +99,9 @@
    -
      +
      • - + Ostatnia aktywność
        • @@ -111,18 +110,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 %}
        @@ -147,10 +144,7 @@
    -

    - {{ icon('microblogsPopular') }} - Popularne wpisy na mikroblogu -

    +

    Popularne wpisy na mikroblogu

    @@ -175,11 +169,7 @@

    -

    - {{ icon('reputationRanking') }} - 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 eee7e7de2f..928e7da8f4 100644 --- a/resources/views/layout.twig +++ b/resources/views/layout.twig @@ -46,7 +46,7 @@ - + {{ render_region('body') }} {% block body %} @@ -70,7 +70,6 @@ {{ render_block('footer') }}
    - + {{ icon('scrollTop') }}