[Define New Theme] 7. Allow for responsive removal of content

General discussion of development ideas and the approaches taken in the 3.x branch of phpBB. The current feature release of phpBB 3 is 3.3/Proteus.
Forum rules
Please do not post support questions regarding installing, updating, or upgrading phpBB 3.3.x. If you need support for phpBB 3.3.x please visit the 3.3.x Support Forum on phpbb.com.

If you have questions regarding writing extensions please post in Extension Writers Discussion to receive proper guidance from our staff and community.
Post Reply
User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

[Define New Theme] 7. Allow for responsive removal of content

Post by hanakin »

*Note This is part 7 of a series found here

Going along with the last topic of mobile first. Their are a lot of elements currently in prosilver that may not be necessary or are not properly designed for all devices. Some elements can flat out be removed from view on certain devices, where as others can simply be re-design/coded to work better responsively. Then their are some elements that flat out need to function different on every devices.

Some examples but definitely not all are as follows.

Breadcrumbs
on mobile devices simply removing wrap-text is not the best approach.
A better approach might be one of these
Dropdown
Last Only

Navigation
To much needs done here its all over the place where to even begin!

Stats
We really do not touch this section at all. Is their something we can do about it?

These are just some examples of the discussions and design decisions that need to happen and in order to allow for this we need the utilities and functionality to allow for in the css/html

classes that allow the content to be visible on a certain breakpoint or equally hidden on certain ones.

thoughts and suggestions on how best to handle this?

Should we have classes that we apply in the template itself. or do we have some sort of mixin or something that we use in the css for each situation?
Donations welcome via Paypal Image

User avatar
DavidIQ
Customisations Team Leader
Customisations Team Leader
Posts: 1903
Joined: Thu Mar 02, 2006 4:29 pm
Location: Earth
Contact:

Re: [Define New Theme] 7. Allow for responsive removal of content

Post by DavidIQ »

hanakin wrote:Navigation
To much needs done here its all over the place where to even begin!
Well you started this topic so you should explain what it is that's wrong with navigation that is not related to breadcrumbs. I personally have no idea what you're referring to with this point. Maybe it's because I've been using phpBB for many years now but don't really see a problem with the navigation...
Image

User avatar
Louis7777
Registered User
Posts: 394
Joined: Fri Apr 04, 2014 12:32 am

Re: [Define New Theme] 7. Allow for responsive removal of content

Post by Louis7777 »

I have one idea regarding the navigation :P

How about removing the View your posts link and then:
  1. Rely on either the Show your posts at UCP or Search user’s posts at viewprofile.
  2. Add "Total posts: x | Show your topics" and statistics at the UCP front page.
  3. Add "Search user’s topics" and statistics at the profile page.
In my opinion, viewing our topics is now more useful than viewing our posts. Why would we need to view our posts very often? We now have notifications to remind us of the important stuff. We have three ways of viewing our posts - let's remove the one that is on every page?

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: [Define New Theme] 7. Allow for responsive removal of content

Post by hanakin »

DavidIQ wrote:
hanakin wrote:Navigation
To much needs done here its all over the place where to even begin!
Well you started this topic so you should explain what it is that's wrong with navigation that is not related to breadcrumbs. I personally have no idea what you're referring to with this point. Maybe it's because I've been using phpBB for many years now but don't really see a problem with the navigation...
I am not talking specifics which is why I did not elaborate as how to handle it is a design aspect. What I am getting at is how to handle responsive content. I am sorry if I was unclear I had trouble putting it into words.

I am referring to how to handle situations such as these from a utility class stand point in the css.

currently we have these utility classes

Code: Select all

.responsive-hide { display: none !important; }
.responsive-show { display: block !important; }
.responsive-show-inline { display: inline !important; }
.responsive-show-inline-block { display: inline-block !important; }
what we should have if this is the approach we are going for and I am not saying that it should be handled with classes is something that targets specific breakpoints akin to the way bootstrap handles them ie:

visible-s
hidden-s

visible-m
hidden-m

visible-l
hidden-l

visible-w
hidden-w

The second part of it is if we should handle this via classes or via less mixins on the element selectors ie given the example of a breadcrumb for mobile we would have a separate element all together for the dropdown and have to hide the main version so.

breadcrumb
breadcrumb-mobile

in this case we would use a media query to add the hidden properties to breadcrumb on mobile and the visible only on mobile properties to breadcrumb-mobile thus preventing the addition of more selectors in the html but requiring slightly larger css files

I am not saying that this is how the breadcrumb should be handled this is just an example to illustrate my point.
Donations welcome via Paypal Image

Post Reply