#63 - communities page revamp by tjvsx · Pull Request #70 · 0xHabitat/habitat-rollup

tjvsx · 2021-11-24T22:21:13Z

..Communities.js:

'your communities' section
sorting button: a-z, z-a, block
communities as flip-cards
scrolling description on back of flip-card

..CommunityPreviewCreator.js:

no more than 1 card at a time
integrated VERC creator
celebratory text on token creation

..FlipCard.js:

new icon
send dynamic css width/height variables to parent element for optional use
return to front on window resize
some global css edits

..Communities.js: - 'your communities' section - sorting button: a-z, z-a, block - communities as flip-cards - scrolling description on back of flip-card ..CommunityPreviewCreator.js: - no more than 1 card at a time - integrated VERC creator - celebratory text on token creation ..FlipCard.js: - new icon - send dynamic css width/height variables to parent element for optional use - return to front on window resize - some global css edits

pinkiebell · 2021-11-25T12:08:57Z

preview: https://bafybeidxojd7z2q7rms3nppkmixoxkieafqmwwt4ee32kcpd3be25d5meq.ipfs.infura-ipfs.io/

web/lib/HabitatCommunity.js

MaxKaay · 2021-11-25T12:13:49Z

missing "create" button in the overview page

web/lib/HabitatCommunityPreviewCreator.js

pinkiebell · 2021-11-25T12:18:38Z

web/lib/HabitatCommunityPreviewCreator.js

    wrapListener(this.shadowRoot.querySelector('#create'), this.create.bind(this));
+    wrapListener(this.shadowRoot.querySelector('#boxleg'), () => {
+      //flip "create [community]" button to active / inverted color
+      this.parentElement.parentElement.parentElement.querySelector('#create-community').classList.toggle('active');


A special CSS variable should be used to change visibility. Otherwise this throws If the layout of the dom changes or this element will be used somewhere else.

web/lib/HabitatCommunityPreviewCreator.js

web/lib/HabitatFlipCard.js

web/lib/assets/base.css

pinkiebell · 2021-11-25T12:29:46Z

web/lib/HabitatCommunities.js

  }

+  _userLoad (callback) {
+    async function _check () {


this check can be moved to chainUpdateCallback/render together w/ walletIsConnected

web/lib/HabitatCommunities.js

pinkiebell · 2021-11-25T12:42:28Z

web/lib/HabitatCommunities.js

  async render () {
+    const { habitat } = await getProviders();
+
+    if (walletIsConnected()) {


should be moved to onChainUpdate.
I also not sure if we should hide it by default, this could confuse users looking for a button :)

missing "create" button in the overview page @MaxKaay
I'm thinking - show "create" button by default & prompt user with wallet connection upon pressing, if they aren't connected

where is onChainUpdate? Should I add to HabitatCommunities.js, edit in HabitatPanel.js, rollup.js, or something else?
I believe this is the final task I have to complete.

Sorry, its called chainUpdateCallback in this context

HabitatCommunities.js: - added ghost communities to avoid awkward flex behavior of single-card rows - moved flipcard 'window resize' eventlistener to HabitatCommunities.js as delegated eventlistener - moved portion of render() function to chainUpdateCallback -- called twice in render() to 1) load create button functions immediately, and 2) render all user communities -- looking for a fix (onChainUpdate?) HabitatCommunityPreviewCreator.js: - removed 'create token' event listener after token creation / celebration.

- create button handler moved to constructor - default sorting set

Communities.js: - set default sorting and call this.sort() in constructor - use MutationObserver on creatingCommunity container instead of reaching up DOM tree from CommunityPreviewCreator to invert button color. CommunityPreviewCreator.js: - remove classlist toggle that reaches up DOM tree (see above) - add image scaler to fit image in canvas