malhuda/fictioneer
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 112 Wiki Activity

Add customizer options for card grid gaps

Browse Source
This commit is contained in:
Tetrakern 2024-02-21 17:18:05 +01:00
parent 6513e0eb7a
commit 63a63c0c77
6 changed files with 104 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
INSTALLATION.md
View File

@ -37,7 +37,7 @@ This guide is mainly written for people who never had their own WordPress site b
* [Background Overlay & Filters](#background-overlay--filters)
* [Merge Top-Header & Navigation](#merge-top-header--navigation)
* [Overlay Navigation](#overlay-navigation)
* [Card Size & Grid Spacing](#card-size--grid-spacing)
* [Card Grids](#card-grids)
* [Custom Header/Page Style](#custom-headerpage-style)
* [Move the Title/Logo](#move-the-titlelogo)
* [Minimum/Maximum Values](#minimummaximum-values)
@ -944,28 +944,9 @@ You want the navigation on top of the header image? Just go to **Appearance > Cu
}
```
#### Card Size & Grid Spacing
#### Card Grids
You can change the minimum width of cards under **Appearance > Customize > Layout**, usually in combination with an increased site width. The cards will scale up if there is enough space available. If you want to change the spacing between the cards, however, you need to overwrite one or two custom properties.
The default is `max(3cqw, 1.5rem)` (22.5px to 30px), which is relative to the section width or dynamic root font size, whichever is larger. If you want to apply changes only to specific grids, you need to scope them to a fitting selector, such as `.latest-updates` for the Latest Updates shortcode.
```css
:root {
--grid-columns-row-gap: max(3cqw, 1.5rem); /* Vertical spacing. */
--grid-columns-col-gap: max(3cqw, 1.5rem); /* Horizontal spacing. */
}
/* Fallback for older browsers that do not support container queries. */
@supports (width: 1cqw) {
.root {
--grid-columns-row-gap: 1.5rem; /* Vertical spacing. */
--grid-columns-col-gap: 1.5rem; /* Horizontal spacing. */
}
}
```
If you want to have a grid on the list page templates as well, for example Stories and Chapters, you need to apply more verbose CSS. Be aware that targeting the `.card-list` class may be convenient to convert all card lists to grids, but can have unintended side effects since the class is used in many places. Better be specific.
You can change the minimum width of cards and gap spacing under **Appearance > Customize > Layout**, usually in combination with an increased site width. But if you want to have a grid on the list page templates as well, for example Stories and Chapters, you need some custom CSS. Be aware that targeting the `.card-list` class may be convenient to convert all card lists to grids, but can have unintended side effects since the class is used in many places. Better be specific.
```css
/* Targeting the unique IDs of the lists is safe. */

2
css/application.css
View File

File diff suppressed because one or more lines are too long

2
css/complete.css
View File

File diff suppressed because one or more lines are too long

118
includes/functions/_customizer-settings.php
View File

@ -2902,31 +2902,6 @@ function fictioneer_add_layout_customizer_settings( $manager ) {
)
);
// Card cover width modifier
$manager->add_setting(
'card_cover_width_mod',
array(
'capability' => 'manage_options',
'sanitize_callback' => 'fictioneer_sanitize_float_field',
'default' => '1.0'
)
);
$manager->add_control(
'card_cover_width_mod',
array(
'type' => 'text',
'priority' => 10,
'section' => 'layout',
'label' => __( 'Card Cover Multiplier', 'fictioneer' ),
'description' => __( 'Multiplier for the card cover width. Default 1.', 'fictioneer' ),
'input_attrs' => array(
'placeholder' => '1.0',
'style' => 'width: 80px'
)
)
);
// Card grid column minimum width
$manager->add_setting(
'card_grid_column_min',
@ -2953,6 +2928,99 @@ function fictioneer_add_layout_customizer_settings( $manager ) {
)
);
// Card cover width modifier
$manager->add_setting(
'card_cover_width_mod',
array(
'capability' => 'manage_options',
'sanitize_callback' => 'fictioneer_sanitize_float_field',
'default' => '1'
)
);
$manager->add_control(
new Customizer_Range_Value_Control(
$manager,
'card_cover_width_mod',
array(
'type' => 'range-value',
'priority' => 10,
'section' => 'layout',
'settings' => 'card_cover_width_mod',
'label' => __( 'Card Cover Multiplier', 'fictioneer' ),
'description' => __( 'Multiplier for the card cover width. Default 1.', 'fictioneer' ),
'input_attrs' => array(
'min' => 0,
'max' => 5,
'step' => 0.05,
'suffix' => ' x'
)
)
)
);
// Card row gap modifier
$manager->add_setting(
'card_grid_row_gap_mod',
array(
'capability' => 'manage_options',
'sanitize_callback' => 'fictioneer_sanitize_float_field',
'default' => '1'
)
);
$manager->add_control(
new Customizer_Range_Value_Control(
$manager,
'card_grid_row_gap_mod',
array(
'type' => 'range-value',
'priority' => 10,
'section' => 'layout',
'settings' => 'card_grid_row_gap_mod',
'label' => __( 'Card Row Gap Multiplier', 'fictioneer' ),
'description' => __( 'Multiplier for the grid row gap. Default 1.', 'fictioneer' ),
'input_attrs' => array(
'min' => 0,
'max' => 10,
'step' => 0.05,
'suffix' => ' x'
)
)
)
);
// Card column gap modifier
$manager->add_setting(
'card_grid_column_gap_mod',
array(
'capability' => 'manage_options',
'sanitize_callback' => 'fictioneer_sanitize_float_field',
'default' => '1'
)
);
$manager->add_control(
new Customizer_Range_Value_Control(
$manager,
'card_grid_column_gap_mod',
array(
'type' => 'range-value',
'priority' => 10,
'section' => 'layout',
'settings' => 'card_grid_column_gap_mod',
'label' => __( 'Card Column Gap Multiplier', 'fictioneer' ),
'description' => __( 'Multiplier for the grid column gap. Default 1.', 'fictioneer' ),
'input_attrs' => array(
'min' => 0,
'max' => 10,
'step' => 0.05,
'suffix' => ' x'
)
)
)
);
// Content list item style
$manager->add_setting(
'content_list_style',

4
includes/functions/_customizer.php
View File

@ -680,6 +680,8 @@ function fictioneer_build_customize_css( $content = null ) {
$header_max = (int) get_theme_mod( 'header_height_max', 380 );
$card_grid_column_min = (int) get_theme_mod( 'card_grid_column_min', 308 );
$card_cover_width_mod = get_theme_mod( 'card_cover_width_mod', 1 );
$card_grid_column_gap_mod = get_theme_mod( 'card_grid_column_gap_mod', 1 );
$card_grid_row_gap_mod = get_theme_mod( 'card_grid_row_gap_mod', 1 );
$font_primary = fictioneer_get_custom_font( 'primary_font_family_value', 'var(--ff-system)', 'Open Sans' );
$font_secondary = fictioneer_get_custom_font( 'secondary_font_family_value', 'var(--ff-base)', 'Lato' );
$font_heading = fictioneer_get_custom_font( 'heading_font_family_value', 'var(--ff-base)', 'Open Sans' );
@ -703,6 +705,8 @@ function fictioneer_build_customize_css( $content = null ) {
--site-title-font-size: " . fictioneer_get_css_clamp( $title_min, $title_max, 320, $site_width ) . ";
--site-title-tagline-font-size: " . fictioneer_get_css_clamp( $tagline_min, $tagline_max, 320, $site_width ) . ";
--grid-columns-min: " . $card_grid_column_min . "px;
--grid-columns-row-gap-multiplier: " . $card_grid_row_gap_mod . ";
--grid-columns-col-gap-multiplier: " . $card_grid_column_gap_mod . ";
--ff-base: {$font_primary};
--ff-note: {$font_secondary};
--ff-heading: {$font_heading};

4
src/scss/common/_utility.scss
View File

@ -58,13 +58,13 @@ body:not(.is-editor):not(.is-admin) {
grid-template-columns: repeat(auto-fill, minmax(var(--grid-columns-min, 308px), 1fr));
gap:
calc(var(--grid-columns-row-gap, max(3cqw, 1.5rem)) * var(--grid-columns-row-gap-multiplier, 1))
calc(var(--grid-columns-row-col, max(3cqw, 1.5rem)) * var(--grid-columns-row-col-multiplier, 1));
calc(var(--grid-columns-col-gap, max(3cqw, 1.5rem)) * var(--grid-columns-col-gap-multiplier, 1));
// Fallback
@supports not (width: 1cqw) {
gap:
calc(var(--grid-columns-row-gap, 1.5rem) * var(--grid-columns-row-gap-multiplier, 1))
calc(var(--grid-columns-row-col, 1.5rem) * var(--grid-columns-row-col-multiplier, 1));
calc(var(--grid-columns-col-gap, 1.5rem) * var(--grid-columns-col-gap-multiplier, 1));
}
&._collapse-on-mobile {