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",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"normalize.css": "^8.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/happypack": "^5.0.2",
|
||||
"@types/html-webpack-plugin": "^3.2.6",
|
||||
@ -5086,6 +5089,11 @@
|
||||
"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": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
|
||||
@ -11318,6 +11326,11 @@
|
||||
"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
|
||||
"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": {
|
||||
"version": "4.0.1",
|
||||
"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",
|
||||
"description": "",
|
||||
"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>
|
||||
<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">CONTAINER</div>
|
||||
<h1>hello!s</h1>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
16
src/index.ts
16
src/index.ts
@ -1,15 +1 @@
|
||||
import './style.scss';
|
||||
|
||||
interface SomeObject {
|
||||
name: string,
|
||||
age: string
|
||||
}
|
||||
|
||||
const Ivan: SomeObject = {
|
||||
name: 'Ivan',
|
||||
age: '23',
|
||||
};
|
||||
|
||||
// Ivan.name = someName;
|
||||
|
||||
console.log('Ivan - huy', Ivan);
|
||||
import './styles/index.scss';
|
||||
|
||||
@ -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,
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
|
||||
extensions: ['.ts', '.tsx', '.js', '.jsx', '.json', '.scss'],
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, 'src'),
|
||||
'@core': path.resolve(__dirname, 'src', '@core'),
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user