Resource links and Accept Challenge button

[loogart]

Resources links and Accept challenge buttons to go to a subpage we can manually setup. Subpage template based off About and/or Partner with us page.

@djsutter Looking at potential modal popup for the Accept challenge buttons. Maybe for post launch? Or would you rather I set it up before launch?

[djsutter]

We can probably go with a modal but I'm not sure what support is currently built in for those. Might be safer to set this up as a subpage and if time permits we turn that into a modal?

[loogart]

Agreed. Let's stick to a subpage for now. How would you know if modal is supported with the Drupal WxT framework?

This would be what I would like to implement: http://wet-boew.github.io/v4.0-ci/docs/ref/overlay/overlay-en.html

[loogart]

@djsutter hey do you know if modals are out of the question (support for Drupal WxT)? I will start working on the html of the challenges in the next several days. Let me know, otherwise, I'll keep it simple with the sub-page (i.e. as is).

[djsutter]

I'm sure I can do a modal for you, just didn't want to commit before we go live with the UX changes. But show me what you want and I'll see what I can do.

Duncan

⁣Sent from Blue ​

On Dec 12, 2018, 1:23 PM, at 1:23 PM, Chris Soueidan notifications@github.com wrote:

@djsutter hey do you know if modals are out of the question (support for Drupal WxT)? I will start working on the html of the challenges in the next several days. Let me know, otherwise, I'll keep it simple with the sub-page (i.e. as is).

-- You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub: https://github.com/loogart/impact-canada/issues/20#issuecomment-446690887

[loogart]

@djsutter will do I will mock something up tomorrow!

[loogart]

