Skip to content

Commit 111ada2

Browse files
author
Ariel Jolo
committed
trying new layout
1 parent 847fffe commit 111ada2

File tree

2 files changed

+69
-93
lines changed

2 files changed

+69
-93
lines changed

‎themes/osi/template-parts/content-board-member.php‎

Lines changed: 34 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,54 @@
11
<?php
22
/**
3-
* Template part for displaying board member post type content
4-
*
5-
* @link https://codex.wordpress.org/Template_Hierarchy
3+
* Template for displaying a board member in a side-by-side layout.
64
*
75
* @package osi
86
*/
9-
107
?>
118
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
12-
<div class="board-member-layout">
13-
<!-- Include the header for the board member -->
14-
<div class="left-column">
15-
<?php get_template_part('template-parts/header-board-member'); ?>
9+
<div class="board-member-wrapper">
10+
<!-- Fixed Left Column: Header -->
11+
<div class="board-member-header">
12+
<?php get_template_part( 'template-parts/header-board-member' ); ?>
1613
</div>
17-
18-
<!-- Right Column for the post content -->
19-
<div class="right-column">
14+
15+
<!-- Scrollable Right Column: Content -->
16+
<div class="board-member-content">
2017
<div class="entry-content post--content">
2118
<?php the_content(); ?>
2219
</div><!-- .entry-content -->
20+
<section class="alignwide email-block">
21+
<?php // Uncomment below if needed: get_template_part( 'template-parts/nav-postname-pager' ); ?>
22+
<?php // Uncomment below if needed: get_template_part( 'template-parts/email-block' ); ?>
23+
</section>
2324
</div>
2425
</div>
25-
</article><!-- #post-<?php the_ID(); ?> -->
26+
</article>
2627

