From bf10ed1fe3247cd8b2338b2f48f58e8698cccb6c Mon Sep 17 00:00:00 2001 From: Gisle Aune Date: Wed, 1 Aug 2018 18:02:01 +0200 Subject: [PATCH] Added ListItem and changed StoryList ot use it, reorganized StoryMenu, added scrollbar styling, added moment dependency --- rpdata-ui/package-lock.json | 5 ++ rpdata-ui/package.json | 1 + rpdata-ui/src/colors.css | 22 +++++++-- rpdata-ui/src/common/Background.js | 2 +- rpdata-ui/src/common/List.js | 66 +++++++++++++++++++++++++ rpdata-ui/src/common/css/List.css | 50 +++++++++++++++++++ rpdata-ui/src/common/css/Menu.css | 1 + rpdata-ui/src/index.css | 24 ++++++++- rpdata-ui/src/routes/story/StoryList.js | 4 +- rpdata-ui/src/routes/story/StoryMenu.js | 6 +-- rpdata-ui/src/routes/story/StoryRoot.js | 6 +-- 11 files changed, 171 insertions(+), 16 deletions(-) create mode 100644 rpdata-ui/src/common/List.js create mode 100644 rpdata-ui/src/common/css/List.css diff --git a/rpdata-ui/package-lock.json b/rpdata-ui/package-lock.json index 63a92ea..cd41dfd 100644 --- a/rpdata-ui/package-lock.json +++ b/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", diff --git a/rpdata-ui/package.json b/rpdata-ui/package.json index c23c849..54a3805 100644 --- a/rpdata-ui/package.json +++ b/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", diff --git a/rpdata-ui/src/colors.css b/rpdata-ui/src/colors.css index f47396f..b74c1d4 100644 --- a/rpdata-ui/src/colors.css +++ b/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 { diff --git a/rpdata-ui/src/common/Background.js b/rpdata-ui/src/common/Background.js index 6fab2a1..5b78085 100644 --- a/rpdata-ui/src/common/Background.js +++ b/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 Background diff --git a/rpdata-ui/src/common/List.js b/rpdata-ui/src/common/List.js new file mode 100644 index 0000000..a8c2aa8 --- /dev/null +++ b/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 ( + + + {this.props.children} + +
+ ) + } +} + +export function Item({link, name, icon, author, description, tags, fictionalDate, createdDate}) { + return [ + + {icon} + +
+ {name} +
+
{description}
+
+ + + + +
+ + , + + + + ] +} + +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
{m.format("MMM D, YYYY")}
+ } + + case "tag": { + return
{value.name}
+ } + + case "author": { + return
{value}
+ } + } +} \ No newline at end of file diff --git a/rpdata-ui/src/common/css/List.css b/rpdata-ui/src/common/css/List.css new file mode 100644 index 0000000..b6fbbd0 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/rpdata-ui/src/common/css/Menu.css b/rpdata-ui/src/common/css/Menu.css index 31ff2ca..7b8143d 100644 --- a/rpdata-ui/src/common/css/Menu.css +++ b/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 { diff --git a/rpdata-ui/src/index.css b/rpdata-ui/src/index.css index f448453..5543198 100644 --- a/rpdata-ui/src/index.css +++ b/rpdata-ui/src/index.css @@ -8,4 +8,26 @@ body { a { text-decoration: none; -} \ No newline at end of file +} + +/* + * 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; +} diff --git a/rpdata-ui/src/routes/story/StoryList.js b/rpdata-ui/src/routes/story/StoryList.js index 32c8a24..7dccffd 100644 --- a/rpdata-ui/src/routes/story/StoryList.js +++ b/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 => ) return (
- { stories.map(s =>

{s.name}

) } + {items}
) } diff --git a/rpdata-ui/src/routes/story/StoryMenu.js b/rpdata-ui/src/routes/story/StoryMenu.js index adeff02..d3399d0 100644 --- a/rpdata-ui/src/routes/story/StoryMenu.js +++ b/rpdata-ui/src/routes/story/StoryMenu.js @@ -8,6 +8,7 @@ export default class StoryMenu extends Component { Story All + Open By Category @@ -15,11 +16,6 @@ export default class StoryMenu extends Component { By Tag All Tags - Your Content - Listed - Open - Unlisted - Options Create Story diff --git a/rpdata-ui/src/routes/story/StoryRoot.js b/rpdata-ui/src/routes/story/StoryRoot.js index 976e51d..36d9acb 100644 --- a/rpdata-ui/src/routes/story/StoryRoot.js +++ b/rpdata-ui/src/routes/story/StoryRoot.js @@ -20,12 +20,10 @@ export class StoryIndex extends Component { - } /> + } /> + } /> } /> - } /> - } /> - } /> )