Browse Source

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

1.0
Gisle Aune 6 years ago
parent
commit
bf10ed1fe3
  1. 5
      rpdata-ui/package-lock.json
  2. 1
      rpdata-ui/package.json
  3. 22
      rpdata-ui/src/colors.css
  4. 2
      rpdata-ui/src/common/Background.js
  5. 66
      rpdata-ui/src/common/List.js
  6. 50
      rpdata-ui/src/common/css/List.css
  7. 1
      rpdata-ui/src/common/css/Menu.css
  8. 24
      rpdata-ui/src/index.css
  9. 4
      rpdata-ui/src/routes/story/StoryList.js
  10. 6
      rpdata-ui/src/routes/story/StoryMenu.js
  11. 6
      rpdata-ui/src/routes/story/StoryRoot.js

5
rpdata-ui/package-lock.json

@ -7343,6 +7343,11 @@
"minimist": "0.0.8" "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": { "ms": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",

1
rpdata-ui/package.json

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

22
rpdata-ui/src/colors.css

@ -3,10 +3,10 @@
color: #789; color: #789;
} }
.theme-story .MenuLink.selected { .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 { .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 { .theme-story .color-primary {
color: #1CF; color: #1CF;
@ -14,16 +14,23 @@
.theme-story .color-text { .theme-story .color-text {
color: #ABC; 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/ */ /* /logs/ */
.theme-logs .color-menu { .theme-logs .color-menu {
color: #998; color: #998;
} }
.theme-logs .MenuLink.selected { .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 { .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 { .theme-logs .color-primary {
color: #FC1; color: #FC1;
@ -31,6 +38,13 @@
.theme-logs .color-text { .theme-logs .color-text {
color: #CCB; 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/ */ /* /data/ */
.theme-data .color-menu { .theme-data .color-menu {

2
rpdata-ui/src/common/Background.js

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

66
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>
}
}
}

50
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;
}

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

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

24
rpdata-ui/src/index.css

@ -8,4 +8,26 @@ body {
a { a {
text-decoration: none; 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;
}

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

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

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

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

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

@ -20,12 +20,10 @@ export class StoryIndex extends Component {
<Background /> <Background />
<StoryMenu categories={categories} /> <StoryMenu categories={categories} />
<Switch> <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/tags/" component={StoryTags} />
<Route exact path="/story/category/:category/" component={({match: {params: {category}}}) => <StoryList filter={{category}} />} /> <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> </Switch>
</div> </div>
) )

Loading…
Cancel
Save