Modulares Layout für die Implementierungsseite der Nutzer

app/assets/javascripts/editor.js

@@ -20,6 +20,59 @@ $(document).on('turbolinks:load', function(event) {
     CodeOceanEditor.initializeEverything();
   }
 
+  let isMouseDownHorizontal = 0
+  $('#resizerHorizontal').on('mousedown', mouseDownHorizontal)
+
+  function mouseDownHorizontal(event) {
+    isMouseDownHorizontal = 1
+    document.body.addEventListener('mousemove', mouseMoveHorizontal)
+    document.body.addEventListener('mouseup', mouseUpHorizontal)
+  }
+
+  function mouseMoveHorizontal(event) {
+    if (isMouseDownHorizontal === 1 && event.clientX <= 0.7 * window.innerWidth && event.clientX >= 0.2 * window.innerWidth) {
+      event.preventDefault();
+      $('#panel-left').css('width', (event.clientX - $('#panel-left').offset().left) + "px")
+      CodeOceanEditor.resizeSidebars()
+      CodeOceanEditor.resizeHorizontalResizer()
+    } else {
+      mouseUpHorizontal()
+    }
+  }
+
+  function mouseUpHorizontal(event) {
+    isMouseDownHorizontal = 0
+    document.body.removeEventListener('mouseup', mouseUpHorizontal)
+    resizerHorizontal.removeEventListener('mousemove', mouseMoveHorizontal)
+  }
+
+  let isMouseDownVertical = 0
+  $('#resizerVertical').on('mousedown', mouseDownVertical)
+
+  function mouseDownVertical(event) {
+    isMouseDownVertical = 1
+    document.body.addEventListener('mousemove', mouseMoveVertical)
+    document.body.addEventListener('mouseup', mouseUpVertical)
+  }
+
+  function mouseMoveVertical(event) {
+    if (isMouseDownVertical === 1) {
+      event.preventDefault();
+      $('.panel-top').css('height', (event.clientY - $('.panel-top').offset().top - $('#statusbar').height()) + "px")
+      $('.panel-bottom').height(CodeOceanEditor.calculateEditorHeight('.panel-bottom', false));
+      CodeOceanEditor.resizeSidebars()
+      CodeOceanEditor.resizeHorizontalResizer()
+    } else {
+      mouseUpVertical()
+    }
+  }
+
+  function mouseUpVertical(event) {
+    isMouseDownVertical = 0
+    document.body.removeEventListener('mouseup', mouseUpVertical)
+    resizerVertical.removeEventListener('mousemove', mouseMoveVertical)
+  }
+
   function handleThemeChangeEvent(event) {
     if (CodeOceanEditor) {
       CodeOceanEditor.THEME = event.detail.currentTheme === 'dark' ? 'ace/theme/tomorrow_night' : 'ace/theme/tomorrow';

app/assets/javascripts/editor/editor.js.erb

@@ -237,10 +237,20 @@ var CodeOceanEditor = {
     },
 
     resizeSidebars: function () {
-        $('#content-left-sidebar').height(this.calculateEditorHeight('#content-left-sidebar', false));
+        let editorHeightLeftSidebar = this.calculateEditorHeight('#content-left-sidebar', false);
+        $('#content-left-sidebar').height(function() {
+            if($('#resizerHorizontal').css('display') === 'none')
+                return 'auto';
+            else
+                return editorHeightLeftSidebar;
+        });
         $('#content-right-sidebar').height(this.calculateEditorHeight('#content-right-sidebar', false));
     },
 
+    resizeHorizontalResizer: function () {
+        $('#resizerHorizontal').height(this.calculateEditorHeight('#resizerHorizontal', false));
+    },
+
     calculateEditorHeight: function (element, considerStatusbar) {
         const jqueryElement = $(element);
         if (jqueryElement.length === 0) {
@@ -457,11 +467,18 @@ var CodeOceanEditor = {
     handleSideBarToggle: function () {
         const sidebar = $('#sidebar');
         sidebar.toggleClass('sidebar-col').toggleClass('sidebar-col-collapsed');
-        if (sidebar.hasClass('w-25') || sidebar.hasClass('restore-to-w-25')) {
-            sidebar.toggleClass('w-25').toggleClass('restore-to-w-25');
-        }
         $('#sidebar-collapsed').toggleClass('d-none');
         $('#sidebar-uncollapsed').toggleClass('d-none');
+        if ($('#sidebar-uncollapsed').hasClass('d-none')) {
+            if ($(window).width() >= 992) {
+                $('#panel-left').css('width', $('#sidebar-collapsed').outerWidth(true));
+            }
+            $('#panel-left').css('padding-bottom', '4px');
+        } else {
+            $('#panel-left').css('width', '');
+            $('#panel-left').css('padding-bottom', '');
+        }
+        $('#resizerHorizontal').toggleClass('d-lg-block');
     },
 
     initializeRegexes: function () {
@@ -541,6 +558,15 @@ var CodeOceanEditor = {
     },
 
     populateCard: function (card, result, index) {
+        if (result.stderr && !result.score || result.score < 1) {
+            card.find('.card-body').toggleClass('d-none');
+            card.find('i').toggleClass('fa-chevron-down fa-chevron-right')
+        }
+        card.find('.card-header').on('click', ()=>{
+            card.find('.card-body').toggleClass('d-none');
+            card.find('i').toggleClass('fa-chevron-down fa-chevron-right')
+        });
+        card.addClass(this.getCardClass(result));
         card.addClass(`card border-${this.getCardClass(result)}`);
         card.find('.card-header').addClass(`bg-${this.getCardClass(result)} text-white`);
         card.find('.card-title .filename').text(result.filename);
@@ -927,12 +953,30 @@ var CodeOceanEditor = {
         $('#output_sidebar_collapsed').addClass('d-none');
         $('#output_sidebar_uncollapsed').removeClass('d-none');
         $('#output_sidebar').removeClass('output-col-collapsed').addClass('output-col');
+        if (window.matchMedia('(min-width: 992px)').matches) {
+            $('.panel-top').css('height', '50vh');
+            $('.panel-bottom').css('height', this.calculateEditorHeight('.panel-bottom', false));
+            this.resizeSidebars();
+            $('#resizerVertical').removeClass('d-none');
+        } else {
+            $('.panel-bottom').css('height', '50vh');
+            $('html, body').animate({scrollTop: $(document).height() - $(window).height()}, 250);  
+        }
+        this.resizeAceEditors();
     },
 
     hideOutputBar: function () {
         $('#output_sidebar_collapsed').removeClass('d-none');
         $('#output_sidebar_uncollapsed').addClass('d-none');
         $('#output_sidebar').removeClass('output-col').addClass('output-col-collapsed');
+        $('#resizerVertical').addClass('d-none');
+        $('.panel-bottom').css('height', $('#output_sidebar_collapsed').height() + 'px');
+        if (window.matchMedia('(min-width: 992px)').matches) {
+            $('.panel-top').css('height', ($('#editor-column').height() - $('.panel-bottom').height()) + "px");
+        }  else {
+           $('html, body').animate({scrollTop: $(document).height() - $(window).height()}, 1);
+        }
+        this.resizeAceEditors();
     },
 
     initializeSideBarTooltips: function () {

app/assets/javascripts/editor/evaluation.js

@@ -24,6 +24,8 @@ CodeOceanEditorEvaluation = {
             $('#score_div').removeClass('d-none');
             await this.socketScoreCode(submission.id);
         });
+        this.showOutputBar();
+        $('html, body').animate({scrollTop: $(document).height() - $(window).height()}, 500);  
     },
 
     handleScoringResponse: function (results) {

app/assets/javascripts/editor/submissions.js

@@ -189,6 +189,8 @@ CodeOceanEditorSubmissions = {
 
       await this.runSubmission(submission);
     });
+    this.showOutputBar();
+    $('html, body').animate({scrollTop: $(document).height() - $(window).height()}, 500);  
   },
 
   runSubmission: async function (submission) {

app/assets/stylesheets/editor.css.scss

@@ -1,6 +1,73 @@
 .editor {
   height: 100%;
+  max-height: 100%;
   width: 100%;
+  display: flex;
+}
+
+
+
+.btn, #description, #content-left-sidebar, #content-right-sidebar {
+  border-radius: 5px !important;
+}
+
+#editor-buttons .btn {
+  margin-left: 2px;
+}
+
+#editor-buttons span {
+  border-radius: 5px !important;
+}
+
+#editor-column {
+  max-height: 85vh;
+}
+
+#panel-left {
+  position: relative;
+}
+
+// Bootstrap breakpoint "large". See https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints
+@media (min-width: 992px) { 
+
+  #panel-left {
+    position: relative;
+    max-height: 85vh;
+    overflow-y: auto;
+  }
+}
+
+#panel-right {
+  position: relative;
+}
+
+#resizerHorizontal {
+  position: relative;
+  background: rgb(215, 215, 215);
+  width: 4px;
+  display: inline-block;
+  cursor: col-resize;
+  padding: 0;
+}
+
+#resizerVertical {
+  position: relative;
+  background: rgb(215, 215, 215);
+  height: 4px;
+  cursor: row-resize;
+  margin-bottom: 4px;
+}
+
+.panel-bottom {
+  overflow: auto;
+  position: relative;
+}
+
+.panel-top {
+  overflow: auto;
+  position: relative;
+  min-height: 30vh;
+  max-height: 60vh;
 }
 
 .own-editor {
@@ -24,6 +91,7 @@ html[data-bs-theme="light"] {
 }
 
 #content-left-sidebar, #content-right-sidebar {
+  max-height: 800px;
   min-height: 250px;
 }
 
