Skip to content

Commit b53c40e

Browse files
serikshaikamalovserikshaikamalov
committed
dashboard layout
1 parent ff47166 commit b53c40e

File tree

1 file changed

+286
-0
lines changed

1 file changed

+286
-0
lines changed

‎layouts/simple-dashboard/index.html

+286
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,286 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Building dashboard with gird and flex</title>
8+
<style>
9+
body {
10+
margin: 0;
11+
padding: 0;
12+
color: white;
13+
box-sizing: border-box;
14+
font-family: monospace;
15+
font-size: 15px;
16+
}
17+
18+
.grid-container {
19+
display: grid;
20+
grid-template-columns: 1fr;
21+
grid-template-rows: 50px 1fr 50px;
22+
23+
grid-template-areas:
24+
'header'
25+
'main'
26+
'footer';
27+
height: 100vh;
28+
}
29+
30+
.header {
31+
grid-area: header;
32+
background-color: whitesmoke;
33+
}
34+
35+
.aside {
36+
grid-area: aside;
37+
background-color: darkblue;
38+
}
39+
40+
.main {
41+
grid-area: main;
42+
background-color: white;
43+
}
44+
45+
.footer {
46+
grid-area: footer;
47+
background-color: whitesmoke;
48+
}
49+
50+
/* flexing header and footer*/
51+
.header,
52+
.footer {
53+
display: flex;
54+
align-items: center;
55+
justify-content: space-between;
56+
color: darkblue;
57+
padding: 0 15px;
58+
}
59+
60+
/* flexing aside */
61+
.aside {
62+
display: flex;
63+
flex-direction: column;
64+
height: 100%;
65+
width: 240px;
66+
position: fixed;
67+
overflow-y: auto;
68+
z-index: 2;
69+
transform: translateX(-245px);
70+
}
71+
72+
.aside.active {
73+
transform: translateX(0);
74+
}
75+
76+
.aside_list {
77+
padding: 0;
78+
margin-top: 85px;
79+
list-style-type: none;
80+
}
81+
82+
.aside_list-item {
83+
padding: 20px 20px 20px 40px;
84+
color: #ddd;
85+
}
86+
87+
.aside_list-item:hover {
88+
background-color: royalblue;
89+
cursor: pointer;
90+
}
91+
92+
/* Layout for main content overview and its cards*/
93+
.main_overview {
94+
display: flex;
95+
flex-wrap: wrap;
96+
align-items: center;
97+
border-bottom: 1px solid lightgreen;
98+
}
99+
100+
.overview_card {
101+
flex-basis: 250px;
102+
flex-grow: 1;
103+
margin: 10px 10px;
104+
display: flex;
105+
align-items: center;
106+
justify-content: space-between;
107+
padding: 20px;
108+
/* background-color: seagreen; */
109+
height: 100px;
110+
border: 1px solid darkblue;
111+
border-radius: 4px;
112+
color: darkblue;
113+
}
114+
115+
/* Layout for main-cards section // below main_overview */
116+
.main_cards {
117+
margin: 10px;
118+
display: grid;
119+
grid-template-columns: 1fr;
120+
grid-template-rows: 500px 200px 300px;
121+
grid-template-areas:
122+
'card1'
123+
'card2'
124+
'card3';
125+
grid-gap: 10px;
126+
}
127+
128+
.card {
129+
padding: 20px;
130+
border: 1px solid tomato;
131+
border-radius: 4px;
132+
color: tomato;
133+
}
134+
135+
.card:first-child {
136+
grid-area: card1;
137+
}
138+
139+
.card:nth-child(2) {
140+
grid-area: card2;
141+
}
142+
143+
.card:nth-child(3) {
144+
grid-area: card3;
145+
}
146+
147+
/* responsive layout */
148+
@media only screen and (min-width: 750px) {
149+
.grid-container {
150+
display: grid;
151+
grid-template-columns: 240px 1fr;
152+
grid-template-rows: 50px 1fr 50px;
153+
grid-template-areas:
154+
'aside header'
155+
'aside main'
156+
'aside footer';
157+
height: 100vh;
158+
}
159+
160+
.aside {
161+
display: flex;
162+
flex-direction: column;
163+
transform: translateX(0);
164+
}
165+
166+
.main_cards {
167+
margin: 10px;
168+
display: grid;
169+
grid-template-columns: 2fr 1fr;
170+
grid-template-rows: 200px 300px;
171+
grid-template-areas:
172+
'card1 card2'
173+
'card1 card3';
174+
grid-gap: 10px;
175+
}
176+
}
177+
178+
.menu-icon {
179+
position: fixed;
180+
display: flex;
181+
top: 2px;
182+
left: 8px;
183+
align-items: center;
184+
justify-content: center;
185+
z-index: 1;
186+
cursor: pointer;
187+
padding: 12px;
188+
color: black;
189+
}
190+
191+
.header_search {
192+
margin-left: 24px;
193+
}
194+
195+
.aside_close-icon {
196+
position: absolute;
197+
visibility: visible;
198+
top: 20px;
199+
right: 20px;
200+
cursor: pointer;
201+
}
202+
203+
@media only screen and (min-width: 750px) {
204+
.aside_close-icon {
205+
display: none;
206+
}
207+
}
208+
</style>
209+
</head>
210+
211+
<body>
212+
<div class="grid-container">
213+
<div class="menu-icon">
214+
<strong> &#9776;</strong>
215+
</div>
216+
<header class="header">
217+
<div class="header_search">Search...</div>
218+
<div class="header_avatar">Logout</div>
219+
</header>
220+
<aside class="aside">
221+
<div class="aside_close-icon">
222+
<strong>&times;</strong>
223+
</div>
224+
<ul class="aside_list">
225+
<li class="aside_list-item">Menu item1</li>
226+
<li class="aside_list-item">Menu item2</li>
227+
<li class="aside_list-item">Menu item3</li>
228+
<li class="aside_list-item">Menu item4</li>
229+
<li class="aside_list-item">Menu item5</li>
230+
</ul>
231+
</aside>
232+
<main class="main">
233+
<div class="main_overview">
234+
<div class="overview_card">
235+
<div class="overview_card-info">Overview</div>
236+
<div class="overview_card-icon">Card</div>
237+
</div>
238+
<div class="overview_card">
239+
<div class="overview_card-info">Overview</div>
240+
<div class="overview_card-icon">Card</div>
241+
</div>
242+
<div class="overview_card">
243+
<div class="overview_card-info">Overview</div>
244+
<div class="overview_card-icon">Card</div>
245+
</div>
246+
<div class="overview_card">
247+
<div class="overview_card-info">Overview</div>
248+
<div class="overview_card-icon">Card</div>
249+
</div>
250+
</div>
251+
252+
<div class="main_cards">
253+
<div class="card">Card</div>
254+
<div class="card">Card</div>
255+
<div class="card">Card</div>
256+
</div>
257+
</main>
258+
<footer class="footer">
259+
<div class="footer_copyright">&copy;2020</div>
260+
<div class="footer_byline">Made with &hearts;</div>
261+
</footer>
262+
</div>
263+
<script type="text/javascript">
264+
const menuIcon = document.querySelector('.menu-icon');
265+
const aside = document.querySelector('.aside');
266+
const asideClose = document.querySelector('.aside_close-icon');
267+
268+
function toggle(el, className) {
269+
if (el.classList.contains(className)) {
270+
el.classList.remove(className);
271+
} else {
272+
el.classList.add(className);
273+
}
274+
}
275+
276+
menuIcon.addEventListener('click', function () {
277+
toggle(aside, 'active');
278+
});
279+
280+
asideClose.addEventListener('click', function () {
281+
toggle(aside, 'active');
282+
});
283+
</script>
284+
</body>
285+
286+
</html>

0 commit comments

Comments
 (0)