From 4892781936e3f2ba3cb3e6066a40a47ba6780b90 Mon Sep 17 00:00:00 2001 From: Tiffany Chong Date: Fri, 5 Mar 2021 09:34:30 +0800 Subject: [PATCH 1/4] Reverse prereq tree --- package-lock.json | 27 +++++++++++++++++++++++ website/src/views/modules/ModuleTree.scss | 25 ++++++++++++--------- website/src/views/modules/ModuleTree.tsx | 12 +++++----- yarn.lock | 4 ++++ 4 files changed, 51 insertions(+), 17 deletions(-) create mode 100644 package-lock.json create mode 100644 yarn.lock diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000000..c93da71378 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,27 @@ +{ + "requires": true, + "lockfileVersion": 1, + "dependencies": { + "@popperjs/core": { + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.0.tgz", + "integrity": "sha512-wjtKehFAIARq2OxK8j3JrggNlEslJfNuSm2ArteIbKyRMts2g0a7KzTxfRVNUM+O0gnBJ2hNV8nWPOYBgI1sew==" + }, + "@tippyjs/react": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/@tippyjs/react/-/react-4.2.3.tgz", + "integrity": "sha512-44vBapqROQI7Q5nDtX1MMAgcAV+3DsIi+m/45CxQ72C5LDNmNDq9h3f04x3NHMrUhWcfgfgjYA2EmeLSH/4eRg==", + "requires": { + "tippy.js": "^6.3.1" + } + }, + "tippy.js": { + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.1.tgz", + "integrity": "sha512-JnFncCq+rF1dTURupoJ4yPie5Cof978inW6/4S6kmWV7LL9YOSEVMifED3KdrVPEG+Z/TFH2CDNJcQEfaeuQww==", + "requires": { + "@popperjs/core": "^2.8.3" + } + } + } +} diff --git a/website/src/views/modules/ModuleTree.scss b/website/src/views/modules/ModuleTree.scss index a7a90873a5..72aeee60e4 100644 --- a/website/src/views/modules/ModuleTree.scss +++ b/website/src/views/modules/ModuleTree.scss @@ -4,6 +4,7 @@ $connector-size: 0.75rem; .container { display: flex; + flex-direction: row-reverse; overflow-y: auto; align-items: center; // Leave some space for the tooltip @@ -42,12 +43,12 @@ $connector-size: 0.75rem; justify-content: center; align-items: center; padding: 0.125rem 0.25rem; - margin: 0 0 1px $connector-size; + margin: 0 $connector-size 1px 0; border-radius: $btn-border-radius; &::before { top: 50%; - left: -$connector-size; + right: -$connector-size; width: $connector-size; height: 1px; } @@ -75,11 +76,12 @@ $connector-size: 0.75rem; .conditional { flex: 0 0 auto; margin-right: $connector-size; + margin-left: $connector-size; border: 0; &::after { top: 50%; - right: -$connector-size; + left: -$connector-size; width: $connector-size; height: 1px; } @@ -88,11 +90,12 @@ $connector-size: 0.75rem; .branch { position: relative; display: flex; + flex-direction: row-reverse; align-items: center; &::before, &::after { - left: 0; + right: 0; width: 1px; height: 50%; } @@ -111,19 +114,19 @@ $connector-size: 0.75rem; } } -.prereqBranch { +.dependentBranch { &::before, &::after { - right: 0; - left: auto; + left: 0; + right: auto; } } -.prereqNode { - margin: 0 $connector-size 1px 0; +.dependentNode { + margin: 0 0 1px $connector-size; &::before { - right: -$connector-size; - left: auto; + left: -$connector-size; + right: auto; } } diff --git a/website/src/views/modules/ModuleTree.tsx b/website/src/views/modules/ModuleTree.tsx index 51da28a75d..0ae226df46 100644 --- a/website/src/views/modules/ModuleTree.tsx +++ b/website/src/views/modules/ModuleTree.tsx @@ -17,7 +17,7 @@ type Props = { interface TreeDisplay { layer: number; node: PrereqTree; - isPrereq?: boolean; + isDependent?: boolean; } const formatConditional = (name: string) => (name === 'or' ? 'one of' : 'all of'); @@ -38,7 +38,7 @@ const Branch: React.FC<{ nodes: PrereqTree[]; layer: number }> = (props) => ( ); const Tree: React.FC = (props) => { - const { layer, node, isPrereq } = props; + const { layer, node, isDependent } = props; const isConditional = typeof node !== 'string'; const name = nodeName(node); @@ -49,7 +49,7 @@ const Tree: React.FC = (props) => { className={classnames(styles.node, { [`hoverable color-${layer}`]: !isConditional, [styles.conditional]: isConditional, - [styles.prereqNode]: isPrereq, + [styles.dependentNode]: isDependent, })} > {isConditional ? ( @@ -76,14 +76,14 @@ const ModuleTree: React.FC = (props) => { {fulfillRequirements.map((fulfilledModule) => (
  • - +
    • ))} -
    needs
    +
    unlocks
    )} diff --git a/yarn.lock b/yarn.lock new file mode 100644 index 0000000000..fb57ccd13a --- /dev/null +++ b/yarn.lock @@ -0,0 +1,4 @@ +# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. +# yarn lockfile v1 + + From 0eb80c48ccab78e9588e7eabd869f7e644ec526e Mon Sep 17 00:00:00 2001 From: Tiffany Chong Date: Fri, 5 Mar 2021 09:42:56 +0800 Subject: [PATCH 2/4] Delete package-lock.json --- package-lock.json | 27 --------------------------- 1 file changed, 27 deletions(-) delete mode 100644 package-lock.json diff --git a/package-lock.json b/package-lock.json deleted file mode 100644 index c93da71378..0000000000 --- a/package-lock.json +++ /dev/null @@ -1,27 +0,0 @@ -{ - "requires": true, - "lockfileVersion": 1, - "dependencies": { - "@popperjs/core": { - "version": "2.9.0", - "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.0.tgz", - "integrity": "sha512-wjtKehFAIARq2OxK8j3JrggNlEslJfNuSm2ArteIbKyRMts2g0a7KzTxfRVNUM+O0gnBJ2hNV8nWPOYBgI1sew==" - }, - "@tippyjs/react": { - "version": "4.2.3", - "resolved": "https://registry.npmjs.org/@tippyjs/react/-/react-4.2.3.tgz", - "integrity": "sha512-44vBapqROQI7Q5nDtX1MMAgcAV+3DsIi+m/45CxQ72C5LDNmNDq9h3f04x3NHMrUhWcfgfgjYA2EmeLSH/4eRg==", - "requires": { - "tippy.js": "^6.3.1" - } - }, - "tippy.js": { - "version": "6.3.1", - "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.1.tgz", - "integrity": "sha512-JnFncCq+rF1dTURupoJ4yPie5Cof978inW6/4S6kmWV7LL9YOSEVMifED3KdrVPEG+Z/TFH2CDNJcQEfaeuQww==", - "requires": { - "@popperjs/core": "^2.8.3" - } - } - } -} From 14a28104f4e29851e50bad37793a6e69d0bf9922 Mon Sep 17 00:00:00 2001 From: Tiffany Chong Date: Fri, 5 Mar 2021 09:43:06 +0800 Subject: [PATCH 3/4] Delete yarn.lock --- yarn.lock | 4 ---- 1 file changed, 4 deletions(-) delete mode 100644 yarn.lock diff --git a/yarn.lock b/yarn.lock deleted file mode 100644 index fb57ccd13a..0000000000 --- a/yarn.lock +++ /dev/null @@ -1,4 +0,0 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -# yarn lockfile v1 - - From f2906ca1c78c255b0f973e15fe47db3e2d358ce3 Mon Sep 17 00:00:00 2001 From: Tiffany Chong Date: Fri, 5 Mar 2021 09:51:29 +0800 Subject: [PATCH 4/4] Rename the terms used --- website/src/views/modules/ModuleTree.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/src/views/modules/ModuleTree.tsx b/website/src/views/modules/ModuleTree.tsx index 0ae226df46..1f62d24708 100644 --- a/website/src/views/modules/ModuleTree.tsx +++ b/website/src/views/modules/ModuleTree.tsx @@ -20,7 +20,7 @@ interface TreeDisplay { isDependent?: boolean; } -const formatConditional = (name: string) => (name === 'or' ? 'one of' : 'all of'); +const formatConditional = (name: string) => (name === 'or' ? 'take one' : 'take all'); const nodeName = (node: PrereqTree) => (typeof node === 'string' ? node : Object.keys(node)[0]);