Issue 763 remove library (#774)
* Issue-#763: Add search icon * Issue-#763: Remove material-ui icon library * Issue-#763: Remove @material-ui/lab library * Issue-#763: Add custom search box * Issue-#763: Remove Mui list * Issue-#763: Remove Mui usage from SearchClient * Issue-#763: Remove Mui components from SearchResultElement * Issue-#763: Remove material-ui dependency from package.json * Issue-#763: Remove double scroll bar * Issue-#763: Refactor css * Issue-#763: Rename file * Issue-#763: Refactor searchButton style in HeaderHome * Issue-#763: Use simplified search logo * Issue-#763: Refactor search result element * Issue-#763: Refactor box style * Issue-#763: Refactor SerachClient * Issue-#763: Refactor SerachClient and SearchComponent styles * Issue-#763: Refactor SearchComponent.module.scss * Trigger rebuild
This commit is contained in:
Akshay
GitHub
parent
94df61ccef
commit
ec4167c67f
|
|
@ -3142,11 +3142,6 @@
|
|||
"to-fast-properties": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"@emotion/hash": {
|
||||
"version": "0.8.0",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
|
||||
"integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
|
||||
},
|
||||
"@endemolshinegroup/cosmiconfig-typescript-loader": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@endemolshinegroup/cosmiconfig-typescript-loader/-/cosmiconfig-typescript-loader-3.0.2.tgz",
|
||||
|
|
@ -4137,108 +4132,6 @@
|
|||
"unist-util-visit": "^1.3.0"
|
||||
}
|
||||
},
|
||||
"@material-ui/core": {
|
||||
"version": "4.12.3",
|
||||
"resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.12.3.tgz",
|
||||
"integrity": "sha512-sdpgI/PL56QVsEJldwEe4FFaFTLUqN+rd7sSZiRCdx2E/C7z5yK0y/khAWVBH24tXwto7I1hCzNWfJGZIYJKnw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.4.4",
|
||||
"@material-ui/styles": "^4.11.4",
|
||||
"@material-ui/system": "^4.12.1",
|
||||
"@material-ui/types": "5.1.0",
|
||||
"@material-ui/utils": "^4.11.2",
|
||||
"@types/react-transition-group": "^4.2.0",
|
||||
"clsx": "^1.0.4",
|
||||
"hoist-non-react-statics": "^3.3.2",
|
||||
"popper.js": "1.16.1-lts",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-is": "^16.8.0 || ^17.0.0",
|
||||
"react-transition-group": "^4.4.0"
|
||||
}
|
||||
},
|
||||
"@material-ui/icons": {
|
||||
"version": "4.11.2",
|
||||
"resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.2.tgz",
|
||||
"integrity": "sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.4.4"
|
||||
}
|
||||
},
|
||||
"@material-ui/lab": {
|
||||
"version": "4.0.0-alpha.60",
|
||||
"resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.60.tgz",
|
||||
"integrity": "sha512-fadlYsPJF+0fx2lRuyqAuJj7hAS1tLDdIEEdov5jlrpb5pp4b+mRDUqQTUxi4inRZHS1bEXpU8QWUhO6xX88aA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.4.4",
|
||||
"@material-ui/utils": "^4.11.2",
|
||||
"clsx": "^1.0.4",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-is": "^16.8.0 || ^17.0.0"
|
||||
}
|
||||
},
|
||||
"@material-ui/styles": {
|
||||
"version": "4.11.4",
|
||||
"resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.4.tgz",
|
||||
"integrity": "sha512-KNTIZcnj/zprG5LW0Sao7zw+yG3O35pviHzejMdcSGCdWbiO8qzRgOYL8JAxAsWBKOKYwVZxXtHWaB5T2Kvxew==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.4.4",
|
||||
"@emotion/hash": "^0.8.0",
|
||||
"@material-ui/types": "5.1.0",
|
||||
"@material-ui/utils": "^4.11.2",
|
||||
"clsx": "^1.0.4",
|
||||
"csstype": "^2.5.2",
|
||||
"hoist-non-react-statics": "^3.3.2",
|
||||
"jss": "^10.5.1",
|
||||
"jss-plugin-camel-case": "^10.5.1",
|
||||
"jss-plugin-default-unit": "^10.5.1",
|
||||
"jss-plugin-global": "^10.5.1",
|
||||
"jss-plugin-nested": "^10.5.1",
|
||||
"jss-plugin-props-sort": "^10.5.1",
|
||||
"jss-plugin-rule-value-function": "^10.5.1",
|
||||
"jss-plugin-vendor-prefixer": "^10.5.1",
|
||||
"prop-types": "^15.7.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"csstype": {
|
||||
"version": "2.6.17",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.17.tgz",
|
||||
"integrity": "sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"@material-ui/system": {
|
||||
"version": "4.12.1",
|
||||
"resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.12.1.tgz",
|
||||
"integrity": "sha512-lUdzs4q9kEXZGhbN7BptyiS1rLNHe6kG9o8Y307HCvF4sQxbCgpL2qi+gUk+yI8a2DNk48gISEQxoxpgph0xIw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.4.4",
|
||||
"@material-ui/utils": "^4.11.2",
|
||||
"csstype": "^2.5.2",
|
||||
"prop-types": "^15.7.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"csstype": {
|
||||
"version": "2.6.17",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.17.tgz",
|
||||
"integrity": "sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"@material-ui/types": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz",
|
||||
"integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A=="
|
||||
},
|
||||
"@material-ui/utils": {
|
||||
"version": "4.11.2",
|
||||
"resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.2.tgz",
|
||||
"integrity": "sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.4.4",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-is": "^16.8.0 || ^17.0.0"
|
||||
}
|
||||
},
|
||||
"@mdx-js/util": {
|
||||
"version": "2.0.0-next.8",
|
||||
"resolved": "https://registry.npmjs.org/@mdx-js/util/-/util-2.0.0-next.8.tgz",
|
||||
|
|
@ -4838,14 +4731,6 @@
|
|||
"csstype": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"@types/react-transition-group": {
|
||||
"version": "4.4.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.2.tgz",
|
||||
"integrity": "sha512-KibDWL6nshuOJ0fu8ll7QnV/LVTo3PzQ9aCPnRUYPfX7eZohHwLIdNHj7pftanREzHNP4/nJa8oeM73uSiavMQ==",
|
||||
"requires": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"@types/readable-stream": {
|
||||
"version": "2.3.9",
|
||||
"resolved": "https://registry.npmjs.org/@types/readable-stream/-/readable-stream-2.3.9.tgz",
|
||||
|
|
@ -7571,11 +7456,6 @@
|
|||
"mimic-response": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"clsx": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
|
||||
"integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
|
||||
},
|
||||
"coa": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz",
|
||||
|
|
@ -8339,15 +8219,6 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"css-vendor": {
|
||||
"version": "2.0.8",
|
||||
"resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz",
|
||||
"integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.8.3",
|
||||
"is-in-browser": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"css-what": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/css-what/-/css-what-3.2.1.tgz",
|
||||
|
|
@ -9089,15 +8960,6 @@
|
|||
"utila": "~0.4"
|
||||
}
|
||||
},
|
||||
"dom-helpers": {
|
||||
"version": "5.2.1",
|
||||
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
|
||||
"integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.8.7",
|
||||
"csstype": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"dom-serializer": {
|
||||
"version": "0.2.2",
|
||||
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
|
||||
|
|
@ -15840,11 +15702,6 @@
|
|||
"integrity": "sha512-8yKEWNX4z2YsofXAMT7KvA1g8p+GxtB1ffV8XtpAEGuXNAbCV5wdNKH+qTpw8SM9fh4aMPDR+yQuKfgnreyZlg==",
|
||||
"dev": true
|
||||
},
|
||||
"hyphenate-style-name": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
|
||||
"integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
|
||||
},
|
||||
"iconv-lite": {
|
||||
"version": "0.4.24",
|
||||
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
|
||||
|
|
@ -16489,11 +16346,6 @@
|
|||
"resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz",
|
||||
"integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw=="
|
||||
},
|
||||
"is-in-browser": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
|
||||
"integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU="
|
||||
},
|
||||
"is-installed-globally": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.4.0.tgz",
|
||||
|
|
@ -17063,84 +16915,6 @@
|
|||
"verror": "1.10.0"
|
||||
}
|
||||
},
|
||||
"jss": {
|
||||
"version": "10.7.1",
|
||||
"resolved": "https://registry.npmjs.org/jss/-/jss-10.7.1.tgz",
|
||||
"integrity": "sha512-5QN8JSVZR6cxpZNeGfzIjqPEP+ZJwJJfZbXmeABNdxiExyO+eJJDy6WDtqTf8SDKnbL5kZllEpAP71E/Lt7PXg==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"csstype": "^3.0.2",
|
||||
"is-in-browser": "^1.1.3",
|
||||
"tiny-warning": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"jss-plugin-camel-case": {
|
||||
"version": "10.7.1",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.7.1.tgz",
|
||||
"integrity": "sha512-+ioIyWvmAfgDCWXsQcW1NMnLBvRinOVFkSYJUgewQ6TynOcSj5F1bSU23B7z0p1iqK0PPHIU62xY1iNJD33WGA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"hyphenate-style-name": "^1.0.3",
|
||||
"jss": "10.7.1"
|
||||
}
|
||||
},
|
||||
"jss-plugin-default-unit": {
|
||||
"version": "10.7.1",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.7.1.tgz",
|
||||
"integrity": "sha512-tW+dfYVNARBQb/ONzBwd8uyImigyzMiAEDai+AbH5rcHg5h3TtqhAkxx06iuZiT/dZUiFdSKlbe3q9jZGAPIwA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"jss": "10.7.1"
|
||||
}
|
||||
},
|
||||
"jss-plugin-global": {
|
||||
"version": "10.7.1",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.7.1.tgz",
|
||||
"integrity": "sha512-FbxCnu44IkK/bw8X3CwZKmcAnJqjAb9LujlAc/aP0bMSdVa3/MugKQRyeQSu00uGL44feJJDoeXXiHOakBr/Zw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"jss": "10.7.1"
|
||||
}
|
||||
},
|
||||
"jss-plugin-nested": {
|
||||
"version": "10.7.1",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.7.1.tgz",
|
||||
"integrity": "sha512-RNbICk7FlYKaJyv9tkMl7s6FFfeLA3ubNIFKvPqaWtADK0KUaPsPXVYBkAu4x1ItgsWx67xvReMrkcKA0jSXfA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"jss": "10.7.1",
|
||||
"tiny-warning": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"jss-plugin-props-sort": {
|
||||
"version": "10.7.1",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.7.1.tgz",
|
||||
"integrity": "sha512-eyd5FhA+J0QrpqXxO7YNF/HMSXXl4pB0EmUdY4vSJI4QG22F59vQ6AHtP6fSwhmBdQ98Qd9gjfO+RMxcE39P1A==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"jss": "10.7.1"
|
||||
}
|
||||
},
|
||||
"jss-plugin-rule-value-function": {
|
||||
"version": "10.7.1",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.7.1.tgz",
|
||||
"integrity": "sha512-fGAAImlbaHD3fXAHI3ooX6aRESOl5iBt3LjpVjxs9II5u9tzam7pqFUmgTcrip9VpRqYHn8J3gA7kCtm8xKwHg==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"jss": "10.7.1",
|
||||
"tiny-warning": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"jss-plugin-vendor-prefixer": {
|
||||
"version": "10.7.1",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.7.1.tgz",
|
||||
"integrity": "sha512-1UHFmBn7hZNsHXTkLLOL8abRl8vi+D1EVzWD4WmLFj55vawHZfnH1oEz6TUf5Y61XHv0smdHabdXds6BgOXe3A==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"css-vendor": "^2.0.8",
|
||||
"jss": "10.7.1"
|
||||
}
|
||||
},
|
||||
"jsx-ast-utils": {
|
||||
"version": "2.2.3",
|
||||
"resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.2.3.tgz",
|
||||
|
|
@ -20155,11 +19929,6 @@
|
|||
"ts-pnp": "^1.1.6"
|
||||
}
|
||||
},
|
||||
"popper.js": {
|
||||
"version": "1.16.1-lts",
|
||||
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz",
|
||||
"integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA=="
|
||||
},
|
||||
"portfinder": {
|
||||
"version": "1.0.28",
|
||||
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
|
||||
|
|
@ -24617,11 +24386,6 @@
|
|||
"resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
|
||||
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
|
||||
},
|
||||
"tiny-warning": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
|
||||
"integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
|
||||
},
|
||||
"tinycolor2": {
|
||||
"version": "1.4.2",
|
||||
"resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz",
|
||||
|
|
|
|||
|
|
@ -16,9 +16,6 @@
|
|||
"test": "npm run lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@material-ui/core": "^4.12.3",
|
||||
"@material-ui/icons": "^4.11.2",
|
||||
"@material-ui/lab": "^4.0.0-alpha.60",
|
||||
"@oceanprotocol/art": "^3.2.0",
|
||||
"axios": "^0.24.0",
|
||||
"classnames": "^2.3.1",
|
||||
|
|
|
|||
|
|
@ -48,7 +48,9 @@ const Header = () => (
|
|||
{node.title}
|
||||
</Link>
|
||||
))}
|
||||
<SearchButton />
|
||||
<div className={styles.section}>
|
||||
<SearchButton />
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -26,11 +26,9 @@ const HeaderHome = () => (
|
|||
<Logo className={styles.headerLogo} />
|
||||
<h1 className={styles.headerTitle}>{siteTitle}</h1>
|
||||
<p className={styles.headerDescription}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
{siteDescription}
|
||||
<div>
|
||||
<SearchButton />
|
||||
</div>
|
||||
{siteDescription}
|
||||
<div className={styles.searchButtonContainer}>
|
||||
<SearchButton />
|
||||
</div>
|
||||
</p>
|
||||
</Content>
|
||||
|
|
|
|||
|
|
@ -46,3 +46,7 @@
|
|||
font-size: $font-size-large;
|
||||
}
|
||||
}
|
||||
|
||||
.searchButtonContainer {
|
||||
margin-top: $spacer * 0.5 ;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,16 @@
|
|||
import React from 'react'
|
||||
import { navigate } from 'gatsby'
|
||||
import styles from './SearchComponent.module.scss'
|
||||
import { ReactComponent as SearchIcon } from '../../images/search.svg'
|
||||
|
||||
import { IconButton } from '@material-ui/core'
|
||||
import SearchIcon from '@material-ui/icons/Search'
|
||||
const SearchButton = () => {
|
||||
return (
|
||||
<IconButton onClick={() => navigate('/search')}>
|
||||
<SearchIcon />
|
||||
</IconButton>
|
||||
<div className={styles.searchButtonWrapper}>
|
||||
<SearchIcon
|
||||
className={styles.searchButton}
|
||||
onClick={() => navigate('/search')}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default SearchButton
|
||||
|
|
|
|||
|
|
@ -1,33 +1,9 @@
|
|||
import React, { useState, useEffect } from 'react'
|
||||
import * as JsSearch from 'js-search'
|
||||
import PropTypes from 'prop-types'
|
||||
import { makeStyles } from '@material-ui/core/styles'
|
||||
import List from '@material-ui/core/List'
|
||||
import ListItem from '@material-ui/core/ListItem'
|
||||
import TextField from '@material-ui/core/TextField'
|
||||
import InputAdornment from '@material-ui/core/InputAdornment'
|
||||
import SearchIcon from '@material-ui/icons/Search'
|
||||
import SearchResultElement from './SearchResultElement'
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
parent: {
|
||||
overflow: 'hidden',
|
||||
position: 'relative',
|
||||
width: '100%'
|
||||
},
|
||||
child: {
|
||||
background: 'green',
|
||||
height: '100%',
|
||||
width: '50%',
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: 0
|
||||
},
|
||||
root: {
|
||||
margin: 'auto',
|
||||
width: '50%'
|
||||
}
|
||||
}))
|
||||
import { ReactComponent as SearchIcon } from '../../images/search.svg'
|
||||
import styles from './SearchComponent.module.scss'
|
||||
|
||||
const SearchClient = ({ searchableData }) => {
|
||||
const [searchState, setSearchState] = useState({
|
||||
|
|
@ -43,19 +19,11 @@ const SearchClient = ({ searchableData }) => {
|
|||
touched: false
|
||||
})
|
||||
|
||||
const classes = useStyles()
|
||||
|
||||
useEffect(() => {
|
||||
rebuildIndex(searchableData)
|
||||
}, [])
|
||||
|
||||
const rebuildIndex = (searchableData) => {
|
||||
// const {
|
||||
// removeStopWords,
|
||||
// selectedStrategy,
|
||||
// selectedSanitizer,
|
||||
// termFrequency
|
||||
// } = searchState
|
||||
const dataToSearch = new JsSearch.Search('title')
|
||||
dataToSearch.addIndex('title')
|
||||
dataToSearch.addIndex('description')
|
||||
|
|
@ -84,39 +52,24 @@ const SearchClient = ({ searchableData }) => {
|
|||
}
|
||||
|
||||
return (
|
||||
<div style={{ height: '100%' }}>
|
||||
<div>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
placeholder="Search"
|
||||
style={{
|
||||
margin: '10px auto',
|
||||
width: '100%'
|
||||
}}
|
||||
autoFocus
|
||||
value={searchState.searchQuery}
|
||||
onChange={searchData}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<SearchIcon />
|
||||
</InputAdornment>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<div id="search-container" className={styles.searchTextboxContainer}>
|
||||
<SearchIcon className={styles.searchBoxImg} />
|
||||
<input
|
||||
className={styles.searchTextInput}
|
||||
placeholder="Search"
|
||||
type="text"
|
||||
autoFocus
|
||||
value={searchState.searchQuery}
|
||||
onChange={searchData}
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div
|
||||
id="result-list-conatiner"
|
||||
style={{ overflowY: 'auto', height: '100%' }}
|
||||
className={classes.parent}
|
||||
>
|
||||
{searchState.touched ? (
|
||||
<div>
|
||||
<ResultList searchResults={searchState.searchResults} />
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
{searchState.touched ? (
|
||||
<ResultList searchResults={searchState.searchResults} />
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -127,18 +80,15 @@ SearchClient.propTypes = {
|
|||
|
||||
const ResultList = ({ searchResults }) => {
|
||||
return (
|
||||
<div style={{ maxHeight: '100%' }}>
|
||||
<div>Total results found: {searchResults.length}</div>
|
||||
|
||||
<div>
|
||||
<List style={{ maxHeight: '100%' }}>
|
||||
{searchResults.map((element) => (
|
||||
<ListItem style={{ before: { content: null } }} key={element.id}>
|
||||
<SearchResultElement element={element} />
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
</div>
|
||||
<div>
|
||||
<p>Total results found: {searchResults.length}</p>
|
||||
<ul>
|
||||
{searchResults.map((element) => (
|
||||
<li className={styles.resultListElement} key={element.id}>
|
||||
<SearchResultElement element={element} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import SearchClient from './SearchClient'
|
|||
import Layout from '../../components/Layout'
|
||||
import HeaderSection from '../../components/HeaderSection'
|
||||
import PropTypes from 'prop-types'
|
||||
import styles from './SearchComponent.module.scss'
|
||||
|
||||
const SearchComponent = ({ location }) => {
|
||||
const data = useStaticQuery(graphql`
|
||||
|
|
@ -64,18 +65,8 @@ const SearchComponent = ({ location }) => {
|
|||
<Layout location={location}>
|
||||
<HeaderSection title="Search" />
|
||||
<main>
|
||||
<article style={{ height: '700px' }}>
|
||||
<div
|
||||
id="search-client-container"
|
||||
style={{
|
||||
margin: 'auto',
|
||||
width: '50%',
|
||||
height: '100%',
|
||||
paddingBottom: '50px'
|
||||
}}
|
||||
>
|
||||
<SearchClient searchableData={searchableData} />
|
||||
</div>
|
||||
<article className={styles.searchPage}>
|
||||
<SearchClient searchableData={searchableData} />
|
||||
</article>
|
||||
</main>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,65 @@
|
|||
@import 'variables';
|
||||
|
||||
.searchform input[type='text'] {
|
||||
float: right;
|
||||
padding: 6px;
|
||||
border: none;
|
||||
margin-top: 8px;
|
||||
margin-right: 16px;
|
||||
font-size: 17px;
|
||||
.searchButtonWrapper {
|
||||
display: 'flex';
|
||||
align-items: 'center';
|
||||
}
|
||||
|
||||
.searchButton {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.searchPage {
|
||||
min-height: $spacer * 50;
|
||||
width: 50%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.searchTextboxContainer {
|
||||
display: flex;
|
||||
border: $brand-border-width solid;
|
||||
width: 100%;
|
||||
margin-bottom: $spacer * 0.5;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
.searchTextInput {
|
||||
width: 100%;
|
||||
padding: $spacer * 0.1;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: medium;
|
||||
}
|
||||
|
||||
.searchBoxImg {
|
||||
padding: 0.75rem;
|
||||
min-width: $spacer * 1.25;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.resultListElement {
|
||||
&:before {
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
.resultBox {
|
||||
composes: box from '../../styles/box.module.scss';
|
||||
|
||||
.section {
|
||||
margin: 0;
|
||||
font-size: $font-size-small;
|
||||
color: $brand-grey-dark;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: $font-size-large;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
font-size: $font-size-small;
|
||||
margin: 0;
|
||||
color: $brand-grey-dark;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,49 +1,22 @@
|
|||
import React from 'react'
|
||||
import { Link } from 'gatsby'
|
||||
import PropTypes from 'prop-types'
|
||||
import Card from '@material-ui/core/Card'
|
||||
import CardContent from '@material-ui/core/CardContent'
|
||||
import Typography from '@material-ui/core/Typography'
|
||||
import { makeStyles } from '@material-ui/core/styles'
|
||||
|
||||
const useStyles = makeStyles({
|
||||
root: {
|
||||
minWidth: 275
|
||||
},
|
||||
bullet: {
|
||||
display: 'inline-block',
|
||||
margin: '0 2px',
|
||||
transform: 'scale(0.8)'
|
||||
},
|
||||
title: {
|
||||
fontSize: 14
|
||||
},
|
||||
pos: {
|
||||
marginBottom: 12
|
||||
}
|
||||
})
|
||||
import styles from './SearchComponent.module.scss'
|
||||
|
||||
const SearchResultElement = ({ element }) => {
|
||||
const classes = useStyles()
|
||||
const { slug, title, section, description } = element
|
||||
return (
|
||||
<Card container alignItems="center" style={{ width: '100%' }}>
|
||||
<CardContent>
|
||||
<Typography
|
||||
className={classes.title}
|
||||
color="textSecondary"
|
||||
gutterBottom
|
||||
>
|
||||
{section}
|
||||
</Typography>
|
||||
<Typography variant="h6" component="h2">
|
||||
<Link to={slug}>{title}</Link>
|
||||
</Typography>
|
||||
<Typography className={classes.pos} color="textSecondary">
|
||||
{description ? description.substring(0, 100) + '...' : null}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Link to={slug}>
|
||||
<div className={styles.resultBox}>
|
||||
<header>
|
||||
<div className={styles.section}>{section}</div>
|
||||
<h1 className={styles.title}>{title}</h1>
|
||||
</header>
|
||||
{description && (
|
||||
<div className={styles.content}>{description.substring(0, 100)}</div>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path id="search" fill-rule="evenodd" clip-rule="evenodd" d="M11.5846 12.6731C10.3622 13.6572 8.81213 14.2501 7.12507 14.2501C3.19599 14.2501 0 11.0534 0 7.12507C0 3.19599 3.19599 0 7.12507 0C11.0542 0 14.2501 3.19599 14.2501 7.12507C14.2501 8.7963 13.6675 10.3329 12.6993 11.549L18.7698 17.6496C19.0778 17.9591 19.077 18.4603 18.7667 18.769C18.4555 19.0778 17.9552 19.077 17.6472 18.7667L11.5846 12.6731ZM12.6668 7.12507C12.6668 4.06921 10.1801 1.58335 7.12507 1.58335C4.06921 1.58335 1.58335 4.06921 1.58335 7.12507C1.58335 10.1801 4.06921 12.6668 7.12507 12.6668C10.1801 12.6668 12.6668 10.1801 12.6668 7.12507Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 734 B |
|
|
@ -65,3 +65,7 @@ $brand-border-width: 1px;
|
|||
$border-radius: 0.2rem;
|
||||
|
||||
$narrowWidth: 35rem;
|
||||
|
||||
$box-shadow-color: rgba(0, 0, 0, 0.2);
|
||||
$border-color: #e2e2e2;
|
||||
$background-content: #fff;
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
@import 'variables';
|
||||
|
||||
.box {
|
||||
display: block;
|
||||
background: $background-content;
|
||||
border-radius: $border-radius;
|
||||
border: 1px solid $border-color;
|
||||
box-shadow: 0 6px 17px 0 $box-shadow-color;
|
||||
padding: $spacer * 0.5;
|
||||
}
|
||||
|
||||
@media (min-width: 40rem) {
|
||||
.box {
|
||||
padding: var($spacer);
|
||||
}
|
||||
}
|
||||
|
||||
a.box:hover,
|
||||
a.box:focus {
|
||||
outline: 0;
|
||||
transform: translate3d(0, -0.1rem, 0);
|
||||
box-shadow: 0 10px 25px 0 $box-shadow-color;
|
||||
}
|
||||
Loading…
Reference in New Issue