Added command prompt, images list and image viewer components
This commit is contained in:
284
client/package-lock.json
generated
284
client/package-lock.json
generated
@@ -975,6 +975,11 @@
|
||||
"resolved": "https://registry.npmjs.org/@csstools/sass-import-resolve/-/sass-import-resolve-1.0.0.tgz",
|
||||
"integrity": "sha512-pH4KCsbtBLLe7eqUrw8brcuFO8IZlN36JjdKlOublibVdAIPHCzEnpBWOVUXK5sCf+DpBi8ZtuWtjF0srybdeA=="
|
||||
},
|
||||
"@emotion/hash": {
|
||||
"version": "0.7.3",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.7.3.tgz",
|
||||
"integrity": "sha512-14ZVlsB9akwvydAdaEnVnvqu6J2P6ySv39hYyl/aoB6w/V+bXX0tay8cF6paqbgZsN2n5Xh15uF4pE+GvE+itw=="
|
||||
},
|
||||
"@hapi/address": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.2.tgz",
|
||||
@@ -1193,6 +1198,77 @@
|
||||
"@types/yargs": "^13.0.0"
|
||||
}
|
||||
},
|
||||
"@material-ui/core": {
|
||||
"version": "4.5.2",
|
||||
"resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.5.2.tgz",
|
||||
"integrity": "sha512-yARw/hwavOXqljP+biDXHcmfbC63n8EkA8C10/tZt7KkBp7fs+7+z3BNR+ffotd8/uhirIC1jQWWKdLoUc34yA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.4.4",
|
||||
"@material-ui/styles": "^4.5.2",
|
||||
"@material-ui/system": "^4.5.2",
|
||||
"@material-ui/types": "^4.1.1",
|
||||
"@material-ui/utils": "^4.5.2",
|
||||
"@types/react-transition-group": "^4.2.0",
|
||||
"clsx": "^1.0.2",
|
||||
"convert-css-length": "^2.0.1",
|
||||
"hoist-non-react-statics": "^3.2.1",
|
||||
"normalize-scroll-left": "^0.2.0",
|
||||
"popper.js": "^1.14.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-transition-group": "^4.3.0"
|
||||
}
|
||||
},
|
||||
"@material-ui/styles": {
|
||||
"version": "4.5.2",
|
||||
"resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.5.2.tgz",
|
||||
"integrity": "sha512-QUqPk4tdPiDLs/1flB6qdAqUrYSxHv4YLCgvFeZw9A9OK/lf8LFjciF/SsSIDOCwoV2kf3BiGTzWUGjb/TTgzA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.4.4",
|
||||
"@emotion/hash": "^0.7.1",
|
||||
"@material-ui/types": "^4.1.1",
|
||||
"@material-ui/utils": "^4.5.2",
|
||||
"clsx": "^1.0.2",
|
||||
"csstype": "^2.5.2",
|
||||
"hoist-non-react-statics": "^3.2.1",
|
||||
"jss": "^10.0.0",
|
||||
"jss-plugin-camel-case": "^10.0.0",
|
||||
"jss-plugin-default-unit": "^10.0.0",
|
||||
"jss-plugin-global": "^10.0.0",
|
||||
"jss-plugin-nested": "^10.0.0",
|
||||
"jss-plugin-props-sort": "^10.0.0",
|
||||
"jss-plugin-rule-value-function": "^10.0.0",
|
||||
"jss-plugin-vendor-prefixer": "^10.0.0",
|
||||
"prop-types": "^15.7.2"
|
||||
}
|
||||
},
|
||||
"@material-ui/system": {
|
||||
"version": "4.5.2",
|
||||
"resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.5.2.tgz",
|
||||
"integrity": "sha512-h9RWvdM9XKlHHqwiuhyvWdobptQkHli+m2jJFs7i1AI/hmGsIc4reDmS7fInhETgt/Txx7uiAIznfRNIIVHmQw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.4.4",
|
||||
"@material-ui/utils": "^4.5.2",
|
||||
"prop-types": "^15.7.2"
|
||||
}
|
||||
},
|
||||
"@material-ui/types": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@material-ui/types/-/types-4.1.1.tgz",
|
||||
"integrity": "sha512-AN+GZNXytX9yxGi0JOfxHrRTbhFybjUJ05rnsBVjcB+16e466Z0Xe5IxawuOayVZgTBNDxmPKo5j4V6OnMtaSQ==",
|
||||
"requires": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"@material-ui/utils": {
|
||||
"version": "4.5.2",
|
||||
"resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.5.2.tgz",
|
||||
"integrity": "sha512-zhbNfHd1gLa8At6RPDG7uMZubHxbY+LtM6IkSfeWi6Lo4Ax80l62YaN1QmUpO1IvGCkn/j62tQX3yObiQZrJsQ==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.4.4",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-is": "^16.8.6"
|
||||
}
|
||||
},
|
||||
"@mrmlnc/readdir-enhanced": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
|
||||
@@ -1470,11 +1546,33 @@
|
||||
"integrity": "sha512-TJtwsqZ39pqcljJpajeoofYRfeZ7/I/OMUQ5pR4q5wOKf2ocrUvBAZUMhWsOvKx3dVc/aaV5GluBivt0sWqA5A==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/prop-types": {
|
||||
"version": "15.7.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
|
||||
"integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw=="
|
||||
},
|
||||
"@types/q": {
|
||||
"version": "1.5.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.2.tgz",
|
||||
"integrity": "sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw=="
|
||||
},
|
||||
"@types/react": {
|
||||
"version": "16.9.11",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.11.tgz",
|
||||
"integrity": "sha512-UBT4GZ3PokTXSWmdgC/GeCGEJXE5ofWyibCcecRLUVN2ZBpXQGVgQGtG2foS7CrTKFKlQVVswLvf7Js6XA/CVQ==",
|
||||
"requires": {
|
||||
"@types/prop-types": "*",
|
||||
"csstype": "^2.2.0"
|
||||
}
|
||||
},
|
||||
"@types/react-transition-group": {
|
||||
"version": "4.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.2.3.tgz",
|
||||
"integrity": "sha512-Hk8jiuT7iLOHrcjKP/ZVSyCNXK73wJAUz60xm0mVhiRujrdiI++j4duLiL282VGxwAgxetHQFfqA29LgEeSkFA==",
|
||||
"requires": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"@types/stack-utils": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
|
||||
@@ -3037,13 +3135,11 @@
|
||||
},
|
||||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"balanced-match": "^1.0.0",
|
||||
"concat-map": "0.0.1"
|
||||
@@ -3056,18 +3152,15 @@
|
||||
},
|
||||
"code-point-at": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"concat-map": {
|
||||
"version": "0.0.1",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"console-control-strings": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"core-util-is": {
|
||||
"version": "1.0.2",
|
||||
@@ -3170,8 +3263,7 @@
|
||||
},
|
||||
"inherits": {
|
||||
"version": "2.0.3",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"ini": {
|
||||
"version": "1.3.5",
|
||||
@@ -3181,7 +3273,6 @@
|
||||
"is-fullwidth-code-point": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"number-is-nan": "^1.0.0"
|
||||
}
|
||||
@@ -3194,20 +3285,17 @@
|
||||
"minimatch": {
|
||||
"version": "3.0.4",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"brace-expansion": "^1.1.7"
|
||||
}
|
||||
},
|
||||
"minimist": {
|
||||
"version": "0.0.8",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"minipass": {
|
||||
"version": "2.3.5",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"safe-buffer": "^5.1.2",
|
||||
"yallist": "^3.0.0"
|
||||
@@ -3224,7 +3312,6 @@
|
||||
"mkdirp": {
|
||||
"version": "0.5.1",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"minimist": "0.0.8"
|
||||
}
|
||||
@@ -3297,8 +3384,7 @@
|
||||
},
|
||||
"number-is-nan": {
|
||||
"version": "1.0.1",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
@@ -3308,7 +3394,6 @@
|
||||
"once": {
|
||||
"version": "1.4.0",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"wrappy": "1"
|
||||
}
|
||||
@@ -3414,7 +3499,6 @@
|
||||
"string-width": {
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"code-point-at": "^1.0.0",
|
||||
"is-fullwidth-code-point": "^1.0.0",
|
||||
@@ -3634,6 +3718,11 @@
|
||||
"shallow-clone": "^0.1.2"
|
||||
}
|
||||
},
|
||||
"clsx": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.0.4.tgz",
|
||||
"integrity": "sha512-1mQ557MIZTrL/140j+JVdRM6e31/OA4vTYxXgqIIZlndyfjHpyawKZia1Im05Vp9BWmImkcNrNtFYQMyFcgJDg=="
|
||||
},
|
||||
"co": {
|
||||
"version": "4.6.0",
|
||||
"resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
|
||||
@@ -3865,6 +3954,11 @@
|
||||
"resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
|
||||
"integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
|
||||
},
|
||||
"convert-css-length": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/convert-css-length/-/convert-css-length-2.0.1.tgz",
|
||||
"integrity": "sha512-iGpbcvhLPRKUbBc0Quxx7w/bV14AC3ItuBEGMahA5WTYqB8lq9jH0kTXFheCBASsYnqeMFZhiTruNxr1N59Axg=="
|
||||
},
|
||||
"convert-source-map": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.6.0.tgz",
|
||||
@@ -4135,6 +4229,25 @@
|
||||
"resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.1.tgz",
|
||||
"integrity": "sha1-2bkoGtz9jO2TW9urqDeGiX9k6ZY="
|
||||
},
|
||||
"css-vendor": {
|
||||
"version": "2.0.7",
|
||||
"resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.7.tgz",
|
||||
"integrity": "sha512-VS9Rjt79+p7M0WkPqcAza4Yq1ZHrsHrwf7hPL/bjQB+c1lwmAI+1FXxYTYt818D/50fFVflw0XKleiBN5RITkg==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.6.2",
|
||||
"is-in-browser": "^1.0.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": {
|
||||
"version": "7.6.3",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.6.3.tgz",
|
||||
"integrity": "sha512-kq6anf9JGjW8Nt5rYfEuGRaEAaH1mkv3Bbu6rYvLOpPh/RusSJXuKPEAoZ7L7gybZkchE8+NV5g9vKF4AGAtsA==",
|
||||
"requires": {
|
||||
"regenerator-runtime": "^0.13.2"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"css-what": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz",
|
||||
@@ -4258,6 +4371,11 @@
|
||||
"cssom": "0.3.x"
|
||||
}
|
||||
},
|
||||
"csstype": {
|
||||
"version": "2.6.7",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.7.tgz",
|
||||
"integrity": "sha512-9Mcn9sFbGBAdmimWb2gLVDtFJzeKtDGIr76TUqmjZrw9LFXBMSU70lcs+C0/7fyCd6iBDqmksUcCOUIkisPHsQ=="
|
||||
},
|
||||
"currently-unhandled": {
|
||||
"version": "0.4.1",
|
||||
"resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
|
||||
@@ -4592,6 +4710,25 @@
|
||||
"utila": "~0.4"
|
||||
}
|
||||
},
|
||||
"dom-helpers": {
|
||||
"version": "5.1.3",
|
||||
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.1.3.tgz",
|
||||
"integrity": "sha512-nZD1OtwfWGRBWlpANxacBEZrEuLa16o1nh7YopFWeoF68Zt8GGEmzHu6Xv4F3XaFIC+YXtTLrzgqKxFgLEe4jw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.6.3",
|
||||
"csstype": "^2.6.7"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": {
|
||||
"version": "7.6.3",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.6.3.tgz",
|
||||
"integrity": "sha512-kq6anf9JGjW8Nt5rYfEuGRaEAaH1mkv3Bbu6rYvLOpPh/RusSJXuKPEAoZ7L7gybZkchE8+NV5g9vKF4AGAtsA==",
|
||||
"requires": {
|
||||
"regenerator-runtime": "^0.13.2"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"dom-serializer": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.1.tgz",
|
||||
@@ -6735,6 +6872,11 @@
|
||||
"integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=",
|
||||
"dev": true
|
||||
},
|
||||
"hyphenate-style-name": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz",
|
||||
"integrity": "sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ=="
|
||||
},
|
||||
"iconv-lite": {
|
||||
"version": "0.4.24",
|
||||
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
|
||||
@@ -7075,6 +7217,11 @@
|
||||
"is-extglob": "^2.1.1"
|
||||
}
|
||||
},
|
||||
"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-lower-case": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/is-lower-case/-/is-lower-case-1.1.3.tgz",
|
||||
@@ -7578,6 +7725,7 @@
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"balanced-match": "^1.0.0",
|
||||
"concat-map": "0.0.1"
|
||||
@@ -7724,6 +7872,7 @@
|
||||
"minimatch": {
|
||||
"version": "3.0.4",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"brace-expansion": "^1.1.7"
|
||||
}
|
||||
@@ -8445,6 +8594,83 @@
|
||||
"verror": "1.10.0"
|
||||
}
|
||||
},
|
||||
"jss": {
|
||||
"version": "10.0.0",
|
||||
"resolved": "https://registry.npmjs.org/jss/-/jss-10.0.0.tgz",
|
||||
"integrity": "sha512-TPpDFsiBjuERiL+dFDq8QCdiF9oDasPcNqCKLGCo/qED3fNYOQ8PX2lZhknyTiAt3tZrfOFbb0lbQ9lTjPZxsQ==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"csstype": "^2.6.5",
|
||||
"is-in-browser": "^1.1.3",
|
||||
"tiny-warning": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"jss-plugin-camel-case": {
|
||||
"version": "10.0.0",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.0.tgz",
|
||||
"integrity": "sha512-yALDL00+pPR4FJh+k07A8FeDvfoPPuXU48HLy63enAubcVd3DnS+2rgqPXglHDGixIDVkCSXecl/l5GAMjzIbA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"hyphenate-style-name": "^1.0.3",
|
||||
"jss": "10.0.0"
|
||||
}
|
||||
},
|
||||
"jss-plugin-default-unit": {
|
||||
"version": "10.0.0",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.0.tgz",
|
||||
"integrity": "sha512-sURozIOdCtGg9ap18erQ+ijndAfEGtTaetxfU3H4qwC18Bi+fdvjlY/ahKbuu0ASs7R/+WKCP7UaRZOjUDMcdQ==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"jss": "10.0.0"
|
||||
}
|
||||
},
|
||||
"jss-plugin-global": {
|
||||
"version": "10.0.0",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.0.0.tgz",
|
||||
"integrity": "sha512-80ofWKSQUo62bxLtRoTNe0kFPtHgUbAJeOeR36WEGgWIBEsXLyXOnD5KNnjPqG4heuEkz9eSLccjYST50JnI7Q==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"jss": "10.0.0"
|
||||
}
|
||||
},
|
||||
"jss-plugin-nested": {
|
||||
"version": "10.0.0",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.0.0.tgz",
|
||||
"integrity": "sha512-waxxwl/po1hN3azTyixKnr8ReEqUv5WK7WsO+5AWB0bFndML5Yqnt8ARZ90HEg8/P6WlqE/AB2413TkCRZE8bA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"jss": "10.0.0",
|
||||
"tiny-warning": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"jss-plugin-props-sort": {
|
||||
"version": "10.0.0",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.0.tgz",
|
||||
"integrity": "sha512-41mf22CImjwNdtOG3r+cdC8+RhwNm616sjHx5YlqTwtSJLyLFinbQC/a4PIFk8xqf1qpFH1kEAIw+yx9HaqZ3g==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"jss": "10.0.0"
|
||||
}
|
||||
},
|
||||
"jss-plugin-rule-value-function": {
|
||||
"version": "10.0.0",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.0.tgz",
|
||||
"integrity": "sha512-Jw+BZ8JIw1f12V0SERqGlBT1JEPWax3vuZpMym54NAXpPb7R1LYHiCTIlaJUyqvIfEy3kiHMtgI+r2whGgRIxQ==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"jss": "10.0.0"
|
||||
}
|
||||
},
|
||||
"jss-plugin-vendor-prefixer": {
|
||||
"version": "10.0.0",
|
||||
"resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.0.tgz",
|
||||
"integrity": "sha512-qslqvL0MUbWuzXJWdUxpj6mdNUX8jr4FFTo3aZnAT65nmzWL7g8oTr9ZxmTXXgdp7ANhS1QWE7036/Q2isFBpw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.3.1",
|
||||
"css-vendor": "^2.0.6",
|
||||
"jss": "10.0.0"
|
||||
}
|
||||
},
|
||||
"jsx-ast-utils": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.2.1.tgz",
|
||||
@@ -9910,6 +10136,11 @@
|
||||
"resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
|
||||
"integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI="
|
||||
},
|
||||
"normalize-scroll-left": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/normalize-scroll-left/-/normalize-scroll-left-0.2.0.tgz",
|
||||
"integrity": "sha512-t5oCENZJl8TGusJKoCJm7+asaSsPuNmK6+iEjrZ5TyBj2f02brCRsd4c83hwtu+e5d4LCSBZ0uoDlMjBo+A8yA=="
|
||||
},
|
||||
"normalize-url": {
|
||||
"version": "1.9.1",
|
||||
"resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-1.9.1.tgz",
|
||||
@@ -12186,6 +12417,17 @@
|
||||
"tiny-warning": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"react-transition-group": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.3.0.tgz",
|
||||
"integrity": "sha512-1qRV1ZuVSdxPlPf4O8t7inxUGpdyO5zG9IoNfJxSO0ImU2A1YWkEQvFPuIPZmMLkg5hYs7vv5mMOyfgSkvAwvw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.5.5",
|
||||
"dom-helpers": "^5.0.1",
|
||||
"loose-envify": "^1.4.0",
|
||||
"prop-types": "^15.6.2"
|
||||
}
|
||||
},
|
||||
"read-pkg": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@material-ui/core": "^4.5.2",
|
||||
"@svgr/webpack": "4.3.2",
|
||||
"@typescript-eslint/eslint-plugin": "^2.2.0",
|
||||
"@typescript-eslint/parser": "^2.2.0",
|
||||
|
||||
@@ -17,26 +17,26 @@ module.exports = plop => {
|
||||
type: 'add',
|
||||
// Plop will create directories for us if they do not exist
|
||||
// so it's okay to add files in nested locations.
|
||||
path: 'src/app/components/{{pascalCase name}}/{{pascalCase name}}.js',
|
||||
path: 'src/app/components/molecules/{{pascalCase name}}/{{pascalCase name}}.js',
|
||||
templateFile:
|
||||
'plop-templates/Component/Component.js.hbs',
|
||||
},
|
||||
{
|
||||
type: 'add',
|
||||
path: 'src/app/components/{{pascalCase name}}/{{pascalCase name}}.test.js',
|
||||
path: 'src/app/components/molecules/{{pascalCase name}}/{{pascalCase name}}.test.js',
|
||||
templateFile:
|
||||
'plop-templates/Component/Component.test.js.hbs',
|
||||
},
|
||||
{
|
||||
type: 'add',
|
||||
path:
|
||||
'src/app/components/{{pascalCase name}}/{{pascalCase name}}.module.css',
|
||||
'src/app/components/molecules/{{pascalCase name}}/{{pascalCase name}}.component.scss',
|
||||
templateFile:
|
||||
'plop-templates/Component/Component.module.css.hbs',
|
||||
'plop-templates/Component/Component.component.scss.hbs',
|
||||
},
|
||||
{
|
||||
type: 'add',
|
||||
path: 'src/app/components/{{pascalCase name}}/index.js',
|
||||
path: 'src/app/components/molecules/{{pascalCase name}}/index.js',
|
||||
templateFile: 'plop-templates/Component/index.js.hbs',
|
||||
},
|
||||
{
|
||||
|
||||
BIN
client/public/images/BG.jpg
Normal file
BIN
client/public/images/BG.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 175 KiB |
BIN
client/public/images/GUD_1.JPG
Normal file
BIN
client/public/images/GUD_1.JPG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 MiB |
BIN
client/public/images/GUD_10.JPG
Normal file
BIN
client/public/images/GUD_10.JPG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.9 MiB |
BIN
client/public/images/GUD_11.JPG
Normal file
BIN
client/public/images/GUD_11.JPG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 MiB |
BIN
client/public/images/GUD_12.JPG
Normal file
BIN
client/public/images/GUD_12.JPG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.9 MiB |
BIN
client/public/images/GUD_2.JPG
Normal file
BIN
client/public/images/GUD_2.JPG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.7 MiB |
BIN
client/public/images/GUD_3.JPG
Normal file
BIN
client/public/images/GUD_3.JPG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 MiB |
BIN
client/public/images/GUD_4.JPG
Normal file
BIN
client/public/images/GUD_4.JPG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 MiB |
BIN
client/public/images/GUD_5.JPG
Normal file
BIN
client/public/images/GUD_5.JPG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.0 MiB |
BIN
client/public/images/GUD_6.JPG
Normal file
BIN
client/public/images/GUD_6.JPG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.5 MiB |
BIN
client/public/images/GUD_7.JPG
Normal file
BIN
client/public/images/GUD_7.JPG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 MiB |
BIN
client/public/images/GUD_8.JPG
Normal file
BIN
client/public/images/GUD_8.JPG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 MiB |
BIN
client/public/images/GUD_9.JPG
Normal file
BIN
client/public/images/GUD_9.JPG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 MiB |
@@ -17,6 +17,7 @@
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
|
||||
@@ -1,18 +1,33 @@
|
||||
/* PLOP_INJECT_IMPORT */
|
||||
import SideBarTab from './SideBarTab';
|
||||
import SideBar from './SideBar';
|
||||
import Jumbotron from './Jumbotron';
|
||||
import FormFieldContainer from './FormFieldContainer';
|
||||
import Form from './Form';
|
||||
import SocialLogin from './SocialLogin';
|
||||
import LoginForm from './LoginForm';
|
||||
import SelectOption from './SelectOption';
|
||||
import InputField from './InputField';
|
||||
import AtomsInputField from './AtomsInputField';
|
||||
import PageLoader from './PageLoader';
|
||||
import ImageViewerInner from './ImageViewerInner';
|
||||
import ImageHeader from './ImageHeader';
|
||||
import Image from './Image';
|
||||
import Paginator from './molecules/Paginator';
|
||||
import PrincipalContent from './molecules/PrincipalContent';
|
||||
import ImageViewer from './molecules/PrincipalContent/ImageViewer';
|
||||
import ImageContainer from './molecules/PrincipalContent/ImageContainer';
|
||||
import CommandPrompt from './molecules/common/CommandPrompt';
|
||||
import SideBarTab from './molecules/SideBar/SideBarTab';
|
||||
import SideBar from './molecules/SideBar';
|
||||
import Jumbotron from './molecules/common/Jumbotron';
|
||||
import FormFieldContainer from './molecules/common/FormFieldContainer';
|
||||
import Form from './molecules/common/Form';
|
||||
import SocialLogin from './molecules/SocialLogin';
|
||||
import LoginForm from './molecules/LoginForm';
|
||||
import SelectOption from './atoms/SelectOption';
|
||||
import InputField from './atoms/InputField';
|
||||
import PageLoader from './molecules/PageLoader';
|
||||
|
||||
export {
|
||||
/* PLOP_INJECT_EXPORT */
|
||||
ImageViewerInner,
|
||||
ImageHeader,
|
||||
Image,
|
||||
Paginator,
|
||||
PrincipalContent,
|
||||
ImageViewer,
|
||||
ImageContainer,
|
||||
CommandPrompt,
|
||||
SideBarTab,
|
||||
SideBar,
|
||||
Jumbotron,
|
||||
@@ -22,6 +37,5 @@ export {
|
||||
LoginForm,
|
||||
SelectOption,
|
||||
InputField,
|
||||
AtomsInputField,
|
||||
PageLoader,
|
||||
}
|
||||
20
client/src/app/components/molecules/Paginator/Paginator.js
Normal file
20
client/src/app/components/molecules/Paginator/Paginator.js
Normal file
@@ -0,0 +1,20 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import styles from './Paginator.module.css';
|
||||
|
||||
const Paginator = props => {
|
||||
return (
|
||||
<div className={styles.root}>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Paginator.defaultProps = {
|
||||
|
||||
};
|
||||
|
||||
Paginator.propTypes = {
|
||||
|
||||
};
|
||||
|
||||
export default Paginator;
|
||||
@@ -0,0 +1,3 @@
|
||||
.c-Paginator {
|
||||
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import React from 'react';
|
||||
import Paginator from './Paginator';
|
||||
|
||||
describe('Paginator', () => {
|
||||
it('renders without error', () => {
|
||||
|
||||
});
|
||||
});
|
||||
3
client/src/app/components/molecules/Paginator/index.js
Normal file
3
client/src/app/components/molecules/Paginator/index.js
Normal file
@@ -0,0 +1,3 @@
|
||||
import Paginator from './Paginator';
|
||||
|
||||
export default Paginator;
|
||||
@@ -0,0 +1,4 @@
|
||||
.c-Image {
|
||||
margin: 2rem;
|
||||
width: 250px;
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import {connect} from 'react-redux'
|
||||
|
||||
import {updateBackground} from './../../../../../pages/Home/actions'
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import Card from '@material-ui/core/Card';
|
||||
import CardHeader from '@material-ui/core/CardHeader'
|
||||
import CardActionArea from '@material-ui/core/CardActionArea';
|
||||
import CardActions from '@material-ui/core/CardActions';
|
||||
import CardContent from '@material-ui/core/CardContent';
|
||||
import CardMedia from '@material-ui/core/CardMedia';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import ImageHeader from './ImageHeader/ImageHeader';
|
||||
|
||||
const useStyles = makeStyles({
|
||||
card: {
|
||||
maxWidth: 345,
|
||||
},
|
||||
media: {
|
||||
height: 140,
|
||||
},
|
||||
});
|
||||
|
||||
const Image = props => {
|
||||
const image = props.image
|
||||
const classes = useStyles()
|
||||
|
||||
return (
|
||||
<Card className={`${classes.card} c-Image`} onClick={() => props.updateBackgroundDispatcher(image.imageUrl)}>
|
||||
<CardHeader avatar={<ImageHeader image={image} />} title={image.imageTitle} />
|
||||
<CardActionArea>
|
||||
<CardMedia
|
||||
className={classes.media}
|
||||
image={image.imageUrl}
|
||||
title={image.imageTitle}
|
||||
/>
|
||||
<CardContent>
|
||||
<Typography gutterBottom variant="h5" component="h2">
|
||||
{image.imageTitle}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="textSecondary" component="p">
|
||||
{image.imageDescription}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</CardActionArea>
|
||||
<CardActions>
|
||||
<Button size="small" color="primary">
|
||||
Like
|
||||
</Button>
|
||||
<Button size="small" color="primary">
|
||||
Share
|
||||
</Button>
|
||||
<Button size="small" color="primary">
|
||||
More
|
||||
</Button>
|
||||
</CardActions>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
Image.propTypes = {
|
||||
image: PropTypes.object,
|
||||
updateBackgroundDispatcher: PropTypes.func
|
||||
};
|
||||
|
||||
const mapDispatchToProps = {
|
||||
updateBackgroundDispatcher: updateBackground
|
||||
}
|
||||
|
||||
export default connect(
|
||||
null,
|
||||
mapDispatchToProps
|
||||
)(Image)
|
||||
@@ -0,0 +1,8 @@
|
||||
import React from 'react';
|
||||
import Image from './Image';
|
||||
|
||||
describe('Image', () => {
|
||||
it('renders without error', () => {
|
||||
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,12 @@
|
||||
.c-ImageHeader {
|
||||
// padding: 10px;
|
||||
.avatar {
|
||||
background-size: cover;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
height: 40px;
|
||||
line-height: 24px;
|
||||
object-fit: cover;
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const ImageHeader = props => {
|
||||
const image = props.image
|
||||
return (
|
||||
<div className="c-ImageHeader">
|
||||
<div className="avatar" style={{backgroundImage: `url(${image.imageUrl})`}} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
ImageHeader.propTypes = {
|
||||
image: PropTypes.object
|
||||
};
|
||||
|
||||
export default ImageHeader
|
||||
@@ -0,0 +1,8 @@
|
||||
import React from 'react';
|
||||
import ImageHeader from './ImageHeader';
|
||||
|
||||
describe('ImageHeader', () => {
|
||||
it('renders without error', () => {
|
||||
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,3 @@
|
||||
import ImageHeader from './ImageHeader';
|
||||
|
||||
export default ImageHeader;
|
||||
@@ -0,0 +1,3 @@
|
||||
import Image from './Image';
|
||||
|
||||
export default Image;
|
||||
@@ -0,0 +1,3 @@
|
||||
.c-ImageContainer {
|
||||
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import ImageCard from './Image'
|
||||
import Image from './../../../../models/image.model'
|
||||
|
||||
class ImageContainer extends React.Component {
|
||||
|
||||
render() {
|
||||
const images = [
|
||||
new Image('dragonfly1', '/images/GUD_1.JPG', 'Guddu 1'),
|
||||
new Image('dragonfly2', '/images/GUD_2.JPG', 'sampleDesc2'),
|
||||
new Image('dragonfly3', '/images/GUD_3.JPG', 'sampleDesc3'),
|
||||
new Image('dragonfly4', '/images/GUD_4.JPG', 'sampleDesc4'),
|
||||
new Image('dragonfly1', '/images/GUD_5.JPG', 'sampleDesc1'),
|
||||
new Image('dragonfly2', '/images/GUD_6.JPG', 'sampleDesc2'),
|
||||
new Image('dragonfly3', '/images/GUD_7.JPG', 'sampleDesc3'),
|
||||
new Image('dragonfly4', '/images/GUD_8.JPG', 'sampleDesc4'),
|
||||
new Image('dragonfly1', '/images/GUD_9.JPG', 'sampleDesc1'),
|
||||
new Image('dragonfly2', '/images/GUD_10.JPG', 'sampleDesc2'),
|
||||
new Image('dragonfly3', '/images/GUD_11.JPG', 'sampleDesc3'),
|
||||
new Image('dragonfly4', '/images/GUD_12.JPG', 'sampleDesc4'),
|
||||
new Image('dragonfly1', '/images/GUD_4.JPG', 'sampleDesc1'),
|
||||
new Image('dragonfly2', '/images/GUD_3.JPG', 'sampleDesc2'),
|
||||
new Image('dragonfly3', '/images/GUD_2.JPG', 'sampleDesc3'),
|
||||
new Image('dragonfly4', '/images/GUD_1.JPG', 'sampleDesc4')
|
||||
]
|
||||
const imageRenders = images.map((image) => {
|
||||
return <ImageCard image={image}/>
|
||||
})
|
||||
return (
|
||||
<div class="container-fluid">
|
||||
<div class="row" style={{justifyContent: 'space-between'}}>
|
||||
{imageRenders}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ImageContainer.propTypes = {
|
||||
images: PropTypes.array
|
||||
};
|
||||
|
||||
export default ImageContainer;
|
||||
@@ -0,0 +1,8 @@
|
||||
import React from 'react';
|
||||
import ImageContainer from './ImageContainer';
|
||||
|
||||
describe('ImageContainer', () => {
|
||||
it('renders without error', () => {
|
||||
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,3 @@
|
||||
import ImageContainer from './ImageContainer';
|
||||
|
||||
export default ImageContainer;
|
||||
@@ -0,0 +1,3 @@
|
||||
.c-ImageViewer {
|
||||
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
import React, {useState} from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import {connect} from 'react-redux';
|
||||
import { createPropsSelector } from 'reselect-immutable-helpers';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import Modal from '@material-ui/core/Modal';
|
||||
import Backdrop from '@material-ui/core/Backdrop';
|
||||
import {Fade, Zoom, Paper} from '@material-ui/core';
|
||||
import { updateModalState } from '../../../../pages/Home/actions';
|
||||
import { getModalState, getBackgroundImage } from '../../../../pages/Home/selectors';
|
||||
import ImageViewerInner from './ImageViewerInner/ImageViewerInner';
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
modal: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
},
|
||||
paper: {
|
||||
backgroundColor: theme.palette.background.paper,
|
||||
border: '2px solid #000',
|
||||
boxShadow: theme.shadows[5],
|
||||
padding: theme.spacing(2, 4, 3),
|
||||
width: '85%',
|
||||
height: '85%'
|
||||
},
|
||||
polygon: {
|
||||
fill: theme.palette.common.white,
|
||||
stroke: theme.palette.divider,
|
||||
strokeWidth: 1,
|
||||
},
|
||||
}));
|
||||
|
||||
const ImageViewer = props => {
|
||||
|
||||
const classes = useStyles();
|
||||
return (
|
||||
<div className="c-ImageViewer">
|
||||
<Modal
|
||||
aria-labelledby="transition-modal-title"
|
||||
aria-describedby="transition-modal-description"
|
||||
className={classes.modal}
|
||||
open={props.modalState || false}
|
||||
onClose={() => props.handleCloseDispatcher(false)}
|
||||
closeAfterTransition
|
||||
BackdropComponent={Backdrop}
|
||||
BackdropProps={{
|
||||
timeout: 500,
|
||||
}}
|
||||
>
|
||||
<Zoom in={props.modalState || false}>
|
||||
<Paper elevation={4} className={classes.paper}>
|
||||
|
||||
</Paper>
|
||||
</Zoom>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
ImageViewer.propTypes = {
|
||||
handleClose: PropTypes.func,
|
||||
modalState: PropTypes.bool,
|
||||
selectedImage: PropTypes.string
|
||||
};
|
||||
|
||||
const mapStateToProps = createPropsSelector({
|
||||
modalState: getModalState,
|
||||
selectedImage: getBackgroundImage
|
||||
})
|
||||
|
||||
const mapDispatchToProps = {
|
||||
handleCloseDispatcher: updateModalState
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(ImageViewer)
|
||||
@@ -0,0 +1,8 @@
|
||||
import React from 'react';
|
||||
import ImageViewer from './ImageViewer';
|
||||
|
||||
describe('ImageViewer', () => {
|
||||
it('renders without error', () => {
|
||||
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,3 @@
|
||||
import ImageViewer from './ImageViewer';
|
||||
|
||||
export default ImageViewer;
|
||||
@@ -0,0 +1,3 @@
|
||||
.c-PrincipalContent {
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import ImageContainer from './ImageContainer';
|
||||
import ImageViewer from './ImageViewer';
|
||||
|
||||
const PrincipalContent = props => {
|
||||
return (
|
||||
<div className='c-PrincipalContent'>
|
||||
<ImageContainer />
|
||||
<ImageViewer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
PrincipalContent.propTypes = {
|
||||
|
||||
};
|
||||
|
||||
export default PrincipalContent;
|
||||
@@ -0,0 +1,8 @@
|
||||
import React from 'react';
|
||||
import PrincipalContent from './PrincipalContent';
|
||||
|
||||
describe('PrincipalContent', () => {
|
||||
it('renders without error', () => {
|
||||
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,3 @@
|
||||
import PrincipalContent from './PrincipalContent';
|
||||
|
||||
export default PrincipalContent;
|
||||
@@ -1,459 +1,477 @@
|
||||
$themeColor-Light: #EEE2DC;
|
||||
// $themeColor-Dark:#252525;
|
||||
$themeColor-Dark:#E3E2DF;
|
||||
$theme-font: verdana, sans-serif;
|
||||
// $theme-supplementer: #f39c12;
|
||||
$theme-supplementer: #5D001E;
|
||||
$theme-supplementer-transparent: rgba(93,0,30,0.3);
|
||||
// $themeColor-Light: #EEE2DC;
|
||||
// // $themeColor-Dark:#252525;
|
||||
// $themeColor-Dark:#E3E2DF;
|
||||
// $theme-font: verdana, sans-serif;
|
||||
// // $theme-supplementer: #f39c12;
|
||||
// $theme-supplementer: #5D001E;
|
||||
// $theme-supplementer-transparent: rgba(93,0,30,0.3);
|
||||
|
||||
.c-SideBar {
|
||||
// background: $theme-supplementer-transparent;
|
||||
z-index: 20;
|
||||
|
||||
p {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-size: 1.1em;
|
||||
font-weight: 300;
|
||||
line-height: 1.7em;
|
||||
// color: #999;
|
||||
}
|
||||
|
||||
a,
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding: 15px 10px;
|
||||
background: #fff;
|
||||
border: none;
|
||||
border-radius: 0 5px 5px 0;
|
||||
margin-bottom: 40px;
|
||||
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar-btn {
|
||||
box-shadow: none;
|
||||
outline: none !important;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
border-bottom: 1px dashed #ddd;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
i,
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------
|
||||
SIDEBAR STYLE
|
||||
----------------------------------------------------- */
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
background-color: $themeColor-Dark;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
min-width: 250px;
|
||||
max-width: 250px;
|
||||
// background: $theme-supplementer-transparent;
|
||||
color: $themeColor-Dark;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
#sidebar.active {
|
||||
min-width: 80px;
|
||||
max-width: 80px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#sidebar.active .sidebar-header h3,
|
||||
#sidebar.active .CTAs {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar-header h3 {
|
||||
display: inline;
|
||||
padding-left: 0.6em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#sidebar.active .sidebar-header strong {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#sidebar ul li a {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#sidebar.active ul li a {
|
||||
padding: 20px 10px;
|
||||
text-align: center;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
#sidebar.active ul li a i {
|
||||
margin-right: 0;
|
||||
display: block;
|
||||
font-size: 1.8em;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
#sidebar.active ul ul a {
|
||||
padding: 10px !important;
|
||||
}
|
||||
|
||||
#sidebar.active .dropdown-toggle::after {
|
||||
top: auto;
|
||||
bottom: 10px;
|
||||
right: 50%;
|
||||
-webkit-transform: translateX(50%);
|
||||
-ms-transform: translateX(50%);
|
||||
transform: translateX(50%);
|
||||
}
|
||||
|
||||
#sidebar .sidebar-header {
|
||||
padding: 20px;
|
||||
background:$themeColor-Dark;
|
||||
}
|
||||
|
||||
#sidebar .sidebar-header strong {
|
||||
display: none;
|
||||
font-size: 1.8em;
|
||||
}
|
||||
|
||||
#sidebar ul.components {
|
||||
padding: 20px 0;
|
||||
border-bottom: 3px solid $themeColor-Dark;
|
||||
}
|
||||
|
||||
#sidebar ul li a {
|
||||
padding: 10px;
|
||||
font-size: 1.1em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#sidebar ul li a:hover {
|
||||
color: $theme-supplementer;
|
||||
background: $themeColor-Light;
|
||||
}
|
||||
|
||||
#sidebar ul li a i {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
#sidebar ul li.active>a,
|
||||
a[aria-expanded="true"] {
|
||||
color: $theme-supplementer;
|
||||
background:$themeColor-Dark;
|
||||
}
|
||||
|
||||
a[data-toggle="collapse"] {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown-toggle::after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 20px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
ul ul a {
|
||||
font-size: 0.9em !important;
|
||||
padding-left: 30px !important;
|
||||
background: white;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
ul.CTAs {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
ul.CTAs a {
|
||||
text-align: center;
|
||||
font-size: 0.9em !important;
|
||||
display: block;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
a.download {
|
||||
background: #fff;
|
||||
color: #7386D5;
|
||||
}
|
||||
|
||||
a.article,
|
||||
a.article:hover {
|
||||
background: #6d7fcc !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------
|
||||
CONTENT STYLE
|
||||
----------------------------------------------------- */
|
||||
|
||||
#content {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
min-height: 100vh;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------
|
||||
MEDIAQUERIES
|
||||
----------------------------------------------------- */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#sidebar {
|
||||
min-width: 80px;
|
||||
max-width: 80px;
|
||||
text-align: center;
|
||||
margin-left: -80px !important;
|
||||
}
|
||||
.dropdown-toggle::after {
|
||||
top: auto;
|
||||
bottom: 10px;
|
||||
right: 50%;
|
||||
-webkit-transform: translateX(50%);
|
||||
-ms-transform: translateX(50%);
|
||||
transform: translateX(50%);
|
||||
}
|
||||
#sidebar.active {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
#sidebar .sidebar-header h3,
|
||||
#sidebar .CTAs {
|
||||
display: none;
|
||||
}
|
||||
#sidebar .sidebar-header strong {
|
||||
display: block;
|
||||
}
|
||||
#sidebar ul li a {
|
||||
padding: 20px 10px;
|
||||
}
|
||||
#sidebar ul li a span {
|
||||
font-size: 0.85em;
|
||||
}
|
||||
#sidebar ul li a i {
|
||||
margin-right: 0;
|
||||
display: block;
|
||||
}
|
||||
#sidebar ul ul a {
|
||||
padding: 10px !important;
|
||||
}
|
||||
#sidebar ul li a i {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
#sidebar {
|
||||
margin-left: 0;
|
||||
}
|
||||
#sidebarCollapse span {
|
||||
display: none;
|
||||
}
|
||||
.text-muted {
|
||||
color: #bcb !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width: 576px) {
|
||||
.card-group>.card:first-child {
|
||||
border-top-right-radius: .25rem;
|
||||
border-bottom-right-radius: .25rem;
|
||||
}
|
||||
.card-group>.card:not(:first-child):not(:last-child):not(:only-child) {
|
||||
border-radius: .25rem;
|
||||
}
|
||||
.card-group>.card:last-child {
|
||||
border-top-left-radius: .25rem;
|
||||
border-bottom-left-radius: .25rem;
|
||||
}
|
||||
}
|
||||
/* -------------------------------------------------
|
||||
ADDITIONS
|
||||
--------------------------------------------------*/
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.prompt {
|
||||
display: flex;
|
||||
width: 2em;
|
||||
border-right: 1px solid #c99034;
|
||||
// background-color: #f5d38b;
|
||||
background-color: $theme-supplementer;
|
||||
width: 4%;
|
||||
margin-bottom: 40px;
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
|
||||
.promptext {
|
||||
animation:blinkingText 0.8s infinite;
|
||||
// color: #975f04;
|
||||
// color: $themeColor-Light;
|
||||
text-align: center;
|
||||
line-height: 2em;
|
||||
font: 1.5em bolder;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.good {
|
||||
animation: anim .3s ease-in-out;
|
||||
}
|
||||
|
||||
.repoLink {
|
||||
color: #000;
|
||||
font-weight: bolder;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.headerprompt {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.logotext {
|
||||
color: $theme-supplementer;
|
||||
}
|
||||
|
||||
#content nav div.collapse li a.nav-link i.far {
|
||||
color: $theme-supplementer;
|
||||
font-size: 1.8em;
|
||||
padding: 0.2em;
|
||||
}
|
||||
|
||||
#loading-img {
|
||||
background: url(http://preloaders.net/preloaders/360/Velocity.gif) center center no-repeat;
|
||||
height: 100%;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
background: #e9e9e9;
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.loader {
|
||||
border: 0px solid #f3f3f3;
|
||||
border-radius: 50%;
|
||||
border-top: 2px solid #3498db;
|
||||
border-right: 2px solid #3498db;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
-webkit-animation: spin 2s linear infinite; /* Safari */
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
.card:not(.widget) {
|
||||
background: linear-gradient(to right, white, lightblue)
|
||||
}
|
||||
.light-red {
|
||||
// background:linear-gradient(white, lightblue);
|
||||
background: linear-gradient(to right, white, #dfc99a)
|
||||
}
|
||||
|
||||
// f3d98c
|
||||
.featureRequest {
|
||||
background-color : #007bff;
|
||||
color: white;
|
||||
font-size: 1.5em;
|
||||
padding: 10px 20px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
#featureRequest {
|
||||
position: fixed;
|
||||
bottom: 2em;
|
||||
right: 2.5em;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes anim {
|
||||
0% {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
}
|
||||
1% {
|
||||
display: block;
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes blinkingText {
|
||||
0%{ color: $themeColor-Light; }
|
||||
49%{ color: transparent; }
|
||||
50%{ color: transparent; }
|
||||
99%{ color:transparent; }
|
||||
100%{ color: $themeColor-Light; }
|
||||
}
|
||||
|
||||
/* --------------------------------------------------
|
||||
OVERRIDES
|
||||
--------------------------------------------------*/
|
||||
.btn:not(.featureRequest) {
|
||||
background-color: $theme-supplementer;
|
||||
color: $themeColor-Dark
|
||||
}
|
||||
|
||||
#content #header .navbar {
|
||||
width: 96%;
|
||||
}
|
||||
|
||||
.navbar-form {
|
||||
width: 88%;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
padding: .6rem 1em;
|
||||
}
|
||||
|
||||
.container-fluid {
|
||||
padding-left: 0.3em;
|
||||
}
|
||||
|
||||
.card-group {
|
||||
flex-direction:column;
|
||||
}
|
||||
|
||||
#command.form-control {
|
||||
width: 92%;
|
||||
}
|
||||
|
||||
.ml-auto {
|
||||
margin-left: 0!important;
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
border-color: orange;
|
||||
}
|
||||
|
||||
.btn-info:hover {
|
||||
border-color: orange;
|
||||
opacity: 1
|
||||
}
|
||||
z-index: 20;
|
||||
height: 100%;
|
||||
|
||||
a,
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding: 15px 10px;
|
||||
background: #fff;
|
||||
border: none;
|
||||
border-radius: 0 5px 5px 0;
|
||||
margin-bottom: 40px;
|
||||
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar-btn {
|
||||
box-shadow: none;
|
||||
outline: none !important;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
border-bottom: 1px dashed #ddd;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
i,
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------
|
||||
SIDEBAR STYLE
|
||||
----------------------------------------------------- */
|
||||
&#sidebar {
|
||||
min-width: 250px;
|
||||
max-width: 250px;
|
||||
background: $theme-supplementer;
|
||||
color: $themeColor-Dark;
|
||||
transition: all 0.3s;
|
||||
height: 100%;
|
||||
position:fixed;
|
||||
z-index: 10;
|
||||
left: -255px;
|
||||
ul li {
|
||||
&.active>a,
|
||||
a[aria-expanded="true"] {
|
||||
color: $theme-supplementer;
|
||||
background: $themeColor-Dark;
|
||||
}
|
||||
a {
|
||||
text-align: left;
|
||||
padding: 10px;
|
||||
font-size: 1.1em;
|
||||
display: block;
|
||||
:hover {
|
||||
color: #7386D5;
|
||||
background: #fff;
|
||||
}
|
||||
i {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
ul.components {
|
||||
padding: 20px 0;
|
||||
border-bottom: 3px solid $themeColor-Dark;
|
||||
}
|
||||
.sidebar-header {
|
||||
padding: 20px;
|
||||
background: $themeColor-Dark;
|
||||
h3 {
|
||||
display: inline;
|
||||
padding-left: 0.6em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
strong {
|
||||
display: none;
|
||||
font-size: 1.8em;
|
||||
}
|
||||
}
|
||||
.triangle {
|
||||
position: absolute;
|
||||
background-color: $theme-supplementer;
|
||||
opacity: 0.8;
|
||||
text-align: left;
|
||||
left: 6em;
|
||||
top: 50%;
|
||||
cursor: pointer;
|
||||
&:before {
|
||||
content: '';
|
||||
width: 20px;
|
||||
height: 50px;
|
||||
transform: skewY(25deg);
|
||||
background-color: $theme-supplementer;
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
&:after {
|
||||
content: '';
|
||||
width: 20px;
|
||||
height: 50px;
|
||||
transform: skewY(155deg);
|
||||
background-color: $theme-supplementer;
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
&.animation {
|
||||
animation: pulse 2s infinite;
|
||||
-ms-animation: pulse 2s infinite;
|
||||
-moz-animation: pulse 2s infinite;
|
||||
-webkit-animation: pulse 2s infinite;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
min-width: 80px;
|
||||
max-width: 80px;
|
||||
text-align: center;
|
||||
left: -85px;
|
||||
.dropdown-toggle::after {
|
||||
top: auto;
|
||||
bottom: 10px;
|
||||
right: 50%;
|
||||
-webkit-transform: translateX(50%);
|
||||
-ms-transform: translateX(50%);
|
||||
transform: translateX(50%);
|
||||
}
|
||||
ul {
|
||||
li a {
|
||||
padding: 20px 10px;
|
||||
text-align: center;
|
||||
font-size: 0.85em;
|
||||
i {
|
||||
margin-right: 0;
|
||||
display: block;
|
||||
font-size: 1.8em;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
ul a {
|
||||
padding: 10px !important;
|
||||
}
|
||||
}
|
||||
.sidebar-header {
|
||||
h3 {
|
||||
display: none;
|
||||
}
|
||||
strong {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.CTAs {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
from { background-color: $theme-supplementer; box-shadow: 0 0 9px rgba(255, 255, 255, 0.5); }
|
||||
50% { background-color: rgba(255, 255, 255, 0.5); box-shadow: 0 0 18px $theme-supplementer; }
|
||||
to { background-color: $theme-supplementer; box-shadow: 0 0 9px rgba(255, 255, 255, 0.5); }
|
||||
}
|
||||
|
||||
a[data-toggle="collapse"] {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown-toggle::after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 20px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
ul ul a {
|
||||
font-size: 0.9em !important;
|
||||
padding-left: 30px !important;
|
||||
background: white;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
ul.CTAs {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
ul.CTAs a {
|
||||
text-align: center;
|
||||
font-size: 0.9em !important;
|
||||
display: block;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
a.download {
|
||||
background: #fff;
|
||||
color: #7386D5;
|
||||
}
|
||||
|
||||
a.article,
|
||||
a.article:hover {
|
||||
background: #6d7fcc !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------
|
||||
CONTENT STYLE
|
||||
----------------------------------------------------- */
|
||||
|
||||
#content {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
min-height: 100vh;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------
|
||||
MEDIAQUERIES
|
||||
----------------------------------------------------- */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#sidebar {
|
||||
min-width: 80px;
|
||||
max-width: 80px;
|
||||
text-align: center;
|
||||
margin-left: -80px !important;
|
||||
// display: none;
|
||||
.active {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
.sidebar-header {
|
||||
h3, .CTAs {
|
||||
display: none;
|
||||
}
|
||||
strong {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
li a {
|
||||
padding: 20px 10px;
|
||||
span {
|
||||
font-size: 0.85em;
|
||||
}
|
||||
i {
|
||||
margin-right: 0;
|
||||
display: block;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
}
|
||||
ul a {
|
||||
padding: 10px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dropdown-toggle::after {
|
||||
top: auto;
|
||||
bottom: 10px;
|
||||
right: 50%;
|
||||
-webkit-transform: translateX(50%);
|
||||
-ms-transform: translateX(50%);
|
||||
transform: translateX(50%);
|
||||
}
|
||||
#sidebarCollapse span {
|
||||
display: none;
|
||||
}
|
||||
.text-muted {
|
||||
color: #bcb !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width: 576px) {
|
||||
.card-group>.card:first-child {
|
||||
border-top-right-radius: .25rem;
|
||||
border-bottom-right-radius: .25rem;
|
||||
}
|
||||
.card-group>.card:not(:first-child):not(:last-child):not(:only-child) {
|
||||
border-radius: .25rem;
|
||||
}
|
||||
.card-group>.card:last-child {
|
||||
border-top-left-radius: .25rem;
|
||||
border-bottom-left-radius: .25rem;
|
||||
}
|
||||
}
|
||||
/* -------------------------------------------------
|
||||
ADDITIONS
|
||||
--------------------------------------------------*/
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.prompt {
|
||||
display: flex;
|
||||
width: 2em;
|
||||
border-right: 1px solid #c99034;
|
||||
background-color: #f5d38b;
|
||||
width: 4%;
|
||||
margin-bottom: 40px;
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
|
||||
.promptext {
|
||||
animation:blinkingText 0.8s infinite;
|
||||
color: #975f04;
|
||||
text-align: center;
|
||||
line-height: 2em;
|
||||
font: 1.5em bolder;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.good {
|
||||
animation: anim .3s ease-in-out;
|
||||
}
|
||||
|
||||
.repoLink {
|
||||
color: #000;
|
||||
font-weight: bolder;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.headerprompt {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.logotext {
|
||||
color: $theme-supplementer;
|
||||
}
|
||||
|
||||
#content nav div.collapse li a.nav-link i.far {
|
||||
color: $theme-supplementer;
|
||||
font-size: 1.8em;
|
||||
padding: 0.2em;
|
||||
}
|
||||
|
||||
#loading-img {
|
||||
background: url(http://preloaders.net/preloaders/360/Velocity.gif) center center no-repeat;
|
||||
height: 100%;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
background: #e9e9e9;
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.loader {
|
||||
border: 0px solid #f3f3f3;
|
||||
border-radius: 50%;
|
||||
border-top: 2px solid #3498db;
|
||||
border-right: 2px solid #3498db;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
-webkit-animation: spin 2s linear infinite; /* Safari */
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
.card:not(.widget) {
|
||||
background: linear-gradient(to right, white, lightblue)
|
||||
}
|
||||
.light-red {
|
||||
// background:linear-gradient(white, lightblue);
|
||||
background: linear-gradient(to right, white, #dfc99a)
|
||||
}
|
||||
|
||||
// f3d98c
|
||||
.featureRequest {
|
||||
background-color : #007bff;
|
||||
color: white;
|
||||
font-size: 1.5em;
|
||||
padding: 10px 20px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
#featureRequest {
|
||||
position: fixed;
|
||||
bottom: 2em;
|
||||
right: 2.5em;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes anim {
|
||||
0% {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
}
|
||||
1% {
|
||||
display: block;
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes blinkingText {
|
||||
0%{ color: #000; }
|
||||
49%{ color: transparent; }
|
||||
50%{ color: transparent; }
|
||||
99%{ color:transparent; }
|
||||
100%{ color: #000; }
|
||||
}
|
||||
|
||||
/* --------------------------------------------------
|
||||
OVERRIDES
|
||||
--------------------------------------------------*/
|
||||
.btn:not(.featureRequest) {
|
||||
background-color: $theme-supplementer;
|
||||
color: $themeColor-Dark
|
||||
}
|
||||
|
||||
#content #header .navbar {
|
||||
width: 96%;
|
||||
}
|
||||
|
||||
.navbar-form {
|
||||
width: 88%;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
padding: .6rem 1em;
|
||||
}
|
||||
|
||||
.container-fluid {
|
||||
padding-left: 0.3em;
|
||||
}
|
||||
|
||||
.card-group {
|
||||
flex-direction:column;
|
||||
}
|
||||
|
||||
#command.form-control {
|
||||
width: 87%;
|
||||
}
|
||||
|
||||
.ml-auto {
|
||||
margin-left: 0!important;
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
border-color: orange;
|
||||
}
|
||||
|
||||
.btn-info:hover {
|
||||
border-color: orange;
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,30 @@
|
||||
import React from 'react';
|
||||
import React, {useEffect} from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import SideBarTab from './SideBarTab';
|
||||
import * as $ from 'jquery'
|
||||
|
||||
const SideBar = props => {
|
||||
|
||||
useEffect(() => {
|
||||
$('#sidebarCollapse').on('click', () => {
|
||||
$('#sidebar').toggleClass('active');
|
||||
$('.hideable').toggleClass('hide');
|
||||
});
|
||||
$('#sidebar.active > span').on('click', () => {
|
||||
$('#sidebar').css('transform', 'translateX(85px)');
|
||||
$('#sidebar').css('box-shadow', 'rgb(224, 151, 32) 10px 10px 30px');
|
||||
$('.triangle').removeClass('animation');
|
||||
});
|
||||
$('*').on('click', (e) => {
|
||||
// e.stopPropagation();
|
||||
if(e.target.id !== 'pullOutButton' && e.target.id !== 'sidebar') {
|
||||
$('#sidebar').css('transform', 'translateX(0px)');
|
||||
$('#sidebar').css('box-shadow', '');
|
||||
$('.triangle').addClass('animation');
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
const tabsData = [
|
||||
{'href': 'homeSubmenu', 'tabImage': 'fa-home', 'tabText': 'Home', 'activeClass': true, 'subList': false},
|
||||
{'href': 'about', 'tabImage': 'fa-briefcase', 'tabText': 'About', 'activeClass': false, 'subList': false},
|
||||
@@ -11,27 +33,25 @@ const SideBar = props => {
|
||||
{'href': 'question', 'tabImage': 'fa-question', 'tabText': 'FAQ', 'activeClass': false, 'subList': false},
|
||||
{'href': 'contact', 'tabImage': 'fa-paper-plane', 'tabText': 'Contact', 'activeClass': false, 'subList': false},
|
||||
]
|
||||
const tabItems = tabsData && tabsData.map((tab) => {
|
||||
return <SideBarTab tab={tab} />
|
||||
const tabItems = tabsData && tabsData.map((tab, index) => {
|
||||
return <SideBarTab tab={tab} key={index} />
|
||||
})
|
||||
return (
|
||||
<div className="c-SideBar">
|
||||
<nav id="sidebar" class="active">
|
||||
<div class="sidebar-header">
|
||||
<button type="button" id="sidebarCollapse" class="btn btn-info">
|
||||
<i class="fas fa-align-justify"></i>
|
||||
</button>
|
||||
<h3 class="logotext">Microbot</h3>
|
||||
</div>
|
||||
<ul class="list-unstyled components">
|
||||
{tabItems}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<nav id="sidebar" className="c-SideBar active">
|
||||
<span className="triangle animation" id="pullOutButton"></span>
|
||||
<div className="sidebar-header">
|
||||
<button type="button" id="sidebarCollapse" className="btn btn-info">
|
||||
<i className="fas fa-align-justify"></i>
|
||||
</button>
|
||||
<h3 className="logotext">Ecstatica</h3>
|
||||
</div>
|
||||
<ul className="list-unstyled components">
|
||||
{tabItems}
|
||||
</ul>
|
||||
</nav>
|
||||
)
|
||||
};
|
||||
|
||||
|
||||
SideBar.propTypes = {
|
||||
tabsData: PropTypes.array
|
||||
};
|
||||
|
||||
@@ -0,0 +1,107 @@
|
||||
.c-SideBarTab {
|
||||
|
||||
a,
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
i,
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------
|
||||
SIDEBAR STYLE
|
||||
----------------------------------------------------- */
|
||||
a:hover {
|
||||
color: #7386D5;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
a i {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&.active>a,
|
||||
a[aria-expanded="true"] {
|
||||
color: $theme-supplementer;
|
||||
background:$themeColor-Dark;
|
||||
}
|
||||
|
||||
a[data-toggle="collapse"] {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown-toggle::after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 20px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
a.article,
|
||||
a.article:hover {
|
||||
background: #6d7fcc !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------
|
||||
CONTENT STYLE
|
||||
----------------------------------------------------- */
|
||||
|
||||
#content {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
min-height: 100vh;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------
|
||||
MEDIAQUERIES
|
||||
----------------------------------------------------- */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#sidebar {
|
||||
min-width: 80px;
|
||||
max-width: 80px;
|
||||
text-align: center;
|
||||
margin-left: -80px !important;
|
||||
// display: none;
|
||||
}
|
||||
.dropdown-toggle::after {
|
||||
top: auto;
|
||||
bottom: 10px;
|
||||
right: 50%;
|
||||
-webkit-transform: translateX(50%);
|
||||
-ms-transform: translateX(50%);
|
||||
transform: translateX(50%);
|
||||
}
|
||||
a {
|
||||
padding: 20px 10px;
|
||||
}
|
||||
a span {
|
||||
font-size: 0.85em;
|
||||
}
|
||||
a i {
|
||||
margin-right: 0;
|
||||
display: block;
|
||||
}
|
||||
a i {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
}
|
||||
/* -------------------------------------------------
|
||||
ADDITIONS
|
||||
--------------------------------------------------*/
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------
|
||||
OVERRIDES
|
||||
--------------------------------------------------*/
|
||||
}
|
||||
@@ -4,8 +4,8 @@ import {Link} from 'react-router-dom'
|
||||
|
||||
const SideBarTab = ({tab}) => {
|
||||
return (
|
||||
<li className={tab.activeClass ? 'active' : ''}>
|
||||
<Link href={tab.href}>
|
||||
<li className={`${tab.activeClass ? 'active' : ''} c-SideBarTab` }>
|
||||
<Link to={tab.href}>
|
||||
<i className={`fas ${tab.tabImage}`}></i>
|
||||
<span className="hideable hide">{tab.tabText}</span>
|
||||
</Link>
|
||||
@@ -13,13 +13,13 @@ const SideBarTab = ({tab}) => {
|
||||
className="collapse list-unstyled"
|
||||
id="pageSubmenu">
|
||||
<li>
|
||||
<Link href="#">Repo</Link>
|
||||
<Link to="#">Repo</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="#">Issues</Link>
|
||||
<Link to="#">Issues</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="#">Admin</Link>
|
||||
<Link to="#">Admin</Link>
|
||||
</li>
|
||||
</ul>)}
|
||||
</li>
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
.c-SideBarTab {
|
||||
|
||||
}
|
||||
@@ -13,7 +13,7 @@ class SocialLogin extends React.Component{
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
gapi.signin2.render('g-signin2', {
|
||||
gapi && gapi.signin2 && gapi.signin2.render('g-signin2', {
|
||||
'scope': 'profile email',
|
||||
'width': this.width,
|
||||
'height': this.height,
|
||||
@@ -26,7 +26,7 @@ class SocialLogin extends React.Component{
|
||||
|
||||
onSuccess(googleUser) {
|
||||
console.log('Logged in as: ' + googleUser.getBasicProfile().getName());
|
||||
this.props.history.push('/home')
|
||||
// this.props.history.push('/home')
|
||||
}
|
||||
|
||||
onFailure(error) {
|
||||
|
||||
@@ -0,0 +1,312 @@
|
||||
.c-CommandPrompt {
|
||||
height: 100%;
|
||||
$max: 60px;
|
||||
|
||||
a,
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding: 15px 10px;
|
||||
// background: #222;
|
||||
background: rgba(120, 120, 120, 0.3);
|
||||
border: none;
|
||||
border-radius: 0 5px 5px 0;
|
||||
// margin-bottom: 40px;
|
||||
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.navbar-btn {
|
||||
box-shadow: none;
|
||||
outline: none !important;
|
||||
border: none;
|
||||
}
|
||||
|
||||
i,
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
&#header {
|
||||
#command {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.prompt {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
border-top-left-radius: .25rem;
|
||||
border-bottom-left-radius: .25rem;
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// &#header .navbar {
|
||||
// // width: 97%;
|
||||
// }
|
||||
|
||||
.good {
|
||||
animation: anim .3s ease-in-out;
|
||||
}
|
||||
|
||||
.repoLink {
|
||||
color: #000;
|
||||
font-weight: bolder;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&.headerprompt {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 10px 20px;
|
||||
.prompt {
|
||||
display: flex;
|
||||
width: 2em;
|
||||
// border-right: 1px solid #fff;
|
||||
// background-color: #f5d38b;
|
||||
background: rgba(120, 120, 120, 0.3);
|
||||
// background: #222;
|
||||
|
||||
width: 3%;
|
||||
// margin-bottom: 40px;
|
||||
border-radius: 4px 0 0 4px;
|
||||
.equalizer {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.hide {
|
||||
display: none !important;
|
||||
}
|
||||
.promptext {
|
||||
animation: blinkingText 0.8s infinite;
|
||||
color: #975f04;
|
||||
text-align: center;
|
||||
line-height: 2em;
|
||||
font: 1.5em bolder;
|
||||
margin: auto;
|
||||
margin-right: 3px;
|
||||
}
|
||||
.bar {
|
||||
fill: #00fc00;
|
||||
width: 7px;
|
||||
animation: equalize 4s 0s infinite;
|
||||
}
|
||||
.bar:nth-child(1) {animation-delay: -1.9s;}
|
||||
.bar:nth-child(2) {animation-delay: -2s;}
|
||||
.bar:nth-child(3) {animation-delay: -2.3s;}
|
||||
.bar:nth-child(4) {animation-delay: -2.4s;}
|
||||
.bar:nth-child(5) {animation-delay: -2.1s;}
|
||||
|
||||
@keyframes equalize {
|
||||
0% {height: 20px;}
|
||||
4% {height: 16px;}
|
||||
8% {height: 13px;}
|
||||
12% {height: 10px;}
|
||||
16% {height: 20px;}
|
||||
20% {height: 10px;}
|
||||
24% {height: 13px;}
|
||||
28% {height: 3px;}
|
||||
32% {height: 13px;}
|
||||
36% {height: 20px;}
|
||||
40% {height: 7px;}
|
||||
44% {height: 13px;}
|
||||
48% {height: 23px;}
|
||||
52% {height: 10px;}
|
||||
56% {height: 3px;}
|
||||
60% {height: 10px;}
|
||||
64% {height: 17px;}
|
||||
68% {height: 20px;}
|
||||
72% {height: 23px;}
|
||||
76% {height: 27px;}
|
||||
80% {height: 23px;}
|
||||
84% {height: 20px;}
|
||||
88% {height: 17px;}
|
||||
92% {height: 20px;}
|
||||
96% {height: 23px;}
|
||||
100% {height: 27px;}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nav div.collapse li a.nav-link i.far {
|
||||
color: $theme-supplementer;
|
||||
font-size: 1.8em;
|
||||
padding: 0.2em;
|
||||
}
|
||||
|
||||
#loading-img {
|
||||
background: url(http://preloaders.net/preloaders/360/Velocity.gif) center center no-repeat;
|
||||
height: 100%;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
background: #e9e9e9;
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.loader {
|
||||
border: 0px solid #f3f3f3;
|
||||
border-radius: 50%;
|
||||
border-top: 2px solid #3498db;
|
||||
border-right: 2px solid #3498db;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
-webkit-animation: spin 2s linear infinite;
|
||||
/* Safari */
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
|
||||
.card:not(.widget) {
|
||||
background: linear-gradient(to right, white, lightblue)
|
||||
}
|
||||
|
||||
.light-red {
|
||||
// background:linear-gradient(white, lightblue);
|
||||
background: linear-gradient(to right, white, #dfc99a)
|
||||
}
|
||||
|
||||
// f3d98c
|
||||
.featureRequest {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
font-size: 1.5em;
|
||||
padding: 10px 20px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
#featureRequest {
|
||||
position: fixed;
|
||||
bottom: 2em;
|
||||
right: 2.5em;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes anim {
|
||||
0% {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
1% {
|
||||
display: block;
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blinkingText {
|
||||
0% {
|
||||
color: $theme-supplementer;
|
||||
}
|
||||
|
||||
49% {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
50% {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
99% {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
100% {
|
||||
color: $theme-supplementer;
|
||||
}
|
||||
}
|
||||
|
||||
/* --------------------------------------------------
|
||||
OVERRIDES
|
||||
--------------------------------------------------*/
|
||||
.btn:not(.featureRequest) {
|
||||
background-color: $theme-supplementer;
|
||||
color: $themeColor-Dark
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
&#header .navbar {
|
||||
width: 97%;
|
||||
}
|
||||
.prompt {
|
||||
width: 3%;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-form {
|
||||
width: 88%;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
padding: .6rem 1em;
|
||||
}
|
||||
|
||||
.container-fluid {
|
||||
padding-left: 0.3em;
|
||||
}
|
||||
|
||||
.card-group {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#command.form-control {
|
||||
width: 87%;
|
||||
}
|
||||
|
||||
#faux {
|
||||
visibility: hidden;
|
||||
margin-right: 0;
|
||||
border-right: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.ml-auto {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
border-color: orange;
|
||||
}
|
||||
|
||||
.btn-info:hover {
|
||||
border-color: orange;
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.listening_indicator {
|
||||
background: black;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,249 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import * as $ from 'jquery'
|
||||
|
||||
class CommandPrompt extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.registerSpeechHandlers = this.registerSpeechHandlers.bind(this)
|
||||
this.registerMouseAndKeyboardHandlers = this.registerMouseAndKeyboardHandlers.bind(this)
|
||||
this.showContextMenu = this.showContextMenu.bind(this)
|
||||
this.initiateDomOpsOnEnter = this.initiateDomOpsOnEnter.bind(this)
|
||||
this.startSpeechRecognition = this.startSpeechRecognition.bind(this)
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.registerSpeechHandlers();
|
||||
this.registerMouseAndKeyboardHandlers();
|
||||
}
|
||||
|
||||
toggleClass(event) {
|
||||
$(event.target).toggleClass('fas');
|
||||
}
|
||||
|
||||
initiateDomOpsOnEnter(event) {
|
||||
const code = (event.keyCode ? event.keyCode : event.which);
|
||||
if (code === 13) {
|
||||
// this.domOpsService.hideNonCards();
|
||||
this.executeCommand();
|
||||
}
|
||||
}
|
||||
|
||||
resetCommand() {
|
||||
$('#command').val('');
|
||||
$('#command').focus();
|
||||
}
|
||||
|
||||
startSpeechRecognition() {
|
||||
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
|
||||
if(isChrome) {
|
||||
this.recognition.start();
|
||||
} else {
|
||||
// this.domOpsService.sho
|
||||
}
|
||||
}
|
||||
|
||||
registerSpeechHandlers() {
|
||||
let SpeechRecognition
|
||||
let instructions = $('#command')
|
||||
try {
|
||||
SpeechRecognition = window.SpeechRecognition || window.mozSpeechRecognition || window.msSpeechRecognition || window.webkitSpeechRecognition
|
||||
// SpeechRecognition = ''
|
||||
this.recognition = new SpeechRecognition()
|
||||
}
|
||||
catch(e) {
|
||||
console.error(e);
|
||||
$('.no-browser-support').show();
|
||||
$('.app').hide();
|
||||
}
|
||||
this.recognition.onstart = function() {
|
||||
instructions.val('Voice recognition activated. Try speaking into the microphone.');
|
||||
}
|
||||
|
||||
this.recognition.onspeechend = function() {
|
||||
instructions.val('You were quiet for a while so voice recognition turned itself off.');
|
||||
}
|
||||
|
||||
this.recognition.onerror = function(event) {
|
||||
if(event.error === 'no-speech') {
|
||||
instructions.val('No speech was detected. Try again.');
|
||||
};
|
||||
}
|
||||
|
||||
this.recognition.onresult = function(event) {
|
||||
let noteContent = "";
|
||||
let current = event.resultIndex;
|
||||
let transcript = event.results[current][0].transcript;
|
||||
let mobileRepeatBug = (current === 1 && transcript === event.results[0][0].transcript);
|
||||
if(!mobileRepeatBug) {
|
||||
noteContent += transcript;
|
||||
$('#command').val(noteContent);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
registerMouseAndKeyboardHandlers() {
|
||||
$('#content nav div.collapse li a.nav-link i.far.fa-star').hover(() => {
|
||||
$('#content nav div.collapse li a.nav-link i.far.fa-star').toggleClass('fas');
|
||||
});
|
||||
$('#content nav div.collapse li a.nav-link i.far.fa-trash-alt').hover(() => {
|
||||
$('#content nav div.collapse li a.nav-link i.far.fa-trash-alt').toggleClass('fas');
|
||||
});
|
||||
$('#content nav div.collapse li a.nav-link i.far.fa-paper-plane').hover(() => {
|
||||
$('#content nav div.collapse li a.nav-link i.far.fa-paper-plane').toggleClass('fas');
|
||||
});
|
||||
$('*').on('click', (event) => {
|
||||
if(!this.contextMenuFirstDisplay) {
|
||||
$("#inputSelectionContextMenu").removeClass("show").hide();
|
||||
this.contextMenuDisplayed = false;
|
||||
// event.stopPropagation();
|
||||
} else {
|
||||
this.contextMenuFirstDisplay = false;
|
||||
// event.stopPropagation();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
executeCommand() {
|
||||
// this.domOpsService.hideNonCards();
|
||||
// let commandVal = this.command.nativeElement.value;
|
||||
// if(!commandVal) {
|
||||
// this.domOpsService.showEmptyCommandMessage(this.emptyCommandMessage);
|
||||
// } else {
|
||||
// let card = this.cardsService.getCommandCard($config.intentSlugToOperations.command.cardTitle, commandVal, {}, "command");
|
||||
// let commandAction = new Command(card);
|
||||
// this.store.dispatch(commandAction);
|
||||
// const text = { text: commandVal };
|
||||
// let recastResponse = this.recastOpsService.getRecastResponse(commandVal, text);
|
||||
// this.processRecastResponse(recastResponse);
|
||||
// }
|
||||
}
|
||||
|
||||
// processRecastResponse(recastResponse: any) {
|
||||
// let bodyRelevant: any;
|
||||
// let intent: any = "";
|
||||
// let assuredIntentFactor = 0.6;
|
||||
// recastResponse.then((body) => {
|
||||
// bodyRelevant = body.results;
|
||||
// let intents = bodyRelevant ? bodyRelevant.intents : "";
|
||||
// if(intents) {
|
||||
// if(intents.length == 1) {
|
||||
// intent = intents[0];
|
||||
// } else if(intents.length > 1) {
|
||||
// let reducer = (probableIntent, currIntent) => probableIntent.confidence >= currIntent.confidence ? probableIntent : currIntent;
|
||||
// intent = intents.reduce(reducer, intents[0]);
|
||||
// } else {
|
||||
// this.domOpsService.showEmptyCommandMessage("Intent is either not Identified or is not supported, please try again with a different text.");
|
||||
// return;
|
||||
// }
|
||||
// if (intent && intent.confidence > assuredIntentFactor) {
|
||||
// let intentSlug = intent.slug;
|
||||
// if (!Object.keys($config.intentSlugToOperations).includes(intentSlug)) {
|
||||
// this.domOpsService.showEmptyCommandMessage("Intent is either not Identified or is not supported, please try again with a different text.");
|
||||
// return;
|
||||
// }
|
||||
// // $(`#${$config.constants.hiddenIntentFieldId}`).val(intent);
|
||||
// window.localStorage.setItem($config.constants.hiddenIntentFieldId, intentSlug);
|
||||
// this.domOpsService.displayIntentBox(intentSlug);
|
||||
// if (intentSlug == "resethistory") {
|
||||
// let card = this.cardsService.getResponseCard($config.intentSlugToOperations.resethistory.cardTitle,
|
||||
// $config.intentSlugToOperations.resethistory.cardMsg, {}, "response");
|
||||
// card.insertionCounter = 0;
|
||||
// let resetHistoryResponseAction = new ClearHistory(card);
|
||||
// this.store.dispatch(resetHistoryResponseAction);
|
||||
// return;
|
||||
// }
|
||||
// this.domOpsService.widgetIdentified.emit({widget: intentSlug, bodyRelevant: bodyRelevant});
|
||||
// this.domOpsService.populateRecastData(intentSlug, bodyRelevant);
|
||||
// // store.dispatch($config.intentSlugToOperations.addquery.action);
|
||||
// } else {
|
||||
// this.domOpsService.showEmptyCommandMessage("Couldn't conform with the required confidence level of the intent match, please try again.");
|
||||
// }
|
||||
// } else {
|
||||
// this.domOpsService.showEmptyCommandMessage("There seems to be an error in the Recast Response, as intents are not returned.");
|
||||
// return;
|
||||
// }
|
||||
// });
|
||||
|
||||
// }
|
||||
|
||||
showContextMenu(event) {
|
||||
if(this.contextMenuDisplayed === true) {
|
||||
return;
|
||||
}
|
||||
var inputField = event.target;
|
||||
if(inputField.value.length > 2 && inputField.selectionStart === 0 && inputField.selectionEnd === inputField.value.length) {
|
||||
var top = event.pageY - 10;
|
||||
var left = event.pageX - 90;
|
||||
$("#inputSelectionContextMenu").css({
|
||||
display: "block",
|
||||
top: top,
|
||||
left: left
|
||||
}).addClass("show");
|
||||
this.contextMenuFirstDisplay = true;
|
||||
this.contextMenuDisplayed = true;
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div id="header" className="c-CommandPrompt headerprompt" onDragEnd={this.showContextMenu}>
|
||||
<div className="prompt">
|
||||
<p className="promptext">$_</p>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="equalizer hide" viewBox="0 0 80 80">
|
||||
<rect className="bar" transform="translate(13,30)"></rect>
|
||||
<rect className="bar" transform="translate(25,30)"></rect>
|
||||
<rect className="bar" transform="translate(37,30)"></rect>
|
||||
<rect className="bar" transform="translate(49,30)"></rect>
|
||||
<rect className="bar" transform="translate(61,30)"></rect>
|
||||
</svg>
|
||||
</div>
|
||||
<nav className="navbar navbar-expand-lg navbar-light">
|
||||
<div className="container-fluid">
|
||||
<input type="text" className="form-control" placeholder="What you need..."
|
||||
name="command" id="command" onKeyUp={this.initiateDomOpsOnEnter}
|
||||
// onClick={showContextMenu} #command>
|
||||
onClick={this.showContextMenu} />
|
||||
<div className="dropdown-menu" aria-labelledby="dropdownMenuButton" id="inputSelectionContextMenu">
|
||||
<a className="dropdown-item">Fire</a>
|
||||
<a className="dropdown-item" onClick={this.resetCommand}>Clear</a>
|
||||
<a className="dropdown-item">Add to Favorites</a>
|
||||
</div>
|
||||
<div className="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul className="nav navbar-nav ml-auto">
|
||||
<li id="btnFavorites" className="nav-item">
|
||||
<a className="nav-link">
|
||||
<i className="far fa-star" onMouseEnter={this.toggleClass} onMouseLeave={this.toggleClass}></i>
|
||||
</a>
|
||||
</li>
|
||||
<li id="btnClearCommand" className="nav-item" onClick={this.resetCommand}>
|
||||
<a className="nav-link">
|
||||
<i className="far fa-trash-alt" onMouseEnter={this.toggleClass} onMouseLeave={this.toggleClass}></i>
|
||||
</a>
|
||||
</li>
|
||||
<li id="btnFireCommand" className="nav-item">
|
||||
<a className="nav-link">
|
||||
<i className="far fa-paper-plane" onMouseEnter={this.toggleClass} onMouseLeave={this.toggleClass}></i>
|
||||
</a>
|
||||
</li>
|
||||
<li id="btnSTTCommand" className="nav-item" onClick={this.startSpeechRecognition}>
|
||||
<a className="nav-link">
|
||||
<i className="far fa-microphone fas"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<input type="hidden" id="intentHidden" value="createissue" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
CommandPrompt.propTypes = {
|
||||
|
||||
};
|
||||
|
||||
export default CommandPrompt;
|
||||
@@ -0,0 +1,8 @@
|
||||
import React from 'react';
|
||||
import CommandPrompt from './CommandPrompt';
|
||||
|
||||
describe('CommandPrompt', () => {
|
||||
it('renders without error', () => {
|
||||
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,3 @@
|
||||
import CommandPrompt from './CommandPrompt';
|
||||
|
||||
export default CommandPrompt;
|
||||
@@ -1,3 +0,0 @@
|
||||
<div class="background-image"></div>
|
||||
<app-header></app-header>
|
||||
<app-image-container></app-image-container>
|
||||
@@ -1,17 +0,0 @@
|
||||
:host {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.background-image {
|
||||
background-image: url("/assets/images/BG.jpg");
|
||||
background-size: cover;
|
||||
-webkit-background-size: cover;
|
||||
display: block;
|
||||
filter: blur(15px);
|
||||
-webkit-filter: blur(15px);
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
/* z-index: 1; */
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-content',
|
||||
templateUrl: './content.component.html',
|
||||
styleUrls: ['./content.component.scss']
|
||||
})
|
||||
export class ContentComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
<div id="content" class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10">
|
||||
<app-search></app-search>
|
||||
</div>
|
||||
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 custom-app-tools">
|
||||
<app-tools></app-tools>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,26 +0,0 @@
|
||||
$themeColor-Light: #EEE2DC;
|
||||
// $themeColor-Dark:#252525;
|
||||
$themeColor-Dark:#E3E2DF;
|
||||
$theme-font: verdana, sans-serif;
|
||||
// $theme-supplementer: #f39c12;
|
||||
$theme-supplementer: #5D001E;
|
||||
|
||||
// app-root {
|
||||
// font-family: 'Poppins', sans-serif;
|
||||
// background-color: $themeColor-Dark;
|
||||
// }
|
||||
|
||||
:host {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
//OVERWRITES
|
||||
.container-fluid {
|
||||
padding-right: 0px;
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.custom-app-tools {
|
||||
padding: 0;
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
import { Component, OnInit, HostBinding } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-header',
|
||||
templateUrl: './header.component.html',
|
||||
styleUrls: ['./header.component.scss']
|
||||
})
|
||||
export class HeaderComponent implements OnInit {
|
||||
|
||||
@HostBinding('class.container-fluid') expand: boolean = false;
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
this.expand = true;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
<div class="searchbar">
|
||||
<div class="prompt">
|
||||
<p class="promptext">$_</p>
|
||||
</div>
|
||||
<input type="text" class="container-fluid" placeholder="What you need..." name="command" id="command">
|
||||
</div>
|
||||
@@ -1,40 +0,0 @@
|
||||
$themeColor-Light: #EEE2DC;
|
||||
// $themeColor-Dark:#252525;
|
||||
$themeColor-Dark:#E3E2DF;
|
||||
$theme-font: verdana, sans-serif;
|
||||
// $theme-supplementer: #f39c12;
|
||||
$theme-supplementer: #5D001E;
|
||||
$theme-supplementer-transparent: rgba(93,0,30,0.3);
|
||||
|
||||
.searchbar {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.prompt {
|
||||
display: flex;
|
||||
padding: 0.9em;
|
||||
// border-right: 1px solid #c99034;
|
||||
background-color: $theme-supplementer-transparent;
|
||||
width: 4%;
|
||||
// margin-bottom: 40px;
|
||||
border-radius: 0.4em 0 0 0.4em;
|
||||
}
|
||||
|
||||
.promptext {
|
||||
animation: blinkingText 0.8s infinite;
|
||||
text-align: center;
|
||||
line-height: 2em;
|
||||
font: 1.2em bolder;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
input[type=text] {
|
||||
padding: 15px;
|
||||
border-radius: 0 0.4em 0.4em 0;
|
||||
}
|
||||
|
||||
// OVERWRITES
|
||||
.container-fluid {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-search',
|
||||
templateUrl: './search.component.html',
|
||||
styleUrls: ['./search.component.scss']
|
||||
})
|
||||
export class SearchComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
<div class="navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="nav ml-auto">
|
||||
<li id="btnFavorites" class="nav-item float-right">
|
||||
<a class="nav-link" href="#">
|
||||
<i class="material-icons md-light md-36">star</i>
|
||||
<!-- <i class="far fa-star"></i> -->
|
||||
</a>
|
||||
</li>
|
||||
<li id="btnClearCommand" class="nav-item float-right">
|
||||
<a class="nav-link" href="#">
|
||||
<i class="material-icons md-light md-36">delete_outline</i>
|
||||
<!-- <i class="far fa-trash-alt"></i> -->
|
||||
</a>
|
||||
</li>
|
||||
<li id="btnFireCommand" class="nav-item float-right">
|
||||
<a class="nav-link" href="#">
|
||||
<i class="material-icons md-light md-36">arrow_forward_ios</i>
|
||||
<!-- <i class="far fa-paper-plane"></i> -->
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -1,40 +0,0 @@
|
||||
$themeColor-Light: #EEE2DC;
|
||||
// $themeColor-Dark:#252525;
|
||||
$themeColor-Dark:#E3E2DF;
|
||||
$theme-font: verdana, sans-serif;
|
||||
// $theme-supplementer: #f39c12;
|
||||
$theme-supplementer: #5D001E;
|
||||
|
||||
|
||||
a,
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
|
||||
a[data-toggle="collapse"] {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
div.navbar-collapse li {
|
||||
float: left;
|
||||
a.nav-link i.far {
|
||||
color: $themeColor-Light;
|
||||
font-size: 1.6em;
|
||||
padding: 0.2em;
|
||||
}
|
||||
}
|
||||
|
||||
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
|
||||
.material-icons.md-36 { font-size: 36px; }
|
||||
|
||||
//OVERWRITES
|
||||
.nav-link {
|
||||
padding: .7rem 0.5rem;
|
||||
}
|
||||
|
||||
ul.nav { display: flex;}
|
||||
ul.nav li { margin: auto; }
|
||||
@@ -1,15 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-tools',
|
||||
templateUrl: './tools.component.html',
|
||||
styleUrls: ['./tools.component.scss']
|
||||
})
|
||||
export class ToolsComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class UploadService {
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
<p>
|
||||
upload works!
|
||||
</p>
|
||||
@@ -1,15 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-upload',
|
||||
templateUrl: './upload.component.html',
|
||||
styleUrls: ['./upload.component.css']
|
||||
})
|
||||
export class UploadComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
<p>
|
||||
home works!
|
||||
</p>
|
||||
@@ -1,15 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-home',
|
||||
templateUrl: './home.component.html',
|
||||
styleUrls: ['./home.component.scss']
|
||||
})
|
||||
export class HomeComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<app-image
|
||||
class="image"
|
||||
*ngFor="let image of images"
|
||||
[image]='image'>
|
||||
</app-image>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,22 +0,0 @@
|
||||
p {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.row:after {
|
||||
content: ''; width: 100%;
|
||||
}
|
||||
.box {
|
||||
flex: 1;
|
||||
}
|
||||
.box:nth-of-type(n + 4) {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
:host {
|
||||
margin: auto;
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
import { Component, OnInit, Output } from '@angular/core';
|
||||
import { Image } from '../image';
|
||||
|
||||
@Component({
|
||||
selector: 'app-image-container',
|
||||
templateUrl: './image-container.component.html',
|
||||
styleUrls: ['./image-container.component.scss']
|
||||
})
|
||||
export class ImageContainerComponent implements OnInit {
|
||||
@Output() images: Image[] = [
|
||||
new Image('dragonfly1', '/assets/images/GUD_1.JPG', 'Guddu 1'),
|
||||
new Image('dragonfly2', '/assets/images/GUD_2.JPG', 'sampleDesc2'),
|
||||
new Image('dragonfly3', '/assets/images/GUD_3.JPG', 'sampleDesc3'),
|
||||
new Image('dragonfly4', '/assets/images/GUD_4.JPG', 'sampleDesc4'),
|
||||
new Image('dragonfly1', '/assets/images/GUD_5.JPG', 'sampleDesc1'),
|
||||
new Image('dragonfly2', '/assets/images/GUD_6.JPG', 'sampleDesc2'),
|
||||
new Image('dragonfly3', '/assets/images/GUD_7.JPG', 'sampleDesc3'),
|
||||
new Image('dragonfly4', '/assets/images/GUD_8.JPG', 'sampleDesc4'),
|
||||
new Image('dragonfly1', '/assets/images/GUD_9.JPG', 'sampleDesc1'),
|
||||
new Image('dragonfly2', '/assets/images/GUD_10.JPG', 'sampleDesc2'),
|
||||
new Image('dragonfly3', '/assets/images/GUD_11.JPG', 'sampleDesc3'),
|
||||
new Image('dragonfly4', '/assets/images/GUD_12.JPG', 'sampleDesc4'),
|
||||
new Image('dragonfly1', '/assets/images/GUD_4.JPG', 'sampleDesc1'),
|
||||
new Image('dragonfly2', '/assets/images/GUD_3.JPG', 'sampleDesc2'),
|
||||
new Image('dragonfly3', '/assets/images/GUD_2.JPG', 'sampleDesc3'),
|
||||
new Image('dragonfly4', '/assets/images/GUD_1.JPG', 'sampleDesc4')
|
||||
]
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
<p>
|
||||
description works!
|
||||
</p>
|
||||
@@ -1,15 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-description',
|
||||
templateUrl: './description.component.html',
|
||||
styleUrls: ['./description.component.css']
|
||||
})
|
||||
export class DescriptionComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
<p>
|
||||
horizontal-image works!
|
||||
</p>
|
||||
@@ -1,15 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-horizontal-image',
|
||||
templateUrl: './horizontal-image.component.html',
|
||||
styleUrls: ['./horizontal-image.component.css']
|
||||
})
|
||||
export class HorizontalImageComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
<!-- <div class="card">
|
||||
<img class="card-img-top" src="{{image.imageUrl}}" alt="Card image cap">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">{{image.imageTitle}}</h5>
|
||||
<p class="card-text">{{image.imageDescription}}</p>
|
||||
</div>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item">Cras justo odio</li>
|
||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||||
<li class="list-group-item">Vestibulum at eros</li>
|
||||
</ul>
|
||||
<div class="card-body">
|
||||
<a href="#" class="card-link">Card link</a>
|
||||
<a href="#" class="card-link">Another link</a>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<mat-card class="card">
|
||||
<mat-card-header>
|
||||
<div mat-card-avatar [ngStyle]="{background: 'url(' + image.imageUrl + ')'}" class="header-image"></div>
|
||||
<mat-card-title>{{image.imageTitle}}</mat-card-title>
|
||||
<mat-card-subtitle>Nature</mat-card-subtitle>
|
||||
</mat-card-header>
|
||||
<img mat-card-image src="{{image.imageUrl}}" alt="Photo of a Shiba Inu">
|
||||
<mat-card-content>
|
||||
<p>{{image.imageDescription}}</p>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<button mat-button>LIKE</button>
|
||||
<button mat-button>SHARE</button>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
<mat-divider></mat-divider>
|
||||
@@ -1,36 +0,0 @@
|
||||
//OVERWRITES
|
||||
:host {
|
||||
margin: 0 1em;
|
||||
overflow: auto;
|
||||
}
|
||||
// .card {
|
||||
// width: 20rem;
|
||||
// margin: 20px auto;
|
||||
// overflow: auto
|
||||
// }
|
||||
|
||||
.card {
|
||||
// width: 20rem;
|
||||
width: 100%;
|
||||
margin: 20px auto;
|
||||
overflow: auto
|
||||
}
|
||||
|
||||
// .image-card {
|
||||
// max-width: 400px;
|
||||
// }
|
||||
|
||||
// .image {
|
||||
// background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
|
||||
// background-size: cover;
|
||||
// max-width: 400px;
|
||||
// }
|
||||
|
||||
.header-image {
|
||||
// background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
mat-divider {
|
||||
margin: 1em 0;
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
import { Component, OnInit, Input, HostBinding } from '@angular/core';
|
||||
import { Image } from '../../image';
|
||||
|
||||
@Component({
|
||||
selector: 'app-image',
|
||||
templateUrl: './image.component.html',
|
||||
styleUrls: ['./image.component.scss']
|
||||
})
|
||||
export class ImageComponent implements OnInit {
|
||||
|
||||
@Input() image: Image;
|
||||
@HostBinding('class.col-lg-2') quarter = false;
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
this.quarter = true;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
<p>
|
||||
picture works!
|
||||
</p>
|
||||
@@ -1,15 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-picture',
|
||||
templateUrl: './picture.component.html',
|
||||
styleUrls: ['./picture.component.css']
|
||||
})
|
||||
export class PictureComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
<p>
|
||||
vertical-image works!
|
||||
</p>
|
||||
@@ -1,15 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-vertical-image',
|
||||
templateUrl: './vertical-image.component.html',
|
||||
styleUrls: ['./vertical-image.component.css']
|
||||
})
|
||||
export class VerticalImageComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
<p>
|
||||
image-slider works!
|
||||
</p>
|
||||
@@ -1,15 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-image-slider',
|
||||
templateUrl: './image-slider.component.html',
|
||||
styleUrls: ['./image-slider.component.css']
|
||||
})
|
||||
export class ImageSliderComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
<p>
|
||||
image-viewer works!
|
||||
</p>
|
||||
@@ -1,15 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-image-viewer',
|
||||
templateUrl: './image-viewer.component.html',
|
||||
styleUrls: ['./image-viewer.component.css']
|
||||
})
|
||||
export class ImageViewerComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
<p>
|
||||
image works!
|
||||
</p>
|
||||
@@ -1,15 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-image',
|
||||
templateUrl: './image.component.html',
|
||||
styleUrls: ['./image.component.scss']
|
||||
})
|
||||
export class ImageComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
export class Image {
|
||||
imageTitle: string;
|
||||
imageUrl: string;
|
||||
imageDescription: string;
|
||||
|
||||
constructor(imageTitle, imageUrl, imageDescription) {
|
||||
this.imageTitle = imageTitle;
|
||||
this.imageUrl = imageUrl;
|
||||
this.imageDescription = imageDescription;
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user