iiiypuk
/
services
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

new dashboard

This commit is contained in:
Alexander Popov 2022-11-17 17:46:01 +03:00
parent a0d5dbab6c
commit e8c4229544
6 changed files with 136 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.editorconfig
View File

@ -12,7 +12,7 @@ insert_final_newline = true
indent_style = space
indent_size = 2
[{*.html,*.css,*.json}]
[{*.html,*.css,*.less,*.json}]
indent_style = tab
indent_size = 4

0
dashboard/app.js Normal file
View File

46
dashboard/index.html Normal file
View File

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>dashboard</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script type="text/javascript" src="less-v4.1.3.min.js"></script>
</head>
<body>
<div class="sidebar">
<div class="sidebar-links">
<a class="active" href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
</div>
<div class="main">
<div class="nav">
Alexander
</div>
<div class="dashboard">
<div class="row">
<div class="col">
<div class="card">...</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">...</div>
</div>
<div class="col">
<div class="card">...</div>
</div>
<div class="col">
<div class="card">...</div>
</div>
</div>
</div>
</div>
</body>
</html>

11
dashboard/less-v4.1.3.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

7
dashboard/styles.css Normal file
View File

@ -0,0 +1,7 @@
:root {
--primary-color-blue: #778ca3;
--primary-color-yellow: #ffc562;
--primary-color-red: #ff6d74;
--primary-color-green: #4fddc3;
--primary-color-lightblue: #61a8e8;
}

71
dashboard/styles.less Normal file
View File

@ -0,0 +1,71 @@
@radius-size: 16px;
@padding-size: 16px;
* { margin: 0; padding: 0; }
body {
font-family: 'Ubuntu', sans-serif;
font-size: 1.2em;
}
.main {
background-color:lightgray;
margin-left: 160px;
}
.nav {
background-color: white;
padding: @padding-size;
}
.dashboard {
padding: 24px + 24px;
}
.card {
background-color: white;
padding: @padding-size;
border-radius: @radius-size;
}
.row {
display: flex;
flex-direction: row;
}
.col {
flex-grow: 1;
margin: 24px;
}
.sidebar {
height: 100%;
width: 160px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: var(--primary-color-lightblue);
overflow-x: hidden;
padding-top: 48px + 8px;
}
.sidebar-links {
// padding: 8px;
padding-left: 24px;
display: flex;
flex-direction: column;
a {
color: white;
text-decoration: none;
padding: @padding-size;
}
}
.sidebar-links a.active {
background-color: white;
border-top-left-radius: @radius-size;
border-bottom-left-radius: @radius-size;
color: black;
}