feature: improve styles and responsive design

CodeforNepal · Jun 3, 2020 · 1e312ea · 1e312ea
1 parent 10b78c3
commit 1e312ea
Show file tree

Hide file tree

Showing 10 changed files with 79 additions and 53 deletions.
diff --git a/parijat-frontend/package.json b/parijat-frontend/package.json
@@ -51,8 +51,10 @@
     "dom-scroll-into-view": "^2.0.1",
     "lodash": "^4.17.5",
     "preact": "^10.4.4",
+    "preact-feather": "^4.1.0",
     "preact-router": "^3.2.1",
     "prop-types": "^15.7.2",
+    "react-modal": "^3.11.2",
     "react-redux": "^7.2.0",
     "react-render-html": "^0.6.0",
     "redux": "^4.0.4",

diff --git a/parijat-frontend/src/components/filters/style.css b/parijat-frontend/src/components/filters/style.css
@@ -60,6 +60,7 @@
   width: 2rem;
   height: 2rem;
   line-height: 0rem;
+  cursor: pointer;
 }
 
 .FiltersList__Section {
@@ -83,14 +84,19 @@
   padding-left: 15px;
 }
 
-/* To swith to a button view when in small screens */
+/* To swith to a button view when in large screens */
 @media (min-width: 839px) {
   .Filters__Mobile {
     display: none;
     width: 100%;
   }
+
+  .Filters__Container {
+    width: 15rem;
+  }
 }
 