@@ -116,20 +184,17 @@ html[data-bs-theme="light"] {
   -webkit-transition: width .2s;
   transition: width .2s;
   width:67px;
-  float:left;
   min-height: 1px;
-  padding-left: 15px;
-  padding-right: 15px;
+  padding-left: 3px;
+  padding-right: 3px;
 }
 
 .sidebar-col {
   -webkit-transition: width .2s;
   transition: width .2s;
-  width:20%;
-  float:left;
   min-height: 1px;
-  padding-left: 15px;
-  padding-right: 15px;
+  padding-left: 3px;
+  padding-right: 3px;
 }
 
 .editor-col {
@@ -142,13 +207,14 @@ html[data-bs-theme="light"] {
 .output-col {
   -webkit-transition: width .2s;
   transition: width .2s;
-  width:40%;
+  width:100%;
   float:right;
   min-height: 1px;
-  padding-left: 15px;
-  padding-right: 15px;
+  padding-left: 3px;
+  padding-right: 3px;
   box-sizing: border-box;
   margin-left: auto;
+  min-height: 40vh;
 }
 
 .output-col-collapsed {
@@ -157,8 +223,8 @@ html[data-bs-theme="light"] {
   width:67px;
   float:right;
   min-height: 1px;
-  padding-left: 15px;
-  padding-right: 15px;
+  padding-left: 3px;
+  padding-right: 3px;
   box-sizing: border-box;
   margin-left: auto;
 }

app/assets/stylesheets/exercises.css.scss

@@ -16,7 +16,7 @@ input[type='file'] {
   border-radius: 3px;
   box-shadow: 0 2px 4px 0 rgba(var(--bs-black-rgb), 0.2);
   padding: 1px 10px 1px 10px;
-  margin-bottom: 10px;
+  margin: 3px 3px 10px 3px;
 
   a#toggle {
     margin-bottom: 5px;