Added bootstrap 4 to project. Fleshing out landing page styles

config/webpack/dev.js

@@ -38,10 +38,12 @@ export default {
             {test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff"},
             {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream"},
             {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file"},
-            {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml"}
+            {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml"},
+            {test: /\.(png|jpg)$/, loader: 'url-loader?limit=2048'}
         ]
     },
     plugins: [
+        new webpack.HotModuleReplacementPlugin(),
         new webpack.ProvidePlugin({
             $: "jquery",
             jQuery: "jquery",
@@ -50,7 +52,6 @@ export default {
         new HtmlWebpackPlugin({
             inject: true,
             templateContent: indexHtml
-        }),
-        new webpack.HotModuleReplacementPlugin()
+        })
     ]
 };

package.json

@@ -12,6 +12,7 @@
     "app-module-path": "^1.0.5",
     "babel-preset-stage-2": "^6.1.18",
     "body-parser": "^1.14.1",
+    "bootstrap": "^4.0.0-alpha.2",
     "connect-history-api-fallback": "^1.1.0",
     "cookie-parser": "^1.4.0",
     "cookie-session": "^2.0.0-alpha.1",
@@ -38,13 +39,11 @@
     "react-loader": "^2.0.0",
     "react-redux": "^4.0.5",
     "react-router": "^1.0.2",
-    "react-router-bootstrap": "^0.19.3",
     "react-tap-event-plugin": "^0.2.1",
     "redux": "^3.0.5",
     "redux-simple-router": "^1.0.2",
     "redux-thunk": "^1.0.2",
-    "typeahead.js": "^0.11.1",
-    "underscore": "^1.8.3"
+    "typeahead.js": "^0.11.1"
   },
   "devDependencies": {
     "babel": "^6.1.18",

src/assets/main.scss

@@ -1,4 +1,17 @@
 @import "fonts";
+@import "node_modules/bootstrap/scss/bootstrap-reboot.scss";
+@import "node_modules/bootstrap/scss/bootstrap-grid.scss";
+
+html, body {
+    width: 100%;
+    padding: 0;
+    margin: 0;
+
+    background-color: #f7f7f7;
+
+    //font-family: "KarbidComp", Roboto, "Segoe UI";
+    font: normal normal normal 18px/1.2 "KarbidComp", Roboto, "Segoe UI", Calibri, sans-serif;
+}
 
 .material-icons {
     position: relative;
@@ -7,6 +20,21 @@
     padding-right: 10px;
 }
 
-#content {
+.content {
+
+}
+
+h1,h2,h3 {
+    color: #757575;
+}
+
+h1,h2 {
+    margin-top: 110px;
+    margin-bottom: 40px;
+
+    font-weight: 300;
+}
 
+h1,h2 {
+    font-size: 31px;
 }

src/components/EventGrid/index.js

@@ -0,0 +1,52 @@
+import React from 'react'
+import { Link } from 'react-router'
+import { connect } from 'react-redux'
+import moment from 'moment'
+
+import defaultThumbnail from 'src/assets/event_default_thumbnail.jpg'
+
+require('!style!css!sass!./index.scss');
+
+let dateFormat = function(timeStr) {
+    return timeStr ? moment(timeStr).format('YYYY-MM-DD') : ''
+}
+
+let EventItem = (props) => {
+
+    let name = (
+        props.event.name.fi || props.event.name.en || props.event.name.sv ||
+        props.event.headline.fi || props.event.headline.en || props.event.headline.sv
+    )
+
+    let url = "/event/update/" + encodeURIComponent(props.event['@id'])
+
+    let thumbnailStyle = {
+        backgroundImage: 'url(' + (props.event.image || defaultThumbnail) + ')'
+    }
+
+    return (
+        <Link to={url}>
+            <div className="col-xs-4" key={ props.event['@id'] }>
+                <div className="event-item">
+                    <div className="thumbnail" style={thumbnailStyle} />
+                    <div className="name">{name}</div>
+                </div>
+            </div>
+        </Link>
+    )
+}
+
+let EventGrid = (props) => {
+
+    let gridItems = props.events.map(function(event) {
+        return (<EventItem event={event} key={event.id} />)
+    })
+
+    return (
+        <div className="row event-grid">
+            {gridItems}
+        </div>
+    )
+}
+
+export default connect()(EventGrid)

src/components/EventGrid/index.scss

@@ -0,0 +1,45 @@
+.event-item {
+    position: relative;
+
+    height: 228px;
+
+    margin-top: 15px;
+    margin-bottom: 15px;
+    overflow: hidden;
+
+    .thumbnail {
+        position: absolute;
+        top: 0;
+        left: 0;
+
+        width: 100%;
+        height: 100%;
+
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: 50% 50%;
+    }
+
+    .name {
+        font-family: 'Roboto', sans-serif;
+
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+
+        color: #ffffff;
+        font-size: 22px;
+        font-weight: 400;
+
+        position: absolute;
+        bottom: 0;
+        left: 0;
+
+        height: 77px;
+        width: 100%;
+
+        padding-left: 22px;
+
+        background: rgba(0,0,0,0.5);
+    }
+}

src/components/FilterableEventTable/index.js

@@ -56,46 +56,17 @@ class FilterableEventTable extends React.Component {
     constructor(props) {
         super(props)
         this.state = {
-            filterText: '',
-            startDate: moment().startOf('month'),
-            endDate: moment().endOf('month'),
             apiErrorMsg: ''
         }
     }
 
-    handleUserInput(filterText) {
-        return this.setState({
-            filterText: filterText
-        })
-    }
-
-    handleDateRangePickerEvent(event, picker) {
-        if (event.type === 'apply') {
-            this.setState({
-                startDate: picker.startDate,
-                endDate: picker.endDate
-            })
-            return this.updateTable()
-        }
-    }
-
-    updateTable() {
-        if (!this.state.filterText) {
-            return
-        }
-        else {
-            this.props.dispatch(fetchEvents(this.state.filterText, this.state.startDate, this.state.endDate))
-            return
-        }
-    }
-
     render() {
         let results = null
         if (this.props.events.length > 0) {
             results = (
                 <div>
                     <hr />
-                    <EventTable events={this.props.events} filterText={this.state.filterText} />
+                    <EventTable events={this.props.events} filterText={''} />
                 </div>
             )
         }
@@ -104,6 +75,7 @@ class FilterableEventTable extends React.Component {
         let errorStyle = {
             color: 'red !important'
         }
+
         if (this.props.apiErrorMsg.length > 0) {
             err = (
                 <span style={errorStyle}>
@@ -114,14 +86,6 @@ class FilterableEventTable extends React.Component {
 
         return (
             <div style={{ padding: '0em 2em 0.5em 0em'}} >
-                <SearchBar
-                    filterText={this.state.filterText}
-                    startDate={this.state.startDate}
-                    endDate={this.state.endDate}
-                    onUserInput={ (text) => this.handleUserInput(text) }
-                    onDateRangePickerEvent={ this.handleDateRangePickerEvent }
-                    onFormSubmit={ () => this.updateTable() }
-                />
                 {err}
                 {results}
             </div>

src/components/SearchBar/index.js

@@ -1,28 +1,47 @@
+import moment from 'moment'
+
 import React from 'react'
 import { connect } from 'react-redux'
 
 class SearchBar extends React.Component {
 
     constructor(props) {
         super(props)
+
+        this.state = {
+            searchQuery: '',
+            startDate: moment().startOf('month'),
+            endDate: moment()
+        }
     }
 
     handleChange(event) {
-        return this.props.onUserInput(event.target.value)
+        this.setState({
+            searchQuery: event.target.value
+        })
+    }
+
+    handleDateRangePickerEvent(event, picker) {
+        if (event.type === 'apply') {
+            this.setState({
+                startDate: picker.startDate,
+                endDate: picker.endDate
+            })
+        }
     }
 
     handleSubmit(event) {
         event.preventDefault()
-        return this.props.onFormSubmit()
+        return this.props.onFormSubmit(this.state.searchQuery, this.state.startDate, this.state.endDate)
     }
 
     componentDidMount() {
-        return this.refs.filterTextInput.focus()
+        return this.refs.searchQueryInput.focus()
     }
 
     formatLabel() {
-        var start = this.props.startDate.format('YYYY-MM-DD')
-        var end = this.props.endDate.format('YYYY-MM-DD')
+        var start = this.state.startDate.format('YYYY-MM-DD')
+        var end = this.state.endDate.format('YYYY-MM-DD')
         if (start === end) {
             return start
         } else {
@@ -66,7 +85,7 @@ class SearchBar extends React.Component {
                 <input
                     type="text"
                     placeholder="Search..."
-                    ref="filterTextInput"
+                    ref="searchQueryInput"
                     onChange={ (e) => this.handleChange(e) }
                     className="form-control"
                 />

src/index.jade

@@ -9,7 +9,7 @@ html.no-js
 
         link(rel="stylesheet", href="https://fonts.googleapis.com/css?family=Roboto:400,300,500", type='text/css')
         link(rel="stylesheet", href="https://fonts.googleapis.com/icon?family=Material+Icons", type='text/css')
-        //link(rel="stylesheet", href=staticFile("stylesheets/hel-bootstrap.min.css"))
+
         script(type='text/javascript').
             window.appSettings = !{configJson};
 

src/views/app/index.js

@@ -1,4 +1,3 @@
-require('bootstrap/dist/css/bootstrap.css');
 require('!style!css!sass!src/assets/main.scss');
 
 import React from 'react';
@@ -41,7 +40,7 @@ class App extends React.Component {
             <IntlProvider locale={locale} messages={translations[locale] || {}}>
                 <div>
                     <Headerbar />
-                    <div className="container">
+                    <div className="content">
                         {this.props.children}
                     </div>
                 </div>

src/views/search/index.js

@@ -3,8 +3,41 @@ import React from 'react'
 import { connect } from 'react-redux'
 
 import FilterableEventTable from 'src/components/FilterableEventTable'
+import EventGrid from 'src/components/EventGrid'
+import SearchBar from 'src/components/SearchBar'
 
-let SearchPage = (props) => <FilterableEventTable events={props.events} apiErrorMsg={''} />
+import { fetchEvents } from 'src/actions/events'
+
+class SearchPage extends React.Component {
+    constructor(props) {
+        super(props)
+    }
+
+    searchEvents(searchQuery, startDate, endDate) {
+        if (!searchQuery) {
+            return
+        }
+        else {
+            this.props.dispatch(fetchEvents(searchQuery, startDate, endDate))
+        }
+    }
+
+    // <FilterableEventTable events={this.props.events} apiErrorMsg={''} />
+
+    render() {
+        return (
+            <div className="container">
+
+                <h2>Search for an event</h2>
+                <SearchBar onFormSubmit={ (query, start, end) => this.searchEvents(query, start, end) }/>
+
+                <h2>Recently added events</h2>
+                <EventGrid events={this.props.events} apiErrorMsg={''} />
+
+            </div>
+        )
+    }
+}
 
 export default connect((state) => ({
     events: state.events.items,

src/views/search/searchpage.scss

@@ -1,5 +1,5 @@
 .search-page {
     form {
-        margin: 1rem;
+//        margin: 1rem;
     }
 }