Testing some view changes. Smaller font, bigger icons.

src/_h5ai/client/css/inc/view-details.less

@@ -12,6 +12,7 @@
 			a, a:active, a:visited {
 				border-top: 1px solid @item-border-col-sep;
 				border-bottom: 1px solid @item-border-col-sep;
+				height: @small-icon-size + 6px;
 
 				&:hover, &.hover {
 					border-color: @item-border-col-hover;
@@ -19,8 +20,11 @@
 			}
 
 			// needs to be here, to not conflict with header fields
-			.icon, .label, .date, .size {
+			.icon {
-				padding: 8px 6px;
+				padding: 8px;
+			}
+			.label, .date, .size {
+				padding: ((@small-icon-size - 16px)/2) 8px;
 			}
 		}
 
@@ -31,16 +35,21 @@
 			}
 		}
 
-		.icon.small {
+		.icon.square {
 			display: inline-block;
 			position: absolute;
 			left: 0;
-			top: -2px;
+			top: -5px;
-			width: 16px;
+			width: @small-icon-size;
+
+			img {
+				width: @small-icon-size;
+				height: @small-icon-size;
+			}
 		}
 
 		.label {
-			margin: 0 270px 0 24px;
+			margin: 0 230px 0 (@small-icon-size + 8px);
 		}
 
 		.date {

src/_h5ai/client/css/inc/view-grid.less

@@ -9,29 +9,40 @@
 			a, a:active, a:visited {
 				float: left;
 				margin: 2px;
-				padding: 8px;
+				width: 218px;
-				width: 164px;
+				height: @small-icon-size + 6px;
-				height: 24px;
 				border: 1px solid rgba(0,0,0,0);
 
 				&:hover, &.hover {
 					border-color: @item-border-col-hover;
 				}
 			}
+
+			// needs to be here, to not conflict with header fields
+			.icon {
+				padding: 8px;
+			}
+			.label, .date, .size {
+				padding: ((@small-icon-size - 16px)/2) 8px;
+			}
 		}
 
-		.icon.small {
+		.icon.square {
 			display: inline-block;
 			position: absolute;
-			left: 11px;
+			left: 0;
-			top: 9px;
+			top: -2px;
-			width: 16px;
+			width: @small-icon-size;
+
+			img {
+				width: @small-icon-size;
+				height: @small-icon-size;
+			}
 		}
 
 		.label {
 			display: block;
-			max-width: 140px;
+			margin: 0 0 0 (@small-icon-size + 8px);
-			margin: 0 0 0 24px;
 		}
 
 		.date, .size {

src/_h5ai/client/css/inc/view-icons.less

@@ -11,8 +11,8 @@
 				float: left;
 				margin: 8px;
 				padding: 8px;
-				width: 100px;
+				width: @big-icon-size * 2;
-				height: 120px;
+				height: @big-icon-size + 72px;
 				border: 1px solid rgba(0,0,0,0);
 
 				&:hover, &.hover {
@@ -21,9 +21,9 @@
 			}
 		}
 
-		.icon.big {
+		.icon.rational {
 			display: block;
-			height: 48px;
+			height: @big-icon-size;
 			margin-bottom: 6px;
 		}
 

src/_h5ai/client/css/inc/view-list.less

@@ -12,7 +12,7 @@
 			a, a:active, a:visited {
 				border-top: 1px solid @item-border-col-sep;
 				border-bottom: 1px solid @item-border-col-sep;
-				height: 60px;
+				height: @big-icon-size + 6px;
 
 				&:hover, &.hover {
 					border-color: @item-border-col-hover;
@@ -21,10 +21,10 @@
 
 			// needs to be here, to not conflict with header fields
 			.icon {
-				padding: 8px 6px;
+				padding: 8px;
 			}
 			.label, .date, .size {
-				padding: 18px 6px;
+				padding: ((@big-icon-size - 16px)/2) 8px;
 			}
 		}
 
@@ -35,16 +35,21 @@
 			}
 		}
 
-		.icon.big {
+		.icon.square {
 			display: inline-block;
 			position: absolute;
 			left: 0;
-			top: -2px;
+			top: -5px;
-			width: 100px;
+			width: @big-icon-size;
+
+			img {
+				width: @big-icon-size;
+				height: @big-icon-size;
+			}
 		}
 
 		.label {
-			margin: 0 270px 0 110px;
+			margin: 0 230px 0 (@big-icon-size + 8px);
 		}
 
 		.date {

src/_h5ai/client/css/inc/view.less

@@ -56,6 +56,12 @@
 @item-background-col-sel: rgba(0,0,0,0.02);
 @item-border-col-sel: @col-border-strong;
 
+@small-icon-size: 32px;
+// @small-icon-size: 16px;
+@big-icon-size: 48px;
+// @big-icon-size: 64px;
+// @big-icon-size: 80px;
+// @big-icon-size: 96px;
 
 
 #view {
@@ -109,6 +115,7 @@
 		}
 
 		&.item {
+			font-size: 15px;
 
 			a, a:active, a:visited {
 				display: block;
@@ -164,6 +171,7 @@
 			text-align: center;
 
 			img {
+				vertical-align: top;
 
 				&.thumb {
 					box-shadow: 0 0 0 1px #ddd;
@@ -173,17 +181,32 @@
 			&.small {
 
 				img {
-					max-width: 16px;
+					max-width: @small-icon-size * 2;
-					max-height: 16px;
+					max-height: @small-icon-size;
 				}
 			}
 
 			&.big {
 
 				img {
-					max-width: 100px;
+					max-width: @big-icon-size * 2;
-					max-height: 48px;
+					max-height: @big-icon-size;
-					vertical-align: top;
+				}
+			}
+
+			&.square {
+
+				img {
+					max-width: @big-icon-size;
+					max-height: @big-icon-size;
+				}
+			}
+
+			&.rational {
+
+				img {
+					max-width: @big-icon-size * 2;
+					max-height: @big-icon-size;
 				}
 			}
 		}
@@ -192,11 +215,12 @@
 			display: block;
 			overflow: hidden;
 			text-align: left;
+			text-overflow: ellipsis;
 		}
 
 		.date {
 			text-align: right;
-			width: 160px;
+			width: 130px;
 		}
 
 		.size {