Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Add responsive download page #5

Closed
wants to merge 1 commit into from

4 participants

@tallowen
Owner

Adjust css to allow the download buttons to collapse for smaller screen sizes.

This works to a degree right now. The bottom footers don't seem to be too happy to be compressed - are they specific to this site? They really need to be in a more mobile friendly format.

@tofumatt tofumatt commented on the diff
css/nightly.css
((7 lines not shown))
+ .build-group h3, .build-group ul {
+ width: auto;
+ }
+
+ #nightly-title {
+ background: url(../img/nightly-header-bg.png) -65px -75px no-repeat;
+ padding: 65px 0 55px;
+ }
+
+ .build-group h3, .build-group ul {
+ float: none;
+ overflow: auto;
+ }
+
+ .build-group h3 {
+ height: auto !important;
@tofumatt Owner

!important, eh? Was that my fault?

@tallowen Owner

Its to override the base style.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@tofumatt tofumatt commented on the diff
css/nightly.css
((8 lines not shown))
+ width: auto;
+ }
+
+ #nightly-title {
+ background: url(../img/nightly-header-bg.png) -65px -75px no-repeat;
+ padding: 65px 0 55px;
+ }
+
+ .build-group h3, .build-group ul {
+ float: none;
+ overflow: auto;
+ }
+
+ .build-group h3 {
+ height: auto !important;
+ margin-right: 0;
@tofumatt Owner

Any reason this isn't just in a margin declaration?

@tallowen Owner

I didn't want to affect the the base margin styles for top/left/bottom. Is there a better way to do this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@tofumatt
Owner

The bottom things are taken from django-moz-header... I'm not sure if there's a responsive version. @potch? @Osmose?

@Osmose
Owner

I don't think so. The footer in django-moz-header is rather outdated.

Isn't someone working on a One Mozilla Bootstrap of some kind? Perhaps they have a reusable responsive footer?

@tofumatt
Owner

Maybe @craigcook knows if the one-mozilla footer is responsive?

@craigcook
Owner

The One Mozilla/Sandstone footer is indeed responsive. You can swipe it from bedrock:

Template: https://github.com/mozilla/bedrock/blob/master/templates/base-resp.html#L123
Relevant CSS: https://github.com/mozilla/bedrock/blob/master/media/css/sandstone/sandstone-resp.less#L584

That's a LESS file so it references some variables that you'll have to follow back to their source in https://github.com/mozilla/bedrock/blob/master/media/css/sandstone/variables-resp.less

We're working on a style guide for Mozilla branding and from that I plan to develop a more portable framework, a la bootstrap, to provide a few basic templates and layout variations, common markup patterns, and all the global styles for forms and buttons etc, to make this kind of thing much easier. It just hasn't happened yet.

@tofumatt
Owner
@tallowen tallowen Add responsive download page
Adjust css to allow the download buttons to collapse for smaller screen sizes.
b015c90
@tallowen
Owner

Sorry I didn't notice this thread for such a long time! @craigcook has there been any progress in breaking that code out into something that more sites can consume? If not, I'll try to turn that footer into something useable in this project. What about the header?

@tallowen tallowen closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Oct 14, 2012
  1. @tallowen

    Add responsive download page

    tallowen authored
    Adjust css to allow the download buttons to collapse for smaller screen sizes.
This page is out of date. Refresh to see the latest.
Showing with 23 additions and 1 deletion.
  1. +23 −0 css/nightly.css
  2. +0 −1  css/template.css
View
23 css/nightly.css
@@ -328,3 +328,26 @@ body {
text-decoration: underline;
text-shadow: #404040 1px 1px 1px;
}
+
+@media (max-width:960px) {
+ #nightly-title, #nightly-links, #builds, #sub-footer #sub-footer-contents,
+ .build-group h3, .build-group ul {
+ width: auto;
+ }
+
+ #nightly-title {
+ background: url(../img/nightly-header-bg.png) -65px -75px no-repeat;
+ padding: 65px 0 55px;
+ }
+
+ .build-group h3, .build-group ul {
+ float: none;
+ overflow: auto;
+ }
+
+ .build-group h3 {
+ height: auto !important;
@tofumatt Owner

!important, eh? Was that my fault?

@tallowen Owner

Its to override the base style.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ margin-right: 0;
@tofumatt Owner

Any reason this isn't just in a margin declaration?

@tallowen Owner

I didn't want to affect the the base margin styles for top/left/bottom. Is there a better way to do this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ margin-bottom: 2px;
+ }
+}
View
1  css/template.css
@@ -4,7 +4,6 @@ body {
text-align: center;
font-family: Georgia, serif;
margin: 0;
- min-width: 990px;
padding: 0;
}
Something went wrong with that request. Please try again.