adjust order of element, fixes #1724

Closes #1724

Merge request studip/studip!1403

resources/assets/stylesheets/scss/sidebar.scss

@@ -57,6 +57,23 @@
         -webkit-box-orient: vertical;
     }
 
+    .sidebar-widget.sidebar-widget-has-extra {
+        display: grid;
+        grid-template-areas: "swh swx" "swc swc";
+        grid-template-rows: auto;
+        grid-template-columns: 1fr min-content;
+
+        .sidebar-widget-header {
+            grid-area: swh;
+        }
+        .sidebar-widget-extra {
+            grid-area: swx;
+        }
+        .sidebar-widget-content {
+            grid-area: swc;
+        }
+    }
+
     .course-avatar-medium,
     .stream-avatar-medium,
     .avatar-medium {
@@ -70,21 +87,13 @@
         margin: 15px 0 0;
         width: $sidebar-width - 5px;
     }
-    .sidebar-widget-header {
-        @include clearfix();
+    .sidebar-widget-header,
+    .sidebar-widget-extra {
         background: $content-color-20;
         color: $base-color;
         font-weight: bold;
         padding: 4px;
     }
-    .sidebar-widget-options {
-        float: right;
-        opacity: 0;
-        transition: all 0.5s;
-    }
-    .sidebar-widget:hover .sidebar-widget-options {
-        opacity: 1;
-    }
 
     // Links inside the sidebar
     a.link-intern {
@@ -216,7 +225,6 @@ div#sidebar-navigation {
 
 .sidebar-widget {
     background: $white;
-    @include clearfix();
 
     .widget-options {
         list-style: none;
@@ -265,13 +273,6 @@ div#sidebar-navigation {
     transition: all 0.5s;
 }
 
-.sidebar-widget-header {
-    @include clearfix();
-    .sidebar-widget-extra {
-        float: right;
-    }
-}
-
 // TODO: These two should be combined into one widget
 select.sidebar-selectlist {
     overflow-y: auto;

templates/sidebar/widget-layout.php

-<div class="<?= $base_class ?>-widget <?= is_array($layout_css_classes) ? htmlReady(implode(' ', $layout_css_classes)) : '' ?>"
-    <?= arrayToHtmlAttributes($additional_attributes) ?>>
+<?php
+/**
+ * @var string $title
+ * @var string $base_class
+ * @var array $additional_attributes
+ * @var string|null $extra
+ * @var string $content
+ */
+
+$css_classes = $layout_css_classes ?? [];
+$css_classes[] = "{$base_class}-widget";
+
+if ($title && isset($extra)) {
+    $css_classes[] = 'sidebar-widget-has-extra';
+}
+
+$additional_attributes['class'] = implode(' ', $css_classes);
+?>
+<div <?= arrayToHtmlAttributes($additional_attributes) ?>>
 <? if ($title): ?>
     <div class="<?= $base_class ?>-widget-header">
-    <? if (isset($extra)): ?>
-        <div class="<?= $base_class ?>-widget-extra"><?= $extra ?></div>
-    <? endif; ?>
         <?= htmlReady($title) ?>
     </div>
 <? endif; ?>
     <div class="<?= $base_class ?>-widget-content">
         <?= $content_for_layout ?>
     </div>
+<? if ($title && isset($extra)): ?>
+    <div class="<?= $base_class ?>-widget-extra"><?= $extra ?></div>
+<? endif; ?>
 </div>