diff --git a/package-lock.json b/package-lock.json index db245f4..e868c60 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1835,6 +1835,11 @@ "repeat-element": "1.1.2" } }, + "brcast": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/brcast/-/brcast-3.0.1.tgz", + "integrity": "sha512-eI3yqf9YEqyGl9PCNTR46MGvDylGtaHjalcz6Q3fAPnP/PhpKkkve52vFdfGpwp4VUvK6LUr4TQN+2stCrEwTg==" + }, "bricks.js": { "version": "1.8.0", "resolved": "https://registry.npmjs.org/bricks.js/-/bricks.js-1.8.0.tgz", @@ -2705,6 +2710,14 @@ } } }, + "css-vendor": { + "version": "0.3.8", + "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-0.3.8.tgz", + "integrity": "sha1-ZCHP0wNM5mT+dnOXL9ARn8KJQfo=", + "requires": { + "is-in-browser": "1.1.3" + } + }, "css-what": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.0.tgz", @@ -2906,6 +2919,11 @@ "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz", "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=" }, + "deepmerge": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.0.1.tgz", + "integrity": "sha512-VIPwiMJqJ13ZQfaCsIFnp5Me9tnjURiaIFxfz7EH0Ci0dTSQpZtSLrqOicXqEd/z2r+z+Klk9GzmnRsgpgbOsQ==" + }, "default-require-extensions": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/default-require-extensions/-/default-require-extensions-1.0.0.tgz", @@ -6816,6 +6834,11 @@ "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=" }, + "is-function": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.1.tgz", + "integrity": "sha1-Es+5i2W1fdPRk6MSH19uL0N2ArU=" + }, "is-glob": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz", @@ -6824,6 +6847,11 @@ "is-extglob": "1.0.0" } }, + "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-npm": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-npm/-/is-npm-1.0.0.tgz", @@ -6868,6 +6896,21 @@ "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz", "integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4=" }, + "is-plain-object": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz", + "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==", + "requires": { + "isobject": "3.0.1" + }, + "dependencies": { + "isobject": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz", + "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=" + } + } + }, "is-posix-bracket": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz", @@ -7521,6 +7564,108 @@ } } }, + "jss": { + "version": "9.8.0", + "resolved": "https://registry.npmjs.org/jss/-/jss-9.8.0.tgz", + "integrity": "sha512-1E9pn6k1Qd1BxKz845supoedukHuwMeBiqybCQV9l60v8JE7owkZSvVJfjw3wm50SjG1C/ABPtQ8PrGfhfrzLw==", + "requires": { + "is-in-browser": "1.1.3", + "symbol-observable": "1.2.0", + "warning": "3.0.0" + }, + "dependencies": { + "symbol-observable": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz", + "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==" + } + } + }, + "jss-camel-case": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/jss-camel-case/-/jss-camel-case-6.1.0.tgz", + "integrity": "sha512-HPF2Q7wmNW1t79mCqSeU2vdd/vFFGpkazwvfHMOhPlMgXrJDzdj9viA2SaHk9ZbD5pfL63a8ylp4++irYbbzMQ==", + "requires": { + "hyphenate-style-name": "1.0.2" + } + }, + "jss-compose": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/jss-compose/-/jss-compose-5.0.0.tgz", + "integrity": "sha512-YofRYuiA0+VbeOw0VjgkyO380sA4+TWDrW52nSluD9n+1FWOlDzNbgpZ/Sb3Y46+DcAbOS21W5jo6SAqUEiuwA==", + "requires": { + "warning": "3.0.0" + } + }, + "jss-default-unit": { + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/jss-default-unit/-/jss-default-unit-8.0.2.tgz", + "integrity": "sha512-WxNHrF/18CdoAGw2H0FqOEvJdREXVXLazn7PQYU7V6/BWkCV0GkmWsppNiExdw8dP4TU1ma1dT9zBNJ95feLmg==" + }, + "jss-expand": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/jss-expand/-/jss-expand-5.1.0.tgz", + "integrity": "sha512-WTxmNipgj0V8kr8gc8Gc6Et7uQZH60H7FFNG9zZHjR6TPJoj7TDK+/EBxwRHtCRQD4B8RTwoa7MyEKD4ReKfXw==" + }, + "jss-extend": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/jss-extend/-/jss-extend-6.2.0.tgz", + "integrity": "sha512-YszrmcB6o9HOsKPszK7NeDBNNjVyiW864jfoiHoMlgMIg2qlxKw70axZHqgczXHDcoyi/0/ikP1XaHDPRvYtEA==", + "requires": { + "warning": "3.0.0" + } + }, + "jss-global": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/jss-global/-/jss-global-3.0.0.tgz", + "integrity": "sha512-wxYn7vL+TImyQYGAfdplg7yaxnPQ9RaXY/cIA8hawaVnmmWxDHzBK32u1y+RAvWboa3lW83ya3nVZ/C+jyjZ5Q==" + }, + "jss-nested": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/jss-nested/-/jss-nested-6.0.1.tgz", + "integrity": "sha512-rn964TralHOZxoyEgeq3hXY8hyuCElnvQoVrQwKHVmu55VRDd6IqExAx9be5HgK0yN/+hQdgAXQl/GUrBbbSTA==", + "requires": { + "warning": "3.0.0" + } + }, + "jss-preset-default": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/jss-preset-default/-/jss-preset-default-4.3.0.tgz", + "integrity": "sha512-3VqMmR07OkiGyVPHfke/sjR33kSyRVjIE/3+bGgJ9Pp1jMIAPIDDY3h3wfEwa97DFV25SncTrNjjIgBFVCb4BA==", + "requires": { + "jss-camel-case": "6.1.0", + "jss-compose": "5.0.0", + "jss-default-unit": "8.0.2", + "jss-expand": "5.1.0", + "jss-extend": "6.2.0", + "jss-global": "3.0.0", + "jss-nested": "6.0.1", + "jss-props-sort": "6.0.0", + "jss-template": "1.0.1", + "jss-vendor-prefixer": "7.0.0" + } + }, + "jss-props-sort": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/jss-props-sort/-/jss-props-sort-6.0.0.tgz", + "integrity": "sha512-E89UDcrphmI0LzmvYk25Hp4aE5ZBsXqMWlkFXS0EtPkunJkRr+WXdCNYbXbksIPnKlBenGB9OxzQY+mVc70S+g==" + }, + "jss-template": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/jss-template/-/jss-template-1.0.1.tgz", + "integrity": "sha512-m5BqEWha17fmIVXm1z8xbJhY6GFJxNB9H68GVnCWPyGYfxiAgY9WTQyvDAVj+pYRgrXSOfN5V1T4+SzN1sJTeg==", + "requires": { + "warning": "3.0.0" + } + }, + "jss-vendor-prefixer": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/jss-vendor-prefixer/-/jss-vendor-prefixer-7.0.0.tgz", + "integrity": "sha512-Agd+FKmvsI0HLcYXkvy8GYOw3AAASBUpsmIRvVQheps+JWaN892uFOInTr0DRydwaD91vSSUCU4NssschvF7MA==", + "requires": { + "css-vendor": "0.3.8" + } + }, "jsx-ast-utils": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-1.4.1.tgz", @@ -7895,6 +8040,71 @@ "recompose": "0.26.0" } }, + "material-ui-next": { + "version": "git+https://github.com/uplevel-technology/material-ui-next.git#95d2e862c4c73760264f59331ac7da2104aaac9a", + "requires": { + "babel-runtime": "6.26.0", + "brcast": "3.0.1", + "classnames": "2.2.5", + "deepmerge": "2.0.1", + "dom-helpers": "3.2.1", + "hoist-non-react-statics": "2.3.1", + "jss": "9.8.0", + "jss-preset-default": "4.3.0", + "keycode": "2.1.9", + "lodash": "4.17.4", + "normalize-scroll-left": "0.1.2", + "prop-types": "15.6.1", + "react-event-listener": "0.5.3", + "react-flow-types": "0.2.0-beta.6", + "react-jss": "8.3.3", + "react-popper": "0.7.5", + "react-scrollbar-size": "2.1.0", + "react-transition-group": "2.2.1", + "recompose": "0.26.0", + "scroll": "2.0.3", + "warning": "3.0.0" + }, + "dependencies": { + "fbjs": { + "version": "0.8.16", + "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.16.tgz", + "integrity": "sha1-XmdDL1UNxBtXK/VYR7ispk5TN9s=", + "requires": { + "core-js": "1.2.7", + "isomorphic-fetch": "2.2.1", + "loose-envify": "1.3.1", + "object-assign": "4.1.1", + "promise": "7.3.1", + "setimmediate": "1.0.5", + "ua-parser-js": "0.7.14" + } + }, + "prop-types": { + "version": "15.6.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.1.tgz", + "integrity": "sha512-4ec7bY1Y66LymSUOH/zARVYObB23AT2h8cf6e/O6ZALB/N0sqZFEx7rq6EYPX2MkOdKORuooI/H5k9TlR4q7kQ==", + "requires": { + "fbjs": "0.8.16", + "loose-envify": "1.3.1", + "object-assign": "4.1.1" + } + }, + "react-transition-group": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.2.1.tgz", + "integrity": "sha512-q54UBM22bs/CekG8r3+vi9TugSqh0t7qcEVycaRc9M0p0aCEu+h6rp/RFiW7fHfgd1IKpd9oILFTl5QK+FpiPA==", + "requires": { + "chain-function": "1.0.0", + "classnames": "2.2.5", + "dom-helpers": "3.2.1", + "loose-envify": "1.3.1", + "prop-types": "15.6.1", + "warning": "3.0.0" + } + } + } + }, "math-expression-evaluator": { "version": "1.2.17", "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz", @@ -8243,6 +8453,11 @@ "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz", "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=" }, + "normalize-scroll-left": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/normalize-scroll-left/-/normalize-scroll-left-0.1.2.tgz", + "integrity": "sha512-F9YMRls0zCF6BFIE2YnXDRpHPpfd91nOIaNdDgrx5YMoPLo8Wqj+6jNXHQsYBavJeXP4ww8HCt0xQAKc5qk2Fg==" + }, "normalize-url": { "version": "1.9.1", "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-1.9.1.tgz", @@ -8666,6 +8881,11 @@ "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-4.0.0.tgz", "integrity": "sha1-WbcIwcAZCi9pLxx2GMRGsFL9F2I=" }, + "popper.js": { + "version": "1.12.9", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.12.9.tgz", + "integrity": "sha1-DfvC3/lsRRuzMu3Pz6r1ZtMx1bM=" + }, "portfinder": { "version": "1.0.13", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.13.tgz", @@ -9946,6 +10166,14 @@ "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-0.0.4.tgz", "integrity": "sha1-DPf4T5Rj/wrlHExLFC2VvjdyTZw=" }, + "rafl": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/rafl/-/rafl-1.2.2.tgz", + "integrity": "sha1-/pMPdYIRAg1H44gV9Rlqi+QVB0A=", + "requires": { + "global": "4.3.2" + } + }, "randomatic": { "version": "1.1.7", "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-1.1.7.tgz", @@ -10237,6 +10465,11 @@ "prop-types": "15.5.10" } }, + "react-flow-types": { + "version": "0.2.0-beta.6", + "resolved": "https://registry.npmjs.org/react-flow-types/-/react-flow-types-0.2.0-beta.6.tgz", + "integrity": "sha512-I4f8oJFGxVJYrJLxG4sCPW7vWedNB8Eee1U2v+xBzRPlF7X5IBelqaDIKxBDLzDFb++AzpoU+uu1jFaKy1QssQ==" + }, "react-google-button": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/react-google-button/-/react-google-button-0.4.0.tgz", @@ -10325,6 +10558,44 @@ "resolved": "https://registry.npmjs.org/react-instantsearch-theme-algolia/-/react-instantsearch-theme-algolia-4.5.1.tgz", "integrity": "sha512-9Tm7V95jBIslz+l+DOtRm6v81fqQvyZeD4wlsmS8LwA1R+1WpnZJkk3QY3pDyAS/G/SPkLTvTjoqoe+Q/YZZBA==" }, + "react-jss": { + "version": "8.3.3", + "resolved": "https://registry.npmjs.org/react-jss/-/react-jss-8.3.3.tgz", + "integrity": "sha512-4ZIDMjmC5NOREb2gWI9R14gignNiDRDy/sMwtNRXKeCv26C703Y++aYe0kqn22PGiBredaXXOsgWTVuKFhxfig==", + "requires": { + "hoist-non-react-statics": "2.3.1", + "jss": "9.8.0", + "jss-preset-default": "4.3.0", + "prop-types": "15.6.1", + "theming": "1.3.0" + }, + "dependencies": { + "fbjs": { + "version": "0.8.16", + "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.16.tgz", + "integrity": "sha1-XmdDL1UNxBtXK/VYR7ispk5TN9s=", + "requires": { + "core-js": "1.2.7", + "isomorphic-fetch": "2.2.1", + "loose-envify": "1.3.1", + "object-assign": "4.1.1", + "promise": "7.3.1", + "setimmediate": "1.0.5", + "ua-parser-js": "0.7.14" + } + }, + "prop-types": { + "version": "15.6.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.1.tgz", + "integrity": "sha512-4ec7bY1Y66LymSUOH/zARVYObB23AT2h8cf6e/O6ZALB/N0sqZFEx7rq6EYPX2MkOdKORuooI/H5k9TlR4q7kQ==", + "requires": { + "fbjs": "0.8.16", + "loose-envify": "1.3.1", + "object-assign": "4.1.1" + } + } + } + }, "react-masonry-infinite": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/react-masonry-infinite/-/react-masonry-infinite-1.2.1.tgz", @@ -10407,6 +10678,15 @@ } } }, + "react-popper": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-0.7.5.tgz", + "integrity": "sha512-ya9dhhGCf74JTOB2uyksEHhIGw7w9tNZRUJF73lEq2h4H5JT6MBa4PdT4G+sx6fZwq+xKZAL/sVNAIuojPn7Dg==", + "requires": { + "popper.js": "1.12.9", + "prop-types": "15.5.10" + } + }, "react-redux": { "version": "5.0.6", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-5.0.6.tgz", @@ -10551,6 +10831,43 @@ } } }, + "react-scrollbar-size": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/react-scrollbar-size/-/react-scrollbar-size-2.1.0.tgz", + "integrity": "sha512-9dDUJvk7S48r0TRKjlKJ9e/LkLLYgc9LdQR6W21I8ZqtSrEsedPOoMji4nU3DHy7fx2l8YMScJS/N7qiloYzXQ==", + "requires": { + "babel-runtime": "6.26.0", + "prop-types": "15.6.1", + "react-event-listener": "0.5.3", + "stifle": "1.0.4" + }, + "dependencies": { + "fbjs": { + "version": "0.8.16", + "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.16.tgz", + "integrity": "sha1-XmdDL1UNxBtXK/VYR7ispk5TN9s=", + "requires": { + "core-js": "1.2.7", + "isomorphic-fetch": "2.2.1", + "loose-envify": "1.3.1", + "object-assign": "4.1.1", + "promise": "7.3.1", + "setimmediate": "1.0.5", + "ua-parser-js": "0.7.14" + } + }, + "prop-types": { + "version": "15.6.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.1.tgz", + "integrity": "sha512-4ec7bY1Y66LymSUOH/zARVYObB23AT2h8cf6e/O6ZALB/N0sqZFEx7rq6EYPX2MkOdKORuooI/H5k9TlR4q7kQ==", + "requires": { + "fbjs": "0.8.16", + "loose-envify": "1.3.1", + "object-assign": "4.1.1" + } + } + } + }, "react-scrolllock": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/react-scrolllock/-/react-scrolllock-2.0.1.tgz", @@ -11204,6 +11521,14 @@ "ajv": "5.2.2" } }, + "scroll": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/scroll/-/scroll-2.0.3.tgz", + "integrity": "sha512-3ncZzf8gUW739h3LeS68nSssO60O+GGjT3SxzgofQmT8PIoyHzebql9HHPJopZX8iT6TKOdwaWFMqL6LzUN3DQ==", + "requires": { + "rafl": "1.2.2" + } + }, "search-params": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/search-params/-/search-params-1.3.0.tgz", @@ -11564,6 +11889,11 @@ "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.3.1.tgz", "integrity": "sha1-+vUbnrdKrvOzrPStX2Gr8ky3uT4=" }, + "stifle": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/stifle/-/stifle-1.0.4.tgz", + "integrity": "sha1-izvN9SQZsKnHnjWtrc5QEjwdjpk=" + }, "stream-browserify": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.1.tgz", @@ -11820,6 +12150,17 @@ "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=" }, + "theming": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/theming/-/theming-1.3.0.tgz", + "integrity": "sha512-ya5Ef7XDGbTPBv5ENTwrwkPUexrlPeiAg/EI9kdlUAZhNlRbCdhMKRgjNX1IcmsmiPcqDQZE6BpSaH+cr31FKw==", + "requires": { + "brcast": "3.0.1", + "is-function": "1.0.1", + "is-plain-object": "2.0.4", + "prop-types": "15.5.10" + } + }, "throat": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/throat/-/throat-3.2.0.tgz", diff --git a/src/App.css b/src/App.css index 0a25f1f..b1db49e 100644 --- a/src/App.css +++ b/src/App.css @@ -6,6 +6,7 @@ a { text-decoration: none; } .App { text-align: center; + overflow-x: hidden; } .App-logo { @@ -52,11 +53,14 @@ a { text-decoration: none; } object-fit: cover; border: 0; } + .accountIcon { margin-right: 1em; margin-top: 0.25em; cursor: pointer; border: 2px solid white !important; + width: 60px !important; + height: 60px !important; } .arrowIcon { @@ -66,6 +70,7 @@ a { text-decoration: none; } margin-left: -25px !important; margin-bottom: 5px !important; } + .accountLogin { margin-top: 18px !important; margin-right: 1em; @@ -89,11 +94,9 @@ a { text-decoration: none; } .menuSearchCard { position: relative; display: block !important; - /*margin: auto !important;*/ margin-top: 10px !important; margin-bottom: 25px !important; margin-left: 4em !important; - /*margin-bottom: 1em !important;*/ } .searchIcon { @@ -103,8 +106,35 @@ a { text-decoration: none; } margin-top: 0.75em; } -/* prevents Avatar component images from stretching */ -.avatar { - object-fit: cover; - border: 0; +.searchButton { + height: 30px !important; + margin-top: 5px !important; + margin-left: 30px !important; + margin-right: 10px !important; +} + +@media (max-width: 775px) { + .logo { + margin-left: 0; + width: 2em; + } + + .menuSearchCard { + margin: 0 !important; + margin-bottom: 10px !important; + } + .menuSearchCard div, .menuSearchCard input { + width: auto !important; + } + + .accountIcon { + width: 30px !important; + height: 30px !important; + } + + .searchButton { + height: 30px !important; + margin-top: 5px !important; + margin-left: 0px !important; + } } diff --git a/src/App.js b/src/App.js index 4484b08..6a46641 100644 --- a/src/App.js +++ b/src/App.js @@ -8,6 +8,7 @@ import { InstantSearch, Index, Configure, CurrentRefinements } from 'react-insta import { connectAutoComplete, connectMenu } from 'react-instantsearch/connectors' import Autosuggest from 'react-autosuggest' import QueryString from 'query-string' +import { Grid, Row, Col } from 'react-flexbox-grid' import 'react-instantsearch-theme-algolia/style.css' // Material UI Components @@ -264,159 +265,177 @@ class App extends React.Component { const appBarStyle = location.pathname === '/search' ? { boxShadow: 'none' } : {} return (
- -
- Film Indy Logo - { location.pathname !== '/' && - -
- - - - - items.filter(item => item.public === 'true' || item.public === 'false')} - /> - - - - - items.filter(item => item.public === 'true' || item.public === 'false')} - /> - - - - - items.filter(item => item.public === 'true' || item.public === 'false')} - /> - - - - this.searchQuery = query} - onEnterHit={() => { - if (this.searchQuery) { - history.push({ pathname: '/search', search: `?query=${encodeURIComponent(this.searchQuery)}&show=all` }) - } + + + + + Film Indy Logo + + { location.pathname !== '/' && + + +
+ + + + + items.filter(item => item.public === 'true' || item.public === 'false')} + /> + + + + + items.filter(item => item.public === 'true' || item.public === 'false')} + /> + + + + + items.filter(item => item.public === 'true' || item.public === 'false')} + /> + + + + this.searchQuery = query} + onEnterHit={() => { + if (this.searchQuery) { + history.push({ pathname: '/search', search: `?query=${encodeURIComponent(this.searchQuery)}&show=all` }) + } + }} + onSuggestionClicked={(suggestion, index) => { + if (index === 0) { + history.push({ pathname: '/search', search: `?query=${encodeURIComponent(suggestion.roleName)}&show=all&role=${encodeURIComponent(suggestion.roleName)}` }) + } else if (index === 1) { + history.push({ pathname: '/profile', search: `?query=${encodeURIComponent(suggestion.objectID)}` }) + } else if (index === 2) { + history.push({ pathname: `/vendor/${suggestion.objectID}` }) + } else if (index === 3) { + history.push({ pathname: `/location/${suggestion.objectID}` }) + } else if (index === 4) { + history.push({ pathname: '/search', search: `?query=''&show=locations&locationType=${encodeURIComponent(suggestion.type)}` }) + } + }} + /> + + { + if (this.searchQuery) { + history.push({ pathname: '/search', search: `?query=${encodeURIComponent(this.searchQuery)}&show=all` }) + } else { + history.push({ pathname: '/search', search: `?query=${encodeURIComponent('')}&show=all` }) + } + }} + /> +
+ + + } + + { location.pathname === '/search' ? + ( + + { + const newQs = QueryString.stringify({ ...parsed, show: 'all' }) + history.push({ pathname: '/search', search: newQs }) }} - onSuggestionClicked={(suggestion, index) => { - if (index === 0) { - history.push({ pathname: '/search', search: `?query=${encodeURIComponent(suggestion.roleName)}&show=all&role=${encodeURIComponent(suggestion.roleName)}` }) - } else if (index === 1) { - history.push({ pathname: '/profile', search: `?query=${encodeURIComponent(suggestion.objectID)}` }) - } else if (index === 2) { - history.push({ pathname: `/vendor/${suggestion.objectID}` }) - } else if (index === 3) { - history.push({ pathname: `/location/${suggestion.objectID}` }) - } else if (index === 4) { - history.push({ pathname: '/search', search: `?query=''&show=locations&locationType=${encodeURIComponent(suggestion.type)}` }) - } + /> + { + const newQs = QueryString.stringify({ ...parsed, show: 'crew' }) + history.push({ pathname: '/search', search: newQs }) }} /> - - { - if (this.searchQuery) { - history.push({ pathname: '/search', search: `?query=${encodeURIComponent(this.searchQuery)}&show=all` }) - } else { - history.push({ pathname: '/search', search: `?query=${encodeURIComponent('')}&show=all` }) - } - }} - /> -
- - } + { + const newQs = QueryString.stringify({ ...parsed, show: 'vendors' }) + history.push({ pathname: '/search', search: newQs }) + }} + /> + { + const newQs = QueryString.stringify({ ...parsed, show: 'locations' }) + history.push({ pathname: '/search', search: newQs }) + }} + /> + + + ) : null }
- {location.pathname === '/search' ? - ( - { - const newQs = QueryString.stringify({ ...parsed, show: 'all' }) - history.push({ pathname: '/search', search: newQs }) - }} - /> - { - const newQs = QueryString.stringify({ ...parsed, show: 'crew' }) - history.push({ pathname: '/search', search: newQs }) - }} - /> - { - const newQs = QueryString.stringify({ ...parsed, show: 'vendors' }) - history.push({ pathname: '/search', search: newQs }) - }} - /> - { - const newQs = QueryString.stringify({ ...parsed, show: 'locations' }) - history.push({ pathname: '/search', search: newQs }) - }} - /> - ) : null} -
- } - iconElementRight={uid ? ( -
- - -
- ) : ( -
- { - const photoFile = values.photoFile || values.avatar - signUp(values.firstName, values.lastName, photoFile, values.email, values.password) - }} - getDefaultAccountImages={getDefaultAccountImages} - defaultAccountImages={account.defaultAccountImages} - account={account} - cancelSignInUpForm={cancelSignInUpForm} - signUpWithGoogle={signUpWithGoogle} - signUpWithFacebook={signUpWithFacebook} - sendSubmit={submitSignUp} - /> - { - signIn(values.email, values.password) - }} - account={account} - cancelSignInUpForm={cancelSignInUpForm} - signInWithFacebook={signInWithFacebook} - signInWithGoogle={signInWithGoogle} - sendSubmit={submitSignIn} - /> -
- )} - zDepth={2} - /> + } + iconElementRight={uid ? ( + +
+ + +
+ + ) : ( + + +
+ + { + const photoFile = values.photoFile || values.avatar + signUp(values.firstName, values.lastName, photoFile, values.email, values.password) + }} + getDefaultAccountImages={getDefaultAccountImages} + defaultAccountImages={account.defaultAccountImages} + account={account} + cancelSignInUpForm={cancelSignInUpForm} + signUpWithGoogle={signUpWithGoogle} + signUpWithFacebook={signUpWithFacebook} + sendSubmit={submitSignUp} + /> + + + { + signIn(values.email, values.password) + }} + account={account} + cancelSignInUpForm={cancelSignInUpForm} + signInWithFacebook={signInWithFacebook} + signInWithGoogle={signInWithGoogle} + sendSubmit={submitSignIn} + /> + +
+ + + )} + zDepth={2} + /> + + { @@ -451,8 +470,14 @@ class App extends React.Component { { uid ? ( // renders dropdown items depending on if logged in
- } /> - } /> + + } /> + + + + } /> + + + this.setState({ showSubMenu: true })} @@ -472,6 +498,7 @@ class App extends React.Component { }} /> } onClick={(e) => { firebase.logout(); this.signOutMessage() }} /> +
) : (
diff --git a/src/presentation/account/accountPage.css b/src/presentation/account/accountPage.css index 85d47dc..ac6a51d 100644 --- a/src/presentation/account/accountPage.css +++ b/src/presentation/account/accountPage.css @@ -90,6 +90,14 @@ padding: 1em; } +.addCard { + width: 50%; + height: auto; + display: block; + margin: auto auto 1em auto; + padding: 1em; +} + /* Profile Privacy Card Styles */ .toggle { @@ -117,3 +125,31 @@ text-align: left; width: 100%; } + +@media (max-width: 775px) { + .profileCard, .passwordCard { + box-shadow: none !important; + width: 100%; + } + + .passwordCard { + width: 100%; + height: auto; + display: block; + margin: auto auto 1em auto; + padding: 1em; + + } + + .addCard { + width: 100%; + height: auto; + display: block; + margin: auto auto 1em auto; + padding: 1em; + } + .accountHeader { + width: 100%; + text-align: center + } +} diff --git a/src/presentation/account/accountPage.js b/src/presentation/account/accountPage.js index bd2b730..6fc248f 100644 --- a/src/presentation/account/accountPage.js +++ b/src/presentation/account/accountPage.js @@ -143,15 +143,15 @@ class AccountPage extends React.Component {
) : null}

