Redesign "Edit lecture" page

app/assets/javascripts/lectures.coffee

@@ -9,6 +9,17 @@ disableExceptOrganizational = ->
   $('[data-bs-toggle="collapse"]').prop('disabled', true).removeClass('clickable')
   return
 
+# Load example data (erdbeere) for structures
+loadExampleStructures = ->
+  structuresBody = $('#erdbeereStructuresBody')
+  lectureId = structuresBody.data('lecture')
+  loading = structuresBody.data('loading')
+  structuresBody.empty().append(loading)
+  $.ajax Routes.edit_structures_path(lectureId),
+    type: 'GET'
+    dataType: 'script'
+  return
+
 $(document).on 'turbolinks:load', ->
   initBootstrapPopovers()
   # if any input is given to the lecture form (for people in lecture),
@@ -282,14 +293,7 @@ $(document).on 'turbolinks:load', ->
       largeDisplay()
     return
 
-  $('#erdbeere_structures_heading').on 'click', ->
-    lectureId = $(this).data('lecture')
-    loading = $(this).data('loading')
-    $('#erdbeereStructuresBody').empty().append(loading)
-    $.ajax Routes.edit_structures_path(lectureId),
-      type: 'GET'
-      dataType: 'script'
-    return
+  loadExampleStructures()
 
   $lectureStructures = $('#lectureStructuresInfo')
   if $lectureStructures.length > 0

app/assets/stylesheets/lectures.scss

@@ -73,4 +73,35 @@
   &:hover {
     color: white !important;
   }
+}
+
+#lecture-nav-pills {
+  background-color: white;
+  justify-content: center;
+  padding-top: 1em;
+  padding-bottom: 1em;
+
+  box-shadow: 0px 2px 7px 0rem rgba(130,26,59,0.2);
+  border: #821A3B solid 1px;
+  border-radius: 0.4em;
+  margin-bottom: 1.5em;
+}
+
+.lecture-nav-pill-button {
+  --bs-nav-link-color: #821A3B;
+  --bs-nav-link-hover-color: #8d1c40;
+  --bs-nav-pills-link-active-bg: #821A3B;
+
+  &:focus-visible {
+    box-shadow: 0 0 0 0.25rem rgba(130, 26, 59, 0.25);
+  }
+}
+
+
+.lecture-pane {
+  background-color: white;
+  padding: 1.5em 1em;
+  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
+  border: gray 1px solid;
+  border-radius: 0.4em;
 }

app/views/lectures/edit/_announcements.html.erb

@@ -1,44 +1,15 @@
-  <div class="accordion-item bg-light">
-    <div class="accordion-header">
-      <button class="accordion-button collapsed"
-              type="button"
-              id="announcements_heading"
-              data-bs-toggle="collapse"
-              data-bs-target="#announcements_collapse"
-              aria-expanded="false"
-              aria-controls="announcements_collapse">
-        <div class="row">
-          <div class="col-12">
-            <h5>
-              <%= t('categories.announcements') %>
-              (<%= lecture.announcements.size %>)
-            </h5>
-          </div>
-        </div>
-      </button>
-    </div>
-    <div id="announcements_collapse"
-         class="collapse"
-         role="tabpanel"
-         aria-labelledby="heading"
-         data-bs-parent="#lectureAccordion">
-      <div class="accordion-body">
-        <div class="row mb-2">
-          <div class="col-12 text-center">
-            <%= link_to t('buttons.create_announcement'),
-                        new_announcement_path(params: { lecture: lecture.id }),
-                        class: 'btn btn-sm btn-secondary',
-                        id: 'new-announcement-button',
-                        remote: true %>
-          </div>
-        </div>
-        <% announcements.each do |a| %>
-          <div class="row border-bottom mx-2 px-4 py-2"
-               id="row-announcement-<%= a.id %>">
-            <%= render partial: 'announcements/row_for_lecture_edit',
-                       locals: { announcement: a }%>
-          </div>
-        <% end %>
-      </div>
-    </div>
+<div class="col-12 text-center">
+  <%= link_to t('buttons.create_announcement'),
+              new_announcement_path(params: { lecture: lecture.id }),
+              class: 'btn btn-sm btn-secondary',
+              id: 'new-announcement-button',
+              remote: true %>
+</div>
+
+<% announcements.each do |a| %>
+  <div class="row border-bottom mx-2 px-4 py-2"
+        id="row-announcement-<%= a.id %>">
+    <%= render partial: 'announcements/row_for_lecture_edit',
+                locals: { announcement: a }%>
   </div>
