mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2025-02-17 00:21:20 -05:00
experiment with removing content display from scss
This commit is contained in:
Technoboy10
parent
daf803d4a3
commit
a8b26b1a1c
4 changed files with 30 additions and 37 deletions
|
|
@ -3,7 +3,9 @@ var FormattedMessage = require('react-intl').FormattedMessage;
|
|||
|
||||
var FooterBox = require('../container/footer.jsx');
|
||||
var LanguageChooser = require('../../languagechooser/languagechooser.jsx');
|
||||
|
||||
var MediaQuery = require('react-responsive');
|
||||
var frameless = require('../../../lib/frameless');
|
||||
|
||||
require('./footer.scss');
|
||||
|
||||
|
|
@ -12,7 +14,7 @@ var Footer = React.createClass({
|
|||
render: function () {
|
||||
return (
|
||||
<FooterBox>
|
||||
<MediaQuery maxWidth={639}>
|
||||
<MediaQuery maxWidth={frameless.tablet - 1}>
|
||||
<div className="lists">
|
||||
<dl>
|
||||
<dd>
|
||||
|
|
@ -50,7 +52,7 @@ var Footer = React.createClass({
|
|||
</dl>
|
||||
</div>
|
||||
</MediaQuery>
|
||||
<MediaQuery minWidth={640}>
|
||||
<MediaQuery minWidth={frameless.tablet}>
|
||||
<div className="lists">
|
||||
<dl>
|
||||
<dt>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,9 @@ var Login = require('../../login/login.jsx');
|
|||
var Modal = require('../../modal/modal.jsx');
|
||||
var NavigationBox = require('../container/navigation.jsx');
|
||||
var Registration = require('../../registration/registration.jsx');
|
||||
|
||||
var MediaQuery = require('react-responsive');
|
||||
var frameless = require('../../../lib/frameless');
|
||||
|
||||
require('./navigation.scss');
|
||||
|
||||
|
|
@ -190,33 +192,33 @@ var Navigation = React.createClass({
|
|||
<ul>
|
||||
<li className="logo"><a href="/" aria-label="Scratch"></a></li>
|
||||
|
||||
<li className="link create">
|
||||
<MediaQuery minWidth={frameless.mobile} component="li" className="link create">
|
||||
<a href={createLink}>
|
||||
<FormattedMessage id="general.create" />
|
||||
</a>
|
||||
</li>
|
||||
<li className="link explore">
|
||||
</MediaQuery>
|
||||
<MediaQuery minWidth={frameless.desktop} component="li" className="link explore">
|
||||
<a href="/explore/projects/all">
|
||||
<FormattedMessage id="general.explore" />
|
||||
</a>
|
||||
</li>
|
||||
<li className="link discuss">
|
||||
</MediaQuery>
|
||||
<MediaQuery minWidth={frameless.tablet} component="li" className="link discuss">
|
||||
<a href="/discuss">
|
||||
<FormattedMessage id="general.discuss" />
|
||||
</a>
|
||||
</li>
|
||||
</MediaQuery>
|
||||
<li className="link about">
|
||||
<a href="/about">
|
||||
<FormattedMessage id="general.about" />
|
||||
</a>
|
||||
</li>
|
||||
<li className="link help">
|
||||
<MediaQuery minWidth={frameless.mobile} component="li" className="link help">
|
||||
<a href="/help">
|
||||
<FormattedMessage id="general.help" />
|
||||
</a>
|
||||
</li>
|
||||
</MediaQuery>
|
||||
|
||||
<li className="search">
|
||||
<MediaQuery minWidth={frameless.desktop} component="li" className="search">
|
||||
<form action="/search/projects" method="get">
|
||||
<Button type="submit" className="btn-search" />
|
||||
<Input type="text"
|
||||
|
|
@ -225,7 +227,7 @@ var Navigation = React.createClass({
|
|||
name="q"
|
||||
noformsy />
|
||||
</form>
|
||||
</li>
|
||||
</MediaQuery>
|
||||
{this.props.session.status === sessionActions.Status.FETCHED ? (
|
||||
this.props.session.session.user ? [
|
||||
<li className="link right messages" key="messages">
|
||||
|
|
@ -237,19 +239,20 @@ var Navigation = React.createClass({
|
|||
<FormattedMessage id="general.messages" />
|
||||
</a>
|
||||
</li>,
|
||||
<li className="link right mystuff" key="mystuff">
|
||||
<MediaQuery minWidth={frameless.desktop}
|
||||
component="li" className="link right mystuff" key="mystuff">
|
||||
<a
|
||||
href="/mystuff/"
|
||||
title={formatMessage({id: 'general.myStuff'})}>
|
||||
|
||||
<FormattedMessage id="general.myStuff" />
|
||||
</a>
|
||||
</li>,
|
||||
</MediaQuery>,
|
||||
<li className="link right account-nav" key="account-nav">
|
||||
<a className={dropdownClasses}
|
||||
href="#" onClick={this.handleAccountNavClick}>
|
||||
<Avatar src={this.props.session.session.user.thumbnailUrl} alt="" />
|
||||
<MediaQuery minWidth={640} component='span'>
|
||||
<MediaQuery minWidth={frameless.tablet} component='span'>
|
||||
{this.props.session.session.user.username}
|
||||
</MediaQuery>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -226,21 +226,13 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
//4 columns
|
||||
@media only screen and (max-width: $mobile - 1) {
|
||||
#navigation .inner {
|
||||
width: $cols4;
|
||||
|
||||
> ul > li {
|
||||
&.create,
|
||||
&.explore,
|
||||
&.discuss,
|
||||
&.help,
|
||||
&.search,
|
||||
&.mystuff {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.login-item {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
|
@ -269,13 +261,6 @@
|
|||
width: $cols6;
|
||||
|
||||
> ul > li {
|
||||
&.explore,
|
||||
&.discuss,
|
||||
&.search,
|
||||
&.mystuff {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.login-item {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
|
@ -303,12 +288,6 @@
|
|||
width: $cols8;
|
||||
|
||||
> ul > li {
|
||||
&.explore,
|
||||
&.search,
|
||||
&.mystuff {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.login-item,
|
||||
&.account-nav {
|
||||
margin-left: 0;
|
||||
|
|
|
|||
9
src/lib/frameless.js
Normal file
9
src/lib/frameless.js
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
/* This file contains breakpoints from _frameless.scss, to be used in MediaQuery elements.
|
||||
* All units are in px, as per _frameless.scss and the MediaQuery default arguments.
|
||||
*/
|
||||
|
||||
module.exports = {
|
||||
desktop: 942,
|
||||
tablet: 640,
|
||||
mobile: 480
|
||||
};
|
||||
Loading…
Reference in a new issue