This repository has been archived by the owner on Mar 5, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 91
(WIP) Fixes #856 new homepage #943
Closed
Closed
Changes from 20 commits
Commits
Show all changes
21 commits
Select commit
Hold shift + click to select a range
96cda43
(WIP) new homepage. missing blog section
mmmavis a9c909a
added blog section with hardcoded content
mmmavis 271e8fa
hooked up with google feed api, removed hardcoded data
mmmavis 9c4ce6e
small code cleanup and tweaks
mmmavis 280c772
Added moment.js & updated Twitter link
mmmavis bf01bcb
ui tweaks
mmmavis 08a6199
blog post excerpt, hero unit buttons
mmmavis ba352d3
fixed error thrown by tests
mmmavis b8988aa
forgot to include a module in package.json
mmmavis c55112e
code cleanup & update CHANAGE LOG
mmmavis 809171e
an attempt at refactoring blog feed loader code into a separate modul…
mmmavis 5152a87
Add stub-blog-feed-loader.js and use it for now.
toolness 86fb847
remove 'Data' suffix from state keys too.
toolness 7f591c6
Merge pull request #3 from toolness/decouple-new-homepage-from-googs
mmmavis 26068a0
some code cleanup & wrapped sections in <main> with <section> tags
mmmavis 57b7799
undo some css rules
mmmavis ea31f73
Revert "undo some css rules" - this fix doesn't work on larger screen…
mmmavis 991d62d
fixed moment date parsing warning
mmmavis 5f450ff
styling tweaks - long button text should be wrapped
mmmavis fb796d3
styling tweaks
mmmavis 95c4622
undo early css changes made to make the full width coloured section w…
mmmavis File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
var React = require('react'); | ||
var Router = require('react-router'); | ||
var Link = Router.Link; | ||
var ImageTag = require('./imagetag.jsx'); | ||
|
||
var LinkSwap = React.createClass({ | ||
render: function() { | ||
var classes = "btn btn-awsm"; | ||
// Swap out Link or a simple anchor depending on the props we have. | ||
if (this.props.linkTo) { | ||
return ( | ||
<Link to={this.props.linkTo} className={classes}> | ||
{this.props.children} | ||
</Link> | ||
) | ||
} | ||
return ( | ||
<a href={this.props.href} className={classes}> | ||
{this.props.children} | ||
</a> | ||
) | ||
} | ||
}); | ||
|
||
var IconButton = React.createClass({ | ||
propTypes: { | ||
linkTo: React.PropTypes.string, | ||
href: React.PropTypes.string, | ||
imgSrc: React.PropTypes.string.isRequired, | ||
imgSrc2X: React.PropTypes.string, | ||
head: React.PropTypes.string.isRequired, | ||
subhead: React.PropTypes.string | ||
}, | ||
render: function() { | ||
return ( | ||
<div className="icon-button"> | ||
<LinkSwap linkTo={this.props.linkTo} href={this.props.href}> | ||
<figure> | ||
<ImageTag className="image" src1x={this.props.imgSrc} src2x={this.props.imgSrc2x} | ||
alt="" height={50} /> | ||
<figcaption> | ||
<p className="link-text">{this.props.head}</p> | ||
</figcaption> | ||
</figure> | ||
</LinkSwap> | ||
</div> | ||
); | ||
} | ||
}); | ||
|
||
module.exports = IconButton; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
var React = require('react'); | ||
|
||
var IconButtons = React.createClass({ | ||
render: function() { | ||
return ( | ||
<div className="row icon-buttons"> | ||
{ | ||
React.Children.map(this.props.children, function(iconButton){ | ||
return( | ||
<div className="col-sm-4 col-md-4 col-lg-4">{iconButton}</div> | ||
) | ||
}) | ||
} | ||
</div> | ||
); | ||
} | ||
}); | ||
|
||
module.exports = IconButtons; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,5 @@ | ||
.btn { | ||
white-space: normal; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. button text should be wrapped. we shouldn't assume button text can always fit into one line, especially the site will be localized in the future. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. That's a good point, do you think you can actually add that as a comment in the code? |
||
&.btn-awsm { | ||
position: relative; | ||
width: 100%; | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hmm, unfortunately this seems to break other pages. For instance, in
/about/
, the heading "About Mozilla Learning Networks" bleeds all the way to the very edge of the screen on mobile, whereas there's normally 15px of padding being applied from bootstrap's.col-*
rules. 😢There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
arghhh, if
#content
does have left/right padding we won't be able to have a full width section with background colour (e.g., the quote section on the new homepage). I probably have to go through all the pages and make sure things are being wrapped within extra inner containers... 😭There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh, can you set negative margin to offset the padding? I actually did that with the hero unit for the original site, way back in February: https://github.com/mozilla/teach.webmaker.org/blob/8804e410ce96df5d2983fe829b6a81c335e94d74/styles.less#L23-L26
I'm not sure if that CSS has actually survived to present-day or not, hehe.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Argh, I tried the following on that full width coloured section
This leaves a gap to the right due to the negative offset on the left.
Adding
margin-right: -(@grid-gutter-width / 2);
simply just makes the section wider but the gap is still there, which introduces a horizontal scrollbar to the page.Also, this approach won't work on larger screen either as we can't specify how much offset we want to move. (see https://github.com/mmmavis/teach.webmaker.org/blob/develop/less/components/page.less#L21-L23)
😭