2728
<style>
28-
.board-member-layout {
29-
display: flex;
30-
}
31-
32-
.left-column {
33-
flex: 0 0 30%; /* Fixed width of 30% */
34-
padding: 20px; /* Optional padding */
35-
text-align: center; /* Center content */
36-
}
37-
38-
.right-column {
39-
flex: 1; /* Takes the remaining space */
40-
overflow-y: auto; /* Makes it scrollable if content overflows */
41-
padding: 20px; /* Optional padding */
42-
}
43-
44-
.member-image {
45-
margin-bottom: 1.5rem;
46-
}
47-
48-
.member-image img.circular-image {
49-
border-radius: 50%;
50-
border: 4px solid #FFF;
51-
width: 300px; /* adjust as needed */
52-
height: 300px;
53-
object-fit: cover;
29+
.board-member-wrapper {
30+
display: flex;
5431
}
5532

56-
.member-position,
57-
.member-dates,
58-
.member-seat,
59-
.member-term-item {
60-
display: block;
61-
margin-bottom: 1rem;
33+
/* Left Column: Fixed Header */
34+
.board-member-header {
35+
width: 40%; /* Adjust as needed (or use a fixed width, e.g., 350px) */
36+
position: fixed; /* Keeps the header fixed on the left */
37+
top: 0;
38+
left: 0;
39+
bottom: 0;
40+
overflow-y: auto; /* In case header content overflows */
41+
background-color: #fff; /* Optional: ensures the content below doesn't show through */
42+
padding: 20px; /* Optional spacing */
43+
box-sizing: border-box;
6244
}
6345

64-
.member-pronouns {
65-
font-family: 'Space Mono', monospace;
66-
display: inline-block;
46+
/* Right Column: Scrollable Content */
47+
.board-member-content {
48+
margin-left: 40%; /* Must match header width; if using fixed px for header, set this to same px value */
49+
width: 60%;
50+
padding: 20px;
51+
overflow-y: auto;
52+
box-sizing: border-box;
6753
}
68-
</style>
54+
</style>

‎themes/osi/template-parts/header-board-member.php‎

Lines changed: 35 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,66 @@
1+
<?php
2+
/**
3+
* Template part for displaying board member header details.
4+
*
5+
* @package osi
6+
*/
7+
?>
18
<header class="entry-header cover--header no-thumbnail">
29
<div class="wp-block-cover alignfull has-neutral-dark-background-color has-background-dim-100 has-background-dim">
310
<div class="wp-block-cover__inner-container">
4-
<div class="board-member-layout">
5-
<!-- Left Column -->
6-
<div class="left-column">
7-
<?php if (has_post_thumbnail()) : ?>
11+
<div class="wp-block-columns">
12+
<!-- Left Column: Image and Title -->
13+
<div class="wp-block-column" style="text-align: center;">
14+
<?php if ( has_post_thumbnail() ) : ?>
815
<div class="member-image">
9-
<?php the_post_thumbnail('full', array('class' => 'circular-image')); ?>
16+
<?php the_post_thumbnail( 'full', array( 'class' => 'circular-image' ) ); ?>
1017
</div>
1118
<?php endif; ?>
1219

1320
<h1><?php echo get_the_title(); ?></h1>
1421

15-
<?php if(osi_field_check('pronouns')) : ?>
16-
<span class="member-pronouns"><?php osi_the_valid_field('pronouns'); ?></span>
22+
<?php if ( osi_field_check( 'pronouns' ) ) : ?>
23+
<span class="member-pronouns"><?php osi_the_valid_field( 'pronouns' ); ?></span>
1724
<?php endif; ?>
1825
</div>
1926

20-
<!-- Right Column -->
21-
<div class="right-column">
27+
<!-- Right Column: Additional Details -->
28+
<div class="wp-block-column">
29+
<?php if ( osi_field_check( 'board_position' ) ) : ?>
30+
<span class="member-position">
31+
<?php osi_the_valid_field( 'board_position' ); ?>
32+
</span>
33+
<?php endif; ?>
2234
<span class="pill-taxonomy">
2335
<?php echo wp_kses_post( osi_get_single_taxonomy_terms_links( $post, 'taxonomy-status' ) ); ?>
2436
</span>
25-
<?php if( osi_field_check( 'proposed_by' ) ) : ?>
26-
<p><?php echo __( 'Proposed by', 'osi' ); ?>: <span class="member-pronouns"><?php osi_the_valid_field( 'proposed_by' ); ?></span></p>
27-
<?php endif; ?>
28-
<?php if(osi_field_check('board_position')) : ?>
29-
<span class="member-position">
30-
<?php osi_the_valid_field('board_position'); ?>
31-
</span>
37+
<?php if ( osi_field_check( 'proposed_by' ) ) : ?>
38+
<p>
39+
<?php echo __( 'Proposed by', 'osi' ); ?>:
40+
<span class="member-pronouns"><?php osi_the_valid_field( 'proposed_by' ); ?></span>
41+
</p>
3242
<?php endif; ?>
3343

34-
<?php if(osi_field_check('current_term_start_date')) : ?>
44+
<?php if ( osi_field_check( 'current_term_start_date' ) ) : ?>
3545
<span class="member-dates">
3646
<?php
37-
echo __('Candidacy Period', 'osi') . ': ';
38-
osi_the_valid_date_field('current_term_start_date');
39-
if(osi_field_check('current_term_end_date')) :
47+
echo __( 'Candidacy Period', 'osi' ) . ': ';
48+
osi_the_valid_date_field( 'current_term_start_date' );
49+
if ( osi_field_check( 'current_term_end_date' ) ) :
4050
echo ' – ';
41-
osi_the_valid_date_field('current_term_end_date');
51+
osi_the_valid_date_field( 'current_term_end_date' );
4252
endif;
4353
?>
4454
</span>
4555
<?php endif; ?>
4656

4757
<span class="member-seat">
48-
<?php echo __('Type of Seat', 'osi') . ': ' . wp_kses_post(osi_get_single_taxonomy_terms_links($post, 'taxonomy-seat-type')); ?>
58+
<?php echo __( 'Type of Seat', 'osi' ) . ': ' . wp_kses_post( osi_get_single_taxonomy_terms_links( $post, 'taxonomy-seat-type' ) ); ?>
4959
</span>
5060

51-
<!-- Add back the term item -->
52-
<?php if(osi_field_check('term_item')) : ?>
61+
<?php if ( osi_field_check( 'term_item' ) ) : ?>
5362
<span class="member-term-item">
54-
<?php osi_the_valid_field('term_item'); ?>
63+
<?php osi_the_valid_field( 'term_item' ); ?>
5564
</span>
5665
<?php endif; ?>
5766
</div>
@@ -61,44 +70,25 @@
6170
</header>
6271

6372
<style>
64-
.board-member-layout {
65-
display: flex;
66-
}
67-
68-
.left-column {
69-
flex: 0 0 30%; /* Fixed width of 30% */
70-
padding: 20px; /* Optional padding */
71-
text-align: center; /* Center content */
72-
}
73-
74-
.right-column {
75-
flex: 1; /* Takes the remaining space */
76-
overflow-y: auto; /* Makes it scrollable if content overflows */
77-
padding: 20px; /* Optional padding */
78-
}
79-
8073
.member-image {
8174
margin-bottom: 1.5rem;
8275
}
83-
8476
.member-image img.circular-image {
8577
border-radius: 50%;
8678
border: 4px solid #FFF;
8779
width: 300px; /* adjust as needed */
8880
height: 300px;
8981
object-fit: cover;
9082
}
91-
9283
.member-position,
9384
.member-dates,
9485
.member-seat,
9586
.member-term-item {
9687
display: block;
9788
margin-bottom: 1rem;
9889
}
99-
10090
.member-pronouns {
10191
font-family: 'Space Mono', monospace;
10292
display: inline-block;
10393
}
104-
</style>
94+
</style>

0 commit comments

Comments
 (0)