Checkbox magic #230

agnetedjupvik · 2017-04-26T12:05:07Z

This uses markdown-it-checkbox to support checkboxes for each subtask in a lesson, as adressed in issue #218 in codeclub-viewer.

The checkboxes here are dumb, and they only have a 1-indexed ID given by markdown-it-checkbox. They can become unique identificators by combining them with the task name (or path).

Merging this now, while checkboxes aren't in use in the oppgaver repo yet, will change the appearance of regular list items into actual lists, not fake checkboxes. Checkboxes can then be added into oppgaver by using [ ] instead of +.

arve0 · 2017-04-26T12:09:01Z

Thanks!

Do you have a build published in somewhere? If not, do not stress it, I'll try it local later today.

…testing

arve0 · 2017-04-26T12:12:48Z

package.json

    "jquery": "^2.1.3",
    "js-cookie": "^2.0.4",
    "json5": "^0.4.0",
+    "markdown-it-checkbox": "^1.1.0",


Conventions in this repo are "build-deps" => development dependencies and "Client-deps" => dependencies.

Oooh, so I should save-dev on this one. Should have spotted that. Thanks!

agnetedjupvik · 2017-04-26T13:49:17Z

If we can merge this before the weekend, that would be great :)
I've gotten started on a branch of codeclub-viewer which introduces some rudimentary actions and reducers which will attempt to add state to these subtasks. I think the work with this would be soo much easier if we could test with these checkboxes, and I want to do all of that next week.

NorwegianKiwi · 2017-04-26T18:50:02Z

