Skip to content

E
edx-platform
Commit 80126fc7 by Andy Armstrong Committed by GitHub
Options

Merge pull request #16232 from edx/andya/bootstrap-support-modal 

Make the support modal responsive
parents fb820f9b af4d4198
Showing with 161 additions and 124 deletions
lms/static/sass/base/_base.scss
......@@ -215,77 +215,6 @@ mark {
}
}
.help-tab {
@include transform(rotate(-90deg));
@include transform-origin(0 0);
@extend %ui-depth2;
@extend %ui-print-excluded;
position: fixed;
top: 250px;
left: 0;
a:link,
a:visited {
border: 1px solid $gray-l3;
border-top-style: none;
border-radius: 0 0 ($baseline/2) ($baseline/2);
background: transparentize($white, 0.25);
color: transparentize($base-font-color, 0.25);
font-weight: bold;
text-decoration: none;
padding: 6px 22px 11px;
display: inline-block;
&:hover,
&:focus {
color: $white;
background: $link-color;
}
}
}
.help-buttons {
padding: ($baseline/2) ($baseline*2.5);
text-align: center;
button {
@extend %btn-secondary-blue-outline;
margin: .5rem 0;
font-weight: initial;
text-shadow: none;
letter-spacing: initial !important;
text-transform: normal !important;
vertical-align: initial;
&:hover,
&:focus {
background: $link-color !important;
color: $white;
box-shadow: none !important;
text-shadow: none !important;
}
}
}
#feedback_form {
input, textarea {
font: normal 1em/1.4em $sans-serif;
}
textarea[name="details"] {
height: 150px;
}
}
#feedback_success_wrapper {
p {
padding: 0 $baseline $baseline $baseline;
}
}
// ====================
// UI - disabled state
......
lms/static/sass/bootstrap/_legacy.scss
......@@ -13,6 +13,13 @@
font-size: ($sizeValue/10) + rem;
}
// Adds a simple extension that indicates that this element should not print
%ui-print-excluded {
@media print {
display: none;
}
}
// Support .sr as a synonym for .sr-only
.sr {
@extend .sr-only;
......
lms/static/sass/bootstrap/lms-main.scss
......@@ -20,6 +20,8 @@
@import 'layouts';
@import 'components';
@import 'course/layout/courseware_preview';
@import 'shared/modal';
@import 'shared/help-tab';
// Features
@import 'features/bookmarks';
......
lms/static/sass/shared-v2/_help-tab.scss
#help-modal {
overflow: visible;
background: transparent;
box-shadow: none;
@media (max-width: $grid-breakpoints-md) {
width: 90% !important;
margin-left: -47% !important;
}
@media (min-width: $grid-breakpoints-md) {
width: 700px !important;
margin-left: -350px !important;
}
}
.help-tab {
@include transform(rotate(-90deg));
@include transform-origin(0 0);
......@@ -29,7 +46,9 @@
}
.help-buttons {
padding: ($baseline/2) ($baseline*2.5);
.btn {
flex-grow: 1;
}
a:link,
a:visited {
......
lms/static/sass/shared/_help-tab.scss
// Open edX: Help tab
// ==================
#help-modal {
overflow: visible;
background: transparent;
box-shadow: none;
@include media-breakpoint-down(md) {
width: 90% !important;
margin-left: -47% !important;
}
@include media-breakpoint-up(md) {
width: 700px !important;
margin-left: -350px !important;
}
}
.help-tab {
@extend %ui-depth2;
@extend %ui-print-excluded;
transform: rotate(-90deg);
transform-origin: top left;
position: fixed;
top: 250px;
left: 0;
a:link,
a:visited {
border: 1px solid $gray-300;
border-top-style: none;
border-radius: 0 0 ($baseline/2) ($baseline/2);
background: transparentize($white, 0.25);
color: transparentize($body-color, 0.25);
font-weight: bold;
text-decoration: none;
padding: 6px 22px 11px;
display: inline-block;
&:hover,
&:focus {
color: $white;
background: $link-color;
}
}
}
.help-buttons {
display: flex;
text-align: center;
justify-content: normal;
flex-grow: 1;
.btn:not(:first-child) {
@include margin-left($baseline/2);
}
@include media-breakpoint-down(md) {
flex-direction: column;
.btn {
width: 100%;
margin: $baseline/4 0 0 0 !important;
}
}
}
#feedback_form {
input, textarea {
font: normal 1em/1.4em $font-family-sans-serif;
}
textarea[name="details"] {
height: 150px;
}
}
#feedback_success_wrapper {
p {
padding: 0 $baseline $baseline $baseline;
}
}
.feedback-form-select {
background: $white;
margin-bottom: $baseline;
......
lms/static/sass/shared/_modal.scss
#lean_overlay {
background: transparent;
@include background-image(radial-gradient(circle at 50% 30%, $shadow-d1, $shadow-d2));
background-image: radial-gradient(circle at 50% 30%, $shadow-d1, $shadow-d2);
display: none;
height:100%;
height: 100%;
left: 0;
position: fixed;
top: 0;
width:100%;
width: 100%;
z-index: 100;
}
......@@ -22,8 +19,8 @@
width: grid-width(5);
border-radius: 3px;
box-shadow: 0 0 5px 0 $shadow-d1;
background: $gray-d2;
color: $base-font-color;
background: theme-color("dark");
color: $body-color;
&.video-modal {
left: 50%;
......@@ -56,7 +53,7 @@
.inner-wrapper {
@extend %ui-depth1;
background: $modal-bg-color;
background: $modal-content-bg;
border-radius: 0;
border: 1px solid rgba(0, 0, 0, 0.9);
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
......@@ -67,7 +64,7 @@
position: relative;
p {
font-size: .9em;
font-size: 0.9em;
line-height: 1.4;
}
......@@ -80,8 +77,6 @@
position: relative;
&::before {
@include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 0.8) 0%, rgba(255,255,255, 0) 100%));
content: "";
display: block;
height: 400px;
......@@ -115,13 +110,13 @@
h2 {
position: relative;
text-align: center;
text-shadow: 0 1px rgba(255,255,255, 0.4);
text-shadow: 0 1px rgba(255, 255, 255, 0.4);
z-index: 2;
}
}
.modal-form-error {
background: tint($red,90%);
background: theme-color("danger");
border: 1px solid rgb(143, 14, 14);
color: rgb(143, 14, 14);
display: none;
......@@ -138,7 +133,8 @@
padding: 12px;
}
.activation-message, .message {
.activation-message,
.message {
padding: 0 ($baseline*2) ($baseline/2);
p {
......@@ -162,7 +158,7 @@
}
label {
color: $text-color;
color: $body-color;
&.field-error {
display: block;
......@@ -190,7 +186,7 @@
input[type="email"],
input[type="text"],
input[type="password"] {
background: rgb(255,255,255);
background: theme-color("inverse");
display: block;
height: 45px;
margin-bottom: $baseline;
......@@ -200,16 +196,17 @@
label.remember-me,
label.terms-of-service,
label.honor-code {
background: rgb(233,233,233);
border: 1px solid rgb(200,200,200);
background: rgb(233, 233, 233);
border: 1px solid rgb(200, 200, 200);
border-radius: 3px;
box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6);
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
display: block;
margin-bottom: $baseline;
padding: 8px ($baseline/2);
&:hover, &:focus {
background: rgb(230,230,230);
&:hover,
&:focus {
background: rgb(230, 230, 230);
}
&.field-error {
......@@ -217,12 +214,13 @@
}
a {
font-family: $serif;
font-style: italic;
}
}
.citizenship, .gender, .date-of-birth {
.citizenship,
.gender,
.date-of-birth {
margin-bottom: $baseline;
float: left;
width: flex-grid(4);
......@@ -232,15 +230,14 @@
}
select {
box-sizing: border-box;
width: 100%;
@include box-sizing(border-box);
display: block;
}
}
.citizenship, .gender {
.citizenship,
.gender {
margin-right: flex-gutter();
}
......@@ -262,24 +259,23 @@
z-index: 2;
p {
color: $lighter-base-font-color;
color: theme-color("secondary");
font-style: italic;
text-align: center;
span {
color: $lighter-base-font-color;
font-family: $serif;
color: theme-color("secondary");
font-style: italic;
}
a {
color: $lighter-base-font-color;
font-family: $serif;
color: theme-color("secondary");
font-style: italic;
text-decoration: underline;
&:hover, &:focus {
color: $base-font-color;
&:hover,
&:focus {
color: $body-color;
}
}
......@@ -298,21 +294,24 @@
right: 2px;
top: 0;
z-index: 100;
color: $lighter-base-font-color;
font: normal 1.2rem/1.2rem $sans-serif;
color: theme-color("secondary");
font: normal 1.2rem/1.2rem $font-family-sans-serif;
text-align: center;
text-shadow: 0 1px rgba(255,255,255, 0.8);
@include transition(all 0.15s ease-out 0s);
&:hover, &:focus {
color: $base-font-color;
&:hover,
&:focus {
color: $body-color;
text-decoration: none;
}
}
}
#help_wrapper, #feedback_form_wrapper, .discussion-alert-wrapper {
#help_wrapper,
#feedback_form_wrapper,
.discussion-alert-wrapper {
padding: 0 ($baseline*1.5) ($baseline*1.5) ($baseline*1.5);
header {
......@@ -322,11 +321,9 @@
}
.note {
@include font-size(12);
@include line-height(12);
font-size: $font-size-sm;
margin-top: ($baseline/2);
color: $lighter-base-font-color;
color: theme-color("secondary");
}
}
......@@ -338,10 +335,8 @@
.tip {
font-size: 12px;
display: block;
color: $dark-gray;
color: theme-color("dark");
}
}
.leanModal_box {
......@@ -372,7 +367,7 @@
.list-actions-item {
@extend %t-copy-sub1;
color: $base-font-color;
color: $body-color;
text-align: center;
}
......
lms/templates/help_modal.html
......@@ -21,7 +21,7 @@ from xmodule.tabs import CourseTabList
<div id="help-modal" class="modal" aria-hidden="true" role="dialog" aria-modal="true" tabindex="-1" aria-labelledby="support-platform-name">
<div class="inner-wrapper">
## TODO: find a way to refactor this
<button class="close-modal" tabindex="0">
<button class="btn-link close-modal" tabindex="0">
<span class="icon fa fa-remove" aria-hidden="true"></span>
<span class="sr">
## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
......@@ -74,9 +74,9 @@ from xmodule.tabs import CourseTabList
<hr>
<div class="help-buttons">
<button type="button" class="" id="feedback_link_problem">${_('Report a problem')}</button><br />
<button type="button" class="" id="feedback_link_suggestion">${_('Make a suggestion')}</button><br />
<button type="button" class="" id="feedback_link_question">${_('Ask a question')}</button>
<button type="button" class="btn btn-outline-primary" id="feedback_link_problem">${_('Report a problem')}</button>
<button type="button" class="btn btn-outline-primary" id="feedback_link_suggestion">${_('Make a suggestion')}</button>
<button type="button" class="btn btn-outline-primary" id="feedback_link_question">${_('Ask a question')}</button>
</div>
<p class="note">${_('Please note: The {platform_name} support team is English speaking. While we will do our best to address your inquiry in any language, our responses will be in English.').format(
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment