Skip to content

GitLab

S
scratch-www
Commit 39134448 authored by Technoboy10's avatar Technoboy10
Browse files
Options

footer mobile

parent 5b9cef8d
Show whitespace changes
Inline Side-by-side
Showing with 189 additions and 161 deletions
src/components/footer/www/footer.jsx
View file @ 39134448
...@@ -11,12 +11,50 @@ var Footer = React.createClass({ ...@@ -11,12 +11,50 @@ var Footer = React.createClass({
render: function () { render: function () {
return ( return (
<FooterBox> <FooterBox>
{this.props.layout == 'COLS4' || this.props.layout == 'COLS6' ? [
<div className="lists">
<dl>
<dd>
<a href="/about/">
<FormattedMessage id='general.aboutScratch' />
</a>
</dd>
<dd>
<a href="/jobs/">
<FormattedMessage id='general.jobs' />
</a>
</dd>
<dd>
<a href="/contact-us/">
<FormattedMessage id='general.contactUs' />
</a>
</dd>
</dl>
<dl>
<dd>
<a href="/terms_of_use/">
<FormattedMessage id='general.termsOfUse' />
</a>
</dd>
<dd>
<a href="/privacy_policy/">
<FormattedMessage id='general.privacyPolicy' />
</a>
</dd>
<dd>
<a href="/community_guidelines/">
<FormattedMessage id='general.guidelines' />
</a>
</dd>
</dl>
</div>
] : [
<div className="lists"> <div className="lists">
<dl> <dl>
<dt> <dt>
<FormattedMessage id='general.about' /> <FormattedMessage id='general.about' />
</dt> </dt>
<dd className="showMobile"> <dd>
<a href="/about/"> <a href="/about/">
<FormattedMessage id='general.aboutScratch' /> <FormattedMessage id='general.aboutScratch' />
</a> </a>
...@@ -41,7 +79,7 @@ var Footer = React.createClass({ ...@@ -41,7 +79,7 @@ var Footer = React.createClass({
<FormattedMessage id='general.credits' /> <FormattedMessage id='general.credits' />
</a> </a>
</dd> </dd>
<dd className="showMobile"> <dd>
<a href="/jobs/"> <a href="/jobs/">
<FormattedMessage id='general.jobs' /> <FormattedMessage id='general.jobs' />
</a> </a>
...@@ -52,12 +90,11 @@ var Footer = React.createClass({ ...@@ -52,12 +90,11 @@ var Footer = React.createClass({
</a> </a>
</dd> </dd>
</dl> </dl>
<dl> <dl>
<dt> <dt>
<FormattedMessage id='general.community' /> <FormattedMessage id='general.community' />
</dt> </dt>
<dd className="showMobile"> <dd>
<a href="/community_guidelines/"> <a href="/community_guidelines/">
<FormattedMessage id='general.guidelines' /> <FormattedMessage id='general.guidelines' />
</a> </a>
...@@ -98,7 +135,7 @@ var Footer = React.createClass({ ...@@ -98,7 +135,7 @@ var Footer = React.createClass({
<FormattedMessage id='general.offlineEditor' /> <FormattedMessage id='general.offlineEditor' />
</a> </a>
</dd> </dd>
<dd className="showMobile"> <dd>
<a href="/contact-us/"> <a href="/contact-us/">
<FormattedMessage id='general.contactUs' /> <FormattedMessage id='general.contactUs' />
</a> </a>
...@@ -114,12 +151,12 @@ var Footer = React.createClass({ ...@@ -114,12 +151,12 @@ var Footer = React.createClass({
<dt> <dt>
<FormattedMessage id='general.legal'/> <FormattedMessage id='general.legal'/>
</dt> </dt>
<dd className="showMobile"> <dd>
<a href="/terms_of_use/"> <a href="/terms_of_use/">
<FormattedMessage id='general.termsOfUse' /> <FormattedMessage id='general.termsOfUse' />
</a> </a>
</dd> </dd>
<dd className="showMobile"> <dd>
<a href="/privacy_policy/"> <a href="/privacy_policy/">
<FormattedMessage id='general.privacyPolicy' /> <FormattedMessage id='general.privacyPolicy' />
</a> </a>
...@@ -162,7 +199,7 @@ var Footer = React.createClass({ ...@@ -162,7 +199,7 @@ var Footer = React.createClass({
</dd> </dd>
</dl> </dl>
</div> </div>
]}
<LanguageChooser /> <LanguageChooser />
<div className="copyright"> <div className="copyright">
......
src/components/footer/www/footer.scss
View file @ 39134448
...@@ -7,11 +7,10 @@ ...@@ -7,11 +7,10 @@
text-align: center; text-align: center;
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: space-between; justify-content: space-around;
dl { dl {
display: inline-block; display: inline-block;
width: 130pt;
vertical-align: top; vertical-align: top;
text-align: left; text-align: left;
font-size: .8rem; font-size: .8rem;
...@@ -52,15 +51,7 @@ ...@@ -52,15 +51,7 @@
//4 and 6 columns //4 and 6 columns
@media only screen and (max-width: $tablet - 1) { @media only screen and (max-width: $tablet - 1) {
#footer .lists dd { #footer .lists {
&:not(.showMobile) { justify-content: space-around;
display: none;
}
}
#footer .lists dl {
dt {
display: none;
}
} }
} }
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