Added ListItem and changed StoryList ot use it, reorganized StoryMenu, added scrollbar styling, added moment dependency

rpdata-ui/package-lock.json

@@ -7343,6 +7343,11 @@
         "minimist": "0.0.8"
       }
     },
+    "moment": {
+      "version": "2.22.2",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.22.2.tgz",
+      "integrity": "sha1-PCV/mDn8DpP/UxSWMiOeuQeD/2Y="
+    },
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",

rpdata-ui/package.json

@@ -8,6 +8,7 @@
     "apollo-cache-inmemory": "^1.3.0-beta.6",
     "graphql": "^0.13.2",
     "graphql-tag": "^2.9.2",
+    "moment": "^2.22.2",
     "pluralize": "^7.0.0",
     "react": "^16.4.1",
     "react-apollo": "^2.1.9",

rpdata-ui/src/colors.css

@@ -3,10 +3,10 @@
   color: #789;
 }
 .theme-story .MenuLink.selected {
-  background-color: rgba(34, 187, 255, 0.125);
+  background-color: rgba(17, 187, 255, 0.125);
 }
 .theme-story .MenuLink:hover, .theme-story .Menu > .head-menu > a:hover {
-  background-color: rgba(34, 187, 255, 0.25);
+  background-color: rgba(17, 187, 255, 0.25);
 }
 .theme-story .color-primary {
   color: #1CF;
@@ -14,16 +14,23 @@
 .theme-story .color-text {
   color: #ABC;
 }
+.theme-story .color-highlight-primary {
+  background-color: rgba(34, 187, 255, 0.25);
+  color: #1CF;
+}
+.theme-story .color-highlight-dark {
+  background-color: rgba(0, 9, 18, 0.50);
+}
 
 /* /logs/ */
 .theme-logs .color-menu {
   color: #998;
 }
 .theme-logs .MenuLink.selected {
-  background-color: rgba(255, 187, 34, 0.125);
+  background-color: rgba(255, 187, 17, 0.125);
 }
 .theme-logs .MenuLink:hover, .theme-logs .Menu > .head-menu > a:hover {
-  background-color: rgba(255, 187, 34, 0.25);
+  background-color: rgba(255, 187, 17, 0.25);
 }
 .theme-logs .color-primary {
   color: #FC1;
@@ -31,6 +38,13 @@
 .theme-logs .color-text {
   color: #CCB;
 }
+.theme-logs .color-highlight-primary {
+  background-color: rgba(255, 187, 15, 0.25);
+  color: #FC1;
+}
+.theme-logs .color-highlight-dark {
+  background-color: rgba(18, 9, 0, 0.50);
+}
 
 /* /data/ */
 .theme-data .color-menu {

rpdata-ui/src/common/Background.js

@@ -50,7 +50,7 @@ export default class Background extends Component {
 
   render() {
     const src = this.props.src || "/assets/images/bg.png"
-    const opacity = this.props.opacity || 0.25
+    const opacity = this.props.opacity || 0.20
     const className = "Background" + (this.state.landscape ? " landscape" : "")
 
     return <img alt="Background" style={{filter: `brightness(${(Number(opacity)) * 100}%)`}} ref={this.onRef.bind(this)} className={className} src={src} />

rpdata-ui/src/common/List.js

@@ -0,0 +1,66 @@
+import React, { Component } from "react"
+import { Link } from "react-router-dom"
+import moment from "moment"
+
+import "./css/List.css"
+
+export default class List extends Component {
+  render() {
+    return (
+      <table className="List" cellSpacing="0px">
+        <tbody>
+          {this.props.children}
+        </tbody>
+      </table>
+    )
+  }
+}
+
+export function Item({link, name, icon, author, description, tags, fictionalDate, createdDate}) {
+  return [
+    <tr className="ListItem color-primary">
+      <td className="icon color-highlight-primary">{icon}</td>
+      <td className="content color-primary color-highlight-dark">
+        <div className="title">
+          <Link className="color-primary" to={link}>{name}</Link>
+        </div>
+        <div className="description color-text">{description}</div>
+        <div className="meta">
+          <ItemMeta key="D2" kind="date" value={createdDate} />
+          <ItemMeta key="D1" kind="date" value={fictionalDate} />
+          <ItemMeta key="T" kind="tag" value={tags[0] || null} />
+          <ItemMeta key="A" kind="author" value={author} />
+        </div>
+      </td>
+    </tr>,
+    <tr className="ListItem-spacer">
+      <td></td>
+    </tr>
+  ]
+}
+
+function ItemMeta({kind, value, className}) {
+  // Hide empty fields
+  if (value == null || value == "") {
+    return null
+  }
+  
+  switch (kind) {
+    case "date": {
+      const m = moment(value)
+      if (m.year() < 2) {
+        return null
+      }
+  
+      return <div className="date color-menu">{m.format("MMM D, YYYY")}</div>
+    }
+
+    case "tag": {
+      return <div className={`tag color-tag-${value.kind.toLowerCase()}`}>{value.name}</div>
+    }
+
+    case "author": {
+      return <div className="author color-menu">{value}</div>
+    }
+  }
+}

rpdata-ui/src/common/css/List.css

@@ -0,0 +1,50 @@
+.List {
+  padding: 1em 1ch;
+  width: 100%;
+  max-width: 90ch;
+  margin: auto;
+  margin-top: 0.75em;
+}
+
+.ListItem {
+  user-select: none;
+  outline: 0.05px solid;
+}
+  .ListItem td.icon {
+    font-size: 2.75em;
+    text-align: center;
+    width: 2.5ch;
+    outline: 0.05px solid;
+    margin: 0;
+  }
+  .ListItem td.content {
+    padding: 0.25em;
+    padding-bottom: 0.33em;
+    margin: 0;
+  }
+    .ListItem td.content .title {
+      padding: 0.25em 1ch;
+    }
+      .ListItem td.content a {
+        font-size: 1.333em;
+      }
+      .ListItem td.content a:hover {
+        color: white;
+      }
+    .ListItem td.content .description {
+      margin: 0 1ch;
+    }
+      .ListItem td.content p {
+        margin: 0;
+      }
+    .ListItem td.content .meta {
+      
+    }
+      .ListItem td.content .meta > div {
+        display: inline-block;
+        padding: 0.25em 1ch;
+      }
+
+.ListItem-spacer td {
+  height: 0.75em;
+}

rpdata-ui/src/common/css/Menu.css

@@ -6,6 +6,7 @@
   overflow-x: hidden;
   overflow-y: auto;
   text-align: center;
+  user-select: none;
 }
 
   .Menu > .head-menu {

rpdata-ui/src/index.css

@@ -9,3 +9,25 @@ body {
 a {
   text-decoration: none;
 }
+
+/* 
+ * Less glaring chrome/ium scrollbars.
+ */
+ ::-webkit-scrollbar {
+  width: 2px;
+  /* for vertical scrollbars */
+  height: 2px;
+  /* for horizontal scrollbars */
+}
+::-webkit-scrollbar-button {
+  background-color: #555;
+  color: 000;
+  display: none;
+}
+::-webkit-scrollbar-track {
+  background-color: #222;
+}
+::-webkit-scrollbar-thumb {
+  background-color: #555;
+  color: #000;
+}

rpdata-ui/src/routes/story/StoryList.js

@@ -3,16 +3,18 @@ import { Query } from "react-apollo"
 
 import { LoadingScreen } from "../../common/LoadingScreen"
 import Main from "../../common/Main"
+import List, {Item} from "../../common/List"
 
 import storyListQuery from "./gql/StoryList";
 
 export class StoryList extends Component {
   render() {
     const { stories } = this.props
+    const items = stories.map(story => <Item key={story.id} link={`/story/${story.id}`} icon={story.category.charAt(0)} {...story} />)
 
     return (
       <Main className="StoryList">
-        { stories.map(s => <h1>{s.name}</h1>) }
+        <List>{items}</List>
       </Main>
     )
   }

rpdata-ui/src/routes/story/StoryMenu.js

@@ -8,6 +8,7 @@ export default class StoryMenu extends Component {
       <Menu>
         <MenuHeader>Story</MenuHeader>
         <MenuLink to="/story/" icon="A">All</MenuLink>
+        <MenuLink to="/story/open" icon="O">Open</MenuLink>
         <MenuGap />
         <MenuHeader>By Category</MenuHeader>
         <CategoryLinks categories={this.props.categories} />
@@ -15,11 +16,6 @@ export default class StoryMenu extends Component {
         <MenuHeader>By Tag</MenuHeader>
         <MenuLink to="/story/tags/" icon="T">All Tags</MenuLink>
         <MenuGap />
-        <MenuHeader>Your Content</MenuHeader>
-        <MenuLink to="/story/your-content/" icon="A">Listed</MenuLink>
-        <MenuLink to="/story/your-content/open/" icon="O">Open</MenuLink>
-        <MenuLink to="/story/your-content/unlisted/" icon="U">Unlisted</MenuLink>
-        <MenuGap />
         <MenuHeader>Options</MenuHeader>
         <MenuLink icon="+">Create Story</MenuLink>
       </Menu>

rpdata-ui/src/routes/story/StoryRoot.js

@@ -20,12 +20,10 @@ export class StoryIndex extends Component {
         <Background />
         <StoryMenu categories={categories} />
         <Switch>
-          <Route exact path="/story/" component={() => <StoryList filter={{limit: 16}} />} />
+          <Route exact path="/story/" component={() => <StoryList filter={{}} />} />
+          <Route exact path="/story/open/" component={() => <StoryList filter={{open: true}} />} />
           <Route exact path="/story/tags/" component={StoryTags} />
           <Route exact path="/story/category/:category/" component={({match: {params: {category}}}) => <StoryList filter={{category}} />} />
-          <Route exact path="/story/your-content/" component={() => <StoryList filter={{author: "Gisle"}} />} />
-          <Route exact path="/story/your-content/open/" component={() => <StoryList filter={{open: true, author: "Gisle"}} />} />
-          <Route exact path="/story/your-content/unlisted/" component={() => <StoryList filter={{unlisted: true, author: "Gisle"}} />} />
         </Switch>
       </div>
     )