Skip to content

Commit

Permalink
New styles: Card and Left Thumbs
Browse files Browse the repository at this point in the history 
Fixes #9
  • Loading branch information
@ajaydsouza
ajaydsouza committed Aug 6, 2023
1 parent c83b953 commit 8bec874
Show file tree
Hide file tree
Showing 10 changed files with 334 additions and 8 deletions.
49 changes: 49 additions & 0 deletions includes/admin/class-admin.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -184,9 +184,58 @@ public static function settings_popular_authors( $settings ) {
'type' => 'text',
'options' => '</li>',
),
'wzpa_styles_desc' => array(
'id' => 'wzpa_styles_desc',
'name' => '<h3>' . esc_html__( 'Styles', 'popular-authors' ) . '</h3>',
'desc' => '',
'type' => 'descriptive_text',
),
'wzpa_styles' => array(
'id' => 'wzpa_styles',
'name' => esc_html__( 'Popular Authors style', 'top-10' ),
'desc' => '',
'type' => 'radiodesc',
'default' => 'no_style',
'options' => self::get_styles(),
),
),
);

return array_merge( $settings, $new_settings );
}

/**
* Get the various styles.
*
* @since 1.2.0
* @return array Style options.
*/
public static function get_styles() {
$styles = array(
array(
'id' => 'no_style',
'name' => esc_html__( 'No styles', 'top-10' ),
'description' => esc_html__( 'Select this option if you plan to add your own styles', 'top-10' ),
),
array(
'id' => 'card',
'name' => esc_html__( 'Card Layout', 'top-10' ),
'description' => esc_html__( 'Display the popular authors in a card layout using CSS grid', 'top-10' ),
),
array(
'id' => 'left_thumbs',
'name' => esc_html__( 'Left Thumbs', 'top-10' ),
'description' => esc_html__( 'Display the popular authors in a grid with the image to the left of the text', 'top-10' ),
),
);

/**
* Filter the array containing the types of styles to add your own.
*
* @since 2.5.0
*
* @param array $styles Different styles.
*/
return apply_filters( 'wzpa_get_styles', $styles );
}
}
10 changes: 10 additions & 0 deletions includes/class-main.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,15 @@ final class Main {
*/
public $blocks;

/**
* Styles.
*
* @since 1.2.0
*
* @var object Styles.
*/
public $styles;

/**
* Gets the instance of the class.
*
Expand Down Expand Up @@ -84,6 +93,7 @@ private function __construct() {
private function init() {
$this->shortcodes = new Frontend\Shortcodes();
$this->blocks = new Frontend\Blocks\Blocks();
$this->styles = new Frontend\Styles_Handler();

$this->hooks();

Expand Down
61 changes: 61 additions & 0 deletions includes/css/card.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
.wzpa-card {
--wzpa-font-family: inherit;
--wzpa-margin: 0;
--wzpa-min-column-width: 96px;
--wzpa-max-column-width: max-content;
--wzpa-grid-gap: 10px;
--wzpa-li-border-color: #cccccc;
--wzpa-li-background-color: #f0f0f0;
--wzpa-li-border-radius: 10px;
--wzpa-li-font-size: 1rem;
--wzpa-li-hover-color: #e0e0e0;
--wzpa-li-hover-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
--wzpa-link-color: #333333;
--wzpa-link-hover-color: #000000;
--wzpa-author-img-radius: 50%;
}

.wzpa_authors.wzpa-card {
font-family: var(--wzpa-font-family);
margin: var(--wzpa-margin);
}

.wzpa_authors.wzpa-card ul {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--wzpa-min-column-width), var(--wzpa-max-column-width)));
grid-gap: var(--wzpa-grid-gap);
align-items: stretch;
list-style: none;
padding: 0;
}

.wzpa_authors.wzpa-card li {
display: flex;
flex-direction: column;
border: 1px solid var(--wzpa-li-border-color);
padding: 10px;
border-radius: var(--wzpa-li-border-radius);
background-color: var(--wzpa-li-background-color);
text-align: center;
font-size: var(--wzpa-li-font-size);
}

.wzpa_authors.wzpa-card li:hover {
background-color: var(--wzpa-li-hover-color);
box-shadow: var(--wzpa-li-hover-shadow);
}

.wzpa_authors.wzpa-card a {
color: var(--wzpa-link-color);
text-decoration: none;
font-weight: bold;
}

.wzpa_authors.wzpa-card a:hover {
color: var(--wzpa-link-hover-color);
}

.wzpa_authors.wzpa-card img {
align-self: center;
border-radius: var(--wzpa-author-img-radius);
}
1 change: 1 addition & 0 deletions includes/css/card.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

80 changes: 80 additions & 0 deletions includes/css/left-thumbs.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
.wzpa-left-thumbs {
--wzpa-font-family: inherit;
--wzpa-margin: 0;
--wzpa-min-column-width: 96px;
--wzpa-max-column-width: 1fr;
--wzpa-grid-gap: 10px;
--wzpa-li-border-color: inherit;
--wzpa-li-background-color: inherit;
--wzpa-li-border-radius: 10px;
--wzpa-li-font-size: 1rem;
--wzpa-li-hover-color: #e0e0e0;
--wzpa-li-hover-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
--wzpa-link-color: #333333;
--wzpa-link-hover-color: #000000;
--wzpa-author-img-radius: 50%;
}

.wzpa_authors.wzpa-left-thumbs {
font-family: var(--wzpa-font-family);
margin: var(--wzpa-margin);
container: wzpaLeftThumbs / inline-size;
}

.wzpa_authors.wzpa-left-thumbs ul {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--wzpa-min-column-width), var(--wzpa-max-column-width)));
grid-gap: var(--wzpa-grid-gap);
grid-auto-rows: 1fr;
list-style: none;
padding: 0;
}

.wzpa_authors.wzpa-left-thumbs li {
display: flex;
border: 1px solid var(--wzpa-li-border-color);
padding: 10px;
border-radius: var(--wzpa-li-border-radius);
background-color: var(--wzpa-li-background-color);
font-size: var(--wzpa-li-font-size);
align-items: start;
justify-content: start;
}

.wzpa_authors.wzpa-left-thumbs li:hover {
background-color: var(--wzpa-li-hover-color);
box-shadow: var(--wzpa-li-hover-shadow);
}

.wzpa_authors.wzpa-left-thumbs a {
color: var(--wzpa-link-color);
text-decoration: none;
font-weight: bold;
}

.wzpa_authors.wzpa-left-thumbs a:hover {
color: var(--wzpa-link-hover-color);
}

.wzpa_authors.wzpa-left-thumbs img {
align-self: center;
border-radius: var(--wzpa-author-img-radius);
}

@container wzpaLeftThumbs (width < 400px) {
.wzpa_authors.wzpa-left-thumbs li {
flex-direction: column;
text-align: center;
align-items: center;
}
}

@container wzpaLeftThumbs (width >=400px) {
.wzpa_authors.wzpa-left-thumbs ul {
grid-template-columns: repeat(auto-fit, minmax(var(--wzpa-min-column-width), max-content));
}

.wzpa_authors.wzpa-left-thumbs li {
flex-direction: row;
}
}
1 change: 1 addition & 0 deletions includes/css/left-thumbs.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

29 changes: 22 additions & 7 deletions includes/frontend/class-display.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ class Display {
/**
* Constructor class.
*
* @since 3.3.0
* @since 1.2.0
*/
public function __construct() {
}
Expand All @@ -45,6 +45,7 @@ public static function list_popular_authors( $args = array() ) {
'is_shortcode' => false,
'is_block' => false,
'instance_id' => 1,
'extra_class' => '',
);

$defaults = array_merge( $defaults, self::list_popular_authors_args() );
Expand Down Expand Up @@ -86,11 +87,17 @@ public static function list_popular_authors( $args = array() ) {
$post_counts[ $row->post_author ] = $row->count;
}

$post_classes[] = $args['daily'] ? 'wzpa_authors_daily ' : 'wzpa_authors ';
$post_classes[] = $args['is_widget'] ? ' wzpa_authors_widget wzpa_authors_widget' . $args['instance_id'] : '';
$post_classes[] = $args['is_shortcode'] ? ' wzpa_authors_shortcode' : '';
$post_classes[] = $args['is_block'] ? ' wzpa_authors_block' : '';
$style_array = Styles_Handler::get_style( $args['styles'] );

$post_classes = array(
'main' => 'wzpa_authors',
'daily' => $args['daily'] ? 'wzpa_authors ' : '',
'widget' => $args['is_widget'] ? 'wzpa_authors_widget wzpa_authors_widget' . $args['instance_id'] : '',
'shortcode' => $args['is_shortcode'] ? 'wzpa_authors_shortcode' : '',
'block' => $args['is_block'] ? 'wzpa_authors_block' : '',
'extra_class' => $args['extra_class'],
'style' => ! empty( $style_array['name'] ) ? 'wzpa-' . $style_array['name'] : '',
);
$post_classes = join( ' ', $post_classes );

/**
Expand Down Expand Up @@ -140,7 +147,8 @@ public static function list_popular_authors( $args = array() ) {
$output .= self::get_avatar( $author );
}

$link = sprintf(
$link = '<span class="wzpa_authorname">';
$link .= sprintf(
'<a href="%1$s" title="%2$s">%3$s</a>',
get_author_posts_url( $author->ID, $author->user_nicename ),
/* translators: %s: Author's display name. */
Expand All @@ -149,8 +157,12 @@ public static function list_popular_authors( $args = array() ) {
);

if ( $args['optioncount'] ) {
$link .= ' (' . number_format_i18n( $views ) . ')';
$link .= sprintf(
' <span class="wzpa_optioncount">(%1$s)</span>',
number_format_i18n( $views )
);
}
$link .= '</span>';

$output .= $link;
$output .= $args['after_list_item'];
Expand Down Expand Up @@ -436,6 +448,7 @@ public static function list_popular_authors_args( $args = array() ) {
'after_list' => '</ul>',
'before_list_item' => '<li>',
'after_list_item' => '</li>',
'styles' => '',
);

if ( function_exists( 'tptn_get_settings' ) ) {
Expand All @@ -444,6 +457,8 @@ public static function list_popular_authors_args( $args = array() ) {
foreach ( $defaults as $option => $value ) {
if ( isset( $tptn_settings[ "wzpa_{$option}" ] ) ) {
$defaults[ $option ] = $tptn_settings[ "wzpa_{$option}" ];
} else {
$defaults[ $option ] = \tptn_get_default_option( "wzpa_{$option}" );
}
}
}
Expand Down
Loading

0 comments on commit 8bec874

Please sign in to comment.