Make project list look better on a smaller screen

This commit is contained in:
James Allen 2014-07-23 11:08:55 +01:00
parent 20a5d3742a
commit 532ec5e756
3 changed files with 16 additions and 14 deletions

View file

@ -18,10 +18,10 @@ block content
.content.content-alt(ng-controller="ProjectPageController") .content.content-alt(ng-controller="ProjectPageController")
.container .container
.row .row
.col-md-2 .col-md-2.col-xs-3
include ./list/side-bar include ./list/side-bar
.col-md-10 .col-md-10.col-xs-9
include ./list/project-list include ./list/project-list
include ./list/modals include ./list/modals

View file

@ -1,8 +1,8 @@
.row .row
.col-md-12 .col-xs-12
form.project-search.form-horizontal(role="form") form.project-search.form-horizontal(role="form")
.form-group.has-feedback.has-feedback-left.col-md-7 .form-group.has-feedback.has-feedback-left.col-xs-7
input.form-control.col-md-7( input.form-control.col-xs-7(
placeholder='Search projects…', placeholder='Search projects…',
autofocus='autofocus', autofocus='autofocus',
ng-model="searchText", ng-model="searchText",
@ -108,7 +108,7 @@
) Delete Forever ) Delete Forever
.row.row-spaced .row.row-spaced
.col-md-12 .col-xs-12
.card.card-thin .card.card-thin
ul.list-unstyled.project-list.structured-list( ul.list-unstyled.project-list.structured-list(
select-all-list, select-all-list,
@ -118,17 +118,17 @@
) )
li.container-fluid li.container-fluid
.row .row
.col-md-6(ng-click="changePredicate('name')") .col-xs-6(ng-click="changePredicate('name')")
input.select-all( input.select-all(
select-all, select-all,
type="checkbox" type="checkbox"
) )
span.header.clickable Title span.header.clickable Title
i.tablesort.fa(ng-class="getSortIconClass('name')") i.tablesort.fa(ng-class="getSortIconClass('name')")
.col-md-2(ng-click="changePredicate('accessLevel')") .col-xs-2(ng-click="changePredicate('accessLevel')")
span.header.clickable Owner span.header.clickable Owner
i.tablesort.fa(ng-class="getSortIconClass('accessLevel')") i.tablesort.fa(ng-class="getSortIconClass('accessLevel')")
.col-md-4(ng-click="changePredicate('lastUpdated')") .col-xs-4(ng-click="changePredicate('lastUpdated')")
span.header.clickable Last Modified span.header.clickable Last Modified
i.tablesort.fa(ng-class="getSortIconClass('lastUpdated')") i.tablesort.fa(ng-class="getSortIconClass('lastUpdated')")
li.project_entry.container-fluid( li.project_entry.container-fluid(
@ -136,7 +136,7 @@
ng-controller="ProjectListItemController" ng-controller="ProjectListItemController"
) )
.row .row
.col-md-6 .col-xs-6
input.select-item( input.select-item(
select-individual, select-individual,
type="checkbox", type="checkbox",
@ -152,16 +152,16 @@
ng-repeat='tag in project.tags', ng-repeat='tag in project.tags',
ng-click="selectTag(tag)" ng-click="selectTag(tag)"
) {{tag.name}} ) {{tag.name}}
.col-md-2 .col-xs-2
span.owner {{ownerName()}} span.owner {{ownerName()}}
.col-md-4 .col-xs-4
span.last-modified {{project.lastUpdated | formatDate}} span.last-modified {{project.lastUpdated | formatDate}}
li( li(
ng-if="visibleProjects.length == 0", ng-if="visibleProjects.length == 0",
ng-cloak ng-cloak
) )
.row .row
.col-md-12.text-centered .col-xs-12.text-centered
small No projects small No projects
div.welcome.text-centered(ng-if="projects.length == 0", ng-cloak) div.welcome.text-centered(ng-if="projects.length == 0", ng-cloak)
h2 Welcome to ShareLaTeX! h2 Welcome to ShareLaTeX!

View file

@ -39,6 +39,8 @@ ul.folders-menu {
font-size: 0.9rem; font-size: 0.9rem;
color: #333; color: #333;
padding: (@line-height-computed / 4); padding: (@line-height-computed / 4);
display: inline-block;
line-height: 1.2;
} }
} }
li.active { li.active {
@ -69,7 +71,7 @@ ul.folders-menu {
position: relative; position: relative;
i { i {
position: absolute; position: absolute;
top: 7px; top: 5px;
left: 6px; left: 6px;
} }
span.name { span.name {