Please don't hate me for the quality of my code :(

.babelrc

@@ -0,0 +1 @@
+{"presets": ["es2015", "react"]}

.editorconfig

@@ -0,0 +1,27 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.{es6,js}]
+indent_size = 2
+indent_style = space
+
+[*.html]
+indent_size = 2
+indent_style = space
+
+[*.py]
+indent_size = 4
+indent_style = space
+
+[*.s?css]
+indent_size = 2
+indent_style = space
+
+[*.{yaml,yml}]
+indent_size = 2
+indent_style = space

.gitignore

@@ -0,0 +1,4 @@
+/dist
+/dump
+/node_modules
+/vendor

README.md

@@ -0,0 +1,6 @@
+An experimental GitHub Pages frontend for the `openpatata`
+written question data.
+
+## License
+
+AGPL v3.

assets/gear.svg.attribution

@@ -0,0 +1 @@
+https://thenounproject.com/term/gear/33317/

package.json

@@ -0,0 +1,37 @@
+{
+  "devDependencies": {
+    "autoprefixer": "^6.3.3",
+    "babel-core": "^6.7.2",
+    "babel-eslint": "^6.0.4",
+    "babel-loader": "^6.2.4",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-react": "^6.5.0",
+    "css-loader": "^0.23.1",
+    "eslint": "^2.4.0",
+    "eslint-plugin-babel": "^3.1.0",
+    "gh-pages": "^0.11.0",
+    "html-webpack-plugin": "^2.17.0",
+    "js-yaml": "^3.6.1",
+    "node-sass": "^3.7.0",
+    "postcss": "^5.0.19",
+    "postcss-assets": "^4.0.1",
+    "postcss-loader": "^0.9.1",
+    "postcss-svgo": "^2.1.2",
+    "sass-loader": "^3.2.0",
+    "style-loader": "^0.13.1",
+    "webpack": "^1.12.14"
+  },
+  "scripts": {
+    "build": "webpack --config webpack.config.babel.js --optimize-minimize",
+    "deploy": "gh-pages -d dist",
+    "watch": "webpack --config webpack.config.babel.js --watch"
+  },
+  "dependencies": {
+    "forerunnerdb": "^1.3.769",
+    "lodash": "^4.13.1",
+    "marked": "^0.3.5",
+    "react": "^15.1.0",
+    "react-dom": "^15.1.0",
+    "react-router": "^2.4.1"
+  }
+}

src/components/_form.scss

@@ -0,0 +1,58 @@
+
+.question-form {
+  width: 650px;
+  margin: auto;
+  padding: 2em;
+  padding-bottom: 0;
+  margin-bottom: -2px;
+
+  &__results-info-text {
+    margin-bottom: .4em;
+    padding: 0 1em;
+    color: #333;
+
+    span {
+      font-size: .9em;
+    }
+  }
+
+  &__search-array {
+    display: flex;
+    line-height: 5;
+
+    [type="search"],
+    select {
+      flex: 0;
+      -moz-appearance: none;
+      -webkit-appearance: none;
+      margin: 0;
+      padding: 0 1.5em;
+      padding-bottom: 2px;
+      border: none;
+      border-radius: 0;
+      background-color: #eee;
+      background-repeat: no-repeat;
+      line-height: inherit;
+      font: inherit;
+
+      &:focus {
+        outline: none;
+        background-color: yellow;
+      }
+    }
+
+    [type="search"] {
+      flex-basis: 65%;
+      border-top-left-radius: 3px;
+      font-weight: bold;
+    }
+
+    select {
+      flex-basis: 35%;
+      border-left: 1px solid #ccc;
+      border-top-right-radius: 3px;
+      background-image: inline("./../assets/dropdown-arrow.svg");
+      background-position: calc(100% - 1.5em) 50%;
+    }
+  }
+}

src/components/_list.scss

@@ -0,0 +1,32 @@
+
+.pagination,
+.question-list {
+  position: relative;
+  width: 650px;
+  margin: auto;
+  padding: 0 2em;
+  z-index: 5;
+}
+
+.pagination {
+  @extend %bulletless-list;
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 2em;
+  text-align: right;
+
+  &__page {
+    flex-basis: 2em;
+    flex-shrink: 0;
+
+    a {
+      display: block;
+      cursor: pointer;
+      font-size: .8em;
+    }
+
+    &--current {
+      font-weight: bold;
+    }
+  }
+}

src/components/_load.scss