+<% end %>

app/views/lectures/edit/_assignments.html.erb

@@ -1,120 +1,94 @@
-<div class="accordion-item bg-light">
-  <div class="accordion-header">
-    <button class="accordion-button collapsed"
-            type="button"
-            id="assignments_heading"
-            data-bs-toggle="collapse"
-            data-bs-target="#assignments_collapse"
-            aria-expanded="false"
-            aria-controls="assignments_collapse">
-      <div class="row">
-        <div class="col-12">
-          <h5>
-            <%= t('basics.assignments') %>
-          </h5>
-        </div>
-      </div>
-    </button>
+<div class="row mb-3">
+  <div class="col-12 text-center">
+    <%= link_to t('admin.assignment.new'),
+                new_assignment_path(params: { lecture_id: lecture.id }),
+                class: 'btn btn-sm btn-primary',
+                id: 'newAssignmentButton',
+                remote: true %>
   </div>
-  <div id="assignments_collapse"
-       class="collapse"
-       role="tabpanel"
-       aria-labelledby="heading"
-       data-bs-parent="#lectureAccordion">
-    <div class="accordion-body">
-      <div class="row mb-3">
-        <div class="col-12 text-center">
-          <%= link_to t('admin.assignment.new'),
-                      new_assignment_path(params: { lecture_id: lecture.id }),
-                      class: 'btn btn-sm btn-primary',
-                      id: 'newAssignmentButton',
-                      remote: true %>
-        </div>
+</div>
+<div class="list-group">
+  <div class="list-group-item bg-light"
+        id="assignmentListHeader"
+        style="display: <%= show(lecture.assignments?) %>">
+    <div class="row">
+      <div class="col-2">
+        <h6>
+          <%= t('basics.title') %>
+        </h6>
+      </div>
+      <div class="col-3">
+        <h6>
+          <%= t('basics.deadline') %>
+        </h6>
+      </div>
+      <div class="col-2">
+        <h6>
+          <%= t('basics.medium') %>
+        </h6>
+      </div>
+      <div class="col-2">
+        <h6>
+          <%= t('submission.file_format') %>
+        </h6>
+      </div>
+      <div class="col-2">
+        <h6>
+          <%= t('assignment.deletion_date') %>
+        </h6>
       </div>
-      <div class="list-group">
-        <div class="list-group-item bg-light"
-             id="assignmentListHeader"
-             style="display: <%= show(lecture.assignments?) %>">
-          <div class="row">
-            <div class="col-2">
-              <h6>
-                <%= t('basics.title') %>
-              </h6>
-            </div>
-            <div class="col-3">
-              <h6>
-                <%= t('basics.deadline') %>
-              </h6>
-            </div>
-            <div class="col-2">
-              <h6>
-                <%= t('basics.medium') %>
-              </h6>
-            </div>
-            <div class="col-2">
-              <h6>
-                <%= t('submission.file_format') %>
-              </h6>
-            </div>
-            <div class="col-2">
-              <h6>
-                <%= t('assignment.deletion_date') %>
-              </h6>
-            </div>
-            <div class="col-1">
-              <h6>
-                <%= t('basics.action') %>
-                <%= helpdesk(t('assignment.destruction_info'), true) %>
-              </h6>
-            </div>
-          </div>
-        </div>
-        <% (lecture.scheduled_assignments.sort_by(&:deadline).reverse +
-            lecture.assignments.order('deadline DESC')).each do |a| %>
-          <%= render partial: 'assignments/row',
-                     locals: { assignment: a } %>
-        <% end %>
+      <div class="col-1">
+        <h6>
+          <%= t('basics.action') %>
+          <%= helpdesk(t('assignment.destruction_info'), true) %>
+        </h6>
       </div>
