From 1502be5be5367f7af38164b35abedc2dcaae3355 Mon Sep 17 00:00:00 2001
From: elisejakob <hei@elisejakob.no>
Date: Thu, 1 Aug 2019 13:22:59 +0200
Subject: [PATCH] style event organizers and filtering, adjust spacing

---
 src/components/EventList.js      |   1 +
 src/css/blog.scss                |  10 +--
 src/css/events.scss              | 133 ++++++++++++++++++++++++++++---
 src/css/page.scss                |  17 +++-
 src/pages/program.js             |   3 +-
 src/templates/event-organizer.js |   2 +-
 6 files changed, 143 insertions(+), 23 deletions(-)

diff --git a/src/components/EventList.js b/src/components/EventList.js
index 79162f2..dac0eb9 100644
--- a/src/components/EventList.js
+++ b/src/components/EventList.js
@@ -161,6 +161,7 @@ const EventList = props => {
       {children !== null && children}
       {showFilter && organizers && (
         <div className="event-list-filter">
+          <div className="event-list-filter-heading">Se arrangementer av</div>
           <Dropdown
             className="event-list-filter-dropdown"
             options={organizerOptions}
diff --git a/src/css/blog.scss b/src/css/blog.scss
index c7544f6..bd092cd 100644
--- a/src/css/blog.scss
+++ b/src/css/blog.scss
@@ -11,8 +11,8 @@
 }
 
 .post {
-  width: calc(33.333333% - 1.2rem);
-  margin: 0 0.6rem 1rem;
+  width: calc(33.333333% - 1.6rem);
+  margin: 0 .8rem 1rem;
   position: relative;
   text-decoration: none;
   color: $color-black;
@@ -77,7 +77,7 @@
   }
 
   @media (max-width: $media-l) {
-    width: calc(50% - 1.2rem);
+    width: calc(50% - 1.6rem);
     &:nth-of-type(3) {
       display: none;
     }
@@ -93,7 +93,7 @@
   }
 
   @media (min-width: $media-xl) {
-    width: 23%;
+    width: calc(25% - 1.6rem);
     &:last-of-type {
       display: block;
     }
@@ -106,7 +106,7 @@
   color: $color-black;
   padding-bottom: 1rem;
   display: flex;
-  width: 93.999999%;
+  width: calc(100% - 3.2rem);
   margin: 0 auto;
   a {
     display: inline-block;
diff --git a/src/css/events.scss b/src/css/events.scss
index dd18253..f959c75 100644
--- a/src/css/events.scss
+++ b/src/css/events.scss
@@ -4,16 +4,16 @@
 }
 
 .events {
-  padding: 0;
+  padding: 2rem 0 0;
 }
 
 .event-list {
   display: flex;
   flex-wrap: wrap;
   padding: 0 1rem 1rem;
-}
-
-.event-list {
+  @media (max-width: $media-s) {
+    padding: 0 0 1rem;
+  }
   .event-types {
     display: none;
   }
@@ -26,15 +26,19 @@
 
   .event-group-header {
     text-align: left;
-    border-bottom: 2px solid $color-orange;
-    color: $color-orange;
-    margin: 0 1.5rem 1rem;
+    border-bottom: 2px solid $color-yellow;
+    color: $color-yellow;
+    margin: 0 1.5rem 0.5rem;
     padding: 0.4rem 2rem 0.4rem 0;
     text-transform: uppercase;
     font-weight: 700;
     font-size: .8rem;
     line-height: 1.2;
     letter-spacing: 0.05em;
+
+    @media (max-width: $media-s) {
+      margin: 0 0 0.5rem;
+    }
   }
 
   .event-meta, .event-date-weekday, .event-date-day-month {
@@ -89,7 +93,7 @@
     font-size: 1.5rem;
     font-weight: 700;
     line-height: 1.1;
-    margin: 0.8rem 0.6rem 0.6rem;
+    margin: 1rem 0.6rem 0.8rem;
   }
 
   .event-date {
@@ -135,6 +139,7 @@
     width: 100%;
     margin: 0 0 .8rem;
     flex-direction: row;
+    align-items: flex-start;
 
     &:nth-child(7),
     &:nth-child(8) {
@@ -159,7 +164,6 @@
   }
 
   &-content {
-    max-width: $width-m;
     margin: 0 auto;
 
     img, div {
@@ -325,7 +329,7 @@
     display: block;
     width: calc(50% - 0.5rem);
     margin: 0;
-    padding: 3px;
+    padding: 2px;
     position: relative;
     z-index: 9001;
 
@@ -349,7 +353,7 @@
 
   .ticket-url {
     background: $color-orange;
-    border: 3px solid $color-orange;
+    border: 2px solid $color-orange;
     span {
       background: $color-orange;
     }
@@ -360,7 +364,7 @@
 
   .facebook-url {
     background: $color-yellow;
-    border: 3px solid $color-yellow;
+    border: 2px solid $color-yellow;
     span {
       background: $color-yellow;
     }
@@ -382,4 +386,109 @@
       }
     }
   }
+}
+
+.event-organizer {
+  &-info {
+    max-width: $width-m;
+    margin: 0 auto;
+    font-size: 1rem;
+    line-height: 1.3;
+    text-align: center;
+  }
+  &-read-more {
+    a {
+      display: block;
+      width: 100%;
+      color: $color-orange;
+      text-decoration: underline;
+      font-size: 1rem;
+      text-align: center;
+    }
+  }
+}
+
+.event-list-filter {
+  color: $color-white;
+  width: 100%;
+  max-width: $width-s;
+  margin: 2rem auto;
+  padding: 0 1rem;
+  font-size: $font-s;
+
+  &-heading {
+    color: $color-orange;
+  }
+
+  @media (max-width: $media-s) {
+    max-width: none;
+  }
+}
+
+.Dropdown-root {
+  position: relative;
+  font-weight: 700;
+}
+
+.Dropdown-control {
+  position: relative;
+  overflow: hidden;
+  background: $color-black;
+  border: 2px solid $color-orange;
+  color: $color-white;
+  outline: none;
+  padding: .5rem .8rem .6rem;
+  transition: all .2s ease-in-out;
+  cursor: pointer;
+}
+
+.Dropdown-arrow {
+  border-color: $color-orange transparent transparent;
+  border-style: solid;
+  border-width: 5px 5px 0;
+  content: ' ';
+  display: block;
+  height: 0;
+  margin-top: -2.5px;
+  position: absolute;
+  right: 1rem;
+  top: calc(50%);
+  width: 0;
+}
+
+.is-open .Dropdown-arrow {
+  border-color: transparent transparent $color-orange;
+  border-width: 0 5px 5px;
+}
+
+.Dropdown-menu {
+  background: $color-black;
+  border: 2px solid $color-orange;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
+  box-sizing: border-box;
+  margin-top: -1px;
+  max-height: 300px;
+  overflow-y: auto;
+  position: absolute;
+  top: 100%;
+  width: 100%;
+  z-index: 1000;
+  -webkit-overflow-scrolling: touch;
+}
+
+.Dropdown-option {
+  cursor: pointer;
+  display: block;
+  padding: .6rem .8rem;
+  line-height: 1.1;
+  color: $color-orange;
+
+  &:hover {
+    color: $color-white;
+  }
+
+  &.is-selected {
+    color: darken($color-orange, 30%);
+    cursor: default;
+  }
 }
\ No newline at end of file
diff --git a/src/css/page.scss b/src/css/page.scss
index 67f2f5a..e66ff01 100644
--- a/src/css/page.scss
+++ b/src/css/page.scss
@@ -2,7 +2,8 @@
   display: block;
   position: relative;
   z-index: 5;
-  margin: 0 auto 3rem;
+  margin: 0 auto 2rem;
+  padding: 0 1rem;
   font-weight: 400;
   font-size: 3.6rem;
   text-transform: uppercase;
@@ -14,9 +15,13 @@
   &:hover {
     color: inherit;
   }
-}
-h1.section-title {
-  margin-top: 2rem;
+
+  @media (max-width: $media-m) {
+    font-size: 2.8rem;
+  }
+  @media (max-width: $media-s) {
+    font-size: 2rem;
+  }
 }
 
 .page-title {
@@ -26,7 +31,11 @@ h1.section-title {
   font-weight: 400;
   text-align: center;
   margin-bottom: 2rem;
+  padding: 0 1rem;
 
+  @media (max-width: $media-m) {
+    font-size: 2.8rem;
+  }
   @media (max-width: $media-s) {
     font-size: 2rem;
   }
diff --git a/src/pages/program.js b/src/pages/program.js
index 587e520..483fcbc 100644
--- a/src/pages/program.js
+++ b/src/pages/program.js
@@ -15,7 +15,8 @@ export default class EventProgram extends React.Component {
         <Helmet title="Program" />
         <EventList
           events={events}
-          title="Dette skjer"
+          preTitle="Program"
+          title="Dette skjer på Neuf"
           groupBy="month"
           showFilter
         />
diff --git a/src/templates/event-organizer.js b/src/templates/event-organizer.js
index b97efa2..62ad55c 100644
--- a/src/templates/event-organizer.js
+++ b/src/templates/event-organizer.js
@@ -21,7 +21,7 @@ export default class EventOrganizerPage extends React.Component {
         <Helmet title={`${name} | Program`} />
         <EventList
           events={events}
-          preTitle="Kommende arrangementer fra"
+          preTitle="Program"
           title={name}
           groupBy="month"
           filterOrganizer={slug}