From 9cc09e79c6a424b008a6f188eb64236a9ca5d865 Mon Sep 17 00:00:00 2001 From: Vitaly Takmazov Date: Thu, 22 Nov 2018 18:46:12 +0300 Subject: CSS Grid WIP --- vnext/package.json | 1 + vnext/src/App.js | 12 + vnext/src/components/Header.js | 2 +- vnext/src/components/Message.css | 193 ++++++++ vnext/src/components/Message.js | 2 + vnext/src/index.js | 2 +- vnext/src/style/main.css | 920 +++++---------------------------------- vnext/src/views/index.html | 43 +- vnext/webpack.config.js | 3 +- vnext/yarn.lock | 323 +++++++++++++- 10 files changed, 675 insertions(+), 826 deletions(-) create mode 100644 vnext/src/components/Message.css diff --git a/vnext/package.json b/vnext/package.json index ead8a09f..3a54831d 100644 --- a/vnext/package.json +++ b/vnext/package.json @@ -41,6 +41,7 @@ "mini-css-extract-plugin": "^0.4.5", "optimize-css-assets-webpack-plugin": "^5.0.1", "postcss-loader": "^3.0.0", + "postcss-preset-env": "^6.4.0", "prop-types": "^15.6.2", "react-router-prop-types": "^1.0.4", "react-test-renderer": "^16.6.3", diff --git a/vnext/src/App.js b/vnext/src/App.js index a74934ab..6d254d14 100644 --- a/vnext/src/App.js +++ b/vnext/src/App.js @@ -150,7 +150,19 @@ export default class App extends React.Component { } /> + + ); 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 (
{this.props.children}
); + return (); } } 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 (
diff --git a/vnext/src/index.js b/vnext/src/index.js index d48d433a..74a332fd 100644 --- a/vnext/src/index.js +++ b/vnext/src/index.js @@ -30,4 +30,4 @@ const JuickApp = () => ( ); -ReactDOM.render(, document.getElementById('body')); +ReactDOM.render(, document.getElementById('app')); diff --git a/vnext/src/style/main.css b/vnext/src/style/main.css index 29a8c374..595222ee 100644 --- a/vnext/src/style/main.css +++ b/vnext/src/style/main.css @@ -1,158 +1,105 @@ -/* #region generic */ +@custom-media --viewport-desktop (width >=62.5rem); +:root { + --main-width: 960px; +} -html, -body, -div, -h1, -h2, -ul, -li, -p, -form, -input, -textarea, -pre { +html, body, div, h1, h2, ul, li, p, form, input, textarea, pre { margin: 0; padding: 0; } -html, -input, -textarea, -button { + +textarea { + overflow: auto; +} + +html, input, textarea { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-size: 12pt; -webkit-font-smoothing: subpixel-antialiased; } -h1, -h2 { + +h1, h2 { font-weight: normal; } + ul { list-style-type: none; } + a { color: #069; text-decoration: none; } -img, -hr { + +img, hr { border: none; } -hr { - background: #CCC; - height: 1px; - margin: 10px 0; -} -pre { - background: #222; - color: #0f0; - overflow-x: auto; - padding: 6px; - white-space: pre; -} -pre::selection { - background: #0f0; - color: #222; -} -pre::-moz-selection { - background: #0f0; - color: #222; -} -.u { - text-decoration: underline; -} -/* #endregion */ +#app { + background: #fdfdfe; + display: grid; + grid-template-areas: "header" "content" "footer"; + grid-template-columns: 1fr; + grid-template-rows: auto minmax(1fr, auto) auto; + min-height: 100vh; + font: -apple-system-body; + font-family: -apple-system, Segoe UI; + transition: margin-left 0.4s; +} -/* #region overall layout */ +#header { + grid-area: header; + background: #fff; + border-bottom: 1px solid #ccc; +} -html { - background: #f8f8f8; +#sidebar { + border-right: 1px solid #ccc; color: #222; -} -#content { - margin: 0 auto; - width: 728px; - margin-top: 62px; -} -noscript article { - background-image: url("matrix.jpg"); - background-color: #222; - background-size: cover; - color: #fff; - min-height: 480px; -} -*::selection { - background: #006699; - color: #fff; -} -#body > header { + transition: width 0.4s; position: fixed; + width: 0; top: 0; - width: 100%; - z-index: 10; - transition-duration: 0.4s; - transition-timing-function: ease-in-out; - transition-property: transform; -} -@supports (backdrop-filter: blur(10px)) { - body > header--background { - background: rgba(255, 255, 255, 0.8); - backdrop-filter: blur(10px); - } -} -#header_wrapper { - margin: 0 auto; - width: 1000px; - display: flex; - justify-content: space-between; - align-items: center; - flex-wrap: wrap; - padding: 4px; + left: 0; + overflow-x: hidden; + height: 100%; + z-index: 1; } -.header--background { - box-shadow: 0 0 3px rgba(0, 0, 0, 0.28); - background: #fff; + +.nav_content { + padding: 10px; } -.header--hidden { - transform: translateY(-100%); + +#wrapper { + background: #fefdfe; + grid-area: content; + height: 100%; + padding: 10px; } + #footer { - color: #999; - font-size: 10pt; - margin: 40px; - padding: 10px 0; + grid-area: footer; + background: #f8f8f8; + border-top: 1px solid #ccc; + color: #222; + padding: 10px; } -@media screen and (max-width: 850px) { - html { - text-size-adjust: 100%; - } - #body, - #topwrapper, - #footer { - margin: 0 auto; - min-width: 310px; - width: auto; - } - #body > header { - margin-bottom: 15px; - } - #content { - margin: 52px auto 0; - } +.desktop { + display: none; } -/* #endregion */ - -/* #region header internals */ +.card { + padding: 6px 24px; +} #logo { height: 36px; width: 110px; } + #logo a { - background: url("logo@2x.png") no-repeat; + background: url("//i.juick.com/logo.png") no-repeat; background-size: cover; border: 0; display: block; @@ -162,718 +109,89 @@ noscript article { white-space: nowrap; width: 110px; } -#global { - display: flex; -} -#global a { - color: #888; - display: inline-block; - font-size: 13pt; - padding: 14px 6px; -} -#global li { - display: inline-block; -} -#ctitle a { - padding: 14px; -} -#global a:hover, -#ctitle a:hover, -.l a:hover { - color: #069; - cursor: pointer; -} -#search input { - background: #FFF; - border: 1px solid #ccc; - outline: none !important; - padding: 4px; - -webkit-appearance: none; - border-radius: 0; -} - -/* #endregion */ - -/* #region left column internals */ - -.toolbar { - border-top: 1px solid #CCC; -} #ctitle { + display: flex; font-size: 14pt; } + #ctitle img { margin-right: 5px; vertical-align: middle; - width: 48px; -} -#ustats li { - font-size: 10pt; - margin: 3px 0; -} -#column table.iread { - width: 100%; -} -#column table.iread td { - text-align: center; + max-width: 48px; + max-height: 48px; } -#column table.iread img { - height: 48px; - width: 48px; -} - -/* #endregion */ - -/* #region main content */ -#content > p, -#content > h1, -#content > h2, -#minimal_content > p, -#minimal_content > h1, -#minimal_content > h2 { - margin: 1em 0; -} -.page { - background: #eee; - padding: 6px; - text-align: center; -} - -.page a { - color: #888; -} - -/* #endregion */ - -/* #region article, message internals */ -article, -.msg-cont { - background: #fff; - box-shadow: 0 0 3px rgba(0, 0, 0, 0.16); - line-height: 140%; - margin-bottom: 10px; - padding: 20px; -} -article time, -.msg-cont time { - color: #999; - font-size: 10pt; -} -article p, -.msg-cont p { - clear: left; - margin: 5px 0 15px 0; - word-wrap: break-word; - overflow-wrap: break-word; -} -article .ir, -.msg-cont .ir { - text-align: center; -} -article .ir a, -.msg-cont .ir a { - cursor: zoom-in; - display: block; -} -article .ir img, -.msg-cont .ir img { - max-width: 100%; -} -article > nav.l, -.msg-cont > nav.l { - border-top: 1px solid #eee; +#global { 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; + +#global a { color: #888; - cursor: pointer; 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 { - min-height: 48px; - margin-right: 10px; - min-width: 48px; -} -.msg-avatar img { - height: 48px; - vertical-align: top; - 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; -} -.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; -} -.msg-comment-hidden { - display: none; -} -.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-cont { - margin: 0; - box-shadow: none; - border-bottom: 1px #eee solid; -} -#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; -} - -@media screen and (max-width: 850px) { - #header_wrapper { - width: auto; - } - #content { - width: 100%; - } - #global { - justify-content: space-around; - flex-grow: 1; - } - #search { - padding: 4px; - } - article { - overflow: auto; - } - article p { - margin: 10px 0 8px 0; - } - .msg, - .msg-cont { - min-width: 280px; - width: auto; - } - .msg-cont { - margin: 8px 0; - } - .msg-media { - overflow: auto; - } - .title2 h2 { - font-size: large; - } - .msg-comment { - flex-direction: column; - } - .msg-comment input { - align-self: flex-end; - margin: 6px 0 0 0; - width: 100px; - } -} - -@media screen and (max-width: 480px) { - #content { - margin-top: 104px; - width: 100%; - } - #search { - display: none; - } - #global a { - padding: 14px 2px; - font-size: 11pt; - } - .msg-cont > nav.l, - article > nav.l { - font-size: 9pt; - } - .msg-txt { - padding-top: 5px; - } - .title2 { - font-size: 11pt; - width: auto; - } - #content .title2 h2 { - font-size: 11pt; - } - .title2-right { - line-height: initial; - } -} - -/* #endregion */ - -/* #region user-generated texts */ - -q:before, -q:after { - content: ""; -} -q, -blockquote { - border-left: 3px solid #CCC; - color: #666; - display: block; - margin: 10px 0 10px 10px; - padding-left: 10px; -} - -/* #endregion */ - -/* #region new message form internals */ - -#newmessage { - background: #E5E5E0; - margin-bottom: 20px; - padding: 15px; -} -#newmessage textarea { - border: 1px solid #CCC; - box-sizing: border-box; - margin: 0 0 5px 0; - margin-top: 20px; - max-height: 6em; - min-width: 280px; - padding: 4px; - width: 100%; -} -#newmessage input { - border: 1px solid #CCC; - margin: 5px 0; - padding: 2px 4px; -} -#newmessage .img { - width: 500px; -} -#newmessage .tags { - width: 500px; -} -#newmessage .subm { - background: #EEEEE5; - width: 150px; -} -@media screen and (max-width: 850px) { - #newmessage .img, - #newmessage .tags { - width: 100%; - } -} - -/* #endregion */ - -/* #region user lists */ - -.users { - margin: 10px 0; - width: 100%; - display: flex; - flex-wrap: wrap; -} -.users > span { - overflow: hidden; - padding: 6px 0; - width: 200px; -} -.users img { - height: 32px; - margin-right: 6px; - vertical-align: middle; - width: 32px; + font-size: 13pt; + padding: 14px 16px; } -/* #endregion */ - -/* #region signup form */ - -.signup-h1 > img { - margin-right: 10px; - vertical-align: middle; -} -.signup-h1 { - font-size: x-large; - margin: 20px 0 10px 0; -} -.signup-h2 { - font-size: large; - margin: 10px 0 5px 0; -} -.signup-hr { - margin: 20px 0; +#global li { + display: inline-block; } -/* #endregion */ - -/* #region PM */ - -.newpm { - margin: 20px 60px 30px 60px; -} -.newpm textarea { - resize: vertical; - width: 100%; -} -.newpm-send input { - width: 100px; +#ctitle a { + padding: 4px 20px; } -/* #endregion */ - -/* #region popup dialog (lightbox) */ - -#dialogb { - background: #222; - height: 100%; - left: 0; - opacity: 0.6; - position: fixed; - top: 0; - width: 100%; - z-index: 10; -} -#dialogt { - height: 100%; - left: 0; - position: fixed; - top: 0; - width: 100%; - z-index: 10; - display: flex; - align-items: center; - justify-content: center; -} -#dialogw { - z-index: 11; - max-width: 96%; - max-height: calc(100% - 100px); - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); -} -#dialogw a { - display: block; -} -#dialogw img { - max-height: 100%; - max-height: 90vh; - max-width: 100%; -} -#dialog_header { - width: 100%; - height: 44px; - position: fixed; - display: flex; - flex-direction: row-reverse; - align-items: center; -} -.header_image { - background: rgba(0, 0, 0, 0.28); -} -#dialogc { +#global a:hover, #global li:hover, #ctitle a:hover, .l a:hover .msg-button:hover { + background-color: #ec4b98; + color: #fff; cursor: pointer; - color: #ccc; - padding-right: 6px; -} -.dialoglogin { - background: #fff; - padding: 25px; - width: 300px; -} -.dialog-opened { - overflow: hidden; -} -#signfb, -#signvk { - display: block; - line-height: 32px; - margin: 10px 0; - text-decoration: none; - width: 100%; -} -#signvk { - margin-bottom: 30px; -} -.dialoglogin form { - margin-top: 7px; -} -.signinput, -.signsubmit { - border: 1px solid #CCC; - margin: 3px 0; - padding: 3px; -} -.signinput { - width: 292px; -} -.signsubmit { - width: 70px; -} -.dialogshare { - background: #fff; - min-width: 300px; - overflow: auto; - padding: 20px; -} -.dialogl { - background: #fff; - border: 1px solid #DDD; - margin: 3px 0 20px; - padding: 5px; -} -.dialogshare li { - float: left; - margin: 5px 10px 0 0; -} -.dialogshare a { - display: block; -} -.dialogtxt { - background: #fff; - padding: 20px; -} - -@media screen and (max-width: 480px) { - .dialog-opened { - position: fixed; - width: 100%; - } } -/* #endregion */ - -/* #region misc */ - -#wsthread { - background: #CCC; - bottom: 20px; - cursor: pointer; - display: none; - padding: 5px 10px; - position: fixed; - right: 20px; -} -.sharenew { - display: inline-block; - line-height: 32px; - min-height: 32px; - min-width: 200px; - padding: 0 12px 0 37px; -} .icon { margin-top: -2px; vertical-align: middle; } -.icon--ei-link { - margin-top: -1px; -} -.icon--ei-comment { - margin-top: -5px; -} -.newmessage { - /* textarea on the /post page */ - border: 1px solid #DDD; - padding: 2px; - resize: vertical; - width: 100%; -} - -/* #endregion */ -/* #region footer internals */ -#footer-social { - float: left; -} -#footer-social a { - border: 0; - display: inline-block; -} -#footer-left { - margin-left: 286px; - margin-right: 350px; -} -#footer-right { - float: right; -} - -@media screen and (max-width: 850px) { - #footer { - margin: 0 10px; +@media (--viewport-desktop) { + #app { + grid-template-areas: "header header" "content content" "footer footer"; + grid-template-columns: 1fr 1fr; + grid-template-rows: min-content minmax(min-content, 1fr) min-content; } - #footer div { - float: none; - margin: 10px 0; + #header_wrapper, .footer_container { + margin: 0 auto; + width: var(--main-width); + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + } + #wrapper { + justify-self: center; + width: var(--main-width); + display: grid; + grid-gap: 10px; + grid-template-columns: 200px minmax(auto, max-content); + grid-template-areas: "nav feed"; + } + .desktop { + display: block; + } + .mobile { + display: none; } -} - -/* #endregion */ - -/* #region settings */ - -fieldset { - border: 1px dotted #ccc; - margin-top: 25px; -} - -/* #endregion */ - -/* #region embeds */ - -.embedContainer { - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: center; - padding: 0; - margin: 30px -3px 15px -3px; -} -.embedContainer > * { - box-sizing: border-box; - flex-grow: 1; - margin: 3px; - min-width: 49%; -} -.embedContainer > .compact { - flex-grow: 0; -} -.embedContainer .picture img { - display: block; -} -.embedContainer img, -.embedContainer video { - max-width: 100%; - max-height: 80vh; -} -.embedContainer > .audio, -.embedContainer > .youtube { - min-width: 90%; -} -.embedContainer audio { - width: 100%; -} -.embedContainer iframe { - overflow: hidden; - resize: vertical; - display: block; -} - -/* #endregion */ - -/* #region nsfw */ - -article.nsfw .embedContainer img, -article.nsfw .embedContainer video, -article.nsfw .embedContainer iframe, -article.nsfw .ir img { - opacity: 0.1; -} -article.nsfw .embedContainer img:hover, -article.nsfw .embedContainer video:hover, -article.nsfw .embedContainer iframe:hover, -article.nsfw .ir img:hover { - opacity: 1; -} - -/* #endregion */ + .msgs { + grid-area: "feed"; + } + #sidebar { + border: 0; + position: static; + grid-area: nav; + width: auto; + top: inherit; + left: inherit; + z-index: inherit; + overflow-x: inherit; + } +} \ No newline at end of file diff --git a/vnext/src/views/index.html b/vnext/src/views/index.html index b26d181f..3b8480d7 100644 --- a/vnext/src/views/index.html +++ b/vnext/src/views/index.html @@ -1,5 +1,6 @@ + @@ -29,29 +30,29 @@ -
-