Implementation of a modular layout for the editor/implement page

Author: Benedikt Artelt

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

@@ -241,6 +241,10 @@ var CodeOceanEditor = {
         $('#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 +461,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 +552,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 +947,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,65 @@
 .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;
+  max-height: 85vh;
+  overflow-y: scroll;
+}
+
+#panel-right {
+  position: relative;
+}
+
+#resizerHorizontal {
+  position: relative;
+  background: rgb(215, 215, 215);
+  width: 2px;
+  display: inline-block;
+  cursor: col-resize;
+  padding: 0;
+}
+
+#resizerVertical {
+  position: relative;
+  background: rgb(215, 215, 215);
+  height: 2px;
+  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 {
@@ -116,20 +175,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 +198,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 +214,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;

app/views/exercises/_editor.html.slim

@@ -5,39 +5,41 @@
 - hide_rfc_button = @hide_rfc_button || false
 
 #editor.row data-exercise-id[email protected] data-message-depleted=t('exercises.editor.depleted') data-message-timeout=t('exercises.editor.timeout', permitted_execution_time: @exercise.execution_environment.permitted_execution_time) data-message-out-of-memory=t('exercises.editor.out_of_memory', memory_limit: @exercise.execution_environment.memory_limit) data-submissions-url=submissions_path data-user-external-id=external_user_external_id data-working-times-url=working_times_exercise_path(@exercise) data-intervention-save-url=intervention_exercise_path(@exercise) data-rfc-interventions=show_rfc_interventions data-break-interventions=show_break_interventions data-tips-interventions=show_tips_interventions
-  - unless @embed_options[:hide_sidebar]
-    - additional_classes = 'sidebar-col'
-    - if @tips.blank?
-      - if @exercise.hide_file_tree
-        - additional_classes = 'sidebar-col-collapsed'
-    - else
-      - additional_classes = 'sidebar-col w-25'
-    #sidebar class=additional_classes = render('editor_file_tree', exercise: @exercise, files: @files)
+  div id="panel-left" class="col-12 col-lg-3"
+    - unless @embed_options[:hide_sidebar]
+      - additional_classes = 'sidebar-col row'
+      - if @tips.blank?
+        - if @exercise.hide_file_tree
+          - additional_classes = 'sidebar-col-collapsed row'
+      - else
+        - additional_classes = 'sidebar-col row'
+      #sidebar class=additional_classes = render('editor_file_tree', exercise: @exercise, files: @files)
 
-  .editor-col.col.p-0#frames
-    #editor-buttons.btn-group.enforce-bottom-margin
-      = render('editor_button', disabled: true, icon: 'fa-solid fa-ban', id: 'dummy', label: t('exercises.editor.dummy'))
-      = render('editor_button', icon: 'fa-solid fa-desktop', id: 'render', label: t('exercises.editor.render')) unless @embed_options[:hide_run_button]
-      span.flex-grow-1.d-inline-flex#run-stop-button-group data-bs-placement='top' data-bs-toggle='tooltip' data-bs-container='body' title=t('shared.tooltips.shortcut', shortcut: 'ALT + r')
-        = render('editor_button', data: {'data-message-failure': t('exercises.editor.run_failure'), 'data-message-network': t('exercises.editor.network'), 'data-message-success': t('exercises.editor.run_success')}, icon: 'fa-solid fa-play', id: 'run', label: t('exercises.editor.run'), classes: 'w-100 h-100 btn-primary') unless @embed_options[:disable_run]
-        = render('editor_button', icon: 'fa-solid fa-stop', id: 'stop', label: t('exercises.editor.stop'), classes: 'w-100 h-100 btn-primary') unless @embed_options[:disable_run]
-      = render('editor_button', data: {'data-bs-placement': 'top', 'data-bs-toggle': 'tooltip', 'data-bs-container': 'body'}, icon: 'fa-solid fa-rocket', id: 'test', label: t('exercises.editor.test'), title: t('shared.tooltips.shortcut', shortcut: 'ALT + t')) unless @embed_options[:disable_run]
-      = render('editor_button', data: {'data-bs-placement': 'top', 'data-bs-toggle': 'tooltip', 'data-bs-container': 'body'}, icon: 'fa-solid fa-trophy', id: 'assess', label: t('exercises.editor.score'), title: t('shared.tooltips.shortcut', shortcut: 'ALT + s')) unless @embed_options[:disable_score]
-      - unless hide_rfc_button
-        = render('editor_button', data: {'data-bs-placement': 'top', 'data-bs-toggle': 'tooltip', 'data-bs-container': 'body'}, icon: 'fa-solid fa-comment', id: 'requestComments', label: t('exercises.editor.requestComments'), title: t('exercises.editor.requestCommentsTooltip'))
+  #resizerHorizontal.d-none.d-lg-block
+  div.col.p-0#frames
+    #panel-right.col
+      #editor-buttons.btn-group.enforce-bottom-margin
+        = render('editor_button', disabled: true, icon: 'fa-solid fa-ban', id: 'dummy', label: t('exercises.editor.dummy'))
+        = render('editor_button', icon: 'fa-solid fa-desktop', id: 'render', label: t('exercises.editor.render')) unless @embed_options[:hide_run_button]
+        span.flex-grow-1.overflow-hidden.d-inline-flex#run-stop-button-group data-bs-placement='top' data-bs-toggle='tooltip' data-bs-container='body' title=t('shared.tooltips.shortcut', shortcut: 'ALT + r')
+          = render('editor_button', data: {'data-message-failure': t('exercises.editor.run_failure'), 'data-message-network': t('exercises.editor.network'), 'data-message-success': t('exercises.editor.run_success')}, icon: 'fa-solid fa-play', id: 'run', label: t('exercises.editor.run'), classes: 'w-100 h-100 btn-primary') unless @embed_options[:disable_run]
+          = render('editor_button', icon: 'fa-solid fa-stop', id: 'stop', label: t('exercises.editor.stop'), classes: 'w-100 h-100 btn-primary') unless @embed_options[:disable_run]
+        = render('editor_button', data: {'data-bs-placement': 'top', 'data-bs-toggle': 'tooltip', 'data-bs-container': 'body'}, icon: 'fa-solid fa-rocket', id: 'test', label: t('exercises.editor.test'), title: t('shared.tooltips.shortcut', shortcut: 'ALT + t')) unless @embed_options[:disable_run]
+        = render('editor_button', data: {'data-bs-placement': 'top', 'data-bs-toggle': 'tooltip', 'data-bs-container': 'body'}, icon: 'fa-solid fa-trophy', id: 'assess', label: t('exercises.editor.score'), title: t('shared.tooltips.shortcut', shortcut: 'ALT + s')) unless @embed_options[:disable_score]
+        - unless hide_rfc_button
+          = render('editor_button', data: {'data-bs-placement': 'top', 'data-bs-toggle': 'tooltip', 'data-bs-container': 'body'}, icon: 'fa-solid fa-comment', id: 'requestComments', label: t('exercises.editor.requestComments'), title: t('exercises.editor.requestCommentsTooltip'))
+      .panel-top
+        - @files.each do |file|
+          - file.read_only = true if @embed_options[:read_only]
+          = render('editor_frame', exercise:, file:)
 
-    - @files.each do |file|
-      - file.read_only = true if @embed_options[:read_only]
-      = render('editor_frame', exercise:, file:)
-
-    #statusbar.d-flex.justify-content-between
-      div
-        - if !@embed_options[:disable_download] && @exercise.hide_file_tree?
-          button#download.p-0.border-0.btn-link.visible.bg-body.text-primary
-            i.fa-solid.fa-arrow-down
-            = t('exercises.editor.download')
-
-      div
+      #statusbar.d-flex.justify-content-between
+        div
+          - if !@embed_options[:disable_download] && @exercise.hide_file_tree?
+            button#download.p-0.border-0.btn-link.visible.bg-body.text-primary
+              i.fa-solid.fa-arrow-down
+              = t('exercises.editor.download')
+        div
         ruby:
           if current_contributor.programming_group?
             current_contributor.users.each do |user|
@@ -53,15 +55,16 @@
         = t('exercises.editor.lastsaved')
         span#autosave
 
-        = ' | '
-
-        button#start-over-active-file.p-0.border-0.btn-link.bg-body.text-primary data-message-confirm=t('exercises.editor.confirm_start_over_active_file') data-url=reload_exercise_path(@exercise)
-          i.fa-solid.fa-circle-notch.fa-spin.d-none
-          i.fa-solid.fa-clock-rotate-left
-          = t('exercises.editor.start_over_active_file')
+          = ' | '
 
-  - unless @embed_options[:disable_run] && @embed_options[:disable_score]
-    .output-col-collapsed#output_sidebar = render('exercises/editor_output')
+          button#start-over-active-file.p-0.border-0.btn-link.bg-body.text-primary data-message-confirm=t('exercises.editor.confirm_start_over_active_file') data-url=reload_exercise_path(@exercise)
+            i.fa-solid.fa-circle-notch.fa-spin.d-none
+            i.fa-solid.fa-clock-rotate-left
+            = t('exercises.editor.start_over_active_file')
+      #resizerVertical.d-none
+      .panel-bottom
+        - unless @embed_options[:disable_run] && @embed_options[:disable_score]
+          .output-col-collapsed#output_sidebar = render('exercises/editor_output')
 
 - unless @embed_options[:disable_rfc]
   = render 'shared/modal',