muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-24 20:36:40 +07:00
Code Packages Activity Actions

image layout

Browse source
This commit is contained in:
muerwre 2019-07-26 20:02:23 +07:00
parent 7cbfbc98bd
commit 163a46ace2
13 changed files with 237 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/components/containers/Filler/index.tsx Normal file
View file

@ -0,0 +1,18 @@
import React, { FC } from 'react';
import classNames from 'classnames';
import * as styles from './styles.scss';
type IProps = React.HTMLAttributes<HTMLDivElement>;
export const Filler: FC<IProps> = ({
className = '',
...props
}) => (
<div
className={classNames(
styles.filler,
className,
)}
{...props}
/>
);

3
src/components/containers/Filler/styles.scss Normal file
View file

@ -0,0 +1,3 @@
.filler {
flex: 1;
}

2
src/components/containers/Group/styles.scss
View file

@ -29,7 +29,7 @@
}
& > * {
margin: 0 $gap;
margin: 0 $gap / 2;
&:first-child { margin-left: 0; }
&:last-child { margin-right: 0; }

12
src/components/main/SidePane/index.tsx
View file

@ -3,22 +3,20 @@ import * as styles from './styles.scss';
import classNames from 'classnames';
interface IProps {
container: React.RefObject<HTMLDivElement>;
}
export const SidePane: FC<IProps> = ({
container,
}) => {
const content_width = 1100;
const [left, setLeft] = useState(0);
const moveThis = useCallback(() => {
const shift = window.innerWidth > (1024 + 64 + 20)
? ((window.innerWidth - 1024 - 64 - 20) / 2) - 54 - 10 + 64
const shift = window.innerWidth > (content_width + 64 + 20)
? ((window.innerWidth - content_width - 64 - 20) / 2) - 54 - 10 + 64
: 10;
setLeft(shift);
console.log({ shift });
}, [setLeft, container]);
}, [setLeft]);
useEffect(() => {
moveThis();
@ -29,7 +27,7 @@ export const SidePane: FC<IProps> = ({
window.removeEventListener('resize', moveThis);
document.removeEventListener('DOMContentLoaded', moveThis);
}
}, [container]);
}, []);
return (
<div className={styles.pane} style={{ transform: `translate(${left}px, 0px)` }}>

21
src/components/node/NodePanel/index.tsx Normal file
View file

@ -0,0 +1,21 @@
import React, { FC } from 'react';
import * as styles from './styles.scss';
import { Group } from "~/components/containers/Group";
import { Filler } from "~/components/containers/Filler";
interface IProps {}
const NodePanel: FC<IProps> = () => (
<div className={styles.wrap}>
<Group horizontal className={styles.panel}>
<Filler>
<div className={styles.title}>Node title</div>
<div className={styles.name}>~author</div>
</Filler>
</Group>
<div className={styles.mark} />
</div>
);
export { NodePanel };

76
src/components/node/NodePanel/styles.scss Normal file
View file

@ -0,0 +1,76 @@
.wrap {
//height: $node_title_height;
//background: $node_title_background;
background: transparentize(black, 0.9);
padding: $gap;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: stretch;
//border-radius: $radius $radius 0 0;
//box-shadow: transparentize(black, 0.3) 0 2px, inset transparentize(white, 0.98) 0 1px;
box-shadow: transparentize(white, 0.97) 0 1px, inset transparentize(white, 0.97) 0 1px;
position: relative;
}
.title {
text-transform: uppercase;
font: $font_24_semibold;
height: 24px;
padding-bottom: 6px;
}
.name {
font: $font_12_regular;
color: transparentize(white, 0.5);
}
.btn {
flex: 1;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
fill: transparentize(white, 0.5);
}
.panel {
flex: 1;
}
.buttons {
height: 54px;
border-radius: $radius $radius 0 0;
background: linear-gradient(176deg, #f42a00, #5c1085);
background: #222222;
position: absolute;
bottom: 0;
right: 10px;
width: 270px;
display: flex;
}
.mark {
flex: 0 0 32px;
background: red;
position: relative;
&::after {
content: ' ';
position: absolute;
top: -38px;
right: 4px;
width: 24px;
height: 52px;
background: #ff3344;
box-shadow: transparentize(black, 0.8) 4px 2px;
}
}
.sep {
flex: 0 0 12px;
height: 6px;
width: 12px;
border-radius: 4px;
background: transparentize(black, 0.7);
}

52
src/containers/examples/ImageExample/index.tsx
View file

@ -5,20 +5,28 @@ import { Group } from "~/components/containers/Group";
import { Padder } from "~/components/containers/Padder";
import range from 'ramda/es/range';
import { Comment } from "~/components/node/Comment";
import { NodePanel } from "~/components/node/NodePanel";
import { Filler } from "~/components/containers/Filler";
interface IProps {}
const ImageExample: FC<IProps> = () => (
<Card className={styles.node}>
<Group>
<div
className={styles.image_container}
>
<img className={styles.image} src="http://37.192.131.144/full/photos/photo-20120702-99383.jpg" />
{
// http://37.192.131.144/full/attached/2017/11/f01fdaaea789915284757634baf7cd11.jpg
// http://37.192.131.144/full/photos/photo-20120702-99383.jpg
}
<img className={styles.image} src="http://37.192.131.144/full/attached/2017/11/f01fdaaea789915284757634baf7cd11.jpg" />
</div>
<Group>
<NodePanel />
<Padder horizontal>
<Group horizontal>
<Group horizontal className={styles.content}>
<Group className={styles.comments}>
{
range(1,6).map(el => (
@ -30,7 +38,45 @@ const ImageExample: FC<IProps> = () => (
</Group>
<div className={styles.panel}>
<Padder className={styles.buttons}>
<Group>
<div className={styles.button}>
<Group horizontal>
<div className={styles.button_icon}>
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z"/></svg>
</div>
<Filler>
<div className={styles.button_title}>На главной</div>
</Filler>
</Group>
</div>
<div className={styles.button}>
<Group horizontal>
<div className={styles.button_icon}>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0z"/><path d="M12 6c3.79 0 7.17 2.13 8.82 5.5-.59 1.22-1.42 2.27-2.41 3.12l1.41 1.41c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l1.65 1.65C10.66 6.09 11.32 6 12 6zm-1.07 1.14L13 9.21c.57.25 1.03.71 1.28 1.28l2.07 2.07c.08-.34.14-.7.14-1.07C16.5 9.01 14.48 7 12 7c-.37 0-.72.05-1.07.14zM2.01 3.87l2.68 2.68C3.06 7.83 1.77 9.53 1 11.5 2.73 15.89 7 19 12 19c1.52 0 2.98-.29 4.32-.82l3.42 3.42 1.41-1.41L3.42 2.45 2.01 3.87zm7.5 7.5l2.61 2.61c-.04.01-.08.02-.12.02-1.38 0-2.5-1.12-2.5-2.5 0-.05.01-.08.01-.13zm-3.4-3.4l1.75 1.75c-.23.55-.36 1.15-.36 1.78 0 2.48 2.02 4.5 4.5 4.5.63 0 1.23-.13 1.77-.36l.98.98c-.88.24-1.8.38-2.75.38-3.79 0-7.17-2.13-8.82-5.5.7-1.43 1.72-2.61 2.93-3.53z"/></svg>
</div>
<Filler>
<div className={styles.button_title}>Видно всем</div>
</Filler>
</Group>
</div>
<div className={styles.button}>
<Group horizontal>
<div className={styles.button_icon}>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0z"/><path d="M12 6c3.79 0 7.17 2.13 8.82 5.5-.59 1.22-1.42 2.27-2.41 3.12l1.41 1.41c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l1.65 1.65C10.66 6.09 11.32 6 12 6zm-1.07 1.14L13 9.21c.57.25 1.03.71 1.28 1.28l2.07 2.07c.08-.34.14-.7.14-1.07C16.5 9.01 14.48 7 12 7c-.37 0-.72.05-1.07.14zM2.01 3.87l2.68 2.68C3.06 7.83 1.77 9.53 1 11.5 2.73 15.89 7 19 12 19c1.52 0 2.98-.29 4.32-.82l3.42 3.42 1.41-1.41L3.42 2.45 2.01 3.87zm7.5 7.5l2.61 2.61c-.04.01-.08.02-.12.02-1.38 0-2.5-1.12-2.5-2.5 0-.05.01-.08.01-.13zm-3.4-3.4l1.75 1.75c-.23.55-.36 1.15-.36 1.78 0 2.48 2.02 4.5 4.5 4.5.63 0 1.23-.13 1.77-.36l.98.98c-.88.24-1.8.38-2.75.38-3.79 0-7.17-2.13-8.82-5.5.7-1.43 1.72-2.61 2.93-3.53z"/></svg>
</div>
<Filler>
<div className={styles.button_title}>Редактировать</div>
</Filler>
</Group>
</div>
</Group>
</Padder>
</div>
</Group>
</Padder>

45
src/containers/examples/ImageExample/styles.scss
View file

@ -8,15 +8,24 @@
.image {
max-height: 800px;
opacity: 1;
width: 100%;
}
}
.content {
align-items: stretch !important;
}
.comments {
flex: 3 1;
}
.panel {
flex: 1 3;
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
.node {
@ -26,3 +35,39 @@
.image {
background: red;
}
.buttons {
background: #161616;
flex: 1;
border-radius: $panel_radius;
box-shadow: transparentize(black, 0.3) 0 4px, inset transparentize(white, 0.98) 0 1px;
//position: relative;
//top: -64px
}
.button {
fill: white;
height: 48px;
display: flex;
align-items: center;
}
.button_icon {
flex: 0 0 38px;
align-items: center;
justify-content: center;
display: flex;
}
.button_title {
font: $font_16_semibold;
text-transform: uppercase;
margin-bottom: 2px;
white-space: nowrap;
flex: 1;
}
.button_desc {
font: $font_12_regular;
color: transparentize(white, 0.7);
}

2
src/containers/flow/FlowLayout/index.tsx
View file

@ -1,7 +1,5 @@
import * as React from 'react';
import { MainLayout } from "~/containers/main/MainLayout";
import { TestGrid } from "~/components/flow/TestGrid";
// const style = require('./style.scss');
export const FlowLayout = () => (
<div className="default_container content_container">

6
src/containers/main/MainLayout/index.tsx
View file

@ -1,18 +1,16 @@
import * as React from 'react';
import { SidePane } from "~/components/main/SidePane";
import * as styles from './styles.scss';
import { useRef } from "react";
export const MainLayout = ({ children }) => {
const container = useRef(null);
return (
<div className={styles.wrapper}>
<div className={styles.content} ref={container}>
<div className={styles.content}>
{children}
</div>
<SidePane container={container} />
<SidePane />
</div>
);
};

2
src/index.html
View file

@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,800&display=swap&subset=cyrillic" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800&display=swap&subset=cyrillic" rel="stylesheet">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>

1
src/styles/colors.scss
View file

@ -25,3 +25,4 @@ $comment_bg: #191919;
$panel_bg: #191919;
$node_bg: #111111;
$node_image_bg: #131313;
$node_title_background: #191919;

19
src/styles/variables.scss
View file

@ -1,21 +1,24 @@
@import 'colors';
$cell: 256px;
$content_width: $cell * 4;
$content_width: 1100px;
$gap: 10px;
$spc: $gap * 2;
$radius: 3px;
$cell_radius: $radius;
$radius: 6px;
$cell_radius: 4px;
$panel_radius: $radius;
$grid_line: 4px;
$input_height: 32px;
$input_radius: 2px;
$input_radius: $radius;
$info_height: 24px;
$panel_size: 64px;
$node_title_height: $panel_size;
$bold: 700;
$semibold: 600;
$regular: 400;
$medium: 500;
@ -25,13 +28,15 @@ $extra_light: 200;
$font: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$font_48_semibold: $semibold 48px $font;
$font_24_semibold: $semibold 24px $font;
$font_24_bold: $bold 24px $font;
$font_24_semibold: $bold 24px $font;
$font_24_regular: $regular 24px $font;
$font_18_regular: $regular 18px $font;
$font_18_extra_light: $extra_light 18px $font;
$font_18_semibold: $semibold 18px $font;
$font_16_regular: $regular 16px $font;
$font_16_semibold: $semibold 16px $font;
$font_16_medium: $medium 16px $font;
$font_14_regular: $regular 14px $font;
$font_14_semibold: $semibold 14px $font;
$font_14_medium: $medium 14px $font;
@ -41,7 +46,7 @@ $font_12_regular: $regular 12px $font;
$font_10_regular: $regular 10px $font;
$font_10_semibold: $semibold 10px $font;
$font_cell_title: $font_24_semibold;
$font_cell_title: $font_24_bold;
$font_hero_title: $font_48_semibold;
@mixin outer_shadow() {