From 6168841f78bcbc70f925752fd6ed959de3bd3f2c Mon Sep 17 00:00:00 2001 From: muerwre Date: Thu, 4 Apr 2019 12:08:36 +0700 Subject: [PATCH] fixed grid layout --- src/components/flow/TestGrid/index.tsx | 6 ++--- src/components/flow/TestGrid/style.scss | 28 +++++++++++++++------- src/components/main/Header/index.tsx | 12 ++++++---- src/components/main/Header/style.scss | 5 +++- src/redux/user/reducer.ts | 32 +++++++++++++++++++++---- src/styles/colors.scss | 6 +++-- src/styles/global.scss | 13 +++++----- src/styles/variables.scss | 2 +- 8 files changed, 73 insertions(+), 31 deletions(-) diff --git a/src/components/flow/TestGrid/index.tsx b/src/components/flow/TestGrid/index.tsx index b59be9a8..82cfd2cb 100644 --- a/src/components/flow/TestGrid/index.tsx +++ b/src/components/flow/TestGrid/index.tsx @@ -11,8 +11,8 @@ const style = require('./style.scss'); export const TestGrid = () => (
-
-
+
+
@@ -20,7 +20,7 @@ export const TestGrid = () => (
-
+
); diff --git a/src/components/flow/TestGrid/style.scss b/src/components/flow/TestGrid/style.scss index fcb9018e..87bb58af 100644 --- a/src/components/flow/TestGrid/style.scss +++ b/src/components/flow/TestGrid/style.scss @@ -1,3 +1,5 @@ +$cols: $content_width / $cell; + .grid { //display: grid; padding: $gap / 2; @@ -5,12 +7,15 @@ } .grid_test { - width: 1024px; + width: $content_width; display: grid; - grid-template-columns: repeat(5, 256px); - grid-template-rows: repeat(2, 256px); + grid-template-columns: repeat($cols, 1fr); + grid-template-rows: $cell * 1.2 - 4; grid-auto-rows: 256px; grid-auto-flow: row dense; + + grid-column-gap: 4px; + grid-row-gap: 4px; } .cell { @@ -18,13 +23,14 @@ box-sizing: border-box; display: flex; flex: 0 0; + background: $cell_bg; - &::after { - content: ' '; - background: transparentize(white, 0.9); - width: 100%; - height: 100%; - } + //&::after { + // content: ' '; + // background: transparentize(white, 0.9); + // width: 100%; + // height: 100%; + //} } .vert_2 { @@ -50,3 +56,7 @@ .hor_4 { grid-column-end: span 4; } + +.pad_last { + grid-column-end: $cols + 1; +} diff --git a/src/components/main/Header/index.tsx b/src/components/main/Header/index.tsx index 4f5b614e..fde983df 100644 --- a/src/components/main/Header/index.tsx +++ b/src/components/main/Header/index.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; const style = require('./style.scss'); -const logo_sm = require('$sprites/logo_sm.svg'); export const Header = () => (
@@ -14,10 +13,13 @@ export const Header = () => (
boris
flow
-
-
- gvorcek -
); + +/* +
+
+ gvorcek +
+ */ diff --git a/src/components/main/Header/style.scss b/src/components/main/Header/style.scss index f4fa6ea9..19cb7471 100644 --- a/src/components/main/Header/style.scss +++ b/src/components/main/Header/style.scss @@ -3,7 +3,8 @@ align-items: center; justify-content: flex-end; font-weight: 500; - padding: $gap $spc; + //padding: $gap 0; + height: 100px; } .logo { @@ -34,6 +35,8 @@ height: $gap; display: block; } + + &:last-child::after { display: none; } } } diff --git a/src/redux/user/reducer.ts b/src/redux/user/reducer.ts index 1460b096..165a2a7a 100644 --- a/src/redux/user/reducer.ts +++ b/src/redux/user/reducer.ts @@ -2,8 +2,23 @@ import { createReducer } from 'reduxsauce'; import * as ACTIONS from "$redux/user/actions"; import { USER_ACTIONS } from "$redux/user/constants"; +export interface IUserProfile { + id: number, + username: string, + email: string, + role: string, + activated: boolean, +} + +export interface IUserFormStateLogin { + error: string, +} + export type IRootState = Readonly<{ - // key: string + profile: IUserProfile, + form_state: { + login: IUserFormStateLogin, + }, }>; type UnsafeReturnType = T extends (...args: any[]) => infer R ? R : any; @@ -20,9 +35,18 @@ const HANDLERS = { }; const INITIAL_STATE: IRootState = { - // key: val, - // key: val, - // key: val + profile: { + id: 0, + username: '', + email: '', + role: '', + activated: false, + }, + form_state: { + login: { + error: '', + } + } }; export default createReducer(INITIAL_STATE, HANDLERS); diff --git a/src/styles/colors.scss b/src/styles/colors.scss index 9c0783c6..b614e702 100644 --- a/src/styles/colors.scss +++ b/src/styles/colors.scss @@ -1,4 +1,6 @@ -$main_bg_color: #111111; +$main_bg_color: #161616; $main_text_color: white; -$content_bg_color: #191919; +$content_bg_color: #222222; + +$cell_bg: transparentize(white, 0.95); diff --git a/src/styles/global.scss b/src/styles/global.scss index 93b02887..41554b46 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -2,8 +2,8 @@ body { background: $main_bg_color; - background: $main_bg_color url("../sprites/dots.svg"); - //url("http://vault48.org/pixmaps/texture.jpg"); + //background: $main_bg_color url("../sprites/dots.svg"); + background: url("http://vault48.org/pixmaps/texture.jpg"); //background: #111111; color: $main_text_color; font-family: Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; @@ -13,14 +13,15 @@ body { &::before { content: ''; position: absolute; - height: 100%; + height: 200px; width: 100%; top: 0; left: 0; z-index: -1; - background: url("../sprites/circles.svg"); + //background: url("../sprites/circles.svg"); + background: url("http://vault48.org/pixmaps/texture_alt.jpg"); pointer-events: none; - background-size: cover; + //background-size: cover; } } @@ -39,7 +40,7 @@ body { :global(.head_container) { - background: $main_bg_color; + //background: $main_bg_color; } :global(.footer) { diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 5e3de1e5..53e1dd3f 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1,7 +1,7 @@ @import 'colors'; $cell: 256px; -$content_width: $cell * 5; +$content_width: $cell * 4; $gap: 8px; $spc: $gap * 2; $panel_radius: 1px;