Better style for challenges (+ allow inline placement)

[pbanaszkiewicz]

This PR changes style for challenges.

Following discussion (#9) about challenges, this should enable us to put them inside a lesson (not at the lesson's end, as it was before).

Additional styling was added that resembles "a box with header-title" (see below).

BEFORE:

AFTER:

[gvwilson]

@fmichonneau has been working on our CSS - François, thoughts?

[jduckles]

FWIW 👍 I like the proposed new style.

[pbanaszkiewicz]

Thanks, @jduckles!

I forgot to mention pros and cons of this solution.

Pros:

• almost no change in current challenge syntax in lessons Markdown
• works with any header (h1-h5)

Cons:

• we can't add "Challenge:" in CSS using element::before { content: "Challenge:"; } (what if someone decides to translate the lessons?). So it should be added in the lesson .md itself, for example:

> ## **Challenge:** Query Style {.challenge}
>
> Many people format queries as:
>
> ~~~
> SELECT personal, family FROM person;
> ~~~
>
> or as:
>
> ~~~
> select Personal, Family from PERSON;
> ~~~
>
> What style do you find easiest to read, and why?

Of course last point is invalid if we don't want to highlight that this specific box is a challenge. However, in my opinion we should include **Challenge:** - it makes things clearer, at least for me.

[gvwilson]

-1 to including the word "Challenge" - the formatting should make it clear what is and isn't part of a challenge.

[orchid00]

@pbanaszkiewicz I agree the new style looks better :)

[pbanaszkiewicz]

Thanks, @orchid00!

@gvwilson: not sure if I understand correctly. Are you saying that:

1. we should omit "Challenge:" completely? Preview:
   
2. we should omit **Challenge:** in Markdown source, but add it in CSS via element::before? The result would be the same as in Better style for challenges (+ allow inline placement) #11 (comment).

[gvwilson]

I think we should insert the word `Challenge` during the Markdown-to-HTML conversion process. That saves typing (and possible inconsistency) in the Markdown, and avoids cleverness in the CSS.

[pbanaszkiewicz]

@gvwilson OK, in that case I think this PR is ready to be merged in (unless we're waiting for @fmichonneau's thoughts).

I'll propose an additional filter, but it'll go to https://github.com/swcarpentry/lesson-template, not here.

[gvwilson]

@fmichonneau any thoughts on this one?

[fmichonneau]

The CSS affected by this PR doesn't conflict with what I am working on so I
don't have any issue with it. And I also think it looks much better than we
currently have!

As I was getting more familiar with Bootstrap, I had initially thought we
could replace the styles associated with challenges, objectives, and key
points with Bootstrap's "panels alternatives":
http://getbootstrap.com/components/#panels-alternatives as it would reduce
the amount of CSS we have to manage across the repositories. However, I
don't have strong feelings either way.

[rgaiacs]

I think we should insert the word Challenge during the
Markdown-to-HTML conversion process. That saves typing (and possible
inconsistency) in the Markdown, and avoids cleverness in the CSS.

I'm -1 to have the word "Challenge" in the HTML. I'm +1 for use CSS, element::before { content: "Challenge:"; }. We can also use CSS for handle localization, http://css-tricks.com/almanac/selectors/l/lang/.

[gvwilson]

OK, how about a small icon inserted into the text instead of the word "Challenge"? And is element::before robust across a wide range of browsers?

[fmichonneau]

If we use an icon, we should probably get one from bootstrap:
http://getbootstrap.com/components/#glyphicons (certificate?)

Browser compatibility for ::before seems pretty good:
https://developer.mozilla.org/en-US/docs/Web/CSS/::before#Browser_compatibility

[gvwilson]

OK - I'll defer to whatever you and Raniere agree on.

[pbanaszkiewicz]

@r-gaia-cs: what do you prefer me to do:

1. throw this PR away and rewrite lesson-template/tools/filters/blockquote2div.py to add Bootstrap's panel class attribute and appropriate icon?
2. rewrite our CSS class for .challenge that it looks like Bootstrap's?

[rgaiacs]

OK, how about a small icon inserted into the text instead of the word "Challenge"?

👍 I like the glyphicon-pencil from Bootstrap.

@pbanaszkiewicz Can you change lesson-template/tools/filters/blockquote2div.py? I would like avoid code duplication.

