Further simplification of the layout code
This commit is contained in:
Johannes Zellner
@@ -233,9 +233,7 @@
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="layout-content">
|
||||
<div ng-view id="ng-view"></div>
|
||||
</div>
|
||||
<div ng-view id="ng-view" class="layout-content"></div>
|
||||
|
||||
<footer class="text-center ng-cloak">
|
||||
<span class="text-muted">© 2017 <a href="https://cloudron.io" target="_blank">Cloudron</a></span>
|
||||
|
||||
+40
-78
@@ -106,12 +106,25 @@ $table-border-color: transparent !default;
|
||||
// Main classes
|
||||
// ----------------------------
|
||||
|
||||
html {
|
||||
html, body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.layout-root {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.layout-content {
|
||||
flex-grow: 2;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
@@ -668,7 +681,7 @@ h1, h2, h3 {
|
||||
|
||||
footer {
|
||||
flex-grow: 1;
|
||||
background-color: #EFEFEF;
|
||||
background-color: #f8f8f8;
|
||||
width: 100%;
|
||||
color: #555;
|
||||
max-height: 30px;
|
||||
@@ -837,49 +850,8 @@ footer {
|
||||
// Graphs classes
|
||||
// ----------------------------
|
||||
|
||||
$graphs-primary: #2196F3;
|
||||
$graphs-warning: #f0ad4e;
|
||||
$graphs-success: #27CE65;
|
||||
|
||||
$graphs-primary-alt: lighten(#2196F3, 20%);
|
||||
$graphs-warning-alt: lighten(#f0ad4e, 20%);
|
||||
$graphs-success-alt: lighten(#27CE65, 20%);
|
||||
|
||||
.graphs {
|
||||
text-align: center;
|
||||
|
||||
.text-primary {
|
||||
font-weight: bold;
|
||||
color: $graphs-primary;
|
||||
}
|
||||
|
||||
.text-warning {
|
||||
font-weight: bold;
|
||||
color: $graphs-warning;
|
||||
}
|
||||
|
||||
.text-success {
|
||||
font-weight: bold;
|
||||
color: $graphs-success;
|
||||
}
|
||||
|
||||
.memory-chart-label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.memory-app-container {
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
|
||||
h2 {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1134,44 +1106,34 @@ $graphs-success-alt: lighten(#27CE65, 20%);
|
||||
// Logs
|
||||
// ----------------------------
|
||||
|
||||
.log-line-container {
|
||||
.logs-main {
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 500px;
|
||||
background-color: black;
|
||||
color: white;
|
||||
overflow: auto;
|
||||
border: none;
|
||||
padding: 5px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.log-line {
|
||||
line-height: 1.2;
|
||||
|
||||
&:hover {
|
||||
background-color: #333333;
|
||||
}
|
||||
|
||||
.time {
|
||||
color: #00FFFF;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.layout-root {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.layout-content {
|
||||
flex-grow: 2;
|
||||
overflow: auto;
|
||||
.log-line-container {
|
||||
flex-grow: 1;
|
||||
background-color: black;
|
||||
color: white;
|
||||
overflow: auto;
|
||||
border-style: solid;
|
||||
border-width: 0 15px;
|
||||
border-color: $body-bg;
|
||||
padding: 5px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.log-line {
|
||||
line-height: 1.2;
|
||||
|
||||
&:hover {
|
||||
background-color: #333333;
|
||||
}
|
||||
|
||||
.time {
|
||||
color: #00FFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
|
||||
<div class="row">
|
||||
<div>
|
||||
<div class="col-md-10 col-md-offset-1">
|
||||
<h1>Activity Log</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div>
|
||||
<div class="col-md-10 col-md-offset-1">
|
||||
<div class="filter">
|
||||
<input type="text" class="form-control" ng-model="search" ng-model-options="{ debounce: 1000 }" ng-change="updateFilter()" placeholder="Search"/>
|
||||
@@ -22,7 +22,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div>
|
||||
<div class="col-md-10 col-md-offset-1">
|
||||
<div class="card card-block" style="max-width: 100%">
|
||||
<center ng-show="busy"><h2><i class="fa fa-circle-o-notch fa-spin"></i></h2></center>
|
||||
|
||||
@@ -1,68 +1,52 @@
|
||||
<div class="content">
|
||||
|
||||
<div class="text-left">
|
||||
<h2>Memory</h2>
|
||||
</div>
|
||||
|
||||
<div class="graphs">
|
||||
|
||||
<div class="card card-large text-center">
|
||||
<div class="row">
|
||||
<div class="col-md-10 col-md-offset-1">
|
||||
<div class="row">
|
||||
<div class="col-md-12 text-left">
|
||||
<h2>Memory</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row shadow memory-app-container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h3>Apps</h3>
|
||||
<canvas id="memoryUsageAppsChart" width="200" height="200"></canvas>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h3>System</h3>
|
||||
<canvas id="memoryUsageSystemChart" width="200" height="200"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h4 ng-show="activeApp === 'system'">System</h4>
|
||||
<h4 ng-show="activeApp !== 'system'">{{ activeApp.location }}</h4>
|
||||
<br/>
|
||||
<canvas id="memoryAppChart" width="900" height="300"></canvas>
|
||||
<p>Memory consumption in MB.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h3>Apps</h3>
|
||||
<canvas id="memoryUsageAppsChart" width="200" height="200"></canvas>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h3>System</h3>
|
||||
<canvas id="memoryUsageSystemChart" width="200" height="200"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-10 col-md-offset-1">
|
||||
<div class="row">
|
||||
<div class="col-md-12 text-left">
|
||||
<h2>Disk Usage</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row shadow memory-app-container">
|
||||
<div class="col-md-12">
|
||||
<h4><span class="badge">{{ diskUsage['system'].sum }} GB</span></h4>
|
||||
<canvas id="systemDiskUsageChart" width="200" height="200"></canvas>
|
||||
<p>
|
||||
<span class="text-success">Free {{ diskUsage['system'].free }} GB</span>
|
||||
|
||||
<span class="text-primary">Used {{ diskUsage['system'].used }} GB</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<h4 ng-show="activeApp === 'system'">System</h4>
|
||||
<h4 ng-show="activeApp !== 'system'">{{ activeApp.location }}</h4>
|
||||
<br/>
|
||||
<canvas id="memoryAppChart" width="900" height="300"></canvas>
|
||||
<p>Memory consumption in MB.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
|
||||
<div class="text-left">
|
||||
<h2>Disk Usage</h2>
|
||||
</div>
|
||||
|
||||
<div class="card card-large text-center">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h4><span class="badge">{{ diskUsage['system'].sum }} GB</span></h4>
|
||||
<canvas id="systemDiskUsageChart" width="200" height="200"></canvas>
|
||||
<p>
|
||||
<span class="text-success">Free {{ diskUsage['system'].free }} GB</span>
|
||||
|
||||
<span class="text-primary">Used {{ diskUsage['system'].used }} GB</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
@@ -1,23 +1,24 @@
|
||||
<div class="row">
|
||||
<div class="col-md-10 col-md-offset-1">
|
||||
<h1>Logs</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="logs-main">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-10 col-md-offset-1">
|
||||
<div class="filter">
|
||||
<select class="form-control" ng-options="log.name for log in logs track by log.value" ng-model="selected"></select>
|
||||
</div>
|
||||
<div class="pagination pull-right">
|
||||
<a class="btn btn-default btn-outline" ng-href="{{ selected.url }}&format=short&lines=800"><i class="fa fa-download"></i> Download </a>
|
||||
<div class="logs-header">
|
||||
<div class="col-md-10 col-md-offset-1">
|
||||
<div class="text-left">
|
||||
<h1>Logs</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-10 col-md-offset-1">
|
||||
<div class="card card-block log-line-container">
|
||||
<div class="logs-controls">
|
||||
<div class="col-md-10 col-md-offset-1">
|
||||
<div class="filter">
|
||||
<select class="form-control" ng-options="log.name for log in logs track by log.value" ng-model="selected"></select>
|
||||
</div>
|
||||
<div class="pagination pull-right">
|
||||
<a class="btn btn-default btn-outline" ng-href="{{ selected.url }}&format=short&lines=800"><i class="fa fa-download"></i> Download </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-10 col-md-offset-1 log-line-container"></div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -64,7 +64,7 @@ angular.module('Application').controller('LogsController', ['$scope', '$location
|
||||
logLine.html('<span class="time">' + timeString + ' </span>' + window.ansiToHTML(typeof data.message === 'string' ? data.message : ab2str(data.message)));
|
||||
logViewer.append(logLine);
|
||||
|
||||
if (autoScroll) tmp.lastChild.scrollIntoView({ behavior: 'instant', block: 'end' });
|
||||
// if (autoScroll) tmp.lastChild.scrollIntoView({ behavior: 'instant', block: 'end' });
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
@@ -233,12 +233,8 @@
|
||||
|
||||
<div class="content">
|
||||
|
||||
<div>
|
||||
<div class="text-left">
|
||||
<h1>
|
||||
Users <button class="btn btn-primary btn-outline pull-right" ng-click="useradd.show()"><i class="fa fa-user-plus"></i> New User</button>
|
||||
</h1>
|
||||
</div>
|
||||
<div class="text-left">
|
||||
<h1>Users <button class="btn btn-primary btn-outline pull-right" ng-click="useradd.show()"><i class="fa fa-user-plus"></i> New User</button></h1>
|
||||
</div>
|
||||
|
||||
<div class="card card-large">
|
||||
@@ -298,12 +294,8 @@
|
||||
|
||||
<br/>
|
||||
|
||||
<div>
|
||||
<div class="text-left">
|
||||
<h1>
|
||||
Groups <button class="btn btn-primary btn-outline pull-right" ng-click="groupAdd.show()"><i class="fa fa-plus"></i> New Group</button>
|
||||
</h1>
|
||||
</div>
|
||||
<div class="text-left">
|
||||
<h1>Groups <button class="btn btn-primary btn-outline pull-right" ng-click="groupAdd.show()"><i class="fa fa-plus"></i> New Group</button></h1>
|
||||
</div>
|
||||
|
||||
<div class="card card-large">
|
||||
|
||||
Reference in New Issue
Block a user