new dashboard
This commit is contained in:
parent
a0d5dbab6c
commit
e8c4229544
@ -12,7 +12,7 @@ insert_final_newline = true
|
|||||||
indent_style = space
|
indent_style = space
|
||||||
indent_size = 2
|
indent_size = 2
|
||||||
|
|
||||||
[{*.html,*.css,*.json}]
|
[{*.html,*.css,*.less,*.json}]
|
||||||
indent_style = tab
|
indent_style = tab
|
||||||
indent_size = 4
|
indent_size = 4
|
||||||
|
|
||||||
|
0
dashboard/app.js
Normal file
0
dashboard/app.js
Normal file
46
dashboard/index.html
Normal file
46
dashboard/index.html
Normal 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
11
dashboard/less-v4.1.3.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
7
dashboard/styles.css
Normal file
7
dashboard/styles.css
Normal 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
71
dashboard/styles.less
Normal 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;
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user