summaryrefslogtreecommitdiffstats
path: root/src/components
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2022-05-20 22:22:35 +0200
committerArmand Philippot <git@armandphilippot.com>2022-05-21 19:23:43 +0200
commit802548124071039f83ebfa2605e839ded82b5689 (patch)
tree62d85fe786b84fcdd099f20e21e1827add701ae8 /src/components
parent7fd11d99f8a547e4acb89b9f9159b92e208dc90f (diff)
chore: update some styles
* Improve wp-blocks-columns, wp-block-quote and some images * Make Sharing widget consistent between pages * Remove margin option from lists * Fix Topic logo alignement
Diffstat (limited to 'src/components')
-rw-r--r--src/components/atoms/lists/list.module.scss10
-rw-r--r--src/components/atoms/lists/list.tsx12
-rw-r--r--src/components/organisms/layout/cards-list.tsx1
-rw-r--r--src/components/organisms/layout/posts-list.module.scss9
-rw-r--r--src/components/organisms/layout/posts-list.tsx4
-rw-r--r--src/components/organisms/widgets/links-list-widget.tsx1
6 files changed, 12 insertions, 25 deletions
diff --git a/src/components/atoms/lists/list.module.scss b/src/components/atoms/lists/list.module.scss
index f647072..95f9b40 100644
--- a/src/components/atoms/lists/list.module.scss
+++ b/src/components/atoms/lists/list.module.scss
@@ -7,10 +7,6 @@
color: var(--color-primary-dark);
}
- & & {
- margin-top: var(--spacing-2xs);
- }
-
&--ordered {
padding: 0;
counter-reset: li;
@@ -33,12 +29,6 @@
padding: 0 0 0 var(--spacing-sm);
}
- &--has-margin &__item {
- &:not(:last-child) {
- margin-bottom: var(--spacing-2xs);
- }
- }
-
&--flex {
@extend %reset-list;
diff --git a/src/components/atoms/lists/list.tsx b/src/components/atoms/lists/list.tsx
index 711ade1..aa0a241 100644
--- a/src/components/atoms/lists/list.tsx
+++ b/src/components/atoms/lists/list.tsx
@@ -33,10 +33,6 @@ export type ListProps = {
* The list kind.
*/
kind?: 'ordered' | 'unordered' | 'flex';
- /**
- * Set margin between list items. Default: true.
- */
- withMargin?: boolean;
};
/**
@@ -49,11 +45,9 @@ const List: FC<ListProps> = ({
items,
itemsClassName = '',
kind = 'unordered',
- withMargin = true,
}) => {
const ListTag = kind === 'ordered' ? 'ol' : 'ul';
const kindClass = `list--${kind}`;
- const marginClass = withMargin ? 'list--has-margin' : 'list--no-margin';
/**
* Retrieve the list items.
@@ -66,7 +60,7 @@ const List: FC<ListProps> = ({
{value}
{child && (
<ListTag
- className={`${styles.list} ${styles[kindClass]} ${styles[marginClass]} ${className}`}
+ className={`${styles.list} ${styles[kindClass]} ${className}`}
>
{getItems(child)}
</ListTag>
@@ -76,9 +70,7 @@ const List: FC<ListProps> = ({
};
return (
- <ListTag
- className={`${styles.list} ${styles[kindClass]} ${styles[marginClass]} ${className}`}
- >
+ <ListTag className={`${styles.list} ${styles[kindClass]} ${className}`}>
{getItems(items)}
</ListTag>
);
diff --git a/src/components/organisms/layout/cards-list.tsx b/src/components/organisms/layout/cards-list.tsx
index 1558d7c..0168bb2 100644
--- a/src/components/organisms/layout/cards-list.tsx
+++ b/src/components/organisms/layout/cards-list.tsx
@@ -77,7 +77,6 @@ const CardsList: FC<CardsListProps> = ({
<List
kind="flex"
items={getCards(items)}
- withMargin={false}
className={`${styles.wrapper} ${styles[kindModifier]} ${className}`}
/>
);
diff --git a/src/components/organisms/layout/posts-list.module.scss b/src/components/organisms/layout/posts-list.module.scss
index a006914..b09bb12 100644
--- a/src/components/organisms/layout/posts-list.module.scss
+++ b/src/components/organisms/layout/posts-list.module.scss
@@ -3,6 +3,10 @@
@use "@styles/abstracts/placeholders";
.section {
+ &:not(:last-of-type) {
+ margin-bottom: var(--spacing-md);
+ }
+
@include mix.media("screen") {
@include mix.dimensions("md") {
display: grid;
@@ -17,8 +21,11 @@
@extend %reset-ordered-list;
.item {
- margin-bottom: var(--spacing-md);
border-bottom: fun.convert-px(1) solid var(--color-border);
+
+ &:not(:last-child) {
+ margin-bottom: var(--spacing-md);
+ }
}
}
diff --git a/src/components/organisms/layout/posts-list.tsx b/src/components/organisms/layout/posts-list.tsx
index 50192dd..608130e 100644
--- a/src/components/organisms/layout/posts-list.tsx
+++ b/src/components/organisms/layout/posts-list.tsx
@@ -100,6 +100,8 @@ const PostsList: FC<PostsListProps> = ({
const isMounted = useIsMounted(listRef);
const { blog } = useSettings();
+ const lastPostId = posts.length ? posts[posts.length - 1].id : 0;
+
/**
* Retrieve the list of posts.
*
@@ -111,8 +113,6 @@ const PostsList: FC<PostsListProps> = ({
allPosts: Post[],
headingLevel: HeadingLevel = 2
): JSX.Element => {
- const lastPostId = allPosts[allPosts.length - 1].id;
-
return (
<ol className={styles.list} ref={listRef}>
{allPosts.map(({ id, ...post }) => (
diff --git a/src/components/organisms/widgets/links-list-widget.tsx b/src/components/organisms/widgets/links-list-widget.tsx
index 90dae4a..a9c677b 100644
--- a/src/components/organisms/widgets/links-list-widget.tsx
+++ b/src/components/organisms/widgets/links-list-widget.tsx
@@ -75,7 +75,6 @@ const LinksListWidget: FC<LinksListWidgetProps> = ({
<List
items={getListItems(items)}
kind={kind}
- withMargin={false}
className={`${styles.list} ${styles[listKindClass]} ${className}`}
itemsClassName={styles.list__item}
/>