Convert .page-title:before to its own class

src/components/EventList.js

@@ -114,6 +114,7 @@ const EventList = props => {
   const {
     events,
     title,
+    preTitle,
     classes,
     onlyUpcoming,
     maxEvents,
@@ -155,8 +156,9 @@ const EventList = props => {
 
   return (
     <section className={classNames('events', classes)}>
+      {preTitle && <div className="page-title-pre">{preTitle}</div>}
       {title && <h1 className="section-title">{title}</h1>}
-      {children}
+      {children !== null && children}
       {showFilter && organizers && (
         <div className="event-list-filter">
           <Dropdown
@@ -203,6 +205,7 @@ EventList.propTypes = {
   children: PropTypes.shape({}),
   events: PropTypes.arrayOf(PropTypes.object),
   classes: PropTypes.string,
+  preTitle: PropTypes.string,
   title: PropTypes.string,
   onlyUpcoming: PropTypes.bool,
   maxEvents: PropTypes.number,
@@ -214,6 +217,7 @@ EventList.propTypes = {
 }
 
 EventList.defaultProps = {
+  preTitle: null,
   onlyUpcoming: true,
   maxEvents: 0,
   groupBy: null,

src/css/associations.scss

@@ -50,24 +50,9 @@
 }
 
 .association-page {
-  .page-title {
-    &:before {
-      content: "Forening";
-      display: block;
-      font-size: $font-s;
-      font-weight: 700;
-      color: $color-red;
-    }
-  }
-
   .association-logo {
     width: $width-s;
     max-width: 100%;
     margin: 1rem auto;
   }
-
-  .association-type {
-    max-width: $width-m;
-    margin: 0 auto;
-  }
 }

src/css/page.scss

@@ -32,6 +32,15 @@ h1.section-title {
   }
 }
 
+.page-title-pre {
+  display: block;
+  font-size: $font-s;
+  font-weight: 700;
+  color: $color-red;
+  text-transform: uppercase;
+  text-align: center;
+}
+
 .wp-content {
   img, div, ul, p, h1, h2, h3, h4, h5, h6, span, blockquote {
     max-width: $width-m;

src/templates/association.js

@@ -14,6 +14,7 @@ export const AssociationTemplate = ({
   const hasFeaturedMedia = featuredMedia && !!featuredMedia.localFile
   return (
     <section className="association-page">
+      <div className="page-title-pre">{type}</div>
       <h1 className="page-title">{title}</h1>
       {hasFeaturedMedia && (
         <div className="association-logo">
@@ -25,7 +26,6 @@ export const AssociationTemplate = ({
           <a href={homepage}>Nettside</a>
         </div>
       )}
-      <div className="association-type">Type: {type}</div>
       <div
         className="association-content wp-content"
         dangerouslySetInnerHTML={{ __html: content }}

src/templates/event-organizer.js

@@ -21,7 +21,8 @@ export default class EventOrganizerPage extends React.Component {
         <Helmet title={`${name} | Program`} />
         <EventList
           events={events}
-          title={`Program for ${name}`}
+          preTitle="Kommende arrangementer fra"
+          title={name}
           groupBy="month"
           filterOrganizer={slug}
           showFilter