mirror of
https://github.com/quepasaevents/qpa-client.git
synced 2023-12-14 05:33:02 +01:00
Improve list item style
This commit is contained in:
parent
4751188ffb
commit
c3ddaf4881
3 changed files with 17 additions and 8 deletions
|
@ -1,7 +1,7 @@
|
|||
const theme = {
|
||||
colors: {
|
||||
lead: '#043b14',
|
||||
secondary: '#FFAD00'
|
||||
secondary: '#FFAD00',
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import styled from "@emotion/styled"
|
||||
import { css } from "qpa-emotion"
|
||||
import {css, Theme} from "qpa-emotion"
|
||||
import * as React from "react"
|
||||
import { hot } from "react-hot-loader"
|
||||
import { useAppContext } from "../../App/Context/AppContext"
|
||||
|
@ -79,9 +79,9 @@ const ListRoot = styled.div``
|
|||
const Items = styled.div``
|
||||
|
||||
const DayPresentation = styled.div`
|
||||
font-size: 18px;
|
||||
//font-size: 14px;
|
||||
text-align: center;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
background-color: ${(props: {theme: Theme}) => props.theme.colors.secondary};
|
||||
padding: 2px 8px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
|
@ -110,7 +110,8 @@ const DayPresentationContainer = styled.div`
|
|||
`
|
||||
const DayItems = styled.div`
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
grid-template-columns: 90px auto;
|
||||
grid-gap: 8px;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"dayname items"
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import Chip from "qpa-components/Chip"
|
||||
import styled, { css } from "qpa-emotion"
|
||||
import styled, {css, Theme} from "qpa-emotion"
|
||||
import * as React from "react"
|
||||
import { hot } from "react-hot-loader"
|
||||
import { Link } from "react-router-dom"
|
||||
|
@ -26,14 +26,14 @@ const ListItem = (props: Props) => {
|
|||
return (
|
||||
<Root className={props.className}>
|
||||
<Time>{startTime}</Time>
|
||||
<Link
|
||||
<Title
|
||||
to={`/o/${sanitizeEventName(event.info.title)}/${event.id}`}
|
||||
css={css`
|
||||
white-space: nowrap;
|
||||
`}
|
||||
>
|
||||
{event.info.title}
|
||||
</Link>
|
||||
</Title>
|
||||
<Location>{event.location.name}</Location>
|
||||
<Address>{event.location.address}</Address>
|
||||
<Tags>
|
||||
|
@ -58,11 +58,19 @@ const Root = styled.div`
|
|||
[line2] auto
|
||||
[tags] auto;
|
||||
`
|
||||
|
||||
const Title = styled(Link)`
|
||||
color: ${(props: {theme: Theme}) => props.theme.colors.lead};
|
||||
font-size: 1.1em;
|
||||
text-decoration: none;
|
||||
`
|
||||
const EditLink = styled(Link)`
|
||||
margin-left: 8px;
|
||||
font-size: 0.6em;
|
||||
grid-row: line2;
|
||||
grid-column: -1;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
`
|
||||
const Time = styled.div`
|
||||
grid-column: time;
|
||||
|
|
Loading…
Reference in a new issue