Making WordPress.org

Opened 10 years ago

Closed 9 years ago

#616 closed enhancement (fixed)

Make the WordCamp Coming Soon page responsive

Reported by: nvwd's profile nvwd Owned by:
Milestone: Priority: normal
Component: WordCamp Site & Plugins Keywords: has-patch
Cc:

Description

Add media queries to make the page behave well on all screen sizes.

Attachments (8)

616.patch (2.7 KB) - added by nvwd 10 years ago.
coming-soon-full.jpg (29.1 KB) - added by nvwd 10 years ago.
display width over 725px
coming-soon-600.jpg (23.1 KB) - added by nvwd 10 years ago.
display width 600px
coming-soon-550.jpg (27.1 KB) - added by nvwd 10 years ago.
display width 550px
coming-soon-320.jpg (24.3 KB) - added by nvwd 10 years ago.
display width 320px
616.2.patch (4.2 KB) - added by Kau-Boy 9 years ago.
wc-cologne-desktop.png (140.2 KB) - added by Kau-Boy 9 years ago.
wc-cologne-mobile.png (48.2 KB) - added by Kau-Boy 9 years ago.

Download all attachments as: .zip

Change History (18)

@nvwd
10 years ago

@nvwd
10 years ago

display width over 725px

@nvwd
10 years ago

display width 600px

@nvwd
10 years ago

display width 550px

@nvwd
10 years ago

display width 320px

This ticket was mentioned in IRC in #wordpress-meta by NowellVanHoesen. View the logs.


10 years ago

#2 @Kau-Boy
9 years ago

I was going to report the exact same issue. I also solved the issue with the non-responsiveness, but without using the calc() function which is unforntuately still not widely supported, especially amoung Android browsers.

Hope to see that patched soon.

@Kau-Boy
9 years ago

#3 @nvwd
9 years ago

@Kau-Boy

Good point. I do forget some people will use the native browser on their tablet instead of Google Chrome.

This ticket was mentioned in Slack in #community by iandunn. View the logs.


9 years ago

#5 @iandunn
9 years ago

In 1002:

WordCamp Coming Soon Page: Add basic responsive styles.

props nvwd, Kau-Boy
See #616

#6 @iandunn
9 years ago

It seemed like both patches had some unnecessary changes and were hard to interpret at times, but had pretty similar results, so r1002 is a stripped-down commit with the most important parts of both.

Now that the big problems are out of the way, I think it'll be easier to focus on any little problems that remain. Do either of you see any?

Keep in mind that general visual improvements are outside the scope of this ticket, they should go in #334. Before you upload a patch, make sure you review the output of svn diff to see if it's manageable. The patch should be the minimal set of changes required to achieve the goal, so things like flattening the indentation add a lot of noise and make it hard to see what's actually going on.

#7 @nvwd
9 years ago

Looks good to me.
Only thing that might be nice is to shrink the main padding ( #wccsp-container ) for widths below 480px.

I will stop 'fixing' code/css indentation which adds to diff bloat ;-P

#8 @iandunn
9 years ago

I kind of like the padding, but I can see how it might be nice to get rid of the .wccsp-box borders and their padding. That's getting more into design choices, though, so I think we should leave that for #334.

The indentation in 661.patch was actually fine, I was referring to the flattened hierarchy in 661.2.patch. I think matching the CSS hierarchy with the HTML hierarchy makes it easier to quickly scan a file and understand the structure without having to read it closely.

The CSS style guide doesn't mention it, but Core uses a flat hierarchy, so there's a good argument to be made for switching, but a change like that would be better for a separate ticket.

#9 follow-up: @Kau-Boy
9 years ago

The only issue I see is the width of the contact fields. They should expand to 100% at least on mobile devices (see the new screenshots). The rest look OK.

#10 in reply to: ↑ 9 @iandunn
9 years ago

  • Resolution set to fixed
  • Status changed from new to closed

Replying to Kau-Boy:

The only issue I see is the width of the contact fields. They should expand to 100% at least on mobile devices (see the new screenshots). The rest look OK.

Yeah, that's working in some browsers (e.g., Firefox), but not all. That's not a responsive issue, though, so I think we should fix it in #334.

Seems like this is good to close, but feel free to reopen if you spot anything else.

Note: See TracTickets for help on using tickets.