From f3c47320cf5423e38bfe4b8736366bedf1684a5d Mon Sep 17 00:00:00 2001
From: Chrystal Griffiths <chrystal.griffiths@overleaf.com>
Date: Fri, 24 Aug 2018 15:23:12 +0100
Subject: [PATCH] Tidy up

---
 .../stylesheets/_ol_style_includes.less       |   1 +
 .../public/stylesheets/app/templates-v2.less  | 113 ++++++++++++++++++
 .../web/public/stylesheets/app/templates.less |  86 ++-----------
 3 files changed, 124 insertions(+), 76 deletions(-)
 create mode 100644 services/web/public/stylesheets/app/templates-v2.less

diff --git a/services/web/public/stylesheets/_ol_style_includes.less b/services/web/public/stylesheets/_ol_style_includes.less
index 70820f9b68..c55729976d 100644
--- a/services/web/public/stylesheets/_ol_style_includes.less
+++ b/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";
diff --git a/services/web/public/stylesheets/app/templates-v2.less b/services/web/public/stylesheets/app/templates-v2.less
new file mode 100644
index 0000000000..c9e826bb30
--- /dev/null
+++ b/services/web/public/stylesheets/app/templates-v2.less
@@ -0,0 +1,113 @@
+.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;
+    }
\ No newline at end of file
diff --git a/services/web/public/stylesheets/app/templates.less b/services/web/public/stylesheets/app/templates.less
index dbe5746c5c..d841d82cf7 100644
--- a/services/web/public/stylesheets/app/templates.less
+++ b/services/web/public/stylesheets/app/templates.less
@@ -1,38 +1,19 @@
-.template-title {
-	margin-bottom: 40px;
-}
-
-.field-title {
-	font-weight: bold;
-}
-
-.cta-links {
-	margin-top: 30px;
-
-	.cta-link {
-		display: inline;
+.template-page-header {
+	padding-top: unit(@line-height-base,rem);
+	h1, h2 {
+		margin-top: 6px;
+		margin-right: @line-height-base * 5;
+		line-height: 1;
 	}
-
-	.cta-link.btn {
-		margin: 0 10px;
-	}
-}
-
-.tag-link {
-	margin-right: 5px;
 }
 
 .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;
-
+		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);	
+	    -webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);
 		img {
 			width: 100%;
-			height: 100%;
 		}
 	}
 
@@ -42,38 +23,11 @@
 			color:@link-color;
 			margin: 10px 0px 10px 20px;
 		}
-		
-		display: flex;
-		justify-content: center;
-		align-items: center;
 	}
 
 	.caption {
-		text-align:center;
-
-		.description {
-			font-style: italic;
-			padding: 5px 0;
-		}
-
-	}
-
-	/* Media Queries */
-	@media (max-width: @screen-md-min) {
-		.thumbnail {
-			height: 400px;
-			width: 300px;
-			
-			margin: 5% auto;
-		}
-
-		img {
-			width: 90%;
-		}
-
-		.caption .description {
-			padding: 5px 50px;
-		}
+		background: lighten(@gray-lightest, 3%);
+		border-top: 1px solid #ddd;
 	}
 
 }
@@ -82,26 +36,6 @@
 	margin-top: 0px;
 }
 
-.section-preview {
-	margin-top: 40px;
-
-	.abstract {
-		padding: 0 10% 10% 0;
-
-		@media (max-width: @screen-md-min) {
-			padding: 5%;
-		}
-	}
-}
-
-.section-tags {
-	margin: 40px 0;
-}
-
-.section-find-more {
-	padding-left: 5%;
-}
-
 .download-buttons, .social_buttons {
 	padding-top: 20px;
 }