'Showcase' Not Responsive

[atomicjack]

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

​https://wordpress.org/showcase/

[samuelsidler]

For anyone interested in working on this, the code is here: https://meta.trac.wordpress.org/browser/sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-showcase

[danetroup]

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

[ocean90]

@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.

[danetroup]

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

[karmatosed]

@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.

[xkon]

@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

[karmatosed]

@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.

[xkon]

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

[xkon]

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]

Home, Single viewports

[xkon]

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]

Responsive Showcase theme

[SergeyBiryukov]

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

[xkon]

@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

[SergeyBiryukov]

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]

Converted spaces to tabs.

[xkon]

Updated to code standards

[xkon]

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

[SergeyBiryukov]

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.

[xkon]

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

[melchoyce]

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

[xkon]

Cleaned .diff

[xkon]

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

[LiamMcArthur]

#3291 was marked as a duplicate.

[coffee2code]

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.

[coffee2code]

In 6274:

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

See #1173.