WordPress.org

Making WordPress.org

Opened 2 years ago

Closed 4 days ago

Last modified 4 days ago

#1173 closed defect (fixed)

'Showcase' Not Responsive

Reported by: atomicjack Owned by: coffee2code
Milestone: Priority: normal
Component: Showcase Keywords: ui-feedback has-patch needs-testing has-screenshots 2nd-opinion
Cc:

Description

It seems the Showcase page doesn't have responsive-support for the slider at the top of the page.

https://wordpress.org/showcase/

http://i.imgur.com/YJ5udp8.png

Attachments (5)

1173.diff (60.6 KB) - added by xkon 5 months ago.
Home, Single viewports
1173.2.diff (62.3 KB) - added by xkon 5 months ago.
Responsive Showcase theme
1173.3.diff (57.8 KB) - added by xkon 5 months ago.
Converted spaces to tabs.
1173.4.diff (57.6 KB) - added by xkon 5 months ago.
Updated to code standards
1173.5.diff (44.4 KB) - added by xkon 5 months ago.
Cleaned .diff

Download all attachments as: .zip

Change History (32)

#2 @melchoyce
2 years ago

  • Keywords needs-ui added

#3 @danetroup
2 years ago

I would like to try to tackle this one! Im a new contributor so bear with me.

This ticket was mentioned in Slack in #design by dane. View the logs.


2 years ago

This ticket was mentioned in Slack in #meta by ocean90. View the logs.


23 months ago

#6 @ocean90
23 months ago

@danetroup Are you still interested? If you need some guidance feel free to join the Slack team (make.wordpress.org/chat) and ping us in #meta.

#7 @danetroup
23 months ago

Yes. Let me revise the wireframe I made and get back to you. I think the idea was to leverage some functionality from the Theme Directory

#8 @karmatosed
7 months ago

@danetroup are you still interested in working on this? I would love to see if we can at least get this responsive. We do not need to change the design I feel at this point, just make what we have responsive.

#9 @xkon
5 months ago

@karmatosed if this is still open I can grab it as soon as I figure out how to get the showcase theme working locally with some dummy content if you like to have a correct .diff. Else I could just paste here some .css ( only ) changes depending the viewports.

I've been fiddling with live editing from Chrome dev tools and it's not a big deal with only some media queries.

Two questions though

1) What is going to happen to the hero slider on tablet/phone viewports ( image only? / text only ? / stacked information or hide it completely ).

2) What about the sidebars, especially on phone screens and when viewing the full showcase list.

Best regards,
Konstantinos

#10 @karmatosed
5 months ago

@xkon go for it, no need to ask as even having more than one person approaching this can result in perspective. Looking forward to what you come up with.

#11 @xkon
5 months ago

I've already updated the cycle ( slider ) script to cycle2, now it supports autoheight also for those long excerpts that don't fit so the Learn More button was getting hidden and I'm starting to work my way down the page for the lists.

I'm trying to stay true to the original concept and css styles although in the future it would be wise to make a total revamp. It is a bit hard for me though as I have plugins missing etc to rebuild everything so at some point I'll work back and forth with otto42 on this I guess.

I still need an input and ideas of what's going to happen with the Slideshow and the sidebars though. I don't know if you want me to hide them completely from some viewport & down etc.

My viewports are cutting off at 992px / 768px / 576 px respectively in case this helps.

I have some ideas of my own as well for example the sidebar could become a fly-in menu as well triggered by a hamburger and other little stuff like that. So feel free to give up any ideas possible to try and avoid recycling code as it is already old and I'm trying to keep it intact as I don't know if something else breaks along the way :D .

I'll keep you posted for any changes and hopefully next time with screenshots as well :> .

Best regards,
Konstantinos

This ticket was mentioned in Slack in #accessibility by xkon. View the logs.


5 months ago

#13 @xkon
5 months ago

I'm uploading my .diff up to now 1173.diff ( this way I'll have a backup as well ).

In this link https://cloudup.com/igYwK--tzex you can see the previews for the Home page and the Single item page ( screen / tablet / phone viewports + the sidebar-menu ). I think there's only the Tag / Flavor / Submit pages left to do but they will be easy now as I've managed the major aspects.

If I'm forgetting anything please do tell so I can add it straight away.

As I'm not aware of the old css and what is used here and there again I tried to not change much, at least not the classes in the items so I've added some new ones wherever needed to bypass the old stuff. Although It would be nicer to just scratch everything and re-do the whole thing. This though is an easy solution to have something done quickly and get a responsive theme and then we can work without 'stress' on the full re-work if you like.

A couple of days more as I'm busy at work as well and everything will be ready hopefully.

Best regards,
Konstantinos

@xkon
5 months ago

Home, Single viewports

