From 04aaf9444db376bd9880a489abbe217f172538e8 Mon Sep 17 00:00:00 2001
From: Elmar Ludwig <elmar.ludwig@uni-osnabrueck.de>
Date: Mon, 8 Jul 2024 14:54:46 +0200
Subject: [PATCH] use flex layout to address #212, fixes #258 (by revert)
---
css/vips.css | 10 ++++++++++
images/choice_checked.svg | 2 +-
images/choice_unchecked.svg | 2 +-
views/exercises/mc_exercise/correct.php | 2 +-
views/exercises/mc_exercise/print.php | 2 +-
views/exercises/mc_exercise/solve.php | 2 +-
views/exercises/sc_exercise/correct.php | 2 +-
views/exercises/sc_exercise/print.php | 2 +-
views/exercises/sc_exercise/solve.php | 2 +-
9 files changed, 18 insertions(+), 8 deletions(-)
diff --git a/css/vips.css b/css/vips.css
index 159e7bc..222a0ef 100644
--- a/css/vips.css
+++ b/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;
diff --git a/images/choice_checked.svg b/images/choice_checked.svg
index 9a41a8e..04369a4 100644
--- a/images/choice_checked.svg
+++ b/images/choice_checked.svg
@@ -1,5 +1,5 @@
<?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"/>
diff --git a/images/choice_unchecked.svg b/images/choice_unchecked.svg
index 7f9b0ae..cd92a0c 100644
--- a/images/choice_unchecked.svg
+++ b/images/choice_unchecked.svg
@@ -1,5 +1,5 @@
<?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"/>
diff --git a/views/exercises/mc_exercise/correct.php b/views/exercises/mc_exercise/correct.php
index c732295..faec5de 100644
--- a/views/exercises/mc_exercise/correct.php
+++ b/views/exercises/mc_exercise/correct.php
@@ -1,6 +1,6 @@
<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: ?>
diff --git a/views/exercises/mc_exercise/print.php b/views/exercises/mc_exercise/print.php
index 42ef915..2490986 100644
--- a/views/exercises/mc_exercise/print.php
+++ b/views/exercises/mc_exercise/print.php
@@ -1,6 +1,6 @@
<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: ?>
diff --git a/views/exercises/mc_exercise/solve.php b/views/exercises/mc_exercise/solve.php
index 050433f..0872ba3 100644
--- a/views/exercises/mc_exercise/solve.php
+++ b/views/exercises/mc_exercise/solve.php
@@ -1,5 +1,5 @@
<? 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>
diff --git a/views/exercises/sc_exercise/correct.php b/views/exercises/sc_exercise/correct.php
index b1cd8a2..83c99b1 100644
--- a/views/exercises/sc_exercise/correct.php
+++ b/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: ?>
diff --git a/views/exercises/sc_exercise/print.php b/views/exercises/sc_exercise/print.php
index 45b1923..a9baf1b 100644
--- a/views/exercises/sc_exercise/print.php
+++ b/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: ?>
diff --git a/views/exercises/sc_exercise/solve.php b/views/exercises/sc_exercise/solve.php
index 4f0b677..ebe6d9e 100644
--- a/views/exercises/sc_exercise/solve.php
+++ b/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']) ?>
--
GitLab