mirror of
https://github.com/oceanprotocol/docs.git
synced 2024-11-26 19:49:26 +01:00
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
236
package-lock.json
generated
236
package-lock.json
generated
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
3
src/images/search.svg
Normal file
3
src/images/search.svg
Normal file
@ -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;
|
||||
23
src/styles/box.module.scss
Normal file
23
src/styles/box.module.scss
Normal file
@ -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
Block a user