Merge pull request #837 from sharelatex/cmg-gallery-improvements

Improve styling of the v2 gallery pages

services/web/public/stylesheets/_ol_style_includes.less

@@ -1,3 +1,4 @@
 @import "app/sidebar-v2-dash-pane.less";
 @import "app/front-chat-widget.less";
 @import "app/ol-chat.less";
+@import "app/templates-v2.less";

services/web/public/stylesheets/app/templates-v2.less

@@ -0,0 +1,118 @@
+.template-title {
+	margin-bottom: @margin-xl;
+}
+
+.field-title {
+	font-weight: bold;
+}
+
+.filters {
+	float: right;
+	margin-bottom: @margin-lg;
+
+	@media (max-width: @screen-md-min) {
+		float: none;
+	}
+}
+
+.cta-links {
+	margin-top: @margin-lg;
+
+	.cta-link.btn {
+		margin: 0 @margin-sm;
+	}
+}
+
+.tag-link {
+	margin-right: @margin-xs;
+}
+
+.template-thumbnail {
+
+	.thumbnail {
+		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+		-webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);
+		height: 465px;
+		margin: 5% 0;
+
+		&.thumbnail-tag {
+			height: 100px;
+		}
+
+		img {
+			width: 100%;
+			height: 100%;
+		}
+	}
+
+	a {
+		padding:0px;
+		h3 {
+			color:@link-color;
+			margin: 10px 0px 10px 20px;
+		}
+
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.caption {
+        // Override ShareLatex template styles
+        background: none;
+        border: none;
+
+		text-align: center;
+
+		.description {
+			font-style: italic;
+			padding: 5px 0;
+			text-overflow: ellipsis;
+			overflow: hidden;
+			white-space: nowrap;
+		}
+
+	}
+
+	/* Media Queries */
+	@media (max-width: @screen-md-min) {
+		.thumbnail {
+			height: 400px;
+			width: 300px;
+
+			margin: 5% auto;
+		}
+
+		img {
+			width: 90%;
+		}
+
+		.caption .description {
+			padding: 5px 50px;
+		}
+	}
+
+}
+
+    .section-preview {
+        margin-top: @margin-xl;
+
+        .abstract {
+            padding-right:10%;
+            padding-bottom: 10%;
+
+            @media (max-width: @screen-md-min) {
+                padding: 5%;
+            }
+        }
+    }
+
+    .section-tags {
+		margin-bottom: @margin-xl;
+		margin-top: @margin-xl;
+	}
+
+	.template-large-pdf-preview {
+		border: solid 1px @gray-lightest;
+		margin-bottom: 30px;
+	}

services/web/public/stylesheets/app/templates.less

@@ -36,8 +36,6 @@
 	margin-top: 0px;
 }
 
-
-
 .download-buttons, .social_buttons {
 	padding-top: 20px;
 }
@@ -59,7 +57,7 @@
 		color:@link-color;
 	}
 	img {
-		max-width: 100%;    
+		max-width: 100%;
 		height: auto;
 	}
 }