*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?
[Define New Theme] 7. Allow for responsive removal of content
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.
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.
- DavidIQ
- 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
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...hanakin wrote:Navigation
To much needs done here its all over the place where to even begin!
Re: [Define New Theme] 7. Allow for responsive removal of content
I have one idea regarding the navigation
How about removing the View your posts link and then:
How about removing the View your posts link and then:
- Rely on either the Show your posts at UCP or Search user’s posts at viewprofile.
- Add "Total posts: x | Show your topics" and statistics at the UCP front page.
- Add "Search user’s topics" and statistics at the profile page.
Re: [Define New Theme] 7. Allow for responsive removal of content
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.DavidIQ wrote: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...hanakin wrote:Navigation
To much needs done here its all over the place where to even begin!
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; }
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.