From 9b93012b0871864738050a8f84580acf5c43bd58 Mon Sep 17 00:00:00 2001 From: muerwre Date: Tue, 4 Jun 2019 04:06:11 +0700 Subject: [PATCH 1/3] side pane --- src/components/flow/TestGrid/style.scss | 1 + src/components/main/SidePane/index.tsx | 38 ++++++++++++++++++++ src/components/main/SidePane/styles.scss | 44 ++++++++++++++++++++++++ src/containers/MainLayout/index.tsx | 8 ++++- src/containers/MainLayout/style.scss | 2 +- src/styles/colors.scss | 2 +- src/styles/global.scss | 2 +- src/styles/variables.scss | 2 +- tsconfig.json | 1 + 9 files changed, 95 insertions(+), 5 deletions(-) create mode 100644 src/components/main/SidePane/index.tsx create mode 100644 src/components/main/SidePane/styles.scss diff --git a/src/components/flow/TestGrid/style.scss b/src/components/flow/TestGrid/style.scss index e3e229aa..3c460158 100644 --- a/src/components/flow/TestGrid/style.scss +++ b/src/components/flow/TestGrid/style.scss @@ -24,6 +24,7 @@ $cols: $content_width / $cell; display: flex; flex: 0 0; background: $cell_bg; + border-radius: 4px; @include outer_shadow(); //&::after { diff --git a/src/components/main/SidePane/index.tsx b/src/components/main/SidePane/index.tsx new file mode 100644 index 00000000..1a580d9c --- /dev/null +++ b/src/components/main/SidePane/index.tsx @@ -0,0 +1,38 @@ +import React, { useEffect, useState } from 'react'; +import * as styles from './styles.scss'; +import classNames from 'classnames'; + +export const SidePane = ({ }) => { + const [left, setLeft] = useState(0); + + const moveThis = () => { + const shift = ((document.body.getBoundingClientRect().width - 1024) / 2) - 54 - 10; + setLeft(shift); + }; + + useEffect(() => { + window.addEventListener('resize', moveThis) + + return () => { window.removeEventListener('resize', moveThis); } + }); + + useEffect(moveThis, []); + + return ( +
+
+
+
+
+
+
+
+ +
+ +
+
+
+
+ ); +}; diff --git a/src/components/main/SidePane/styles.scss b/src/components/main/SidePane/styles.scss new file mode 100644 index 00000000..8a39eba7 --- /dev/null +++ b/src/components/main/SidePane/styles.scss @@ -0,0 +1,44 @@ +.pane { + width: 54px; + height: 100%; + position: fixed; + top: 0; + left: 0; + box-sizing: border-box; + padding: $gap / 2 0; + display: flex; + flex-direction: column; +} + +.group { + width: 54px; + border-radius: 4px; + margin: ($gap / 2) 0; + background: #191919; + box-sizing: border-box; + box-shadow: #111111 0 0 0 1px; + + &:global(.logo) { + color: white; + height: (54px * 1.5) + $gap / 2; + background: url('http://vault48.org/pixmaps/logo.png') no-repeat -20px -40px #191919; + // #c1543d + background-size: 140px; + font-weight: 600; + font-family: Raleway; + font-size: 14px; + text-align: center; + padding-top: 66px; + box-shadow: inset #111111 0 -1px, inset #222222 0 1px; + } +} + +.btn { + height: 54px; + box-shadow: inset #111111 0 -1px, inset #222222 0 1px; + border-radius: 4px; +} + +.flexy { + flex: 1; +} diff --git a/src/containers/MainLayout/index.tsx b/src/containers/MainLayout/index.tsx index 4c0a473c..18bf60df 100644 --- a/src/containers/MainLayout/index.tsx +++ b/src/containers/MainLayout/index.tsx @@ -1,11 +1,17 @@ import * as React from 'react'; import { Header } from "$components/main/Header"; +import {SidePane} from "$components/main/SidePane"; const style = require('./style.scss'); export const MainLayout = ({ children }) => (
-
+ { + //
+ } + { + + } {children}
); diff --git a/src/containers/MainLayout/style.scss b/src/containers/MainLayout/style.scss index 1936ffb1..42e73742 100644 --- a/src/containers/MainLayout/style.scss +++ b/src/containers/MainLayout/style.scss @@ -1,4 +1,4 @@ .wrapper { width: 100%; - //padding: $gap 0; + padding: $gap 0; } diff --git a/src/styles/colors.scss b/src/styles/colors.scss index b564c33d..959aedb2 100644 --- a/src/styles/colors.scss +++ b/src/styles/colors.scss @@ -10,7 +10,7 @@ $main_text_color: white; $content_bg_color: #222222; $content_bg_secondary: darken($content_bg_color, 3%); -$cell_bg: transparentize(white, 0.98); +$cell_bg: #222222; $text_normal: 16px; $text_small: 14px; diff --git a/src/styles/global.scss b/src/styles/global.scss index 6b75af29..561622a4 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -60,7 +60,7 @@ body { } :global(.content_container) { - background: $content_bg_color; + // background: $content_bg_color; } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 18de67fb..fe7bbc66 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -2,7 +2,7 @@ $cell: 256px; $content_width: $cell * 4; -$gap: 8px; +$gap: 10px; $spc: $gap * 2; $panel_radius: 1px; diff --git a/tsconfig.json b/tsconfig.json index 0c095e73..3ee6e9a6 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -5,6 +5,7 @@ "sourceMap": true, "noImplicitAny": false, "allowSyntheticDefaultImports": true, + "esModuleInterop": true, "module": "commonjs", "target": "es6", "jsx": "react", From 237d16c722b2322b17dae6c1395fb4b393f922b2 Mon Sep 17 00:00:00 2001 From: muerwre Date: Tue, 4 Jun 2019 04:06:51 +0700 Subject: [PATCH 2/3] cleanup --- src/containers/MainLayout/index.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/containers/MainLayout/index.tsx b/src/containers/MainLayout/index.tsx index 18bf60df..1c303ff8 100644 --- a/src/containers/MainLayout/index.tsx +++ b/src/containers/MainLayout/index.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; -import { Header } from "$components/main/Header"; -import {SidePane} from "$components/main/SidePane"; +import { SidePane } from "$components/main/SidePane"; const style = require('./style.scss'); From 6bcdac830b28a68e618957ea836c20c25d719c77 Mon Sep 17 00:00:00 2001 From: muerwre Date: Fri, 14 Jun 2019 06:16:35 +0700 Subject: [PATCH 3/3] red godrays --- src/components/login/LoginForm/style.scss | 2 +- src/components/main/GodRays/index.tsx | 20 ++++++++++---------- src/containers/LoginLayout/style.scss | 4 ++-- 3 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/components/login/LoginForm/style.scss b/src/components/login/LoginForm/style.scss index 9e372ce4..97a1c82d 100644 --- a/src/components/login/LoginForm/style.scss +++ b/src/components/login/LoginForm/style.scss @@ -17,7 +17,7 @@ align-items: center; justify-content: center; //background: url('../../../sprites/splotchy.svg'); - background-size: cover; + // background-size: cover; //@include outer_shadow(); } diff --git a/src/components/main/GodRays/index.tsx b/src/components/main/GodRays/index.tsx index 595ffc52..1617f910 100644 --- a/src/components/main/GodRays/index.tsx +++ b/src/components/main/GodRays/index.tsx @@ -40,22 +40,22 @@ export class GodRays extends React.Component { rays.map(({ angle, iterator, weight, speed, pulsar, opacity }, index) => { const gradient = ctx.createLinearGradient(0, 0, 0, height * 1.3); - gradient.addColorStop(0.2, `rgba(255, 255, 255, ${opacity * 0.1})`); - gradient.addColorStop(1, `rgba(255, 255, 255, 0)`); + gradient.addColorStop(0.2, `rgba(255, 60, 40, ${opacity * 0.1})`); + gradient.addColorStop(1, `rgba(255, 60, 40, 0)`); const gradient2 = ctx.createLinearGradient(0, 0, 0, height * 1.3); - gradient2.addColorStop(0.2, `rgba(255, 255, 255, ${opacity * 0.2})`); - gradient2.addColorStop(1, "rgba(255, 255, 255, 0)"); + gradient2.addColorStop(0.2, `rgba(255, 40, 100, ${opacity * 0.2})`); + gradient2.addColorStop(1, "rgba(255, 40, 100, 0)"); ctx.save(); - ctx.translate(width / 2, -600); + ctx.translate(width / 2, -900); ctx.rotate(angle); - ctx.translate(-width / 2, 600); + ctx.translate(-width / 2, 900); ctx.beginPath(); ctx.fillStyle = gradient; - ctx.moveTo(((width / 2) - (weight / 2)), -600); - ctx.lineTo(((width / 2) + (weight / 2)), -600); + ctx.moveTo(((width / 2) - (weight / 2)), -900); + ctx.lineTo(((width / 2) + (weight / 2)), -900); ctx.lineTo(((width / 2) + (weight / 2 + 300)), height * 1.4); ctx.lineTo(((width / 2) - (weight / 2 + 300)), height * 1.4); ctx.fill(); @@ -63,8 +63,8 @@ export class GodRays extends React.Component { ctx.beginPath(); ctx.fillStyle = gradient2; - ctx.moveTo(((width / 2) - (weight / 6)), -600); - ctx.lineTo(((width / 2) + (weight / 6)), -600); + ctx.moveTo(((width / 2) - (weight / 6)), -900); + ctx.lineTo(((width / 2) + (weight / 6)), -900); ctx.lineTo(((width / 2) + (weight / 6 + 50)), height * 1.4); ctx.lineTo(((width / 2) - (weight / 6 + 250)), height * 1.4); ctx.fill(); diff --git a/src/containers/LoginLayout/style.scss b/src/containers/LoginLayout/style.scss index 175b9492..36787539 100644 --- a/src/containers/LoginLayout/style.scss +++ b/src/containers/LoginLayout/style.scss @@ -24,7 +24,7 @@ display: flex; align-items: stretch; justify-content: stretch; - background: rgba(0,0,0,0.1); + // background: rgba(0,0,0,0.1); - @include outer_shadow(); + // @include outer_shadow(); }