-      <%= form_with model: lecture,
-                    html: { id: 'lecture-assignments-form',
-                            class: 'mt-4 px-2' } do |f| %>
-        <div class="row">
-          <div class="mb-3 col-md-6">
-            <%= f.label :submission_max_team_size,
-                        t('admin.lecture.submission_max_team_size'),
-                        class: "form-label" %>
-            <%= helpdesk t('admin.lecture.info.submission_max_team_size'),
-                         false %>
-            <%= f.number_field :submission_max_team_size,
-                               min: 1,
-                               max: 10000,
-                               class: 'form-control mx-2',
-                               data:
-                                { value: lecture.submission_max_team_size } %>
-          </div>
-          <div class="mb-3 col-md-6">
-            <%= f.label :submission_grace_period,
-                        t('admin.lecture.submission_grace_period'),
-                        class: "form-label" %>
-            <%= helpdesk t('admin.lecture.info.submission_grace_period'),
-                         false %>
-            <%= f.number_field :submission_grace_period,
-                               min: 0,
-                               max: 262800,
-                               class: 'form-control mx-2',
-                               data: { value: lecture.submission_grace_period } %>
-          </div>
-        </div>
-        <div id="lecture-assignments-warning" class="mt-3">
-          <%= t('warnings.unsaved_changes') %>
-          <%= f.submit t('buttons.save_and_exit'),
-                       class: "btn btn-sm btn-primary" %>
-          <button type="button" id="cancel-lecture-assignments"
-                  class="btn btn-sm btn-secondary">
-            <%= t('buttons.cancel') %>
-          </button>
-        </div>
-      <% end %>
     </div>
   </div>
-</div>
+  <% (lecture.scheduled_assignments.sort_by(&:deadline).reverse +
+      lecture.assignments.order('deadline DESC')).each do |a| %>
+    <%= render partial: 'assignments/row',
+                locals: { assignment: a } %>
+  <% end %>
+</div>
+
+<%= form_with model: lecture,
+              html: { id: 'lecture-assignments-form',
+                      class: 'mt-4 px-2' } do |f| %>
+  <div class="row">
+    <div class="mb-3 col-md-6">
+      <%= f.label :submission_max_team_size,
+                  t('admin.lecture.submission_max_team_size'),
+                  class: "form-label" %>
+      <%= helpdesk t('admin.lecture.info.submission_max_team_size'),
+                    false %>
+      <%= f.number_field :submission_max_team_size,
+                          min: 1,
+                          max: 10000,
+                          class: 'form-control mx-2',
+                          data:
+                          { value: lecture.submission_max_team_size } %>
+    </div>
+    <div class="mb-3 col-md-6">
+      <%= f.label :submission_grace_period,
+                  t('admin.lecture.submission_grace_period'),
+                  class: "form-label" %>
+      <%= helpdesk t('admin.lecture.info.submission_grace_period'),
+                    false %>
+      <%= f.number_field :submission_grace_period,
+                          min: 0,
+                          max: 262800,
+                          class: 'form-control mx-2',
+                          data: { value: lecture.submission_grace_period } %>
+    </div>
+  </div>
+  <div id="lecture-assignments-warning" class="mt-3">
+    <%= t('warnings.unsaved_changes') %>
+    <%= f.submit t('buttons.save_and_exit'),
+                  class: "btn btn-sm btn-primary" %>
+    <button type="button" id="cancel-lecture-assignments"
+            class="btn btn-sm btn-secondary">
+      <%= t('buttons.cancel') %>
+    </button>
+  </div>
+<% end %>