Commit 381e1401 authored by Qianwen Yuan's avatar Qianwen Yuan
Browse files

refine layout with grid

parent 5b531d07
Pipeline #503605 passed with stages
in 3 minutes and 18 seconds
.maincontainer {
padding-top: 10px;
height: 92%;
width:100%;
position: relative;
display:flex;
left: 0;
top:60px;
height: 100%;
width:100%;
top:8%;
}
/* style of sidebar */
.sidebar {
position: fixed;
display: flex;
flex-direction: column;
margin-top: 30px;
width: 110px;
background:white;
width: 7.3%;
height: 100%;
padding-right: 1%;
overflow:scroll;
}
.sidebar .nav .nav-item{
......@@ -44,6 +44,7 @@
.contentcontainer {
margin-left: 8%;
border-radius: 5px;
position: relative;
display: flex;
......
.maincontainer {
padding-top: 10px;
height: 92%;
width:100%;
position: relative;
display:flex;
left: 0;
top:60px;
height: 100%;
width:100%;
top:8%;
}
/* style of sidebar */
.sidebar {
position: fixed;
display: flex;
flex-direction: column;
margin-top: 30px;
width: 110px;
background:white;
width: 7.3%;
height: 100%;
padding-right: 1%;
overflow:scroll;
}
.sidebar .nav .nav-item{
......@@ -42,6 +42,7 @@
}
.contentcontainer {
margin-left: 8%;
border-radius: 5px;
position: relative;
display: flex;
......
.maincontainer {
padding-top: 10px;
height: 92%;
width:100%;
position: relative;
display:flex;
left: 0;
top:60px;
height: 100%;
width:100%;
top:8%;
}
/* style of sidebar */
.sidebar {
position: fixed;
display: flex;
flex-direction: column;
margin-top: 30px;
width: 110px;
background:white;
width: 7.3%;
height: 100%;
padding-right: 1%;
overflow:scroll;
}
.sidebar .nav .nav-item{
padding-top:10px;
padding-bottom:1px;
border-radius: 10px;
width: 110px;
text-align: center;
width: 100%;
text-align: center;
}
.sidebar .nav .nav-item a {
......@@ -42,9 +41,8 @@
}
.contentcontainer {
margin-left: 8%;
margin-top: 30px;
border-radius: 5px;
position: relative;
......
/* overview without agency*/
.status {
color: var(--primary-color);
text-align: center;
font-size: 50px;
font-weight: 300;
}
.process-spinner {
width: 8rem;
height: 8rem;
color: var(--primary-color);
}
.overview-empty {
height: 100%;
}
.overview-empty button {
height:60px;
width: 160px;
font-size: larger;
background-color: var(--primary-color);
.maincontainer {
height: 92%;
width:100%;
position: relative;
display:flex;
top:8%;
}
/* style of sidebar */
.sidebar {
display: flex;
flex-direction: column;
margin-top: 30px;
width: 110px;
background:white;
height: 100%;
overflow:scroll;
}
.sidebar .nav .nav-item{
padding-top:10px;
padding-bottom:1px;
border-radius: 10px;
width: 110px;
text-align: center;
width: 100%;
text-align: center;
}
.sidebar .nav .nav-item a {
......@@ -54,11 +27,8 @@
text-decoration: none;
}
.sidebar .nav .nav-item:hover {
background: rgb(240, 240, 240);
}
.sidebar > .nav > .nav-item.is-active{
......@@ -67,61 +37,61 @@
font-weight: bold;
}
/* overview without agency*/
/* overview with agency*/
.status {
color: var(--primary-color);
text-align: center;
font-size: 50px;
font-weight: 300;
}
.maincontainer {
height: 90%;
width:100%;
padding-top: 10px;
position: relative;
display:flex;
left: 0;
top:60px;
.process-spinner {
width: 8rem;
height: 8rem;
color: var(--primary-color);
}
.overview-empty {
height: 100%;
width: 100%;
}
.overview-empty button {
height:60px;
width: 160px;
font-size: larger;
background-color: var(--primary-color);
}
/* overview with agency*/
.contentcontainer {
.content-container {
height: 100%;
position: relative;
display: flex;
flex-direction: column;
flex-grow: 1;
/* width:100%; */
}
.title {
padding-top: 50px;
padding-bottom: 50px;
display: flex;
height: 50px;
display: flex;
}
.title .title-name {
padding-left:600px;
padding-right:20px;
font-weight: bold;
font-size: 40px;
color: rgb(85, 83, 83)
color: rgb(85, 83, 83);
padding-right: 20px;
}
.input {
color: var(--primary-color);
height: 50px;
margin-top: px;
margin-left:300px;
margin-right:10px;
}
.btn-create {
height:40px;
}
#tables {
width:95%;
margin-top: 50px;
margin-left: 60px;
margin-left: 5%;
margin-right: 60px;
}
......@@ -153,10 +123,6 @@
display: none;
}
.pagination {
margin: 0px 0px 50px 1300px;
}
.pagination /deep/ .ngx-pagination .current {
background:var(--light-primary-color);
}
......
<div class="maincontainer">
<div class="maincontainer row">
<!--sidebar-->
<div class="sidebar">
<div *ngIf="MASID.length !== 0" class="col-md-1 col-sm-4 sidebar">
<div class="nav">
<div class="nav-item" *ngFor="let id of MASID, index as i" routerLinkActive="is-active">
<a class="list-text" [routerLink]="['/ams', id]" >
......@@ -38,67 +39,66 @@
</div>
</ng-template>
<div class="contentcontainer">
<div *ngIf="MASID.length !== 0">
<div class="title">
<div class="title-name" >Overview</div>
<button type='button' class='btn my-btn btn-create' (click)="openLg(content)">+ New MAS</button>
</div>
<!--display the overview of agencies with tables-->
<div id="tables">
<div class="row">
<div class="col-md-4 my-row" *ngFor="let MAS of MASsDisplay | paginate: { itemsPerPage: 6, currentPage: q }; index as i">
<div class="card">
<div class="card-header d-flex justify-content-between">
<h3 (click)="onOpenMAS(MAS.id)">MAS {{i}}</h3>
<button class="btn btn-delete" (click)="onDeleteMAS(MAS.id)">
<div class="icon">
<i class="fas fa-trash"></i>
</div>
</button>
</div>
<div *ngIf="MASID.length !== 0" class="content-container col-md-11 col-sm-8 d-flex flex-column justify-content-start align-items-center">
<div class="title">
<div class="title-name" >Overview</div>
<button type='button' class='btn my-btn btn-create' (click)="openLg(content)">+ New MAS</button>
</div>
<!--display the overview of agencies with tables-->
<div id="tables">
<div class="row justify-content-start">
<div class="col-lg-4 col-md-6 col-sm-12 my-row" *ngFor="let MAS of MASsDisplay | paginate: { itemsPerPage: 6, currentPage: q }; index as i">
<div class="card">
<div class="card-header d-flex justify-content-between">
<h3 (click)="onOpenMAS(MAS.id)">MAS {{i}}</h3>
<button class="btn btn-delete" (click)="onDeleteMAS(MAS.id)">
<div class="icon">
<i class="fas fa-trash"></i>
</div>
</button>
</div>
<div class="card-body">
<table class="table table-striped">
<tbody>
<tr>
<th>Name</th>
<td>{{ MAS.config.name }}</td>
</tr>
<tr>
<th>Number of agents per agency </th>
<td>{{ MAS.config.agentsperagency }} </td>
</tr>
<tr>
<th> Status of df</th>
<td>{{ MAS.config.df.active }} </td>
</tr>
<tr>
<th> Status of logger </th>
<td>{{ MAS.config.logger.active }} </td>
</tr>
<tr>
<th> Status of MQTT</th>
<td> {{ MAS.config.mqtt.active }} </td>
</tr>
</tbody>
</table>
</div>
<div class="card-body">
<table class="table table-striped">
<tbody>
<tr>
<th>Name</th>
<td>{{ MAS.config.name }}</td>
</tr>
<tr>
<th>Number of agents per agency </th>
<td>{{ MAS.config.agentsperagency }} </td>
</tr>
<tr>
<th> Status of df</th>
<td>{{ MAS.config.df.active }} </td>
</tr>
<tr>
<th> Status of logger </th>
<td>{{ MAS.config.logger.active }} </td>
</tr>
<tr>
<th> Status of MQTT</th>
<td> {{ MAS.config.mqtt.active }} </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<pagination-controls class="pagination" (pageChange)="q = $event"></pagination-controls>
</div>
<div class="overview-empty d-flex flex-column justify-content-center align-items-center" *ngIf="MASID.length === 0">
<div *ngIf="status==='Currently no MASs, create one......'" class="spinner-border process-spinner mb-5" role="status">
<span class="sr-only">Loading...</span>
</div>
<p class="status mb-5">{{status}}</p>
<button *ngIf="status==='Currently no MASs, create one......'" type='button' class="btn my-btn" (click)="openLg(content)">+ New MAS</button>
</div>
</div>
<pagination-controls class="pagination" (pageChange)="q = $event"></pagination-controls>
</div>
<div *ngIf="MASID.length === 0" class="col-12 overview-empty d-flex flex-column justify-content-center align-items-center">
<div *ngIf="status==='Connecting......'" class="spinner-border process-spinner mb-5" role="status">
<span class="sr-only">Loading...</span>
</div>
<p class="status mb-5">{{status}}</p>
<button *ngIf="status==='Currently no MASs, create one......'" type='button' class="btn my-btn" (click)="openLg(content)">+ New MAS</button>
</div>
</div>
......
......@@ -79,6 +79,8 @@ export class OverviewComponent implements OnInit {
this.MASID = this.MASsDisplay.map(MAS => MAS.id);
if (this.MASsDisplay.length === 0) {
this.status = "Currently no MASs, create one......";
} else {
this.status = "Connected successfully!"
}
} else {
this.status = "Currently no MASs, create one......";
......
header {
height:10%;
height:5%;
position:absolute;
top:0;
left: 0;
width: 100%;
background-color: red;
}
.navbar {
font-size: 20px;
color: white !important ;
height: 60px;
height: 5%;
background-color:white;
}
.navbar-nav .nav-item {
border-radius: 5px;
}
.navbar-nav .nav-item .nav-link {
......
......@@ -44,11 +44,11 @@ app-root {
border: none;
border-radius: 10px;
}
/*
.title {
padding-top: 100px;
padding-left: 100px;
}
} */
mat-form-field {
width: 140px;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment