improved styling for range slider, repo page

cmd/drone-server/static/scripts/controllers/repos.js

@@ -64,6 +64,7 @@
 		});
 
 		$scope.save = function(repo) {
+			repo.timeout = parseInt(repo.timeout);
 			repos.update(repo).then(function(payload) {
 				$scope.repo = payload.data;
 			}).catch(function(err){

cmd/drone-server/static/scripts/views/repos.html

@@ -22,7 +22,7 @@
 	<section>
 		<a class="row build-row" ng-repeat="repo in repos | orderBy:'full_name'" ng-href="/{{ repo.full_name }}">
 			<div>
-				<div class="build-num build-last success">&nbsp;</div>
+				<div class="icon icon-repo"></div>
 			</div>
 			<div>
 				<h3>{{ repo.owner }} / {{ repo.name }}</h3>

cmd/drone-server/static/scripts/views/repos_edit.html

@@ -54,7 +54,8 @@
 		<div class="row">
 			<div>Timeout in minutes</div>
 			<div>
-				<input type="number" ng-model="repo.timeout" />
+				<input type="range" ng-model="repo.timeout" min="0" max="900" />
+				<span class="slider-label">{{ repo.timeout }} minutes</span>
 			</div>
 		</div>
 	</section>

cmd/drone-server/static/scripts/views/users.html

@@ -14,6 +14,15 @@
 </div>
 
 <article>
+
+	<section>
+		<form style="padding:30px">
+			<input type="text" ng-model="login" placeholder="i.e. octocat" style="font-size:14px;padding:10px 20px;width:400px;border: 1px solid #d9d9d9;outline:none;"/>
+			<button ng-click="add(login)" style="display: inline-block;background:#EEE;font-size:14px; padding:0px 20px;text-transform:uppercase;cursor:pointer;color:#616161;height:39px;line-height:41px;margin-left:10px;">Add User</button>
+
+		</form>
+	</section>
+
 	<section>
 		<table border="1">
 			<thead>
@@ -39,10 +48,5 @@
 		</table>
 	</section>
 
-	<section>
+
-		<form>
-			<input type="text" ng-model="login" />
-			<button ng-click="add(login)">Add</button>
-		</form>
-	</section>
 </article>

cmd/drone-server/static/styles/drone.css

@@ -1409,6 +1409,25 @@ section .build-row > div:last-child {
     font-family: Material-Design-Iconic-Font;
 }
 
+section .icon {
+  background:#BDBDBD;
+  display: inline-block;
+    width: 40px;
+    height: 40px;
+    line-height: 40px;
+    border-radius: 50%;
+    color: rgba(255,255,255,0.9);
+    font-size: 16px;
+    text-align: center;
+}
+section .icon-repo:after {
+  font-size: 18px;
+  content: '\f001';
+  color: rgba(255, 255, 255, 0.701961);
+  width: 24px;
+  font-family: "octicons";
+}
+
 section .build-row > div:first-child {
     width:70px;
     min-width: 70px;
@@ -1556,7 +1575,6 @@ input:checked + .switch:active::before {
 
 /*
 
-*/
 
 header {
   background:transparent;
@@ -1596,3 +1614,103 @@ article {
 .menu .nav-item:after {
   color: #2f2f2f !important;
 }
+
+*/
+
+.slider-label {
+  display:none;
+  margin-left:10px;
+}
+input[type="range"]:focus ~ .slider-label {
+  display:inline-block;
+}
+
+
+input[type=range] {
+  -webkit-appearance: none;
+  margin: 6px 0;
+  width: 200px;
+}
+input[type=range]:focus {
+  outline: none;
+}
+input[type=range]::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 8px;
+  cursor: pointer;
+  animate: 0.2s;
+  box-shadow: none;
+  background: rgba(0,150,136,0.5);
+  border-radius: 5px;
+  border: none;
+}
+input[type=range]::-webkit-slider-thumb {
+  box-shadow: none;
+  border: none;
+  height: 26px;
+  width: 26px;
+  border-radius: 50px;
+  background: #009688;
+  cursor: pointer;
+  -webkit-appearance: none;
+  margin-top: -10px;
+}
+input[type=range]:focus::-webkit-slider-runnable-track {
+  background: rgba(0,150,136,0.5);
+}
+input[type=range]::-moz-range-track {
+  width: 100%;
+  height: 8px;
+  cursor: pointer;
+  animate: 0.2s;
+  box-shadow: none;
+  background: rgba(0,150,136,0.5);
+  border-radius: 5px;
+  border: none;
+}
+input[type=range]::-moz-range-thumb {
+  box-shadow: none;
+  border: none;
+  height: 26px;
+  width: 26px;
+  border-radius: 50px;
+  background: #009688;
+  cursor: pointer;
+}
+input[type=range]::-ms-track {
+  width: 100%;
+  height: 8.4px;
+  cursor: pointer;
+  animate: 0.2s;
+  background: transparent;
+  border-color: transparent;
+  border-width: 16px 0;
+  color: transparent;
+}
+input[type=range]::-ms-fill-lower {
+  background: #2a6495;
+  border: 0.2px solid #010101;
+  border-radius: 2.6px;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+}
+input[type=range]::-ms-fill-upper {
+  background: #3071a9;
+  border: 0.2px solid #010101;
+  border-radius: 2.6px;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+}
+input[type=range]::-ms-thumb {
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  border: 1px solid #000000;
+  height: 36px;
+  width: 16px;
+  border-radius: 3px;
+  background: #ffffff;
+  cursor: pointer;
+}
+input[type=range]:focus::-ms-fill-lower {
+  background: #3071a9;
+}
+input[type=range]:focus::-ms-fill-upper {
+  background: #367ebd;
+}