[Testing] [NWP Letters to the Next President 2.0] Letters to the Next President template

[chadsansing]

Everything is up for comment - typos, bugs, content.

https://d157rqmxrxj6ey.cloudfront.net/chadsansing/24389/letter-template.html

cc @ldecoursy, @KevZawacki

Back to issues.

[anmechung]

Perhaps @ldecoursy and @KevZawacki are planning to add already, but some kind of general intro paragraph with who and why would be helpful, and perhaps some examples of what people could include in the template/madlib? We did something like this with NWP in the past - will unearth if I can find it and share.

[ldecoursy]

I like it! @anmechung We're planning to build a landing page that will lead to this and other activities, so we'll definitely have some added context there.

[chadsansing]

@anmechung, @ldecoursy, & @KevZawacki: any better?

https://d157rqmxrxj6ey.cloudfront.net/chadsansing/24389/

Updated the landing page for the letter template. Happy to collaborate on copy!

[KevZawacki]

@chadsansing Looks great! One very small tweak to the landing page:

• Add a period to the last sentence of the last paragraph

[chadsansing]

Thanks, @KevZawacki!

[ldecoursy]

I heard back from NWP - they think it's important for this activity to have a tutorial. Can we maybe remix the tutorial from the 6-word summer activity? https://thimble.mozilla.org/anonymous/3826fec7-fe95-4dba-aee2-09ddd4a04ca5/2500

[anmechung]

@ldecoursy make sense and what kind of tutorial are they looking for? i.e. what's the purpose of it? make a poster, a campaign slogan to go along with the letter?

[ldecoursy]

@anmechung An embedded tutorial in the activity so teachers/learners know have the step-by-step instructions for what to do with the remixable letter.

[chadsansing]

@ldecoursy & @anmechung - done (intro page) and done (letter template). Feedback appreciated.

[jgmac1106]

It might just be my display size but I see the background image not filling leaving me with a white bar down the right and they your two div box with the quote bleeds over. I am sure most students will be working on a smaller display so it may be a non-issue.

On Wed, Jan 27, 2016 at 7:33 AM Chad Sansing notifications@github.com wrote:

@ldecoursy https://github.com/ldecoursy & @anmechung https://github.com/anmechung - done (intro page) and done (letter template). Feedback appreciated.

— Reply to this email directly or view it on GitHub https://github.com/mozilla/learning-networks/issues/310#issuecomment-175594648 .

[jgmac1106]

The tutorial is great. The only issue is line numbers after we tell them to edit line 44. If they add more than one line all the other line numbers in the tutorial are off.

Maybe something like:

The letter is separated into paragraphs. Paragraphs open and close with the p tag. In the first paragraph which starts on line 44 you...

In the next paragraph you...

You already have these in the html comments maybe just duplicate this or connect the two chains of thought.

[chadsansing]

@jgmac1106 - I think switching from fill to cover solved the background image problem. Will mull line breaks, maybe default to paragraphs, but each element takes up a line. For example, each paragraph is a line. If a user adds a paragraph or deletes one, then we'll run into issues.

[jgmac1106]

Yeah I have never figured out the best way to suggest line numbers for when the content starts moving.

On Wed, Jan 27, 2016 at 8:32 AM Chad Sansing notifications@github.com wrote:

@jgmac1106 https://github.com/jgmac1106 - I think switching from fill to cover solved the background image problem. Will mull line breaks, maybe default to paragraphs, but each element takes up a line. For example, each paragraph is a line. If a user adds a paragraph or deletes one, then we'll run into issues.

— Reply to this email directly or view it on GitHub https://github.com/mozilla/learning-networks/issues/310#issuecomment-175630089 .

[chadsansing]

I guess there are anchors, names, etc. for that, but it would be cool to pin a line.

[jgmac1106]

The anchors and names then make a simple project just a little more complex. You could also leave extra line spacing in the index file but thats bad practice. Still always willing to break a few rules to support learning.

Being able to pin and click from tutorial yeah be a cool feature for down the road if it is technically possible.

[anmechung]

@chadsansing intro page and letter template look good to me. For sense of purpose, can there be some kind of explanation for youth as to how these letters get to the Presidential candidates, whether they should expect a response, what kind of impact it might have (example from past efforts?). Also, I may have missed this, but what is the 2.0 of Letters of President 2.0 mean?

[chadsansing]

@ldecoursy - ideas/suggested copy re: purpose?

@anmechung, "2.0" = second time they've done the campaign.

[ldecoursy]

Purpose q's might be something to check with NWP on - maybe we can add a note to share their published links with #nextprez as one way to find finished letters.

[chadsansing]

@ldecoursy, @KGorr, @anmechung, @jgmac1106 - simple quote project to complement the letter' campaign poster and Goggles annotation activities forthcoming.

https://d157rqmxrxj6ey.cloudfront.net/chadsansing/29280/

Feedback appreciated.

[KGorr]

Nice job, @chadsansing - I love it!

Two teensy things: The 1st Creative Commons link has a typo, and thus not working. Step 4 has a typo: Beccause

[Carotejada]

Buenísima! That´s my Candidate.

[chadsansing]

Campaign poster also taking shape, @ldecoursy, @KGorr, @anmechung, @jgmac1106.

@flukeout, my positioning skillz are lacking; how can I stick the slogan div to the bottom of the poster div so it doesn't slide up in smaller viewports?

[flukeout]

@chadsansing There is actually a typo in your CSS, you're missing a semicolon at the end of the position: realative line which is causing it to get ignored, that's why the slogan styles aren't taking.

Additionally, for the .slogan you can use bottom: 0 instead of top: 650px - that will put it 0 pixels from the bottom of the .poster so even if your poster gets taller, it will render as expected.

Screenshot of the busted rule from the Firefox inspector panel...

.

[chadsansing]

Yeah; I did the top thing since the bottom one wasn't working; oh, semicolon; how dastardly art thou; aren't thou? Thanks, @flukeout -

[anmechung]

@chadsansing like the poster very much, but I would perhaps choose a photo/animal that is more party neutral.

[chadsansing]

@anmechung, Socks is gone; meet Candidate Kitteh: https://d157rqmxrxj6ey.cloudfront.net/chadsansing/29280/.

[flukeout]

Hey @chadsansing I have a cool CSS rule for you to try- calc() for the header width. It does a calculation based on what's inside of the parentheses.

header {
  background-color:#fff;
  border: 4px solid #070201;
  border-radius:10px;
  opacity:.8;
  padding-left:1em;
  width: calc(100% - 200px);  /* <-- the calc() */
}

This will make the header always leave the same amount of space for the Remix button, at any width of the browser. When you set it to 90%, it sometimes leaves enough room but sometimes not. Anyway, it's a cool way to do widths and heights!

I'm not sure if 200px is the right width, just using it as an example - try it out and let me know if it's helpful.

[chadsansing]

Swag, @flukeout. Will implement here and in a few other makes, as well.

[anmechung]

:)

[chadsansing]

Closing for now as we have several templates and activities in-hand.