Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Replace builtin block Sass with vanilla CSS #35434

Closed
wants to merge 1 commit into from
Closed

Replace builtin block Sass with vanilla CSS #35434

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 0 additions & 52 deletions scripts/compile_sass.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -352,18 +352,6 @@ def compile_sass_dir(
repo / "lms" / "static" / "sass",
],
)
compile_sass_dir(
"Compiling built-in XBlock Sass for default LMS",
repo / "xmodule" / "assets",
repo / "lms" / "static" / "css",
includes=[
*common_includes,
repo / "lms" / "static" / "sass" / "partials",
repo / "cms" / "static" / "sass" / "partials",
repo / "lms" / "static" / "sass",
repo / "cms" / "static" / "sass",
],
)
if not skip_cms:
compile_sass_dir(
"Compiling default CMS Sass",
Expand All @@ -376,18 +364,6 @@ def compile_sass_dir(
repo / "cms" / "static" / "sass",
],
)
compile_sass_dir(
"Compiling built-in XBlock Sass for default CMS",
repo / "xmodule" / "assets",
repo / "cms" / "static" / "css",
includes=[
*common_includes,
repo / "lms" / "static" / "sass" / "partials",
repo / "cms" / "static" / "sass" / "partials",
repo / "lms" / "static" / "sass",
repo / "cms" / "static" / "sass",
],
)
click.secho(f"Done compiling default Sass!", fg="cyan", bold=True)
click.echo()

Expand Down Expand Up @@ -429,20 +405,6 @@ def compile_sass_dir(
],
tolerate_missing=True,
)
compile_sass_dir(
"Compiling built-in XBlock Sass for themed LMS",
repo / "xmodule" / "assets",
theme / "lms" / "static" / "css",
includes=[
*common_includes,
theme / "lms" / "static" / "sass" / "partials",
theme / "cms" / "static" / "sass" / "partials",
repo / "lms" / "static" / "sass" / "partials",
repo / "cms" / "static" / "sass" / "partials",
repo / "lms" / "static" / "sass",
repo / "cms" / "static" / "sass",
],
)
if not skip_cms:
compile_sass_dir(
"Compiling default CMS Sass with themed partials",
Expand Down Expand Up @@ -470,20 +432,6 @@ def compile_sass_dir(
],
tolerate_missing=True,
)
compile_sass_dir(
"Compiling built-in XBlock Sass for themed CMS",
repo / "xmodule" / "assets",
theme / "cms" / "static" / "css",
includes=[
*common_includes,
theme / "lms" / "static" / "sass" / "partials",
theme / "cms" / "static" / "sass" / "partials",
repo / "lms" / "static" / "sass" / "partials",
repo / "cms" / "static" / "sass" / "partials",
repo / "lms" / "static" / "sass",
repo / "cms" / "static" / "sass",
],
)
click.secho(f"Done compiling Sass for theme at {theme}!", fg="cyan", bold=True)
click.echo()

Expand Down
6 changes: 3 additions & 3 deletions xmodule/annotatable_block.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
from openedx.core.djangolib.markup import HTML, Text
from xmodule.editing_block import EditingMixin
from xmodule.raw_block import RawMixin
from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_sass_to_fragment
from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_css_to_fragment
from xmodule.xml_block import XmlMixin
from xmodule.x_module import (
ResourceTemplates,
Expand Down Expand Up @@ -180,7 +180,7 @@ def student_view(self, context): # lint-amnesty, pylint: disable=unused-argumen
"""
fragment = Fragment()
fragment.add_content(self.get_html())
add_sass_to_fragment(fragment, 'AnnotatableBlockDisplay.scss')
add_css_to_fragment(fragment, 'AnnotatableBlockDisplay.css')
add_webpack_js_to_fragment(fragment, 'AnnotatableBlockDisplay')
shim_xmodule_js(fragment, 'Annotatable')

Expand All @@ -193,7 +193,7 @@ def studio_view(self, _context):
fragment = Fragment(
self.runtime.service(self, 'mako').render_cms_template(self.mako_template, self.get_context())
)
add_sass_to_fragment(fragment, 'AnnotatableBlockEditor.scss')
add_css_to_fragment(fragment, 'AnnotatableBlockEditor.css')
add_webpack_js_to_fragment(fragment, 'AnnotatableBlockEditor')
shim_xmodule_js(fragment, self.studio_js_module_name)
return fragment
197 changes: 197 additions & 0 deletions xmodule/assets/AnnotatableBlockDisplay.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,197 @@
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700");
/* line 1, /openedx/edx-platform/xmodule/assets/AnnotatableBlockDisplay.scss */
.xmodule_display.xmodule_AnnotatableBlock {
/* TODO: move top-level variables to a common _variables.scss.
* NOTE: These variables were only added here because when this was integrated with the CMS,
* SASS compilation errors were triggered because the CMS didn't have the same variables defined
* that the LMS did, so the quick fix was to localize the LMS variables not shared by the CMS.
* -Abarrett and Vshnayder
*/
/* stylelint-disable-line */
/* stylelint-disable-line */ }
/* line 15, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
.xmodule_display.xmodule_AnnotatableBlock .annotatable-wrapper {
position: relative; }
/* line 19, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
.xmodule_display.xmodule_AnnotatableBlock .annotatable-header {
margin-bottom: 0.5em; }
/* line 23, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
.xmodule_display.xmodule_AnnotatableBlock .annotatable-section {
position: relative;
padding: 0.5em 1em;
border: 1px solid var(--gray-l3);
border-radius: 0.5em;
margin-bottom: 0.5em; }
/* line 30, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
.xmodule_display.xmodule_AnnotatableBlock .annotatable-section.shaded {
background-color: #ededed; }
/* line 32, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
.xmodule_display.xmodule_AnnotatableBlock .annotatable-section .annotatable-section-title {
font-weight: bold; }
/* line 34, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
.xmodule_display.xmodule_AnnotatableBlock .annotatable-section .annotatable-section-title a {
font-weight: normal; }
/* line 37, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
.xmodule_display.xmodule_AnnotatableBlock .annotatable-section .annotatable-section-body {
border-top: 1px solid var(--gray-l3);
margin-top: 0.5em;
padding-top: 0.5em; }
/* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */
.xmodule_display.xmodule_AnnotatableBlock .annotatable-section .annotatable-section-body:after {
content: "";
display: table;
clear: both; }
/* line 45, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
.xmodule_display.xmodule_AnnotatableBlock .annotatable-section ul.instructions-template {
list-style: disc;
margin-left: 4em; }
/* line 48, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
.xmodule_display.xmodule_AnnotatableBlock .annotatable-section ul.instructions-template b {
font-weight: bold; }
/* line 49, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
.xmodule_display.xmodule_AnnotatableBlock .annotatable-section ul.instructions-template i {
font-style: italic; }
/* line 51, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
.xmodule_display.xmodule_AnnotatableBlock .annotatable-section ul.instructions-template code {
display: inline;
white-space: pre;
font-family: Courier New, monospace; }
/* line 59, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
.xmodule_display.xmodule_AnnotatableBlock .annotatable-toggle {
position: absolute;
right: 0;
margin: 2px 1em 2px 0; }
/* line 63, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
.xmodule_display.xmodule_AnnotatableBlock .annotatable-toggle.expanded::after {
content: " \2191"; }
/* line 64, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
.xmodule_display.xmodule_AnnotatableBlock .annotatable-toggle.collapsed::after {
content: " \2193"; }
/* line 67, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
.xmodule_display.xmodule_AnnotatableBlock .annotatable-span {
display: inline; }
/* line 88, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
.xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight {
background-color: rgba(255, 255, 10, 0.3); }
/* line 90, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
.xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight.selected {
background-color: rgba(255, 255, 10, 0.9); }
/* line 94, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
.xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-yellow {
background-color: rgba(255, 255, 10, 0.3); }
/* line 96, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
.xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-yellow.selected {
background-color: rgba(255, 255, 10, 0.9); }
/* line 94, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
.xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-red {
background-color: rgba(178, 19, 16, 0.3); }
/* line 96, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
.xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-red.selected {
background-color: rgba(178, 19, 16, 0.9); }
/* line 94, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
.xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-orange {
background-color: rgba(255, 165, 0, 0.3); }
/* line 96, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
.xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-orange.selected {
background-color: rgba(255, 165, 0, 0.9); }
/* line 94, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
.xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-green {
background-color: rgba(25, 255, 132, 0.3); }
/* line 96, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
.xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-green.selected {
background-color: rgba(25, 255, 132, 0.9); }
/* line 94, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
.xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-blue {
background-color: rgba(35, 163, 255, 0.3); }
/* line 96, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
.xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-blue.selected {
background-color: rgba(35, 163, 255, 0.9); }
/* line 94, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
.xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-purple {
background-color: rgba(115, 9, 178, 0.3); }
/* line 96, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
.xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-purple.selected {
background-color: rgba(115, 9, 178, 0.9); }
/* line 100, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
.xmodule_display.xmodule_AnnotatableBlock .annotatable-span.hide {
cursor: none;
background-color: inherit; }
/* line 104, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
.xmodule_display.xmodule_AnnotatableBlock .annotatable-span.hide .annotatable-icon {
display: none; }
/* line 109, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
.xmodule_display.xmodule_AnnotatableBlock .annotatable-span .annotatable-comment {
display: none; }
/* line 114, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
.xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip {
font-size: 0.875em;
border: 1px solid #333;
border-radius: 1em;
background-color: rgba(0, 0, 0, 0.85);
color: var(--white);
-webkit-font-smoothing: antialiased; }
/* line 122, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
.xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip .ui-tooltip-titlebar {
font-size: 1em;
color: inherit;
background-color: transparent;
padding: calc((var(--baseline)/4)) calc((var(--baseline)/2));
border: none; }
/* line 129, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
.xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip .ui-tooltip-titlebar .ui-tooltip-title {
padding: calc((var(--baseline)/4)) 0;
border-bottom: 2px solid #333;
font-weight: bold; }
/* line 135, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
.xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip .ui-tooltip-titlebar .ui-tooltip-icon {
right: 10px;
background: #333; }
/* line 140, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
.xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip .ui-tooltip-titlebar .ui-state-hover {
color: inherit;
border: 1px solid var(--gray-l3); }
/* line 146, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
.xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip .ui-tooltip-content {
color: inherit;
font-size: 0.875em;
text-align: left;
font-weight: 400;
padding: 0 calc((var(--baseline)/2)) calc((var(--baseline)/2)) calc((var(--baseline)/2));
background-color: transparent;
border-color: transparent; }
/* line 156, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
.xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip p {
color: inherit;
line-height: normal; }
/* line 162, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
.xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip-annotatable {
max-width: 375px; }
/* line 165, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
.xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip-annotatable .ui-tooltip-content {
padding: 0 calc((var(--baseline)/2)); }
/* line 168, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
.xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip-annotatable .ui-tooltip-content .annotatable-comment {
display: block;
margin: 0 0 calc((var(--baseline)/2)) 0;
max-height: 225px;
overflow: auto;
line-height: normal; }
/* line 176, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
.xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip-annotatable .ui-tooltip-content .annotatable-reply {
display: block;
border-top: 2px solid #333;
padding: calc((var(--baseline)/4)) 0;
margin: 0;
text-align: center; }
/* line 185, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
.xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip-annotatable::after {
content: '';
display: inline-block;
position: absolute;
bottom: -20px;
left: 50%;
height: 0;
width: 0;
margin-left: calc(-1 * (var(--baseline) / 4));
border: 10px solid transparent;
border-top-color: rgba(0, 0, 0, 0.85); }
3 changes: 0 additions & 3 deletions xmodule/assets/AnnotatableBlockDisplay.scss
View file
Open in desktop

This file was deleted.

5 changes: 5 additions & 0 deletions xmodule/assets/AnnotatableBlockEditor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
/* line 1, /openedx/edx-platform/xmodule/assets/codemirror/_codemirror.scss */
.xmodule_edit.xmodule_AnnotatableBlock .CodeMirror {
background: #fff;
font-size: 13px;
color: #3c3c3c; }
3 changes: 0 additions & 3 deletions xmodule/assets/AnnotatableBlockEditor.scss
View file
Open in desktop

This file was deleted.

5 changes: 5 additions & 0 deletions xmodule/assets/CustomTagBlockEditor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
/* line 1, /openedx/edx-platform/xmodule/assets/codemirror/_codemirror.scss */
.xmodule_edit.xmodule_CustomTagBlock .CodeMirror {
background: #fff;
font-size: 13px;
color: #3c3c3c; }
3 changes: 0 additions & 3 deletions xmodule/assets/CustomTagBlockEditor.scss
View file
Open in desktop

This file was deleted.

Loading
Loading