use flex layout to address #212, fixes #258 (by revert)

css/vips.css

@@ -428,6 +428,16 @@ button.vips_file_upload:hover {
     padding: 4px;
 }
 
+.mc_flex, form.default label.mc_flex {
+    align-items: start;
+    column-gap: 6px;
+    display: flex;
+}
+
+.mc_flex > img:first-child {
+    padding: 2px;
+}
+
 .correct_item {
     background: #f0fff0;
     border: 1px solid #b0ffb0;

images/choice_checked.svg

 <?xml version="1.0" encoding="utf-8"?>
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="12px" height="12px" viewBox="0 0 16 16">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 16 16">
 <path d="M7.986,1.337c-3.688,0-6.678,2.988-6.678,6.676c0,3.687,2.99,6.676,6.678,6.676c3.689,0,6.677-2.989,6.677-6.676
 	C14.663,4.326,11.675,1.337,7.986,1.337z M7.986,13.231c-2.882,0-5.219-2.336-5.219-5.218s2.337-5.218,5.219-5.218
 	c2.882,0,5.219,2.335,5.219,5.218S10.868,13.231,7.986,13.231z"/>

images/choice_unchecked.svg

 <?xml version="1.0" encoding="utf-8"?>
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="12px" height="12px" viewBox="0 0 16 16">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 16 16">
 <path d="M7.999,1.337c-3.687,0-6.676,2.988-6.676,6.676c0,3.687,2.989,6.676,6.676,6.676c3.689,0,6.677-2.989,6.677-6.676
 	C14.676,4.326,11.688,1.337,7.999,1.337z M7.999,13.231c-2.88,0-5.217-2.336-5.217-5.218s2.337-5.218,5.217-5.218
 	c2.882,0,5.218,2.335,5.218,5.218S10.881,13.231,7.999,13.231z"/>

views/exercises/mc_exercise/correct.php

 <div class="mc_list inline-content">
     <? foreach ($exercise->task['answers'] as $key => $entry): ?>
-        <div class="<?= $show_solution && $entry['score'] ? 'correct_item' : 'mc_item' ?>">
+        <div class="mc_flex <?= $show_solution && $entry['score'] ? 'correct_item' : 'mc_item' ?>">
             <? if (isset($response[$key]) && $response[$key]): ?>
                 <?= Assets::img(vips_image_url('choice_checked.svg')) ?>
             <? else: ?>

views/exercises/mc_exercise/print.php

 <div class="mc_list inline-content">
     <? foreach ($exercise->task['answers'] as $key => $entry): ?>
-        <div class="<?= $show_solution && $entry['score'] ? 'correct_item' : 'mc_item' ?>">
+        <div class="mc_flex <?= $show_solution && $entry['score'] ? 'correct_item' : 'mc_item' ?>">
             <? if (isset($response[$key]) && $response[$key]): ?>
                 <?= Assets::img(vips_image_url('choice_checked.svg')) ?>
             <? else: ?>

views/exercises/mc_exercise/solve.php

 <? foreach ($exercise->task['answers'] as $key => $entry): ?>
-    <label class="inline-content">
+    <label class="inline-content mc_flex">
         <input type="checkbox" name="answer[<?= $key ?>]" value="1"<? if (isset($response[$key]) && $response[$key]): ?> checked<? endif ?>>
         <?= formatReady($entry['text']) ?>
     </label>

views/exercises/sc_exercise/correct.php

@@ -7,7 +7,7 @@
 
     <div class="mc_list inline-content">
         <? foreach ($task['answers'] + $optional_answer as $key => $entry): ?>
-            <div class="<?= $show_solution && $entry['score'] == 1 ? 'correct_item' : 'mc_item' ?>">
+            <div class="mc_flex <?= $show_solution && $entry['score'] == 1 ? 'correct_item' : 'mc_item' ?>">
                 <? if (isset($response[$group]) && $response[$group] === "$key"): ?>
                     <?= Assets::img(vips_image_url('choice_checked.svg')) ?>
                 <? else: ?>

views/exercises/sc_exercise/print.php

@@ -7,7 +7,7 @@
 
     <div class="mc_list inline-content">
         <? foreach ($task['answers'] + $optional_answer as $key => $entry): ?>
-            <div class="<?= $show_solution && $entry['score'] == 1 ? 'correct_item' : 'mc_item' ?>">
+            <div class="mc_flex <?= $show_solution && $entry['score'] == 1 ? 'correct_item' : 'mc_item' ?>">
                 <? if (isset($response[$group]) && $response[$group] === "$key"): ?>
                     <?= Assets::img(vips_image_url('choice_checked.svg')) ?>
                 <? else: ?>

views/exercises/sc_exercise/solve.php

@@ -6,7 +6,7 @@
     </div>
 
     <? foreach ($task['answers'] + $optional_answer as $key => $entry): ?>
-        <label class="inline-content">
+        <label class="inline-content mc_flex">
             <input type="radio" name="answer[<?= $group ?>]" value="<?= $key ?>"
                 <? if (!isset($response[$group]) && $key == -1 || isset($response[$group]) && $response[$group] === "$key"): ?>checked<? endif ?>>
             <?= formatReady($entry['text']) ?>