[pbanaszkiewicz]

@pbanaszkiewicz Can you change lesson-template/tools/filters/blockquote2div.py? I would like avoid code duplication.

Yes, sir!

This PR will remove styles for ".challenge" and other classes, instead of providing styles for boxes.

[pbanaszkiewicz]

I used force to rewrite this PR (sorry).

@r-gaia-cs now it's in your hands (together with swcarpentry/DEPRECATED-lesson-template#182). Please review and merge.

[rgaiacs]

@pbanaszkiewicz Sorry for the delay.

I follow

$ git clone git@github.com:pbanaszkiewicz/lesson-template.git
$ cd lesson-template
$ git remote add style git@github.com:pbanaszkiewicz/styles.git
$ git fetch style
$ git checkout bootstrap-panels
$ git subtree pull -P css/ style fix-challenge -m 'Merge new style'
$ make -B preview
$ firefox 01-one.html

and (1) I couldn't read "Lessons Objectives"

and (2) I couldn't see the icon of "Callout box".

Can you help me with it?

[pbanaszkiewicz]

Hi @r-gaia-cs!

Regarding (2): icon fonts won't work until you merge #12, and I rebase against it.

Regarding (1): I'm not sure what's happening here… at first I'd say something is making box's title header have white background. I'm pretty sure I did not introduce such styles.

I'm running into issues with git subtree pull -P css/ style fix-challenges -m 'Merge new style':

From github.com:pbanaszkiewicz/styles
 * branch            fix-challenges -> FETCH_HEAD
fatal: entry  not found in tree ddb226a6b45bec8af629b537f6f292e32821ac84

Can you put your branch as it is somewhere so that we can take a look at the styles and what they are doing?

[rgaiacs]

Regarding (2): icon fonts won't work until you merge #12, and I rebase against it.

OK.

Regarding (1): I'm not sure what's happening here… at first I'd say something is making box's title header have white background. I'm pretty sure I did not introduce such styles. I'm running into issues with `git subtree pull -P css/ style fix-challenges -m 'Merge new style'`: ``` From github.com:pbanaszkiewicz/styles * branch fix-challenges -> FETCH_HEAD fatal: entry not found in tree ddb226a6b45bec8af629b537f6f292e32821ac84 ``` Can you put your branch as it is somewhere so that we can take a look at the styles and what they are doing?

I need to go out now. Will do it when I get home.

[rgaiacs]

@pbanaszkiewicz Sorry for the long delay. You can find the bug at https://github.com/r-gaia-cs/swc-lesson-template/tree/bug-with-challenge-style. The problem is that

<div id="learning-objectives" class="objectives panel panel-primary">
<div class="panel-heading">
<h2 id="learning-objectives" class="objectives panel panel-primary"><span class="glyphicon glyphicon-certificate"></span>Learning Objectives</h2>
</div>
<div class="panel-body">
<ul>
<li>Learning objective 1</li>
<li>Learning objective 2</li>
</ul>
</div>
</div>

when it should be

<div id="learning-objectives" class="objectives panel panel-info">
<div class="panel-heading">
<h2 id="learning-objectives" class="objectives panel panel-info"><span class="glyphicon glyphicon-certificate"></span>Learning Objectives</h2>
</div>
<div class="panel-body">
<ul>
<li>Learning objective 1</li>
<li>Learning objective 2</li>
</ul>
</div>
</div>

like

<div id="callout-box" class="callout panel panel-info">
<div class="panel-heading">
<h2 id="callout-box" class="callout panel panel-info"><span class="glyphicon glyphicon-pushpin"></span>Callout Box</h2>
</div>
<div class="panel-body">
<p>An aside of some kind.</p>
</div>
</div>

[rgaiacs]

@pbanaszkiewicz The problem is

.panel-primary > .panel-heading {
    color: #FFF;
}

and

.panel {
    background-color: #FFF;
}

from css/bootstrap/bootstrap.css. You need to change

.panel-primary > .panel-heading {
    color: #FFF;
}

so the color isn't #FFF.

And could you rebase this pull request and swcarpentry/DEPRECATED-lesson-template#182?
I will merge it after the rebase.

[rgaiacs]

I'm closing this in favor of #17.