Skip to content

Commit

Permalink
Make widgets vertical
Browse files Browse the repository at this point in the history
  • Loading branch information
@aristath
aristath committed Apr 8, 2024
1 parent c51365b commit 2ff13f4
Show file tree
Hide file tree
Showing 4 changed files with 55 additions and 44 deletions.
19 changes: 16 additions & 3 deletions assets/css/admin.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
:root {
--prpl-gap: 32px;
--prpl-padding: 20px;
--prpl-column-min-width: 16rem;
--prpl-column-min-width: 15rem;
--prpl-column-max-width: 30rem;
--prpl-max-columns: 4;
--prpl-border-radius: 7px;
Expand All @@ -24,7 +24,7 @@
--prpl-color-accent-green: #14b8a6;

--prpl-color-headings: #38296d;
--prpl-color-text: var(--prpl-color-gray-6);
--prpl-color-text: var(--prpl-color-gray-5);
--prpl-color-link: #1e40af;

--prpl-color-notification-green: #16a34a;
Expand Down Expand Up @@ -66,6 +66,7 @@
\*------------------------------------*/
.prpl-wrap p {
font-size: var(--prpl-font-size-base);
color: var(--prpl-color-text);
}

.prpl-wrap h1,
Expand Down Expand Up @@ -106,7 +107,7 @@
position: relative;
height: 100%;
width: 100%;
max-height: 500px;
max-height: 300px;
}

/*------------------------------------*\
Expand Down Expand Up @@ -138,6 +139,16 @@
gap: var(--prpl-gap);
}

.prpl-column-main-primary .prpl-column {
display: flex;
flex-direction: column;
}
.prpl-column-main-primary .prpl-column-two-col {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--prpl-column-min-width), 1fr));
grid-gap: var(--prpl-gap);
}

/*------------------------------------*\
Widgets with 2 columns.
\*------------------------------------*/
Expand All @@ -160,6 +171,8 @@
padding: var(--prpl-padding);
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
}

/*------------------------------------*\
Expand Down
34 changes: 16 additions & 18 deletions classes/widgets/class-published-content-density.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,26 +30,24 @@ final class Published_Content_Density extends Widget {
*/
protected function the_content() {
?>
<div class="two-col">
<div class="prpl-top-counter-bottom-content">
<?php $this->render_big_counter( (int) $this->get_weekly_activities_density(), __( 'content density', 'progress-planner' ) ); ?>
<div class="prpl-widget-content">
<p>
<?php
printf(
/* translators: %1$s: number of words/post published this week. %2$s: All-time average number. */
\esc_html__( 'You have written content with an average density of %1$s words/post in the past 7 days. Your all-time average is %2$s', 'progress-planner' ),
\esc_html( \number_format_i18n( $this->get_weekly_activities_density() ) ),
\esc_html( \number_format_i18n( $this->get_all_activities_density() ) )
);
?>
</p>
</div>
</div>
<div class="prpl-graph-wrapper">
<?php ( new Chart() )->the_chart( $this->get_chart_args() ); ?>
<div class="prpl-top-counter-bottom-content">
<?php $this->render_big_counter( (int) $this->get_weekly_activities_density(), __( 'content density', 'progress-planner' ) ); ?>
<div class="prpl-widget-content">
<p>
<?php
printf(
/* translators: %1$s: number of words/post published this week. %2$s: All-time average number. */
\esc_html__( 'You have written content with an average density of %1$s words/post in the past 7 days. Your all-time average is %2$s', 'progress-planner' ),
\esc_html( \number_format_i18n( $this->get_weekly_activities_density() ) ),
\esc_html( \number_format_i18n( $this->get_all_activities_density() ) )
);
?>
</p>
</div>
</div>
<div class="prpl-graph-wrapper">
<?php ( new Chart() )->the_chart( $this->get_chart_args() ); ?>
</div>
<?php
}

Expand Down
40 changes: 19 additions & 21 deletions classes/widgets/class-published-words.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,29 +29,27 @@ final class Published_Words extends Widget {
*/
protected function the_content() {
?>
<div class="two-col">
<div class="prpl-top-counter-bottom-content">
<?php $this->render_big_counter( (int) $this->get_weekly_words(), __( 'words written', 'progress-planner' ) ); ?>
<div class="prpl-widget-content">
<p>
<?php if ( 0 === $this->get_weekly_words() ) : ?>
<?php \esc_html_e( 'No words written last week', 'progress-planner' ); ?>
<?php else : ?>
<?php
printf(
/* translators: %1$s: number of posts published this week. %2$s: Total number of posts. */
\esc_html__( 'Great! You have written %1$s words in the past 7 days.', 'progress-planner' ),
\esc_html( \number_format_i18n( $this->get_weekly_words() ) ),
);
?>
<?php endif; ?>
</p>
</div>
</div>
<div class="prpl-graph-wrapper">
<?php ( new Chart() )->the_chart( $this->get_chart_args() ); ?>
<div class="prpl-top-counter-bottom-content">
<?php $this->render_big_counter( (int) $this->get_weekly_words(), __( 'words written', 'progress-planner' ) ); ?>
<div class="prpl-widget-content">
<p>
<?php if ( 0 === $this->get_weekly_words() ) : ?>
<?php \esc_html_e( 'No words written last week', 'progress-planner' ); ?>
<?php else : ?>
<?php
printf(
/* translators: %1$s: number of posts published this week. %2$s: Total number of posts. */
\esc_html__( 'Great! You have written %1$s words in the past 7 days.', 'progress-planner' ),
\esc_html( \number_format_i18n( $this->get_weekly_words() ) ),
);
?>
<?php endif; ?>
</p>
</div>
</div>
<div class="prpl-graph-wrapper">
<?php ( new Chart() )->the_chart( $this->get_chart_args() ); ?>
</div>
<?php
}

Expand Down
6 changes: 4 additions & 2 deletions views/admin-page.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,11 @@
<div class="prpl-column-main prpl-column-main-primary">
<div class="prpl-column prpl-column-first">
<?php new \ProgressPlanner\Widgets\Website_Activity_Score(); ?>
<?php new \ProgressPlanner\Widgets\Published_Content_Density(); ?>
<div class="prpl-column prpl-column-two-col">
<?php new \ProgressPlanner\Widgets\Published_Content_Density(); ?>
<?php new \ProgressPlanner\Widgets\Published_Words(); ?>
</div>
<?php new \ProgressPlanner\Widgets\Published_Content(); ?>
<?php new \ProgressPlanner\Widgets\Published_Words(); ?>
</div>
</div>
<div class="prpl-column-main prpl-column-main-secondary">
Expand Down

0 comments on commit 2ff13f4

Please sign in to comment.