diff --git a/components/EventList/index.jsx b/components/EventList/index.jsx index 8e7f0a0..58f30c1 100644 --- a/components/EventList/index.jsx +++ b/components/EventList/index.jsx @@ -60,7 +60,7 @@ const EventList = props => { const currentDay = dayjs.utc(day[0].startingTime).add(2, "hour"); return ( - + {currentDay.format("dddd")}{" "} {currentDay.format("D. MMMM")} @@ -76,17 +76,21 @@ const EventList = props => { > {event.image ? ( - + + + ) : ( - + + + )} @@ -179,20 +183,22 @@ const EventDay = styled.h2` const EventLink = styled.a` cursor: pointer; - border-bottom: 2px solid lightgrey; - padding: 10px 0; + padding: 20px 0; display: flex; flex-direction: row; align-items: center; text-decoration: none; color: inherit; + transition: transform 0.2s ease-in-out; &:last-child { border-bottom: 0; } - - &:hover { - text-decoration: underline; + + :hover, + :focus { + transform: scale(1.05); + } } `; @@ -200,9 +206,15 @@ const EventDayListWrapper = styled.div` margin-top: 20px; `; +const EventImageContainer = styled.div` + width: 150px; + height: 120px; + max-width: 25%; +`; + const EventImage = styled.img` - width: 80px; - height: 80px; + width: 150px; + height: 120px; object-fit: cover; `; @@ -225,6 +237,7 @@ const EventTime = styled.div` font-weight: 600; color: ${theme.orange}; margin-right: 10px; + width: 100%; `; const EventPlace = styled.div` diff --git a/components/Filter/Selectors.jsx b/components/Filter/Selectors.jsx index 9589c0a..23eec6f 100644 --- a/components/Filter/Selectors.jsx +++ b/components/Filter/Selectors.jsx @@ -29,6 +29,8 @@ const SelectBox = styled.label` height: 2em; min-width: 100px; flex-grow: 1; + flex-basis: 0; + white-space: nowrap; cursor: pointer; color: ${({ checked }) => (checked ? "white" : "inherit")}; background-color: ${({ checked }) => (checked ? theme.purple : "inherit")}; diff --git a/components/Filter/index.jsx b/components/Filter/index.jsx index 5e05091..ab322d7 100644 --- a/components/Filter/index.jsx +++ b/components/Filter/index.jsx @@ -16,8 +16,7 @@ export default Filter; const Wrapper = styled.div` display: flex; flex-direction: column; - padding: 10px; - border: 3px solid ${theme.purple}; + padding: 10px 0; & > *:not(:first-child) { margin-top: 20px; } diff --git a/pages/events/index.jsx b/pages/events/index.jsx index 31bd5b5..8846901 100644 --- a/pages/events/index.jsx +++ b/pages/events/index.jsx @@ -81,6 +81,12 @@ const Events = props => { ]} defaultSelector={query.category || "-1"} toggles={[ + { + off: "Alle", + on: "Arrangert av Oslo Pride", + isOn: query.official === "true", + callback: value => toggleFilter("official", "true") + }, { off: "Alle", on: "Rullestolvennlig",