diff --git a/xmodule/assets/poll/_display.scss b/xmodule/assets/poll/_display.scss index 7c07f89376b2..7c9b21bf205e 100644 --- a/xmodule/assets/poll/_display.scss +++ b/xmodule/assets/poll/_display.scss @@ -20,13 +20,13 @@ div.poll_question { h3 { margin-top: 0; - margin-bottom: ($baseline*0.75); + margin-bottom: calc((var(--baseline)*0.75)); color: #fe57a1; font-size: 1.9em; &.problem-header { div.staff { - margin-top: ($baseline*1.5); + margin-top: calc((var(--baseline)*1.5)); font-size: 80%; } } @@ -44,7 +44,7 @@ div.poll_question { } .poll_answer { - margin-bottom: $baseline; + margin-bottom: var(--baseline); &.short { clear: both; @@ -107,7 +107,7 @@ div.poll_question { font-weight: bold; letter-spacing: normal; line-height: 25.59375px; - margin-bottom: ($baseline*0.75); + margin-bottom: calc((var(--baseline)*0.75)); margin: 0; padding: 0px; text-align: center; @@ -145,9 +145,9 @@ div.poll_question { width: 80%; text-align: left; min-height: 30px; - margin-left: $baseline; + margin-left: var(--baseline); height: auto; - margin-bottom: $baseline; + margin-bottom: var(--baseline); &.short { width: 100px; @@ -157,7 +157,7 @@ div.poll_question { .stats { min-height: 40px; - margin-top: $baseline; + margin-top: var(--baseline); clear: both; &.short { @@ -174,7 +174,7 @@ div.poll_question { border: 1px solid black; display: inline; float: left; - margin-right: ($baseline/2); + margin-right: calc((var(--baseline)/2)); &.short { width: 65%; diff --git a/xmodule/poll_block.py b/xmodule/poll_block.py index f09889f506e6..a0cdfff4938b 100644 --- a/xmodule/poll_block.py +++ b/xmodule/poll_block.py @@ -21,7 +21,7 @@ from openedx.core.djangolib.markup import Text, HTML from xmodule.mako_block import MakoTemplateBlockBase from xmodule.stringify import stringify_children -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.x_module import ( ResourceTemplates, shim_xmodule_js, @@ -136,7 +136,7 @@ def student_view(self, _context): 'configuration_json': self.dump_poll(), } fragment.add_content(self.runtime.service(self, 'mako').render_lms_template('poll.html', params)) - add_sass_to_fragment(fragment, 'PollBlockDisplay.scss') + add_css_to_fragment(fragment, 'PollBlockDisplay.scss') add_webpack_js_to_fragment(fragment, 'PollBlockDisplay') shim_xmodule_js(fragment, 'Poll') return fragment diff --git a/xmodule/static/css-builtin-blocks/PollBlockDisplay.css b/xmodule/static/css-builtin-blocks/PollBlockDisplay.css new file mode 100644 index 000000000000..1061e6198512 --- /dev/null +++ b/xmodule/static/css-builtin-blocks/PollBlockDisplay.css @@ -0,0 +1,221 @@ +@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700"); + +.xmodule_display.xmodule_PollBlock { + /* stylelint-disable-line */ + /* stylelint-disable-line */ +} + +@media print { + .xmodule_display.xmodule_PollBlock div.poll_question { + display: block; + width: auto; + padding: 0; + } + + .xmodule_display.xmodule_PollBlock div.poll_question canvas, .xmodule_display.xmodule_PollBlock div.poll_question img { + page-break-inside: avoid; + } +} + +.xmodule_display.xmodule_PollBlock div.poll_question .inline { + display: inline; +} + +.xmodule_display.xmodule_PollBlock div.poll_question h3 { + margin-top: 0; + margin-bottom: 15px; + color: #fe57a1; + font-size: 1.9em; +} + +.xmodule_display.xmodule_PollBlock div.poll_question h3.problem-header div.staff { + margin-top: 30px; + font-size: 80%; +} + +@media print { + .xmodule_display.xmodule_PollBlock div.poll_question h3 { + display: block; + width: auto; + border-right: 0; + } +} + +.xmodule_display.xmodule_PollBlock div.poll_question p { + text-align: justify; + font-weight: bold; +} + +.xmodule_display.xmodule_PollBlock div.poll_question .poll_answer { + margin-bottom: 20px; +} + +.xmodule_display.xmodule_PollBlock div.poll_question .poll_answer.short { + clear: both; +} + +.xmodule_display.xmodule_PollBlock div.poll_question .poll_answer .question { + height: auto; + clear: both; + min-height: 30px; +} + +.xmodule_display.xmodule_PollBlock div.poll_question .poll_answer .question.short { + clear: none; + width: 30%; + display: inline; + float: left; +} + +.xmodule_display.xmodule_PollBlock div.poll_question .poll_answer .question .button { + -webkit-appearance: none; + -webkit-background-clip: padding-box; + -webkit-border-image: none; + -webkit-box-align: center; + -webkit-box-shadow: white 0px 1px 0px 0px inset; + -webkit-font-smoothing: antialiased; + -webkit-rtl-ordering: logical; + -webkit-user-select: text; + -webkit-writing-mode: horizontal-tb; + background-clip: padding-box; + background-color: #eeeeee; + background-image: -webkit-linear-gradient(top, #eeeeee, #d2d2d2); + border-bottom-color: #cacaca; + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + border-bottom-style: solid; + border-bottom-width: 1px; + border-left-color: #cacaca; + border-left-style: solid; + border-left-width: 1px; + border-right-color: #cacaca; + border-right-style: solid; + border-right-width: 1px; + border-top-color: #cacaca; + border-top-left-radius: 3px; + border-top-right-radius: 3px; + border-top-style: solid; + border-top-width: 1px; + box-shadow: white 0px 1px 0px 0px inset; + box-sizing: border-box; + color: #333333; + /* display: inline-block; */ + display: inline; + float: left; + font-family: 'Open Sans', Verdana, Geneva, sans-serif; + font-size: 13px; + font-style: normal; + font-variant: normal; + font-weight: bold; + letter-spacing: normal; + line-height: 25.59375px; + margin-bottom: 15px; + margin: 0; + padding: 0px; + text-align: center; + text-decoration: none; + text-indent: 0px; + text-shadow: #f8f8f8 0px 1px 0px; + text-transform: none; + vertical-align: top; + white-space: pre-line; + width: 25px; + height: 25px; + word-spacing: 0px; + writing-mode: lr-tb; +} + +.xmodule_display.xmodule_PollBlock div.poll_question .poll_answer .question .button.answered { + -webkit-box-shadow: #61b8e1 0px 1px 0px 0px inset; + background-color: #1d9dd9; + background-image: -webkit-linear-gradient(top, #1d9dd9, #0e7cb0); + border-bottom-color: #0d72a2; + border-left-color: #0d72a2; + border-right-color: #0d72a2; + border-top-color: #0d72a2; + box-shadow: #61b8e1 0px 1px 0px 0px inset; + color: white; + text-shadow: #076794 0px 1px 0px; + background-image: none; +} + +.xmodule_display.xmodule_PollBlock div.poll_question .poll_answer .question .text { + display: inline; + float: left; + width: 80%; + text-align: left; + min-height: 30px; + margin-left: 20px; + height: auto; + margin-bottom: 20px; +} + +.xmodule_display.xmodule_PollBlock div.poll_question .poll_answer .question .text.short { + width: 100px; +} + +.xmodule_display.xmodule_PollBlock div.poll_question .poll_answer .stats { + min-height: 40px; + margin-top: 20px; + clear: both; +} + +.xmodule_display.xmodule_PollBlock div.poll_question .poll_answer .stats.short { + margin-top: 0; + clear: none; + display: inline; + float: right; + width: 70%; +} + +.xmodule_display.xmodule_PollBlock div.poll_question .poll_answer .stats .bar { + width: 75%; + height: 20px; + border: 1px solid black; + display: inline; + float: left; + margin-right: 10px; +} + +.xmodule_display.xmodule_PollBlock div.poll_question .poll_answer .stats .bar.short { + width: 65%; + height: 20px; + margin-top: 3px; +} + +.xmodule_display.xmodule_PollBlock div.poll_question .poll_answer .stats .bar .percent { + background-color: gray; + width: 0; + height: 20px; +} + +.xmodule_display.xmodule_PollBlock div.poll_question .poll_answer .stats .number { + width: 80px; + display: inline; + float: right; + height: 28px; + text-align: right; +} + +.xmodule_display.xmodule_PollBlock div.poll_question .poll_answer .stats .number.short { + width: 120px; + height: auto; +} + +.xmodule_display.xmodule_PollBlock div.poll_question .poll_answer.answered { + -webkit-box-shadow: #61b8e1 0 1px 0 0 inset; + background-color: #1d9dd9; + background-image: -webkit-linear-gradient(top, #1d9dd9, #0e7cb0); + border-bottom-color: #0d72a2; + border-left-color: #0d72a2; + border-right-color: #0d72a2; + border-top-color: #0d72a2; + box-shadow: #61b8e1 0 1px 0 0 inset; + color: white; + text-shadow: #076794 0 1px 0; +} + +.xmodule_display.xmodule_PollBlock div.poll_question .button.reset-button { + clear: both; + float: right; +}