Skip to content

Add link to page #483

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jun 1, 2016
+31 −0
Merged

Add link to page #483

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3aa34b5
Add link to page
muffinresearch May 31, 2016
fe40c9b
Use ms for transition
muffinresearch Jun 1, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/disco/containers/DiscoPane.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ class DiscoPane extends React.Component {
</div>
</header>
{results.map((item, i) => <Addon {...camelCaseProps(item)} key={i} />)}
<a className="cta" href="https://addons.mozilla.org/">{i18n.gettext('See more add-ons!')}</a>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wrote this up yesterday but forget to submit it.

I'm starting to get concerned about our CSS. We are reusing some classes like and cta looks like it will probably get reused without whoever uses it knowing this style exists. We have some styles on just header and header h1 too which seems fragile. There are also some styles that are nested 4 levels deep that could likely be reduced to 1 or 2 if we had more specific class names.

I know we discussed using some sort of methodology before and didn't settle on anything but I think we should try and come up with something. London might be a good place to discuss this.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we can enforce the system with tooling that'd be great too.

Copy link
Contributor Author

@muffinresearch muffinresearch Jun 1, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Definitely up for discussing this in London and coming up with a plan - might be better to file an issue with the details you want to cover - as this buried in a merged PR is likely to get lost.

I'll see about de-nesting in the RTL updates.

</div>
);
}
Expand Down
1 change: 1 addition & 0 deletions src/disco/css/Addon.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ $addon-padding: 20px;
flex-direction: row;
line-height: 1.5;
margin-top: 20px;
width: 100%;

&.theme {
display: block;
Expand Down
27 changes: 27 additions & 0 deletions src/disco/css/App.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
@import "~normalize.css";
@import "~core/css/inc/lib";
@import "~core/css/inc/mixins";
@import "~disco/css/inc/vars";


Expand Down Expand Up @@ -28,6 +29,13 @@ img {
padding: 50px 20px;
}

#app-view {
display: flex;
align-items: center;
flex-direction: column;
}


header {
border-bottom: 1px solid $header-border-color;
margin-bottom: 40px;
Expand All @@ -43,6 +51,25 @@ header {
}
}

.cta {
align-self: center;
padding: 1em 1.5em;
margin: 30px 0;
background: $cta-background-color;
color: #fff;
text-decoration: none;
font-size: 13px;
transition: background 200ms;

&:hover {
background: lighten($cta-background-color, 7);
}

&:focus {
@include focus();
}
}

.disco-content {
color: $header-copy-font-color;
font-size: 14px;
Expand Down
2 changes: 2 additions & 0 deletions src/disco/css/inc/vars.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,5 @@ $secondary-font-color: #6a6a6a;

$header-copy-font-color: #414141;
$header-border-color: #b1b1b1;

$cta-background-color: #0083FA;