Commit c116f4ce authored by Qianwen Yuan's avatar Qianwen Yuan
Browse files

fix

parent 9401f433
Pipeline #520649 passed with stages
in 3 minutes and 30 seconds
<div class="sidebar">
<div class="nav">
<div class="nav-item" *ngFor="let id of MASID, index as i" routerLinkActive="is-active" [ngClass]="id === selectedMASID ? 'active' : ''">
<a class="list-text" [routerLink]="['/ams', id]" >
<p > MAS {{ id }}</p>
<p > MAS {{ id }}</p>
</a>
</div>
</div>
......@@ -59,7 +60,7 @@
</tr>
</tbody>
</table>
<div class="title mb-4">Agents</div>
<table class="table mb-5 default-fontsize">
<thead>
......@@ -87,3 +88,4 @@
/* .table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
background-color: var(--background-primary-color);
background-color: $background-primary-color;
}
*/
......@@ -25,6 +25,9 @@ td, th {
background: var(--secondary);
}
.content-container {
padding-left: 4rem;
}
......
......@@ -29,7 +29,7 @@
<input #desc type="text" class="input" id="searchDesc" placeholder="Enter the description"/>
<input #nodeid type="text" class="input" id="searchNode" placeholder="Enter the node ID"/>
<input #dist type="text" class="input" id="searchDist" placeholder="Enter the distance"/>
<button class="btn btn-primary" type="submit" (click)="onSearchSvcs(desc.value, nodeid.value, dist.value)">
<button class="btn btn-secondary" type="submit" (click)="onSearchSvcs(desc.value, nodeid.value, dist.value)">
<i class="fas fa-search fa-2x"></i>
</button>
</div>
......
......@@ -30,13 +30,9 @@
.inputs > .btn {
width: 5rem;
height: 5rem;
background-color: var(--secondary);
color:white;
border: none;
}
/* style of the card */
.empty-service {
color: var(--secondary);
......@@ -63,7 +59,6 @@
}
td, th {
padding-top: 2rem;
padding-bottom: 2rem;
......
......@@ -211,18 +211,19 @@
[ngClass]="box.topic"
></rect>
</svg>
<div *ngIf="currState==='log'" class="topics d-flex-column">
<div class="topic-title"> Topic </div>
<div [class.selected]="isTopicSelected[0]" class="error-tag tag mb-4" (click)="onToggleTopic(0)">error</div>
<div [class.selected]="isTopicSelected[1]" class="debug-tag tag mb-4" (click)="onToggleTopic(1)" >debug</div>
<div [class.selected]="isTopicSelected[2]"class="msg-tag tag mb-4" (click)="onToggleTopic(2)">msg</div>
<div [class.selected]="isTopicSelected[3]" class="status-tag tag mb-4" (click)="onToggleTopic(3)">status</div>
<div [class.selected]="isTopicSelected[4]" class="app-tag tag mb-4" (click)="onToggleTopic(4)">app</div>
<div [class.selected]="isTopicSelected[0]" class="error-tag tag mb-3" (click)="onToggleTopic(0)">error</div>
<div [class.selected]="isTopicSelected[1]" class="debug-tag tag mb-3" (click)="onToggleTopic(1)" >debug</div>
<div [class.selected]="isTopicSelected[2]"class="msg-tag tag mb-3" (click)="onToggleTopic(2)">msg</div>
<div [class.selected]="isTopicSelected[3]" class="status-tag tag mb-3" (click)="onToggleTopic(3)">status</div>
<div [class.selected]="isTopicSelected[4]" class="app-tag tag mb-3" (click)="onToggleTopic(4)">app</div>
<div [class.selected]="isTopicSelected[5]" class="beh-tag tag" (click)="onToggleTopic(5)">beh</div>
</div>
</div>
<div *ngIf="currState==='logSeries'" class="log-series-graph">
<ngx-charts-bubble-chart *ngIf="selectedID.length !== 0"
[view]="viewBubble"
......
@import '../../../styles.scss' ;
.notalive {
display: flex;
......@@ -8,7 +9,7 @@
}
.notalive > h1 {
color: var(--primary);
color: $primary;
padding-bottom: 5rem;
}
......@@ -44,6 +45,18 @@
background-color: var(--secondary);
font-size: 2rem;
cursor: pointer;
&:hover {
color: $background-primary-color;
background-color: $background-primary-color;
.hidden {
display: initial;
color: var(--secondary);
}
p {
display: none;
}
}
}
.agent-not-selected {
......@@ -58,28 +71,16 @@
color: gray;
font-size: 2rem;
cursor: pointer;
}
.agent-not-selected:hover {
border: none;
background: var(--secondary);
color:white;
padding-top:1rem;
&:hover {
border: none;
background: var(--secondary);
color:white;
padding-top:1rem;
}
}
.agent-selected:hover .hidden {
display: initial;
color: var(--secondary);
}
.agent-selected:hover {
color: var(--background-primary-color);
background-color: var(--background-primary-color);
}
.agent-selected:hover p {
display: none;
}
.more {
height: 4rem;
......@@ -102,7 +103,7 @@
.topics {
position: fixed;
right: 10rem;
top: 30rem;
top: 40rem;
}
.topic-title {
......@@ -130,11 +131,11 @@
}
.topics .error-tag.selected {
background-color: var(--error);
background-color: $error;
}
.topics .debug-tag.selected {
background-color: var(--debug);
background-color: $debug;
}
.topics .msg-tag.selected {
......@@ -156,7 +157,7 @@
/* svg graph */
/* log graph */
/* log */
svg {
position: absolute;
}
......@@ -179,11 +180,11 @@ svg {
}
.error {
fill: var(--error);
fill: $error;
}
.debug {
fill: var(--debug);
fill: $debug;
}
.msg {
......
......@@ -33,7 +33,7 @@
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary default-fontsize" (click)="onCreateMAS()">Upload</button>
<button type="button" class="btn btn-secondary default-fontsize" (click)="onCreateMAS()">Upload</button>
</div>
</ng-template>
......@@ -55,7 +55,7 @@
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary default-fontsize" (click)="closeModal()">OK</button>
<button type="button" class="btn btn-secondary default-fontsize" (click)="closeModal()">OK</button>
</div>
</ng-template>
......@@ -63,7 +63,7 @@
<div *ngIf="MASID.length !== 0" class="content-container d-flex flex-column align-items-center">
<div class="title mt-4 d-flex align-items-center">
<div class="title-name mr-5" >Overview</div>
<button type='button' class='btn btn-primary' (click)="openLg(content)">+ New MAS</button>
<button type='button' class='btn btn-secondary' (click)="openLg(content)">+ New MAS</button>
</div>
<!--display the overview of agencies with tables-->
<div id="cards">
......@@ -115,8 +115,8 @@
<span class="sr-only">Loading...</span>
</div>
<h1 class="status mb-5">{{status}}</h1>
<button *ngIf="status==='Currently no MASs, create one......'" type='button' class="btn btn-primary" (click)="openLg(content)">+ New MAS</button>
</div>
<button *ngIf="status==='Currently no MASs, create one......'" type='button' class="btn btn-secondary" (click)="openLg(content)">+ New MAS</button>
</div>
......
/* overview without agency*/
@import '../../../styles.scss' ;
.overview-empty {
height: 100%;
width: 100%;
}
.status {
color: var(--primary);
color: $primary;
text-align: center;
font-size: 5rem;
font-size: 5rem;
......@@ -16,14 +17,13 @@
.process-spinner {
width: 8rem;
height: 8rem;
color: var(--primary);
color: $primary;
}
.overview-empty button {
height:6rem;
width: 16rem;
font-size: larger;
background-color: var(--primary);
}
/* overview with agency*/
......@@ -64,7 +64,7 @@
}
.card-header {
color: var(--primary);
color: $primary;
}
.card-body {
......@@ -74,8 +74,6 @@
.card-header > .btn {
width: 4rem;
height: 4rem;
background-color: var(--secondary);
color:white;
}
.hidden {
......@@ -85,11 +83,11 @@
.delete-spinner {
width: 4rem;
height: 4rem;
color: var(--primary);
color: $primary;
}
.delete-text {
color: var(--primary);
color: $primary;
text-align: center;
font-size: 3rem;
font-weight: 100;
......
<header>
<nav class="navbar navbar-expand-sm fixed-top navbar-light my-bg-primary ">
<nav class="navbar navbar-expand-sm fixed-top navbar-light bg-white">
<a class="navbar-brand" href="#">
<img src="assets/logo_tp.png" id="navoverview"s width="80" height="60" class="d-inline-block align-top" alt="cloneMAP" loading="lazy">
</a>
......@@ -18,20 +18,4 @@
</li>
</ul>
</nav>
<!-- <div class="d-flex">
<div ngbNav #nav="ngbNav" class="nav-pills" orientation="horizontal">
<div [ngbNavItem]="overview">
<a [ngbNavLink]="overview"> Overview</a>
</div>
<div [ngbNavItem]="ams">
<a [ngbNavLink]="ams">AMS</a>
</div>
<div [ngbNavItem]="logger" >
<a [ngbNavLink]="logger">Logger</a>
</div>
<div [ngbNavItem]="df">
<a ngbNavLink>DF</a>
</div>
</div>
</div> -->
</header>
header {
width: 100%;
}
@import '../../../styles.scss' ;
.navbar {
font-size: 2rem;
color: white !important ;
background-color:white;
}
.navbar-nav .nav-item {
border-radius: 5px;
padding: 0 0 0 0.5rem;
}
.navbar-nav .nav-item .nav-link {
font-size: 2rem;
padding: 1rem;
&.active {
color: white !important;
background-color:$primary;
}
}
header >nav > ul> li:hover{
background: rgb(240, 240, 240);
color: var(--primary);
}
header >nav > ul> li > a {
header >nav > ul> li{
text-align: center;
}
.nav-pills .nav-link.active{
color: white !important;
background-color:var(--primary);
&:hover {
background: rgb(240, 240, 240);
color: $primary;
}
}
.hidden {
......
......@@ -13,7 +13,6 @@
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body class="mat-typography">
<app-root></app-root>
</body>
</html>
......@@ -3,15 +3,11 @@
// override the primary-color in bootstrap
$primary: rgb(102,102,255);
$secondary: #9696f3;
$error: rgb(230, 109, 109);
$debug: rgb(216, 216, 110);
$spacer: 1.6rem;
/* primary colors used */
:root {
--background-primary-color: #dadaf8;
--error: rgb(230, 109, 109);
--debug: rgb(216, 216, 110);
}
$background-primary-color: #dadaf8;
@import "bootstrap";
......@@ -21,10 +17,17 @@ html {
html, body {
font-family: 'Lato', sans-serif;
height: 100%;
width:100%;
padding: 0;
margin: 0;
}
app-root {
width: 100%;
}
header {
position: sticky;
height: 7rem;
z-index: 1000;
}
body {
......@@ -36,88 +39,87 @@ body {
font-size: 1.6rem;
}
app-root {
width: 100%;
height: 100%;
display: inline-block;
}
/* sidebar */
.sidebar {
position: fixed;
height: 100%;
margin-top: 9rem;
width: 12rem;
overflow:scroll;
padding-bottom: 3rem;
}
padding-top: 1rem;
.sidebar > .nav > .nav-item{
padding-top:1rem;
padding-bottom:1px;
border-radius: 1rem;
width: 100%;
text-align: center;
}
>.nav {
padding-bottom: 10rem;
}
.sidebar .nav .nav-item a {
color: var(--primary);
text-decoration: none;
}
>.nav >.nav-item {
padding-top:1rem;
padding-bottom:1px;
border-radius: 1rem;
width: 100%;
text-align: center;
.sidebar .nav .nav-item:hover {
background: rgb(240, 240, 240);
}
a {
color: $primary;
text-decoration: none;
}
&:hover {
background: rgb(240, 240, 240);
}
&.is-active {
background: $background-primary-color!important;
color:$primary;
font-weight: bold;
}
}
.sidebar > .nav > .nav-item.is-active{
background: var(--background-primary-color)!important;
color:var(--primary);
font-weight: bold;
}
.content-container {
margin-left: 14rem;
margin-top: 9rem;
padding-top: 1rem;
z-index: -1;
}
#agents {
margin-bottom: 10rem;
}
.btn-primary:hover {
background-color: var(--secondary);
color: white;
border: none;
font: bold;
}
mat-form-field {
width: 14rem;
}
/* nav tabs */
.nav-tabs .nav-item>.active>a, .nav-item>.active>a:hover, .nav-item>.active>a:focus {
border-color: var(--background-primary-color);
border-color: $background-primary-color;
border-bottom-color: transparent;
}
.nav-tabs {
border-bottom: 1px solid var(--background-primary-color);
border-bottom: 1px solid $background-primary-color;
font-size: 1.6rem;
margin-left: 3rem;
}
.nav-tabs .nav-link {
.nav-link {
color: gray;
&.active {
color: $primary;
font-weight: bold;
}
}
}
.nav-tabs .nav-link.active {
color: var(--primary);
font-weight: bold;
.btn-secondary{
color:white;
&:hover {
background-color: $primary;
box-shadow: 0 0 0 5px #eeeeee;
}
}
mat-form-field {
width: 14rem;
}
......
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