From 8007442f67a5f82c2278b236d11763a28b651d0b Mon Sep 17 00:00:00 2001 From: Art Date: Thu, 9 Jul 2020 19:18:24 +0200 Subject: [PATCH 1/4] Events page changes --- .../pages/_community-events-and-meetups.scss | 154 ++++++++++++++++-- 1 file changed, 144 insertions(+), 10 deletions(-) diff --git a/assets/sass/pages/_community-events-and-meetups.scss b/assets/sass/pages/_community-events-and-meetups.scss index c4ab46ae..ff794103 100644 --- a/assets/sass/pages/_community-events-and-meetups.scss +++ b/assets/sass/pages/_community-events-and-meetups.scss @@ -1,3 +1,105 @@ +body { + overflow-x: unset; + height: unset; +} + +.community-events-quick-links { + position: sticky; + top:116px; + z-index: 9; + + background-color: $c-gray-base-light; + + .contents-container { + padding-top: 130px; + } + .in-page-menus-container { + position: relative; + display: block; + + margin-top: 40px; + + .menus-wrap { + position: relative; + display: flex; + } + + .menu-item { + position: relative; + display: inline-block; + + flex: 1; + + background-color: $c-gray-mid-light; + border-right: 1px solid $c-gray-light; + + background-color: #0075a8; + + &:last-child { + border-right: 0; + } + + a { + position: relative; + display: block; + + color: #fff; + font-family: 'Poppins'; + font-size: 12px; + font-weight: 800; + text-transform: uppercase; + letter-spacing: .5px; + line-height: 50px; + text-align: center; + } + + &:hover, + &.active { + background-color: $c-blue; + + a { + color: #fff; + } + } + } + } + + @media (max-width: 575.98px) { + padding-top: 25px; + + .in-page-menus-container { + position: absolute; + + margin-top: 50px; + padding-right: $mobile-side-space; + padding-left: $mobile-side-space; + + .menus-wrap { + flex-wrap: wrap; + } + .menu-item { + flex: 0 0 50%; + + border-bottom: 1px solid $c-gray-base-light; + + &:last-child { + border-right: 1px solid $c-gray-light; + } + } + } + } + @media (min-width: 576px) and (max-width: 767.98px) { + } + @media (min-width: 768px) and (max-width: 991.98px) { + } + @media (min-width: 992px) and (max-width: 1199.98px) { + .lastest-container { + padding-right: $mobile-side-space; + padding-left: $mobile-side-space; + } + } +} + .community-events-and-meetups-screen1 { .set-ground { z-index: -1; @@ -23,8 +125,8 @@ .texts-wrap { z-index: 1; - margin-top: 130px; - margin-bottom: 130px; + margin-top: 30px; + margin-bottom: 30px; .title-label { margin-bottom: 20px; @@ -55,7 +157,7 @@ .title-label { margin-bottom: 14px; - + font-size: 2em; } @@ -100,7 +202,7 @@ .title-label { margin-bottom: 20px; - + font-size: 2em; } @@ -123,7 +225,7 @@ .title-label { margin-bottom: 20px; - + font-size: 2.4em; } @@ -147,7 +249,7 @@ .title-label { margin-bottom: 20px; - + font-size: 2.8em; } @@ -437,7 +539,7 @@ .community-events-and-meetups-screen3 { .texts-container { - padding-top: 150px; + padding-top: 50px; padding-bottom: 40px; text-align: center; @@ -459,8 +561,17 @@ .card-container { height: 100%; - margin-bottom: 30px; + + &.summit-event-card { + height: auto; + + .text-label { + font-size: 18px; + max-height: 100%; + -webkit-line-clamp: inherit; + } + } } .card-item { @@ -472,6 +583,15 @@ border-radius: 1em; + .thumbnail-image { + width: 100%; + } + + .text-subtitle { + color: #78c9cf; + margin-bottom: 10px; + } + .thumbnail-wrap { position: relative; display: inline-block; @@ -553,13 +673,21 @@ } } + .featured-event-card { + .card-item { + .text-label { + font-size: 18px; + } + } + } + @media (max-width: 575.98px) { .texts-container { padding-top: 50px; padding-right: 0; padding-left: 0; } - + .cards-container { padding-right: $mobile-side-space; padding-left: $mobile-side-space; @@ -1104,7 +1232,7 @@ background-position: left center; } - > img, + > img, .thumbnail { position: relative; display: inline-block; @@ -1512,6 +1640,12 @@ } } +.community-events-and-meetups-screen8 { + .contents-container { + padding-top: 150px; + } +} + .community-events-and-meetups-view { .set-ground { From da61d178b61f96117cde302c93f2b40f2ddb532f Mon Sep 17 00:00:00 2001 From: opassion <13392489+opassion@users.noreply.github.com> Date: Thu, 5 Nov 2020 15:03:59 +0000 Subject: [PATCH 2/4] Add event-item partial template --- layouts/partials/event-item.html | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 layouts/partials/event-item.html diff --git a/layouts/partials/event-item.html b/layouts/partials/event-item.html new file mode 100644 index 00000000..a331e90d --- /dev/null +++ b/layouts/partials/event-item.html @@ -0,0 +1,29 @@ +
+ +
+ {{ .title }} +
+
+
+
{{ .title }}
+
+

+ + {{ .dateText }} +

+
+
+
+
+ +
+
+ +
From b9e5baaf3796411f5d4e2397a560720692246b6e Mon Sep 17 00:00:00 2001 From: opassion <13392489+opassion@users.noreply.github.com> Date: Fri, 6 Nov 2020 08:49:36 +0000 Subject: [PATCH 3/4] Update subtitle style and add time field --- assets/sass/pages/_community-events-and-meetups.scss | 9 +++++++++ layouts/partials/event-item.html | 6 +++++- 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/assets/sass/pages/_community-events-and-meetups.scss b/assets/sass/pages/_community-events-and-meetups.scss index 2ce8555e..4d6203c1 100644 --- a/assets/sass/pages/_community-events-and-meetups.scss +++ b/assets/sass/pages/_community-events-and-meetups.scss @@ -546,6 +546,11 @@ body { .title-label { color: $c-blue-dark1; + + &.title-sublabel { + color: $c-blue; + margin-bottom: 50px; + } } } @@ -553,6 +558,10 @@ body { padding-right: 0; padding-bottom: 150px; padding-left: 0; + + &.future-cards { + padding-bottom: 75px; + } } .cards-wrap { diff --git a/layouts/partials/event-item.html b/layouts/partials/event-item.html index a331e90d..a270b51d 100644 --- a/layouts/partials/event-item.html +++ b/layouts/partials/event-item.html @@ -1,7 +1,7 @@
- +
{{ .title }}
@@ -16,6 +16,10 @@ /> {{ .dateText }}

+

+ + {{ .timeText}} +

From 7a16da5da7fe87ef2cc76970257343082ea1a47a Mon Sep 17 00:00:00 2001 From: opassion <13392489+opassion@users.noreply.github.com> Date: Mon, 9 Nov 2020 04:21:03 +0000 Subject: [PATCH 4/4] Move event-item partial to website --- .../pages/_community-events-and-meetups.scss | 107 ++++++++++++------ layouts/partials/event-item.html | 33 ------ 2 files changed, 73 insertions(+), 67 deletions(-) delete mode 100644 layouts/partials/event-item.html diff --git a/assets/sass/pages/_community-events-and-meetups.scss b/assets/sass/pages/_community-events-and-meetups.scss index 4d6203c1..b9f051aa 100644 --- a/assets/sass/pages/_community-events-and-meetups.scss +++ b/assets/sass/pages/_community-events-and-meetups.scss @@ -5,7 +5,7 @@ body { .community-events-quick-links { position: sticky; - top:116px; + top: 116px; z-index: 9; background-color: $c-gray-base-light; @@ -44,11 +44,11 @@ body { display: block; color: #fff; - font-family: 'Poppins'; + font-family: "Poppins"; font-size: 12px; font-weight: 800; text-transform: uppercase; - letter-spacing: .5px; + letter-spacing: 0.5px; line-height: 50px; text-align: center; } @@ -110,7 +110,7 @@ body { } .contents-wrap { background-color: $c-blue; - background-image: url('/imgs/community/events-and-meetups/screen1-background.png'); + background-image: url("/imgs/community/events-and-meetups/screen1-background.png"); background-size: cover; background-repeat: no-repeat; background-position: center; @@ -166,7 +166,7 @@ body { line-height: 1.5; } .description-label { - font-size: .95em; + font-size: 0.95em; } } } @@ -316,11 +316,10 @@ body { height: 180px; background-position: center; background-size: cover; - background-image: url('/imgs/Events_default.jpg'); + background-image: url("/imgs/Events_default.jpg"); margin-right: 30px; - .thumbnail { position: relative; display: inline-block; @@ -379,8 +378,8 @@ body { margin: 1.5em 0; - border: 0px none rgba(#fff, .25); - border-top: 1px solid rgba(#fff, .25); + border: 0px none rgba(#fff, 0.25); + border-top: 1px solid rgba(#fff, 0.25); } .description-label { @@ -554,6 +553,47 @@ body { } } + .user-container { + position: relative; + display: flex; + flex-wrap: nowrap; + align-items: center; + margin-top: 10px; + + .thumbnail-container { + position: relative; + flex: 0 0 50px; + height: 50px; + width: 50px; + margin-right: 20px; + background-color: rgba($c-gray-mid-light, 0.5); + border-radius: 50%; + } + + .thumbnail { + border-radius: 50%; + width: 100%; + height: 100%; + object-fit: cover; + } + + .information-container { + position: relative; + display: inline-block; + flex: 1; + } + + .label { + margin-bottom: 0; + color: #fff; + line-height: 1.5; + } + + .name-label { + color: $c-emerald; + } + } + .cards-container { padding-right: 0; padding-bottom: 150px; @@ -644,7 +684,7 @@ body { width: 100%; height: 1px; - background-color: rgba(#fff, .1); + background-color: rgba(#fff, 0.1); } .thumbnail { @@ -662,7 +702,7 @@ body { margin-bottom: 0; color: #fff; - font-family: 'Poppins'; + font-family: "Poppins"; font-size: 22px; font-weight: 400; line-height: 1.455; @@ -675,8 +715,8 @@ body { margin: 1.5em 0; - border: 0px none rgba(#fff, .25); - border-top: 1px solid rgba(#fff, .25); + border: 0px none rgba(#fff, 0.25); + border-top: 1px solid rgba(#fff, 0.25); } .date-label { @@ -781,7 +821,6 @@ body { padding-top: 90px; } - .cards-wrap { padding-right: 30px; padding-left: 30px; @@ -838,7 +877,7 @@ body { } .description-label { - color: rgba($c-blue-dark1, .75); + color: rgba($c-blue-dark1, 0.75); &:last-child { margin-bottom: 0; @@ -855,7 +894,7 @@ body { } .list-container { - >.buttons-container { + > .buttons-container { margin-top: 80px; margin-bottom: 80px; @@ -869,7 +908,7 @@ body { margin-top: 40px; padding-top: 40px; - border-top: 1px solid rgba($c-blue-dark1, .25); + border-top: 1px solid rgba($c-blue-dark1, 0.25); &.hidden { display: none; @@ -935,7 +974,7 @@ body { .texts-container { padding-left: $mobile-side-space; - padding-bottom: 20px;; + padding-bottom: 20px; .title-label { margin-bottom: 15px; @@ -1050,7 +1089,7 @@ body { } .description-label { - color: rgba($c-gray, .75); + color: rgba($c-gray, 0.75); font-weight: 300; &:last-child { @@ -1066,7 +1105,8 @@ body { text-align: left; } - .list-wrap {} + .list-wrap { + } .list-item { margin-bottom: 40px; @@ -1077,7 +1117,7 @@ body { .title-label { color: $c-blue-dark1; - font-family: 'Poppins'; + font-family: "Poppins"; font-size: 22px; font-weight: 300; line-height: 1.455; @@ -1106,7 +1146,6 @@ body { } .contents-container.half.background-base-gray-side { - &:before, &:after { height: 150px; @@ -1148,7 +1187,7 @@ body { } } @media (min-width: 576px) and (max-width: 767.98px) { - .texts-container { + .texts-container { padding-top: 60px; .buttons-container { @@ -1189,7 +1228,7 @@ body { } .description-label { - color: rgba(#fff, .75); + color: rgba(#fff, 0.75); &:last-child { margin-bottom: 0; @@ -1230,10 +1269,10 @@ body { margin-right: 30px; outline: none; - @include transition(opacity .25s); + @include transition(opacity 0.25s); &[aria-hidden="true"] { - opacity: .5; + opacity: 0.5; } &[aria-hidden="false"] { @@ -1321,8 +1360,8 @@ body { margin: 1.5em 0; - border: 0px none rgba(#fff, .25); - border-top: 1px solid rgba(#fff, .25); + border: 0px none rgba(#fff, 0.25); + border-top: 1px solid rgba(#fff, 0.25); } .description-label { @@ -1368,7 +1407,7 @@ body { cursor: pointer; - @include transition(background-color .25s); + @include transition(background-color 0.25s); @media (max-width: 575.98px) { flex: 0 0 45px; @@ -1398,7 +1437,7 @@ body { stroke-linejoin: round; stroke-miterlimit: 10; - @include transition(stroke .25s); + @include transition(stroke 0.25s); } } @@ -1676,7 +1715,6 @@ body { } } - .community-events-and-meetups-view { .set-ground { z-index: -1; @@ -1729,7 +1767,7 @@ body { text-align: center; - >div { + > div { margin-right: 50px; padding-top: 7px; padding-right: 50px; @@ -1859,7 +1897,8 @@ body { width: 100%; - .share-wrap {} + .share-wrap { + } ul { text-align: right; @@ -1875,7 +1914,7 @@ body { margin-right: 2px; padding: 8px; - background-color: rgba($c-blue-gray, .5); + background-color: rgba($c-blue-gray, 0.5); border-radius: 5px; &:last-child { diff --git a/layouts/partials/event-item.html b/layouts/partials/event-item.html deleted file mode 100644 index a270b51d..00000000 --- a/layouts/partials/event-item.html +++ /dev/null @@ -1,33 +0,0 @@ -
- -
- {{ .title }} -
-
-
-
{{ .title }}
-
-

- - {{ .dateText }} -

-

- - {{ .timeText}} -

-
-
-
-
- -
-
- -