base styling for the build page and others

This commit is contained in:
Brad Rydzewski 2015-05-21 00:08:33 -07:00
parent 8419424c38
commit b562924ced
11 changed files with 525 additions and 344 deletions

View file

@ -29,7 +29,10 @@ var (
revision string revision string
) )
var conf = flag.String("config", "drone.toml", "") var (
conf = flag.String("config", "drone.toml", "")
debug = flag.Bool("debug", false, "")
)
func main() { func main() {
flag.Parse() flag.Parse()
@ -187,11 +190,18 @@ func main() {
// static is a helper function that will setup handlers // static is a helper function that will setup handlers
// for serving static files. // for serving static files.
func static() http.Handler { func static() http.Handler {
return http.StripPrefix("/static/", http.FileServer(&assetfs.AssetFS{ // default file server is embedded
var handler = http.FileServer(&assetfs.AssetFS{
Asset: Asset, Asset: Asset,
AssetDir: AssetDir, AssetDir: AssetDir,
Prefix: "cmd/drone-server/static", Prefix: "cmd/drone-server/static",
})) })
if *debug {
handler = http.FileServer(
http.Dir("cmd/drone-server/static"),
)
}
return http.StripPrefix("/static/", handler)
} }
// index is a helper function that will setup a template // index is a helper function that will setup a template

View file

@ -20,7 +20,7 @@
<sodipodi:namedview <sodipodi:namedview
id="base" id="base"
pagecolor="#ffffff" pagecolor="#ffffff"
bordercolor="#2f2f2f" bordercolor="#424242"
borderopacity="1.0" borderopacity="1.0"
inkscape:pageopacity="0.0" inkscape:pageopacity="0.0"
inkscape:pageshadow="2" inkscape:pageshadow="2"
@ -69,7 +69,7 @@
transform="translate(-21.720779,-25.639593)"> transform="translate(-21.720779,-25.639593)">
<path <path
sodipodi:type="arc" sodipodi:type="arc"
style="fill:#2f2f2f;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" style="fill:#424242;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
id="path2998" id="path2998"
sodipodi:cx="172.10474" sodipodi:cx="172.10474"
sodipodi:cy="458.39249" sodipodi:cy="458.39249"
@ -78,13 +78,13 @@
d="m 177.53431,458.39249 c 0,2.78946 -2.43091,5.05076 -5.42957,5.05076 -2.99867,0 -5.42957,-2.2613 -5.42957,-5.05076 0,-2.78946 2.4309,-5.05077 5.42957,-5.05077 2.99866,0 5.42957,2.26131 5.42957,5.05077 z" d="m 177.53431,458.39249 c 0,2.78946 -2.43091,5.05076 -5.42957,5.05076 -2.99867,0 -5.42957,-2.2613 -5.42957,-5.05076 0,-2.78946 2.4309,-5.05077 5.42957,-5.05077 2.99866,0 5.42957,2.26131 5.42957,5.05077 z"
transform="matrix(1.0129716,0,0,1.0889445,-131.11643,-452.42373)" /> transform="matrix(1.0129716,0,0,1.0889445,-131.11643,-452.42373)" />
<path <path
style="fill:#2f2f2f;fill-opacity:1;stroke-width:0;stroke-miterlimit:4" style="fill:#424242;fill-opacity:1;stroke-width:0;stroke-miterlimit:4"
d="m 43.220779,25.640247 c 9.60163,0.0752 20.51786,6.8438 21.5,19.6 l -13,0 c 0,0 -1.67472,-7.04733 -8.5,-7 -6.82528,0.0473 -8.5,7 -8.5,7 l -13,0 c 0.63161,-12.53073 11.36576,-19.67935 21.5,-19.6 z" d="m 43.220779,25.640247 c 9.60163,0.0752 20.51786,6.8438 21.5,19.6 l -13,0 c 0,0 -1.67472,-7.04733 -8.5,-7 -6.82528,0.0473 -8.5,7 -8.5,7 l -13,0 c 0.63161,-12.53073 11.36576,-19.67935 21.5,-19.6 z"
id="rect3810" id="rect3810"
inkscape:connector-curvature="0" inkscape:connector-curvature="0"
sodipodi:nodetypes="scczccs" /> sodipodi:nodetypes="scczccs" />
<path <path
style="fill:#2f2f2f;fill-opacity:1;stroke-width:0;stroke-miterlimit:4" style="fill:#424242;fill-opacity:1;stroke-width:0;stroke-miterlimit:4"
d="m 43.310069,61.990247 c -7.159395,0.01905 -13.847588,-5.383347 -16.58929,-13.75 l 8,0 c 0,0 1.72575,6.96782 8.55103,6.92049 6.82528,-0.0473 8.44897,-6.92049 8.44897,-6.92049 l 8,0 c -1.783351,8.850973 -9.251314,13.730946 -16.41071,13.75 z" d="m 43.310069,61.990247 c -7.159395,0.01905 -13.847588,-5.383347 -16.58929,-13.75 l 8,0 c 0,0 1.72575,6.96782 8.55103,6.92049 6.82528,-0.0473 8.44897,-6.92049 8.44897,-6.92049 l 8,0 c -1.783351,8.850973 -9.251314,13.730946 -16.41071,13.75 z"
id="rect3810-1" id="rect3810-1"
inkscape:connector-curvature="0" inkscape:connector-curvature="0"

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

View file

@ -2,16 +2,16 @@
<html ng-app="drone" lang="en"> <html ng-app="drone" lang="en">
<head> <head>
<base href="/"/> <base href="/"/>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700' rel='stylesheet' type='text/css'> <link href='//fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,300' rel='stylesheet' type='text/css'> <link href='//fonts.googleapis.com/css?family=Open+Sans:400,600,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'> <link href='//fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='https://cdn.rawgit.com/zavoloklom/material-design-iconic-font/master/css/material-design-iconic-font.min.css' rel='stylesheet' type='text/css'> <link href='//cdn.rawgit.com/zavoloklom/material-design-iconic-font/master/css/material-design-iconic-font.min.css' rel='stylesheet' type='text/css'>
<link href='https://cdnjs.cloudflare.com/ajax/libs/octicons/2.1.2/octicons.min.css' rel='stylesheet' type='text/css'> <link href='//cdnjs.cloudflare.com/ajax/libs/octicons/2.1.2/octicons.min.css' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Droid+Sans+Mono" /> <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Droid+Sans+Mono" />
<link href='/static/styles/drone.css' rel='stylesheet' type='text/css'> <link href='/static/styles/drone.css' rel='stylesheet' type='text/css'>
</head> </head>
<body ng-cloak> <body>
<div role="main" ng-view></div> <div role="main" ng-view ng-cloak></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.js"></script>

View file

@ -6,22 +6,29 @@
<a class="menu-item user-name float-right" href="/profile">{{ "+"+user.login }}</a> <a class="menu-item user-name float-right" href="/profile">{{ "+"+user.login }}</a>
</header> </header>
<header show-nav distance="160" class="dockable transition-fade flex-parent"></header> <div class="toolbar">
<section class="central-container">
<div class="flex-item pane restrict-center contains-cardset"> <div class="breadcrumb" style="position:relative;top:0px;">
<div class="breadcrumb flex-item truncate"> <a ng-href="/{{ repo.full_name }}" class="icon icon-home"></a>
<a ng-href="/{{ repo.full_name }}" class="backarrow"></a> <a ng-href="/{{ repo.full_name }}">{{ repo.owner }} / {{ repo.name }}</a>
<a ng-href="/{{ repo.full_name }}" class="level">{{ repo.owner }} / {{ repo.name }}</a> <span class="spacer"></span>
<span class="spacer"></span> <a ng-href="/{{ repo.full_name }}/{{ build.sequence }}">{{ build.sequence }}</a>
<a ng-href="/{{ repo.full_name }}" class="level">{{ build.sequence }}</span> <span class="spacer"></span>
<span class="spacer"></span> <a href="#">{{ task.sequence }}</a>
<span class="level">{{ task.sequence }}</span>
</div>
</div> </div>
</section>
<div class="menu">
<a href="settings.html" class="icon icon-settings"></a>
<a ng-href="/{{ repo.full_name }}/edit" class="nav-item settings float-right"></a>
<button ng-click="watch(repo)" ng-if="!repo.starred" class="nav-item star float-right"></button>
<button ng-click="unwatch(repo)" ng-if="repo.starred" class="nav-item unstar float-right"></button>
</div>
</div>
<main>
<article>
<section class="commit-section"> <section class="commit-section">
<div class="commit-status"> <div class="commit-status">
@ -70,83 +77,14 @@
</table> </table>
</section> </section>
<section> <pre id="term" ng-if="task && task.state !== 'pending'"></pre>
<pre id="term" ng-if="task && task.state !== 'pending'"></pre>
</section>
<button class="fab" ng-if="build.state === 'running'" ng-click="tail()"></button> <button class="fab" ng-if="build.state === 'running'" ng-click="tail()"></button>
</main> </article>
</body>
</html>
<button ng-if="build.state !== 'pending' && build.state !== 'running'" ng-click="restart()">Restart</button> <button ng-if="build.state !== 'pending' && build.state !== 'running'" ng-click="restart()">Restart</button>
<button ng-if="build.state === 'pending' || build.state === 'running'" ng-click="cancel()">Cancel</button> <button ng-if="build.state === 'pending' || build.state === 'running'" ng-click="cancel()">Cancel</button>
<!--
<h1>{{ repo.full_name }}/{{ build.sequence }}</h1>
<a href="/{{ repo.full_name }}">Back</a>
<div>
</div>
<dl>
<dt>Build State</dt>
<dd>{{ build.state }}</dd>
<dt>Started</dt>
<dd>{{ build.started_at | fromNow }}</dd>
<dt>Duration</dt>
<dd>{{ build.duration | toDuration }}</dd>
<dt>Type</dt>
<dd>{{ build.pull_request ? "pull request" : "push" }}</dd>
<dt ng-if="build.pull_request">Pull Request</dt>
<dd ng-if="build.pull_request">{{ build.pull_request }}</dd>
<dt>Ref</dt>
<dd>{{ build.ref }}</dd>
<dt>Sha</dt>
<dd>{{ build.sha }}</dd>
<dt>Author</dt>
<dd>{{ build.author }}</dd>
<dt>Message</dt>
<dd>{{ build.message }}</dd>
</dl>
<hr>
<dl>
<dt>Task State</dt>
<dd>{{ task.state }}</dd>
<dt>Started</dt>
<dd>{{ task.started_at | fromNow }}</dd>
<dt>Finished</dt>
<dd>{{ task.finished_at | fromNow }}</dd>
<dt>Duration</dt>
<dd>{{ task.duration | toDuration }}</dd>
<dt>Exit Code</dt>
<dd>{{ task.exit_code }}</dd>
<dt>Matrix</dt>
<dd>{{ task.environment }}</dd>
</dl>
-->

View file

@ -6,39 +6,34 @@
<a class="menu-item user-name float-right" href="/profile">{{ "+"+user.login }}</a> <a class="menu-item user-name float-right" href="/profile">{{ "+"+user.login }}</a>
</header> </header>
<header show-nav distance="160" class="dockable transition-fade flex-parent"></header> <div class="toolbar">
<section class="central-container">
<div class="flex-item pane restrict-center contains-cardset"> <div class="breadcrumb" style="position:relative;top:0px;">
<div class="breadcrumb flex-item truncate"> <a href="/" class="icon icon-home"></a>
<a href="/" class="backarrow"></a> <a href="#">{{ repo.owner }} / {{ repo.name }}</a>
<a href="#" class="level">{{ repo.owner }} / {{ repo.name }}</a>
</div>
</div> </div>
<nav> <div class="menu">
<a href="settings.html" class="icon icon-settings"></a>
<a ng-href="/{{ repo.full_name }}/edit" class="nav-item settings float-right"></a> <a ng-href="/{{ repo.full_name }}/edit" class="nav-item settings float-right"></a>
<button ng-click="watch(repo)" ng-if="!repo.starred" class="nav-item star float-right"></button> <button ng-click="watch(repo)" ng-if="!repo.starred" class="nav-item star float-right"></button>
<button ng-click="unwatch(repo)" ng-if="repo.starred" class="nav-item unstar float-right"></button> <button ng-click="unwatch(repo)" ng-if="repo.starred" class="nav-item unstar float-right"></button>
</nav> </div>
<ul class="cardset list"> </div>
<li ng-repeat="build in builds | orderBy:'-sequence'">
<div ng-class="[ 'card', build.state ]">
<div class="dataset">
<a ng-href="/{{ repo.full_name }}/{{ build.sequence }}"></a> <article>
<div class="info-1"> <section>
<p class="number">{{ build.sequence }}</p> <a class="row build-row" ng-repeat="build in builds | orderBy:'-sequence'" ng-href="/{{ repo.full_name }}/{{ build.sequence }}">
</div> <div>
<div class="info-2"> <div ng-class="[ 'build-num', build.state ]">{{ build.sequence }}</div>
<p class="branch-sha truncate">{{ build.branch }} ({{build.sha | trunc }})</p>
<p class="author-time truncate">{{ build.author }} &middot {{ build.started_at | fromNow }}</p>
</div>
<div class="info-3">
<p class="commit-message truncate">{{ build.message }}</p>
</div>
</div>
</div> </div>
</li> <div>
</ul> <h3>{{ build.message }}</h3>
<p><strong>{{ build.author }}</strong> pushed to <strong>{{ build.branch }}</strong> {{ build.started_at | fromNow }}</p>
</section> </div>
</a>
</section>
</article>

View file

@ -6,40 +6,41 @@
<a class="menu-item user-name float-right" href="/profile">{{ "+"+user.login }}</a> <a class="menu-item user-name float-right" href="/profile">{{ "+"+user.login }}</a>
</header> </header>
<header show-nav distance="160" class="dockable transition-fade flex-parent"></header> <div class="toolbar">
<section class="central-container"> <div class="breadcrumb" style="position:relative;top:0px;">
<div class="flex-item pane restrict-center contains-cardset"> <a href="#">Dashboard</a>
<div class="breadcrumb flex-item truncate">
<a href="#" class="level">Dashboard</a>
</div>
</div> </div>
</section> </div>
<a href="/new">New</a> <article>
<a href="/profile">Settings</a> <section>
<a href="/users" ng-if="user.admin">User Management</a>
<table border="1"> <a href="/new">New</a>
<thead>
<tr> <table border="1">
<th>Repo</th> <thead>
<th>Status</th> <tr>
<th>Number</th> <th>Repo</th>
<th>Started</th> <th>Status</th>
<th>Duration</th> <th>Number</th>
<th>Branch</th> <th>Started</th>
<th>Commit</th> <th>Duration</th>
</tr> <th>Branch</th>
</thead> <th>Commit</th>
<tbody> </tr>
<tr ng-repeat="repo in repos"> </thead>
<td><a ng-href="{{ repo.full_name }}">{{ repo.full_name }}</a></td> <tbody>
<td>{{ repo.last_build.state }}</td> <tr ng-repeat="repo in repos">
<td><a ng-href="{{ repo.full_name }}/{{ repo.last_build.number }}">{{ repo.last_build.number }}</a></td> <td><a ng-href="{{ repo.full_name }}">{{ repo.full_name }}</a></td>
<td>{{ repo.last_build.started_at | fromNow }}</td> <td>{{ repo.last_build.state }}</td>
<td>{{ repo.last_build.duration | toDuration }}</td> <td><a ng-href="{{ repo.full_name }}/{{ repo.last_build.number }}">{{ repo.last_build.number }}</a></td>
<td>{{ repo.last_build.head_commit.ref || repo.last_build.pull_request.source.ref }}</td> <td>{{ repo.last_build.started_at | fromNow }}</td>
<td>{{ repo.last_build.head_commit.sha || repo.last_build.pull_request.source.ref }}</td> <td>{{ repo.last_build.duration | toDuration }}</td>
</tr> <td>{{ repo.last_build.head_commit.ref || repo.last_build.pull_request.source.ref }}</td>
</tbody> <td>{{ repo.last_build.head_commit.sha || repo.last_build.pull_request.source.ref }}</td>
</table> </tr>
</tbody>
</table>
</section>
</article>

View file

@ -1,13 +1,28 @@
<h1>Add Repository</h1> <header>
<a class="logo float-left" href="/"></a>
<a class="menu-item settings float-right" href="/profile"></a>
<a class="menu-item users float-right" href="/users" ng-if="user.admin"></a>
<a class="menu-item help float-right" href="http://readme.drone.io" target="_blank"></a>
<a class="menu-item user-name float-right" href="/profile">{{ "+"+user.login }}</a>
</header>
<a href="/">Back</a> <div class="toolbar">
<div class="breadcrumb" style="position:relative;top:0px;">
<div class="alert alert-error" ng-if="error !== undefined"> <a href="/" class="icon icon-home"></a>
There was an error adding your repository. Please ensure the <a href="#">Add Repository</a>
repository exists and you have admin privileges. </div>
</div> </div>
<form> <article>
<input type="text" placeholder="octocat/Hello-World" ng-model="slug" /> <section>
<button ng-click="add(slug)">Add</button> <div class="alert alert-error" ng-if="error !== undefined">
</form> There was an error adding your repository. Please ensure the
repository exists and you have admin privileges.
</div>
<form>
<input type="text" placeholder="octocat/Hello-World" ng-model="slug" />
<button ng-click="add(slug)">Add</button>
</form>
</section>
</article>

View file

@ -1,43 +1,74 @@
<h1>{{ repo.full_name }} / Edit</h1> <header>
<a class="logo float-left" href="/"></a>
<a class="menu-item settings float-right" href="/profile"></a>
<a class="menu-item users float-right" href="/users" ng-if="user.admin"></a>
<a class="menu-item help float-right" href="http://readme.drone.io" target="_blank"></a>
<a class="menu-item user-name float-right" href="/profile">{{ "+"+user.login }}</a>
</header>
<a ng-href="/{{ repo.full_name }}">Back</a> <div class="toolbar">
<form> <div class="breadcrumb" style="position:relative;top:0px;">
<div> <a href="/{{ repo.full_name }}" class="icon icon-home"></a>
<label>Enable Pushes</label> <a ng-href="/{{ repo.full_name }}">{{ repo.owner }} / {{ repo.name }}</a>
<input type="checkbox" ng-model="repo.post_commits" />
</div>
<div>
<label>Enable Pull Requests</label>
<input type="checkbox" ng-model="repo.pull_requests" />
</div> </div>
<div> <div class="menu">
<label>Trusted</label> <a href="settings.html" class="icon icon-settings"></a>
<input type="checkbox" ng-model="repo.trusted" /> <a ng-href="/{{ repo.full_name }}/edit" class="nav-item settings float-right"></a>
</div> <button ng-click="watch(repo)" ng-if="!repo.starred" class="nav-item star float-right"></button>
<div> <button ng-click="unwatch(repo)" ng-if="repo.starred" class="nav-item unstar float-right"></button>
<label>Timeout</label>
<input type="number" ng-model="repo.timeout" />
</div>
<ul>
<li ng-repeat="(key, value) in repo.params">
<label>{{ key }}</label>
<input type="text" ng-model="repo.params[key]"/>
<button ng-click="deleteParam(key)">remove</button>
</li>
<li>
<input type="text" ng-model="param.key" />
<input type="text" ng-model="param.value" />
<button ng-click="addParam(param)">add</button>
</li>
</ul>
<div>
<label>Public Key</label>
<pre>{{ repo.keypair.public }}</pre>
</div> </div>
<button ng-click="save(repo)">Save</button> </div>
<button ng-click="delete(repo.full_name)">Delete</button>
</form>
<article>
<section>
<form>
<div>
<label>Enable Pushes</label>
<input type="checkbox" ng-model="repo.post_commits" />
</div>
<div>
<label>Enable Pull Requests</label>
<input type="checkbox" ng-model="repo.pull_requests" />
</div>
<div>
<label>Trusted</label>
<input type="checkbox" ng-model="repo.trusted" />
</div>
<div>
<label>Timeout</label>
<input type="number" ng-model="repo.timeout" />
</div>
<ul>
<li ng-repeat="(key, value) in repo.params">
<label>{{ key }}</label>
<input type="text" ng-model="repo.params[key]"/>
<button ng-click="deleteParam(key)">remove</button>
</li>
<li>
<input type="text" ng-model="param.key" />
<input type="text" ng-model="param.value" />
<button ng-click="addParam(param)">add</button>
</li>
</ul>
<button ng-click="save(repo)">Save</button>
<button ng-click="delete(repo.full_name)">Delete</button>
</form>
</section>
<section>
<h2>Public Key</h2>
<div>
<pre class="key">{{ repo.keypair.public }}</pre>
</div>
</section>
</article>

View file

@ -6,67 +6,61 @@
<a class="menu-item user-name float-right" href="/profile">{{ "+"+user.login }}</a> <a class="menu-item user-name float-right" href="/profile">{{ "+"+user.login }}</a>
</header> </header>
<header show-nav distance="160" class="dockable transition-fade flex-parent"></header> <div class="toolbar">
<section class="central-container">
<div class="flex-item pane restrict-center contains-cardset"> <div class="breadcrumb" style="position:relative;top:0px;">
<div class="breadcrumb flex-item truncate"> <a href="/" class="icon icon-home"></a>
<a href="/" class="backarrow"></a> <a href="#">Profile</a>
<a href="#" class="level">Profile</a>
</div>
</div> </div>
</section> </div>
<article>
<section>
<h2>Login info</h2>
<div class="row">
<div>Login</div>
<div>{{ user.login }}</div>
</div>
<div class="row">
<div>Full Name</div>
<div>{{ user.name }}</div>
</div>
<div class="row">
<div>Email</div>
<div>{{ user.email }}</div>
</div>
</section>
<dl> <section>
<dt>Login</dt> <h2>Tokens</h2>
<dd>{{ user.login }}</dd> <form>
<input type="label" ng-model="newToken.label" />
<button ng-click="createToken(newToken)">Create</button>
</form>
<dt>Full Name</dt> <div class="alert" ng-if="tokens && tokens.length === 0">No Personal Tokens Exist</div>
<dd>{{ user.name }}</dd>
<dt>Created</dt> <table ng-if="tokens && tokens.length !== 0">
<dd>{{ user.created_at | fromNow }}</dd> <thead>
<tr>
<dt>Updated</dt> <th>Label</th>
<dd>{{ user.update_at | fromNow }}</dd> <th>Issued</th>
<th></th>
<dt>Email</dt> </tr>
<dd>{{ user.email }}</dd> </thead>
<tbody>
<dt>Site Admin</dt> <tr ng-repeat-start="token in tokens">
<dd>{{ user.admin }}</dd> <td>{{ token.label }}</td>
<td>{{ token.issued_at | fromNow }}</td>
<dt>Gravatar</dt> <td><button ng-click="revokeToken(token)">delete</button></td>
<dd><img ng-src="{{ user.gravatar_id | gravatar }}"</dd> </tr>
</dl> <tr ng-repeat-end ng-if="token.hash">
<td colspan="3">
<span>Make sure to copy your new personal access token now. You won't be able to see it again!</span>
<form> <pre style="white-space: pre-line;overflow-wrap: break-word;">{{ token.hash }}</pre>
<input type="label" ng-model="newToken.label" /> </td>
<button ng-click="createToken(newToken)">Create</button> </tr>
</form> </tbody>
</table>
<div class="alert" ng-if="tokens && tokens.length === 0">No Personal Tokens Exist</div> </section>
</article>
<table ng-if="tokens && tokens.length !== 0">
<thead>
<tr>
<th>Label</th>
<th>Issued</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="token in tokens">
<td>{{ token.label }}</td>
<td>{{ token.issued_at | fromNow }}</td>
<td><button ng-click="revokeToken(token)">delete</button></td>
</tr>
<tr ng-repeat-end ng-if="token.hash">
<td colspan="3">
<span>Make sure to copy your new personal access token now. You won't be able to see it again!</span>
<pre style="white-space: pre-line;overflow-wrap: break-word;">{{ token.hash }}</pre>
</td>
</tr>
</tbody>
</table>

View file

@ -6,46 +6,49 @@
<a class="menu-item user-name float-right" href="/profile">{{ "+"+user.login }}</a> <a class="menu-item user-name float-right" href="/profile">{{ "+"+user.login }}</a>
</header> </header>
<header show-nav distance="160" class="dockable transition-fade flex-parent"></header> <div class="toolbar">
<section class="central-container"> <div class="breadcrumb" style="position:relative;top:0px;">
<div class="flex-item pane restrict-center contains-cardset"> <a href="/" class="icon icon-home"></a>
<div class="breadcrumb flex-item truncate"> <a href="#">Users</a>
<a href="/" class="backarrow"></a>
<a href="#" class="level">User Management</a>
</div>
</div> </div>
</section> </div>
<table border="1"> <article>
<thead> <section>
<tr> <table border="1">
<th>Login</th> <thead>
<th>Full Name</th> <tr>
<th>Created</th> <th>Login</th>
<th>Updated</th> <th>Full Name</th>
<th>Email</th> <th>Created</th>
<th>Site Admin</th> <th>Updated</th>
<th>Gravatar</th> <th>Email</th>
<th></th> <th>Site Admin</th>
<th></th> <th>Gravatar</th>
</tr> <th></th>
</thead> <th></th>
<tbody> </tr>
<tr ng-repeat="user in users"> </thead>
<td>{{ user.login }}</td> <tbody>
<td>{{ user.name }}</td> <tr ng-repeat="user in users">
<td>{{ user.created_at | fromNow }}</td> <td>{{ user.login }}</td>
<td>{{ user.updated_at | fromNow }}</td> <td>{{ user.name }}</td>
<td>{{ user.email }}</td> <td>{{ user.created_at | fromNow }}</td>
<td>{{ !!user.admin }}</td> <td>{{ user.updated_at | fromNow }}</td>
<td><img ng-src="{{ user.gravatar_id | gravatar }}" /></td> <td>{{ user.email }}</td>
<td><button ng-click="toggle(user)">toggle admin</button></td> <td>{{ !!user.admin }}</td>
<td><button ng-click="remove(user)">delete</button></td> <td><img ng-src="{{ user.gravatar_id | gravatar }}" /></td>
</tr> <td><button ng-click="toggle(user)">toggle admin</button></td>
</tbody> <td><button ng-click="remove(user)">delete</button></td>
</table> </tr>
</tbody>
<form> </table>
<input type="text" ng-model="login" /> </section>
<button ng-click="add(login)">Add</button>
</form> <section>
<form>
<input type="text" ng-model="login" />
<button ng-click="add(login)">Add</button>
</form>
</section>
</article>

View file

@ -1,5 +1,5 @@
@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,600,900); @import url(//fonts.googleapis.com/css?family=Roboto:300,400,600,900);
@import url(http://fonts.googleapis.com/css?family=Droid+Sans+Mono); @import url(//fonts.googleapis.com/css?family=Droid+Sans+Mono);
/* RESETS */ /* RESETS */
@ -156,7 +156,7 @@
.status.error:before { .status.error:before {
font-size: 20px; font-size: 20px;
content: '\f082'; content: '\f082';
color: #C0392B; color: #EF5350;
opacity: 0.85; opacity: 0.85;
} }
@ -266,7 +266,7 @@
.card.killed .time-ran, .card.killed .time-ran,
.card.error .time-ran, .card.error .time-ran,
.card.failure .time-ran { .card.failure .time-ran {
color: #C0392B color: #EF5350
} }
.card .time-duration { .card .time-duration {
@ -429,7 +429,7 @@
.killed .build-number p, .killed .build-number p,
.error .build-number p, .error .build-number p,
.failed .build-number p { .failed .build-number p {
background-color: #C0392B; background-color: #EF5350;
} }
.list .card .message { .list .card .message {
@ -524,15 +524,6 @@
margin-top: 4px; margin-top: 4px;
} }
pre {
font-family: "Droid Sans Mono","Roboto","Arial";
font-size: 14px;
color: #cecece;
line-height: 175%;
white-space: pre-wrap;
word-wrap: break-word;
}
/* DATASET */ /* DATASET */
.card .dataset { .card .dataset {
@ -616,7 +607,7 @@
.card.error .dataset .number, .card.error .dataset .number,
.card.killed .dataset .number, .card.killed .dataset .number,
.card.failure .dataset .number { .card.failure .dataset .number {
background-color: #CF000F; background-color: #EF5350;
} }
.card .dataset .branch-sha { .card .dataset .branch-sha {
@ -698,9 +689,7 @@
} }
section:last-of-type {
padding-bottom: 72px;
}
.show section:first-of-type { .show section:first-of-type {
margin-top: 0px; margin-top: 0px;
@ -735,7 +724,7 @@
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
/*
header { header {
height: 64px; height: 64px;
width: 100%; width: 100%;
@ -744,7 +733,7 @@
line-height: 72px; line-height: 72px;
overflow: hidden; overflow: hidden;
} }
*/
.dockable { .dockable {
background-color: #fafafa; background-color: #fafafa;
} }
@ -792,7 +781,7 @@
.nav-item:after, .nav-item:after,
.nav-item:before { .nav-item:before {
font-family: "Material-Design-Iconic-Font"; font-family: "Material-Design-Iconic-Font";
color: #3f3f3f; color: rgba(255,255,255,0.749);
} }
.nav-item { .nav-item {
@ -890,7 +879,7 @@
vertical-align: middle; vertical-align: middle;
} }
.logo, .menu-item { .menu-item {
height: 40px; height: 40px;
width: auto; width: auto;
margin: 7px 16px; margin: 7px 16px;
@ -910,6 +899,7 @@
margin-left: 0; margin-left: 0;
} }
/*
.logo:hover { .logo:hover {
opacity: 1; opacity: 1;
} }
@ -940,6 +930,7 @@
opacity: 1; opacity: 1;
font-weight: 400; font-weight: 400;
} }
*/
.menu-item { .menu-item {
margin-right: 0; margin-right: 0;
@ -1031,7 +1022,7 @@
top: 0px; top: 0px;
right: 25px; right: 25px;
} }
/*
.breadcrumb { .breadcrumb {
padding: 0; padding: 0;
height: 60px; height: 60px;
@ -1103,7 +1094,7 @@
font-weight: 400; font-weight: 400;
color: #fafafa !important; color: #fafafa !important;
} }
*/
.test { .test {
position: absolute; position: absolute;
top: -72px; top: -72px;
@ -1164,17 +1155,6 @@
*/ */
article {
padding: 30px 20px;
}
article section {
margin:0px auto;
max-width:960px;
padding: 20px;
background: #FFF;
margin-bottom:30px;
}
/* INFO PANE */ /* INFO PANE */
@ -1207,3 +1187,217 @@
margin-top: -20px; margin-top: -20px;
font-size: 40px; font-size: 40px;
} }
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
body {
background:#f5f5f5;
}
header {
background:#FFF;
}
header[show-nav] {
display:none;
}
section.central-container {
margin-top:50px;
}
header {
height: 60px;
background: #FFF;
line-height: 60px;
overflow: hidden;
padding-left:15px;
padding-right:25px;
}
header .logo {
content: '';
display: block;
height: 60px;
width: 33px;
background: url("/static/images/logo.svg") no-repeat center center;
background-size: 33px;
float:left;
}
.toolbar {
background:#424242;
position:relative;
height:56px;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.26);
position: sticky;
top: 0px;
}
.toolbar .breadcrumb {
max-width:900px;
margin:0px auto;
line-height:56px;
height:56px;
}
.breadcrumb a {
color:#FFF;
font-size:20px;
line-height:56px;
height:56px;
text-decoration:none;
display:inline-block;
}
.breadcrumb span {
color: rgba(255,255,255,0.749);
line-height:56px;
height:56px;
}
.breadcrumb span:before {
font-family: "Material-Design-Iconic-Font";
color: rgba(255,255,255,0.749);
line-height:56px;
content: "\f29c";
}
.breadcrumb a.icon-home {
position: absolute;
left: -50px;
}
.breadcrumb a.icon-home:after {
font-family: "Material-Design-Iconic-Font";
line-height:56px;
color: rgba(255,255,255,0.749);
content: "\f297";
font-size:24px;
vertical-align: middle;
}
.menu {
position:absolute;
right:25px;
top:0px;
}
article > pre {
font-family: "Droid Sans Mono","Roboto","Arial";
font-size: 13px;
color:#fff;
background: #424242;
line-height: 18px;
white-space: pre-wrap;
word-wrap: break-word;
padding: 30px;
margin-top:30px;
}
article {
padding:0px 20px;
max-width:900px;
margin:0px auto;
box-sizing: content-box;
margin-bottom:30px;
padding-top:15px;
}
section {
background:#FFF;
padding:0px;
margin-top:30px;
border:1px solid #EEE;
}
section h2 {
margin: 0px;
padding: 30px 30px;
padding-bottom: 10px;
font-size: 18px;
color: #424242;
font-weight: normal;
}
section .row {
padding: 0px 30px;
text-decoration: none;
display: block;
display: flex;
text-decoration: none;
}
section .row:hover {
background:#FAFAFA;
}
section .row > div:first-child {
padding: 30px 0px;
border-bottom: 1px solid #EEE;
width: 200px;
font-size:14px;
color: #757575;
}
section .row > div:last-child {
color: #9E9E9E;
flex: 1 1 auto;
padding: 30px 30px;
border-bottom: 1px solid #EEE;
font-size:14px;
}
section .row:last-child > div {
border-bottom:none;
}
section .build-row .build-num {
padding: 8px;
display: inline-block;
width: 75px;
border-radius: 2px;
color: rgba(255,255,255,0.9);
font-size: 16px;
text-align: center;
background: #FFD740;
}
.success {
background:#26A65B;
}
.error,
.killed,
.failure {
background: #EF5350;
}
section .build-row > div:first-child {
width:90px;
}
section .build-row h3 {
color:#212121;
font-size:18px;
margin-bottom:10px;
}
section .build-row strong {
color:#616161;
font-weight:normal;
}
pre.key {
white-space: pre-wrap;
word-wrap: break-word;
padding:30px;
font-size:14px;
line-height:18px;
color:#424242;
font-family: "Droid Sans Mono","Roboto","Arial";
}
@media (max-width: 990px) {
.breadcrumb a.icon-home {
position: static;
padding-right:20px;
padding-left:20px;
}
article {
padding-top:0px;
margin-top:-5px;
}
}