Add a table view to the repos list page

Fixes #104
This commit is contained in:
Joseph Schorr 2015-06-09 17:58:57 -04:00
parent 7043ddc935
commit 2b1bbcb579
16 changed files with 416 additions and 134 deletions

View file

@ -0,0 +1,32 @@
.repo-list-table {
margin-top: 40px;
}
.repo-list-table .repo-name-icon .avatar {
margin-right: 10px;
}
.repo-list-table .repo-name-icon .namespace {
color: #444;
font-size: 85%;
}
.repo-list-table .repo-name-icon .namespace:after {
content: " / ";
}
.repo-list-table .empty {
color: #ccc;
}
.repo-list-table .last-modified {
font-size: 13px;
}
.repo-list-table .strength-indicator {
display: inline-block;
}
.repo-list-table .popularity {
line-height: 10px;
}

View file

@ -0,0 +1,42 @@
.strength-indicator .indicator-sliver {
margin: 1px;
width: 14px;
height: 3px;
border: 1px solid #D5D5D5;
transition: 0.5s ease;
}
.strength-indicator .strength-indicator-element.good .indicator-sliver {
background: green;
border: 1px solid green;
}
.strength-indicator .strength-indicator-element.fair .indicator-sliver {
background: orange;
border: 1px solid orange;
}
.strength-indicator .strength-indicator-element.fair .indicator-sliver:last-child {
border: 1px solid #D5D5D5;
background: transparent;
}
.strength-indicator .strength-indicator-element.barely .indicator-sliver {
background: rgb(255, 61, 0);
border: 1px solid rgb(255, 61, 0);
}
.strength-indicator .strength-indicator-element.barely .indicator-sliver:last-child {
border: 1px solid #D5D5D5;
background: transparent;
}
.strength-indicator .strength-indicator-element.barely .indicator-sliver:nth-child(3) {
border: 1px solid #D5D5D5;
background: transparent;
}
.strength-indicator .strength-indicator-element.poor .indicator-sliver:first-child {
border: 1px solid red;
background: red;
}

View file

@ -1,6 +1,11 @@
.repo-list .repo-list-panel {
padding: 20px;
padding-top: 0px;
padding-top: 20px;
}
.repo-list .repo-list-panel .btn-group {
float: right;
margin-bottom: 10px;
}
.repo-list .repo-list-namespaces h4 {

View file

@ -3943,54 +3943,11 @@ pre.command:before {
transition: opacity 0.5s ease;
}
.location-view .ping-tower {
.location-view .strength-indicator {
display: inline-block;
vertical-align: middle;
}
.location-view .ping-sliver {
margin: 1px;
width: 14px;
height: 3px;
border: 1px solid #D5D5D5;
transition: 0.5s ease;
}
.location-view .ping-tower.good .ping-sliver {
background: green;
border: 1px solid green;
}
.location-view .ping-tower.fair .ping-sliver {
background: orange;
border: 1px solid orange;
}
.location-view .ping-tower.fair .ping-sliver:first-child {
border: 1px solid #D5D5D5;
background: transparent;
}
.location-view .ping-tower.barely .ping-sliver {
background: rgb(255, 61, 0);
border: 1px solid rgb(255, 61, 0);
}
.location-view .ping-tower.barely .ping-sliver:first-child {
border: 1px solid #D5D5D5;
background: transparent;
}
.location-view .ping-tower.barely .ping-sliver:nth-child(2) {
border: 1px solid #D5D5D5;
background: transparent;
}
.location-view .ping-tower.poor .ping-sliver:last-child {
border: 1px solid red;
background: red;
}
/*
This is the visible area of you carousel.
Set a width here to define how much items are visible.