Merge pull request #1 from nicolols/dev

Dev
bibliocoder · Sep 27, 2020 · af7d30f · af7d30f
2 parents 7b2d1d5 + 3e9fab1
commit af7d30f
Show file tree

Hide file tree

Showing 4 changed files with 232 additions and 2 deletions.
diff --git a/OJS_3_search_redesigned.css b/OJS_3_search_redesigned.css
@@ -0,0 +1,47 @@
+@media (min-width:992px) {
+    .pkp_search_desktop .search_prompt_advanced {
+        display: inline-block;
+        position: relative;
+        padding: 10px 20px;
+        color: #fff;
+        cursor: pointer
+    }
+    .pkp_search_desktop .search_prompt_advanced:before {
+        font-size: 16px;
+        margin-right: 0.25em
+    }
+    .pkp_search_desktop .search_prompt_advanced:hover,
+    .pkp_search_desktop .search_prompt_advanced:focus {
+        outline: 0;
+        padding-bottom: 8px;
+        border-bottom: 2px solid #fff
+    }
+    .pkp_search_desktop.is_open .search_prompt_advanced {
+        padding-bottom: 9px;
+        background: #fff;
+        border-left: 1px solid #ddd;
+        border-bottom: 1px solid #ddd;
+        color: #007ab2
+    }
+    .pkp_search_desktop.is_open .search_prompt_advanced:hover,
+    .pkp_search_desktop.is_open .search_prompt_advanced:focus {
+        border-bottom-color: #007ab2
+    }
+    .pkp_search_desktop.is_searching input[type="text"] {
+        opacity: 0.5
+    }
+    .pkp_search_desktop.is_searching input[type="text"]:hover,
+    .pkp_search_desktop.is_searching input[type="text"]:focus {
+        border-color: #fff
+    }
+    .pkp_search_desktop.is_searching .search_prompt_advanced {
+        background: #fff;
+        border-left: 1px solid #ddd;
+        color: #007ab2
+    }
+    .pkp_search_desktop.is_searching .search_prompt_advanced:hover,
+    .pkp_search_desktop.is_searching .search_prompt_advanced:focus {
+        background: #fff;
+        color: #009de5
+    }
+}
diff --git a/README.md b/README.md
@@ -1,2 +1,25 @@
-# OJS-3-search-redesigned
-Improvement of the OJS 3 search by redesigning the search bar and results page
+# OJS 3 Search Redesigned
+Improvement of the OJS 3 search by redesigning the search bar and results page.
+
+## Features
+- The search bar now consists of a search icon (expandable) and an "Advanced Search" button next to it
+- The search results page does only show a "No Results" message when a search query was sent
+
+![Screenshot Demo OJS_3_search_redesigned](https://user-images.githubusercontent.com/71929510/94372569-2279cc00-00ff-11eb-82b6-592234113f0e.gif)
+
+This modification is solely based on adding template and CSS code.
+
+## Installation
+1. Copy modified **searchForm_simple.tpl** to `/templates/frontend/components/`
+
+2. Copy modified **search.tpl** to `/templates/frontend/pages/`
+
+3. Apply custom CSS file **OJS_3_search_redesigned.css** to your journal (Settings > Website > Appearance > Advanced > Journal style sheet > Upload .css file > Save)
+
+Tested with latest OJS 3.2.1-1, but these changes should also be applicable to OJS 3.x versions prior than that.
+
+## License
+This software is released under the the [GNU General Public License](LICENSE).
+
+See the file [LICENSE](LICENSE) included with this distribution for the terms
+of this license.
diff --git a/search.tpl b/search.tpl
@@ -0,0 +1,123 @@
+{**
+ * templates/frontend/pages/search.tpl
+ *
+ * Copyright (c) 2014-2020 Simon Fraser University
+ * Copyright (c) 2003-2020 John Willinsky
+ * Distributed under the GNU GPL v3. For full terms see the file docs/COPYING.
+ *
+ * @brief Display the page to search and view search results.
+ *
+ * @uses $query Value of the primary search query
+ * @uses $authors Value of the authors search filter
+ * @uses $dateFrom Value of the date from search filter (published after).
+ *  Value is a single string: YYYY-MM-DD HH:MM:SS
+ * @uses $dateTo Value of the date to search filter (published before).
+ *  Value is a single string: YYYY-MM-DD HH:MM:SS
+ * @uses $yearStart Earliest year that can be used in from/to filters
+ * @uses $yearEnd Latest year that can be used in from/to filters
+ *}
+{include file="frontend/components/header.tpl" pageTitle="common.search"}
+
+{if !$heading}
+	{assign var="heading" value="h2"}
+{/if}
+
+<div class="page page_search">
+
+	{include file="frontend/components/breadcrumbs.tpl" currentTitleKey="common.search"}
+	<h1>
+		{translate key="common.search"}
+	</h1>
+
+	{capture name="searchFormUrl"}{url op="search" escape=false}{/capture}
+	{$smarty.capture.searchFormUrl|parse_url:$smarty.const.PHP_URL_QUERY|parse_str:$formUrlParameters}
+	<form class="cmp_form" method="get" action="{$smarty.capture.searchFormUrl|strtok:"?"|escape}">
+		{foreach from=$formUrlParameters key=paramKey item=paramValue}
+			<input type="hidden" name="{$paramKey|escape}" value="{$paramValue|escape}"/>
+		{/foreach}
+
+		{* Repeat the label text just so that screen readers have a clear
+		   label/input relationship *}
+		<div class="search_input">
+			<label class="pkp_screen_reader" for="query">
+				{translate key="search.searchFor"}
+			</label>
+			{block name=searchQuery}
+				<input type="text" id="query" name="query" value="{$query|escape}" class="query" placeholder="{translate|escape key="common.search"}">
+			{/block}
+		</div>
+
+		<fieldset class="search_advanced">
+			<legend>
+				{translate key="search.advancedFilters"}
+			</legend>
+			<div class="date_range">
+				<div class="from">
+					<label class="label">
+						{translate key="search.dateFrom"}
+					</label>
+					{html_select_date prefix="dateFrom" time=$dateFrom start_year=$yearStart end_year=$yearEnd year_empty="" month_empty="" day_empty="" field_order="YMD"}
+				</div>
+				<div class="to">
+					<label class="label">
+						{translate key="search.dateTo"}
+					</label>
+					{html_select_date prefix="dateTo" time=$dateTo start_year=$yearStart end_year=$yearEnd year_empty="" month_empty="" day_empty="" field_order="YMD"}
+				</div>
+			</div>
+			<div class="author">
+				<label class="label" for="authors">
+					{translate key="search.author"}
+				</label>
+				{block name=searchAuthors}
+					<input type="text" for="authors" name="authors" value="{$authors|escape}">
+				{/block}
+			</div>
+			{call_hook name="Templates::Search::SearchResults::AdditionalFilters"}
+		</fieldset>
+
+		<div class="submit">
+			<button class="submit" type="submit">{translate key="common.search"}</button>
+		</div>
+	</form>
+
+	{call_hook name="Templates::Search::SearchResults::PreResults"}
+
+	{* Results pagination *}
+	{if !$results->wasEmpty()}
+		<div class="pkp_screen_reader">
+			{page_info iterator=$results}
+			{page_links anchor="results" iterator=$results name="search" query=$query searchJournal=$searchJournal authors=$authors title=$title abstract=$abstract galleyFullText=$galleyFullText discipline=$discipline subject=$subject type=$type coverage=$coverage indexTerms=$indexTerms dateFromMonth=$dateFromMonth dateFromDay=$dateFromDay dateFromYear=$dateFromYear dateToMonth=$dateToMonth dateToDay=$dateToDay dateToYear=$dateToYear orderBy=$orderBy orderDir=$orderDir}
+		</div>
+	{/if}
+
+	{* Search results, finally! *}
+	<div class="search_results">
+		{iterate from=results item=result}
+			{include file="frontend/objects/article_summary.tpl" article=$result.publishedSubmission journal=$result.journal showDatePublished=true hideGalleys=true}
+		{/iterate}
+	</div>
+
+	{* No results found *}
+	{if $results->wasEmpty()}
+		{if $query}
+			{if $error}
+				{include file="frontend/components/notification.tpl" type="error" message=$error|escape}
+			{else}
+				{include file="frontend/components/notification.tpl" type="notice" messageKey="search.noResults"}
+			{/if}
+		{/if}
+
+	{* Results pagination *}
+	{else}
+		<div class="cmp_pagination">
+			{page_info iterator=$results}
+			{page_links anchor="results" iterator=$results name="search" query=$query searchJournal=$searchJournal authors=$authors title=$title abstract=$abstract galleyFullText=$galleyFullText discipline=$discipline subject=$subject type=$type coverage=$coverage indexTerms=$indexTerms dateFromMonth=$dateFromMonth dateFromDay=$dateFromDay dateFromYear=$dateFromYear dateToMonth=$dateToMonth dateToDay=$dateToDay dateToYear=$dateToYear orderBy=$orderBy orderDir=$orderDir}
+		</div>
+	{/if}
+
+	{* Search Syntax Instructions *}
+	{block name=searchSyntaxInstructions}{/block}
+</div><!-- .page -->
+
+{include file="frontend/components/footer.tpl"}
diff --git a/searchForm_simple.tpl b/searchForm_simple.tpl
@@ -0,0 +1,37 @@
+{**
+ * templates/frontend/components/searchForm_simple.tpl
+ *
+ * Copyright (c) 2014-2020 Simon Fraser University
+ * Copyright (c) 2003-2020 John Willinsky
+ * Distributed under the GNU GPL v3. For full terms see the file docs/COPYING.
+ *
+ * @brief Simple display of a search form with just text input and search button
+ *
+ * @uses $searchQuery string Previously input search query
+ *}
+{if !$currentJournal || $currentJournal->getData('publishingMode') != $smarty.const.PUBLISHING_MODE_NONE}
+	{capture name="searchFormUrl"}{url page="search" op="search" escape=false}{/capture}
+	{$smarty.capture.searchFormUrl|parse_url:$smarty.const.PHP_URL_QUERY|parse_str:$formUrlParameters}
+	<form class="pkp_search {$className|escape}" action="{$smarty.capture.searchFormUrl|strtok:"?"|escape}" method="get" role="search" aria-label="{translate|escape key="submission.search"}">
+		{csrf}
+		{foreach from=$formUrlParameters key=paramKey item=paramValue}
+			<input type="hidden" name="{$paramKey|escape}" value="{$paramValue|escape}"/>
+		{/foreach}
+		{block name=searchQuerySimple}
+			<input name="query" value="{$searchQuery|escape}" type="text" aria-label="{translate|escape key="common.searchQuery"}">
+		{/block}
+
+		<button type="submit">
+			{translate key="common.search"}
+		</button>
+		<div class="search_controls" aria-hidden="true">
+			<a href="{url page="search" op="search"}" class="headerSearchPrompt search_prompt" aria-hidden="true">
+			</a>
+			<a href="#" class="search_cancel headerSearchCancel" aria-hidden="true"></a>
+			<span class="search_loading" aria-hidden="true"></span>
+		</div>
+		<div class="search_controls">
+  			<a href="{url page="search"}" class="search_prompt_advanced" aria-hidden="true">Advanced Search</a>
+		</div>
+	</form>
+{/if}