diff --git a/package.json b/package.json index cbfbc10..a321571 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "react-linkify": "^0.2.2", "react-scripts": "1.1.4", "react-timeago": "^4.1.9", + "react-lazyload": "latest" }, "scripts": { "start": "react-scripts start", diff --git a/src/Flows.css b/src/Flows.css index 26c6db2..f58bed7 100644 --- a/src/Flows.css +++ b/src/Flows.css @@ -3,13 +3,13 @@ border-radius: 5px; margin: 1em 0; padding: .5em; - box-shadow: 0 5px 20px #999; + box-shadow: 0 5px 20px rgba(0,0,0,.4); } .flow-item { flex: 0 0 600px; } -:not(.sidebar-flow-item) .flow-reply { +.left-container .flow-reply { flex: 0 0 300px; max-height: 15em; margin-left: -5px; @@ -66,8 +66,4 @@ .box-id { font-family: Consolas, Courier, monospace; opacity: .6; -} - -.flow-reply-gray { - background-color: #eee; } \ No newline at end of file diff --git a/src/Flows.js b/src/Flows.js index 0808144..ae4c2f5 100644 --- a/src/Flows.js +++ b/src/Flows.js @@ -1,4 +1,5 @@ import React, {Component} from 'react'; +import {ColorPicker} from './color_picker'; import {Time, TitleLine, AutoLink} from './Common.js'; import './Flows.css'; import LazyLoad from 'react-lazyload'; @@ -9,7 +10,9 @@ const SEARCH_PAGESIZE=50; function Reply(props) { return ( -
+
#{props.info.cid} 
); } diff --git a/src/Title.css b/src/Title.css index bbd6418..606c38e 100644 --- a/src/Title.css +++ b/src/Title.css @@ -6,7 +6,7 @@ width: 100%; height: 9em; background-color: rgba(255,255,255,.8); - box-shadow: 0 0 25px #999; + box-shadow: 0 0 25px rgba(0,0,0,.4); margin-bottom: 1em; } diff --git a/src/color_picker.js b/src/color_picker.js new file mode 100644 index 0000000..6608a51 --- /dev/null +++ b/src/color_picker.js @@ -0,0 +1,19 @@ +// https://martin.ankerl.com/2009/12/09/how-to-create-random-colors-programmatically/ + +const golden_ratio_conjugate=0.618033988749895; + +export class ColorPicker { + constructor() { + this.names={}; + this.current_h=Math.random(); + } + + get(name) { + if(!this.names[name]) { + this.current_h+=golden_ratio_conjugate; + this.current_h%=1; + this.names[name]=`hsl(${this.current_h*360}, 40%, 80%)`; + } + return this.names[name]; + } +} \ No newline at end of file