finish layout
This commit is contained in:
parent
2262d3f223
commit
8a6f0e37b3
13
package-lock.json
generated
13
package-lock.json
generated
@ -7,6 +7,9 @@
|
|||||||
"": {
|
"": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
|
"dependencies": {
|
||||||
|
"normalize.css": "^8.0.1"
|
||||||
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/happypack": "^5.0.2",
|
"@types/happypack": "^5.0.2",
|
||||||
"@types/html-webpack-plugin": "^3.2.6",
|
"@types/html-webpack-plugin": "^3.2.6",
|
||||||
@ -5086,6 +5089,11 @@
|
|||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/normalize.css": {
|
||||||
|
"version": "8.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
|
||||||
|
"integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
|
||||||
|
},
|
||||||
"node_modules/npm-run-path": {
|
"node_modules/npm-run-path": {
|
||||||
"version": "4.0.1",
|
"version": "4.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
|
||||||
@ -11318,6 +11326,11 @@
|
|||||||
"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
|
"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"normalize.css": {
|
||||||
|
"version": "8.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
|
||||||
|
"integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
|
||||||
|
},
|
||||||
"npm-run-path": {
|
"npm-run-path": {
|
||||||
"version": "4.0.1",
|
"version": "4.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
|
||||||
|
|||||||
@ -49,5 +49,8 @@
|
|||||||
"homepage": "https://bitbucket.org/ksv741/excel-course#readme",
|
"homepage": "https://bitbucket.org/ksv741/excel-course#readme",
|
||||||
"description": "",
|
"description": "",
|
||||||
"browserslist": "> 0.25%, not dead",
|
"browserslist": "> 0.25%, not dead",
|
||||||
"module": "true"
|
"module": "true",
|
||||||
|
"dependencies": {
|
||||||
|
"normalize.css": "^8.0.1"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
46
src/assets/dashboard.html
Normal file
46
src/assets/dashboard.html
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="shortcut icon" href="favicon.ico " type="image/x-icon">
|
||||||
|
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
||||||
|
<title>Excel course</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="app">
|
||||||
|
|
||||||
|
<div class="db">
|
||||||
|
<div class="db__header">
|
||||||
|
<h1>Excel dashboard</h1>
|
||||||
|
</div>
|
||||||
|
<div class="db__new">
|
||||||
|
<div class="db__view">
|
||||||
|
<a href="#" class="db__create">Новая таблица</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="db__table db__view">
|
||||||
|
<div class="db__list-header">
|
||||||
|
<span>Название</span>
|
||||||
|
<span>Дата открытия</span>
|
||||||
|
</div>
|
||||||
|
<ul class="db__list">
|
||||||
|
<li class="db__record">
|
||||||
|
<a href="#">Первая таблица</a>
|
||||||
|
<strong>06.10.2022</strong>
|
||||||
|
</li>
|
||||||
|
<li class="db__record">
|
||||||
|
<a href="#">Вторая таблица</a>
|
||||||
|
<strong>06.10.2022</strong>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
76
src/assets/excel.html
Normal file
76
src/assets/excel.html
Normal file
@ -0,0 +1,76 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="shortcut icon" href="favicon.ico " type="image/x-icon">
|
||||||
|
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
||||||
|
<title>Excel course</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="app" class="container">
|
||||||
|
<div class="excel">
|
||||||
|
<div class="excel__header">
|
||||||
|
|
||||||
|
<input type="text" class="input" value="Новая таблица">
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class="button">
|
||||||
|
<i class="material-icons">delete</i>
|
||||||
|
</div>
|
||||||
|
<div class="button">
|
||||||
|
<i class="material-icons">exit_to_app</i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="excel__toolbar">
|
||||||
|
<div class="button">
|
||||||
|
<i class="material-icons">format_bold</i>
|
||||||
|
</div>
|
||||||
|
<div class="button">
|
||||||
|
<i class="material-icons">format_italic</i>
|
||||||
|
</div>
|
||||||
|
<div class="button">
|
||||||
|
<i class="material-icons">format_underline</i>
|
||||||
|
</div>
|
||||||
|
<div class="button">
|
||||||
|
<i class="material-icons">format_align_left</i>
|
||||||
|
</div>
|
||||||
|
<div class="button">
|
||||||
|
<i class="material-icons">format_align_center</i>
|
||||||
|
</div>
|
||||||
|
<div class="button">
|
||||||
|
<i class="material-icons">format_align_right</i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="excel__formula">
|
||||||
|
<div class="info">fx</div>
|
||||||
|
<div class="input" contenteditable spellcheck="false"></div>
|
||||||
|
</div>
|
||||||
|
<div class="excel__table">
|
||||||
|
<div class="row">
|
||||||
|
<div class="row-info"></div>
|
||||||
|
<div class="row-data">
|
||||||
|
<div class="column">A</div>
|
||||||
|
<div class="column">B</div>
|
||||||
|
<div class="column">C</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="row-info">1</div>
|
||||||
|
<div class="row-data">
|
||||||
|
<div class="cell selected" contenteditable spellcheck="false">A1</div>
|
||||||
|
<div class="cell">B1</div>
|
||||||
|
<div class="cell">C1</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -1,14 +1,17 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<link rel="shortcut icon" href="favicon.ico " type="image/x-icon">
|
<link rel="shortcut icon" href="favicon.ico " type="image/x-icon">
|
||||||
|
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
||||||
<title>Excel course</title>
|
<title>Excel course</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="app" class="container">CONTAINER</div>
|
<div id="app"></div>
|
||||||
<h1>hello!s</h1>
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
16
src/index.ts
16
src/index.ts
@ -1,15 +1 @@
|
|||||||
import './style.scss';
|
import './styles/index.scss';
|
||||||
|
|
||||||
interface SomeObject {
|
|
||||||
name: string,
|
|
||||||
age: string
|
|
||||||
}
|
|
||||||
|
|
||||||
const Ivan: SomeObject = {
|
|
||||||
name: 'Ivan',
|
|
||||||
age: '23',
|
|
||||||
};
|
|
||||||
|
|
||||||
// Ivan.name = someName;
|
|
||||||
|
|
||||||
console.log('Ivan - huy', Ivan);
|
|
||||||
|
|||||||
@ -1,6 +0,0 @@
|
|||||||
body {
|
|
||||||
background-color: darkkhaki;
|
|
||||||
h1 {
|
|
||||||
color: darkslategrey;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
28
src/styles/_mixins.scss
Normal file
28
src/styles/_mixins.scss
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
@mixin button($color: green) {
|
||||||
|
height: 24px;
|
||||||
|
min-width: 24px;
|
||||||
|
padding: 3px;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
color: rgba(0, 0, 0, 0.7);
|
||||||
|
|
||||||
|
& > i {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active, &.active{
|
||||||
|
color: $color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #eee;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin clear-list {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
8
src/styles/_variables.scss
Normal file
8
src/styles/_variables.scss
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
$border-color: #c0c0c0;
|
||||||
|
$cell-width: 120px;
|
||||||
|
$db-header-height: 60px;
|
||||||
|
$formula-height: 24px;
|
||||||
|
$header-height: 34px;
|
||||||
|
$info-cell-width: 40px;
|
||||||
|
$row-height: 25px;
|
||||||
|
$toolbar-height: 40px;
|
||||||
92
src/styles/components/dashboard.scss
Normal file
92
src/styles/components/dashboard.scss
Normal file
@ -0,0 +1,92 @@
|
|||||||
|
@import "../_variables";
|
||||||
|
@import "../_mixins";
|
||||||
|
|
||||||
|
.db {
|
||||||
|
&__header {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: $db-header-height;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0 2px 5px 2px rgba(60, 64, 67, 0.15);
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__new{
|
||||||
|
margin-top: $db-header-height;
|
||||||
|
padding: 1.5rem;
|
||||||
|
background: #dadce0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__create {
|
||||||
|
width: 160px;
|
||||||
|
height: 160px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid #dadce0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #000;
|
||||||
|
text-align: center;
|
||||||
|
&:hover{
|
||||||
|
cursor: pointer;
|
||||||
|
color: green;
|
||||||
|
border-color: green;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__view {
|
||||||
|
max-width: 1000px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__table{
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__list-header{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
color: #202124;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
padding: 0 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__list {
|
||||||
|
@include clear-list();
|
||||||
|
}
|
||||||
|
|
||||||
|
&__record{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 12px 14px 12px 16px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
|
||||||
|
&:hover{
|
||||||
|
background: #e6f4ea;
|
||||||
|
border-radius: 25px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
a{
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #202121;
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
27
src/styles/components/formula.scss
Normal file
27
src/styles/components/formula.scss
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
@import "../_variables";
|
||||||
|
@import "../_mixins";
|
||||||
|
|
||||||
|
.excel__formula{
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: $header-height + $toolbar-height;
|
||||||
|
height: $formula-height;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
.info {
|
||||||
|
font-size: 18px;
|
||||||
|
font-style: italic;
|
||||||
|
border-right: 1px solid $border-color;
|
||||||
|
min-width: $info-cell-width;
|
||||||
|
}
|
||||||
|
.input{
|
||||||
|
padding: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
outline: none;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
}
|
||||||
40
src/styles/components/header.scss
Normal file
40
src/styles/components/header.scss
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
@import "../_variables";
|
||||||
|
@import "../_mixins";
|
||||||
|
|
||||||
|
.excel__header {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: $header-height;
|
||||||
|
padding: 8px 4px 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
background-color: antiquewhite;
|
||||||
|
|
||||||
|
& .input {
|
||||||
|
margin: 0;
|
||||||
|
padding: 5px 7px;
|
||||||
|
color: #000;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
border-radius: 2px;
|
||||||
|
height: 20px;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 22;
|
||||||
|
outline: none;
|
||||||
|
min-width: 1px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border: 1px solid $border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border: 2px solid #1a73e8;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
@include button()
|
||||||
|
}
|
||||||
|
}
|
||||||
56
src/styles/components/table.scss
Normal file
56
src/styles/components/table.scss
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
@import "../_variables";
|
||||||
|
@import "../_mixins";
|
||||||
|
|
||||||
|
.excel__table {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: $header-height + $toolbar-height + $formula-height;
|
||||||
|
overflow: auto;
|
||||||
|
.row{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
min-height: $row-height;
|
||||||
|
}
|
||||||
|
.row-info {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
min-width: $info-cell-width;
|
||||||
|
border: 1px solid $border-color;
|
||||||
|
background: #f8f9fa;
|
||||||
|
// height: 100%;
|
||||||
|
border-top: 0;
|
||||||
|
border-left: 0;
|
||||||
|
}
|
||||||
|
.row-data {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.column {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: #f8f9fa;
|
||||||
|
min-width: 40px;
|
||||||
|
width: $cell-width;
|
||||||
|
border: 1px solid $border-color;
|
||||||
|
border-top: 0;
|
||||||
|
border-left: 0;
|
||||||
|
}
|
||||||
|
.cell {
|
||||||
|
min-width: 40px;
|
||||||
|
padding: 5px;
|
||||||
|
width: $cell-width;
|
||||||
|
height: 100%;
|
||||||
|
border: 1px solid #e1e2e3;
|
||||||
|
border-top: 0;
|
||||||
|
border-left: 0;
|
||||||
|
white-space: nowrap;
|
||||||
|
outline: none;
|
||||||
|
&.selected {
|
||||||
|
border: none;
|
||||||
|
outline: 2px solid #3c74ff;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
18
src/styles/components/toolbar.scss
Normal file
18
src/styles/components/toolbar.scss
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
@import "../_variables";
|
||||||
|
@import "../_mixins";
|
||||||
|
|
||||||
|
.excel__toolbar{
|
||||||
|
position: absolute;
|
||||||
|
height: $toolbar-height;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: $header-height;
|
||||||
|
border-top: 1px solid $border-color;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
padding: 7px 10px;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.button {
|
||||||
|
@include button(green)
|
||||||
|
}
|
||||||
|
}
|
||||||
27
src/styles/index.scss
Normal file
27
src/styles/index.scss
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
|
||||||
|
@import "~normalize.css";
|
||||||
|
|
||||||
|
@import './components/header';
|
||||||
|
@import './components/toolbar';
|
||||||
|
@import './components/formula';
|
||||||
|
@import './components/table';
|
||||||
|
@import './components/dashboard';
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: "Roboto", sans-serif;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.excel {
|
||||||
|
position: relative;
|
||||||
|
color: #888;
|
||||||
|
height: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
@ -81,7 +81,7 @@ const config = (env: Record<string, any>, argv: Record<string, any>): Configurat
|
|||||||
clean: true,
|
clean: true,
|
||||||
},
|
},
|
||||||
resolve: {
|
resolve: {
|
||||||
extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
|
extensions: ['.ts', '.tsx', '.js', '.jsx', '.json', '.scss'],
|
||||||
alias: {
|
alias: {
|
||||||
'@': path.resolve(__dirname, 'src'),
|
'@': path.resolve(__dirname, 'src'),
|
||||||
'@core': path.resolve(__dirname, 'src', '@core'),
|
'@core': path.resolve(__dirname, 'src', '@core'),
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user