Andal.LND/frontend-app-learning
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: update container-fluid to container-xl class to match legacy experience. (#530)

Browse Source 
Co-authored-by: SaadYousaf <saadyousaf@A006-00314.local>
This commit is contained in:
Saad Yousaf
2021-07-28 02:01:26 +05:00
committed by GitHub
parent 4be3b8a56f
commit 2f0933be6e
6 changed files with 8 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/course-header/CourseTabsNavigation.jsx
View File

@@ -11,7 +11,7 @@ function CourseTabsNavigation({
}) {
return (
<div className={classNames('course-tabs-navigation', className)}>
<div className="container-fluid">
<div className="container-xl">
<Tabs
className="nav-underline-tabs"
aria-label={intl.formatMessage(messages.courseMaterial)}

2
src/course-header/Header.jsx
View File

@@ -61,7 +61,7 @@ function Header({
return (
<header className="course-header">
<a className="sr-only sr-only-focusable" href="#main-content">{intl.formatMessage(messages.skipNavLink)}</a>
<div className="container-fluid py-2 d-flex align-items-center">
<div className="container-xl py-2 d-flex align-items-center">
{headerLogo}
<div className="flex-grow-1 course-title-lockup" style={{ lineHeight: 1 }}>
<span className="d-block small m-0">{courseOrg} {courseNumber}</span>

6
src/courseware/course/content-tools/calculator/Calculator.jsx
View File

@@ -52,7 +52,7 @@ class Calculator extends Component {
</Collapsible.Trigger>
</div>
<Collapsible.Body className="calculator-content pt-4">
<form onSubmit={this.handleSubmit} className="container-fluid form-inline flex-nowrap">
<form onSubmit={this.handleSubmit} className="container-xl form-inline flex-nowrap">
<input
type="text"
placeholder={this.props.intl.formatMessage(messages['calculator.input.field.label'])}
@@ -80,7 +80,7 @@ class Calculator extends Component {
</form>
<Collapsible.Advanced>
<div className="container-fluid">
<div className="container-xl">
<Collapsible.Trigger className="btn btn-link btn-sm px-0 d-inline-flex align-items-center">
<Collapsible.Visible whenOpen>
<FontAwesomeIcon icon={faTimesCircle} aria-hidden="true" className="mr-2" />
@@ -94,7 +94,7 @@ class Calculator extends Component {
/>
</Collapsible.Trigger>
</div>
<Collapsible.Body className="container-fluid pt-3" style={{ maxHeight: '50vh', overflow: 'auto' }}>
<Collapsible.Body className="container-xl pt-3" style={{ maxHeight: '50vh', overflow: 'auto' }}>
<FormattedMessage
tagName="h6"
id="calculator.instructions"

8
src/index.scss
View File

@@ -5,14 +5,6 @@
@import "~@edx/frontend-component-footer/dist/footer";
// TODO: Fix .container-fluid for mobile in paragon
.container-fluid {
max-width: 1140px + 2 * $grid-gutter-width;
@media (max-width: -1 + map-get($grid-breakpoints, 'sm')) {
padding-left: $grid-gutter-width/2;
padding-right: $grid-gutter-width/2;
}
}
#root {
display: flex;

4
src/instructor-toolbar/InstructorToolbar.jsx
View File

@@ -74,7 +74,7 @@ export default function InstructorToolbar(props) {
return (!didMount ? null : (
<div>
<div className="bg-primary text-white">
<div className="container-fluid py-3 d-md-flex justify-content-end align-items-start">
<div className="container-xl py-3 d-md-flex justify-content-end align-items-start">
<div className="align-items-center flex-grow-1 d-md-flex mx-1 my-1">
<MasqueradeWidget courseId={courseId} onError={showMasqueradeError} />
</div>
@@ -102,7 +102,7 @@ export default function InstructorToolbar(props) {
</div>
</div>
{masqueradeErrorMessage && (
<div className="container-fluid mt-3">
<div className="container-xl mt-3">
<Alert
type={ALERT_TYPES.ERROR}
dismissible={false}

2
src/tab-page/LoadedTabPage.jsx
View File

@@ -78,7 +78,7 @@ function LoadedTabPage({
}}
/>
<CourseTabsNavigation tabs={tabs} className="mb-3" activeTabSlug={activeTabSlug} />
<div className="container-fluid">
<div className="container-xl">
{children}
</div>
</main>