#14 @xkon
5 months ago

  • Keywords has-patch needs-testing has-screenshots 2nd-opinion added; needs-patch needs-ui removed

Okay! I think it's done. Of course it will need some good testing as I had to change quite some stuff to make it work locally and I reverted them back ( for example to load my local css and not the web, paginations where not working locally so I added them manually just for testing etc ) so whoever is going to test this has to understand the whole meta repo thing and know how to solve php errors here and there if it gives him any. I only played with the html + css nothing else.

Diff 1173.2.diff converts the current Showcase theme to be responsive. I tested it on Chrome / Firefox (latest) and IE11 and had no issues.

Tell me if I missed anything so I can add it as I'm not fully accustomed with the website yet and I might missed a link for a page.

Best regards,
Konstantinos

@xkon
5 months ago

Responsive Showcase theme

This ticket was mentioned in Slack in #meta by xkon. View the logs.


5 months ago

#16 @SergeyBiryukov
5 months ago

@xkon: It looks like 1173.2.diff uses spaces instead of tabs. Could you refresh the patch using tabs to match WordPress coding standards?

#17 follow-up: @xkon
5 months ago

@SergeyBiryukov , I never use spaces. I only work with tabs to be honest so no idea what happened there might be something going on with TortoiseSVN when it read the files, I still have my editor open and everything is tabbed.

I'll re-open the files and make an extra .diff sure.

Best regards,
Konstantinos

#18 in reply to: ↑ 17 @SergeyBiryukov
5 months ago

Replying to xkon:

might be something going on with TortoiseSVN when it read the files, I still have my editor open and everything is tabbed.

The editor might have an option to convert tabs to spaces on saving. If that's the case, it would need to be disabled.

It's not just here, https://core.trac.wordpress.org/attachment/ticket/38085/38085.5.diff had the same issue.

@xkon
5 months ago

Converted spaces to tabs.

@xkon
5 months ago

Updated to code standards

#19 follow-up: @xkon
5 months ago

After re-calibrating my editor ( sorry about that ) and parsing through my changed files I updated the .diff ( 1173.4.diff ) again to meet our Coding Standards.

@SergeyBiryukov I think everything is fine now. Some 1 line edits that are on archive.php are simply tab beautifications. Thank you for informing me to fix them.

( I will probably go through all my tickets and diffs and see what has been submitted with false styling )

Best regards,
Konstantinos

Last edited 5 months ago by xkon (previous) (diff)

#20 in reply to: ↑ 19 ; follow-up: @SergeyBiryukov
5 months ago

Replying to xkon:

Some 1 line edits that are on archive.php are simply tab beautifications.

It's still better to avoid formatting changes unrelated to the issue at hand, makes it easier to review the patch :)

Looks like 1173.4.diff reorganizes a lot of CSS rules just to put them in alphabetical order. I'd suggest only touching the styles that are necessary to fix responsiveness and avoid introducing new conventions if possible.

In WordPress core logical ordering is preferred to an alphabetical one, see Property Ordering.

#21 in reply to: ↑ 20 @xkon
5 months ago

Replying to SergeyBiryukov:

In WordPress core logical ordering is preferred to an alphabetical one, see Property Ordering.

I had viewed the css handbook and saw that there is the alphabetical order mentioned so being my preferred way as well I thought there wouldn't be an issue.

I guess it's Notepad++ from now on only.

Back to the main issue, would it be easier if I just did the whole thing again from scratch ? Or that wouldn't matter at this point?

Best regards,
Konstantinos

#22 @melchoyce
5 months ago

Hey @xkon, would you mind also including some screenshots of your patches? Thanks for all the work you're doing on this!

@xkon
5 months ago

Cleaned .diff

#23 @xkon
5 months ago

I went through all the code again and re-did the css especially as @SergeyBiryukov suggested without re-ordering it so 1173.5.diff is the end result, hopefully without me forgetting anything after all these re-do's.

I guess it's ready for a proper review now :) .

Screenshots here ( don't mind the font that's my settings it will be fine on your end. ) :
https://cloudup.com/igYwK--tzex

Best regards,
Konstantinos

#24 @SergeyBiryukov
3 months ago

  • Component changed from General to Showcase

#25 @LiamMcArthur
3 weeks ago

#3291 was marked as a duplicate.

#26 @coffee2code
4 days ago

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

In 6273:

W.org Showcase: Make theme responsive.

  • Changes left sidebar to hamburger menu slide-out for smaller viewports.
  • Removes slider for smaller viewports.
  • Updates jQuery Cycle slideshow library to Cycle2.
  • Various styling tweaks for responsiveness.

Props xkon, coffee2code.
Fixes #1173.

#27 @coffee2code
4 days ago

In 6274:

W.org Showcase: Properly set script/stylesheet versions when enqueueing.

See #1173.

Note: See TracTickets for help on using tickets.