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

fix-layout

parent 65f5b03a
Pipeline #421953 passed with stages
in 2 minutes and 29 seconds
......@@ -39,7 +39,7 @@ html,body {
}
header >nav > ul> li:hover{
background-color:var(--light-primary-color);
background: rgb(240, 240, 240);
color: var(--primary-color);
}
......@@ -64,6 +64,7 @@ header {
.maincontainer {
padding-top: 10px;
position: relative;
display:flex;
left: 0;
......@@ -79,12 +80,13 @@ header {
display: flex;
flex-direction: column;
margin-top: 30px;
width: 100px;
width: 110px;
background:white;
}
.sidebar .nav .nav-item {
width: 100px;
width: 110px;
text-align: center;
}
.sidebar .nav .nav-item a {
......@@ -111,22 +113,20 @@ header {
display: flex;
flex-direction: column;
flex-grow: 1;
background-color: var(--background-primary-color);
}
/* overview without agencies */
.empty-overview {
border-radius: 5px;
height:800px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: var(--background-primary-color);
}
.empty-overview > h1 {
padding-top: 100px;
color: var(--primary-color);
padding-bottom: 50px;
font-family: 'Lato', sans-serif;
......@@ -154,6 +154,11 @@ header {
}
#tables {
margin-left: 30px;
margin-right: 30px;
}
.card-header {
......@@ -170,20 +175,11 @@ header {
}
/* #containers {
border: 2px solid var(--background-primary-color);
border-radius: 5px;
width: 1600px;
margin-top:50px
}
#agents {
border: 2px solid var(--background-primary-color);
border-radius: 5px;
width: 1600px;
margin-top:50px;
margin-bottom: 100px;
}
*/
.my-row {
......
......@@ -19,18 +19,18 @@
<img src="img/logo_tp.png" id="navoverview"s width="80" height="60" class="d-inline-block align-top" alt="cloneMAP" loading="lazy">
</a>
<ul class="navbar-nav nav-pills d-flex justify-content-between" style="width:100%;">
<li class="nav-item" style="width:150px;">
<a class="nav-link" id="overview" href="#" style="width:150px;">Overview</a>
</li>
<li class="nav-item flex-fill modules">
<a class="nav-link" id="ams" href="#">AMS</a>
</li>
<li class="nav-item flex-fill modules">
<a class="nav-link" id="logger" href="#">Logger</a>
</li>
<li class="nav-item flex-fill modules">
<a class="nav-link" id="df" href="#" >DF</a>
</li>
<li class="nav-item" style="width:150px;">
<a class="nav-link" id="overview" href="#" style="width:150px;">Overview</a>
</li>
<li class="nav-item flex-fill modules">
<a class="nav-link" id="ams" href="#">AMS</a>
</li>
<li class="nav-item flex-fill modules">
<a class="nav-link" id="logger" href="#">Logger</a>
</li>
<li class="nav-item flex-fill modules">
<a class="nav-link" id="df" href="#" >DF</a>
</li>
</ul>
</nav>
</header>
......@@ -38,32 +38,31 @@
<div class="modal fade" id="agencyModal" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalLabel">New Agency</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="newMAS">Uploaded Contents</label>
<textarea class="form-control" id="newMAS" rows="10"></textarea>
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalLabel">New Agency</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="input-group mb-3">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputMAS">
<label class="custom-file-label" for="inputMAS" aria-describedby="uploadMAS">Choose file</label>
<div class="modal-body">
<div class="form-group">
<label for="newMAS">Uploaded Contents</label>
<textarea class="form-control" id="newMAS" rows="10"></textarea>
</div>
<div class="input-group mb-3">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputMAS">
<label class="custom-file-label" for="inputMAS" aria-describedby="uploadMAS">Choose file</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn my-btn" id="uploadMAS">Upload</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn my-btn" id="uploadMAS">Upload</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="maincontainer">
<div class="sidebar">
......
......@@ -69,10 +69,10 @@ function contentOverview(mass) {
$("#contentContainer").css("background-color", "rgb(240,240,240)");
let startHtml = "<div class='contenttitle'><h2 class='lefttitle'>Overview</h2> \
<button type='button' class='btn my-btn '\
data-toggle='modal' data-target='#agencyModal'>\
+ New Agency</button></div> \
<div class='container' id='tables'></div> ";
<button type='button' class='btn my-btn '\
data-toggle='modal' data-target='#agencyModal'>\
+ New Agency</button></div> \
<div id='tables'></div> ";
insertHtml("#contentContainer", startHtml);
let finalhtml = "<div class='row'>";
fetch("../snippets/MAS-card.html").then(response => {
......@@ -172,19 +172,18 @@ function showAMSContent(masInfo) {
// clear content field
function clearContent() {
$(".contentcontainer").empty();
$(".contentcontainer").empty();
}
// Convenience function for inserting innerHTML for the selector
let insertHtml = function (selector, html) {
let targetElem = document.querySelector(selector);
targetElem.innerHTML = html;
};
};
let insertProperty = function (string, propName, propValue) {
let propToReplace = "{{" + propName + "}}";
string = string.replace(new RegExp(propToReplace, "g"), propValue);
return string;
}
}
<div class="col-md-4 my-row">
<div class="card">
<h5 class="card-header">MAS{{count}}</h5>
<div class="card-body">
<table class="table">
<tbody>
<tr>
<th>Name</td>
<td>{{name}}</td>
</tr>
<tr>
<th>Agents per agency</td>
<td>{{agent-per-agency}}</td>
</tr>
<tr>
<th>DF</td>
<td>{{DF}}</td>
</tr>
<tr>
<th>Logging</td>
<td>{{Logging}}</td>
</tr>
<tr>
<th>MQTT</td>
<td>{{MQTT}}</td>
</tr>
<tr>
<th>Agents</td>
<td>{{Agents}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card">
<h5 class="card-header">MAS{{count}}</h5>
<div class="card-body">
<table class="table">
<tbody>
<tr>
<th>Name</th>
<td>{{name}}</td>
</tr>
<tr>
<th>Agents per agency</th>
<td>{{agent-per-agency}}</td>
</tr>
<tr>
<th>DF</th>
<td>{{DF}}</td>
</tr>
<tr>
<th>Logging</th>
<td>{{Logging}}</td>
</tr>
<tr>
<th>MQTT</th>
<td>{{MQTT}}</td>
</tr>
<tr>
<th>Agents</th>
<td>{{Agents}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
\ No newline at end of file
......@@ -2,26 +2,26 @@
<div class="config">
<table class="table">
<tbody>
<tr>
<th>Name</td>
<td>{{name}}</td>
</tr>
<tr>
<th>Agents per agency</td>
<td>{{agent-per-agency}}</td>
</tr>
<tr>
<th>DF</td>
<td>{{DF}}</td>
</tr>
<tr>
<th>Logging</td>
<td>{{Logging}}</td>
</tr>
<th>Name</th>
<td>{{name}}</td>
</tr>
<tr>
<th>Agents per agency</th>
<td>{{agent-per-agency}}</td>
</tr>
<tr>
<th>DF</th>
<td>{{DF}}</td>
</tr>
<tr>
<th>MQTT</td>
<td>{{MQTT}}</td>
</tr>
<th>Logging</th>
<td>{{Logging}}</td>
</tr>
<tr>
<th>MQTT</th>
<td>{{MQTT}}</td>
</tr>
</tbody>
</table>
</div>
......
<div class="empty-overview">
<h1>Currently no agencies, upload one...</h1>
<h1>Currently no agencies, upload one......</h1>
<button type='button' class="btn my-btn" data-toggle='modal' data-target='#agencyModal'>+ New Agency</button>
</div>
\ No newline at end of file
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