Move tips to left sidebar and set width = 25%

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

@@ -346,12 +346,20 @@ var CodeOceanEditor = {
 
     initializeSideBarCollapse: function () {
         $('#sidebar-collapse-collapsed').on('click', this.handleSideBarToggle.bind(this));
-        $('#sidebar-collapse').on('click', this.handleSideBarToggle.bind(this))
+        $('#sidebar-collapse').on('click', this.handleSideBarToggle.bind(this));
+        const tipButton = $('#tips-collapsed');
+        if (tipButton) {
+            tipButton.on('click', this.handleSideBarToggle.bind(this));
+        }
         $('#sidebar').on('transitionend', this.resizeAceEditors.bind(this));
     },
 
     handleSideBarToggle: function () {
-        $('#sidebar').toggleClass('sidebar-col').toggleClass('sidebar-col-collapsed');
+        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');
     },

app/views/exercises/_editor.html.slim

@@ -6,7 +6,14 @@
 - hide_rfc_button = @hide_rfc_button || false
 #editor.row data-exercise-id=@exercise.id data-message-depleted=t('exercises.editor.depleted') data-message-timeout=t('exercises.editor.timeout',  permitted_execution_time: @exercise.execution_environment.permitted_execution_time) data-submissions-url=submissions_path data-user-id=@current_user.id 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-course_token=@course_token data-search-save-url=search_exercise_path(@exercise)
   - unless @embed_options[:hide_sidebar]
-    div id="sidebar" class=(@exercise.hide_file_tree ? 'sidebar-col-collapsed' : 'sidebar-col') = render('editor_file_tree', exercise: @exercise, files: @files)
+
+    - additional_classes = 'sidebar-col'
+    - if @tips.blank?
+      - if @exercise.hide_file_tree
+        - additional_classes = 'sidebar-col-collapsed'
+    - else
+      - additional_classes = 'sidebar-col w-25'
+    div id="sidebar" class=additional_classes = render('editor_file_tree', exercise: @exercise, files: @files)
   div.editor-col.col.p-0 id='frames'
     #editor-buttons.btn-group.enforce-bottom-margin
       = render('editor_button', disabled: true, icon: 'fa fa-ban', id: 'dummy', label: t('exercises.editor.dummy'))

app/views/exercises/_editor_file_tree.html.slim

@@ -1,9 +1,12 @@
-div id='sidebar-collapsed' class=(@exercise.hide_file_tree ? '' : 'd-none')
+div id='sidebar-collapsed' class=(@exercise.hide_file_tree && @tips.blank? ? '' : 'd-none')
   = render('editor_button', classes: 'btn-block btn-primary btn', data: {:'data-toggle' => 'tooltip', :'data-placement' => 'right'}, icon: 'fa fa-plus-square', id: 'sidebar-collapse-collapsed', label:'', title:t('exercises.editor.expand_action_sidebar'))
 
   - if @exercise.allow_file_creation and not @exercise.hide_file_tree?
     = render('editor_button', classes: 'btn-block btn-primary btn enforce-top-margin', data: {:'data-cause' => 'file', :'data-toggle' => 'tooltip', :'data-placement' => 'right'}, icon: 'fa fa-plus', id: 'create-file-collapsed', label:'', title: t('exercises.editor.create_file'))
 
+  - unless @embed_options[:disable_hints] or @tips.blank?
+    = render('editor_button', classes: 'btn-block btn-success btn mb-4', data: {:'data-toggle' => 'tooltip', :'data-placement' => 'right'}, icon: 'fa fa-lightbulb', id: 'tips-collapsed', label:'', title: t('exercises.form.tips'))
+
   - unless @embed_options[:disable_download]
     = render('editor_button', classes: 'btn-block btn-primary btn enforce-top-margin', data: {:'data-toggle' => 'tooltip', :'data-placement' => 'right'}, icon: 'fa fa-download', id: 'download-collapsed', label:'', title: t('exercises.editor.download'))
   = render('editor_button', classes: "btn-block btn-outline-warning btn enforce-top-margin #{@exercise.hide_file_tree || files.count < 2 && !@exercise.allow_file_creation ? 'd-none' : ''}", data: {:'data-message-confirm' => t('exercises.editor.confirm_start_over_active_file'), :'data-url' => reload_exercise_path(@exercise), :'data-toggle' => 'tooltip', :'data-placement' => 'right'}, icon: 'fa fa-history', id: 'start-over-active-file-collapsed', label: '', title: t('exercises.editor.start_over_active_file'))
@@ -11,32 +14,38 @@ div id='sidebar-collapsed' class=(@exercise.hide_file_tree ? '' : 'd-none')
     = render('editor_button', classes: 'btn-block btn-primary btn enforce-top-margin', data: {:'data-toggle' => 'tooltip', :'data-placement' => 'right'}, icon: 'fa fa-search', id: 'sidebar-search-collapsed', label: '', title: t('search.search_in_forum'))
   = render('editor_button', classes: 'btn-block btn-outline-danger btn enforce-top-margin', data: {:'data-message-confirm' => t('exercises.editor.confirm_start_over'), :'data-url' => reload_exercise_path(@exercise), :'data-toggle' => 'tooltip', :'data-placement' => 'right'}, icon: 'fa fa-history', id: 'start-over-collapsed', label:'', title: t('exercises.editor.start_over'))
 
-div id='sidebar-uncollapsed' class=(@exercise.hide_file_tree ? 'd-none' : '')
-  = render('editor_button', classes: 'btn-block btn-primary btn', icon: 'fa fa-minus-square', id: 'sidebar-collapse', label: t('exercises.editor.collapse_action_sidebar'))
+div.h-100.col-sm-12.enforce-bottom-margin id='sidebar-uncollapsed' class=(@exercise.hide_file_tree && @tips.blank? ? 'd-none' : '')
+  .position-absolute.d-flex.mb-1.w-100 style="overflow: auto; left: 0; top: 0; height: 100%;"
+    .w-100
+      = render('editor_button', classes: 'btn-block btn-primary btn', icon: 'fa fa-minus-square', id: 'sidebar-collapse', label: t('exercises.editor.collapse_action_sidebar'))
 
-  div class=(@exercise.hide_file_tree ? 'd-none' : '')
-    hr
+      div class=(@exercise.hide_file_tree ? 'd-none' : '')
+        hr
 
-    #files data-entries=FileTree.new(files).to_js_tree
+        #files data-entries=FileTree.new(files).to_js_tree
 
-    hr
+        hr
 
-  - if @exercise.allow_file_creation and not @exercise.hide_file_tree?
-    = render('editor_button', classes: 'btn-block btn-primary btn', data: {:'data-cause' => 'file'}, icon: 'fa fa-plus', id: 'create-file', label: t('exercises.editor.create_file'))
-    = render('editor_button', classes: 'btn-block btn-warning btn', data: {:'data-cause' => 'file', :'data-message-confirm' => t('shared.confirm_destroy')}, icon: 'fa fa-times', id: 'destroy-file', label: t('exercises.editor.destroy_file'))
+      - if @exercise.allow_file_creation and not @exercise.hide_file_tree?
+        = render('editor_button', classes: 'btn-block btn-primary btn', data: {:'data-cause' => 'file'}, icon: 'fa fa-plus', id: 'create-file', label: t('exercises.editor.create_file'))
+        = render('editor_button', classes: 'btn-block btn-warning btn', data: {:'data-cause' => 'file', :'data-message-confirm' => t('shared.confirm_destroy')}, icon: 'fa fa-times', id: 'destroy-file', label: t('exercises.editor.destroy_file'))
 
-  - unless @embed_options[:disable_download]
-    = render('editor_button', classes: 'btn-block btn-primary btn enforce-top-margin', icon: 'fa fa-download', id: 'download', label: t('exercises.editor.download'))
-  = render('editor_button', classes: "btn-block btn-outline-warning btn #{@exercise.hide_file_tree || files.count < 2 && !@exercise.allow_file_creation ? 'd-none' : ''}", data: {:'data-message-confirm' => t('exercises.editor.confirm_start_over_active_file'), :'data-url' => reload_exercise_path(@exercise)}, icon: 'fa fa-history', id: 'start-over-active-file', label: t('exercises.editor.start_over_active_file'))
-  = render('editor_button', classes: 'btn-block btn-outline-danger btn', data: {:'data-message-confirm' => t('exercises.editor.confirm_start_over'), :'data-url' => reload_exercise_path(@exercise)}, icon: 'fa fa-history', id: 'start-over', label: t('exercises.editor.start_over'))
+      - unless @embed_options[:disable_hints] or @tips.blank?
+        = render(partial: 'tips_content')
+        .mb-4
 
-  //- if !@course_token.blank?
-      .input-group.enforce-top-margin
-        .enforce-right-margin
-          = text_field_tag 'search-input-text', nil, placeholder: t('search.search_in_forum'), class: 'form-control'
-        .input-group-btn
-          = button_tag(class: 'btn btn-primary', id: 'btn-search-col') do
-            i.fa.fa-search
+      - unless @embed_options[:disable_download]
+        = render('editor_button', classes: 'btn-block btn-primary btn enforce-top-margin', icon: 'fa fa-download', id: 'download', label: t('exercises.editor.download'))
+      = render('editor_button', classes: "btn-block btn-outline-warning btn #{@exercise.hide_file_tree || files.count < 2 && !@exercise.allow_file_creation ? 'd-none' : ''}", data: {:'data-message-confirm' => t('exercises.editor.confirm_start_over_active_file'), :'data-url' => reload_exercise_path(@exercise)}, icon: 'fa fa-history', id: 'start-over-active-file', label: t('exercises.editor.start_over_active_file'))
+      = render('editor_button', classes: 'btn-block btn-outline-danger btn', data: {:'data-message-confirm' => t('exercises.editor.confirm_start_over'), :'data-url' => reload_exercise_path(@exercise)}, icon: 'fa fa-history', id: 'start-over', label: t('exercises.editor.start_over'))
+
+      //- if !@course_token.blank?
+          .input-group.enforce-top-margin
+            .enforce-right-margin
+              = text_field_tag 'search-input-text', nil, placeholder: t('search.search_in_forum'), class: 'form-control'
+            .input-group-btn
+              = button_tag(class: 'btn btn-primary', id: 'btn-search-col') do
+                i.fa.fa-search
 
 - if @exercise.allow_file_creation?
   = render('shared/modal', id: 'modal-file', template: 'code_ocean/files/_form', title: t('exercises.editor.create_file'))

app/views/exercises/_editor_output.html.slim

@@ -55,8 +55,6 @@ div.h-100 id='output_sidebar_uncollapsed' class='d-none col-sm-12 enforce-bottom
             ul.body
         #output.mt-2
           pre = t('exercises.implement.no_output_yet')
-        - unless @embed_options[:disable_hints] or @tips.blank?
-          = render(partial: 'tips_content')
         - if CodeOcean::Config.new(:code_ocean).read[:flowr][:enabled] && !@embed_options[:disable_hints] && !@embed_options[:hide_test_results]
           #flowrHint.card.text-white.bg-info data-url=CodeOcean::Config.new(:code_ocean).read[:flowr][:url] role='tab'
             .card-header = t('exercises.implement.flowr.heading')

app/views/exercises/_tips_content.html.slim

@@ -5,7 +5,7 @@
   = javascript_pack_tag('highlight', 'data-turbolinks-track': true)
   = stylesheet_pack_tag('highlight', media: 'all', 'data-turbolinks-track': true)
 
-#tips.card.text-white.bg-info.mt-2 role="tab" style="display: block;"
+#tips.card.text-white.bg-success.mt-2 role="tab" style="display: block;"
   .card-header.py-2
     i.fa.fa-lightbulb
     = t('exercises.implement.tips.heading')