Skip to content

Commit

Permalink
Merge pull request #1464 from muffinresearch/fix-homepage-list-text
Browse files Browse the repository at this point in the history 
Refactor homepage cat CSS and reduce nesting
  • Loading branch information
@muffinresearch
muffinresearch authored Dec 13, 2016
2 parents 89a2ad4 + ec8120d commit e5eed22
Show file tree
Hide file tree
Showing 2 changed files with 72 additions and 58 deletions.
52 changes: 38 additions & 14 deletions src/amo/containers/Home.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,26 +16,50 @@ export class HomePageBase extends React.Component {
return (
<div className="HomePage">
<h2 className="HomePage-subheading">{i18n.gettext('What do you want Firefox to do?')}</h2>
<ul className="HomePage-cat-list">
<li className="HomePage-block-ads"><Link to="#block-ads"><span>{i18n.gettext('Block ads')}</span></Link></li>
<li className="HomePage-screenshot"><Link to="#screenshot"><span>{i18n.gettext('Screenshot')}</span></Link></li>
<li className="HomePage-save-stuff"><Link to="#save-stuff"><span>{i18n.gettext('Save stuff')}</span></Link></li>
<li className="HomePage-shop-online"><Link to="#shop-online"><span>{i18n.gettext('Shop online')}</span></Link></li>
<li className="HomePage-be-social"><Link to="#share-stuff"><span>{i18n.gettext('Be social')}</span></Link></li>
<li className="HomePage-share-stuff"><Link to="#share-stuff"><span>{i18n.gettext('Share stuff')}</span></Link></li>
<ul className="HomePage-category-list">
<li className="HomePage-category-li HomePage-block-ads">
<Link to="#block-ads"><span>{i18n.gettext('Block ads')}</span></Link>
</li>
<li className="HomePage-category-li HomePage-screenshot">
<Link to="#screenshot"><span>{i18n.gettext('Screenshot')}</span></Link>
</li>
<li className="HomePage-category-li HomePage-save-stuff">
<Link to="#save-stuff"><span>{i18n.gettext('Save stuff')}</span></Link>
</li>
<li className="HomePage-category-li HomePage-shop-online">
<Link to="#shop-online"><span>{i18n.gettext('Shop online')}</span></Link>
</li>
<li className="HomePage-category-li HomePage-be-social">
<Link to="#share-stuff"><span>{i18n.gettext('Be social')}</span></Link>
</li>
<li className="HomePage-category-li HomePage-share-stuff">
<Link to="#share-stuff"><span>{i18n.gettext('Share stuff')}</span></Link>
</li>
</ul>
<Link className="HomePage-extensions-link" to="/extensions/">
{i18n.gettext('Browse all extensions')}
</Link>

<h2 className="HomePage-subheading">{i18n.gettext('How do you want Firefox to look?')}</h2>
<ul className="HomePage-cat-list">
<li className="HomePage-wild"><Link to="#wild"><span>{i18n.gettext('Wild')}</span></Link></li>
<li className="HomePage-abstract"><Link to="#abstract"><span>{i18n.gettext('Abstract')}</span></Link></li>
<li className="HomePage-fashionable"><Link to="#fashionable"><span>{i18n.gettext('Fashionable')}</span></Link></li>
<li className="HomePage-scenic"><Link to="#scenic"><span>{i18n.gettext('Scenic')}</span></Link></li>
<li className="HomePage-sporty"><Link to="#sporty"><span>{i18n.gettext('Sporty')}</span></Link></li>
<li className="HomePage-mystical"><Link to="#mystical"><span>{i18n.gettext('Mystical')}</span></Link></li>
<ul className="HomePage-category-list">
<li className="HomePage-category-li HomePage-wild">
<Link to="#wild"><span>{i18n.gettext('Wild')}</span></Link>
</li>
<li className="HomePage-category-li HomePage-abstract">
<Link to="#abstract"><span>{i18n.gettext('Abstract')}</span></Link>
</li>
<li className="HomePage-category-li HomePage-fashionable">
<Link to="#fashionable"><span>{i18n.gettext('Fashionable')}</span></Link>
</li>
<li className="HomePage-category-li HomePage-scenic">
<Link to="#scenic"><span>{i18n.gettext('Scenic')}</span></Link>
</li>
<li className="HomePage-category-li HomePage-sporty">
<Link to="#sporty"><span>{i18n.gettext('Sporty')}</span></Link>
</li>
<li className="HomePage-category-li HomePage-mystical">
<Link to="#mystical"><span>{i18n.gettext('Mystical')}</span></Link>
</li>
</ul>
<Link className="HomePage-themes-link" to="/themes/">
{i18n.gettext('Browse all themes')}
Expand Down
78 changes: 34 additions & 44 deletions src/amo/css/Home.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,51 +8,40 @@
text-align: center;
}

.HomePage-cat-list {
.HomePage-category-list {
display: flex;
flex-wrap: wrap;
overflow: auto;
padding: 0;
width: 100%;
}

li {
background-color: #fff;
background-size: 50% 50%;
border-radius: 6px;
display: block;
flex-grow: 1;
list-style-type: none;
margin: 5px;
overflow: auto;
padding: 0;
position: relative;
text-align: center;
width: 30%;

&::before {
content: '';
display: block;
padding-bottom: 100%;
}
}
.HomePage-category-li {
background-color: $base-color;
background-size: 50% auto;
background-position: 50% 35%;
background-repeat: no-repeat;
border-radius: 6px;
display: block;
flex-grow: 1;
list-style-type: none;
margin: 5px;
overflow: auto;
padding: 0;
position: relative;
text-align: center;
width: 30%;

a:link {
bottom: 0;
font-size: 10px;
left: 0;
position: absolute;
right: 0;
text-decoration: none;
top: 0;
padding-top: 70%;
display: block;
}

span {
bottom: 10px;
display: block;
left: 0;
padding: 0 10px;
position: absolute;
right: 0;
padding: 5px 10px;
text-align: center;
text-decoration: inherit;
}
Expand All @@ -66,7 +55,7 @@
.HomePage-extensions-link:link,
.HomePage-themes-link:link {
align-items: center;
background: #fff;
background: $base-color;
border-radius: 6px;
display: flex;
font-size: 10px;
Expand Down Expand Up @@ -103,49 +92,50 @@
}

.HomePage-block-ads {
background: url('../img/home/block-ads.svg') no-repeat 50% 35%;
background-image: url('../img/home/block-ads.svg');
}

.HomePage-screenshot {
background: url('../img/home/screenshot.svg') no-repeat 50% 35%;
background-image: url('../img/home/screenshot.svg');
}

.HomePage-save-stuff {
background: url('../img/home/save-stuff.svg') no-repeat 50% 35%;
background-image: url('../img/home/save-stuff.svg');
background-size: 40% auto;
}

.HomePage-shop-online {
background: url('../img/home/shop-online.svg') no-repeat 50% 35%;
background-image: url('../img/home/shop-online.svg');
}

.HomePage-be-social {
background: url('../img/home/be-social.svg') no-repeat 50% 35%;
background-image: url('../img/home/be-social.svg');
}

.HomePage-share-stuff {
background: url('../img/home/share-stuff.svg') no-repeat 50% 35%;
background-image: url('../img/home/share-stuff.svg');
}

.HomePage-wild {
background: url('../img/home/wild.svg') no-repeat 50% 35%;
background-image: url('../img/home/wild.svg');
}

.HomePage-abstract {
background: url('../img/home/abstract.svg') no-repeat 50% 35%;
background-image: url('../img/home/abstract.svg');
}

.HomePage-fashionable {
background: url('../img/home/fashion.svg') no-repeat 50% 35%;
background-image: url('../img/home/fashion.svg');
}

.HomePage-scenic {
background: url('../img/home/scenic.svg') no-repeat 50% 35%;
background-image: url('../img/home/scenic.svg');
}

.HomePage-sporty {
background: url('../img/home/sporty.svg') no-repeat 50% 35%;
background-image: url('../img/home/sporty.svg');
}

.HomePage-mystical {
background: url('../img/home/mystical.svg') no-repeat 50% 35%;
background-image: url('../img/home/mystical.svg');
}

0 comments on commit e5eed22

Please sign in to comment.