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

View file

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

View file

@ -93,13 +93,20 @@ ul.structured-list {
a {
color: darken(@blue, 10%);
}
.header {
text-transform: uppercase;
}
.select-item, .select-all, .title, .last-modified, .owner {
display: inline-block;
vertical-align: top;
margin-right: @line-height-computed;
}
.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;
}
.projectName {
margin-right: @line-height-computed;
margin-right: @line-height-computed / 4;
}
}
.project_entry {
.tag-label {
margin-right: 5px;
font-size: 12px;
cursor: arrow;
i {
margin-top: 1px;
cursor: pointer;
}
margin-bottom: 5px;
margin-left: @line-height-computed / 4;
position: relative;
top: -2px;
}
}
}