Biest 475

app/views/my_courses/groups.php

@@ -4,18 +4,24 @@
     <input type="hidden" name="cid" value="<?= $cid ?>">
     <table class="default collapsable">
         <caption><?= _('Gruppenzuordnung') ?></caption>
+        <colgroup>
+            <col>
+        <? for ($i = 0; $i < 9; $i += 1): ?>
+            <col style="width: 32px">
+        <? endfor; ?>
+        </colgroup>
         <thead>
-        <tr>
-            <th><?= _('Veranstaltung') ?></th>
-            <th colspan="100%"><?= _('Gruppen/Farbe') ?></th>
-        </tr>
+            <tr>
+                <th><?= _('Veranstaltung') ?></th>
+                <th colspan="100%"><?= _('Gruppen/Farbe') ?></th>
+            </tr>
         </thead>
         <? foreach ($groups as $group_id => $group_members): ?>
             <tbody class="<?= $current_semester != $semesters[$group_id]['semester_id'] ? 'collapsed' : ''?>">
             <? if ($group_field !== 'not_grouped'): ?>
 
                 <tr class="table_header header-row">
-                    <th colspan='100%' class="toggle-indicator">
+                    <th colspan="10" class="toggle-indicator">
                         <a class="toggler">
                             <? if (is_array($group_names[$group_id])): ?>
                                 <?= htmlReady(my_substr($group_names[$group_id][1] . ' > ' . $group_names[$group_id][0], 0, 70)) ?>
@@ -31,19 +37,23 @@
                     <td>
                         <a href="<?= URLHelper::getLink('seminar_main.php?auswahl=' . $member['seminar_id']) ?>">
                             <?= htmlReady(Config::get()->IMPORTANT_SEMNUMBER ? $my_sem[$member['seminar_id']]['sem_nr'] : '') ?>
-                            <?= htmlReady(my_substr($my_sem[$member['seminar_id']]['name'], 0, 70)) ?>
+                            <?= htmlReady($my_sem[$member['seminar_id']]['name']) ?>
                         </a>
                         <? if (!$my_sem[$member['seminar_id']]['visible']): ?>
                             <?= _('(versteckt)') ?>
                         <? endif; ?>
                     </td>
-                    <? for ($i = 0; $i < 9; $i++): ?>
-                        <td class="gruppe<?= $i ?>" width="28">
-                            <input type="radio" name="gruppe[<?= $member['seminar_id'] ?>]" value="<?= $i ?>"
-                                   aria-label="<?= _('Zugeordnet zu Gruppe ') . $i ?>"
-                                <? if ($my_sem[$member['seminar_id']]['gruppe'] == $i) echo 'checked'; ?>>
-                        </td>
-                    <? endfor; ?>
+                <? for ($i = 0; $i < 9; $i++): ?>
+                    <td class="gruppe<?= $i ?> mycourses-group-selector" onclick="this.querySelector('input').checked = true;">
+                        <input type="radio" name="gruppe[<?= $member['seminar_id'] ?>]" value="<?= $i ?>"
+                               aria-label="<?= _('Zugeordnet zu Gruppe ') . ($i + 1) ?>"
+                               id="course-group-<?= htmlReady($member['seminar_id']) ?>-<?= $i ?>"
+                            <? if ($my_sem[$member['seminar_id']]['gruppe'] == $i) echo 'checked'; ?>>
+                        <label for="course-group-<?= htmlReady($member['seminar_id']) ?>-<?= $i ?>">
+                            <?= sprintf(_('Gruppe %u zuordnen'), $i + 1) ?>
+                        </label>
+                    </td>
+                <? endfor; ?>
                 </tr>
             <? endforeach; ?>
             </tbody>

resources/assets/stylesheets/scss/my_courses.scss

@@ -8,3 +8,37 @@
     margin: 5px 0;
     background: $white;
 }
+
+.mycourses-group-selector {
+    position: relative;
+
+    background-clip: padding-box;
+    border: 1px solid fade-out($brand-color-lighter, 0.8);
+
+    input[type="radio"] {
+        @extend .sr-only;
+
+        &:checked + label {
+            @include background-icon(accept, info);
+        }
+    }
+
+    &:hover label {
+        @include background-icon(accept, info);
+    }
+
+    label {
+        @include hide-text();
+
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+
+        background-position: center;
+        background-repeat: no-repeat;
+
+        cursor: pointer;
+    }
+}

resources/assets/stylesheets/studip.less

@@ -94,18 +94,6 @@
 
 @import "less/feedback.less";
 
-// Class for DOM elements that should only be visible to Screen readers
-.sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0,0,0,0);
-    border: 0;
-}
-
 /* --- Standardvorgaben ----------------------------------------------------- */
 //TODO: the Body-Background color should be similar to A:link.toolbar and A:visited.toolbar for best effect!!
 html, body {

resources/assets/stylesheets/studip.scss

@@ -29,3 +29,17 @@
 @import "scss/wiki";
 
 @import "scss/grid";
+
+// Class for DOM elements that should only be visible to Screen readers
+.sr-only {
+    border: 0;
+    clip: rect(0 0 0 0);
+    clip-path: inset(100%);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+}