From 66ba4998f00a6bb5add3a57a6250e0e846d869c7 Mon Sep 17 00:00:00 2001 From: Daniel Wilkowski Date: Tue, 15 Oct 2024 14:47:11 +0200 Subject: [PATCH] Update homepage, Work in progress --- app/Domain/Icon/FontAwesomeFree.php | 3 - app/Services/Session/Renderer.php | 8 +- public/img/stream-last-feed.png | Bin 1214 -> 0 bytes resources/feature/theme/theme.scss | 14 + resources/js/components/microblog/comment.vue | 13 +- resources/sass/core.scss | 1 - resources/sass/core/_dark_homepage.scss | 86 ----- resources/sass/core/_panels.scss | 4 - resources/sass/pages/_homepage.scss | 336 +++++++++++++----- resources/views/home.twig | 83 ++--- 10 files changed, 304 insertions(+), 244 deletions(-) delete mode 100644 public/img/stream-last-feed.png delete mode 100644 resources/sass/core/_dark_homepage.scss diff --git a/app/Domain/Icon/FontAwesomeFree.php b/app/Domain/Icon/FontAwesomeFree.php index fb42b7229e..56e72d237a 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/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/stream-last-feed.png b/public/img/stream-last-feed.png deleted file mode 100644 index 1bc2351309270870aa01930f7d6ed37df8c43824..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1214 zcmV;v1VQ_WP)P)t-s0001y zu_KSICy}rtk+CC>ttXJMBayKpkF6(=uO*MICy%Wskgp_t^=_~+sqpq)LdY_^w8#tl~u^q;X4;%QOBTkIPF&&M-? zUF2r14L6$5@Zl0Pa*P@{2SLP@t?~mkD%wAzM~vr1coSKTk9p|pg?2OReO@M#WxlU| zQ}$z7({P6^?WAn^$|>p_urIXh@}`F7jUFz z&)pF`Egwruk=0;3X_m6fHt9jg-;m+S#R|Z6En@#%MDQGX=g{m-GlLNY;Yd#h(uCZO z6il}C{C9H6Iz5Mf`Op;SOoClwlY z09y+1tznDUHDJw{P#hcsd*X@XwC;$A%)^kQg&$%09B)958JZX`q~<3C6tksDzhs>s z%&glwEz|6+eMafhTs8_^5cW_djS^gj4=uOUJEeNq+JF{ls{?%7#}a%lv6~-JQPfz9 zv)pcJw6yQyIj20FO_Fb#{?DZymCYZ=QItX-=Kg&6Wa7 zl+K1N6u$~IlOv^wL`<|n+-i!dcMX^97VdlFQNXahlcyfR@H_yH_xm$?u>3IDsbf1m zCGSG{`(z5+==XMidigS~=?M*2)y`Pq1eq-~Xg`Et`pHrIU>`nu%c%8LU$V3b{FRHp zZE;}ax;OiHvsP_h4NsNO`rD26N{kQhhiB9{%E#qFG0{HDz1#5VB%&st5r+Trh>Tq3 chfgP80lR)ZI`T0FLjV8(07*qoM6N<$f_
  • - {{ commentLabel }} - +
  • - + Odpowiedz - +
  • - + Zgłoś - +
    • diff --git a/resources/sass/core.scss b/resources/sass/core.scss index 1ea46079af..1158b9d958 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 f3136a3326..0000000000 --- a/resources/sass/core/_dark_homepage.scss +++ /dev/null @@ -1,86 +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; - } - } - } - } - - 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/_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/pages/_homepage.scss b/resources/sass/pages/_homepage.scss index 185af9237d..c6a5cfc5d5 100644 --- a/resources/sass/pages/_homepage.scss +++ b/resources/sass/pages/_homepage.scss @@ -18,24 +18,139 @@ } } +@include light { + color: #646466; + background: #f0f2f5; +} + +@include dark { + color: #c8c8c8; + background: #0f0f0f; +} + .scope-homepage { + h2 { + font-size: 0.9em; + color: inherit; + } + h4.heading { - border: none; + font-size: 0.9em; + color: inherit; + @include theme { // this just overrides previous dark theme + border: none; + } + + i { + display: none; + } } - @include light { - .default-avatar { - color: #00a538; - background: #e7f7e6; + a { + @include light { + color: #005b12; + } + @include dark { + color: #bdd5c3; } } - @include dark { - .default-avatar { + .nav-pills { + .nav-link { + transition: none; + } + + .nav-link[href] { + cursor: pointer; + } + + @include theme { + .nav-link { + color: #777777; + + &.active { + color: black; + } + } + } + + .nav-link.active { + @include light { + border-bottom-color: #00a538; + } + @include dark { + border-bottom-color: #78de13; + } + } + } + + .microblog { + .media > .media-body { + .media-heading a { + @include dark { + color: #bdd5c3; + } + } + + .microblog-comments .media a.username { + @include dark { + color: #bdd5c3; + } + } + } + + .microblog-actions .btn { + @include light { + color: #777777; + } + @include dark { + color: #8f9ba5; + } + } + } + + .default-avatar { + @include light { + color: #00a538; + background: #e7f7e6; + } + @include dark { color: #78de13; background: #0a1203; } } + + .card { + border: none; + box-shadow: none; + border-radius: 8px; + } + + .card-tile { + border-radius: 6px; + @include light { + background: #eaecf1; + } + @include dark { + background: transparent; + } + } + + @include theme { + .viewers-online { + .viewer-pill { + border: none; + } + + .viewers-users .circle { + border: 2px solid white; + + &.circle-number { + line-height: 32px; + } + } + } + } } .card-reputation { @@ -71,7 +186,7 @@ @include light { background: linear-gradient(270deg, #00a538 0%, #ffffff 100%); } - + @include dark { background: linear-gradient(270deg, #80ff00 0%, #1a1a1a 100%); } @@ -125,24 +240,103 @@ #box-forum { #stream-wrapper { - background: url('/img/stream-last-feed.png') no-repeat; - padding-top: 25px; padding-left: 2px; @include media-breakpoint-down(xl) { - margin-top: 20px; background-position-x: 10px; padding-left: 15px; } - } - #stream { - height: 365px; - position: relative; - overflow: hidden; + #stream { + height: 365px; + position: relative; + overflow: hidden; - @include media-breakpoint-down(md) { - padding-left: 15px; + @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: #777777; + 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: 3px; + + img, svg { + max-width: 100%; + } + + @include dark { + border: 1px solid #242a30; + 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 #dddddd; + } + @include dark { + border-left: 1px solid #2f2f2f; + } + } + } + + .default-avatar { + img, svg { + width: 38px; + height: 38px; + } + } + } } } @@ -150,10 +344,17 @@ margin-top: 20px; .row { - border-bottom: 1px solid #e6e6e6; 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; @@ -168,16 +369,17 @@ font-size: 10px; } } - - &:nth-child(even) { - background-color: #f8f8f8; - } } a.title { - color: $gray; display: block; - @include text-truncate(); + @include light { + color: #555555; + } + @include dark { + color: #acacac; + } + @include text-truncate; } a.category { @@ -191,88 +393,26 @@ } .overview { - border-left: 1px solid $card-border-color; margin: 10px 0 0 10px; - @include media-breakpoint-down(md) { - border-left: none; - margin-left: 0; + @include light { + border-left: 1px solid #dddddd; } - } - - .media { - padding: 0 0 0 20px; - font-size: 11px; - position: relative; - overflow: visible; - - &:not(:first-child) { - margin-top: 15px; - } - - .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; - - .activity-icon { - margin-top: 2px; - text-align: center; - color: $gray-light; - } - - &::selection { - text-shadow: none; - } + @include dark { + border-left: 1px solid #242a30; } @include media-breakpoint-down(md) { - padding: 0; - } - - .default-avatar { - svg { - width: 38px; - height: 38px; - } - } - } - - .media-body { - min-width: 0; // makes flex children not exceed parent width - - p { - margin: 0; - @include text-truncate(); - } - - 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; + 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; - - img, svg { - max-width: 100%; +@include dark { + .microblog-wrap { + &:after { + background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #1a1a1a 65%); } } } - diff --git a/resources/views/home.twig b/resources/views/home.twig index 7f04309602..e8dc21c9de 100644 --- a/resources/views/home.twig +++ b/resources/views/home.twig @@ -10,30 +10,32 @@
    -
    -

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

    Co nowego na forum?

    -
    +
    @@ -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.name }}
    - + {{ user.reputation }} pkt -
    -
    +
    +
    -
    +
    {% else %}