styles/lesson.less

  ul, ol {
    padding: 0;
-    margin: 0 0 20px 0;
+    margin: 0 0 20px 20px;


Jeg har lyst å foreslå noen endringer. Jeg synes at listene skal ligne litt mer på det som er i dag enn det @agnetedjupvik foreslår. Så hvis vi dropper denne endringen...

NorwegianKiwi · 2017-04-26T18:50:13Z

styles/lesson.less

  }
  li {
-    list-style: none;
+    list-style: circle;


...og dropper denne endringen...

NorwegianKiwi · 2017-04-26T18:50:37Z

styles/lesson.less

+    list-style: circle;
    padding-top: 10px;
    padding-bottom: 10px;
-    margin-left: -30px;


(denne linjen kan vi godt fjerne, for den blir jo "overskrevet" av neste linje)

NorwegianKiwi · 2017-04-26T18:50:58Z

styles/lesson.less

-  // check box for list items
-  li:before {
-    content: " ";
-    border-radius: 8px;


...øke denne, f.eks. til 20px, slik at det blir en sirkel...

NorwegianKiwi · 2017-04-26T18:51:31Z

styles/lesson.less

-    content: " ";
-    border-radius: 8px;
-    border: 3px solid #ABDBEA;
-    padding: 10px 10px;


... gjør sirkelen litt mindre, f.eks. padding: 8px (vi trenger tallet bare 1 gang)...

NorwegianKiwi · 2017-04-26T18:52:56Z

styles/lesson.less

-  li:before {
-    content: " ";
-    border-radius: 8px;
-    border: 3px solid #ABDBEA;


... beholde denne...

NorwegianKiwi · 2017-04-26T18:53:08Z

styles/lesson.less

    padding-bottom: 10px;
-    margin-left: -30px;
-    // adjust all elements inside a list item
-    margin-left: 45px;


...beholde denne...

NorwegianKiwi · 2017-04-26T18:53:20Z

styles/lesson.less

-  }
-  // check box for list items
-  li:before {
-    content: " ";


...beholde denne...

NorwegianKiwi · 2017-04-26T18:55:35Z

styles/lesson.less

  margin-top: 10px;
 }

+label {


Når det gjelder denne, hadde det ikke vært lurt å legge denne inni en klasse, slik at det ikke ødelegger for bootstrap sin listevisning evt andre steder? Det kunne jo være innenfor .check, .activity, .save?

NorwegianKiwi · 2017-04-26T19:34:28Z

styles/lesson.less


+label {
+  font-weight: normal;
+  margin-left: 6px;


Synes ikke disse checkboxene er så veldig fine. Hva om vi heller gjør noe slikt?

input[type="checkbox"] { opacity: 0; filter: alpha(opacity=0); } input[type="checkbox"] + label { position: relative; margin-left: 10px; font-weight: normal; } input[type="checkbox"] + label:before { content: ''; display: inline-block; visibility: visible; left: 0; width: 1em; height: 1em; margin: 0 0.8em -0.1em -1em; line-height: 0.6; text-align: center; /* Put checkbox styles here: */ border: 3px solid #ABDBEA; } input[type="checkbox"]:checked + label:before { content: '✔'; line-height: 0.8em; text-align: center; }

(fant dette på nettet, og tweaket littegrann, så kan sikkert gjøres bedre, men nå ligner det ihvertfall litt mer på listevisningen)

NorwegianKiwi · 2017-04-26T19:37:07Z

En ting som er litt dumt, er at det ser ut som om markdown-it-checkbox (tror det er denne) ikke parser innholdet helt riktig. For at alt skal komme inni <label>, så må det være på samme linje som [ ]...

Jeg tror det er dette som gjør at innholdet for hele checkbox-label (list item) ikke blir indendert riktig.

Det er mulig at mcecot/markdown-it-checkbox#5 løser dette, men da må den gjøres (evt at man forker markdown-it-checkbox og fikser det selv)...

arve0 · 2017-04-26T19:44:17Z

Hi! As @NorwegianKiwi says, the style is a step back:

What about another solution: I see you plan to persistent store the state. For that you need to implement some click event handler. Then, the same UI can be achieved by using similar styling as @NorwegianKiwi suggest.

Edit: To be clear, keeping the + and --syntax.

arve0 · 2017-04-26T20:16:07Z

https://jsbin.com/tasubec/edit?html,css,output

agnetedjupvik · 2017-05-03T12:33:48Z

So now I have a .checked class, and I'm thinking that I'll use that for managing the subtask state in codeclub-viewer.

Why Travis fails and some links appear broken, though, is a mystery to me... I see that we've had problems with it in earlier commits and it has been solved in later commits for no apparent reason.

arve0 · 2017-05-03T20:10:47Z

Why Travis fails and some links appear broken, though, is a mystery to me...

We use PhantomJS to generate PDFs. PhantomJS crashes sometimes due to a memory leak. The crash is not resolved gracefully. With headless Chrome in the making, the PDF generation will be better in near future (hopefully).

arve0 · 2017-05-03T20:24:46Z

Doesn't look the plugin works well will list points which are several lines.

code

[ ] Prøv å klikk på de blå klossene midt på skjermen. For eksempel,
  om du klikker på

As you can see in the picture, only the first line of the check point are contained in the <label>.

Link to lesson: https://raw.githubusercontent.com/Skagevang/oppgaver/076ea3184ed162886c5b59598efdd3c6d409b8e1/src/scratch/astrokatt/astrokatt.md

agnetedjupvik · 2017-05-03T21:25:46Z

Yup, noticed it. I made a fork of the plugin and will try to see what I can do to fix it in the next couple of days. Don't hesitate to bring in any ideas for that :)

arve0 · 2017-05-04T05:06:12Z

Also check the other checkbox plugins, there are two others.

agnetedjupvik · 2017-05-08T14:34:50Z

We found a plugin which adds all text into labels in order for it to sound nicer using text-to-speech tools. However, we found out that it wrapped everything in so many other tags that it really doesn't give any value to the site at all. So, I'll add the clickable label thing as an issue in my fork, which can be solved later on, but is not required for this to be merged.

arve0 · 2017-05-09T18:22:41Z

Still issue with list points over several lines, list points should be contained in a parent node.

For example

[ ] List point
  over several lines

should become something like

<li>
  <input type=checkbox>
  <p>list point</p>
  <p>over several lines</p>
</li>

but currently renders to

<p><input type=checkbox>list point</p>
<p>over several lines</p>

Which gives

instead of

This makes it hard to distinct "just text" vs "task".

NorwegianKiwi · 2017-05-29T12:17:50Z

Tip: Perhaps correct alignment here as was done for kodeklubben/codeclub-viewer#267 ?

…ed, however

arve0 · 2017-06-05T18:20:06Z

styles/lesson.less

+  display: none;
+}
+
+input[type="checkbox"] + label {


Curious, what does + label and + label::before do?

<label> which is sibling to <input type="checkbox">.

https://stackoverflow.com/questions/1139763/what-does-the-plus-sign-css-selector-mean

arve0 · 2017-06-05T18:29:27Z

Thanks

agnetedjupvik added 2 commits April 26, 2017 13:45

Use markdown-it-checkbox to create checkboxes for tasks lists

5550d3d

Remove fake checkboxes for lists and make them lists again

f385970

Add markdown-it-checkbox to codeclub_lesson_builder, needed only for …

0f32737

…testing

arve0 reviewed Apr 26, 2017

View reviewed changes

Add markdown-it-checkbox to devdependencies

c7b6eb8

remove markdown-it-checkbox from dependencies

00fde82

NorwegianKiwi suggested changes Apr 26, 2017

View reviewed changes

Style checkboxes and list items more similarly

baac72c

Skagevang mentioned this pull request May 1, 2017

Checkboxes kodeklubben/oppgaver#379

Merged

Add event listener which adds checked class to on checkbox click

1d24160

Use markdown-it-checkbox fork which removes text from labels

1e646e2

NorwegianKiwi mentioned this pull request May 24, 2017

Slight adjustment of the vertical alignment of the circles for the lists kodeklubben/codeclub-viewer#267

Merged

agnetedjupvik and others added 2 commits May 31, 2017 15:00

Add markdown-it-task-checkbox checkboxes and styling. Is still disabl…

2f82729

…ed, however

fix click handler for checkbox

8772ae6

arve0 reviewed Jun 5, 2017

View reviewed changes

remove unused dep, update browser-sync, add package-lock

f86327e

arve0 merged commit bca6146 into arve0:master Jun 5, 2017

agnetedjupvik deleted the checkbox branch June 5, 2017 18:30

arve0 mentioned this pull request Jun 7, 2017

Added teacher-activity to CSS #231

Merged

Checkbox magic #230

Checkbox magic #230

Uh oh!

Conversation

agnetedjupvik commented Apr 26, 2017

Uh oh!

arve0 commented Apr 26, 2017

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

agnetedjupvik commented Apr 26, 2017

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

NorwegianKiwi commented Apr 26, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

arve0 commented Apr 26, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

arve0 commented Apr 26, 2017

Uh oh!

agnetedjupvik commented May 3, 2017

Uh oh!

arve0 commented May 3, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

arve0 commented May 3, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

agnetedjupvik commented May 3, 2017

Uh oh!

arve0 commented May 4, 2017 via email

Uh oh!

agnetedjupvik commented May 8, 2017

Uh oh!

arve0 commented May 9, 2017

Uh oh!

NorwegianKiwi commented May 29, 2017

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

arve0 commented Jun 5, 2017

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

NorwegianKiwi commented Apr 26, 2017 •

edited

Loading

arve0 commented Apr 26, 2017 •

edited

Loading

arve0 commented May 3, 2017 •

edited

Loading

arve0 commented May 3, 2017 •

edited

Loading