Skip to content

Commit ad4a855

Browse files
author
Huaqiao Zhang
committed
init index layout
Signed-off-by: Huaqiao Zhang <huaqiaoz@vmware.com>
1 parent 65f645d commit ad4a855

File tree

3 files changed

+50
-31
lines changed

3 files changed

+50
-31
lines changed

‎web/src/app/app.component.css‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,19 @@
1212
background-color: rgba(146,44,72, 0.4) !important;
1313
}
1414

15+
.sidebar-center .nav-link:hover {
16+
color: rgb(146,44,72);
17+
background-color: rgba(146,44,72, 0.4) !important;
18+
}
19+
20+
/* .sidebar-header a {
21+
min-width: 300px;
22+
} */
23+
1524
.center-center {
1625
/* background-color: #DEDDDF; */
1726
}
1827

1928
.center-header {
2029
height: 65px;
21-
}
30+
}

‎web/src/app/app.component.html‎

Lines changed: 29 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,49 @@
11
<div class="container-fluid">
22
<div class="row">
3-
<div class="col-sm-2 col-md-2 col-lg-2 d-md-block sidebar px-0">
4-
3+
<div class="col-sm-1 col-md-2 col-lg-2 d-md-block sidebar px-0 ">
54
<div class="sidebar-center font-weight-bold text-white min-vh-100">
65
<div class="sidebar-header mw-100 p-2 " >
7-
<a class="navbar-brand " href="#">
6+
<a class="navbar-brand">
87
<img src="/assets/img/bg_x.png" width="40" height="40" alt="" loading="lazy">
98
</a>
109
</div>
11-
<a class="nav-link flex-column text-light" routerLink="/dashboard" routerLinkActive="active-link text-white " [routerLinkActiveOptions]="{exact:true}"> <span class="px-5"><i class="fa fa-tachometer"></i> Dashboard</span></a>
12-
<a class="nav-link flex-column text-light" routerLink="/system-agent" routerLinkActive="active-link text-white" [routerLinkActiveOptions]="{exact:true}"> <span class="px-5"><i class="fa fa-server"></i> System</span></a>
13-
<a class="nav-link flex-column text-light" routerLink="/device-service" routerLinkActive="active-link text-white" [routerLinkActiveOptions]="{exact:true}"> <span class="px-5"><i class="fa fa-gears"></i> DeviceService</span></a>
14-
<a class="nav-link flex-column text-light" routerLink="/core-data" routerLinkActive="active-link text-white" [routerLinkActiveOptions]="{exact:true}"> <span class="px-5"><i class="fa fa-database"></i> DataCenter</span></a>
15-
<a class="nav-link flex-column text-light" routerLink="/scheduler" routerLinkActive="active-link text-white" [routerLinkActiveOptions]="{exact:true}"> <span class="px-5"><i class="fa fa-clock-o"></i> Scheduler</span></a>
16-
<a class="nav-link flex-column text-light" routerLink="/notifications" routerLinkActive="active-link text-white" [routerLinkActiveOptions]="{exact:true}"> <span class="px-5"><i class="fa fa-envelope"></i> Notifications</span></a>
17-
<a class="nav-link flex-column text-light" routerLink="/rule-engine" routerLinkActive="active-link text-white" [routerLinkActiveOptions]="{exact:true}"> <span class="px-5"><i class="fa fa-sliders"></i> RuleEngine</span></a>
18-
<a class="nav-link flex-column text-light" routerLink="/app-service" routerLinkActive="active-link text-white" [routerLinkActiveOptions]="{exact:true}"> <span class="px-5"><i class="fa fa-cloud-upload"></i> ExportService</span></a>
10+
<a class="nav-link flex-column text-light" routerLink="/dashboard" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact:true}"> <span class="px-5" i18n><i class="fa fa-tachometer"></i> Dashboard</span></a>
11+
<a class="nav-link flex-column text-light" routerLink="/system-agent" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact:true}"> <span class="px-5" i18n><i class="fa fa-server"></i> System</span></a>
12+
<a class="nav-link flex-column text-light" routerLink="/device-service" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact:true}"> <span class="px-5" i18n><i class="fa fa-gears"></i> DeviceService</span></a>
13+
<a class="nav-link flex-column text-light" routerLink="/core-data" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact:true}"> <span class="px-5" i18n><i class="fa fa-database"></i> DataCenter</span></a>
14+
<a class="nav-link flex-column text-light" routerLink="/scheduler" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact:true}"> <span class="px-5" i18n><i class="fa fa-clock-o"></i> Scheduler</span></a>
15+
<a class="nav-link flex-column text-light" routerLink="/notifications" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact:true}"> <span class="px-5" i18n><i class="fa fa-envelope"></i> Notifications</span></a>
16+
<a class="nav-link flex-column text-light" routerLink="/rule-engine" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact:true}"> <span class="px-5" i18n><i class="fa fa-sliders"></i> RuleEngine</span></a>
17+
<a class="nav-link flex-column text-light" routerLink="/app-service" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact:true}"> <span class="px-5" i18n><i class="fa fa-cloud-upload"></i> ExportService</span></a>
1918
</div>
2019
<div class="sidebar-footer">
2120

