Commit 6c4d65c0 authored by Qianwen's avatar Qianwen
Browse files

responsive layout

parent c586f894
Pipeline #512994 passed with stages
in 3 minutes and 18 seconds
......@@ -41,8 +41,10 @@ h1 {
}
.card {
width: 40rem;
margin-bottom: 50px;
padding: 0px;
}
......
......@@ -47,9 +47,9 @@
<div class="containers">
<div class="title">Containers</div>
<div class="row">
<div class="col-xl-4 col-md-6 col-sm-12 my-row" *ngFor="let image of selectedMAS.imagegroups.instances">
<div class="card">
<div class="d-flex flex-wrap">
<div *ngFor="let image of selectedMAS.imagegroups.instances">
<div class="card mr-auto">
<div class="card-header">Image {{image.id}}</div>
<div class="card-body">
<table class="table">
......@@ -72,8 +72,8 @@
<div class="containers">
<div class="title">Agents</div>
<div class="row">
<div class="col-xl-4 col-md-6 col-xs-12 my-row" *ngFor="let agent of selectedMAS.agents.instances | paginate: { itemsPerPage: 12, currentPage: q };">
<div class="d-flex flex-wrap">
<div class="mr-auto" *ngFor="let agent of selectedMAS.agents.instances | paginate: { itemsPerPage: 12, currentPage: q };">
<div class="card">
<div class="card-header">Agent {{agent.id}}</div>
<div class="card-body">
......
.content-container {
width: 90% ;
padding-left: 5%;
/* overview without agency*/
.overview-empty {
height: 100%;
width: 100%;
}
/* overview without agency*/
.status {
color: var(--primary-color);
text-align: center;
font-size: 5rem;
font-size: 50px;
font-weight: 300;
line-height: 7rem;
}
.process-spinner {
width: 8rem;
height: 8rem;
color: var(--primary-color);
}
.overview-empty {
height: 100%;
width: 100%;
}
.overview-empty button {
height:60px;
width: 160px;
......@@ -31,25 +28,29 @@
/* overview with agency*/
.content-container {
width: 90% ;
padding-left: 5%;
}
.title {
height: 50px;
display: flex;
height: 5rem;
}
.title .title-name {
font-weight: bold;
font-size: 40px;
font-size: 5rem;
color: rgb(85, 83, 83);
padding-right: 20px;
}
.btn-create {
height:40px;
height:4rem;
font-size: 2rem;
}
#tables {
width:100%;
margin-top: 50px;
#cards {
margin-top: 5rem;
}
.table {
......@@ -57,6 +58,7 @@
}
.card {
width:40rem;
margin-bottom: 50px;
}
......
......@@ -60,15 +60,15 @@
</ng-template>
<div *ngIf="MASID.length !== 0" class="content-container d-flex flex-column justify-content-start align-items-center">
<div class="title">
<div class="title-name" >Overview</div>
<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-4" >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-xl-4 col-lg-4 col-md-6 col-sm-12 my-row" *ngFor="let MAS of MASsDisplay | paginate: { itemsPerPage: 12, currentPage: q }; index as i">
<div id="cards">
<div class="d-flex flex-wrap ">
<div class="mr-auto" *ngFor="let MAS of MASsDisplay | paginate: { itemsPerPage: 12, currentPage: q }; index as i">
<div class="card">
<div class="card-header d-flex justify-content-between">
<h3 (click)="onOpenMAS(MAS.id)">MAS {{MAS.id}}</h3>
......@@ -116,7 +116,7 @@
<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>
<h1 class="status mb-5">{{status}}</h1>
<button *ngIf="status==='Currently no MASs, create one......'" type='button' class="btn my-btn" (click)="openLg(content)">+ New MAS</button>
</div>
......
/* You can add global styles to this file, and also import other style files */
html {
font-size: 62.5%;
}
html,body {
font-family: 'Lato', sans-serif;
height: 100%;
......@@ -13,24 +16,14 @@ app-root {
display: inline-block;
}
/* primary colors used in the frontend */
/* primary colors used */
:root {
--primary-color: rgb(102,102,255);
--light-primary-color: #9696f3;
--background-primary-color: #dadaf8;
}
/* .main-container {
padding-top:80px;
height:100%;
display:flex;
} */
.content-container {
margin-left: 120px;
margin-top: 80px;
z-index: -1;
}
/* style of sidebar */
.sidebar {
......@@ -65,16 +58,18 @@ app-root {
font-weight: bold;
}
.content-container {
margin-left: 120px;
margin-top: 80px;
z-index: -1;
}
#agents {
margin-bottom: 100px;
}
.my-row {
padding-bottom: 30px;
}
.my-btn {
background-color: var(--light-primary-color);
color: white;
......@@ -101,21 +96,13 @@ mat-form-field {
@media (max-width: 575px) {
.content-container {
margin-top: 300px;
margin-left: 0;
}
.sidebar {
margin-top: 300px;
display: none;
}
}
@media (min-width: 576px) {
.content-container {
margin-top: 90px;
}
.sidebar {
margin-top: 90px;
}
}
......
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