Merge pull request #17 from uclibs/16/upgrade-ojs-3.3

Update theme for ojs 3.3.x

styles/head.less

@@ -38,6 +38,9 @@ header {
 
 .pkp_search input[type="text"] {
   border-radius: 6px;
+  position: absolute;
+  top: 12px;
+  right: 2px;
 }
 
 .pkp_structure_head {

styles/index.less

@@ -19,3 +19,4 @@
  @import "head.less";
  @import "footer.less";
  @import "indexSite.less";
+ @import "search-form.less";

styles/search-form.less

@@ -0,0 +1,247 @@
+.pkp_search {
+	position: relative;
+	display: block;
+	padding: @base 0;
+	font-size: @font-sml;
+	line-height: @double;
+	text-align: left;
+
+	input[type="text"] {
+		&:extend(.cmp_form input[type="text"]);
+		position: unset;
+		line-height: 34px;
+		height: 34px;
+		padding-right: 120px;
+	}
+
+	button[type="submit"] {
+		&:extend(.cmp_button);
+		position: absolute;
+		top: @base + 2px;
+		right: 2px;
+	}
+
+	.search_controls {
+		display: none;
+		position: relative;
+
+		a {
+			text-decoration: none;
+		}
+	}
+
+	.search_prompt {
+		transition: background-color 0.4s;
+
+		// Needs to be defined outside of a media query or the font doesn't
+		// load
+		&:before {
+			.fa();
+			content: @fa-var-search;
+			line-height: 18px;
+		}
+	}
+
+	.search_cancel,
+	.search_loading {
+		display: none;
+		position: absolute;
+		top: @base - 2;
+		right: 100%;
+		margin-right: @double;
+		text-align: center;
+		color: @text-light;
+	}
+
+	.search_cancel {
+		width: 25px;
+
+		&:before {
+			.fa();
+			content: @fa-var-times;
+			width: @double;
+			height: @double;
+			line-height: @double;
+		}
+
+		&:hover,
+		&:focus {
+			outline: none;
+			border-radius: 50%;
+			background: @no;
+			color: #fff;
+		}
+	}
+
+	.search_loading {
+		.pkp_spinner;
+		display: none;
+	}
+}
+
+.pkp_search_mobile {
+	margin-top: 1rem;
+	padding-bottom: 0;
+	border-top: 1px solid rgba(255, 255, 255, 0.1);
+
+	.search_controls {
+		display: none;
+	}
+}
+
+.pkp_search_desktop {
+	display: none;
+	float: right;
+	padding: @half 0;
+	font-size: @font-sml;
+	line-height: @double;
+	text-align: center;
+}
+
+@media (min-width: @screen-phone) {
+	.pkp_search {
+		input[type="text"] {
+			line-height: 30px;
+			height: 30px;
+		}
+
+		button[type="submit"] {
+			position: relative;
+			top: auto;
+			right: auto;
+		}
+	}
+}
+
+@media (min-width: @screen-desktop) {
+	.pkp_search_mobile {
+		display: none;
+	}
+
+	.pkp_search_desktop {
+		display: block;
+		position: absolute;
+		top: 0;
+		right: 0;
+		height: @quadruple;
+		min-width: 100px;
+		padding: 0;
+		font-size: @font-base;
+		line-height: @line-base;
+		transition: min-width 0.4s;
+		text-align: right;
+		overflow-x: hidden;
+
+		button {
+			position: absolute;
+			top: 0;
+			left: -9999px;
+		}
+
+		input[type="text"] {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 0;
+			padding: 0;
+			border: none;
+		}
+
+		.search_controls {
+			display: inline-block;
+		}
+
+		.search_prompt {
+			display: inline-block;
+			position: relative;
+			padding: @pkp_nav_primary_row_el_padding @double;
+			color: @text-bg-base;
+			cursor: pointer;
+
+			&:before {
+				font-size: @font-bump;
+				margin-right: 0.25em;
+			}
+
+			&:hover,
+			&:focus {
+				outline: 0;
+				padding-bottom: @pkp_nav_primary_row_el_padding - 2;
+				border-bottom: 2px solid @text-bg-base;
+			}
+		}
+
+		&.is_open {
+			min-width: 100%;
+			background: @bg;
+
+			input[type="text"] {
+				width: 100%;
+				max-width: 100%;
+				line-height: @quadruple;
+				height: @quadruple;
+				top: 0;
+				left: 0;
+				padding-left: 0.5em;
+				padding-right: 180px; // try to stop before the search button, but this can change with different translations
+				border: none;
+				border-bottom: @bg-border;
+				font-size: @font-bump;
+				background: @bg;
+
+				&:hover,
+				&:focus {
+					outline: 0;
+				}
+			}
+
+			.search_cancel {
+				display: block;
+			}
+
+			.search_prompt {
+				padding-bottom: @pkp_nav_primary_row_el_padding - 1;
+				background: @bg;
+				border-left: @bg-border;
+				border-bottom: 1px solid #ddd;
+				color: @primary;
+
+				&:hover,
+				&:focus {
+					border-bottom-color: @primary;
+				}
+			}
+		}
+
+		&.is_searching {
+			input[type="text"] {
+				opacity: 0.5;
+
+				&:hover,
+				&:focus {
+					border-color: @bg;
+				}
+			}
+
+			.search_prompt {
+				background: @bg;
+				border-left: @bg-border;
+				color: @primary;
+
+				&:hover,
+				&:focus {
+					background: @bg;
+					color: @primary-lift;
+				}
+			}
+
+			.search_cancel {
+				display: none;
+			}
+
+			.search_loading {
+				display: block;
+			}
+		}
+	}
+}

templates/frontend/components/searchForm_simple.tpl

@@ -22,7 +22,7 @@
 			<input name="query" value="{$searchQuery|escape}" type="text" aria-label="{translate|escape key="common.searchQuery"}">
 		{/block}
 
-		<button type="submit" class="magnify-search-button">
+		<button type="submit" class="magnify-search-button" alt-text="magnifying glass icon">
 		</button>
 		<div class="search_controls" aria-hidden="true">
 			<a href="{url page="search" op="search"}" class="headerSearchPrompt search_prompt" aria-hidden="true">

templates/frontend/pages/indexSite.tpl

@@ -10,21 +10,21 @@
  *
  *}
 {include file="frontend/components/header.tpl"}
-{assign var=journalsArray value=$journals->toArray()}
+{assign var='journalsArray' value=$journals}
 
 <div class="page_index_site row">
 
 	{if $about}
 		<div class="about_site">
-			{$about|nl2br}
+			{$about}
 		</div>
 	{/if}
 <hr class="red-hr">
 	<div class="journals col">
 		<h1>
       Journals
 		</h1>
-		{if $journals->wasEmpty()}
+{if !$journals|@count}
 			{translate key="site.noJournals"}
 		{else}
 			<ul>
@@ -79,7 +79,7 @@
 		<h1>
        Proceedings
 		</h1>
-		{if $journals->wasEmpty()}
+		{if !$journals|@count}
 			{translate key="site.noJournals"}
 		{else}
 			<ul>