mirror of https://github.com/portainer/portainer
Updated dashboard and modal form markup for bootstrap 3.
Kevan Ahlquist
parent
5d110afb86
commit
2b2d4152a5
13
css/app.css
13
css/app.css
|
|
@ -3,11 +3,6 @@ body {
|
|||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.container > hr {
|
||||
margin: 60px 0;
|
||||
}
|
||||
|
|
@ -40,14 +35,6 @@ body {
|
|||
margin-top: 28px;
|
||||
}
|
||||
|
||||
.navbar .navbar-inner {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.navbar .nav {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.navbar .nav li {
|
||||
display: table-cell;
|
||||
width: 1%;
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@
|
|||
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<div class="container-fluid">
|
||||
<div ng-include="template" ng-controller="MastheadController"></div>
|
||||
|
||||
<div id="view" ng-view></div>
|
||||
|
|
|
|||
|
|
@ -418,10 +418,6 @@ function ImageController($scope, $q, $routeParams, $location, Image, Container,
|
|||
});
|
||||
};
|
||||
|
||||
$scope.create = function() {
|
||||
$('#create-modal').modal('show');
|
||||
};
|
||||
|
||||
Image.get({id: $routeParams.id}, function(d) {
|
||||
$scope.image = d;
|
||||
$scope.tag = d.id;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,17 @@
|
|||
<div id="build-modal" class="modal hide fade">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h3>Build Image</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div id="editor"></div>
|
||||
<p>{{ messages }}</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="" class="btn btn-primary" ng-click="build()">Build</a>
|
||||
</div>
|
||||
<div id="build-modal" class="modal fade">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h3>Build Image</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div id="editor"></div>
|
||||
<p>{{ messages }}</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="" class="btn btn-primary" ng-click="build()">Build</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,44 +1,49 @@
|
|||
|
||||
<div class="row-fluid center">
|
||||
<div class="col-xs-offset-1">
|
||||
<!--<div class="sidebar span4">
|
||||
<div ng-include="template" ng-controller="SideBarController"></div>
|
||||
</div>-->
|
||||
<div class="span12" id="masthead" style="display:none">
|
||||
<div class="jumbotron">
|
||||
<h1>DockerUI</h1>
|
||||
<p class="lead">The Linux container engine</p>
|
||||
<a class="btn btn-large btn-success" href="http://docker.io">Learn more.</a>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-10" id="masthead" style="display:none">
|
||||
<div class="jumbotron">
|
||||
<h1>DockerUI</h1>
|
||||
<p class="lead">The Linux container engine</p>
|
||||
<a class="btn btn-large btn-success" href="http://docker.io">Learn more.</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="span12">
|
||||
<div class="span6">
|
||||
<h3>Running Containers</h3>
|
||||
<ul>
|
||||
<li ng-repeat="container in containers|orderBy:predicate">
|
||||
<a href="#/containers/{{ container.Id }}/">{{ container|containername }}</a>
|
||||
<span class="label label-{{ container.Status|statusbadge }}">{{ container.Status }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="span6 pull-right">
|
||||
<h3 style="float:right">Status</h3>
|
||||
<canvas id="containers-chart" style="float:right;">
|
||||
Get a better browser... Your holding everyone back.
|
||||
</canvas>
|
||||
<div id="chart-legend" style="float:right;"></div>
|
||||
<div class="row">
|
||||
<div class="col-xs-10">
|
||||
<div class="col-xs-5">
|
||||
<h3>Running Containers</h3>
|
||||
<ul>
|
||||
<li ng-repeat="container in containers|orderBy:predicate">
|
||||
<a href="#/containers/{{ container.Id }}/">{{ container|containername }}</a>
|
||||
<span class="label label-{{ container.Status|statusbadge }}">{{ container.Status }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-xs-5 text-right">
|
||||
<h3>Status</h3>
|
||||
<canvas id="containers-chart" class="pull-right">
|
||||
Get a better browser... Your holding everyone back.
|
||||
</canvas>
|
||||
<div id="chart-legend"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="span10" id="stats">
|
||||
<h4>Containers created</h4>
|
||||
<canvas id="containers-started-chart" width="700" style="float:left">
|
||||
Get a better browser... Your holding everyone back.
|
||||
</canvas>
|
||||
<h4>Images created</h4>
|
||||
<canvas id="images-created-chart" width="700" style="float:left">
|
||||
Get a better browser... Your holding everyone back.
|
||||
</canvas>
|
||||
<div class="row">
|
||||
<div class="col-xs-10" id="stats">
|
||||
<h4>Containers created</h4>
|
||||
<canvas id="containers-started-chart" width="700">
|
||||
Get a better browser... You're holding everyone back.
|
||||
</canvas>
|
||||
<h4>Images created</h4>
|
||||
<canvas id="images-created-chart" width="700">
|
||||
Get a better browser... You're holding everyone back.
|
||||
</canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<h4>Image: {{ tag }}</h4>
|
||||
|
||||
<div class="btn-group detail">
|
||||
<button class="btn btn-success" ng-click="create()">Create</button>
|
||||
<button class="btn btn-success" data-toggle="modal" data-target="#create-modal">Create</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
|
@ -82,15 +82,19 @@
|
|||
<hr />
|
||||
|
||||
<div class="row-fluid">
|
||||
<form class="form-inline">
|
||||
<form class="form-inline" role="form">
|
||||
<fieldset>
|
||||
<legend>Tag image</legend>
|
||||
<label>Tag:</label>
|
||||
<input type="text" placeholder="repo..." ng-model="tag.repo">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" ng-model="tag.force"/> Force?
|
||||
</label>
|
||||
<input type="button" ng-click="updateTag()" value="Tag" class="btn btn-info"/>
|
||||
<div class="form-group">
|
||||
<label>Tag:</label>
|
||||
<input type="text" placeholder="repo..." ng-model="tag.repo" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" ng-model="tag.force" class="form-control"/> Force?
|
||||
</label>
|
||||
</div>
|
||||
<input type="button" ng-click="updateTag()" value="Tag" class="btn btn-primary"/>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div class="masthead">
|
||||
<h3 class="muted">DockerUI</h3>
|
||||
<h3 class="text-muted">DockerUI</h3>
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
|
|
|
|||
|
|
@ -1,35 +1,44 @@
|
|||
<div id="create-modal" class="modal hide fade">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h3>Create Container</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Start container from Image</legend>
|
||||
|
||||
<label>Cmd:</label>
|
||||
<input type="text" placeholder="{{ commandPlaceholder }}" ng-model="config.commands"/>
|
||||
<small>Input commands as an array</small>
|
||||
|
||||
<label>Name:</label>
|
||||
<input type="text" ng-model="config.name"/>
|
||||
|
||||
<label>Memory:</label>
|
||||
<input type="number" ng-model="config.memory"/>
|
||||
|
||||
<label>Memory Swap:</label>
|
||||
<input type="number" ng-model="config.memorySwap"/>
|
||||
|
||||
<label>CPU Shares:</label>
|
||||
<input type="number" ng-model="config.cpuShares"/>
|
||||
|
||||
<label>Volumes From:</label>
|
||||
<input type="text" ng-model="config.volumesFrom"/>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="" class="btn btn-primary" ng-click="create()">Create</a>
|
||||
</div>
|
||||
<div id="create-modal" class="modal fade">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h3>Create And Start Container From Image</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form role="form">
|
||||
<fieldset>
|
||||
<div class="form-group">
|
||||
<label>Cmd:</label>
|
||||
<input type="text" placeholder="{{ commandPlaceholder }}" ng-model="config.commands" class="form-control"/>
|
||||
<small>Input commands as an array</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Name:</label>
|
||||
<input type="text" ng-model="config.name" class="form-control"/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Memory:</label>
|
||||
<input type="number" ng-model="config.memory" class="form-control"/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Memory Swap:</label>
|
||||
<input type="number" ng-model="config.memorySwap" class="form-control"/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>CPU Shares:</label>
|
||||
<input type="number" ng-model="config.cpuShares" class="form-control"/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Volumes From:</label>
|
||||
<input type="text" ng-model="config.volumesFrom" class="form-control"/>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="" class="btn btn-primary" ng-click="create()">Create</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue