From 4f13802eb0bf50b554992c49e0c3686b6a3ce2ec Mon Sep 17 00:00:00 2001 From: Vitaly Takmazov Date: Mon, 6 May 2019 11:38:55 +0300 Subject: Update project layout --- vnext/src/index.css | 328 ++++++++++++++++++++++++++++++++++++++++ vnext/src/index.js | 2 + vnext/src/style/logo.png | Bin 2447 -> 0 bytes vnext/src/style/logo@2x.png | Bin 4822 -> 0 bytes vnext/src/style/main.css | 328 ---------------------------------------- vnext/src/style/matrix.jpg | Bin 236176 -> 0 bytes vnext/src/ui/assets/logo.png | Bin 0 -> 2447 bytes vnext/src/ui/assets/logo@2x.png | Bin 0 -> 4822 bytes vnext/src/ui/assets/matrix.jpg | Bin 0 -> 236176 bytes vnext/webpack.config.js | 3 +- 10 files changed, 331 insertions(+), 330 deletions(-) create mode 100644 vnext/src/index.css delete mode 100644 vnext/src/style/logo.png delete mode 100644 vnext/src/style/logo@2x.png delete mode 100644 vnext/src/style/main.css delete mode 100644 vnext/src/style/matrix.jpg create mode 100644 vnext/src/ui/assets/logo.png create mode 100644 vnext/src/ui/assets/logo@2x.png create mode 100644 vnext/src/ui/assets/matrix.jpg diff --git a/vnext/src/index.css b/vnext/src/index.css new file mode 100644 index 00000000..83a9a0e6 --- /dev/null +++ b/vnext/src/index.css @@ -0,0 +1,328 @@ +@custom-media --viewport-desktop (width >=62.5rem); +:root { + --main-width: 1000px; +} + +html, +body, +div, +h1, +h2, +ul, +li, +p, +form, +input, +textarea, +pre { + margin: 0; + padding: 0; +} + +html, +body { + width: 100%; + height: 100%; +} + +body { + text-size-adjust: 100%; + word-break: break-word; + color: #363636; + line-height: 1.4; + text-rendering: optimizeLegibility; +} + +textarea { + overflow: auto; +} + +html, +input, +textarea, +button { + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; + -webkit-font-smoothing: subpixel-antialiased; +} + +h1, +h2 { + font-weight: normal; + padding: 24px; +} + +ul { + list-style-type: none; +} + +legend { + color: #88958d; + margin: 0; + padding: 12px; + width: 100%; +} + +fieldset { + border: 0; + padding: 12px; + margin: 0; + min-width: 0; +} + +body:not(:-moz-handler-blocked) fieldset { + display: table-cell; +} + +a { + color: #069; + text-decoration: none; +} + +img, +hr { + border: none; +} + +#app { + background: #fdfdfe; + display: grid; + grid-template-areas: "header" "content" "footer"; + grid-template-columns: 100%; + grid-template-rows: auto 1fr auto; + transition: margin-left 0.2s; + min-height: 100%; + max-height: 100%; +} + +#header { + grid-area: header; + background: #fff; + box-shadow: 0 0 3px rgba(0, 0, 0, 0.28); + transition: transform 0.2s; + overflow-x: hidden; +} +.header--hidden { + transform: translateY(-100%); +} + +#header_wrapper, +.footer_container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; +} + +#sidebar { + display: none; +} + +.nav_content { + padding: 10px; +} + +#wrapper { + background: #fefdfe; + grid-area: content; + margin-top: 12px; + overflow-x: hidden; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + transition: margin-left 0.4s; +} + +#footer { + grid-area: footer; + background: #f8f8f8; + border-top: 1px solid #ccc; + color: #363636; + padding: 10px; + transition: margin-left 0.4s; + overflow-x: hidden; +} + +.desktop { + display: none; +} + +.card { + padding: 6px 24px; +} + +#logo { + height: 36px; + width: 110px; + padding: 4px; +} + +#logo a { + background: url("./ui/assets/logo@2x.png") no-repeat; + background-size: cover; + border: 0; + display: block; + height: 36px; + overflow: hidden; + text-indent: 100%; + white-space: nowrap; + width: 110px; +} + +#ctitle { + display: flex; +} + +#ctitle:first-child { + margin-right: 5px; + vertical-align: middle; + max-width: 48px; + max-height: 48px; +} + +#global { + display: flex; +} + +.l { + display: flex; + flex-direction: row; + flex-wrap: wrap; +} + +#global a, +#ctitle a { + display: flex; + align-items: center; + border-bottom: 2px solid transparent; +} + +#global a { + color: #88958d; + padding: 14px 16px; +} + +#sidebar > a, +.l > a { + color: #88958d; + border-right: 2px solid transparent; + display: flex; + padding: 14px; + align-items: center; + vertical-align: middle; +} + +#sidebar > a:hover { + background-color: #f8f8f8; + border-right: 2px solid #ff339a; + cursor: pointer; +} + +#ctitle a { + padding: 2px 20px; +} + +#global a, +#ctitle a, +.l a, +.msg-button { + border-bottom: 2px solid #fdfdfe; +} + +#global a:hover, +#ctitle a:hover, +.l a:hover, +.msg-button:hover { + background-color: #f8f8f8; + border-bottom: 2px solid #ff339a; + cursor: pointer; +} + +.icon { + vertical-align: middle; +} + +#search input { + background: #FFF; + border: 1px solid #ccc; + outline: none !important; + padding: 4px; + -webkit-appearance: none; + border-radius: 0; +} + +.lds-ripple { + display: inline-block; + position: relative; + width: 64px; + height: 64px; +} + +.lds-ripple div { + position: absolute; + border: 4px solid #ff339a; + opacity: 1; + border-radius: 50%; + animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; +} + +.lds-ripple div:nth-child(2) { + animation-delay: -0.5s; +} + +@keyframes lds-ripple { + 0% { + top: 28px; + left: 28px; + width: 0; + height: 0; + opacity: 1; + } + 100% { + top: -1px; + left: -1px; + width: 58px; + height: 58px; + opacity: 0; + } +} + +@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; + } + #header_wrapper, + .footer_container { + margin: 0 auto; + width: var(--main-width); + } + #wrapper { + justify-self: center; + width: var(--main-width); + display: grid; + grid-template-columns: 240px minmax(1fr, max-content); + grid-template-rows: auto; + grid-template-areas: "nav feed"; + } + .desktop { + display: block; + } + .mobile { + display: none; + } + #content { + grid-area: feed; + width: 758px; + min-height: 100vh; + } + #sidebar { + border: 0; + display: block; + grid-area: nav; + top: inherit; + left: inherit; + z-index: inherit; + overflow-x: inherit; + width: 240px; + } +} diff --git a/vnext/src/index.js b/vnext/src/index.js index 99d44d2b..26cf26f6 100644 --- a/vnext/src/index.js +++ b/vnext/src/index.js @@ -1,6 +1,8 @@ import React, { lazy, Suspense } from 'react'; import ReactDOM from 'react-dom'; +import './index.css'; + function LoadingView(props) { return (
diff --git a/vnext/src/style/logo.png b/vnext/src/style/logo.png deleted file mode 100644 index 4e0f6d56..00000000 Binary files a/vnext/src/style/logo.png and /dev/null differ diff --git a/vnext/src/style/logo@2x.png b/vnext/src/style/logo@2x.png deleted file mode 100644 index 6febeaf9..00000000 Binary files a/vnext/src/style/logo@2x.png and /dev/null differ diff --git a/vnext/src/style/main.css b/vnext/src/style/main.css deleted file mode 100644 index 0bbf0bf4..00000000 --- a/vnext/src/style/main.css +++ /dev/null @@ -1,328 +0,0 @@ -@custom-media --viewport-desktop (width >=62.5rem); -:root { - --main-width: 1000px; -} - -html, -body, -div, -h1, -h2, -ul, -li, -p, -form, -input, -textarea, -pre { - margin: 0; - padding: 0; -} - -html, -body { - width: 100%; - height: 100%; -} - -body { - text-size-adjust: 100%; - word-break: break-word; - color: #363636; - line-height: 1.4; - text-rendering: optimizeLegibility; -} - -textarea { - overflow: auto; -} - -html, -input, -textarea, -button { - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; - -webkit-font-smoothing: subpixel-antialiased; -} - -h1, -h2 { - font-weight: normal; - padding: 24px; -} - -ul { - list-style-type: none; -} - -legend { - color: #88958d; - margin: 0; - padding: 12px; - width: 100%; -} - -fieldset { - border: 0; - padding: 12px; - margin: 0; - min-width: 0; -} - -body:not(:-moz-handler-blocked) fieldset { - display: table-cell; -} - -a { - color: #069; - text-decoration: none; -} - -img, -hr { - border: none; -} - -#app { - background: #fdfdfe; - display: grid; - grid-template-areas: "header" "content" "footer"; - grid-template-columns: 100%; - grid-template-rows: auto 1fr auto; - transition: margin-left 0.2s; - min-height: 100%; - max-height: 100%; -} - -#header { - grid-area: header; - background: #fff; - box-shadow: 0 0 3px rgba(0, 0, 0, 0.28); - transition: transform 0.2s; - overflow-x: hidden; -} -.header--hidden { - transform: translateY(-100%); -} - -#header_wrapper, -.footer_container { - display: flex; - justify-content: space-between; - align-items: center; - flex-wrap: wrap; -} - -#sidebar { - display: none; -} - -.nav_content { - padding: 10px; -} - -#wrapper { - background: #fefdfe; - grid-area: content; - margin-top: 12px; - overflow-x: hidden; - overflow-y: auto; - -webkit-overflow-scrolling: touch; - transition: margin-left 0.4s; -} - -#footer { - grid-area: footer; - background: #f8f8f8; - border-top: 1px solid #ccc; - color: #363636; - padding: 10px; - transition: margin-left 0.4s; - overflow-x: hidden; -} - -.desktop { - display: none; -} - -.card { - padding: 6px 24px; -} - -#logo { - height: 36px; - width: 110px; - padding: 4px; -} - -#logo a { - background: url("//i.juick.com/logo@2x.png") no-repeat; - background-size: cover; - border: 0; - display: block; - height: 36px; - overflow: hidden; - text-indent: 100%; - white-space: nowrap; - width: 110px; -} - -#ctitle { - display: flex; -} - -#ctitle:first-child { - margin-right: 5px; - vertical-align: middle; - max-width: 48px; - max-height: 48px; -} - -#global { - display: flex; -} - -.l { - display: flex; - flex-direction: row; - flex-wrap: wrap; -} - -#global a, -#ctitle a { - display: flex; - align-items: center; - border-bottom: 2px solid transparent; -} - -#global a { - color: #88958d; - padding: 14px 16px; -} - -#sidebar > a, -.l > a { - color: #88958d; - border-right: 2px solid transparent; - display: flex; - padding: 14px; - align-items: center; - vertical-align: middle; -} - -#sidebar > a:hover { - background-color: #f8f8f8; - border-right: 2px solid #ff339a; - cursor: pointer; -} - -#ctitle a { - padding: 2px 20px; -} - -#global a, -#ctitle a, -.l a, -.msg-button { - border-bottom: 2px solid #fdfdfe; -} - -#global a:hover, -#ctitle a:hover, -.l a:hover, -.msg-button:hover { - background-color: #f8f8f8; - border-bottom: 2px solid #ff339a; - cursor: pointer; -} - -.icon { - vertical-align: middle; -} - -#search input { - background: #FFF; - border: 1px solid #ccc; - outline: none !important; - padding: 4px; - -webkit-appearance: none; - border-radius: 0; -} - -.lds-ripple { - display: inline-block; - position: relative; - width: 64px; - height: 64px; -} - -.lds-ripple div { - position: absolute; - border: 4px solid #ff339a; - opacity: 1; - border-radius: 50%; - animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; -} - -.lds-ripple div:nth-child(2) { - animation-delay: -0.5s; -} - -@keyframes lds-ripple { - 0% { - top: 28px; - left: 28px; - width: 0; - height: 0; - opacity: 1; - } - 100% { - top: -1px; - left: -1px; - width: 58px; - height: 58px; - opacity: 0; - } -} - -@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; - } - #header_wrapper, - .footer_container { - margin: 0 auto; - width: var(--main-width); - } - #wrapper { - justify-self: center; - width: var(--main-width); - display: grid; - grid-template-columns: 240px minmax(1fr, max-content); - grid-template-rows: auto; - grid-template-areas: "nav feed"; - } - .desktop { - display: block; - } - .mobile { - display: none; - } - #content { - grid-area: feed; - width: 758px; - min-height: 100vh; - } - #sidebar { - border: 0; - display: block; - grid-area: nav; - top: inherit; - left: inherit; - z-index: inherit; - overflow-x: inherit; - width: 240px; - } -} diff --git a/vnext/src/style/matrix.jpg b/vnext/src/style/matrix.jpg deleted file mode 100644 index 745f1564..00000000 Binary files a/vnext/src/style/matrix.jpg and /dev/null differ diff --git a/vnext/src/ui/assets/logo.png b/vnext/src/ui/assets/logo.png new file mode 100644 index 00000000..4e0f6d56 Binary files /dev/null and b/vnext/src/ui/assets/logo.png differ diff --git a/vnext/src/ui/assets/logo@2x.png b/vnext/src/ui/assets/logo@2x.png new file mode 100644 index 00000000..6febeaf9 Binary files /dev/null and b/vnext/src/ui/assets/logo@2x.png differ diff --git a/vnext/src/ui/assets/matrix.jpg b/vnext/src/ui/assets/matrix.jpg new file mode 100644 index 00000000..745f1564 Binary files /dev/null and b/vnext/src/ui/assets/matrix.jpg differ diff --git a/vnext/webpack.config.js b/vnext/webpack.config.js index 0645cda4..1218542f 100644 --- a/vnext/webpack.config.js +++ b/vnext/webpack.config.js @@ -25,8 +25,7 @@ module.exports = (env, argv) => { 'core-js/modules/es.symbol', 'core-js/modules/web.dom-collections.iterator', 'url-polyfill', - __dirname + '/src/index.js', - __dirname + '/src/style/main.css' + __dirname + '/src/index.js' ] }, output: { -- cgit v1.2.3