@@ -0,0 +1,27 @@
+
+@keyframes ticktock {
+  0% { transform: rotate(0); }
+  100% { transform: rotate(360deg); }
+}
+
+.loading {
+  position: absolute;
+  height: 200px;
+  width: 200px;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  text-align: center;
+  font-weight: bold;
+
+  &__spinner {
+    height: 200px;
+    width: 200px;
+    animation: ticktock 6s linear infinite;
+    background-image: inline("./../assets/gear.svg");
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+}

src/components/_question.scss

@@ -0,0 +1,94 @@
+
+.question {
+  border: 1px solid;
+
+  & + & {
+    border-top: none;
+  }
+
+  &:first-child {
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+  }
+
+  &:last-child {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+
+  &--answered {
+    background-color: #e9fcea;
+
+    &, .question-id {
+      border-color: darken(#e9fcea, 10%);
+    }
+
+    .question-id {
+      color: darken(#e9fcea, 50%);
+    }
+  }
+
+  &--unanswered {
+    background-color: #fce9f0;
+
+    &, .question-id {
+      border-color: darken(#fce9f0, 10%);
+    }
+
+    .question-id {
+      color: darken(#fce9f0, 50%);
+    }
+  }
+
+  h2 {
+    display: none;
+  }
+}
+
+.question-header {
+  display: flex;
+  line-height: 5;
+}
+
+.question-details,
+.question-id {
+  flex: 0;
+  padding: 0 1.5em;
+}
+
+.question-details {
+  @include inline-list;
+  flex-basis: 65%;
+  margin: 0;
+
+  &__date {}
+
+  &__authors {
+
+
+    ul {
+      @include inline-list(.5em);
+    }
+  }
+
+  &__answers {
+
+
+    ul {
+      @include inline-list(.5em);
+    }
+  }
+}
+
+.question-id {
+  flex-basis: 35%;
+  font-weight: bold;
+  border-left: 1px solid;
+  padding-left: 1.5em;
+  text-align: center;
+}
+
+.question-text {
+  padding: 1em 1.5em;
+  background-color: #fff;
+}

src/components/form.js

@@ -0,0 +1,34 @@
+
+import React from 'react';
+
+
+export class Form extends React.Component {
+  render() {
+    return (
+      <div className="question-form">
+        <p className="question-form__results-info-text">
+          {this.props.resultCount}{`${this.props.resultCount == 1
+                                      ? " αποτέλεσμα"
+                                      : " αποτελέσματα"}`}
+        </p>
+        <div className="question-form__search-array">
+          <input
+              type="search"
+              placeholder="Αναζήτηση"
+              defaultValue={this.props.initialSearchValue}
+              onChange={this.props.pushToValue}/>
+          <select
+              arial-label="Επιλογή τιμών"
+              onChange={this.props.pushToScope}
+              defaultValue={this.props.initialSearchScope}>
+            <option value="all">Όλα τα πεδία</option>
+            <option value="by">Ερωτώντες</option>
+            <option value="date">Ημερομηνία</option>
+            <option value="identifier">Αριθμός</option>
+            <option value="text">Κείμενο</option>
+          </select>
+        </div>
+      </div>
+    );
+  }
+}

src/components/list.js

@@ -0,0 +1,39 @@
+
+import React from 'react';
+import {Question} from './question.js';
+
+
+class Pager extends React.Component {
+  render() {
+    return (
+      <ul className="pagination">
+        {this.props.pages.map(page => (
+          <li className={`pagination__page${this.props.page == page
+                                            ? " pagination__page--current"
+                                            : ""}`}
+              key={page}>
+            <a data-page={page} onClick={this.props.pushToPage}>{page + 1}</a>
+          </li>
+        ))}
+      </ul>
+    );
+  }
+}
+
+export class List extends React.Component {
+  render() {
+    return (
+      <div>
+        <div className="question-list">
+          {this.props.questions.map(question => (
+            <Question key={question._id} data={question}/>
+          ))}
+        </div>
+        <Pager
+          page={this.props.page}
+          pages={this.props.pages}
+          pushToPage={this.props.pushToPage}/>
+      </div>
+    );
+  }
+}

src/components/load.js

@@ -0,0 +1,19 @@
+
+import _ from 'lodash';
+import React from 'react';
+
+
+const pepTalk = [
+  'Βάσταξε', 'Πόμινε', 'Υπομονήν τζαι κράτην'
+];
+
+export class Load extends React.Component {
+  render() {
+    return (
+      <div className="loading">
+        <div className="loading__spinner"/>
+        {pepTalk[_.random(pepTalk.length - 1)]}
+      </div>
+    );
+  }
+}