fix various styling issues

* Fixes header search bar in search and records search * Fixes community padding from header
inveniosoftware · Jun 2, 2020 · 9bde1a9 · 9bde1a9
1 parent 7af152b
commit 9bde1a9
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 11 deletions.
diff --git a/invenio_communities/assets/semantic-ui/js/invenio_communities/records_search.js b/invenio_communities/assets/semantic-ui/js/invenio_communities/records_search.js
@@ -1,11 +1,11 @@
 import ReactDOM from "react-dom";
 import React from "react";
-import { Card, Item, Button } from "semantic-ui-react";
+import { Card, Input, Item } from "semantic-ui-react";
 import _truncate from "lodash/truncate";
 import { SearchApp } from "../invenio_search_ui/SearchApp";
 import { overrideStore } from "react-overridable";
 
-export function ResultsItemTemplate({result, index}) {
+export function ResultsItemTemplate({ result, index }) {
   return (
     <Item key={index} href={`/records/${result.id}`}>
       <Item.Content>
@@ -20,7 +20,7 @@ export function ResultsItemTemplate({result, index}) {
   );
 }
 
-export function ResultsGridItemTemplate({result, index}) {
+export function ResultsGridItemTemplate({ result, index }) {
   return (
     <Card fluid key={index} href={`/records/${result.id}`}>
       <Card.Content>
@@ -42,7 +42,7 @@ const domContainer = document.getElementById("communities-records-search");
 const COMMUNITY_ID = domContainer.dataset.communityId;
 const searchConfig = {
   api: `/api/records?q=_communities.accepted.id:"${COMMUNITY_ID}"`,
-  mimetype: 'application/json',
+  mimetype: "application/json",
   aggs: [
     {
       title: "Access Right",
@@ -55,7 +55,7 @@ const searchConfig = {
       aggName: "resource_type",
     },
   ],
-  sort_options:[
+  sort_options: [
     {
       text: "Best match",
       sortBy: "bestmatch",
@@ -90,7 +90,44 @@ const searchConfig = {
   ],
 };
 
+// TODO: Remove after https://github.com/inveniosoftware/react-searchkit/issues/117
+// is addressed
+const CommunitiesRecordsSearchBarElement = ({
+  placeholder: passedPlaceholder,
+  queryString,
+  onInputChange,
+  executeSearch,
+}) => {
+  const placeholder = passedPlaceholder || "Search";
+  const onBtnSearchClick = () => {
+    executeSearch();
+  };
+  const onKeyPress = (event) => {
+    if (event.key === "Enter") {
+      executeSearch();
+    }
+  };
+  return (
+    <Input
+      action={{
+        icon: "search",
+        onClick: onBtnSearchClick,
+        color: "orange",
+        className: "invenio-theme-search-button",
+      }}
+      placeholder={placeholder}
+      onChange={(event, { value }) => {
+        onInputChange(value);
+      }}
+      value={queryString}
+      onKeyPress={onKeyPress}
+    />
+  );
+};
+
+overrideStore.add("SearchBar.element", CommunitiesRecordsSearchBarElement);
+
 ReactDOM.render(
-  <SearchApp config={searchConfig} appName={"communities-records-search"}/>,
+  <SearchApp config={searchConfig} appName={"communities-records-search"} />,
   document.getElementById("communities-records-search")
 );
diff --git a/invenio_communities/assets/semantic-ui/js/invenio_communities/search.js b/invenio_communities/assets/semantic-ui/js/invenio_communities/search.js
@@ -1,6 +1,6 @@
 import ReactDOM from "react-dom";
 import React from "react";
-import { Item, Card } from "semantic-ui-react";
+import { Input, Item, Card } from "semantic-ui-react";
 import _truncate from "lodash/truncate";
 import { SearchApp } from "../invenio_search_ui/SearchApp";
 import { overrideStore } from "react-overridable";
@@ -28,7 +28,7 @@ function ResultsItemTemplate({ result, index }) {
         <Item.Description>
           <div
             dangerouslySetInnerHTML={{ __html: result.metadata.description }}
-        />
+          />
         </Item.Description>
       </Item.Content>
     </Item>
@@ -87,6 +87,43 @@ const searchConfig = {
   ],
 };
 
+// TODO: Remove after https://github.com/inveniosoftware/react-searchkit/issues/117
+// is addressed
+const CommunitiesSearchBarElement = ({
+  placeholder: passedPlaceholder,
+  queryString,
+  onInputChange,
+  executeSearch,
+}) => {
+  const placeholder = passedPlaceholder || "Search";
+  const onBtnSearchClick = () => {
+    executeSearch();
+  };
+  const onKeyPress = (event) => {
+    if (event.key === "Enter") {
+      executeSearch();
+    }
+  };
+  return (
+    <Input
+      action={{
+        icon: "search",
+        onClick: onBtnSearchClick,
+        color: "orange",
+        className: "invenio-theme-search-button",
+      }}
+      placeholder={placeholder}
+      onChange={(event, { value }) => {
+        onInputChange(value);
+      }}
+      value={queryString}
+      onKeyPress={onKeyPress}
+    />
+  );
+};
+
+overrideStore.add("SearchBar.element", CommunitiesSearchBarElement);
+
 ReactDOM.render(
   <SearchApp config={searchConfig} appName={"communities-search"} />,
   document.getElementById("communities-search")

diff --git a/invenio_communities/assets/semantic-ui/scss/invenio_communities/theme.scss b/invenio_communities/assets/semantic-ui/scss/invenio_communities/theme.scss
@@ -1,7 +1,7 @@
 .community-container {
   background-color: rgb(219, 219, 219);
   margin-bottom: 20px;
-  margin-top: -20px;
+  margin-top: -28px;
 }
 
 .underline {

diff --git a/invenio_communities/templates/semantic-ui/invenio_communities/header.html b/invenio_communities/templates/semantic-ui/invenio_communities/header.html
@@ -14,7 +14,7 @@
 
 {% block sidebar %}
 <div class="community-container">
-  <div class="ui container top-padding grid ">
+  <div class="ui container top-padding grid">
     <div class="two wide column community-logo">
       <i aria-hidden="true" class="users massive icon"></i>
     </div>
@@ -53,7 +53,7 @@ <h1 class="ui header">{{ community.title }}</h1>
         <i class="plus icon"></i>
         New upload</a>
     </div>
-    <div class="ui top secondary pointing menu">
+    <div class="ui container top secondary pointing menu">
       <a class="item {{ 'active' if 'community_page' in request.endpoint else '' }}" href="{{ search }}">Search</a>
       <a class="item {{ 'active' if 'curation' in request.endpoint else '' }}" href="{{ curate }}">Curate
         ({{ pending_records }})</a>