maverick/flex-template-web
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/flex-template-web.git synced 2026-07-27 19:42:11 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix baseline alignment

Browse source
This commit is contained in:
Hannu Lyytikainen 2017-11-16 14:06:35 +02:00
parent 27484e42ca
commit e8be13a7e9
3 changed files with 55 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
src/components/Messages/Messages.css
View file

@ -82,13 +82,45 @@
text-align: right;
}
.transitionItem {
margin-bottom: 34px;
/* Clearfix */
@apply --clearfix;
@media (--viewportMedium) {
margin-bottom: 40px;
}
&:last-of-type {
margin-bottom: 0;
}
}
.transition {
display: flex;
flex-direction: row;
margin: -1px 0 1px 0;
@media (--viewportMedium) {
margin: 0;
}
}
.transitionContent {
margin: 0;
/* Font */
font-family: 'sofiapro', Helvetica, Arial, sans-serif;
font-weight: var(--fontWeightRegular);
font-size: 16px;
line-height: 20px;
@media (--viewportMedium) {
font-size: 20px;
line-height: 32px;
margin: 1px 0 -1px 0;
}
}
.transitionDate {
@apply --marketplaceMessageDateFontStyles;

24
src/components/Messages/Messages.example.js
View file

@ -52,11 +52,21 @@ export const WithTransitions = {
messages: [
createMessage(
'msg1',
{ at: new Date(Date.UTC(2017, 10, 9, 8, 12)) },
{ at: new Date(Date.UTC(2017, 10, 9, 8, 11)) },
{ sender: createUser('user1') }
),
createMessage(
'msg2',
{ at: new Date(Date.UTC(2017, 10, 9, 8, 14)) },
{ sender: createUser('user1') }
),
createMessage(
'msg3',
{ at: new Date(Date.UTC(2017, 10, 9, 8, 17)) },
{ sender: createUser('user2') }
),
createMessage(
'msg4',
{ at: new Date(Date.UTC(2017, 10, 12, 13, 20)) },
{ sender: createUser('user2') }
),
@ -72,10 +82,20 @@ export const WithTransitions = {
transition: propTypes.TX_TRANSITION_PREAUTHORIZE,
}),
createTxTransition({
at: new Date(Date.UTC(2017, 10, 9, 10, 33)),
at: new Date(Date.UTC(2017, 10, 9, 8, 12)),
by: propTypes.TX_TRANSITION_ACTOR_PROVIDER,
transition: propTypes.TX_TRANSITION_ACCEPT,
}),
createTxTransition({
at: new Date(Date.UTC(2017, 10, 9, 10, 33)),
by: propTypes.TX_TRANSITION_ACTOR_PROVIDER,
transition: propTypes.TX_TRANSITION_DECLINE,
}),
createTxTransition({
at: new Date(Date.UTC(2017, 10, 9, 10, 34)),
by: propTypes.TX_TRANSITION_ACTOR_PROVIDER,
transition: propTypes.TX_TRANSITION_MARK_DELIVERED,
}),
],
}),
currentUser: createCurrentUser('user2'),

3
src/components/Messages/Messages.js
View file

@ -192,9 +192,8 @@ export const MessagesComponent = props => {
};
const transitionListItem = transition => {
const classes = classNames(css.messageItem, css.transition);
return (
<li key={transition.transition} className={classes}>
<li key={transition.transition} className={css.transitionItem}>
{transitionComponent(transition)}
</li>
);