Skip to content

Commit 8ffb60d

Browse files
ChrisChVUsamaSadiq
ChrisChV
authored and
UsamaSadiq
committed
fix: Broken CSS styles of ora2 block editor [FC-0076] (#36220)
* It was this error 'Uncaught TypeError: el.timepicker is not a function' while rendering the editor. It's fixed adding the timepicker pluging in xblock_v2/xblock_iframe.html * Added '.openassessment_cancel_button' and '.openassessment_save_button' as action buttons. * Use openassessment manifest.json to load css from dist
1 parent 1ffbffd commit 8ffb60d

File tree

9 files changed

+387
-33
lines changed

9 files changed

+387
-33
lines changed

‎cms/envs/common.py

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2910,6 +2910,7 @@ def _should_send_learning_badge_events(settings):
29102910
'video',
29112911
'html',
29122912
'drag-and-drop-v2',
2913+
'openassessment',
29132914
'conditional',
29142915
'done',
29152916
'freetextresponse',

‎cms/static/sass/course-unit-mfe-iframe-bundle.scss

Lines changed: 40 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,18 @@
1+
@import '_builtin-block-variables';
2+
@import 'bourbon/bourbon'; // lib - bourbon
3+
@import 'neat/neat'; // lib - Neat
4+
@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
5+
@import 'build-v1'; // shared app style assets/rendering
16
@import 'cms/theme/variables-v1';
27
@import 'elements/course-unit-mfe-iframe';
38

49
html {
510
body {
611
min-width: 800px;
712
background: transparent;
13+
&.openassessment_full_height.view-container {
14+
overflow-y: hidden;
15+
}
816
}
917
}
1018

@@ -478,6 +486,38 @@ body,
478486
}
479487
}
480488

489+
// openassessment xblock mods for mfe iframe
490+
.openassessment_editor_buttons.xblock-actions {
491+
padding: ($baseline*0.75) 2% ($baseline/2) 2%;
492+
position: absolute;
493+
bottom: 0;
494+
z-index: 11;
495+
right: 0;
496+
497+
.action-item {
498+
@extend %t-action3;
499+
500+
display: inline-block;
501+
margin-right: ($baseline*0.75);
502+
503+
&:last-child {
504+
margin-right: 0;
505+
}
506+
}
507+
}
508+
509+
#openassessment-editor .oa_editor_content_wrapper {
510+
// make room for action buttons
511+
bottom: 70px;
512+
// make room for tabs above after shifting everything up due to action buttons
513+
height: calc(100% - 112px);
514+
}
515+
516+
#openassessment-editor #openassessment_editor_header {
517+
padding: 10px;
518+
padding-right: 50px; // make space for close button
519+
}
520+
481521
.xblock-v1-studio_view {
482522
height: 100%;
483523

@@ -486,10 +526,6 @@ body,
486526
flex-direction: column;
487527
justify-content: space-between;
488528
height: 100%;
489-
490-
.list-input {
491-
height: 90vh;
492-
}
493529
}
494530

