From 05bee55ca6a165fa439f27ee3a0153aaaa977f52 Mon Sep 17 00:00:00 2001 From: Christian Knappskog Date: Wed, 5 Jun 2019 21:31:29 +0200 Subject: [PATCH 1/6] Replace Ekstern arena with rockefeller. Replace lines with padding in program list. --- components/EventList/index.jsx | 9 +++++---- components/Filter/Selectors.jsx | 4 ---- components/Filter/index.jsx | 3 +-- pages/events/index.jsx | 10 ++++++---- 4 files changed, 12 insertions(+), 14 deletions(-) diff --git a/components/EventList/index.jsx b/components/EventList/index.jsx index 8cbbeab..f195206 100644 --- a/components/EventList/index.jsx +++ b/components/EventList/index.jsx @@ -171,8 +171,7 @@ 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; @@ -193,8 +192,9 @@ const EventDayListWrapper = styled.div` `; const EventImage = styled.img` - width: 80px; - height: 80px; + width: 150px; + height: 120px; + max-width: 25%; object-fit: cover; `; @@ -217,6 +217,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..8339d37 100644 --- a/components/Filter/Selectors.jsx +++ b/components/Filter/Selectors.jsx @@ -32,8 +32,6 @@ const SelectBox = styled.label` cursor: pointer; color: ${({ checked }) => (checked ? "white" : "inherit")}; background-color: ${({ checked }) => (checked ? theme.purple : "inherit")}; - border-bottom: 2px solid ${theme.purple}; - border-right: 2px solid ${theme.purple}; display: flex; justify-content: center; align-items: center; @@ -58,8 +56,6 @@ const SelectorTitle = styled.div` const SelectorList = styled.div` display: flex; flex-wrap: wrap; - border-top: 2px solid ${theme.purple}; - border-left: 2px solid ${theme.purple}; `; const SelectorLabel = styled.span` 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 980f590..2afbdaf 100644 --- a/pages/events/index.jsx +++ b/pages/events/index.jsx @@ -27,6 +27,8 @@ const arenaNameMapper = arena => { return "Pride House"; case "4": return "Pride Art"; + case "5": + return "Rockefeller"; default: return "Ukjent"; } @@ -49,7 +51,7 @@ const Events = props => { resetFilter("category") }, @@ -74,9 +76,9 @@ const Events = props => { callback: () => setFilter("category", "4") }, { - name: "Eksterne", - selected: query.category === "0", - callback: () => setFilter("category", "0") + name: "Rockefeller", + selected: query.category === "5", + callback: () => setFilter("category", "5") } ]} defaultSelector={query.category || "-1"} From ca368d27c1530f397774c9cb1b236b7536d6bc51 Mon Sep 17 00:00:00 2001 From: Christian Knappskog Date: Thu, 6 Jun 2019 20:21:32 +0200 Subject: [PATCH 2/6] New hover style for event links, new isOfficial-filter. Revert button borders. --- components/EventList/index.jsx | 9 ++++++--- components/Filter/Selectors.jsx | 4 ++++ pages/events/index.jsx | 8 +++++++- 3 files changed, 17 insertions(+), 4 deletions(-) diff --git a/components/EventList/index.jsx b/components/EventList/index.jsx index f195206..9e0e5b8 100644 --- a/components/EventList/index.jsx +++ b/components/EventList/index.jsx @@ -177,13 +177,16 @@ const EventLink = styled.a` 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); + } } `; diff --git a/components/Filter/Selectors.jsx b/components/Filter/Selectors.jsx index 8339d37..9589c0a 100644 --- a/components/Filter/Selectors.jsx +++ b/components/Filter/Selectors.jsx @@ -32,6 +32,8 @@ const SelectBox = styled.label` cursor: pointer; color: ${({ checked }) => (checked ? "white" : "inherit")}; background-color: ${({ checked }) => (checked ? theme.purple : "inherit")}; + border-bottom: 2px solid ${theme.purple}; + border-right: 2px solid ${theme.purple}; display: flex; justify-content: center; align-items: center; @@ -56,6 +58,8 @@ const SelectorTitle = styled.div` const SelectorList = styled.div` display: flex; flex-wrap: wrap; + border-top: 2px solid ${theme.purple}; + border-left: 2px solid ${theme.purple}; `; const SelectorLabel = styled.span` diff --git a/pages/events/index.jsx b/pages/events/index.jsx index 2afbdaf..265db2b 100644 --- a/pages/events/index.jsx +++ b/pages/events/index.jsx @@ -51,7 +51,7 @@ const Events = props => { resetFilter("category") }, @@ -83,6 +83,12 @@ const Events = props => { ]} defaultSelector={query.category || "-1"} toggles={[ + { + off: "Alle", + on: "Kun Oslo Pride-arrangementer", + isOn: query.official === "true", + callback: value => toggleFilter("official", "true") + }, { off: "Alle", on: "Universelt utformet", From 0547d947dc7570415df27e347393c0f4c4fe7b3c Mon Sep 17 00:00:00 2001 From: Christian Knappskog Date: Thu, 6 Jun 2019 20:56:52 +0200 Subject: [PATCH 3/6] Revert rockefeller --- pages/events/index.jsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/pages/events/index.jsx b/pages/events/index.jsx index 265db2b..ca5e738 100644 --- a/pages/events/index.jsx +++ b/pages/events/index.jsx @@ -27,8 +27,6 @@ const arenaNameMapper = arena => { return "Pride House"; case "4": return "Pride Art"; - case "5": - return "Rockefeller"; default: return "Ukjent"; } @@ -76,9 +74,9 @@ const Events = props => { callback: () => setFilter("category", "4") }, { - name: "Rockefeller", - selected: query.category === "5", - callback: () => setFilter("category", "5") + name: "Eksterne", + selected: query.category === "0", + callback: () => setFilter("category", "0") } ]} defaultSelector={query.category || "-1"} From 808d1444b770964e0681cd6666933fd64af97b0e Mon Sep 17 00:00:00 2001 From: Christian Knappskog Date: Mon, 10 Jun 2019 10:11:59 +0200 Subject: [PATCH 4/6] Fix z-index bug in sticky day header component --- components/EventList/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/EventList/index.jsx b/components/EventList/index.jsx index e996eb6..fd3e85b 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")} From a32d2be58a9189f823e06477ed2a5720f0e53d85 Mon Sep 17 00:00:00 2001 From: Christian Knappskog Date: Mon, 10 Jun 2019 10:22:11 +0200 Subject: [PATCH 5/6] Achieve pixel-perfect alignment for filter-buttons --- components/Filter/Selectors.jsx | 2 ++ 1 file changed, 2 insertions(+) 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")}; From 03aa56932dd0a3457daf45f00df668e284d92623 Mon Sep 17 00:00:00 2001 From: Christian Knappskog Date: Tue, 11 Jun 2019 18:23:34 +0200 Subject: [PATCH 6/6] Fix image thumbnails --- components/EventList/index.jsx | 31 ++++++++++++++++++++----------- pages/events/index.jsx | 2 +- 2 files changed, 21 insertions(+), 12 deletions(-) diff --git a/components/EventList/index.jsx b/components/EventList/index.jsx index fd3e85b..58f30c1 100644 --- a/components/EventList/index.jsx +++ b/components/EventList/index.jsx @@ -76,17 +76,21 @@ const EventList = props => { > {event.image ? ( - + + + ) : ( - + + + )} @@ -202,10 +206,15 @@ const EventDayListWrapper = styled.div` margin-top: 20px; `; -const EventImage = styled.img` +const EventImageContainer = styled.div` width: 150px; height: 120px; max-width: 25%; +`; + +const EventImage = styled.img` + width: 150px; + height: 120px; object-fit: cover; `; diff --git a/pages/events/index.jsx b/pages/events/index.jsx index ca5e738..4c6c767 100644 --- a/pages/events/index.jsx +++ b/pages/events/index.jsx @@ -83,7 +83,7 @@ const Events = props => { toggles={[ { off: "Alle", - on: "Kun Oslo Pride-arrangementer", + on: "Arrangert av Oslo Pride", isOn: query.official === "true", callback: value => toggleFilter("official", "true") },