fixed some but not all responsive issues

This commit is contained in:
Brad Rydzewski 2015-05-21 23:04:08 -07:00
parent d0930f42cf
commit 52c62d4c70
5 changed files with 82 additions and 17 deletions

View file

@ -1,6 +1,9 @@
<!DOCTYPE html>
<html ng-app="drone" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="/"/>
<link href='//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=Open+Sans:400,600,300' rel='stylesheet' type='text/css'>

View file

@ -1,4 +1,59 @@
<h1>Login</h1>
<style>
html, body {
background:#EEEEEE;
padding:0px;
margin:0px;
font-family:"Roboto";
font-size:15px;
text-transform:uppercase;
width:100%;
height:100%;
}
a.box {
background:#FFF;
width:250px;
padding:20px;
box-shadow: 0px 0px 0 rgba(255,255,255,0.05);
-webkit-transition: all .5s;
-webkit-box-flex: 0;
display:block;
text-decoration:none;
border-radius:3px;
}
a.box:hover {
box-shadow: 7px 7px 0 rgba(255,255,255,0.05);
}
div.logo {
background: url(/static/images/logo.svg) no-repeat center center;;
background-size:72px;
height:150px;
-webkit-transition: all .5s;
}
div.login {
text-align: center;
padding: 15px;
color: #424242;
font-size: 18px;
text-transform: uppercase;
border-radius: 3px;
-webkit-transition: all .5s;
background: #424242;
color: rgba(255,255,255,0.7);
}
body > div {
width:100%;
height:100%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
</style>
<div ng-switch="error">
<div ng-switch-when="internal_error">Oops. There was an unexpected error. Please try again.</div>
@ -7,4 +62,7 @@
<div ng-switch-when="access_denied">Self-registration is disabled. Please contact the system admin to grant access.</div>
</div>
<a href="/authorize" target="_self">Login</a>
<a href="/authorize" target="_self" class="box">
<div class="logo"></div>
<div class="login">Login</div>
</a>

View file

@ -26,8 +26,8 @@
<div style="padding:30px;">
<input type="text" placeholder="octocat/Hello-World" ng-model="slug" style="font-size:14px;padding:10px 20px;width:400px;border: 1px solid #d9d9d9;outline:none;" />
<div style="margin-top:20px;">
<a href="/" style="font-size:14px; padding:10px 20px;text-transform:uppercase;background:#EEE;text-decoration:none;color:#616161;">Cancel</a>
<button ng-click="add(slug)" style="background:#EEE;font-size:14px; padding:10px 20px;text-transform:uppercase;cursor:pointer;color:#616161;">Add</button>
<a href="/" style="display: inline-block;font-size:14px; padding:10px 20px;text-transform:uppercase;background:#EEE;text-decoration:none;color:#616161;">Cancel</a>
<button ng-click="add(slug)" style="display: inline-block;background:#EEE;font-size:14px; padding:10px 20px;text-transform:uppercase;cursor:pointer;color:#616161;">Add</button>
</div>
</div>
</section>

View file

@ -86,15 +86,15 @@
<section>
<h2>Badges</h2>
<div class="row">
<div>Build Status</div>
<div>Markdown</div>
<div>
{{ window.location.origin }}/api/badges/{{ repo.full_name }}/status.svg</pre>
<pre class="snippet">[![Build Status]({{ window.location.origin }}/api/badges/{{ repo.full_name }}/status.svg)]({{ window.location.origin }}/{{ repo.full_name }})</pre>
</div>
</div>
<div class="row">
<div>CCMenu</div>
<div>
{{ window.location.origin }}/api/badges/{{ repo.full_name }}/cc.xml</pre>
<pre class="snippet">{{ window.location.origin }}/api/badges/{{ repo.full_name }}/cc.xml</pre>
</div>
</div>
</section>
@ -102,7 +102,7 @@
<section>
<h2>Public Key</h2>
<div>
<pre class="key">{{ repo.keypair.public }}</pre>
<pre class="snippet snippet-padding">{{ repo.keypair.public }}</pre>
</div>
</section>
</article>

View file

@ -792,7 +792,7 @@
}
.nav-item.settings:before {
font-size: 20px;
font-size: 22px;
content: '\f060';
}
@ -805,16 +805,16 @@
}
.nav-item.star:after {
font-size: 20px;
font-size: 24px;
content: "\f2e7";
}
.nav-item.unstar:after {
font-size: 20px;
font-size: 24px;
content: "\f2e5";
}
.nav-item.add:after {
font-size: 22px;
font-size: 24px;
content: "\f0fd";
}
@ -1356,6 +1356,7 @@ section .row > div:first-child {
padding: 30px 0px;
border-bottom: 1px solid #EEE;
width: 200px;
min-width: 200px;
font-size:14px;
color: #757575;
}
@ -1448,16 +1449,20 @@ section > .search a:hover {
background: #00ACC1;
}
pre.key {
pre.snippet {
white-space: pre-wrap;
word-wrap: break-word;
padding:30px;
font-size:13px;
line-height:18px;
color:#9E9E9E;
font-family: "Droid Sans Mono","Roboto","Arial";
}
pre.snippet-padding {
padding:30px;
}
textarea:focus, input:focus{
outline: 0;
}
@ -1511,7 +1516,7 @@ textarea:focus, input:focus{
width: 50px;
height: 20.833333333333336px;
border-radius: 10.416666666666668px;
background: #bdbdbd;
background: #E0E0E0;
-webkit-transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
vertical-align: middle;
@ -1524,8 +1529,7 @@ textarea:focus, input:focus{
left: -2.604166666666667px;
width: 26.04166666666667px;
height: 26.04166666666667px;
background: #fafafa;
box-shadow: 0 2px 10.416666666666668px rgba(0,0,0,0.28);
background: #bdbdbd;
border-radius: 50%;
-webkit-transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);