Просмотр исходного кода

Make project list look better on a smaller screen

James Allen 12 лет назад
Родитель
Сommit
532ec5e756

+ 2 - 2
services/web/app/views/project/list.jade

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

+ 11 - 11
services/web/app/views/project/list/project-list.jade

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

+ 3 - 1
services/web/public/stylesheets/app/project-list.less

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