Hey @djsutter! I mocked up the modal UI (it is a WET4 ultra accessible component, but I added several lines of css inline for now to match Impact Canada brand and ensure people can't click out of the modal during their registration).

https://loogart.github.io/impact-canada/challenge.html

If we were to implement this properly, here are the features I would like to include:

A. CHALLENGE DETAIL BOX features

1. Create separate WYSIWYG for Challenge details (1) key dates, (2) prizes, (3) who can apply and (4) Resources (kind of like what we currently have). Ability to add additional WYSIWYGs.
2. Ability to edit CTA action button text ("Accept challenge"is default, but could be edited on a per challenge basis).
3. Dropdown Select for action that will be triggered upon hitting the CTA button. The options would be:
   • [ ] modal (default)
   • [ ] new subpage (need to enter URL, Drupal autocomplete if possible?)
   • [ ] external website (need to enter 3rd party URL)

B. MODAL features

1. Ability to edit modal header title (default would be: "{{name of challenge}} : Accept the Challenge")
2. WYSIWYG for the modal body (e.g. in this case, embed the iframe from Simple Surveys)
3. Ability to edit the modal footer title

[loogart]

@djsutter not yet finalized btw in terms of styling, some mobile issues. I’ll confirm when all should be good!

[djsutter]

Hey Chris. I had a look at the modal, looks good. Obviously you figured out how to make the modal appear; this will help. Seems this will require setting up a webform, so once you get those details figured out, I can see what needs to be done at my end.

[loogart]

@djsutter hey Duncan, all done!

1. Structurally, the modal could embedded within the challenge details box.
2. Since Graham and I will start merging/updating content from the current platform to the new dev site, when will you be able to connect the NEW challenge details box wysiwyg to the current Challenge details content?
3. I know a new features requests/updates for the admin dashboard are appearing here and there, so we can evaluate if this is doable in the proposed December 21 timeline. I guess the challenge details and form embed section is a meat-and-potato feature since this is where all the departments will submit their applications.

[djsutter]

1. Yes, good place.
2. You know, I didn't even realize where the challenge details box came from. Now I see it is hard-coded in one of the theme files. Ok so you want a wysiwyg field to provide that; I can do it pretty quick I think.
3. Ok well just let me know what is required and what is optional. Depends when you want to get this out vs how much time to develop the rest.

[loogart]

Hey Duncan!

For No. 2, the WYSIWYG already exists in the current platform. See below!

For No. 3, I would like to fit it in for launch! I do feel it is a heavy feature from your end, so it can wait till January.

[djsutter]

Just did the challenge details box, check it out. I'm not sure how you want to handle the bottom part; currently it's putting everything into columns.

[loogart]

Awesome for the boxes!

Can you create a div with the class .col-sm-12 like in the prototype specifically for the CTA to standardize the challenge details box? This div would always exist with customizable text on the button and 3 options for the action which could be selected by the user for (A) a popup modal (default), (B) a drupal page or (C) an external URL

This div would then include (1) the separator line, (2) the CTA button and (3) html for the popup modal.

<hr>

<a type="button" class="btn btn-secondary btn-block shadow wb-lbx lbx-modal wb-init wb-lbx-inited" href="#centred-popup-modal" id="wb-auto-2"><i class="fas fa-check-circle"></i> Accept challenge</a>

<section id="centred-popup-modal" class="modal-dialog modal-content overlay-def mfp-hide">

    <header class="modal-header">
        <h2 class="modal-title" id="lbx-title">Smart Cities: Accept the Challenge</h2>
    </header>

   <div class="modal-body">
        <iframe src="https://form.simplesurvey.com/f/s.aspx?s=a557b933-d6b4-4f48-88e9-8743237acabd&amp;lang=EN" width="100%" height="500px" frameborder="0"></iframe>
     </div>

    <div class="modal-footer">
        <button class="btn btn-default btn-sm popup-modal-dismiss" type="button">Cancel </button>
    </div>

</section>

[djsutter]

Ok I added that code to the right place but the modal isn't working. I think it may be because there is something missing for where the section "centred-popup-modal" is supposed to move to. When I look at your prototype, that section is being moved to near the top of the DOM. I'm hoping that you have a bit more experience having played with it already. Otherwise I can dig in and try to figure it out.

[loogart]

mmh, intriguing. In your folder structure, did you include the whole /js and /wet-boew folders? I think there are javascript dependencies like

<script src="./wet-boew/js/deps/jquery.magnific-popup.min.js"></script>

that get fed in. I know that magnific popup is probably what WET uses to generate their modals/popups.

[djsutter]

That's probably it. No I didn't include any such folders. Will try that later...

[djsutter]

I did spend time on this and still no solution. We are including wet-boew javascripts, but for some reason it's not picking up on jquery.magnific-popup.min.js even though it exists. I forced it to be included but it did not solve the problem. There is something else but I don't know what it is. Maybe tomorrow.

[loogart]

@djsutter hey sir! let's not spend too much time on the modal for 2.0! Can you setup a WYSIWYG for the pink submit button I have? Just plain code which we can setup, the only difference is that this would always show at the bottom of the box and be FULL width. I also am pushing to get this out asap (i.e. friday-monday rollout) so that we can make sure the transition is smooth for 2019. Spoke to Rodney and Graham about this, they are onboard.

[djsutter]

Okay, let's make sure I understand. You want me to add another field to the challenge to contain the Accept Challenge button so it appears like the bottom one, and you will move the content for the current blue button into that area so that it renders like the red button. Hope I explained that ok

[loogart]

@djsutter yes! This is to increase consistency for the call to action. I do want to be able to edit the button for (1) text and (2) disabled=disabled when we close challenges and (3)the url. I believe the easiest way would be a WYSIWYG editor (with the html of the button setup by default for every new challenge)?

[djsutter]

Working on this. If you see any errors in the next little while, I know about them.

[djsutter]

I got the challenge button working as a footer to the challenge details box. But now I see that the content I added is missing. Probably someone else edited it and it got lost. But I'm not sure. Should I add it back or what?

Also you can provide me what you would like as default text.

[djsutter]

Oh wait.. I was looking at the wrong one. Check out Smart Cities Challenge and then you can fix the HTML to suit. I just left it at what it was (which doesn't work)

[djsutter]

Okay, I removed the button from Smart Cities and added the button to Crush It. Looks like this item is complete once we add the default text. (if any)

[loogart]

awesome, looks perfect, I will finalize content tomorrow (took a break this afternoon, was out of commission!). I'll work on the rest tomorrow!