diff options
author | 2018-11-22 18:46:12 +0300 | |
---|---|---|
committer | 2023-01-13 10:37:53 +0300 | |
commit | 9cc09e79c6a424b008a6f188eb64236a9ca5d865 (patch) | |
tree | 7ca6737c02c2998e523767e7041392a7869b270e /vnext/src/components | |
parent | d64e29f2315b6e42eb4c5149348fd89ac61e6805 (diff) |
CSS Grid WIP
Diffstat (limited to 'vnext/src/components')
-rw-r--r-- | vnext/src/components/Header.js | 2 | ||||
-rw-r--r-- | vnext/src/components/Message.css | 193 | ||||
-rw-r--r-- | vnext/src/components/Message.js | 2 |
3 files changed, 196 insertions, 1 deletions
diff --git a/vnext/src/components/Header.js b/vnext/src/components/Header.js index 69477c16..43b4a676 100644 --- a/vnext/src/components/Header.js +++ b/vnext/src/components/Header.js @@ -66,7 +66,7 @@ export default class Header extends React.Component { this.wScrollBefore = this.wScrollCurrent; } render() { - return (<header ref={this.header}>{this.props.children}</header>); + return (<header id="header" ref={this.header}>{this.props.children}</header>); } } diff --git a/vnext/src/components/Message.css b/vnext/src/components/Message.css new file mode 100644 index 00000000..291ca562 --- /dev/null +++ b/vnext/src/components/Message.css @@ -0,0 +1,193 @@ +article { + background: #fff; + box-shadow: 0 0 3px rgba(0, 0, 0, 0.16); + line-height: 140%; + margin-bottom: 10px; + padding: 20px; +} +article time { + color: #999; + font-size: 10pt; +} +article p { + clear: left; + margin: 5px 0 15px 0; + word-wrap: break-word; + overflow-wrap: break-word; +} +article .ir { + text-align: center; +} +article .ir a { + cursor: zoom-in; + display: block; +} +article .ir img { + max-width: 100%; +} +article > nav.l, +.msg-cont > nav.l { + border-top: 1px solid #eee; + display: flex; + justify-content: space-around; + font-size: 10pt; +} +article > nav.l a, +.msg-cont > nav.l a { + color: #888; + margin-right: 15px; +} +article .likes { + padding-left: 20px; +} +article .replies { + margin-left: 18px; +} +article .tags { + margin-top: 3px; +} +.msg-tags { + margin-top: 12px; + min-height: 1px; +} +article .tags > a, +.badge, +.msg-tags > a { + background: #eee; + border: 1px solid #eee; + color: #888; + display: inline-block; + font-size: 10pt; + margin-bottom: 5px; + margin-right: 5px; + padding: 0 10px; +} +.l .msg-button { + align-items: center; + display: flex; + flex-basis: 0; + flex-direction: column; + flex-grow: 1; + padding-top: 12px; +} +.l .msg-button-icon { + font-weight: bold; +} +.msgthread { + margin-bottom: 0; +} +.msg-avatar { + float: left; + max-height: 48px; + margin-right: 10px; + max-width: 48px; +} +.msg-avatar img { + max-height: 48px; + vertical-align: top; + max-width: 48px; +} +.msg-cont { + background: #FFF; + box-shadow: 0 0 3px rgba(0, 0, 0, 0.16); + line-height: 140%; + margin-bottom: 12px; + padding: 20px; + width: 640px; +} +.reply-new .msg-cont { + border-right: 5px solid #0C0; +} +.msg-ts { + font-size: small; + vertical-align: top; +} +.msg-ts, +.msg-ts > a { + color: #999; +} +.msg-txt { + clear: both; + margin: 0 0 12px; + padding-top: 10px; + word-wrap: break-word; + overflow-wrap: break-word; +} +.msg-media { + text-align: center; +} +.msg-links { + color: #999; + font-size: small; + margin: 5px 0 0 0; +} +.msg-comments { + color: #AAA; + font-size: small; + margin-top: 10px; + overflow: hidden; + text-indent: 10px; +} +.ta-wrapper { + border: 1px solid #DDD; + display: flex; + flex-grow: 1; +} +.msg-comment { + display: flex; + width: 100%; + margin-top: 10px; +} +.msg-comment-hidden { + display: none; +} +.msg-comment textarea { + border: 0; + flex-grow: 1; + outline: none !important; + padding: 4px; + resize: vertical; + vertical-align: top; +} +.attach-photo { + cursor: pointer; +} +.attach-photo-active { + color: green; +} +.msg-comment input { + align-self: flex-start; + background: #EEE; + border: 1px solid #CCC; + color: #999; + margin: 0 0 0 6px; + position: sticky; + top: 70px; + vertical-align: top; + width: 50px; +} +.msg-recomms { + color: #AAA; + font-size: small; + margin-top: 10px; + overflow: hidden; + text-indent: 10px; +} +#replies .msg-txt, +#private-messages .msg-txt { + margin: 0; +} +.title2 { + background: #fff; + margin: 20px 0; + padding: 10px 20px; + width: 640px; +} +.title2-right { + float: right; + line-height: 24px; +} +#content .title2 h2 { + font-size: x-large; + margin: 0; +} diff --git a/vnext/src/components/Message.js b/vnext/src/components/Message.js index f303d5eb..aed2a9b1 100644 --- a/vnext/src/components/Message.js +++ b/vnext/src/components/Message.js @@ -9,6 +9,8 @@ import Avatar from './Avatar'; import { format } from '../utils/embed'; +import './Message.css'; + const Message = React.memo(({ data, visitor, children, ...rest }) => { return ( <div className="msg-cont"> |