Improve styling of project list with long titles and labels

This commit is contained in:
James Allen 2014-07-09 11:51:21 +01:00
parent 488f33d3d0
commit f6c2feff2d
3 changed files with 23 additions and 24 deletions

View file

@ -245,11 +245,11 @@ block content
select-all, select-all,
type="checkbox" type="checkbox"
) )
| TITLE span.header Title
.col-md-2 .col-md-2
| OWNER span.header Owner
.col-md-4 .col-md-4
| LAST MODIFIED span.header Last Modified
li.project_entry.container-fluid( li.project_entry.container-fluid(
ng-repeat="project in visibleProjects | orderBy:'lastUpdated':true", ng-repeat="project in visibleProjects | orderBy:'lastUpdated':true",
ng-controller="ProjectListItemController" ng-controller="ProjectListItemController"
@ -261,15 +261,14 @@ block content
type="checkbox", type="checkbox",
ng-model="project.selected" ng-model="project.selected"
) )
span.title
a.projectName(href="/project/{{project.id}}") {{project.name}}
span span
span.label.label-default(ng-repeat='tag in project.tags') a.projectName(href="/project/{{project.id}}") {{project.name}}
span.label.label-default.tag-label(ng-repeat='tag in project.tags')
| {{tag.name}} | {{tag.name}}
.col-md-2 .col-md-2
span.owner {{ownerName()}} | {{ownerName()}}
.col-md-4 .col-md-4
span.last-modified.isoDate {{project.lastUpdated | formatDate}} | {{project.lastUpdated | formatDate}}
li( li(
ng-if="visibleProjects.length == 0", ng-if="visibleProjects.length == 0",
ng-cloak ng-cloak

View file

@ -28,11 +28,11 @@ block content
select-all, select-all,
type="checkbox" type="checkbox"
) )
span.email EMAIL span.header Email
.col-md-5 .col-md-5
span.name NAME span.header Name
.col-md-2 .col-md-2
span.registered REGISTERED span.header Registered
li.container-fluid( li.container-fluid(
ng-repeat="user in users | orderBy:'email':true", ng-repeat="user in users | orderBy:'email':true",
ng-controller="GroupMemberListItemController" ng-controller="GroupMemberListItemController"

View file

@ -93,13 +93,20 @@ ul.structured-list {
a { a {
color: darken(@blue, 10%); color: darken(@blue, 10%);
} }
.header {
text-transform: uppercase;
}
.select-item, .select-all, .title, .last-modified, .owner { .select-item, .select-all, .title, .last-modified, .owner {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
margin-right: @line-height-computed;
} }
.select-item, .select-all { .select-item, .select-all {
margin-left: @line-height-computed / 4; position: absolute;
left: @line-height-computed;
}
.select-item + span, .select-all + span {
display: inline-block;
padding-left: @line-height-computed * 1.5;
} }
} }
} }
@ -113,19 +120,12 @@ ul.project-list {
margin-right: 0; margin-right: 0;
} }
.projectName { .projectName {
margin-right: @line-height-computed; margin-right: @line-height-computed / 4;
} }
}
.project_entry {
.tag-label { .tag-label {
margin-right: 5px; margin-left: @line-height-computed / 4;
font-size: 12px; position: relative;
cursor: arrow; top: -2px;
i {
margin-top: 1px;
cursor: pointer;
}
margin-bottom: 5px;
} }
} }
} }