Skip to content

K
kus-admin
Commit 873ee75d by Иван Кубота
Options

stay transforms in src

parents 9af7b605 e0d83d37
Showing with 327 additions and 257 deletions
index.js
......@@ -186,7 +186,7 @@ var transformServe = function(dir) {
}
};
app.use(transformServe('public'));
app.use(transformServe('src'));
var lives = [];
app.use('/', function(req, res, next){
......
public/js/mobileFullHeight.js 0 → 100644
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
window.addEventListener('resize', function() {
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
});
public/js/view/test.jsx deleted 100644 → 0
var x = <div renderTo={document.getElementById('22')}>t1<span>Title</span>t0</div>;
\ No newline at end of file
src/base.scss
$black: #000;
$white: #fff;
$d-green: #006C43;
$l-green: #34BE5B;
$gray: #a6a6a6;
$font: 'SF Pro Text', Arial, sans-serif;
src/index.html
......@@ -3,6 +3,7 @@
<head>
<title>Category mapper</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale="/>
<script src="core/Path.js"></script>
<script src="core/Require.js"></script>
<script src="core/LivestReloading.js"></script>
......@@ -14,10 +15,7 @@
<script src="core/data/store/Store.js"></script>
<script src="model/Store.js"></script>
<script src="js/view/base.js"></script>
<script src="model/Store.js"></script>
$BUNDLE$
</head>
......@@ -28,5 +26,6 @@
main();
});
</script>
<script src="js/mobileFullHeight.js"></script>
</body>
</html>
\ No newline at end of file
</html>
src/main.jsx
......@@ -2,11 +2,14 @@ import './main.scss';
import './view/page/login/Login.jsx';
import './view/page/account/Account.jsx';
import './view/cmp/switch/Switch.jsx';
import Header from './view/block/header/Header.jsx';
export default function() {
let tagField, exportEl;
let dom = <div renderTo={document.body} cls="content">
{view.cmp.Switch({cls: 'content-area', key: 'navigation.current'}, {
let dom = <div renderTo={document.body} cls="page-content">
<view.block.Header/>
{view.cmp.Switch({cls: 'page-content__inner', key: 'navigation.current'}, {
login: new view.page.Login(),
main: new view.page.Account(),
})}
......
src/main.scss
@import "base.scss";
body {
font-family: Verdana, Serif;
}
.main-menu, .export-sub-menu, .generate-sub-menu {
display: flex;
@font-face {
font-family: "SF Pro Text";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("fonts/SFProText-Regular.woff2") format("woff2"),
url("fonts/SFProText-Regular.woff") format("woff");
}
.main-menu-item.main-menu-item__active {
border-bottom: 5px solid #00832a;
}
.main-menu-item {
flex-direction: row;
padding: 4px 8px 4px;
margin: 5px 5px 2px 5px;
border-bottom: 5px solid transparent;
}
.main-menu-item__export {
margin-left: auto;
}
.main-menu {
border-bottom: 1px solid #00832a;
//margin-bottom: 15px;
}
.table-item {
padding: 10px;
transition: all ease-out 0.3s;
max-height: 500px;
opacity: 1;
position: relative;
}
.table-item:hover {
background: #ffe476;
}
.table-item:hover .product-cmp {
background: #fff;
}
.table-item__product-components {
margin-left: -5px;
}
.table-item__hidden {
max-height: 0;
opacity: 0;
body {
margin: 0;
padding: 0;
}
.table-item__hidden-full {
display: none;
}
.table-item-action {
cursor: pointer
}
.tag {
color: #125ba1;
font-style: italic;
font-size: 14px;
margin-left: 8px;
}
.product-cmp {
border-radius: 8px;
background: #fff3ca;
padding: 1px 5px;
font-size: 12px;
}
.product-title {
font-size: 17px;
margin-right: 16px;
}
textarea.export-data {
width: calc(100% - 32px);
margin: 16px 0 5px 14px;
height: calc(100vh - 200px);
}
.export-sub-menu {
margin-right: 10%;
margin-bottom: 10px;
}
.export-sub-menu .main-menu-item,
.product-filter__title, .product-filter,
.generate-sub-menu .main-menu-item{
color: #fff;
}
.main-menu-item {
cursor: pointer;
transition: all 0.5s;
min-width: 320px;
font-family: $font;
font-size: 18px;
line-height: 23px;
}
.product-filter {
.page-content {
display: flex;
padding: 5px;
}
.product-filter__title {
font-size: 20px;
padding-top:4px;
}
.product-filter__input {
margin-left: 20px;
padding: 4px 10px;
font-size: 20px;
font-family: Verdana;
flex-grow: 1;
}
.product-filter__label {
margin-right: 16px;
}
.highlighted {
background: #00832a;
color: #fff;
}
.product-filter__hint {
margin-right: 16px;
}
input:focus, textarea:focus, select:focus {
outline-color: #00832a;
}
.product-filter__area, .title-gradient {
background: linear-gradient(181deg, #afca0b, #00832a);
padding: 12px 8px 16px;
}
.export-panel .title-gradient {
padding-bottom: 0;
}
.export-panel .main-menu-item.main-menu-item__active,
.generate-panel .main-menu-item.main-menu-item__active{
border-bottom: 5px solid #fff;
}
body {margin: 0; padding: 0}
.tag-manipulations {
padding: 8px;
}
.tag-manipulations__not-active {
opacity: 0.3;
pointer-events: none;
}
.cmp-tag-field {
display: inline-block;
width: 300px;
position: relative;
}
.cmp-tag-input {
width: 100%;
flex-direction: column;
box-sizing: border-box;
}
.cmp-tag-dropdown {
position: absolute;
width: 100%;
background: #fff;
border: 1px solid #158b26;
box-sizing: border-box;
margin-top: -1px;
z-index: 1;
}
.cmp-tag-dropdown-item {
margin: 8px;
}
.cmp-tag-dropdown__hidden {
display: none;
}
.table-item-action {
display: none;
cursor: pointer;
color: #a00;
position: absolute;
top: -4px;
padding-top: 90px;
min-height: 100vh;
min-height: calc(var(--vh, 1vh) * 100);
}
.table-item:hover .table-item-action {
display: inline-block;
}
.product-description {
font-size: 14px;
padding: 16px 0 8px;
max-width: 480px;
}
.quiz-answer-label {
display: block;
}
textarea.generate-debug {
width: calc(100% - 32px);
margin: 16px 0 5px 14px;
height: 500px;
}
.tag-manipulations-add-tag__comment {
font-size: 12px
}
.tag-manipulations-add-tag__comment span{
margin-left: 16px
}
.product-title {
cursor: pointer;
}
.generate-title {
font-size: 18px;
margin: 16px
.page-content__inner {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.quiz-answer-label {
margin: 16px 32px 16px 16px;
}
.quiz-answer-label input {
margin-right:8px
}
.generate-controls {
margin:16px
}
.generate-seed-label {
margin: 0 8px 0 32px
}
.generate-example {
position: relative;
}
.generate-image {
position: relative;
float: right;
width: 265px;
margin: -20px 16px 16px;
border: 2px solid #429d1e;
}
.generate-image img {
width: 100%;
}
\ No newline at end of file
//.main-menu, .export-sub-menu, .generate-sub-menu {
// display: flex;
//}
//
//.main-menu-item.main-menu-item__active {
// border-bottom: 5px solid #00832a;
//}
//
//.main-menu-item {
// flex-direction: row;
// padding: 4px 8px 4px;
// margin: 5px 5px 2px 5px;
// border-bottom: 5px solid transparent;
//}
//
//
//.main-menu-item__export {
// margin-left: auto;
//}
//.main-menu {
// border-bottom: 1px solid #00832a;
// //margin-bottom: 15px;
//}
//
//
//.table-item {
// padding: 10px;
// transition: all ease-out 0.3s;
// max-height: 500px;
// opacity: 1;
// position: relative;
//
//}
//
//.table-item:hover {
// background: #ffe476;
//}
//
//
//.table-item:hover .product-cmp {
// background: #fff;
//}
//.table-item__product-components {
// margin-left: -5px;
//}
//.table-item__hidden {
// max-height: 0;
// opacity: 0;
// padding: 0;
//}
//.table-item__hidden-full {
// display: none;
//}
//.table-item-action {
// cursor: pointer
//}
//
//
//.tag {
// color: #125ba1;
// font-style: italic;
// font-size: 14px;
// margin-left: 8px;
//}
//
//.product-cmp {
// border-radius: 8px;
// background: #fff3ca;
// padding: 1px 5px;
// font-size: 12px;
//}
//.product-title {
// font-size: 17px;
// margin-right: 16px;
//}
//
//
//textarea.export-data {
// width: calc(100% - 32px);
// margin: 16px 0 5px 14px;
// height: calc(100vh - 200px);
//}
//
//.export-sub-menu {
// margin-right: 10%;
// margin-bottom: 10px;
//}
//.export-sub-menu .main-menu-item,
//.product-filter__title, .product-filter,
//.generate-sub-menu .main-menu-item{
// color: #fff;
//}
//.main-menu-item {
// cursor: pointer;
// transition: all 0.5s;
//}
//
//.product-filter {
// display: flex;
// padding: 5px;
//}
//.product-filter__title {
// font-size: 20px;
// padding-top:4px;
//}
//.product-filter__input {
// margin-left: 20px;
// padding: 4px 10px;
// font-size: 20px;
// font-family: Verdana;
// flex-grow: 1;
//}
//.product-filter__label {
// margin-right: 16px;
//}
//.highlighted {
// background: #00832a;
// color: #fff;
//}
//.product-filter__hint {
// margin-right: 16px;
//}
//
//
//input:focus, textarea:focus, select:focus {
// outline-color: #00832a;
//}
//.product-filter__area, .title-gradient {
// background: linear-gradient(181deg, #afca0b, #00832a);
// padding: 12px 8px 16px;
//}
//
//.export-panel .title-gradient {
// padding-bottom: 0;
//}
//.export-panel .main-menu-item.main-menu-item__active,
//.generate-panel .main-menu-item.main-menu-item__active{
// border-bottom: 5px solid #fff;
//}
//body {margin: 0; padding: 0}
//
//.tag-manipulations {
// padding: 8px;
//}
//.tag-manipulations__not-active {
// opacity: 0.3;
// pointer-events: none;
//}
//
//.cmp-tag-field {
// display: inline-block;
// width: 300px;
// position: relative;
//}
//.cmp-tag-input {
// width: 100%;
// box-sizing: border-box;
//}
//.cmp-tag-dropdown {
// position: absolute;
// width: 100%;
// background: #fff;
// border: 1px solid #158b26;
// box-sizing: border-box;
// margin-top: -1px;
// z-index: 1;
//}
//.cmp-tag-dropdown-item {
// margin: 8px;
//}
//.cmp-tag-dropdown__hidden {
// display: none;
//}
//.table-item-action {
// display: none;
// cursor: pointer;
// color: #a00;
// position: absolute;
// top: -4px;
//}
//
//.table-item:hover .table-item-action {
// display: inline-block;
//}
//
//.product-description {
// font-size: 14px;
// padding: 16px 0 8px;
// max-width: 480px;
//}
//.quiz-answer-label {
// display: block;
//}
//textarea.generate-debug {
// width: calc(100% - 32px);
// margin: 16px 0 5px 14px;
// height: 500px;
//}
//
//.tag-manipulations-add-tag__comment {
// font-size: 12px
//}
//
//.tag-manipulations-add-tag__comment span{
// margin-left: 16px
//}
//.product-title {
// cursor: pointer;
//}
//
//.generate-title {
// font-size: 18px;
// margin: 16px
//}
//
//.quiz-answer-label {
// margin: 16px 32px 16px 16px;
//}
//.quiz-answer-label input {
// margin-right:8px
//}
//.generate-controls {
// margin:16px
//}
//.generate-seed-label {
// margin: 0 8px 0 32px
//}
//.generate-example {
// position: relative;
//}
//.generate-image {
// position: relative;
// float: right;
// width: 265px;
// margin: -20px 16px 16px;
// border: 2px solid #429d1e;
//}
//.generate-image img {
// width: 100%;
//}
src/svg/arr.svg 0 → 100644
<svg width="17" height="11" viewBox="0 0 17 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0386 0.346239C10.4106 -0.0716678 11.0612 -0.117742 11.4918 0.243329L16.6433 4.56333C16.8644 4.74875 16.994 5.01657 16.9998 5.30012C17.0056 5.58368 16.8871 5.85629 16.6738 6.0501L11.5223 10.7301C11.1068 11.1075 10.4548 11.0866 10.066 10.6834C9.67714 10.2802 9.69869 9.64734 10.1141 9.26993L14.4293 5.34976L10.1446 1.7567C9.71403 1.39563 9.66656 0.764145 10.0386 0.346239Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 5.5C0 4.94772 0.461282 4.5 1.0303 4.5H15.4545C16.0236 4.5 16.4848 4.94772 16.4848 5.5C16.4848 6.05228 16.0236 6.5 15.4545 6.5H1.0303C0.461282 6.5 0 6.05228 0 5.5Z" fill="white"/>
</svg>
src/view/block/header/Header.jsx 0 → 100644
import './Header.scss';
export default D.declare('view.block.Header', () => {
return <header class="page-header">
</header>
});
src/view/block/header/Header.scss 0 → 100644
@import '../../../base.scss';
.page-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
min-height: 90px;
background-color: $white;
box-shadow: 0 4px 10px rgba(190, 190, 190, 0.25);
}
src/view/page/login/Login.jsx
import '/view/cmp/field/LabeledField.jsx';
import Logo from '/svg/logo_vkusvill.svg';
import '../../cmp/field/LabeledField.jsx';
import Logo from '../../../svg/logo_vkusvill.svg';
import './loginPage.scss';
export default D.declare('view.page.Login', ()=>
<div>
<div class="big-logo">
<Logo width="660" height="300"/>
</div>
<view.cmp.field.LabeledField label={'Login'}/>
<view.cmp.field.LabeledField label={'Password'}/>
<button type={'button'} onclick={()=>store.set('navigation.current', 'main')}>To account</button>
</div>
export default D.declare('view.page.Login', () =>
<div className={"login-page"}>
<div class="login-page__big-logo">
<Logo width="660" height="300"/>
</div>
<view.cmp.field.LabeledField label={'Login'}/>
<view.cmp.field.LabeledField label={'Password'}/>
<button type={'button'} onclick={() => store.set('navigation.current', 'main')}>To account</button>
</div>
)
src/view/page/login/loginPage.scss 0 → 100644
.login-page {
flex-grow: 1;
margin: 0 30px 30px;
background-image: url("/uploads/images/bg-leaves.svg");
background-repeat: no-repeat;
background-size: 100% auto;
background-position: bottom center;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment