e4a1e41367
The first attempt at creating a new MFE-driven page for Studio Unit rendering involved rendering each XBlock separately in its own iframe. This turned out to be prohibitively slow because of the many redundant assets and JavaScript processing (e.g. MathJax) that happens for each XBlock component. In order to mitigate some of these issues, we decided to try a hybrid approach where we render the entire Unit's worth of XBlocks at once on the server side in a Studio view + template, and then invoke that from frontend-app-authoring as an iframe. The frontend-app-authoring MFE would still be responsible for displaying most of the interactive UI, but the per-component actions like "edit" would be triggered by buttons on the server-rendered Unit display. When one of those buttons is pressed, the server-rendered UI code in the iframe would use postMessage to communicate to the frontend-app-authoring MFE, which would then display the appropriate actions. To make this work, we're making a new view and template that copies a lot of existing code used to display the Unit in pre-MFE Studio, and then modifying that to remove things like the header/footer so that it can be invoked from an iframe. This entire design is a compromise in order to do as much of the UI development in frontend-app-authoring as possible while keeping XBlock rendering performance tolerable. We hope that we can find better solutions for this later. Authored-by: Sagirov Eugeniy <evhenyj.sahyrov@raccoongang.com>
66 lines
1.2 KiB
SCSS
66 lines
1.2 KiB
SCSS
%button-styles {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
%input-styles {
|
|
font-size: $base-font-size;
|
|
color: $text-color !important;
|
|
background-color: $white;
|
|
border: 1px solid $border-color !important;
|
|
border-radius: $input-border-radius !important;
|
|
padding: 10px 16px !important;
|
|
background-image: none;
|
|
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
|
|
}
|
|
|
|
%modal-actions-button {
|
|
font-size: $base-font-size;
|
|
line-height: 20px;
|
|
padding: 10px 16px;
|
|
border-radius: $btn-border-radius;
|
|
}
|
|
|
|
%primary-button {
|
|
@extend %modal-actions-button;
|
|
|
|
background-color: $primary;
|
|
color: $white;
|
|
border: 1px solid $primary;
|
|
cursor: pointer;
|
|
background-image: none;
|
|
display: block;
|
|
|
|
&:hover {
|
|
background: darken($primary, 5%);
|
|
border-color: #2d494e;
|
|
box-shadow: none;
|
|
color: $white;
|
|
}
|
|
|
|
&:focus {
|
|
background: $primary;
|
|
outline: none;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
%light-button {
|
|
@extend %modal-actions-button;
|
|
|
|
color: $black;
|
|
background-color: $light-background-color;
|
|
border-color: $light-background-color;
|
|
box-shadow: none;
|
|
border: 1px solid $transparent;
|
|
font-weight: 500;
|
|
}
|
|
|
|
%icon-position {
|
|
top: 11px;
|
|
left: 11px;
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|