Skip to content

Commit dff9965

Browse files
falbrufalbru
authored
Improve styling of quotes (#5683)
1 parent 30639ad commit dff9965

File tree

3 files changed

+89
-204
lines changed

3 files changed

+89
-204
lines changed

‎lego-webapp/pages/quotes/Quote.tsx‎

Lines changed: 67 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { Card, Flex } from '@webkom/lego-bricks';
2+
import cx from 'classnames';
13
import { useState } from 'react';
24
import Dropdown from '~/components/Dropdown';
35
import Reactions from '~/components/Reactions';
@@ -58,87 +60,23 @@ const Quote = ({
5860
}
5961

6062
return (
61-
<li className={styles.singleQuote}>
62-
<div className={styles.leftQuote}>
63-
<i
64-
className="fa fa-quote-right"
65-
style={{
66-
fontSize: '100px',
67-
color: 'var(--additive-background)',
68-
marginRight: '30px',
69-
order: '0',
70-
height: '0',
71-
}}
72-
/>
73-
<h3 className={styles.theQuote}>
74-
<a href={`/quotes/${quote.id}`}>{quote.text}</a>
75-
</h3>
76-
</div>
77-
78-
<div className={styles.quoteBottom}>
79-
<span className={styles.quoteSource}>
80-
<i>- {quote.source}</i>
81-
</span>
82-
83-
<div className={styles.bottomRow}>
84-
<div className={styles.quoteDate}>
85-
{<Time time={quote.createdAt} wordsAgo />}
86-
</div>
87-
88-
<div className={styles.bottomRight}>
89-
{actionGrant?.includes('approve') && (
90-
<div className={styles.quoteAdmin}>
91-
<Dropdown
92-
show={displayAdmin}
93-
toggle={toggleDisplayAdmin}
94-
closeOnContentClick
95-
iconName="ellipsis-horizontal"
96-
>
97-
<Dropdown.List>
98-
{currentUser?.username !== quote.createdBy?.username && (
99-
<Dropdown.ListItem>
100-
<button
101-
onClick={() =>
102-
quote.approved
103-
? dispatch(unapprove(quote.id))
104-
: dispatch(approve(quote.id))
105-
}
106-
>
107-
{quote.approved ? 'Fjern godkjenning' : 'Godkjenn'}
108-
</button>
109-
</Dropdown.ListItem>
110-
)}
63+
<Card>
64+
<Flex justifyContent="space-between">
65+
<a className={styles.quoteTitle} href={`/quotes/${quote.id}`}>
66+
{quote.text}
67+
</a>
68+
<div className={cx(styles.quoteDate, styles.largeViewportOnly)}>
69+
{<Time time={quote.createdAt} wordsAgo />}
70+
</div>
71+
</Flex>
11172

112-
{!deleting ? (
113-
<Dropdown.ListItem danger>
114-
<button
115-
onClick={(e) => {
116-
if (e) {
117-
e.preventDefault();
118-
e.stopPropagation();
119-
}
73+
<i>- {quote.source}</i>
12074

121-
setDeleting(!deleting);
122-
}}
123-
>
124-
Slett
125-
</button>
126-
</Dropdown.ListItem>
127-
) : (
128-
<Dropdown.ListItem>
129-
<button onClick={() => dispatch(deleteQuote(quote.id))}>
130-
Er du sikker?
131-
</button>
132-
</Dropdown.ListItem>
133-
)}
134-
</Dropdown.List>
135-
</Dropdown>
136-
</div>
137-
)}
138-
</div>
139-
</div>
75+
<div className={cx(styles.quoteDate, styles.smallViewportOnly)}>
76+
{<Time time={quote.createdAt} wordsAgo />}
14077
</div>
141-
<div className={styles.quoteReactions}>
78+
79+
<Flex justifyContent={'space-between'} className={styles.bottomBar}>
14280
<Reactions emojis={mappedEmojis} contentTarget={quote.contentTarget}>
14381
{quote.reactionsGrouped.map((reaction) => (
14482
<Reaction
@@ -148,8 +86,57 @@ const Quote = ({
14886
/>
14987
))}
15088
</Reactions>
151-
</div>
152-
</li>
89+
{actionGrant?.includes('approve') && (
90+
<div>
91+
<Dropdown
92+
show={displayAdmin}
93+
toggle={toggleDisplayAdmin}
94+
closeOnContentClick
95+
iconName="ellipsis-horizontal"
96+
>
97+
<Dropdown.List>
98+
{currentUser?.username !== quote.createdBy?.username && (
99+
<Dropdown.ListItem>
100+
<button
101+
onClick={() =>
102+
quote.approved
103+
? dispatch(unapprove(quote.id))
104+
: dispatch(approve(quote.id))
105+
}
106+
>
107+
{quote.approved ? 'Fjern godkjenning' : 'Godkjenn'}
108+
</button>
109+
</Dropdown.ListItem>
110+
)}
111+
112+
{!deleting ? (
113+
<Dropdown.ListItem danger>
114+
<button
115+
onClick={(e) => {
116+
if (e) {
117+
e.preventDefault();
118+
e.stopPropagation();
119+
}
120+
121+
setDeleting(!deleting);
122+
}}
123+
>
124+
Slett
125+
</button>
126+
</Dropdown.ListItem>
127+
) : (
128+
<Dropdown.ListItem>
129+
<button onClick={() => dispatch(deleteQuote(quote.id))}>
130+
Er du sikker?
131+
</button>
132+
</Dropdown.ListItem>
133+
)}
134+
</Dropdown.List>
135+
</Dropdown>
136+
</div>
137+
)}
138+
</Flex>
139+
</Card>
153140
);
154141
};
155142

‎lego-webapp/pages/quotes/QuoteList.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { Flex } from '@webkom/lego-bricks';
12
import { useState } from 'react';
23
import Quote from './Quote';
34
import type { EntityId } from '@reduxjs/toolkit';
@@ -13,7 +14,7 @@ const QuoteList = ({ quotes, actionGrant }: Props) => {
1314
const [displayAdminId, setDisplayAdminId] = useState<EntityId>();
1415

1516
return (
16-
<ul>
17+
<Flex column gap={'var(--spacing-lg)'}>
1718
{quotes.filter(Boolean).map((quote) => (
1819
<Quote
1920
actionGrant={actionGrant}
@@ -27,7 +28,7 @@ const QuoteList = ({ quotes, actionGrant }: Props) => {
2728
displayAdmin={quote.id === displayAdminId}
2829
/>
2930
))}
30-
</ul>
31+
</Flex>
3132
);
3233
};
3334

‎lego-webapp/pages/quotes/Quotes.module.css‎

Lines changed: 19 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -1,145 +1,42 @@
11
@import url('styles/custom-media.css');
22

3-
.addQuote {
4-
max-width: 550px;
5-
}
6-
7-
/* Detail */
8-
9-
.quoteBottom {
10-
width: 100%;
11-
margin-top: var(--spacing-md);
12-
padding-bottom: var(--spacing-xs);
13-
margin-left: 130px;
14-
display: flex;
15-
flex-wrap: wrap;
16-
justify-content: space-between;
17-
order: 3;
18-
19-
@media (--small-viewport) {
20-
padding: 0 0 var(--spacing-lg);
21-
margin: var(--spacing-lg) 0 0;
22-
}
23-
}
24-
25-
.singleQuote {
26-
padding-right: var(--spacing-md);
27-
background-repeat: no-repeat;
28-
width: 100%;
29-
display: flex;
30-
flex-flow: row wrap;
31-
margin-bottom: var(--spacing-lg);
32-
33-
&:last-child .quoteBottom {
34-
border-bottom: none;
35-
}
36-
}
37-
38-
.leftQuote {
39-
display: flex;
40-
width: 100%;
41-
order: 1;
42-
}
43-
44-
.leftQuote i {
45-
@media (--small-viewport) {
46-
display: none;
47-
}
48-
}
49-
50-
.singleQuote h3 {
51-
font-weight: 300;
52-
font-size: 30px;
53-
margin: 0;
54-
line-height: 35px;
55-
}
56-
57-
.theQuote {
58-
padding-left: 5px;
59-
}
60-
61-
.theQuote a {
3+
.quoteTitle {
624
color: var(--lego-font-color);
63-
64-
&:hover {
65-
color: var(--color-orange-6);
66-
}
67-
}
68-
69-
.quoteSource {
705
font-size: var(--font-size-lg);
71-
order: 1;
72-
margin-top: -5px;
73-
width: 70%;
74-
line-height: 25px;
75-
}
76-
77-
.quoteSource i {
78-
font-size: var(--font-size-lg) !important;
79-
}
80-
81-
.bottomRow {
82-
display: flex;
83-
justify-content: space-between;
84-
width: 100%;
85-
min-width: 140px;
86-
order: 2;
87-
}
88-
89-
.bottomRight {
90-
order: 2;
91-
display: flex;
92-
flex-direction: row;
6+
margin-bottom: var(--spacing-xs);
7+
font-weight: bold;
938
}
949

9510
.quoteDate {
9611
color: var(--secondary-font-color);
9712
font-size: var(--font-size-sm);
98-
order: 1;
99-
margin-top: 3px;
13+
flex-shrink: 0;
14+
margin-left: var(--spacing-xs);
10015
}
10116

102-
.quoteAdmin {
103-
order: 2;
17+
.smallViewportOnly {
18+
display: none;
10419
}
10520

106-
.quoteReactions {
107-
order: 4;
108-
margin-left: 125px;
21+
.largeViewportOnly {
22+
display: block;
10923
}
11024

111-
@media (--small-viewport) {
112-
.sortQuote {
113-
margin: 0;
114-
}
115-
116-
.singleQuote {
117-
width: 100%;
118-
flex-direction: column;
119-
}
120-
121-
.leftQuote {
122-
width: 100%;
123-
}
124-
125-
.quoteAdmin {
126-
margin: 0;
127-
width: 100%;
128-
}
25+
.bottomBar {
26+
margin-top: var(--spacing-lg);
27+
}
12928

29+
@media (--small-viewport) {
13030
.quoteDate {
131-
margin-top: var(--spacing-sm);
31+
display: none;
13232
}
13333

134-
.theQuote {
135-
width: 100%;
34+
.smallViewportOnly {
35+
display: block;
36+
margin-top: var(--spacing-xs);
13637
}
13738

138-
.quoteReactions {
139-
margin-left: 0;
39+
.largeViewportOnly {
40+
display: none;
14041
}
14142
}
142-
143-
.innerPreview {
144-
width: 360px;
145-
}

0 commit comments

Comments
 (0)