Skip to content

Commit 3fa9163

Browse files
author
Benedikt Artelt
committed
Merge branch 'codeocean-tuil-dynlay' into 'codeocean-tuil'
Codeocean tuil dynlay See merge request bear-mt/codeocean-tuil!4
2 parents de6625a + 632d8ee commit 3fa9163

File tree

12 files changed

+266
-83
lines changed

12 files changed

+266
-83
lines changed

‎app/assets/javascripts/editor.js‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,59 @@ $(document).on('turbolinks:load', function(event) {
2020
CodeOceanEditor.initializeEverything();
2121
}
2222

23+
let isMouseDownHorizontal = 0
24+
$('#resizerHorizontal').on('mousedown', mouseDownHorizontal)
25+
26+
function mouseDownHorizontal(event) {
27+
isMouseDownHorizontal = 1
28+
document.body.addEventListener('mousemove', mouseMoveHorizontal)
29+
document.body.addEventListener('mouseup', mouseUpHorizontal)
30+
}
31+
32+
function mouseMoveHorizontal(event) {
33+
if (isMouseDownHorizontal === 1 && event.clientX <= 0.7 * window.innerWidth && event.clientX >= 0.2 * window.innerWidth) {
34+
event.preventDefault();
35+
$('#panel-left').css('width', (event.clientX - $('#panel-left').offset().left) + "px")
36+
CodeOceanEditor.resizeSidebars()
37+
CodeOceanEditor.resizeHorizontalResizer()
38+
} else {
39+
mouseUpHorizontal()
40+
}
41+
}
42+
43+
function mouseUpHorizontal(event) {
44+
isMouseDownHorizontal = 0
45+
document.body.removeEventListener('mouseup', mouseUpHorizontal)
46+
resizerHorizontal.removeEventListener('mousemove', mouseMoveHorizontal)
47+
}
48+
49+
let isMouseDownVertical = 0
50+
$('#resizerVertical').on('mousedown', mouseDownVertical)
51+
52+
function mouseDownVertical(event) {
53+
isMouseDownVertical = 1
54+
document.body.addEventListener('mousemove', mouseMoveVertical)
55+
document.body.addEventListener('mouseup', mouseUpVertical)
56+
}
57+
58+
function mouseMoveVertical(event) {
59+
if (isMouseDownVertical === 1) {
60+
event.preventDefault();
61+
$('.panel-top').css('height', (event.clientY - $('.panel-top').offset().top - $('#statusbar').height()) + "px")
62+
$('.panel-bottom').height(CodeOceanEditor.calculateEditorHeight('.panel-bottom', false));
63+
CodeOceanEditor.resizeSidebars()
64+
CodeOceanEditor.resizeHorizontalResizer()
65+
} else {
66+
mouseUpVertical()
67+
}
68+
}
69+
70+
function mouseUpVertical(event) {
71+
isMouseDownVertical = 0
72+
document.body.removeEventListener('mouseup', mouseUpVertical)
73+
resizerVertical.removeEventListener('mousemove', mouseMoveVertical)
74+
}
75+
2376
function handleThemeChangeEvent(event) {
2477
if (CodeOceanEditor) {
2578
CodeOceanEditor.THEME = event.detail.currentTheme === 'dark' ? 'ace/theme/tomorrow_night' : 'ace/theme/tomorrow';

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

Lines changed: 48 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -237,10 +237,20 @@ var CodeOceanEditor = {
237237
},
238238

239239
resizeSidebars: function () {
240-
$('#content-left-sidebar').height(this.calculateEditorHeight('#content-left-sidebar', false));
240+
let editorHeightLeftSidebar = this.calculateEditorHeight('#content-left-sidebar', false);
241+
$('#content-left-sidebar').height(function() {
242+
if($('#resizerHorizontal').css('display') === 'none')
243+
return 'auto';
244+
else
245+
return editorHeightLeftSidebar;
246+
});
241247
$('#content-right-sidebar').height(this.calculateEditorHeight('#content-right-sidebar', false));
242248
},
243249

250+
resizeHorizontalResizer: function () {
251+
$('#resizerHorizontal').height(this.calculateEditorHeight('#resizerHorizontal', false));
252+
},
253+
244254
calculateEditorHeight: function (element, considerStatusbar) {
245255
const jqueryElement = $(element);
246256
if (jqueryElement.length === 0) {
@@ -457,11 +467,18 @@ var CodeOceanEditor = {
457467
handleSideBarToggle: function () {
458468
const sidebar = $('#sidebar');
459469
sidebar.toggleClass('sidebar-col').toggleClass('sidebar-col-collapsed');
460-
if (sidebar.hasClass('w-25') || sidebar.hasClass('restore-to-w-25')) {
461-
sidebar.toggleClass('w-25').toggleClass('restore-to-w-25');
462-
}
463470
$('#sidebar-collapsed').toggleClass('d-none');
464471
$('#sidebar-uncollapsed').toggleClass('d-none');
472+
if ($('#sidebar-uncollapsed').hasClass('d-none')) {
473+
if ($(window).width() >= 992) {
474+
$('#panel-left').css('width', $('#sidebar-collapsed').outerWidth(true));
475+
}
476+
$('#panel-left').css('padding-bottom', '4px');
477+
} else {
478+
$('#panel-left').css('width', '');
479+
$('#panel-left').css('padding-bottom', '');
480+
}
481+
$('#resizerHorizontal').toggleClass('d-lg-block');
465482
},
466483

467484
initializeRegexes: function () {
@@ -541,6 +558,15 @@ var CodeOceanEditor = {
541558
},
542559

543560
populateCard: function (card, result, index) {
561+
if (result.stderr && !result.score || result.score < 1) {
562+
card.find('.card-body').toggleClass('d-none');
563+
card.find('i').toggleClass('fa-chevron-down fa-chevron-right')
564+
}
565+
card.find('.card-header').on('click', ()=>{
566+
card.find('.card-body').toggleClass('d-none');
567+
card.find('i').toggleClass('fa-chevron-down fa-chevron-right')
568+
});
569+
card.addClass(this.getCardClass(result));
544570
card.addClass(`card border-${this.getCardClass(result)}`);
545571
card.find('.card-header').addClass(`bg-${this.getCardClass(result)} text-white`);
546572
card.find('.card-title .filename').text(result.filename);
@@ -927,12 +953,30 @@ var CodeOceanEditor = {
927953
$('#output_sidebar_collapsed').addClass('d-none');
928954
$('#output_sidebar_uncollapsed').removeClass('d-none');
929955
$('#output_sidebar').removeClass('output-col-collapsed').addClass('output-col');
956+
if (window.matchMedia('(min-width: 992px)').matches) {
957+
$('.panel-top').css('height', '50vh');
958+
$('.panel-bottom').css('height', this.calculateEditorHeight('.panel-bottom', false));
959+
this.resizeSidebars();
960+
$('#resizerVertical').removeClass('d-none');
961+
} else {
962+
$('.panel-bottom').css('height', '50vh');
963+
$('html, body').animate({scrollTop: $(document).height() - $(window).height()}, 250);
964+
}
965+
this.resizeAceEditors();
930966
},
931967

932968
hideOutputBar: function () {
933969
$('#output_sidebar_collapsed').removeClass('d-none');
934970
$('#output_sidebar_uncollapsed').addClass('d-none');
935971
$('#output_sidebar').removeClass('output-col').addClass('output-col-collapsed');
972+
$('#resizerVertical').addClass('d-none');
973+
$('.panel-bottom').css('height', $('#output_sidebar_collapsed').height() + 'px');
974+
if (window.matchMedia('(min-width: 992px)').matches) {
975+
$('.panel-top').css('height', ($('#editor-column').height() - $('.panel-bottom').height()) + "px");
976+
} else {
977+
$('html, body').animate({scrollTop: $(document).height() - $(window).height()}, 1);
978+
}
979+
this.resizeAceEditors();
936980
},
937981

938982
initializeSideBarTooltips: function () {

‎app/assets/javascripts/editor/evaluation.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ CodeOceanEditorEvaluation = {
2424
$('#score_div').removeClass('d-none');
2525
await this.socketScoreCode(submission.id);
2626
});
27+
this.showOutputBar();
28+
$('html, body').animate({scrollTop: $(document).height() - $(window).height()}, 500);
2729
},
2830

2931
handleScoringResponse: function (results) {

‎app/assets/javascripts/editor/submissions.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -189,6 +189,8 @@ CodeOceanEditorSubmissions = {
189189

190190
await this.runSubmission(submission);
191191
});
192+
this.showOutputBar();
193+
$('html, body').animate({scrollTop: $(document).height() - $(window).height()}, 500);
192194
},
193195

194196
runSubmission: async function (submission) {

‎app/assets/stylesheets/editor.css.scss‎

Lines changed: 78 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,73 @@
11
.editor {
22
height: 100%;
3+
max-height: 100%;
34
width: 100%;
5+
display: flex;
6+
}
7+
8+
9+
10+
.btn, #description, #content-left-sidebar, #content-right-sidebar {
11+
border-radius: 5px !important;
12+
}
13+
14+
#editor-buttons .btn {
15+
margin-left: 2px;
16+
}
17+
18+
#editor-buttons span {
19+
border-radius: 5px !important;
20+
}
21+
22+
#editor-column {
23+
max-height: 85vh;
24+
}
25+
26+
#panel-left {
27+
position: relative;
28+
}
29+
30+
// Bootstrap breakpoint "large". See https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints
31+
@media (min-width: 992px) {
32+
33+
#panel-left {
34+
position: relative;
35+
max-height: 85vh;
36+
overflow-y: auto;
37+
}
38+
}
39+
40+
#panel-right {
41+
position: relative;
42+
}
43+
44+
#resizerHorizontal {
45+
position: relative;
46+
background: rgb(215, 215, 215);
47+
width: 4px;
48+
display: inline-block;
49+
cursor: col-resize;
50+
padding: 0;
51+
}
52+
53+
#resizerVertical {
54+
position: relative;
55+
background: rgb(215, 215, 215);
56+
height: 4px;
57+
cursor: row-resize;
58+
margin-bottom: 4px;
59+
}
60+
61+
.panel-bottom {
62+
overflow: auto;
63+
position: relative;
64+
}
65+
66+
.panel-top {
67+
overflow: auto;
68+
position: relative;
69+
min-height: 30vh;
70+
max-height: 60vh;
471
}
572

673
.own-editor {
@@ -24,6 +91,7 @@ html[data-bs-theme="light"] {
2491
}
2592

2693
#content-left-sidebar, #content-right-sidebar {
94+
max-height: 800px;
2795
min-height: 250px;
2896
}
2997

@@ -116,20 +184,17 @@ html[data-bs-theme="light"] {
116184
-webkit-transition: width .2s;
117185
transition: width .2s;
118186
width:67px;
119-
float:left;
120187
min-height: 1px;
121-
padding-left: 15px;
122-
padding-right: 15px;
188+
padding-left: 3px;
189+
padding-right: 3px;
123190
}
124191

125192
.sidebar-col {
126193
-webkit-transition: width .2s;
127194
transition: width .2s;
128-
width:20%;
129-
float:left;
130195
min-height: 1px;
131-
padding-left: 15px;
132-
padding-right: 15px;
196+
padding-left: 3px;
197+
padding-right: 3px;
133198
}
134199

135200
.editor-col {
@@ -142,13 +207,14 @@ html[data-bs-theme="light"] {
142207
.output-col {
143208
-webkit-transition: width .2s;
144209
transition: width .2s;
145-
width:40%;
210+
width:100%;
146211
float:right;
147212
min-height: 1px;
148-
padding-left: 15px;
149-
padding-right: 15px;
213+
padding-left: 3px;
214+
padding-right: 3px;
150215
box-sizing: border-box;
151216
margin-left: auto;
217+
min-height: 40vh;
152218
}
153219

154220
.output-col-collapsed {
@@ -157,8 +223,8 @@ html[data-bs-theme="light"] {
157223
width:67px;
158224
float:right;
159225
min-height: 1px;
160-
padding-left: 15px;
161-
padding-right: 15px;
226+
padding-left: 3px;
227+
padding-right: 3px;
162228
box-sizing: border-box;
163229
margin-left: auto;
164230
}

‎app/assets/stylesheets/exercises.css.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ input[type='file'] {
1616
border-radius: 3px;
1717
box-shadow: 0 2px 4px 0 rgba(var(--bs-black-rgb), 0.2);
1818
padding: 1px 10px 1px 10px;
19-
margin-bottom: 10px;
19+
margin: 3px 3px 10px 3px;
2020

2121
a#toggle {
2222
margin-bottom: 5px;

0 commit comments

Comments
 (0)