From cab1978c3fa7f59cbcf786c0d5401832d526b2bd Mon Sep 17 00:00:00 2001 From: James Hunt <10615884+thetwopct@users.noreply.github.com> Date: Thu, 22 Aug 2024 23:20:05 +0700 Subject: [PATCH] Update Speakers Block design Signed-off-by: James Hunt <10615884+thetwopct@users.noreply.github.com> --- .../includes/speaker-block.php | 301 ++++++++------ .../themes/lfevents/src/js/modal.js | 6 +- .../src/scss/blocks/_speakers-block-2.scss | 393 ++++++++++-------- .../lfevents/src/scss/components/_modal.scss | 23 - 4 files changed, 412 insertions(+), 311 deletions(-) diff --git a/web/wp-content/plugins/speakers-block-2/includes/speaker-block.php b/web/wp-content/plugins/speakers-block-2/includes/speaker-block.php index b5fe7c40..047f432a 100644 --- a/web/wp-content/plugins/speakers-block-2/includes/speaker-block.php +++ b/web/wp-content/plugins/speakers-block-2/includes/speaker-block.php @@ -10,14 +10,15 @@ global $post; $speaker_id = get_the_ID(); $speaker_slug = $post->post_name; +$job_title = get_post_meta( $speaker_id, 'lfes_speaker_job_title', true ); +$company = get_post_meta( $speaker_id, 'lfes_speaker_company', true ); +$company_logo = get_post_meta( $speaker_id, 'lfes_speaker_company_logo', true ); $linkedin = get_post_meta( $speaker_id, 'lfes_speaker_linkedin', true ); $twitter = get_post_meta( $speaker_id, 'lfes_speaker_twitter', true ); $github = get_post_meta( $speaker_id, 'lfes_speaker_github', true ); $website = get_post_meta( $speaker_id, 'lfes_speaker_website', true ); -$job_title = get_post_meta( $speaker_id, 'lfes_speaker_job_title', true ); -$company = get_post_meta( $speaker_id, 'lfes_speaker_company', true ); -$company_logo = get_post_meta( $speaker_id, 'lfes_speaker_company_logo', true ); $content = get_the_content(); +$fallback_image_id = get_option( 'lfe-generic-speaker-image-id' ) ?? null; if ( $sched_event_id ) { $sched_json = get_post_meta( $speaker_id, $sched_event_id, true ); @@ -37,168 +38,207 @@ data-modal-prefix-class="speaker" class="js-modal button-reset"> -
+ +
'profile-310', + $speaker_image_id = $fallback_image_id; + $speaker_alt = 'Generic Speaker Image'; + if ( has_post_thumbnail() ) { + $speaker_image_id = get_post_thumbnail_id(); + $speaker_alt = 'Picture of ' . the_title_attribute( 'echo=0' ); + } + echo wp_get_attachment_image( + $speaker_image_id, + 'profile-310', + false, + array( 'loading' => 'lazy', - 'alt' => "Picture of " . the_title_attribute( 'echo=0' ), - ) ); + 'alt' => esc_attr( $speaker_alt ) + ) + ); ?>
- - + endif; + ?> -
+
- - - - -

+

+ +

