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/InitialsSvg.php b/app/Domain/InitialsSvg.php index a8e892a608..cedf7cabcd 100644 --- a/app/Domain/InitialsSvg.php +++ b/app/Domain/InitialsSvg.php @@ -10,7 +10,7 @@ public function __construct(private string $initials) public function imageSvg(): string { return << +
$this->initials 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/app/Services/TwigBridge/Extensions/Media.php b/app/Services/TwigBridge/Extensions/Media.php index e832b353ee..6da0abc5e1 100644 --- a/app/Services/TwigBridge/Extensions/Media.php +++ b/app/Services/TwigBridge/Extensions/Media.php @@ -30,7 +30,7 @@ public function userAvatar(?string $photo, string $name): Html } $photoUrl = $this->photo($photo); $htmlUsername = \htmlSpecialChars($name); - return new StringHtml('' . $htmlUsername . ''); + return new StringHtml('' . $htmlUsername . ''); } public function logo($filename, $secure = null): string 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/public/img/stream-last-feed.png b/public/img/stream-last-feed.png deleted file mode 100644 index 1bc2351309..0000000000 Binary files a/public/img/stream-last-feed.png and /dev/null differ diff --git a/resources/feature/theme/theme.scss b/resources/feature/theme/theme.scss index 5fa39cdb4d..c7e27399d1 100644 --- a/resources/feature/theme/theme.scss +++ b/resources/feature/theme/theme.scss @@ -21,3 +21,18 @@ } } } + +@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; + } +} 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 e869bce1d1..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; - } - } - } - - .overview { - 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/_panels.scss b/resources/sass/core/_panels.scss index fb7a35feec..b5a27a5c54 100644 --- a/resources/sass/core/_panels.scss +++ b/resources/sass/core/_panels.scss @@ -6,10 +6,6 @@ margin-bottom: 18px; // backward compatibility. in bootstrap 3 panel have margin-bottom } -.card-default { - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07); -} - .box { > h4 { position: relative; 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/pages/_homepage.scss b/resources/sass/pages/_homepage.scss index 965bbbf903..ea54861fca 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,205 +20,589 @@ } } -.card-reputation { - img, svg { - width: 40px; - height: 40px; +header nav.navbar { + .logo { + height: 30px; } +} + +body.lookAndFeelModern { + $text-color: #777777; + + $primary-color-light: #00a538; + $secondary-color-light: #005b12; + $opposite-color-light: #ffffff; + $border-color-light: #dddddd; + + $primary-color-dark: #00a538; + $secondary-color-dark: #bdd5c3; + $opposite-color-dark: #1a1a1a; + $border-color-dark: #242a30; + + $card-background-light: #ffffff; + $card-background-dark: #181a1b; - .progress { - width: 70%; + @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: $text-color; + } + @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 { + background: $card-background-light; + } + } + @include dark { + background: $card-background-dark; + input { + background: $card-background-dark; + } + } + @include icon { + @include light { + color: #3c3c3c; + } + @include dark { + color: #505050; + } + } + } } } -} -#box-forum { - #stream-wrapper { - background: url('/img/stream-last-feed.png') no-repeat; - padding-top: 25px; - padding-left: 2px; + h2 { + font-size: 0.9em; + color: inherit; + } - @include media-breakpoint-down(xl) { - margin-top: 20px; - background-position-x: 10px; - padding-left: 15px; + 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; + } + + &[href] { + cursor: pointer; + } - .display-count { - strong { - display: block; - text-align: center; - font-size: 16px; + &.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: $text-color; + } + @include dark { + color: #8f9ba5; + } } + } - a.category { - font-size: 11px; + .default-avatar { + @include light { + color: $primary-color-light; + background: #e7f7e6; } + @include dark { + color: $primary-color-dark; + background: #001306; + } + } + + .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; } } - .overview { - 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; + } + } - @include media-breakpoint-down(md) { - border-left: none; - margin-left: 0; + .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 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; + } - .activity-icon { - margin-top: 2px; - text-align: center; - color: $gray-light; + .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%); + } + + @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; + font-size: 11px; + 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; + color: $text-color; + justify-content: center; + align-items: center; + + @include light { + border: 1px solid $card-border-color; + background: #fff; + } + @include dark { + border: 1px solid #2f2f2f; + background: #121212; + } + } + + .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 { + 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: 11px; + } + + .topic-created { + font-size: 0.75em; + @include light { + color: #777777; + } + @include dark { + color: #7d7d7d; + } + } } - } - .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; + .overview { + margin: 10px 0 0 10px; - img, svg { - max-width: 100%; + @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; + } } } -} -.reputation-username { - color: #333; + .microblog-wrap { + &:after { + @include dark { + background: linear-gradient( + to bottom, + rgba(255, 255, 255, 0) 0, + $opposite-color-dark 65% + ); + } + } + } } diff --git a/resources/views/home.twig b/resources/views/home.twig index c31283f124..a6f100aa2f 100644 --- a/resources/views/home.twig +++ b/resources/views/home.twig @@ -10,30 +10,32 @@
    -
    -

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

    Co nowego na forum?

    -
    +
    @@ -58,7 +60,7 @@ {{ topic.forum }} - + {{ topic.last_post_created_at|format_date }}
    @@ -97,22 +99,27 @@
    +
      +
    • + + Ostatnia aktywność + +
      • +
    {% 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 %}
    @@ -137,10 +144,7 @@
    -

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

    +

    Popularne wpisy na mikroblogu

    @@ -165,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..a53df49b73 100644 --- a/resources/views/layout.twig +++ b/resources/views/layout.twig @@ -46,7 +46,7 @@ - + {{ render_region('body') }} {% block body %} @@ -70,7 +70,6 @@