+/* To swith to a button view when in small screens */
 @media (max-width: 839px) {
   .Filters__Desktop {
     display: none;

diff --git a/parijat-frontend/src/components/react-autocomplete/index.js b/parijat-frontend/src/components/react-autocomplete/index.js
@@ -5,10 +5,10 @@
 // In long run, it is perhaps a good idea to deprecate its usage in favor of
 // actively maitained library.
 
-const React = require('preact/compat')
-const PropTypes = require('prop-types')
-const { findDOMNode } = require('preact/compat')
-const scrollIntoView = require('dom-scroll-into-view')
+import { h, Component } from 'preact';
+import { cloneElement, findDOMNode } from 'preact/compat';
+import scrollIntoView from 'dom-scroll-into-view';
+import PropTypes from 'prop-types';
 
 const IMPERATIVE_API = [
   'blur',
@@ -32,7 +32,7 @@ function getScrollOffset() {
   }
 }
 
-class Autocomplete extends React.Component {
+class Autocomplete extends Component {
 
   static propTypes = {
     /**
@@ -471,7 +471,7 @@ class Autocomplete extends React.Component {
         this.state.highlightedIndex === index,
         { cursor: 'default' }
       )
-      return React.cloneElement(element, {
+      return cloneElement(element, {
         onMouseEnter: this.props.isItemSelectable(item) ?
           () => this.highlightItemFromMouse(index) : null,
         onClick: this.props.isItemSelectable(item) ?
@@ -485,7 +485,7 @@ class Autocomplete extends React.Component {
       minWidth: this.state.menuWidth,
     }
     const menu = this.props.renderMenu(items, this.props.value, style)
-    return React.cloneElement(menu, {
+    return cloneElement(menu, {
       ref: e => this.refs.menu = e,
       // Ignore blur to prevent menu from de-rendering before we can process click
       onTouchStart: () => this.setIgnoreBlur(true),
@@ -608,4 +608,4 @@ class Autocomplete extends React.Component {
   }
 }
 
-module.exports = Autocomplete
+export default Autocomplete
diff --git a/parijat-frontend/src/components/resetfilters/index.js b/parijat-frontend/src/components/resetfilters/index.js
@@ -1,13 +1,11 @@
 import { h } from 'preact';
-import { X } from 'preact-feather';
+import { Trash2 } from 'preact-feather';
 import style from './style.css';
 
 export default ({ hasFilters, translate, resetFilters }) =>
 	hasFilters ? (
 		<span className={style.ResetFilters} onClick={resetFilters}>
-			<div>
-				<span>{translate('reset.clear_all')}</span>
-				<X className={style.ResetFilters__Icon} />
-			</div>
+			<Trash2 className={style.ResetFilters__Icon} />
+			<span>{translate('reset.clear_all')}</span>
 		</span>
 	) : null;
diff --git a/parijat-frontend/src/components/resetfilters/style.css b/parijat-frontend/src/components/resetfilters/style.css
@@ -4,12 +4,9 @@
   margin-bottom: 0.5rem;
   padding: 0.25rem;
   border: 1px solid grey;
-}
-
-.ResetFilters > div {
-  display: flex;
+  cursor: pointer;
 }
 
 .ResetFilters__Icon {
   cursor: pointer;
-}
+}
diff --git a/parijat-frontend/src/components/searchactions/style.css b/parijat-frontend/src/components/searchactions/style.css
@@ -1,5 +1,5 @@
 .SearchActions__Container {
-  margin: 0.5rem 0rem;
+  margin: 0.5rem 0.5rem;
   display: flex;
   align-items: right;
-}
+}
diff --git a/parijat-frontend/src/components/searchitem/style.css b/parijat-frontend/src/components/searchitem/style.css
@@ -1,7 +1,6 @@
 .SearchItem__Container {
   padding: 0.5rem 1rem;
-  margin-bottom: 1rem; 
-  width: 100%;
+  margin-bottom: 1rem;
   background: white;
 }
 
@@ -23,4 +22,4 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-}
+}
diff --git a/parijat-frontend/src/routes/search/index.js b/parijat-frontend/src/routes/search/index.js
@@ -66,35 +66,31 @@ export default class Search extends Component {
 						/>
 					</Header>
 					<ContentContainer>
-						<div>
+						<div className={style.Search__Container}>
+							<div className={style.Search__Actions}>
+								<SearchActions />
+							</div>
 							<div>
-								<div cols="3">
-									<div className={style.Search__Actions}>
-										<SearchActions />
-									</div>
-								</div>
-								<div cols="9">
-									<div className={style.Search__Context}>
-										<div>
-											<CurrentQuery />
-											<SelectedFilters itemComponent={SelectedFilter} />
-											<ResetFilters component={ResetFiltersComponent} />
-										</div>
-										<div>
-											<HitsStats />
-										</div>
+								<div className={style.Search__Context}>
+									<div>
+										<CurrentQuery />
+										<SelectedFilters itemComponent={SelectedFilter} />
+										<ResetFilters component={ResetFiltersComponent} />
 									</div>
-									<div className={style.Search__Body}>
-										<Hits
-											hitsPerPage={10}
-											highlightFields={['title', 'author', 'text']}
-											itemComponent={SearchItem}
-										/>
-										<Pagination />
-										<NoHits />
-										<InitialLoader component={Loading} />
+									<div>
+										<HitsStats />
 									</div>
 								</div>
+								<div className={style.Search__Body}>
+									<Hits
+										hitsPerPage={10}
+										highlightFields={['title', 'author', 'text']}
+										itemComponent={SearchItem}
+									/>
+									<Pagination />
+									<NoHits />
+									<InitialLoader component={Loading} />
+								</div>
 							</div>
 						</div>
 					</ContentContainer>

diff --git a/parijat-frontend/src/routes/search/style.css b/parijat-frontend/src/routes/search/style.css
@@ -1,15 +1,23 @@
 
 .Search__Container {
-
+  display: flex;
+  flex-direction: column;
 }
 
 .Search__Actions {
 
 }
 
 .Search__Context {
-  margin: 1rem 0rem;
+  margin: 1rem 0.5rem;
 }
 
 .Search__Body {
-}
+}
+
+/* To swith to a button view when in larger screens */
+@media (min-width: 839px) {
+  .Search__Container {
+    flex-direction: row;
+  }
+}
diff --git a/parijat-frontend/yarn.lock b/parijat-frontend/yarn.lock
@@ -5040,6 +5040,11 @@ execa@^1.0.0:
     signal-exit "^3.0.0"
     strip-eof "^1.0.0"
 
+exenv@^1.2.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
+  integrity sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=
+
 expand-brackets@^0.1.4:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
@@ -9730,6 +9735,11 @@ preact-cli@^3.0.0-rc.7:
     which "^1.2.14"
     workbox-webpack-plugin "^4.3.1"
 
+preact-feather@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/preact-feather/-/preact-feather-4.1.0.tgz#364acd508302f74446a946161a9497ae0d42cb5e"
+  integrity sha512-F4p3TgGhbsel9IVmOkTzRS89Vr57lM3PsHgzDgGgmpPxYC6CcqT/vXhldWfltspdrdkkNVGIoCS371SpAQbiVQ==
+
 preact-router@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/preact-router/-/preact-router-3.2.1.tgz#c7d12d8fc7a60bfbe5cadf23a234551bec783468"
@@ -10339,11 +10349,21 @@ react-is@^16.9.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-lifecycles-compat@^3.0.4:
+react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
+react-modal@^3.11.2:
+  version "3.11.2"
+  resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.11.2.tgz#bad911976d4add31aa30dba8a41d11e21c4ac8a4"
+  integrity sha512-o8gvvCOFaG1T7W6JUvsYjRjMVToLZgLIsi5kdhFIQCtHxDkA47LznX62j+l6YQkpXDbvQegsDyxe/+JJsFQN7w==
+  dependencies:
+    exenv "^1.2.0"
+    prop-types "^15.5.10"
+    react-lifecycles-compat "^3.0.0"
+    warning "^4.0.3"
+
 react-popper-tooltip@^2.8.3:
   version "2.10.1"
   resolved "https://registry.yarnpkg.com/react-popper-tooltip/-/react-popper-tooltip-2.10.1.tgz#e10875f31916297c694d64a677d6f8fa0a48b4d1"