2221
</div>
2322
</div>
24-
<div class="col-sm-10 col-md-10 col-lg-10 px-0 center">
25-
<nav class="bg-light center-header p-2 font-weight-bold">
26-
<div class="nav-router mw-100">
27-
<h4 class="d-inline">Current nav</h4>
28-
<h5 class="d-inline"><span class="float-right"><i class="fa fa-user-circle-o"></i> Admin</span></h5>
29-
30-
</div>
31-
<div class="mw-100">
32-
<a href="#" class="text-decoration-none d-inline"><h6 class="d-inline">nav sub router</h6> </a>
33-
<h6 class="d-inline"><span class="float-right"><i class="fa fa-power-off"></i> Logout</span></h6>
34-
35-
<!-- <div class="dropdown float-right d-inline">
36-
<button id="dropdownLangLink" type="button " class="btn btn-secondary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
23+
<div class="col-sm-11 col-md-10 col-lg-10 px-0 center">
24+
<nav class="bg-light center-header px-3 pt-2 font-weight-bold">
25+
<div class="nav-router mw-100 align-middle">
26+
<h4 class="d-inline ">Current nav</h4>
27+
<h5 class="d-inline float-right "><i class="fa fa-user-circle-o "></i> <span class=" ">Admin</span></h5>
28+
<div class="dropdown float-right d-inline mr-2 ">
29+
<a id="dropdownLangLink" type="button" class="p-0 btn btn-link btn-sm dropdown-toggle text-decoration-none text-reset font-weight-bold" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
3730
<span i18n>English</span>
38-
</button>
39-
<div class="dropdown-menu dropdown-menu-sm-right" aria-labelledby="dropdownLangLink">
40-
<a class="dropdown-item" href="/">English</a>
41-
<a class="dropdown-item" href="/zh">中文简体</a>
31+
</a>
32+
<div class="dropdown-menu dropdown-menu-sm-right font-weight-bold" aria-labelledby="dropdownLangLink">
33+
<a class="dropdown-item text-reset" href="/">English</a>
34+
<a class="dropdown-item text-reset" href="/zh">中文简体</a>
4235
</div>
43-
</div> -->
36+
</div>
4437

38+
</div>
39+
<div class="mw-100 align-middle mt-1">
40+
<h6 class="d-inline"><a href="#" class="text-decoration-none d-inline"> 1 sub nav </a></h6>
41+
<h6 class="d-inline"><a href="#" class="text-decoration-none d-inline"> > 2 sub nav </a></h6>
42+
<h6 class="d-inline"><a href="#" class="text-decoration-none d-inline"> > 3 sub nav </a></h6>
43+
<h6 class="d-inline float-right "><span class=""> <i class="fa fa-power-off "></i>Logout</span></h6>
4544
</div>
4645
</nav>
47-
<div class="center-center">
46+
<div class="center-center p-3">
4847
<router-outlet></router-outlet>
4948
</div>
5049
</div>

‎web/src/app/dashboard/dashboard.component.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,12 @@
11
<p>dashboard works!</p>
2+
3+
<!-- <div class="card">
4+
<div class="card-header">
5+
Featured
6+
</div>
7+
<div class="card-body">
8+
<h5 class="card-title">Special title treatment</h5>
9+
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
10+
<a href="#" class="btn btn-primary">Go somewhere</a>
11+
</div>
12+
</div> -->

0 commit comments

Comments
 (0)