Skip to content

Commit

Permalink
Merge pull request #3 from open-craft/kaustav/customize_footer_link_p…
Browse files Browse the repository at this point in the history 
…ositions

feat: add inner container to limit width and reorder links and logo in footer
  • Loading branch information
@kaustavb12
kaustavb12 authored Feb 19, 2024
2 parents a938860 + 7d478f4 commit d128a3d
Show file tree
Hide file tree
Showing 4 changed files with 172 additions and 160 deletions.
2 changes: 2 additions & 0 deletions README.rst
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,8 @@ Other than the environment variables listed above, it is also possible to custom
},
# Update footer container styling via bootstrap classes
"FOOTER_CUSTOM_CLASSNAMES": "py-5 px-4 text-center flex-column justify-content-center flex-wrap text-dark",
# Update footer inner conatiner styling via bootstray classes
"FOOTER_CONTAINER_CUSTOM_CLASSNAMES": "py-5 px-4 text-center flex-column justify-content-center flex-wrap text-dark"
# Update footer logo styling
"FOOTER_LOGO_STYLE": {
"marginBottom": "2rem",
Expand Down
67 changes: 34 additions & 33 deletions src/components/Footer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,39 +48,40 @@ class SiteFooter extends React.Component {
className={`footer d-flex border-top py-3 px-4 ${config.FOOTER_CUSTOM_CLASSNAMES || ''}`}
style={config.FOOTER_CUSTOM_STYLE}
>
<a
className="d-block"
href={config.LMS_BASE_URL}
aria-label={intl.formatMessage(messages['footer.logo.ariaLabel'])}
>
<img
style={{ maxHeight: 45, ...config.FOOTER_LOGO_STYLE }}
src={logo || config.LOGO_TRADEMARK_URL}
alt={intl.formatMessage(messages['footer.logo.altText'])}
/>
</a>
<div className="flex-grow-1" />
{Array.isArray(config.FOOTER_LINKS) && (
<div className={`d-flex align-items-center justify-content-center ${config.FOOTER_LINKS_CONTAINER_CLASSNAMES || ''}`}>
{config.FOOTER_LINKS.map(element => (
<a
key={element.url}
className={`px-3 ${config.FOOTER_LINKS_CLASSNAMES}`}
href={element.url}
target={element.target || 'blank'}
>
{element.text}
</a>
)).reduce((prev, curr) => [prev, '|', curr])}
</div>
)}
{showLanguageSelector && (
<LanguageSelector
options={supportedLanguages}
onSubmit={onLanguageSelected}
/>
)}

<div className={`container-xl py-2 d-flex align-items-center ${config.FOOTER_CONTAINER_CUSTOM_CLASSNAMES || ''}`}>
{Array.isArray(config.FOOTER_LINKS) && (
<div className={`d-flex align-items-center justify-content-center ${config.FOOTER_LINKS_CONTAINER_CLASSNAMES || ''}`}>
{config.FOOTER_LINKS.map(element => (
<a
key={element.url}
className={`px-3 ${config.FOOTER_LINKS_CLASSNAMES || ''}`}
href={element.url}
target={element.target || 'blank'}
>
{element.text}
</a>
))}
</div>
)}
<div className="flex-grow-1" />
<a
className="d-block"
href={config.LMS_BASE_URL}
aria-label={intl.formatMessage(messages['footer.logo.ariaLabel'])}
>
<img
style={{ maxHeight: 45, ...config.FOOTER_LOGO_STYLE }}
src={logo || config.LOGO_TRADEMARK_URL}
alt={intl.formatMessage(messages['footer.logo.altText'])}
/>
</a>
{showLanguageSelector && (
<LanguageSelector
options={supportedLanguages}
onSubmit={onLanguageSelected}
/>
)}
</div>
</footer>
);
}
Expand Down
1 change: 1 addition & 0 deletions src/components/Footer.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ const FooterWithContext = ({ locale = 'es' }) => {
LMS_BASE_URL: process.env.LMS_BASE_URL,
FOOTER_CUSTOM_STYLE: { color: 'black' },
FOOTER_CUSTOM_CLASSNAMES: 'text-center',
FOOTER_CONTAINER_CUSTOM_CLASSNAMES: 'text-center',
FOOTER_LOGO_STYLE: { color: 'white' },
FOOTER_LINKS: [
{ url: 'https://openedx.org/terms-of-use/', text: 'Terms of service' },
Expand Down
262 changes: 135 additions & 127 deletions src/components/__snapshots__/Footer.test.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,62 +5,66 @@ exports[`<Footer /> renders correctly renders with a language selector 1`] = `
className="footer d-flex border-top py-3 px-4 "
role="contentinfo"
>
<a
aria-label="edX Home"
className="d-block"
href="http://localhost:18000"
>
<img
alt="Powered by Open edX"
src="https://edx-cdn.org/v3/default/logo-trademark.svg"
style={
Object {
"maxHeight": 45,
}
}
/>
</a>
<div
className="flex-grow-1"
/>
<form
className="form-inline justify-content-center"
onSubmit={[Function]}
className="container-xl py-2 d-flex align-items-center "
>
<div
className="form-group"
className="flex-grow-1"
/>
<a
aria-label="edX Home"
className="d-block"
href="http://localhost:18000"
>
<label
className="d-inline-block m-0"
htmlFor="site-footer-language-select"
>
Choose Language
</label>
<select
className="form-control-sm mx-2"
defaultValue="en"
id="site-footer-language-select"
name="site-footer-language-select"
<img
alt="Powered by Open edX"
src="https://edx-cdn.org/v3/default/logo-trademark.svg"
style={
Object {
"maxHeight": 45,
}
}
/>
</a>
<form
className="form-inline justify-content-center"
onSubmit={[Function]}
>
<div
className="form-group"
>
<option
value="en"
<label
className="d-inline-block m-0"
htmlFor="site-footer-language-select"
>
English
</option>
<option
value="es"
Choose Language
</label>
<select
className="form-control-sm mx-2"
defaultValue="en"
id="site-footer-language-select"
name="site-footer-language-select"
>
Español
</option>
</select>
<button
className="btn btn-outline-primary btn-sm"
type="submit"
>
Apply
</button>
</div>
</form>
<option
value="en"
>
English
</option>
<option
value="es"
>
Español
</option>
</select>
<button
className="btn btn-outline-primary btn-sm"
type="submit"
>
Apply
</button>
</div>
</form>
</div>
</footer>
`;

Expand All @@ -74,50 +78,52 @@ exports[`<Footer /> renders correctly renders without a language selector 1`] =
}
}
>
<a
aria-label="edX Home"
className="d-block"
href="http://localhost:18000"
>
<img
alt="Powered by Open edX"
src="https://edx-cdn.org/v3/default/logo-trademark.svg"
style={
Object {
"color": "white",
"maxHeight": 45,
}
}
/>
</a>
<div
className="flex-grow-1"
/>
<div
className="d-flex align-items-center justify-content-center flex-wrap"
className="container-xl py-2 d-flex align-items-center text-center"
>
<a
className="px-3 text-dark font-weight-bold"
href="https://openedx.org/terms-of-use/"
target="blank"
>
Terms of service
</a>
|
<a
className="px-3 text-dark font-weight-bold"
href="https://openedx.org/code-of-conduct/"
target="blank"
<div
className="d-flex align-items-center justify-content-center flex-wrap"
>
Code of conduct
</a>
|
<a
className="px-3 text-dark font-weight-bold"
href="https://openedx.org/terms-of-use/"
target="blank"
>
Terms of service
</a>
<a
className="px-3 text-dark font-weight-bold"
href="https://openedx.org/code-of-conduct/"
target="blank"
>
Code of conduct
</a>
<a
className="px-3 text-dark font-weight-bold"
href="https://openedx.org/privacy-policy/"
target="blank"
>
Privacy Policy
</a>
</div>
<div
className="flex-grow-1"
/>
<a
className="px-3 text-dark font-weight-bold"
href="https://openedx.org/privacy-policy/"
target="blank"
aria-label="edX Home"
className="d-block"
href="http://localhost:18000"
>
Privacy Policy
<img
alt="Powered by Open edX"
src="https://edx-cdn.org/v3/default/logo-trademark.svg"
style={
Object {
"color": "white",
"maxHeight": 45,
}
}
/>
</a>
</div>
</footer>
Expand All @@ -133,50 +139,52 @@ exports[`<Footer /> renders correctly renders without a language selector in es
}
}
>
<a
aria-label="edX Home"
className="d-block"
href="http://localhost:18000"
>
<img
alt="Powered by Open edX"
src="https://edx-cdn.org/v3/default/logo-trademark.svg"
style={
Object {
"color": "white",
"maxHeight": 45,
}
}
/>
</a>
<div
className="flex-grow-1"
/>
<div
className="d-flex align-items-center justify-content-center flex-wrap"
className="container-xl py-2 d-flex align-items-center text-center"
>
<a
className="px-3 text-dark font-weight-bold"
href="https://openedx.org/terms-of-use/"
target="blank"
>
Terms of service
</a>
|
<a
className="px-3 text-dark font-weight-bold"
href="https://openedx.org/code-of-conduct/"
target="blank"
<div
className="d-flex align-items-center justify-content-center flex-wrap"
>
Code of conduct
</a>
|
<a
className="px-3 text-dark font-weight-bold"
href="https://openedx.org/terms-of-use/"
target="blank"
>
Terms of service
</a>
<a
className="px-3 text-dark font-weight-bold"
href="https://openedx.org/code-of-conduct/"
target="blank"
>
Code of conduct
</a>
<a
className="px-3 text-dark font-weight-bold"
href="https://openedx.org/privacy-policy/"
target="blank"
>
Privacy Policy
</a>
</div>
<div
className="flex-grow-1"
/>
<a
className="px-3 text-dark font-weight-bold"
href="https://openedx.org/privacy-policy/"
target="blank"
aria-label="edX Home"
className="d-block"
href="http://localhost:18000"
>
Privacy Policy
<img
alt="Powered by Open edX"
src="https://edx-cdn.org/v3/default/logo-trademark.svg"
style={
Object {
"color": "white",
"maxHeight": 45,
}
}
/>
</a>
</div>
</footer>
Expand Down

0 comments on commit d128a3d

Please sign in to comment.