495531
&.xmodule_DoneXBlock {

‎common/static/css/vendor/hint.css

Lines changed: 283 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,283 @@
1+
/*! Hint.css - v1.3.1 - 2013-11-23
2+
* http://kushagragour.in/lab/hint/
3+
* Copyright (c) 2013 Kushagra Gour; Licensed MIT */
4+
5+
/*-------------------------------------*\
6+
HINT.css - A CSS tooltip library
7+
\*-------------------------------------*/
8+
/**
9+
* HINT.css is a tooltip library made in pure CSS.
10+
*
11+
* Source: https://github.com/chinchang/hint.css
12+
* Demo: http://kushagragour.in/lab/hint/
13+
*
14+
* Release under The MIT License
15+
*
16+
*/
17+
/**
18+
* source: hint-core.scss
19+
*
20+
* Defines the basic styling for the tooltip.
21+
* Each tooltip is made of 2 parts:
22+
* 1) body (:after)
23+
* 2) arrow (:before)
24+
*
25+
* Classes added:
26+
* 1) hint
27+
*/
28+
.hint, [data-hint] {
29+
position: relative;
30+
display: inline-block;
31+
/**
32+
* tooltip arrow
33+
*/
34+
/**
35+
* tooltip body
36+
*/ }
37+
.hint:before, .hint:after, [data-hint]:before, [data-hint]:after {
38+
position: absolute;
39+
-webkit-transform: translate3d(0, 0, 0);
40+
-moz-transform: translate3d(0, 0, 0);
41+
transform: translate3d(0, 0, 0);
42+
visibility: hidden;
43+
opacity: 0;
44+
z-index: 1000000;
45+
pointer-events: none;
46+
-webkit-transition: 0.3s ease;
47+
-moz-transition: 0.3s ease;
48+
transition: 0.3s ease; }
49+
.hint:hover:before, .hint:hover:after, .hint:focus:before, .hint:focus:after, [data-hint]:hover:before, [data-hint]:hover:after, [data-hint]:focus:before, [data-hint]:focus:after {
50+
visibility: visible;
51+
opacity: 1; }
52+
.hint:before, [data-hint]:before {
53+
content: '';
54+
position: absolute;
55+
background: transparent;
56+
border: 6px solid transparent;
57+
z-index: 1000001; }
58+
.hint:after, [data-hint]:after {
59+
content: attr(data-hint);
60+
background: #383838;
61+
color: white;
62+
text-shadow: 0 -1px 0px black;
63+
padding: 8px 10px;
64+
font-size: 12px;
65+
line-height: 12px;
66+
white-space: nowrap;
67+
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); }
68+
69+
/**
70+
* source: hint-position.scss
71+
*
72+
* Defines the positoning logic for the tooltips.
73+
*
74+
* Classes added:
75+
* 1) hint--top
76+
* 2) hint--bottom
77+
* 3) hint--left
78+
* 4) hint--right
79+
*/
80+
/**
81+
* set default color for tooltip arrows
82+
*/
83+
.hint--top:before {
84+
border-top-color: #383838; }
85+
86+
.hint--bottom:before {
87+
border-bottom-color: #383838; }
88+
89+
.hint--left:before {
90+
border-left-color: #383838; }
91+
92+
.hint--right:before {
93+
border-right-color: #383838; }
94+
95+
/**
96+
* top tooltip
97+
*/
98+
.hint--top:before {
99+
margin-bottom: -12px; }
100+
.hint--top:after {
101+
margin-left: -18px; }
102+
.hint--top:before, .hint--top:after {
103+
bottom: 100%;
104+
left: 50%; }
105+
.hint--top:hover:after, .hint--top:hover:before, .hint--top:focus:after, .hint--top:focus:before {
106+
-webkit-transform: translateY(-8px);
107+
-moz-transform: translateY(-8px);
108+
transform: translateY(-8px); }
109+
110+
/**
111+
* bottom tooltip
112+
*/
113+
.hint--bottom:before {
114+
margin-top: -12px; }
115+
.hint--bottom:after {
116+
margin-left: -18px; }
117+
.hint--bottom:before, .hint--bottom:after {
118+
top: 100%;
119+
left: 50%; }
120+
.hint--bottom:hover:after, .hint--bottom:hover:before, .hint--bottom:focus:after, .hint--bottom:focus:before {
121+
-webkit-transform: translateY(8px);
122+
-moz-transform: translateY(8px);
123+
transform: translateY(8px); }
124+
125+
/**
126+
* right tooltip
127+
*/
128+
.hint--right:before {
129+
margin-left: -12px;
130+
margin-bottom: -6px; }
131+
.hint--right:after {
132+
margin-bottom: -14px; }
133+
.hint--right:before, .hint--right:after {
134+
left: 100%;
135+
bottom: 50%; }
136+
.hint--right:hover:after, .hint--right:hover:before, .hint--right:focus:after, .hint--right:focus:before {
137+
-webkit-transform: translateX(8px);
138+
-moz-transform: translateX(8px);
139+
transform: translateX(8px); }
140+
141+
/**
142+
* left tooltip
143+
*/
144+
.hint--left:before {
145+
margin-right: -12px;
146+
margin-bottom: -6px; }
147+
.hint--left:after {
148+
margin-bottom: -14px; }
149+
.hint--left:before, .hint--left:after {
150+
right: 100%;
151+
bottom: 50%; }
152+
.hint--left:hover:after, .hint--left:hover:before, .hint--left:focus:after, .hint--left:focus:before {
153+
-webkit-transform: translateX(-8px);
154+
-moz-transform: translateX(-8px);
155+
transform: translateX(-8px); }
156+
157+
/**
158+
* source: hint-color-types.scss
159+
*
160+
* Contains tooltips of various types based on color differences.
161+
*
162+
* Classes added:
163+
* 1) hint--error
164+
* 2) hint--warning
165+
* 3) hint--info
166+
* 4) hint--success
167+
*
168+
*/
169+
/**
170+
* Error
171+
*/
172+
.hint--error:after {
173+
background-color: #b34e4d;
174+
text-shadow: 0 -1px 0px #592726; }
175+
.hint--error.hint--top:before {
176+
border-top-color: #b34e4d; }
177+
.hint--error.hint--bottom:before {
178+
border-bottom-color: #b34e4d; }
179+
.hint--error.hint--left:before {
180+
border-left-color: #b34e4d; }
181+
.hint--error.hint--right:before {
182+
border-right-color: #b34e4d; }
183+
184+
/**
185+
* Warning
186+
*/
187+
.hint--warning:after {
188+
background-color: #c09854;
189+
text-shadow: 0 -1px 0px #6c5328; }
190+
.hint--warning.hint--top:before {
191+
border-top-color: #c09854; }
192+
.hint--warning.hint--bottom:before {
193+
border-bottom-color: #c09854; }
194+
.hint--warning.hint--left:before {
195+
border-left-color: #c09854; }
196+
.hint--warning.hint--right:before {
197+
border-right-color: #c09854; }
198+
199+
/**
200+
* Info
201+
*/
202+
.hint--info:after {
203+
background-color: #3986ac;
204+
text-shadow: 0 -1px 0px #193b4d; }
205+
.hint--info.hint--top:before {
206+
border-top-color: #3986ac; }
207+
.hint--info.hint--bottom:before {
208+
border-bottom-color: #3986ac; }
209+
.hint--info.hint--left:before {
210+
border-left-color: #3986ac; }
211+
.hint--info.hint--right:before {
212+
border-right-color: #3986ac; }
213+
214+
/**
215+
* Success
216+
*/
217+
.hint--success:after {
218+
background-color: #458746;
219+
text-shadow: 0 -1px 0px #1a321a; }
220+
.hint--success.hint--top:before {
221+
border-top-color: #458746; }
222+
.hint--success.hint--bottom:before {
223+
border-bottom-color: #458746; }
224+
.hint--success.hint--left:before {
225+
border-left-color: #458746; }
226+
.hint--success.hint--right:before {
227+
border-right-color: #458746; }
228+
229+
/**
230+
* source: hint-always.scss
231+
*
232+
* Defines a persisted tooltip which shows always.
233+
*
234+
* Classes added:
235+
* 1) hint--always
236+
*
237+
*/
238+
.hint--always:after, .hint--always:before {
239+
opacity: 1;
240+
visibility: visible; }
241+
.hint--always.hint--top:after, .hint--always.hint--top:before {
242+
-webkit-transform: translateY(-8px);
243+
-moz-transform: translateY(-8px);
244+
transform: translateY(-8px); }
245+
.hint--always.hint--bottom:after, .hint--always.hint--bottom:before {
246+
-webkit-transform: translateY(8px);
247+
-moz-transform: translateY(8px);
248+
transform: translateY(8px); }
249+
.hint--always.hint--left:after, .hint--always.hint--left:before {
250+
-webkit-transform: translateX(-8px);
251+
-moz-transform: translateX(-8px);
252+
transform: translateX(-8px); }
253+
.hint--always.hint--right:after, .hint--always.hint--right:before {
254+
-webkit-transform: translateX(8px);
255+
-moz-transform: translateX(8px);
256+
transform: translateX(8px); }
257+
258+
/**
259+
* source: hint-rounded.scss
260+
*
261+
* Defines rounded corner tooltips.
262+
*
263+
* Classes added:
264+
* 1) hint--rounded
265+
*
266+
*/
267+
.hint--rounded:after {
268+
border-radius: 4px; }
269+
270+
/**
271+
* source: hint-effects.scss
272+
*
273+
* Defines various transition effects for the tooltips.
274+
*
275+
* Classes added:
276+
* 1) hint--bounce
277+
*
278+
*/
279+
.hint--bounce:before, .hint--bounce:after {
280+
-webkit-transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
281+
-moz-transition: opacity 0.3s ease, visibility 0.3s ease, -moz-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
282+
transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); }
283+

0 commit comments

Comments
 (0)