fixed some but not all responsive issues

sguzwf · May 22, 2015 · 52c62d4 · 52c62d4
1 parent d0930f4
commit 52c62d4
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 17 deletions.
diff --git a/cmd/drone-server/static/index.html b/cmd/drone-server/static/index.html
@@ -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'>

diff --git a/cmd/drone-server/static/scripts/views/login.html b/cmd/drone-server/static/scripts/views/login.html
@@ -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 @@ <h1>Login</h1>
   <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>
diff --git a/cmd/drone-server/static/scripts/views/repos_add.html b/cmd/drone-server/static/scripts/views/repos_add.html
@@ -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>

diff --git a/cmd/drone-server/static/scripts/views/repos_edit.html b/cmd/drone-server/static/scripts/views/repos_edit.html
@@ -86,23 +86,23 @@ <h2>Advanced</h2>
 	<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>
 
 	<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>
diff --git a/cmd/drone-server/static/styles/drone.css b/cmd/drone-server/static/styles/drone.css
@@ -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);