-
'sb2-speaker__company-logo', 'alt' => 'Logo of ' . $company ) ); } else { ?> -

- +

+ +

+
+ -
- + + +
diff --git a/web/wp-content/themes/lfevents/src/js/modal.js b/web/wp-content/themes/lfevents/src/js/modal.js index 3f3ab8cb..15017b44 100644 --- a/web/wp-content/themes/lfevents/src/js/modal.js +++ b/web/wp-content/themes/lfevents/src/js/modal.js @@ -279,8 +279,10 @@ jQuery( document ).ready( const url = new URL( window.location ); let slug = url.searchParams.get( 'p' ); if ( slug ) { - button_class = '.modal-' + slug; - $( button_class ).click(); + let button = $('button[data-modal-slug="' + slug + '"]'); + if (button.length) { + button.click(); + } } } ); diff --git a/web/wp-content/themes/lfevents/src/scss/blocks/_speakers-block-2.scss b/web/wp-content/themes/lfevents/src/scss/blocks/_speakers-block-2.scss index 099096fa..ddc34fb6 100644 --- a/web/wp-content/themes/lfevents/src/scss/blocks/_speakers-block-2.scss +++ b/web/wp-content/themes/lfevents/src/scss/blocks/_speakers-block-2.scss @@ -1,10 +1,12 @@ .sb2-block-wrapper { display: grid; - grid-row-gap: 40px; - grid-column-gap: 30px; grid-template-columns: 1fr; + gap: 20px; @media (min-width: 415px) { - grid-template-columns: repeat(auto-fill, minmax(275px, 1fr)); + grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); + } + @media (min-width: 1200px) { + grid-template-columns: 1fr 1fr 1fr 1fr; } } @@ -15,128 +17,99 @@ background-color: #fff; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); border-radius: 5px; - + padding: 10px; button.button-reset { width: 100%; color: #000; -webkit-tap-highlight-color: transparent; } - &__image { + // Speakers image. + &__figure { display: block; height: auto; width: 100%; text-align: center; - margin-top: 15px; img { object-fit: cover; border: 3px solid var(--event-color-1); - width: 100%; - height: 280px; - width: 280px; border-radius: 50%; - @media (min-width: 1200px) { - height: 240px; - width: 240px; - } transition: opacity 0.25s ease-in; - &:hover { - opacity: 0.9; - transition: opacity 0.25s ease-in; + aspect-ratio: 1 / 1; + min-width: 100px; + min-height: 100px; + width: 100%; + height: auto; + max-width: 280px; + @media (min-width: 340px) { + min-width: 280px; + min-height: unset; + } + @media (min-width: 1000px) { + min-width: 240px; + max-width: 240px; + } + @media (hover: hover) { + &:hover { + opacity: 0.9; + transition: opacity 0.25s ease-in; + } } } } - &__padding { + &__text { width: 100%; - height: 100%; - padding: 0px 12px 24px; display: flex; flex-direction: column; align-items: center; + text-align: center; } &__name { font-size: 22px; font-weight: 700; - margin-top: 30px; line-height: 130%; - @media (min-width: 1200px) { - margin-top: 24px; - } - } - &__pronouns { - margin-top: 10px; - font-weight: 700; - font-size: 10px; - line-height: 140%; - color: #747474; - } - &__metadata { - margin-top: 20px; - li { - margin-bottom: 20px; - @media (min-width: 1200px) { - margin-bottom: 5px; - } - } - } - &__company-container { - .sb2-speaker__company-logo, - .sb2-speaker__company-logo-link, - .sb2-speaker__company { - display: block; - } - .sb2-speaker__company-logo-link { - display: inline-block; - cursor: pointer; - } - .sb2-speaker__company-logo { - height: 60px; - width: auto; - max-width: 180px; - object-fit: contain; - object-position: 0%; - } - } - &__company { - font-size: 16px; - line-height: 140%; - font-weight: 700; - margin-top: 10px; + margin-top: 24px; } &__title { margin-top: 5px; + margin-bottom: 10px; font-weight: 500; font-size: 16px; line-height: 140%; } - &__social { - margin-top: auto; - a { - display: inline-block; - &:hover { - svg { - opacity: 0.8; - } - } - } - svg { - height: 30px; - width: auto; - opacity: 1; - } - &-margin { - margin-top: 40px; - > *:not(:last-child) { - margin-right: 10px; - } - } + &__company-logo, + &__company-logo-link, + &__company-text { + display: block; } - &__content { - margin-top: 30px; + &__company-container { + height: 60px; + display: flex; + align-content: center; + justify-content: center; + align-items: center; + } + &__company-logo-link { + display: inline-block; + cursor: pointer; + } + &__company-logo { + height: 60px; + width: auto; + max-width: 180px; + object-fit: contain; + object-position: 0%; + } + &__company-text { + font-size: 20px; + line-height: 140%; + font-weight: 700; + margin: 0px; } } +// Modal Structure .speaker-modal { position: fixed; background: #fff; @@ -151,17 +124,18 @@ right: 0; max-width: 100%; @media (min-width: 768px) { - top: 50%; left: 50%; width: 75%; max-width: 800px; - height: 70vh; - min-height: 300px; - max-height: 800px; - transform: translate(-50%, -40%); padding: 0; + min-height: 300px; + height: 70vh; + max-height: 900px; + transform: translateX(-50%); + @media screen and (min-width: 1000px) and (min-height: 1500px) { + max-height: 1200px; + } } - &-close__wrapper { @media (max-width: 767px) { position: sticky; @@ -173,7 +147,6 @@ justify-content: flex-end; } } - &-close { background: #fff; width: 50px; @@ -188,7 +161,6 @@ top: 0px; right: 0px; } - @media (min-width: 1000px) { top: 0; right: 0; @@ -207,7 +179,6 @@ z-index: 100; top: 0; left: 0; - outline: none; cursor: pointer; opacity: 1; @media (min-width: 1000px) { @@ -215,112 +186,210 @@ height: 50px; } } - &:hover { &::before { opacity: 0.5; } } - &:focus, &:hover, &:active { outline-color: #747474; color: #000; } - &-overlay[data-background-click='disabled'] { cursor: auto; } } + &-overlay { + position: fixed; + top: 0; + bottom: 0; + right: 0; + left: 0; + z-index: 666; + cursor: pointer; + background: black; + background: rgba(0, 0, 0, 0.65); + backdrop-filter: blur(10px); + } +} - &__content { - font-size: 15px; +// Modal Styling. +.speaker-modal { + // the whole modal. + &-wrapper { line-height: 150%; + @media (min-width: 1024px) { + line-height: 130%; + } letter-spacing: 0.02em; - - p:not(:last-child) { - margin-bottom: 20px; + display: flex; + flex-direction: column; + } + &__header { + @media (min-width: 340px) and (max-width: 767px) { + padding: 1rem 1rem 0 1rem; + } + @media (min-width: 768px) { + padding: 50px 20px 0 20px; + } + @media (min-width: 1024px) { + display: flex; + flex-direction: row; + align-items: center; + padding: 50px 60px 0 60px; + } + } + // surrounds the content text. + &__text-content { + margin-top: 1rem; + font-size: 15px; + @media (min-width: 340px) and (max-width: 767px) { + padding: 0 1rem 0 1rem; } @media (min-width: 768px) { - padding: 0; - font-size: 12px; + padding: 0 20px 0 20px; + font-size: 16px; + } + @media (min-width: 1024px) { + padding: 0 60px 0 60px; + margin-top: 40px; + } + p:not(:last-child) { + margin-bottom: 20px; } a { font-weight: 700; transition: all 0.25s ease-out; } - .sb2-speaker__image { - @media (max-width: 767px) { - margin-top: 0; - } - img { - height: 280px; - width: 280px; + } + &__social { + margin: 40px 0; + display: flex; + gap: 20px; + a { + display: inline-block; + @media (hover: hover) { + &:hover { + svg { + opacity: 0.7; + } + } } } - - .sb2-speaker__social { - margin: 0 20px; - text-align: center; - &-margin { - margin-top: 20px; - } + svg { + height: 30px; + width: auto; + opacity: 1; + } + } + &-sched { + line-height: 150%; + letter-spacing: 0.02em; + background-color: #e9e9ea; + padding-top: 16px; + padding-bottom: 16px; + @media (min-width: 340px) and (max-width: 767px) { + padding-top: calc(16px + 10px); + padding-bottom: calc(16px + 10px); } - @media (min-width: 768px) { - .sb2-speaker__image { - flex-shrink: 0; - margin-left: 15px; - width: 155px; - @media (min-width: 1000px) { - width: 310px; - } - img { - object-fit: cover; - height: 155px; - width: 155px; - @media (min-width: 1000px) { - height: 310px; - width: 310px; - } - } + padding-top: 40px; + padding-bottom: 40px; + } + &__wrap { + margin-left: 16px; + margin-right: 16px; + @media (min-width: 340px) and (max-width: 767px) { + margin-left: calc(16px + 10px); + margin-right: calc(16px + 10px); + } + @media (min-width: 768px) { + margin-left: 20px; + margin-right: 20px; } + @media (min-width: 1024px) { + margin-left: 60px; + margin-right: 60px; + } + } + &__heading { + font-size: 26px; + font-weight: 700; + margin-bottom: 20px; + } + &__item { + margin-bottom: 20px; + @media (min-width: 768px) { + margin-bottom: 40px; + } + } + &__title { + font-size: 20px; + font-weight: 600; + } + &__time { + font-size: 16px; + } + @media (max-width: 767px) { + position: relative; + right: 50%; + left: 50%; + margin-right: -50vw; + margin-left: -50vw; + width: 100vw; } } } -.speaker-modal-overlay { - position: fixed; - top: 0; - bottom: 0; - right: 0; - left: 0; - z-index: 666; - cursor: pointer; - background: black; - background: rgba(0, 0, 0, 0.65); - backdrop-filter: blur(10px); -} - -.modal-sched { - margin: 2rem 1rem 2rem; - @media (min-width: 768px) { - margin-left: 50px; - margin-right: 50px; +// sb2-speaker style overrides in modal. +.speaker-modal { + .sb2-speaker__name { + font-size: 26px; + @media (min-width: 768px) { + font-size: 32px; + } + @media (min-width: 1024px) { + margin-top: 0; + } } - h4 { - font-size: 20px; - font-weight: 700; - line-height: 130%; + .sb2-speaker__title { + @media (min-width: 500px) and (max-width: 1023px) { + max-width: 70%; + } + @media (min-width: 768px) { + font-size: 20px; + } + @media (min-width: 1024px) { + font-size: 16px; + } } - h5 { - font-size: 17px; - margin-top: 25px; - line-height: 130%; + .sb2-speaker__company-container { + justify-content: unset; + } + .sb2-speaker__company-text { + font-size: 26px; + @media (min-width: 1024px) { + font-size: 30px; + } + } + .sb2-speaker__company-logo { + max-width: 100%; + height: 70px; + @media (min-width: 360px) { + max-width: 280px; + } + } + @media (min-width: 1024px) { + .sb2-speaker__figure { + text-align: left; + flex: 0 0 300px; + } } } +// Animation effects. @media (hover: hover) { .has-animation-scale-2 { transition-property: transform; diff --git a/web/wp-content/themes/lfevents/src/scss/components/_modal.scss b/web/wp-content/themes/lfevents/src/scss/components/_modal.scss index 92c7f5c6..f7b00869 100644 --- a/web/wp-content/themes/lfevents/src/scss/components/_modal.scss +++ b/web/wp-content/themes/lfevents/src/scss/components/_modal.scss @@ -15,26 +15,3 @@ dialog { .modal-hide { display: none; } - -.modal-content-wrapper { - display: flex; - flex-direction: column; - @media (max-width: 767px) { - padding: 1rem; - .modal__content { - margin-top: 1rem; - } - } - @media (min-width: 768px) { - flex-direction: row; - height: 100%; - .modal__content { - margin-left: 2rem; - margin-right: 2rem; - @media (min-width: 1000px) { - margin-left: 50px; - margin-right: 50px; - } - } - } -}