pkp/pkp-lib#4446 Improve appearance of category pages on the frontend

NateWr · Feb 7, 2019 · b9f1fd4 · b9f1fd4
1 parent 362857e
commit b9f1fd4
Show file tree

Hide file tree

Showing 7 changed files with 122 additions and 95 deletions.
diff --git a/locale/en_US/submission.xml b/locale/en_US/submission.xml
@@ -78,4 +78,8 @@
 
 	<message key="submission.metadataDescription">These specifications are based on the Dublin Core metadata set, an international standard used to describe journal content.</message>
 	<message key="section.any">Any Section</message>
+
+	<!-- categories -->
+	<message key="catalog.browseTitles">{$numTitles} Items</message>
+	<message key="catalog.category.heading">All Items</message>
 </locale>
diff --git a/plugins/themes/default/styles/index.less b/plugins/themes/default/styles/index.less
@@ -31,6 +31,7 @@
 @import "main.less";
 @import "pages/indexSite.less";
 @import "pages/indexJournal.less";
+@import "pages/category.less";
 @import "pages/contact.less";
 @import "pages/issueArchive.less";
 @import "pages/login.less";

diff --git a/plugins/themes/default/styles/objects/article_summary.less b/plugins/themes/default/styles/objects/article_summary.less
@@ -54,7 +54,17 @@
 	}
 
 	.galleys_links {
+		&:extend(.pkp_unstyled_list);
 		margin-top: @base;
+
+		li {
+			display: inline-block;
+			margin-right: 1em;
+
+			&:last-child {
+				margin-right: 0;
+			}
+		}
 	}
 
 	@media(min-width: @screen-tablet) {
@@ -73,12 +83,9 @@
 		.cover {
 			float: left;
 			width: 25%;
+			height: auto;
+			max-height: none;
 			margin-right: @double;
-
-			img {
-				height: auto;
-				max-height: none;
-			}
 		}
 	}
 
@@ -87,6 +94,10 @@
 		.cover {
 			margin-right: @triple;
 			margin-bottom: @triple;
+
+			img {
+				max-height: none;
+			}
 		}
 	}
 }
diff --git a/plugins/themes/default/styles/objects/issue_toc.less b/plugins/themes/default/styles/objects/issue_toc.less
@@ -18,17 +18,6 @@
 		line-height: @double - 2; // Adjust for border
 	}
 
-	.cover {
-		display: block;
-		margin-bottom: @double;
-
-		img {
-			display: block;
-			max-height: 250px;
-			width: auto;
-		}
-	}
-
 	.description {
 
 		> *:first-child {
@@ -56,23 +45,10 @@
 		}
 	}
 
-	.articles,
-	.galleys_links {
+	.articles {
 		&:extend(.pkp_unstyled_list);
 	}
 
-	.galleys_links {
-
-		li {
-			display: inline-block;
-			margin-right: 1em;
-
-			&:last-child {
-				margin-right: 0;
-			}
-		}
-	}
-
 	.sections:not(:first-child) {
 		margin-top: @triple * 2;
 	}
@@ -87,14 +63,6 @@
 			.pkp_helpers_clear;
 		}
 
-		.cover {
-			float: left;
-			width: 25%;
-			height: auto;
-			max-height: none;
-			margin-right: @double;
-		}
-
 		.galleys,
 		.section {
 			position: relative;
@@ -130,14 +98,5 @@
 		.section {
 			margin: @triple -@triple;
 		}
-
-		.cover {
-			margin-right: @triple;
-			margin-bottom: @triple;
-
-			img {
-				max-height: none;
-			}
-		}
 	}
 }
diff --git a/plugins/themes/default/styles/pages/category.less b/plugins/themes/default/styles/pages/category.less
@@ -0,0 +1,87 @@
+/**
+ * @file  plugins/themes/default/styles/pages/contact.less
+ *
+ * Copyright (c) 2014-2018 Simon Fraser University
+ * Copyright (c) 2003-2018 John Willinsky
+ * Distributed under the GNU GPL v2. For full terms see the file docs/COPYING.
+ *
+ * @brief Styles applying to the contact page
+ * @link templates/frontend/pages/contact.tpl
+ */
+.page_catalog_category {
+
+	.article_count {
+		float: right;
+		padding: @base 0;
+		font-size: @font-sml;
+		color: @text-light;
+	}
+
+	.about_section .cover {
+		float: right;
+		width: 20%;
+		margin-left: 10%;
+		margin-right: 10%;
+	}
+
+	.subcategories {
+
+		ul {
+			&:extend(.pkp_unstyled_list);
+		}
+
+		li {
+			padding-top: @half;
+			padding-bottom: @half;
+		}
+
+		a {
+			text-decoration: none;
+		}
+
+		@media(min-width: @screen-tablet) {
+			position: relative;
+			margin-top: @triple * 2;
+			margin-left: -@double;
+			margin-right: -@double;
+			padding: @triple;
+			border-top: @bg-border;
+			border-bottom: @bg-border;
+
+			h2 {
+				position: absolute;
+				top: -15px;
+				left: @double;
+				margin: 0;
+				padding-left: @base;
+				padding-right: @base;
+				line-height: @triple;
+				background: @bg;
+				color: @text-light;
+			}
+		}
+
+		@media(min-width: @screen-desktop) {
+			margin-left: -@triple;
+			margin-right: -@triple;
+		}
+	}
+
+	@media(min-width: @screen-tablet) {
+
+		.cmp_article_list {
+			padding-top: @double;
+		}
+
+		h2.title {
+			.pkp_screen_reader();
+		}
+	}
+
+	@media(min-width: @screen-desktop) {
+
+		.cmp_article_list {
+			padding-top: @triple;
+		}
+	}
+}
diff --git a/templates/frontend/components/articleList.tpl b/templates/frontend/components/articleList.tpl
diff --git a/templates/frontend/pages/catalogCategory.tpl b/templates/frontend/pages/catalogCategory.tpl
@@ -46,7 +46,7 @@
 	{if !$subcategories->wasEmpty()}
 	<nav class="subcategories" role="navigation">
 		<h2>
-			{translate key="catalog.subcategories"}
+			{translate key="catalog.category.subcategories"}
 		</h2>
 		<ul>
 			{iterate from=subcategories item=subcategory}
@@ -60,15 +60,21 @@
 	</nav>
 	{/if}
 
+	<h2 class="title">
+		{translate key="catalog.category.heading"}
+	</h2>
+
 	{* No published titles in this category *}
 	{if empty($publishedSubmissions)}
-		<h2>
-			{translate key="article.articles"}
-		</h2>
-		<p>{translate key="catalog.noTitlesSection"}</p>
-
+		<p>{translate key="catalog.category.noItems"}</p>
 	{else}
-		{include file="frontend/components/articleList.tpl" articles=$publishedSubmissions titleKey="article.articles"}
+		<ul class="cmp_article_list articles">
+			{foreach from=$publishedSubmissions item=article}
+				<li>
+					{include file="frontend/objects/article_summary.tpl"}
+				</li>
+			{/foreach}
+		</ul>
 
 		{* Pagination *}
 		{if $prevPage > 1}