From ca026184a7ed61162eccb62c4bafe130caba4cc4 Mon Sep 17 00:00:00 2001 From: Daniel Wilkowski Date: Fri, 8 Nov 2024 17:29:47 +0100 Subject: [PATCH] Initial implementation --- app/Feature/Trial/TrialService.php | 12 + app/Feature/Trial/TrialServiceProvider.php | 19 +- app/Http/Controllers/HomeController.php | 6 +- resources/sass/core.scss | 1 + resources/sass/pages/_homepage.scss | 450 ++++++------- resources/sass/pages/_homepage_modern.scss | 701 +++++++++++++++++++++ resources/views/home_modern.twig | 267 ++++++++ 7 files changed, 1224 insertions(+), 232 deletions(-) create mode 100644 resources/sass/pages/_homepage_modern.scss create mode 100644 resources/views/home_modern.twig diff --git a/app/Feature/Trial/TrialService.php b/app/Feature/Trial/TrialService.php index c38310d632..248415d1d0 100644 --- a/app/Feature/Trial/TrialService.php +++ b/app/Feature/Trial/TrialService.php @@ -1,10 +1,22 @@ guest->getSetting('isHomepageNew', 'false') === 'true'; + } + public function setChoice(string $choice): void { + $this->guest->setSetting('isHomepageNew', 'true'); } public function setStage(string $stage): void diff --git a/app/Feature/Trial/TrialServiceProvider.php b/app/Feature/Trial/TrialServiceProvider.php index 1c79160c88..9adc3e0ec3 100644 --- a/app/Feature/Trial/TrialServiceProvider.php +++ b/app/Feature/Trial/TrialServiceProvider.php @@ -36,15 +36,22 @@ public function boot(): void private function add(Factory $viewFactory): void { - $viewFactory->composer('home', $this->addViewField(...)); + $viewFactory->composer('home', function (View $view) { + $view->with(['isHomepageModern' => false]); + }); + $viewFactory->composer('home_modern', function (View $view) { + $view->with([ + 'isHomepageModern' => true, + 'homepageMembers' => $this->members(), + ]); + }); + $viewFactory->composer(['home', 'home_modern'], $this->addViewField(...)); } private function addViewField(View $view): void { $view->with([ - 'isHomepageModern' => true, - 'homepageMembers' => $this->members(), - 'survey' => [ + 'survey' => [ 'trial' => [ 'title' => 'Wygląd strony głównej.', 'reason' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras velit metus, egestas id facilisis vel, consectetur sit amet magna. Praesent auctor arcu augue, ut efficitur dui rhoncus et.', @@ -60,8 +67,8 @@ private function addViewField(View $view): void ], ], 'userSession' => [ - 'stage' => 'stage-none', - 'choice' => 'choice-modern', 'choice-legacy', 'choice-pending', + 'stage' => 'stage-invited', + 'choice' => 'choice-pending', // 'choice-legacy', 'choice-pending', 'badgeLong' => true, 'assortment' => 'assortment-legacy', // 'assortment-modern' ], diff --git a/app/Http/Controllers/HomeController.php b/app/Http/Controllers/HomeController.php index e94c55d084..0d1f87916b 100644 --- a/app/Http/Controllers/HomeController.php +++ b/app/Http/Controllers/HomeController.php @@ -2,6 +2,7 @@ namespace Coyote\Http\Controllers; use Coyote\Domain\DiscreetDate; +use Coyote\Feature\Trial\TrialService; use Coyote\Http\Resources\ActivityResource; use Coyote\Http\Resources\Api\MicroblogResource; use Coyote\Http\Resources\FlagResource; @@ -35,13 +36,14 @@ public function __construct( parent::__construct(); } - public function index(): View + public function index(TrialService $service): View { $cache = app(Cache\Repository::class); $this->topic->pushCriteria(new OnlyThoseTopicsWithAccess()); $this->topic->pushCriteria(new SkipHiddenCategories($this->userId)); $date = new DiscreetDate(date('Y-m-d H:i:s')); - return $this->view('home', [ + + return $this->view(!$service->isChoiceModern() ? 'home' : 'home_modern', [ 'flags' => $this->flags(), 'microblogs' => $this->getMicroblogs(), 'interesting' => $this->topic->interesting(), diff --git a/resources/sass/core.scss b/resources/sass/core.scss index be32966cf3..036fdc58d7 100644 --- a/resources/sass/core.scss +++ b/resources/sass/core.scss @@ -70,6 +70,7 @@ @import "pages/guide"; @import "pages/help"; @import "pages/homepage"; +@import "pages/homepage_modern"; @import "pages/job"; @import "pages/microblog"; @import "pages/pm"; diff --git a/resources/sass/pages/_homepage.scss b/resources/sass/pages/_homepage.scss index 6e58400431..a464ccf34d 100644 --- a/resources/sass/pages/_homepage.scss +++ b/resources/sass/pages/_homepage.scss @@ -17,312 +17,314 @@ } } -header nav.navbar { - .logo { - height: 30px; - } -} - -.card-reputation { - img, svg { - width: 40px; - height: 40px; - } - - .progress { - width: 70%; +body.homepage-legacy { + header nav.navbar { + .logo { + height: 30px; + } } - .media { - border-bottom: 1px solid $card-border-color; - padding-bottom: 10px; - padding-top: 10px; - position: relative; - counter-increment: number; - - &:after { - content: counter(number); - font-size: 40px; - color: $card-border-color; - position: absolute; - right: 10px; - top: 9px; + .card-reputation { + img, svg { + width: 40px; + height: 40px; } - &:last-child { - border-bottom: none; + .progress { + width: 70%; } - } - .long-name { - display: none; - @include size(intermediate) { - display: initial; + .media { + border-bottom: 1px solid $card-border-color; + padding-bottom: 10px; + padding-top: 10px; + position: relative; + counter-increment: number; + + &:after { + content: counter(number); + font-size: 40px; + color: $card-border-color; + position: absolute; + right: 10px; + top: 9px; + } + + &:last-child { + border-bottom: none; + } } - } - .short-name { - display: initial; - @include size(intermediate) { + .long-name { display: none; + @include size(intermediate) { + display: initial; + } } - } -} -#box-forum { - #stream-wrapper { - @include media-breakpoint-down(xl) { - margin-top: 20px; - background-position-x: 10px; - padding-left: 15px; + .short-name { + display: initial; + @include size(intermediate) { + display: none; + } } } - #stream { - height: 365px; - position: relative; - overflow: hidden; + #box-forum { + #stream-wrapper { + @include media-breakpoint-down(xl) { + margin-top: 20px; + background-position-x: 10px; + padding-left: 15px; + } + } - @include media-breakpoint-down(md) { - padding-left: 15px; + #stream { + height: 365px; + position: relative; + overflow: hidden; + + @include media-breakpoint-down(md) { + padding-left: 15px; + } } - } - #box-forum-headline { - margin-top: 20px; + #box-forum-headline { + margin-top: 20px; - .row { - border-bottom: 1px solid #e6e6e6; - padding: 4px 0 4px 0; - margin: 0; + .row { + border-bottom: 1px solid #e6e6e6; + padding: 4px 0 4px 0; + margin: 0; - .display-count { - strong { - display: block; - text-align: center; - font-size: 16px; + .display-count { + strong { + display: block; + text-align: center; + font-size: 16px; + } + + small { + display: block; + color: #7d7d7d; + text-align: center; + font-size: 10px; + } } - small { - display: block; - color: #7d7d7d; - text-align: center; - font-size: 10px; + &:nth-child(even) { + background-color: #f8f8f8; } } - &:nth-child(even) { - background-color: #f8f8f8; + a.title { + color: $gray; + display: block; + @include text-truncate(); } - } - - a.title { - color: $gray; - display: block; - @include text-truncate(); - } - a.category { - font-size: 11px; - } + a.category { + font-size: 11px; + } - .float-end { - color: $gray-light; - font-size: 10px; + .float-end { + color: $gray-light; + font-size: 10px; + } } - } - .recent-activity { - border-left: 1px solid $card-border-color; - margin: 10px 0 0 10px; + .recent-activity { + border-left: 1px solid $card-border-color; + margin: 10px 0 0 10px; - @include media-breakpoint-down(md) { - border-left: none; - margin-left: 0; + @include media-breakpoint-down(md) { + border-left: none; + margin-left: 0; + } } - } - - .media { - padding: 0 0 0 20px; - font-size: 11px; - position: relative; - overflow: visible; - &:not(:first-child) { - margin-top: 15px; - } + .media { + padding: 0 0 0 20px; + font-size: 11px; + position: relative; + overflow: visible; - .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; + &:not(:first-child) { + margin-top: 15px; } - &::selection { - text-shadow: none; + .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 media-breakpoint-down(md) { - padding: 0; - } + @include media-breakpoint-down(md) { + padding: 0; + } - .default-avatar { - svg { - width: 38px; - height: 38px; + .default-avatar { + svg { + width: 38px; + height: 38px; + } } } - } - .media-body { - min-width: 0; // makes flex children not exceed parent width + .media-body { + min-width: 0; // makes flex children not exceed parent width - p { - margin: 0; - @include text-truncate(); - } + 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; + 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; + } } - } - .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; + .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%; + img, svg { + max-width: 100%; + } } } -} -.reputation-username { - color: #333; -} + .reputation-username { + color: #333; + } -body.theme-dark { - #box-forum { - .card.card-forum { - .nav.nav-forum { - border-bottom: 1px solid #2f2f2f; + &.theme-dark { + #box-forum { + .card.card-forum { + .nav.nav-forum { + border-bottom: 1px solid #2f2f2f; - .nav-item .nav-link { - color: #acacac; + .nav-item .nav-link { + color: #acacac; - &:hover { - border-color: #404040; - } + &:hover { + border-color: #404040; + } - &.active { - color: #dedede; - border-bottom: 2px solid #d7661c; + &.active { + color: #dedede; + border-bottom: 2px solid #d7661c; + } } } - } - #box-forum-headline { - .tab-content .tab-pane { - .row { - border-bottom: 1px solid #2f2f2f; + #box-forum-headline { + .tab-content .tab-pane { + .row { + border-bottom: 1px solid #2f2f2f; - &:nth-child(even) { - background-color: unset; + &:nth-child(even) { + background-color: unset; + } } - } - a.title { - color: #acacac; - } + a.title { + color: #acacac; + } - small { - color: #7d7d7d; + small { + color: #7d7d7d; + } } } - } - #stream-wrapper { - .media { - .media-object { - border: 1px solid #242a30; - background: #121212; - } + #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; + .homepage-activity.post, + .homepage-activity.comment { + color: #acacac; + border-color: #2f2f2f; + background: #121212; + box-shadow: 0 1px 2px 0 #121212; - &:after { - color: inherit; + &:after { + color: inherit; + } } } - } - .recent-activity { - border-left-color: #242a30; - } + .recent-activity { + border-left-color: #242a30; + } - small { - color: #7d7d7d; - } + small { + color: #7d7d7d; + } - strong { - border-left-color: #2f2f2f; + strong { + border-left-color: #2f2f2f; + } } } } - } - .card-reputation { - background-color: #1a1a1a; + .card-reputation { + background-color: #1a1a1a; - .media-body { - a.reputation-username { - color: #acacac; + .media-body { + a.reputation-username { + color: #acacac; + } } - } - .media { - border-bottom-color: #2f2f2f; + .media { + border-bottom-color: #2f2f2f; - &:after { - color: #2f2f2f; + &:after { + color: #2f2f2f; + } } } - } - h2.h4, - h4 { - color: #c8c8c8; - } + h2.h4, + h4 { + color: #c8c8c8; + } - .microblog-wrap { - &:after { - background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #1a1a1a 65%); + .microblog-wrap { + &:after { + background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #1a1a1a 65%); + } } } } diff --git a/resources/sass/pages/_homepage_modern.scss b/resources/sass/pages/_homepage_modern.scss new file mode 100644 index 0000000000..c4aeea08b1 --- /dev/null +++ b/resources/sass/pages/_homepage_modern.scss @@ -0,0 +1,701 @@ +@charset "UTF-8"; + +@import "bootstrap/scss/mixins/breakpoints"; +@import "bootstrap/scss/mixins/text-truncate"; +@import "../../feature/theme/theme"; + +@mixin size($size) { + @if ($size == 'intermediate') { + @include media-breakpoint-only(sm) { + @content; + } + @include media-breakpoint-up(xxl) { + @content; + } + } @else { + @include media-breakpoint-up($size) { + @content; + } + } +} + +header nav.navbar { + .logo { + height: 30px; + } +} + +@mixin icon { + i.fa-fw { + @content; + } +} + +@mixin sizeNot($size) { + @include media-breakpoint-down($size) { + @content; + } +} + +body.homepage-modern { + $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; + + $body-background-light: #f0f2f5; + $body-background-dark: #121314; + + $border-color-primary-light: #dddddd; + $border-color-secondary-light: #dddddd; + + $border-color-primary-dark: #2f2f2f; + $border-color-secondary-dark: #181818; + + @include light { + color: #646466; + background: $body-background-light; + } + + @include dark { + color: #c8c8c8; + background: $body-background-dark; + } + + .cursor-pointer { + cursor: pointer; + } + + .user-avatar-border { + padding: 2px; + border-radius: 6px; + @include background-theme($card-background-light, $card-background-dark); + + .user-avatar { + border-radius: 4px; + } + } + + .text-primary { + @include light { + color: $primary-color-light !important; + } + @include dark { + color: $primary-color-dark !important; + } + } + + .img-thumbnail { + background: none; + border: none; + padding: 0; + + .user-avatar { + border-radius: 4px; + overflow: hidden; + } + } + + .is-online { + width: 11px; + height: 11px; + border: none; + @include background-theme($primary-color-light, $primary-color-dark); + } + + header nav.navbar { + @include color-theme(#777777, #eeeeee); + + @include light { + + } + @include dark { + border-bottom-color: $border-color-secondary-dark; + border-bottom-width: 1px; // TODO Remove this, as it only overrides legacy stile + } + + .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(#f7f9fa, $card-background-dark); + + input { + @include color-theme(#777777, #acacac); + background: transparent; + } + + @include icon { + @include color-theme(#3c3c3c, #505050); + } + } + } + + .members-banner { + @include background-theme($card-background-light, $card-background-dark); + } + + .community-banner, + .members-banner, + { + border-radius: 8px; + } + + .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); + } + } + + .brand-background { + @function urlEncodedColor($color) { + @return '%23' + unquote(str-slice(ie-hex-str($color), 4)); + } + @function squiggle($color) { + @return url("data:image/svg+xml, %3Csvg stroke='#{urlEncodedColor($color)}' width='254' height='100' viewBox='0 0 254 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M255.038 -31.4512L245.463 -31.4512C237.696 -31.4512 231.4 -25.1549 231.4 -17.3879V-7.81284C231.4 0.284649 224.835 6.84896 216.738 6.84896H207.163C199.396 6.84896 193.099 13.1453 193.099 20.9123V30.4874C193.099 38.2543 199.396 44.5507 207.163 44.5507H216.738C224.835 44.5507 231.4 51.115 231.4 59.2125V68.7876C231.4 76.5545 237.696 82.8509 245.463 82.8509H255.038C262.805 82.8509 269.101 76.5545 269.101 68.7876V59.2125C269.101 51.4455 262.805 45.1492 255.038 45.1492H245.463C237.365 45.1492 230.801 38.5849 230.801 30.4874V20.9123C230.801 12.8148 237.365 6.25052 245.463 6.25052H255.038C262.805 6.25052 269.101 -0.0458603 269.101 -7.81284V-17.3879C269.101 -25.1549 262.805 -31.4512 255.038 -31.4512ZM269.401 -20.3493C268.031 -27.0272 262.121 -32.0497 255.038 -32.0497L245.463 -32.0497C238.38 -32.0497 232.47 -27.0272 231.1 -20.3493C229.731 -27.0272 223.821 -32.0497 216.738 -32.0497H207.163C199.065 -32.0497 192.501 -25.4854 192.501 -17.3879V-7.81284C192.501 -0.0458603 186.205 6.25052 178.438 6.25052H168.863C160.765 6.25052 154.201 12.8148 154.201 20.9123V30.4874C154.201 38.2543 147.904 44.5507 140.137 44.5507H130.562C123.479 44.5507 117.569 49.5732 116.2 56.2511C114.83 49.5732 108.92 44.5507 101.837 44.5507H92.2622C84.1647 44.5507 77.6004 51.115 77.6004 59.2125V68.7876C77.6004 75.8705 82.6229 81.7804 89.3008 83.1501C83.5794 84.3236 79.0731 88.8299 77.8996 94.5513C76.5299 87.8734 70.62 82.8509 63.537 82.8509H53.962C46.195 82.8509 39.8986 76.5545 39.8986 68.7876V59.2125C39.8986 51.115 33.3343 44.5507 25.2368 44.5507H15.6618C7.56431 44.5507 1 51.115 1 59.2125V68.7876C1 75.8705 6.02251 81.7804 12.7004 83.1501C6.02251 84.5198 1 90.4297 1 97.5127V107.088C1 115.185 7.56431 121.75 15.6618 121.75H25.2368C33.0038 121.75 39.3002 128.046 39.3002 135.813V145.388C39.3002 153.485 45.8645 160.05 53.962 160.05H63.537C70.62 160.05 76.5299 155.027 77.8996 148.349C79.2693 155.027 85.1792 160.05 92.2622 160.05H101.837C108.92 160.05 114.83 155.027 116.2 148.349C117.569 155.027 123.479 160.05 130.562 160.05H140.137C147.22 160.05 153.13 155.027 154.5 148.349C155.87 155.027 161.78 160.05 168.863 160.05H178.438C186.535 160.05 193.099 153.485 193.099 145.388V135.813C193.099 128.73 188.077 122.82 181.399 121.45C187.12 120.277 191.627 115.771 192.8 110.049C194.17 116.727 200.08 121.75 207.163 121.75H216.738C223.821 121.75 229.731 116.727 231.1 110.049C232.47 116.727 238.38 121.75 245.463 121.75H255.038C262.121 121.75 268.031 116.727 269.401 110.049C270.77 116.727 276.68 121.75 283.763 121.75H293.338C301.436 121.75 308 115.185 308 107.088V97.5127C308 90.4297 302.978 84.5198 296.3 83.1501C302.978 81.7804 308 75.8705 308 68.7876V59.2125C308 52.1295 302.978 46.2196 296.3 44.8499C302.978 43.4802 308 37.5703 308 30.4874V20.9123C308 13.8293 302.978 7.91943 296.3 6.54974C302.978 5.18005 308 -0.729856 308 -7.81284V-17.3879C308 -25.4854 301.436 -32.0497 293.338 -32.0497H283.763C276.68 -32.0497 270.77 -27.0272 269.401 -20.3493ZM293.338 6.25052C301.105 6.25052 307.402 -0.0458603 307.402 -7.81284V-17.3879C307.402 -25.1549 301.105 -31.4512 293.338 -31.4512H283.763C275.996 -31.4512 269.7 -25.1549 269.7 -17.3879V-7.81284C269.7 0.284649 263.135 6.84896 255.038 6.84896H245.463C237.696 6.84896 231.4 13.1453 231.4 20.9123V30.4874C231.4 38.2543 237.696 44.5507 245.463 44.5507H255.038C262.805 44.5507 269.101 38.2543 269.101 30.4874V20.9123C269.101 12.8148 275.666 6.25052 283.763 6.25052H293.338ZM269.401 33.4488C268.227 39.1702 263.721 43.6764 257.999 44.8499C263.721 46.0234 268.227 50.5297 269.401 56.2511C270.574 50.5297 275.08 46.0234 280.802 44.8499C275.08 43.6764 270.574 39.1702 269.401 33.4488ZM283.763 44.5507C275.996 44.5507 269.7 38.2543 269.7 30.4874V20.9123C269.7 13.1453 275.996 6.84896 283.763 6.84896H293.338C301.105 6.84896 307.402 13.1453 307.402 20.9123V30.4874C307.402 38.2543 301.105 44.5507 293.338 44.5507H283.763ZM293.338 45.1492H283.763C275.996 45.1492 269.7 51.4455 269.7 59.2125V68.7876C269.7 76.885 263.135 83.4493 255.038 83.4493H245.463C237.696 83.4493 231.4 89.7457 231.4 97.5127V107.088C231.4 114.855 237.696 121.151 245.463 121.151H255.038C262.805 121.151 269.101 114.855 269.101 107.088V97.5127C269.101 89.4152 275.666 82.8509 283.763 82.8509H293.338C301.105 82.8509 307.402 76.5545 307.402 68.7876V59.2125C307.402 51.4455 301.105 45.1492 293.338 45.1492ZM293.338 83.4493H283.763C275.996 83.4493 269.7 89.7457 269.7 97.5127V107.088C269.7 114.855 275.996 121.151 283.763 121.151H293.338C301.105 121.151 307.402 114.855 307.402 107.088V97.5127C307.402 89.7457 301.105 83.4493 293.338 83.4493ZM230.801 107.088V97.5127C230.801 89.7457 224.505 83.4493 216.738 83.4493H207.163C199.396 83.4493 193.099 89.7457 193.099 97.5127V107.088C193.099 114.855 199.396 121.151 207.163 121.151H216.738C224.505 121.151 230.801 114.855 230.801 107.088ZM192.501 107.088V97.5127C192.501 89.4152 199.065 82.8509 207.163 82.8509H216.738C224.505 82.8509 230.801 76.5545 230.801 68.7876V59.2125C230.801 51.4455 224.505 45.1492 216.738 45.1492H207.163C199.396 45.1492 193.099 51.4455 193.099 59.2125V68.7876C193.099 76.885 186.535 83.4493 178.438 83.4493H168.863C161.096 83.4493 154.799 89.7457 154.799 97.5127V107.088C154.799 114.855 161.096 121.151 168.863 121.151H178.438C186.205 121.151 192.501 114.855 192.501 107.088ZM178.438 121.75H168.863C160.765 121.75 154.201 115.185 154.201 107.088V97.5127C154.201 89.7457 147.904 83.4493 140.137 83.4493H130.562C122.795 83.4493 116.499 89.7457 116.499 97.5127V107.088C116.499 115.185 109.935 121.75 101.837 121.75H92.2622C84.4952 121.75 78.1988 128.046 78.1988 135.813V145.388C78.1988 153.155 84.4952 159.451 92.2622 159.451H101.837C109.604 159.451 115.901 153.155 115.901 145.388V135.813C115.901 127.715 122.465 121.151 130.562 121.151H140.137C148.235 121.151 154.799 127.715 154.799 135.813V145.388C154.799 153.155 161.096 159.451 168.863 159.451H178.438C186.205 159.451 192.501 153.155 192.501 145.388V135.813C192.501 128.046 186.205 121.75 178.438 121.75ZM154.201 145.388V135.813C154.201 128.046 147.904 121.75 140.137 121.75H130.562C122.795 121.75 116.499 128.046 116.499 135.813V145.388C116.499 153.155 122.795 159.451 130.562 159.451H140.137C147.904 159.451 154.201 153.155 154.201 145.388ZM77.6004 145.388V135.813C77.6004 127.715 84.1647 121.151 92.2622 121.151H101.837C109.604 121.151 115.901 114.855 115.901 107.088V97.5127C115.901 89.7457 109.604 83.4493 101.837 83.4493H92.2622C84.4952 83.4493 78.1988 89.7457 78.1988 97.5127V107.088C78.1988 115.185 71.6345 121.75 63.537 121.75H53.962C45.8645 121.75 39.3002 115.185 39.3002 107.088V97.5127C39.3002 89.7457 33.0038 83.4493 25.2368 83.4493H15.6618C7.89482 83.4493 1.59844 89.7457 1.59844 97.5127V107.088C1.59844 114.855 7.89482 121.151 15.6618 121.151H25.2368C33.3343 121.151 39.8986 127.715 39.8986 135.813V145.388C39.8986 153.155 46.195 159.451 53.962 159.451H63.537C71.304 159.451 77.6004 153.155 77.6004 145.388ZM15.6618 82.8509H25.2368C33.3343 82.8509 39.8986 89.4152 39.8986 97.5127V107.088C39.8986 114.855 46.195 121.151 53.962 121.151H63.537C71.304 121.151 77.6004 114.855 77.6004 107.088V97.5127C77.6004 89.7457 71.304 83.4493 63.537 83.4493H53.962C45.8645 83.4493 39.3002 76.885 39.3002 68.7876V59.2125C39.3002 51.4455 33.0038 45.1492 25.2368 45.1492H15.6618C7.89482 45.1492 1.59844 51.4455 1.59844 59.2125V68.7876C1.59844 76.5545 7.89482 82.8509 15.6618 82.8509ZM92.2622 82.8509H101.837C109.604 82.8509 115.901 76.5545 115.901 68.7876V59.2125C115.901 51.4455 109.604 45.1492 101.837 45.1492H92.2622C84.4952 45.1492 78.1988 51.4455 78.1988 59.2125V68.7876C78.1988 76.5545 84.4952 82.8509 92.2622 82.8509ZM116.499 59.2125V68.7876C116.499 76.5545 122.795 82.8509 130.562 82.8509H140.137C147.904 82.8509 154.201 76.5545 154.201 68.7876V59.2125C154.201 51.115 160.765 44.5507 168.863 44.5507H178.438C186.205 44.5507 192.501 38.2543 192.501 30.4874V20.9123C192.501 12.8148 199.065 6.25052 207.163 6.25052H216.738C224.505 6.25052 230.801 -0.0458603 230.801 -7.81284V-17.3879C230.801 -25.1549 224.505 -31.4512 216.738 -31.4512H207.163C199.396 -31.4512 193.099 -25.1549 193.099 -17.3879V-7.81284C193.099 0.284649 186.535 6.84896 178.438 6.84896H168.863C161.096 6.84896 154.799 13.1453 154.799 20.9123V30.4874C154.799 38.5849 148.235 45.1492 140.137 45.1492H130.562C122.795 45.1492 116.499 51.4455 116.499 59.2125ZM192.8 33.4488C191.627 39.1702 187.12 43.6764 181.399 44.8499C187.12 46.0234 191.627 50.5297 192.8 56.2511C193.974 50.5297 198.48 46.0234 204.201 44.8499C198.48 43.6764 193.974 39.1702 192.8 33.4488ZM192.501 59.2125C192.501 51.4455 186.205 45.1492 178.438 45.1492H168.863C161.096 45.1492 154.799 51.4455 154.799 59.2125V68.7876C154.799 76.5545 161.096 82.8509 168.863 82.8509H178.438C186.205 82.8509 192.501 76.5545 192.501 68.7876V59.2125ZM165.901 83.1501C160.18 81.9766 155.673 77.4704 154.5 71.749C153.326 77.4704 148.82 81.9766 143.099 83.1501C148.82 84.3236 153.326 88.8299 154.5 94.5513C155.673 88.8299 160.18 84.3236 165.901 83.1501ZM127.601 83.1501C121.88 81.9766 117.373 77.4704 116.2 71.749C115.026 77.4704 110.52 81.9766 104.799 83.1501C110.52 84.3236 115.026 88.8299 116.2 94.5513C117.373 88.8299 121.88 84.3236 127.601 83.1501ZM231.1 71.749C229.927 77.4704 225.421 81.9766 219.699 83.1501C225.421 84.3236 229.927 88.8299 231.1 94.5513C232.274 88.8299 236.78 84.3236 242.502 83.1501C236.78 81.9766 232.274 77.4704 231.1 71.749Z'/%3E%3C/svg%3E"); + } + @include light { + background: squiggle(#ffffff), linear-gradient(45deg, $card-background-light, $card-background-light, #bbe7ca); + } + @include dark { + @include size(md) { + background: squiggle(#04ae41), linear-gradient(45deg, $card-background-dark, $card-background-dark, #0d5c28); + } + @include sizeNot(md) { + background: linear-gradient(45deg, $card-background-dark, $card-background-dark, #0d5c28); + } + } + @include theme { + background-repeat: no-repeat, no-repeat; + background-position: right, right; + background-size: contain; + } + } + + .members-banner { + .members-banner-title { + white-space: nowrap; + @include color-theme(#646466, #c8c8c8); + } + + .members-banner-border-right { + border-right: 1px solid var(--tile-border-color); + } + + .online-indicator { + width: 8px; + height: 8px; + border-radius: 4px; + @include background-theme($primary-color-light, $primary-color-dark); + animation: online-indicator-blinking 1600ms alternate infinite; + @include light { + --online-indicator-opacity-lower: 0.1; + } + @include dark { + --online-indicator-opacity-lower: 0.4; + } + @keyframes online-indicator-blinking { + from { + opacity: 1.0; + } + to { + opacity: var(--online-indicator-opacity-lower); + } + } + } + } + + 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; + } + } + + a { + @include theme { + color: inherit; + } + } + + a[data-user-id] { + @include color-theme($secondary-color-light, $secondary-color-dark); + } + + .tile-palette-primary { + @include light { + --tile-border-color: #{$border-color-primary-light}; + } + @include dark { + --tile-border-color: #{$border-color-primary-dark}; + } + } + + .tile-palette-secondary { + @include light { + --tile-border-color: #{$border-color-secondary-light}; + } + @include dark { + --tile-border-color: #{$border-color-secondary-dark}; + } + } + + .nav-pills { + @include theme { + border-bottom-color: var(--tile-border-color); + } + + .nav-link { + transition: none; + + @include theme { + color: inherit; + } + + &[href] { + cursor: pointer; + } + + &.active { + @include color-theme(black, white); + } + } + + .nav-link.active { + @include light { + border-bottom-color: $primary-color-light; + } + @include dark { + border-bottom-color: $primary-color-dark; + } + } + } + + .text-muted { + @include light { + color: #6c757d !important; + } + @include dark { + color: #8f9ba5 !important; + } + } + + .microblog { + .media > .media-body { + .media-heading a { + @include dark { + color: $secondary-color-dark; + } + } + + .microblog-comments { + .media a.username { + @include dark { + color: $secondary-color-dark; + } + } + + .microblog-input { + @include background-theme($body-background-light, $body-background-dark); + + textarea { + border: none; + @include background-theme($card-background-light, $card-background-dark); + } + } + + .microblog-comment-action { + color: inherit; + } + } + } + + .microblog-actions .btn { + @include color-theme(#6c757d, #8f9ba5); + } + } + + .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); + } + + .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); + } + } + } + + .card-reputation { + img, svg { + width: 40px; + height: 40px; + } + + .progress { + width: 70%; + } + + .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); + + &: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%); + } + } + } + + a.ranking-username { + @include color-theme(#646466, #acacac); + } + + .long-name { + display: none; + @include size(intermediate) { + display: initial; + } + } + + .short-name { + display: initial; + @include size(intermediate) { + display: none; + } + } + } + + #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; + padding: 3px; + border-radius: 7px; + @include background-theme($card-background-light, $card-background-dark); + + .user-avatar { + max-width: 100%; + border-radius: 4px; + } + } + + .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-primary-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; + border-bottom: 1px solid var(--tile-border-color); + + .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; + } + + .topic-created { + font-size: 0.75em; + @include color-theme(#6c757d, #8f9ba5); + } + } + + .recent-activity { + margin: 10px 0 0 10px; + font-size: 0.8em; + border-left: 1px solid var(--tile-border-color); + + @include media-breakpoint-down(md) { + border-left: none; + margin-left: 0; + } + } + } + + .microblog-wrap { + &:after { + @include dark { + background: linear-gradient( + to bottom, + rgba(255, 255, 255, 0) 0, + $opposite-color-dark 65% + ); + } + } + } + + .recent-activity a, + .interesting-topics a.category, + { + @include color-theme(#005b12, #bdd5c3); + + &:hover { + @include color-theme(#002107, $primary-color-dark); + } + } + + footer { + .scroll-top { + @include color-theme($primary-color-light, $primary-color-dark); + @include background-theme($primary-background-light, $primary-background-dark); + } + + .footer-inner { + .footer-column { + @include light { + border-color: $border-color-secondary-dark; + } + @include dark { + border-color: $border-color-secondary-dark; + } + } + } + } + + pre, code { + @include background-theme($body-background-light, $body-background-dark); + } +} diff --git a/resources/views/home_modern.twig b/resources/views/home_modern.twig new file mode 100644 index 0000000000..c5c1f7c731 --- /dev/null +++ b/resources/views/home_modern.twig @@ -0,0 +1,267 @@ +{% extends 'layout' %} +{% block title %}Programowanie: serwis dla programistów{% endblock %} +{% block description %}Serwis poświęcony programowaniu. Posiadamy 1 mln postów na forum dyskusyjnym, oferty pracy, artykuły i mikroblogi.{% endblock %} +{% block keywords %}programowanie, programista, c++, c, c#, php, delphi, pascal, python, javascript, node.js, css, sass, html, kurs, mysql, mongodb, postgresql, oracle{% endblock %} + +{% import 'components.modals' as modal %} + +{% block container %} + {{ render_block('homepage_banner') }} + +
+
+
+ 4programmers +
+
Największa społeczność programistyczna w Polsce
+
+
+
+
+
+ Członkowie +
+ {{ homepageMembers.usersTotal }} +
+
+ + + Online + +
+ {{ homepageMembers.usersOnline }} +
+
+ Gości +
+ {{ homepageMembers.guestsOnline }} +
+
+
+
+
+
+
+

+ Co nowego na forum? +

+
+
+
+
+ + +
+
+
+ {% for topic in interesting %} +
+ + {{ topic.views }} + + {{ declination(topic.views, ['wyświetlenie', 'wyświetlenia', 'wyświetleń'], true) }} + + + +
+ + {{ topic.title }} + + + {{ topic.forum }} + + + {{ topic.last_post_created_at|format_date }} + +
+
+ {% endfor %} +
+ +
+ {% for topic in newest %} +
+ + {{ topic.views }} + + {{ declination(topic.views, ['wyświetlenie', 'wyświetlenia', 'wyświetleń'], true) }} + + + +
+ + {{ topic.title }} + + + {{ topic.forum }} + + + {{ topic.last_post_created_at|format_date }} + +
+
+ {% endfor %} +
+
+
+
+ +
+
    +
  • + + 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 %} +
+
+ +
+ {{ user_avatar(activity.user.photo, activity.user.name) }} +
+ +
+
+

{{ activity.headline|raw }}

+ {{ activity.created_at|format_date }} + {{ activity.excerpt }} +
+
+ {% endfor %} +
+
+
+
+
+
+
+ +
+

+ Popularne wpisy na mikroblogu +

+ + +
+ + +
+ +
+ +
+
+ + +{% endblock %}