891566 - Build teaching activity template in Thimble

Status: RESOLVED FIXED

(Webmaker Graveyard :: webmaker.org, defect)

Description

[Cassie McDaniel [:cassiemc]]

This will be based on designs in bug 891565.

Comment 1

[Cassie McDaniel [:cassiemc]]

The first phase of this is ready to go, Dale. See bug 891565. I've moved the files into Google drive / production / teach / Activity-template-v3.psd. This folder also includes 2 jpgs showing on and off states for all buttons and links.

Still to do:
* mobile view
* print styles

Let's go over this together before you start building.

Comment 2

[Cassie McDaniel [:cassiemc]]

Let's remove the Language section from this page, given we cannot incorporate dynamic tags into Thimble. I say we move that functionality into the make/details bar eventually.

I am working on an update to the design to include inline photos with the steps.

Chris Appleton will be creating some illustrations for the top image in bug 892907.

Dale: Do you need print and mobile styles for this page, given you have them for the teaching kit template? If so, no prob, I'll create them today.

Laura: Do you know if there is generic content ready for this template as well?

Comment 3

[Dale Karp (:daleee)]

If the mobile/print styles for this page will be similar to the mobile/print styles for the teaching kit templates then I don't believe I need those right now. I can ask you for advice on any differences if I need to

Comment 4

[Laura Hilliger [:epilepticrabbit]]

yep, generic content for activity template sent to copyediting in bug 898405.

Comment 5

[Matt Thompson (@OpenMatt :OpenMatt)]

* Hey guys. I'm assuming that now the KIT template is mostly done, we'll be focusing on finishing off this ACTIVITY template next

* Is there a Thimble make someplace with copy I can edit, like we did with the Activity template?

Comment 6

[Dale Karp (:daleee)]

Hey Matt, I've been working on this since late last week. Feel free to come by my desk for a preview. I haven't published the code yet. I'm just working on getting the print & mobile styles for this looking great; so I'm hoping to hand this off to you content folks by the end of Wednesday!

Comment 7

[Matt Thompson (@OpenMatt :OpenMatt)]

@ Dale ok will do. thanks!

Comment 8

[Laura Hilliger [:epilepticrabbit]]

Hey Matt - there's no MAKE with the activity text yet, but the text is here: https://mofocomms.etherpad.mozilla.org/activity-template-copy

Maybe you want to hack on it there, and I'll build into the template as soon as Dale is ready? Then we can remix iterations :)

Comment 9

[Matt Thompson (@OpenMatt :OpenMatt)]

* I think I'll edit and remix once it's in Thimble -- it easier to write for flow and code comments that way.

* Dale: let us know when that's ready to take a pass on?

Comment 10

[Dale Karp (:daleee)]

Attachment: Design Review

http://wm-teaching-activity.herokuapp.com/teaching

Comment 11

[Cassie McDaniel [:cassiemc]]

Comment on attachment 790396 [details]
Design Review

Looks good, can you remove the hover state from the check boxes?

Comment 12

[Dale Karp (:daleee)]

http://wm-teaching-activity.herokuapp.com/teaching

Ch-ch-ch-ch-check it out
Wh-wh-wh-what's it all about

Comment 13

[Cassie McDaniel [:cassiemc]]

Looks great dale! The image is fixed in desktop Safari and hover states are good.

The numbers in the circles aren't showing up for me, though, on the iphone.

Soooooo close.

Comment 14

[Matt Thompson (@OpenMatt :OpenMatt)]

reaaaaly want to demo this today at 5! :) 

Let me know when I can start using it? Excited!

Comment 15

[Matt Thompson (@OpenMatt :OpenMatt)]

* since Dale's changes are going to be on the CSS side, I'm just going to start using this template now: 

https://make-dev.mozillalabs.com/en-US/projects/

Comment 16

[Dale Karp (:daleee)]

https://bsb.makes.org/thimble/a-teaching-activity-template

Here is the final template markup.

Comment 17

[Laura Hilliger [:epilepticrabbit]]

SUPER AWESOME SUPER HAPPY WORLD.

Some stuff I noticed:

--the discussion box on activity page, if you write lists it looks not nice.
--additional resources, if the whole thing isn't a link, the non linked text is really small
--the header image, is there a way to ensure it doesn't squish, like if it's bigger then the circle, the cirlce clips, and if it's smaller, it stretches to that width/height? Dunno, just saw this one, and thought maybe we can fix: https://nwp.makes.org/thimble/speak-your-mind

Comment 18

[Laura Hilliger [:epilepticrabbit]]

hey guys - reworking some of the NWP resources, and saw that <a>'s in the header of this template are white - need to change that style, it's impossible to read:

https://nwp.makes.org/thimble/is-this-thing-on-using-a-webcam-for-stopmotion

Comment 19

[Dale Karp (:daleee)]

Hello Laura. I have fixed the unreadable <a>s in the teaching activity.

Will look into others.