styled the repository page

server/app/styles/drone.css

@@ -666,9 +666,87 @@ nav a span.fa {
   width: 100%;
 }
 #repospage section {
-  max-width: 1180px;
+  border-bottom: 1px solid #eee;
+  max-width: 768px;
   margin: 0px auto;
   margin-top: 30px;
+  margin-bottom: 30px;
+}
+#repospage section .search {
+  margin-bottom: 25px;
+}
+#repospage section .search input[type="text"],
+#repospage section .search input[type="search"] {
+  -webkit-transition: 0.4s border linear;
+  -moz-transition: 0.4s border linear;
+  -ms-transition: 0.4s border linear;
+  -o-transition: 0.4s border linear;
+  transition: 0.4s border linear;
+  border: 1px solid #ccc;
+  border-radius: 0px;
+  box-shadow: none;
+  padding: 12px;
+}
+#repospage section .search input[type="text"]:focus,
+#repospage section .search input[type="search"]:focus {
+  border-color: #129FEA;
+}
+#repospage section .repo {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  -o-box-sizing: border-box;
+  box-sizing: border-box;
+  text-decoration: none;
+}
+#repospage section .repo:last-child > div {
+  border-bottom: 1px solid #fff;
+}
+#repospage section .repo > div {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  -o-box-sizing: border-box;
+  box-sizing: border-box;
+  border: 1px solid #eee;
+  border-bottom: 1px solid #fff;
+  -webkit-transition: 0.4s border linear;
+  -moz-transition: 0.4s border linear;
+  -ms-transition: 0.4s border linear;
+  -o-transition: 0.4s border linear;
+  transition: 0.4s border linear;
+}
+#repospage section .repo > div > div {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  -o-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 20px 25px;
+}
+#repospage section .repo > div > div:last-child div {
+  text-align: right;
+}
+#repospage section .repo > div:hover {
+  border: 1px solid #262626;
+}
+#repospage section .repo h4 {
+  font-size: 20px;
+  margin-bottom: 2px;
+  color: #262626;
+}
+#repospage section .repo span {
+  color: #666;
+  font-size: 14px;
+}
+#repospage section .repo i {
+  color: #DDD;
+  font-size: 22px;
+  margin-left: 20px;
+  margin-top: 15px;
+}
+#repospage section .repo i.fa-check-circle-o {
+  color: #68c598;
 }
 #userspage {
   width: 100%;

server/app/styles/drone.less

@@ -596,9 +596,75 @@ nav {
 #repospage {
 	width:100%;
 	section {
-		max-width:1180px;
+		border-bottom:1px solid #eee;
+		max-width:768px;
 		margin:0px auto;
 		margin-top:30px;
+		margin-bottom:30px;
+
+		.search {
+			margin-bottom: 25px;
+			input[type="text"],
+			input[type="search"] {
+				.transition(.4s border linear);
+				border: 1px solid #ccc;
+				border-radius: 0px;
+				box-shadow: none;
+				padding: 12px;
+				&:focus {
+					border-color: #129FEA;
+				}
+			}
+		}
+
+		.repo {
+			.border_box;
+			text-decoration:none;
+
+			&:last-child > div {
+				border-bottom:1px solid #fff;
+			}
+			
+			&> div  {
+				.border_box;
+				border:1px solid #eee;
+				border-bottom:1px solid #fff;
+				.transition(.4s border linear);
+
+				& > div {
+					.border_box;
+					padding:20px 25px;
+					&:last-child div {
+						text-align:right;
+					}
+				}
+
+				&:hover {
+					border:1px solid @c0;
+				}
+			}
+
+			h4 {
+				font-size:20px;
+				margin-bottom:2px;
+				color:@c0;
+			}
+
+			span {
+				color:#666;
+				font-size:14px;
+			}
+
+			i {
+				color: #DDD;
+				font-size: 22px;
+				margin-left:20px;
+				margin-top:15px;
+				&.fa-check-circle-o {
+					color:@cok;
+				}
+			}
+		}
 	}
 }
 

server/app/views/repo_list.html

@@ -1,13 +1,30 @@
-<article id="repospage">
+<div id="repospage">
 	<nav>
 		<a href="/"><span class="fa fa-th"></span></a>
-		<a href="/account/repos">repositories</a>
+		<a href="/">repositories</a>
 	</nav>
 
-
 	<section>
-		<ul>
+		<form class="pure-form search pure-g">
-			<li ng-repeat="repo in repos"><a href="/{{ repo | fullPath }}">{{ repo | fullName }}</a></li>
+			<input type="search" placeholder="FILTER" class="pure-u-1" id="search" ng-model="search" autofocus />
-		</ul>
+		</form>
+
+		<a class="repo" ng-repeat="repo in repos | filter:search" href="/{{ repo | fullPath }}">
+			<div class="pure-g">
+				<div class="pure-u-5-6">
+					<div>
+						<h4>{{ repo.name }}</h4>
+						<span class="url">{{ repo | fullPath }}</span>
+					</div>
+				</div>
+				<div class="pure-u-1-6">
+					<div>
+						<i class="fa fa-circle-o" ng-if="repo.active == false"></i>
+						<i class="fa fa-check-circle-o" ng-if="repo.active == true"></i>
+					</div>
+				</div>
+			</div>
+		</a>
+		
 	</section>
-</article>
+</div>