styled the repository page

This commit is contained in:
Brad Rydzewski 2014-07-09 10:13:08 -07:00
parent f97c6f6e1a
commit 353ae1cd6f
4 changed files with 171 additions and 10 deletions

View file

@ -666,9 +666,87 @@ nav a span.fa {
width: 100%; width: 100%;
} }
#repospage section { #repospage section {
max-width: 1180px; border-bottom: 1px solid #eee;
max-width: 768px;
margin: 0px auto; margin: 0px auto;
margin-top: 30px; 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 { #userspage {
width: 100%; width: 100%;

View file

@ -596,9 +596,75 @@ nav {
#repospage { #repospage {
width:100%; width:100%;
section { section {
max-width:1180px; border-bottom:1px solid #eee;
max-width:768px;
margin:0px auto; margin:0px auto;
margin-top:30px; 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;
}
}
}
} }
} }

File diff suppressed because one or more lines are too long

View file

@ -1,13 +1,30 @@
<article id="repospage"> <div id="repospage">
<nav> <nav>
<a href="/"><span class="fa fa-th"></span></a> <a href="/"><span class="fa fa-th"></span></a>
<a href="/account/repos">repositories</a> <a href="/">repositories</a>
</nav> </nav>
<section> <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> </section>
</article> </div>