From 289cb5a8a459444f76100bc94d070d90a19b4281 Mon Sep 17 00:00:00 2001 From: Kevin Koech Date: Fri, 24 Nov 2023 16:40:21 +0300 Subject: [PATCH] Make single event --- .../assets/css/dist/pages/events.css.map | 1 + .../assets/css/dist/pages/single_event.css | 210 ++++++++++++++++++ .../css/dist/pages/single_event.css.map | 1 + .../assets/css/src/pages/single_event.scss | 94 ++++++++ wp-content/themes/academyAfrica/functions.php | 1 + .../academyAfrica/includes/widgets/events.php | 102 +++++---- .../themes/academyAfrica/single-event.php | 84 +++++++ 7 files changed, 445 insertions(+), 48 deletions(-) create mode 100644 wp-content/themes/academyAfrica/assets/css/dist/pages/events.css.map create mode 100644 wp-content/themes/academyAfrica/assets/css/dist/pages/single_event.css create mode 100644 wp-content/themes/academyAfrica/assets/css/dist/pages/single_event.css.map create mode 100644 wp-content/themes/academyAfrica/assets/css/src/pages/single_event.scss create mode 100644 wp-content/themes/academyAfrica/single-event.php diff --git a/wp-content/themes/academyAfrica/assets/css/dist/pages/events.css.map b/wp-content/themes/academyAfrica/assets/css/dist/pages/events.css.map new file mode 100644 index 00000000..9e29a98f --- /dev/null +++ b/wp-content/themes/academyAfrica/assets/css/dist/pages/events.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../../src/abstracts/_reset.scss","../../src/abstracts/_buttons.scss","../../src/abstracts/_colors.scss","../../src/pages/events.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaC;EACA;EACA;EACA;EACA;EACA;;;AAED;AACA;AAAA;EAEC;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;;;AAED;AAAA;EAEC;EACA;;;AAED;EACC;EACA;;;AC5CD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OC0CmB;EDzCnB;EACA;EACA;;AAEA;EACE;EACA,OCmCiB;;ADhCnB;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE,YCbkB;EDclB;;AACA;EACE,YCrBe;EDsBf,OCjBgB;;ADqBpB;EACE,YCxCgB;EDyChB;;AACA;EACE,YClDa;EDmDb,OC5Cc;;ADgDlB;EACE,YCpCiB;EDqCjB;;AACA;EACE,YClCgB;EDmChB,OCVe;EDWf;;AAIJ;EACE,YCtDgB;EDuDhB,OClDgB;EDmDhB;EACA;;;AEvEJ;EACE","file":"events.css"} \ No newline at end of file diff --git a/wp-content/themes/academyAfrica/assets/css/dist/pages/single_event.css b/wp-content/themes/academyAfrica/assets/css/dist/pages/single_event.css new file mode 100644 index 00000000..b79a5009 --- /dev/null +++ b/wp-content/themes/academyAfrica/assets/css/dist/pages/single_event.css @@ -0,0 +1,210 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} + +body { + line-height: 1; +} + +ol, ul { + list-style: none; +} + +blockquote, q { + quotes: none; +} + +blockquote:before, blockquote:after, +q:before, q:after { + content: ""; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +.button { + text-transform: uppercase; + font-weight: 800; + line-height: 19px; + letter-spacing: 1.6px; + font-size: 16px; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + color: #FFFFFF; + border: none; + border-radius: 0; + cursor: pointer; +} +.button .icon { + font-size: 16px; + color: #FFFFFF; +} +.button-icon { + display: flex; + align-items: center; + justify-content: center; + gap: 8px; +} +.button.small { + padding: 8px 16px; +} +.button.medium { + padding: 12px 16px; +} +.button.large { + padding: 24px; +} +.button.cta { + background: #ED1C24; + border: 1px solid #ED1C24; +} +.button.cta:hover { + background: #FEECED; + color: #ED1C24; +} +.button.primary { + background: #0C1A81; + border: 1px solid #0C1A81; +} +.button.primary:hover { + background: #EFF0FD; + color: #0C1A81; +} +.button.secondary { + background: #FEECED; + border: 1px solid #FEECED; +} +.button.secondary:hover { + background: #ED1C24; + color: #FFFFFF; + border: 1px solid #ED1C24; +} +.button.disabled { + background: #CCCFDA; + color: #616582; + border: 1px solid #CCCFDA; + cursor: not-allowed; +} + +.single-page-event { + max-width: 1920px; + padding: 20px; +} +.single-page-event .image-container { + position: relative; + width: 100%; + height: 300px; /* Set your specific height here */ + overflow: hidden; + margin: 50px 0; +} +.single-page-event .featured-image { + width: 100%; + height: 100%; + object-fit: cover; /* This property crops the image while maintaining its aspect ratio */ +} +.single-page-event .divider { + height: 0.5px; + background: #a9a9a9; + margin: 40px 0; + border: none; +} +.single-page-event .custom-data p { + color: #000; + font-family: Open Sans; + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: 24px; /* 133.333% */ + text-transform: uppercase; + margin-bottom: 20px; +} +.single-page-event .custom-data p .speaker { + color: var(--shades-black, #000); + font-family: Open Sans; + font-size: 18px; + font-style: normal; + font-weight: 700; + line-height: 24px; /* 133.333% */ + letter-spacing: -0.36px; +} +.single-page-event .content { + color: var(--shades-black, #000); + font-family: Open Sans; + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: 28px; /* 155.556% */ +} +.single-page-event .linked-post .title { + color: var(--primary-700, #0c1a81); + font-family: Open Sans; + font-size: 18px; + font-style: normal; + font-weight: 700; + line-height: 24px; /* 133.333% */ +} +.single-page-event .linked-post .name { + color: var(--shades-black, #000); + font-family: Open Sans; + font-size: 18px; + font-style: normal; + font-weight: 700; + line-height: 24px; /* 133.333% */ + letter-spacing: -0.36px; +} +.single-page-event .linked-post .description { + color: var(--shades-black, #000); + font-family: Open Sans; + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: 28px; /* 155.556% */ +} +.single-page-event .linked-post * { + margin-top: 32px; +} + +@media (min-width: 1440px) { + .single-page-event { + padding: 20px 148px; + } +} +@media (min-width: 1920px) { + .single-page-event { + padding: 20px 388px; + } +} + +/*# sourceMappingURL=single_event.css.map */ diff --git a/wp-content/themes/academyAfrica/assets/css/dist/pages/single_event.css.map b/wp-content/themes/academyAfrica/assets/css/dist/pages/single_event.css.map new file mode 100644 index 00000000..b8c5c6c5 --- /dev/null +++ b/wp-content/themes/academyAfrica/assets/css/dist/pages/single_event.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../../src/abstracts/_reset.scss","../../src/abstracts/_buttons.scss","../../src/abstracts/_colors.scss","../../src/pages/single_event.scss","../../src/abstracts/_mixins.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaC;EACA;EACA;EACA;EACA;EACA;;;AAED;AACA;AAAA;EAEC;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;;;AAED;AAAA;EAEC;EACA;;;AAED;EACC;EACA;;;AC5CD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OC0CmB;EDzCnB;EACA;EACA;;AAEA;EACE;EACA,OCmCiB;;ADhCnB;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE,YCbkB;EDclB;;AACA;EACE,YCrBe;EDsBf,OCjBgB;;ADqBpB;EACE,YCxCgB;EDyChB;;AACA;EACE,YClDa;EDmDb,OC5Cc;;ADgDlB;EACE,YCpCiB;EDqCjB;;AACA;EACE,YClCgB;EDmChB,OCVe;EDWf;;AAIJ;EACE,YCtDgB;EDuDhB,OClDgB;EDmDhB;EACA;;;AEvEJ;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIN;EACE;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;;AC/DE;EDqEN;IACE;;;AClEI;EDsEN;IACE","file":"single_event.css"} \ No newline at end of file diff --git a/wp-content/themes/academyAfrica/assets/css/src/pages/single_event.scss b/wp-content/themes/academyAfrica/assets/css/src/pages/single_event.scss new file mode 100644 index 00000000..0c611507 --- /dev/null +++ b/wp-content/themes/academyAfrica/assets/css/src/pages/single_event.scss @@ -0,0 +1,94 @@ +@use "../abstracts/" as *; + +.single-page-event { + max-width: 1920px; + padding: 20px; + .image-container { + position: relative; + width: 100%; + height: 300px; /* Set your specific height here */ + overflow: hidden; + margin: 50px 0; + } + .featured-image { + width: 100%; + height: 100%; + object-fit: cover; /* This property crops the image while maintaining its aspect ratio */ + } + .divider { + height: 0.5px; + background: #a9a9a9; + margin: 40px 0; + border: none; + } + .custom-data { + p { + color: #000; + font-family: Open Sans; + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: 24px; /* 133.333% */ + text-transform: uppercase; + margin-bottom: 20px; + & .speaker { + color: var(--shades-black, #000); + font-family: Open Sans; + font-size: 18px; + font-style: normal; + font-weight: 700; + line-height: 24px; /* 133.333% */ + letter-spacing: -0.36px; + } + } + } + .content { + color: var(--shades-black, #000); + font-family: Open Sans; + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: 28px; /* 155.556% */ + } + .linked-post { + .title { + color: var(--primary-700, #0c1a81); + font-family: Open Sans; + font-size: 18px; + font-style: normal; + font-weight: 700; + line-height: 24px; /* 133.333% */ + } + .name { + color: var(--shades-black, #000); + font-family: Open Sans; + font-size: 18px; + font-style: normal; + font-weight: 700; + line-height: 24px; /* 133.333% */ + letter-spacing: -0.36px; + } + .description { + color: var(--shades-black, #000); + font-family: Open Sans; + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: 28px; /* 155.556% */ + } + * { + margin-top: 32px; + } + } +} + +@include media-breakpoint-up(large) { + .single-page-event { + padding: 20px 148px; + } +} +@include media-breakpoint-up(xlarge) { + .single-page-event { + padding: 20px 388px; + } +} diff --git a/wp-content/themes/academyAfrica/functions.php b/wp-content/themes/academyAfrica/functions.php index a7ebd054..cccf8590 100644 --- a/wp-content/themes/academyAfrica/functions.php +++ b/wp-content/themes/academyAfrica/functions.php @@ -32,6 +32,7 @@ function child_theme_configurator_css() function my_theme_enqueue_styles() { wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/assets/css/dist/main.css', array('hello-elementor', 'hello-elementor', 'hello-elementor-theme-style'), '6.3.11'); + wp_enqueue_style('single-event', get_stylesheet_directory_uri() . '/assets/css/dist/pages/single_event.css', array(), '6.3.11'); } add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles'); diff --git a/wp-content/themes/academyAfrica/includes/widgets/events.php b/wp-content/themes/academyAfrica/includes/widgets/events.php index fa0e4980..03469c12 100644 --- a/wp-content/themes/academyAfrica/includes/widgets/events.php +++ b/wp-content/themes/academyAfrica/includes/widgets/events.php @@ -105,6 +105,7 @@ public function get_events($args) 'image' => get_the_post_thumbnail_url(get_the_ID(), 'thumbnail'), 'country_code' => $african_countries[get_post_meta(get_the_ID(), 'country', true)], 'language' => get_post_meta(get_the_ID(), 'language', true), + 'post_url' => get_permalink(get_the_ID()), ); $result[] = $post_data; @@ -375,34 +376,37 @@ protected function render() $time = $event["time"]; $is_virtual = $event["is_virtual"]; ?> -
- <? echo $title ?> - -

- -

-

- -

-
-

- -

-

- -

+ "> +
+ <? echo $title ?> -
-
-

- +

+

-

- - +

+

+
+

+ +

+

+ +

+ +
+
+

+ +

+

+ + +

+
-
+ + -
- <? echo $title ?> - -

- -

-

- -

-
-

- -

-

- -

+ "> +
+ <? echo $title ?> -
-
-

- +

+

-

- - +

+

+
+

+ +

+

+ +

+ +
+
+

+ +

+

+ + +

+
-
+ +
+ ID; + $post_title = $post_array->post_title; + $post_content = $post_array->post_content; + $featured_image_url = get_the_post_thumbnail_url($post_id, 'full'); + $is_virtual = get_post_meta($post_id, 'is_virtual', true) ? "🖥" : ""; + $user_data = get_userdata(get_post_meta($post_id, 'speaker', true)); + $speaker = $user_data->display_name; + $raw_date = get_post_meta($post_id, 'date', true); + $date = date_format(date_create($raw_date), 'd/m/Y'); + $time = str_replace("Africa/", "", get_post_meta($post_id, 'time', true) . ' ' . get_post_meta($post_id, 'timezone', true)); + $language = get_post_meta($post_id, 'language', true); + ?> +

+ +

+
+ <? echo $featured_image_url ?> +
+
+

+ +

+

+ +

+

+ +

+

+ +

+ +
+
+

+ +

+
+

The speaker

+ +

+

+ About the instructor: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus. Maecenas eget condimentum velit, sit amet feugiat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent auctor purus luctus enim egestas, ac scelerisque ante pulvinar. Donec ut rhoncus ex. Suspendisse ac rhoncus nisl, eu tempor urna. Curabitur vel bibendum lorem. Morbi convallis convallis diam sit amet lacinia. Aliquam in elementum tellus. +

+
+
+

The Organisation

+ +

+

+ About the instructor: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus. Maecenas eget condimentum velit, sit amet feugiat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent auctor purus luctus enim egestas, ac scelerisque ante pulvinar. Donec ut rhoncus ex. Suspendisse ac rhoncus nisl, eu tempor urna. Curabitur vel bibendum lorem. Morbi convallis convallis diam sit amet lacinia. Aliquam in elementum tellus. +

+
+ + +
+ + \ No newline at end of file