Vendors

- -
+ +
{Object.keys(vendors).map((key) => { const vend = vendors[key] return ( deleteVendor(key)} key={vend.name} - style={{ marginRight: 5 }} + style={{ marginRight: 5, marginBottom: 10 }} > {vend.name} @@ -168,28 +168,28 @@ class AccountPage extends React.Component { createVendor(values.name) }} /> - + -

Locations

- -
- {Object.keys(locations).map((key) => { - const loc = locations[key] - return ( - deleteLocation(key)} - key={loc.name} - style={{ marginRight: 5 }} - > - {loc.name} - - ) - })} - {Object.keys(locations).length === 0 ? - 'Press Add to create a Location' - : null - } -
+

Locations

+ +
+ {Object.keys(locations).map((key) => { + const loc = locations[key] + return ( + deleteLocation(key)} + key={loc.name} + style={{ marginRight: 5, marginBottom: 10 }} + > + {loc.name} + + ) + })} + {Object.keys(locations).length === 0 ? + 'Press Add to create a Location' + : null + } +
{ diff --git a/src/presentation/common/LocationMenu.js b/src/presentation/common/LocationMenu.js index 92a91df..5f551e7 100644 --- a/src/presentation/common/LocationMenu.js +++ b/src/presentation/common/LocationMenu.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types' import MenuItem from 'material-ui/MenuItem' import { Link } from 'react-router-dom' import ArrowDropLeft from 'material-ui/svg-icons/hardware/keyboard-arrow-left' +import Add from 'material-ui/svg-icons/content/add' import Popover from 'material-ui/Popover' import Menu from 'material-ui/Menu' import './LocationMenu.css' @@ -42,6 +43,11 @@ class LocationMenu extends React.Component { ) }) + + const width = window.innerWidth + || document.documentElement.clientWidth + || document.body.clientWidth + return (
- - - {menuItems} - - - + { width > 450 && ( + + + {menuItems} + } onClick={onAddLocationClick} /> + + + )} + { width <= 450 && ( + + + {menuItems} + } onClick={onAddLocationClick} /> + + + )}
) } diff --git a/src/presentation/common/VendorMenu.js b/src/presentation/common/VendorMenu.js index 3f863d3..b6bce6b 100644 --- a/src/presentation/common/VendorMenu.js +++ b/src/presentation/common/VendorMenu.js @@ -3,8 +3,11 @@ import PropTypes from 'prop-types' import MenuItem from 'material-ui/MenuItem' import { Link } from 'react-router-dom' import ArrowDropLeft from 'material-ui/svg-icons/hardware/keyboard-arrow-left' +import Add from 'material-ui/svg-icons/content/add' import Popover from 'material-ui/Popover' import Menu from 'material-ui/Menu' +import './LocationMenu.css' + class VendorMenu extends React.Component { constructor(props) { @@ -41,6 +44,11 @@ class VendorMenu extends React.Component { ) }) + + const width = window.innerWidth + || document.documentElement.clientWidth + || document.body.clientWidth + return (
- - - {menuItems} - - - + { width > 450 && ( + + + {menuItems} + } onClick={onAddVendorClick} /> + + + )} + { width <= 450 && ( + + + {menuItems} + } onClick={onAddVendorClick} /> + + + )}
) } diff --git a/src/presentation/home/homePage.css b/src/presentation/home/homePage.css index 3ce2121..9b5cc9b 100644 --- a/src/presentation/home/homePage.css +++ b/src/presentation/home/homePage.css @@ -30,7 +30,7 @@ color: #38b5e6; color: #004b8d; font-size: 28pt; - font-weight: 600; + font-weight: 600; margin: auto; text-align: left; } @@ -39,7 +39,7 @@ color: #38b5e6; color: #004b8d; font-size: 24pt; - font-weight: 600; + font-weight: 600; margin: auto; text-align: center; } @@ -51,6 +51,7 @@ } .searchCard { + width: auto; position: relative; display: block !important; margin: auto !important; @@ -58,6 +59,12 @@ margin-bottom: 25px !important; } +.searchCard div, .searchCard input { + display: block; + margin: auto; + width: 100% !important; +} + .searchIcon { color: #38b5e6 !important; margin-left: .50em; @@ -148,4 +155,30 @@ color: #38b5e6; } - +@media (max-width: 775px) { + .bg-image { + position: relative; + top: -100px; + padding-top: 100px; + width: 100%; + height: 55%; + background: url('./bg2.jpg'); + background-size: cover; + background-position: center bottom; + } + + .main-header { + text-align: center; + } + + .header-wrapper { + width: 100%; + top: 35%; + text-align: center; + } + + .category-card { + margin: 10px; + cursor: pointer; + } +} diff --git a/src/presentation/home/homePage.js b/src/presentation/home/homePage.js index bf9a164..ef781f4 100644 --- a/src/presentation/home/homePage.js +++ b/src/presentation/home/homePage.js @@ -2,9 +2,11 @@ import React from 'react' import '../../App.css' import './homePage.css' import PropTypes from 'prop-types' + import { InstantSearch, Index, CurrentRefinements, Configure } from 'react-instantsearch/dom' import { connectAutoComplete, connectMenu } from 'react-instantsearch/connectors' -import 'react-instantsearch-theme-algolia/style.css' +import { Grid, Row, Col } from 'react-flexbox-grid' + import ImageSlider from 'react-slick' import { Link } from 'react-router-dom' import Autosuggest from 'react-autosuggest' @@ -248,7 +250,12 @@ class homePage extends React.Component { slidesToShow: 6, slidesToScroll: 2, nextArrow: , - prevArrow: + prevArrow: , + responsive: [ + { breakpoint: 400, settings: { slidesToShow: 1, centerMode: true, slidesToScroll: 1, dots: false } }, + { breakpoint: 768, settings: { slidesToShow: 3 } }, + { breakpoint: 1024, settings: { slidesToShow: 5 } } + ] } return (
@@ -257,7 +264,7 @@ class homePage extends React.Component {
Film Indy
If it isn't on video,
it didn't happen.
- +
Explore Indy
-
- { - categories.map(item => ( - - - - Explore Categories - - - - )) - } -
+ + + { + categories.map(item => ( + + + + + Explore Categories + + + + + )) + } + +
Popular Roles
diff --git a/src/presentation/locationProfile/EditLocationProfile.css b/src/presentation/locationProfile/EditLocationProfile.css index 8a4c5ad..4fd72a4 100644 --- a/src/presentation/locationProfile/EditLocationProfile.css +++ b/src/presentation/locationProfile/EditLocationProfile.css @@ -1,77 +1,70 @@ -.profile { - text-align: left; - margin-top: 25px; +.ViewProfile { + text-align: left; + margin-top: 25px; } -.crew-image { +.vendor-text { + width: 80%; +} + +.crew-image-container { height: 100%; } +.crew-image { + width: 250px !important; + height: 250px !important; + object-fit: cover !important; + border-bottom-left-radius: 2px !important; + border-top-left-radius: 2px !important; + min-width: 250px !important; + min-height: 250px !important; +} + .crew-headline { - font-weight: 500; + font-weight: 500; } .crew-text { - font-weight: 400; - min-width: 100%; - margin-top: -10px; + font-weight: 400; + min-width: 100%; + margin-top: -10px; } .profile-card { - width: 50%; - border-radius: 2; - margin: auto; - margin-bottom: 1%; -} - -.small-card, .top-card { - max-height: 20%; + width: 50% !important; + height: auto !important; + margin-top: 1em !important; + display: block !important; + margin: auto !important; + padding: 1em !important; } .small-card, .big-card { - padding: 10px; + padding: 16px; } .big-card { - max-height: 45%; -} - -.roles { - display: flex; - flex-direction: row; - flex-wrap: wrap; + max-height: 45%; } -.role-column { - width: 40%; - display: flex; - flex-direction: column; - padding-left: 5%; - padding-right: 5%; -} +@media (max-width: 775px) { + .profile-card { + width: 100% !important; + height: auto !important; + margin-top: 1em !important; + display: block !important; + margin: auto !important; + padding: 1em !important; + } -.rounded-header { - max-width: 100%; - min-height: 40px; - background: #4A90E2; /* Color from Invision designs */ - background-color: rgb(0, 75, 141); /* Color from FilmIndy site */ - border-radius: 100px; - text-align: center; - color: white; + .crew-image { + width: 150px !important; + height: 150px !important; + object-fit: cover !important; + border-bottom-left-radius: 2px !important; + border-top-left-radius: 2px !important; + min-width: 150px !important; + min-height: 150px !important; + } } - -.rounded-header span { - display: block; - margin-top: 10px; - padding: 0 10px 10px 10px; -} - -.credits { - display: block; - width: 100%; - margin-top: 10px; - margin-bottom: 10px; - margin-left: 20px; - border-left: 2px solid rgb(0, 75, 141); - padding-left: 10px; -} \ No newline at end of file diff --git a/src/presentation/locationProfile/EditLocationProfile.js b/src/presentation/locationProfile/EditLocationProfile.js index 3132e80..e661e25 100644 --- a/src/presentation/locationProfile/EditLocationProfile.js +++ b/src/presentation/locationProfile/EditLocationProfile.js @@ -31,21 +31,6 @@ import States from './States' import Gallery from '../common/Gallery' import './EditLocationProfile.css' - -const styles = { - card: { - width: '50%', - height: 'auto', - marginTop: '1em', - display: 'block', - margin: 'auto', - padding: '1em' - }, - chipStyle: { - margin: 6 - } -} - const renderTextField = ({ input, name, label, meta: { touched, error }, ...custom }) => (
- + +
-
+
Just here to search? Turn your profile to "Private" to not appear in other's searches.
- + +
- + +
@@ -382,7 +370,8 @@ class EditLocationProfile extends React.Component {
- + +
updateLocationProfile(values, locationId))}>
@@ -412,7 +401,8 @@ class EditLocationProfile extends React.Component {
- + +
{locationLinks.map((link, i) => ( @@ -488,7 +478,8 @@ class EditLocationProfile extends React.Component {
- + + { video ? (
- + +
{ diff --git a/src/presentation/locationProfile/LocationProfile.css b/src/presentation/locationProfile/LocationProfile.css index 0615518..4fd72a4 100644 --- a/src/presentation/locationProfile/LocationProfile.css +++ b/src/presentation/locationProfile/LocationProfile.css @@ -7,8 +7,18 @@ width: 80%; } +.crew-image-container { + height: 100%; +} + .crew-image { - height: 100%; + width: 250px !important; + height: 250px !important; + object-fit: cover !important; + border-bottom-left-radius: 2px !important; + border-top-left-radius: 2px !important; + min-width: 250px !important; + min-height: 250px !important; } .crew-headline { @@ -21,10 +31,40 @@ margin-top: -10px; } +.profile-card { + width: 50% !important; + height: auto !important; + margin-top: 1em !important; + display: block !important; + margin: auto !important; + padding: 1em !important; +} + .small-card, .big-card { padding: 16px; } .big-card { max-height: 45%; -} \ No newline at end of file +} + +@media (max-width: 775px) { + .profile-card { + width: 100% !important; + height: auto !important; + margin-top: 1em !important; + display: block !important; + margin: auto !important; + padding: 1em !important; + } + + .crew-image { + width: 150px !important; + height: 150px !important; + object-fit: cover !important; + border-bottom-left-radius: 2px !important; + border-top-left-radius: 2px !important; + min-width: 150px !important; + min-height: 150px !important; + } +} diff --git a/src/presentation/locationProfile/LocationProfile.js b/src/presentation/locationProfile/LocationProfile.js index b97a7a4..740b015 100644 --- a/src/presentation/locationProfile/LocationProfile.js +++ b/src/presentation/locationProfile/LocationProfile.js @@ -63,7 +63,7 @@ const LocationProfilePage = (props) => {
{ locationCreator === uid ? ( -
+
} /> @@ -110,7 +110,7 @@ const LocationProfilePage = (props) => {
- +
{ locationBio ? ( @@ -133,7 +133,7 @@ const LocationProfilePage = (props) => { { video ? ( - + diff --git a/src/presentation/profile/EditProfile.js b/src/presentation/profile/EditProfile.js index ecb7577..64b1b49 100644 --- a/src/presentation/profile/EditProfile.js +++ b/src/presentation/profile/EditProfile.js @@ -30,19 +30,6 @@ import AddVideoForm from './AddVideoForm' import '../../App.css' import '../../presentation/profile/ViewProfile.css' -const styles = { - card: { - width: '40%', - height: 'auto', - marginTop: '1em', - display: 'block', - margin: 'auto', - padding: '1em' - }, - chipStyle: { - margin: 6 - } -} const FileUploader = props => ( -1 ? 1 : 2 // 1 for Youtube, 2 for Vimeo + if (video) videoType = video.url.indexOf('youtube') > -1 ? 1 : 2 // 1 for Youtube, 2 for Vimeo const addYoutubeActions = [
- +
-
+
Just here to search? Turn your profile to "Private" to not appear in other's searches.
- +
@@ -454,7 +441,7 @@ class EditProfile extends React.Component {
- +
@@ -484,7 +471,7 @@ class EditProfile extends React.Component {
- +
{userLinks.map((link, i) => ( @@ -561,7 +548,7 @@ class EditProfile extends React.Component {
- + { video ? (
- +
{ diff --git a/src/presentation/profile/ViewProfile.css b/src/presentation/profile/ViewProfile.css index 8a4c5ad..fdd2d1d 100644 --- a/src/presentation/profile/ViewProfile.css +++ b/src/presentation/profile/ViewProfile.css @@ -3,25 +3,37 @@ margin-top: 25px; } -.crew-image { +.crew-image-container { height: 100%; } +.crew-image { + width: 250px !important; + height: 250px !important; + object-fit: cover !important; + border-bottom-left-radius: 2px !important; + border-top-left-radius: 2px !important; + min-width: 250px !important; + min-height: 250px !important; +} + .crew-headline { font-weight: 500; } .crew-text { font-weight: 400; - min-width: 100%; + min-width: 200% !important; margin-top: -10px; } .profile-card { - width: 50%; - border-radius: 2; - margin: auto; - margin-bottom: 1%; + width: 50% !important; + height: auto !important; + margin-top: 1em !important; + display: block !important; + margin: auto !important; + padding: 1em !important; } .small-card, .top-card { @@ -74,4 +86,25 @@ margin-left: 20px; border-left: 2px solid rgb(0, 75, 141); padding-left: 10px; -} \ No newline at end of file +} + +@media (max-width: 775px) { + .profile-card { + width: 100% !important; + height: auto !important; + margin-top: 1em !important; + display: block !important; + margin: auto !important; + padding: 1em !important; + } + + .crew-image { + width: 150px !important; + height: 150px !important; + object-fit: cover !important; + border-bottom-left-radius: 2px !important; + border-top-left-radius: 2px !important; + min-width: 150px !important; + min-height: 150px !important; + } +} diff --git a/src/presentation/profile/ViewProfile.js b/src/presentation/profile/ViewProfile.js index fcfc90e..afcb90a 100644 --- a/src/presentation/profile/ViewProfile.js +++ b/src/presentation/profile/ViewProfile.js @@ -7,6 +7,7 @@ import ModeEditIcon from 'material-ui/svg-icons/editor/mode-edit' import { get } from 'lodash' import PropTypes from 'prop-types' import formatLink from '../../util/formatLink' +import { Grid, Row, Col } from 'react-flexbox-grid' import '../../App.css' import './ViewProfile.css' @@ -86,103 +87,178 @@ class ViewProfile extends React.Component { const name = `${get(userAccount, 'firstName', '')} ${get(userAccount, 'lastName', '')}` const phone = formatPhoneNumber(get(userAccount, 'phone')) - const email = get(userProfile, 'displayEmail') ? userProfile.displayEmail : get(data, 'auth.email') + const email = get(userProfile, 'displayEmail') ? userProfile.displayEmail : get(auth, 'email') return ( -
- { - authorizedUid === uid ? ( -
- - } /> - -
- ) : null - } -
- - - - -
- - { isNaN(numYears) ? - null - : ( - - {numYears} year(s) in industry - - ) - } - { phone ? ( - - {phone} - - ) : null - } - - {email} - -
- - - - - - { bio ? ( - - {bio} - - ) : ( - + +
+ { + authorizedUid === uid ? ( +
+ + } /> + +
+ ) : null + } +
+ + + + + + + + + + +
+ + + + + + + + { isNaN(numYears) ? + null + : ( + + {numYears} year(s) in industry + + ) + } + + + + + { phone ? ( + + {phone} + + ) : null + } + + + + + + {email} + + + +
+ + + + + + + + + + + + + + + + + { bio ? ( + + {bio} + + ) : ( + Contact me directly for more information. - - ) - } - - - {userLinks.map(link => ( - - ))} - - - - { video ? ( - - - - - ) : null } - - - - -
- { - userRoles.map((role) => { - const associatedCredits = userCredits.filter(c => c.roleId === role.roleId) - - associatedCredits.sort((a, b) => { - if (a.year < b.year) { return -1 } - if (a.year > b.year) { return 1 } - return 0 - }) - return ( -
-
{role.roleName}
-
- { associatedCredits.map(credit => ( -

{credit.year}{credit.genre ? ` (${credit.genre})` : ''} : {credit.title}

- ) - )} + + ) + } + + + + + + + {userLinks.map(link => ( + + ))} + + + + + + + { video ? ( + + + + + + + + + + + + + + + + + ) : null } + + + + + + + + + + +
+ { + userRoles.map((role) => { + const associatedCredits = userCredits.filter(c => c.roleId === role.roleId) + + associatedCredits.sort((a, b) => { + if (a.year < b.year) { return -1 } + if (a.year > b.year) { return 1 } + return 0 + }) + return ( +
+ + +
+ {role.roleName} +
+
+ { associatedCredits.map(credit => ( + + +

{credit.year}{credit.genre ? ` (${credit.genre})` : ''} : {credit.title}

+ + + ) + )} +
+ + +
+ ) + }) + }
-
- ) - }) - } -
- + + + + + + +
-
+ ) } } diff --git a/src/presentation/search/SearchBody.js b/src/presentation/search/SearchBody.js index 26626f1..a62eb00 100644 --- a/src/presentation/search/SearchBody.js +++ b/src/presentation/search/SearchBody.js @@ -5,6 +5,7 @@ import { Card, CardMedia, CardText } from 'material-ui/Card' import RaisedButton from 'material-ui/RaisedButton' import { GridList } from 'material-ui/GridList' import MasonryInfiniteScroller from 'react-masonry-infinite' +import { Grid, Row, Col } from 'react-flexbox-grid' import { get, take } from 'lodash' import PropTypes from 'prop-types' @@ -38,121 +39,152 @@ const SearchBody = ({ enriched, enrichedVendors, enrichedLocations, location, to if (showOnly === 'all') { if ((totalHits.hasLoaded && enriched.length > 0) || (totalVendorHits.hasLoaded && enrichedVendors.length > 0) || (totalLocationHits.hasLoaded && enrichedLocations.length > 0)) { return ( -
- { enriched.length > 0 ? ( -
-
-

Crew

- {showOnly === 'all' ? - { - const newQs = QueryString.stringify({ ...parsed, show: 'crew' }) - history.push({ pathname: '/search', search: newQs }) - }} - style={{ marginRight: 225, backgroundColor: '#38b5e6' }} - /> - : null } -
-
- - {take(enriched, 4).map((enrichedResult, i) => ( - - - - - -
- - {`${get(enrichedResult, 'firstName', '')} ${get(enrichedResult, 'lastName', '')}`} - - - {get(enrichedResult, 'headline', '')} - -
- - - ))} - -
-
- ) : null } - {enrichedVendors.length !== 0 ? ( -
-
-

Vendors

- {showOnly === 'all' ? - { - const newQs = QueryString.stringify({ ...parsed, show: 'vendors' }) - history.push({ pathname: '/search', search: newQs }) - }} - style={{ marginRight: 225, backgroundColor: '#38b5e6' }} - /> - : null } -
-
- - {take(enrichedVendors, 8).map((enrichedResult, i) => ( -
- - + +
+ { enriched.length > 0 ? ( +
+ +
+ +

Crew

+ + {showOnly === 'all' ? + + + { + const newQs = QueryString.stringify({ ...parsed, show: 'crew' }) + history.push({ pathname: '/search', search: newQs }) + }} + /> + + + : null } +
+ +
+ + {take(enriched, 4).map((enrichedResult, i) => ( + + - + +
+ + {`${get(enrichedResult, 'firstName', '')} ${get(enrichedResult, 'lastName', '')}`} + + + {get(enrichedResult, 'headline', '')} + +
-

{`${get(enrichedResult, 'vendorName', '')}`}

-
- ))} - -
-
- ) : null - } + ))} + +
- {enrichedLocations.length !== 0 ? ( -
-
-

Locations

- {showOnly === 'all' ? - { - const newQs = QueryString.stringify({ ...parsed, show: 'locations' }) - history.push({ pathname: '/search', search: newQs }) - }} - style={{ marginRight: 225, backgroundColor: '#38b5e6' }} - /> - : null }
-
- - {take(enrichedLocations, 4).map((enrichedResult, i) => ( -
- - - - - - - -

{`${get(enrichedResult, 'locationName', '')}`}

-
- ))} - + ) : null } + {enrichedVendors.length !== 0 ? ( +
+ +
+ +

Vendors

+ + {showOnly === 'all' ? + + + { + const newQs = QueryString.stringify({ ...parsed, show: 'vendors' }) + history.push({ pathname: '/search', search: newQs }) + }} + /> + + + : null } +
+ +
+ + {take(enrichedVendors, 8).map((enrichedResult, i) => ( +
+ + + + + + + +

{`${get(enrichedResult, 'vendorName', '')}`}

+
+ ))} + +
-
- ) : null - } -
+ ) : null + } + + {enrichedLocations.length !== 0 ? ( +
+ +
+ +

Locations

+ + {showOnly === 'all' ? + + + { + const newQs = QueryString.stringify({ ...parsed, show: 'locations' }) + history.push({ pathname: '/search', search: newQs }) + }} + /> + + + : null } +
+ +
+ + {take(enrichedLocations, 4).map((enrichedResult, i) => ( +
+ + + + + + + +

{`${get(enrichedResult, 'locationName', '')}`}

+
+ ))} + +
+
+ ) : null + } +
+ ) } else if (totalHits.hasLoaded && enriched.length === 0 && enrichedVendors.length === 0 && totalVendorHits.hasLoaded && enrichedLocations.length === 0 && totalLocationHits.hasLoaded) { return ( diff --git a/src/presentation/vendorProfile/EditVendorProfile.css b/src/presentation/vendorProfile/EditVendorProfile.css index 8a4c5ad..004f106 100644 --- a/src/presentation/vendorProfile/EditVendorProfile.css +++ b/src/presentation/vendorProfile/EditVendorProfile.css @@ -2,26 +2,37 @@ text-align: left; margin-top: 25px; } +.crew-image-container { + height: 100%; +} .crew-image { - height: 100%; + width: 250px !important; + height: 250px !important; + object-fit: cover !important; + border-bottom-left-radius: 2px !important; + border-top-left-radius: 2px !important; + min-width: 250px !important; + min-height: 250px !important; } .crew-headline { - font-weight: 500; + font-weight: 500; } .crew-text { - font-weight: 400; - min-width: 100%; - margin-top: -10px; + font-weight: 400; + min-width: 100%; + margin-top: -10px; } .profile-card { - width: 50%; - border-radius: 2; - margin: auto; - margin-bottom: 1%; + width: 50% !important; + height: auto !important; + margin-top: 1em !important; + display: block !important; + margin: auto !important; + padding: 1em !important; } .small-card, .top-card { @@ -70,8 +81,29 @@ display: block; width: 100%; margin-top: 10px; - margin-bottom: 10px; +margin-bottom: 10px; margin-left: 20px; border-left: 2px solid rgb(0, 75, 141); padding-left: 10px; -} \ No newline at end of file +} + +@media (max-width: 775px) { + .profile-card { + width: 100% !important; + height: auto !important; + margin-top: 1em !important; + display: block !important; + margin: auto !important; + padding: 1em !important; + } + + .crew-image { + width: 150px !important; + height: 150px !important; + object-fit: cover !important; + border-bottom-left-radius: 2px !important; + border-top-left-radius: 2px !important; + min-width: 150px !important; + min-height: 150px !important; + } +} diff --git a/src/presentation/vendorProfile/EditVendorProfile.js b/src/presentation/vendorProfile/EditVendorProfile.js index b48eff9..180c42b 100644 --- a/src/presentation/vendorProfile/EditVendorProfile.js +++ b/src/presentation/vendorProfile/EditVendorProfile.js @@ -29,14 +29,7 @@ import './EditVendorProfile.css' const styles = { - card: { - width: '40%', - height: 'auto', - marginTop: '1em', - display: 'block', - margin: 'auto', - padding: '1em' - }, + chipStyle: { margin: 6 } @@ -144,7 +137,7 @@ class EditVendorProfile extends React.Component { const isPublic = get(vendorProfile, 'public', false) const video = get(vendorProfile, 'video', '')[0] let videoType = 0 - if (video) videoType = video.url.indexOf('youtube') > -1 ? 1 : 2 // 1 for Youtube, 2 for Vimeo + if (video) videoType = video.url.indexOf('youtube') > -1 ? 1 : 2 // 1 for Youtube, 2 for Vimeo const profileImageUrl = get(vendorProfile, 'profileImage', 'https://images.vexels.com/media/users/3/144866/isolated/preview/927c4907bbd0598c70fb79de7af6a35c-business-building-silhouette-by-vexels.png') const addLinkActions = [ @@ -204,7 +197,7 @@ class EditVendorProfile extends React.Component {
- +
-
+
Just here to search? Turn your profile to "Private" to not appear in other's searches.
- +
@@ -333,7 +326,7 @@ class EditVendorProfile extends React.Component {
- +
@@ -441,7 +434,7 @@ class EditVendorProfile extends React.Component {
- + updateVendorProfile(values, vendorId))}>
@@ -471,7 +464,7 @@ class EditVendorProfile extends React.Component {
- +
{vendorLinks.map((link, i) => ( @@ -547,7 +540,7 @@ class EditVendorProfile extends React.Component {
- + { video ? ( { const video = get(vendorProfile, 'video', '')[0] let videoType = 0 - if(video) videoType = video.url.indexOf("youtube") > -1 ? 1 : 2 // 1 for Youtube, 2 for Vimeo + if (video) videoType = video.url.indexOf('youtube') > -1 ? 1 : 2 // 1 for Youtube, 2 for Vimeo const vendorAddressLine1 = get(vendorProfile, 'addressLine1', '') const vendorAddressLine2 = get(vendorProfile, 'addressLine2', '') @@ -85,7 +85,7 @@ const VendorProfilePage = (props) => {
{ vendorCreator === uid ? ( -
+
} /> @@ -93,8 +93,8 @@ const VendorProfilePage = (props) => { ) : null } - - + +