mirrors/woodpecker
1
0
Fork 0
mirror of https://github.com/woodpecker-ci/woodpecker.git synced 2024-12-23 00:46:30 +00:00
Code Issues Projects Releases Wiki Activity

improved styling for range slider, repo page

Browse source
This commit is contained in:
Brad Rydzewski 2015-05-26 22:58:48 -07:00
parent a3784a2589
commit eede3b1613
5 changed files with 134 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
cmd/drone-server/static/scripts/controllers/repos.js
View file

@ -30,7 +30,7 @@
users.getCached().then(function(payload){
$scope.user = payload.data;
});
$scope.add = function(slug) {
repos.post(slug).then(function(payload) {
$location.path('/'+slug);
@ -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){

2
cmd/drone-server/static/scripts/views/repos.html
View file

@ -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>

3
cmd/drone-server/static/scripts/views/repos_edit.html
View file

@ -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>

16
cmd/drone-server/static/scripts/views/users.html
View file

@ -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>

120
cmd/drone-server/static/styles/drone.css
View file

@ -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;
}