TP-Docs
HTML5 Icon HTML5 Icon HTML5 Icon
TP on Social Media

Recent

Welcome to TinyPortal. Please login or sign up.

March 29, 2024, 08:32:59 AM

Login with username, password and session length
Members
Stats
  • Total Posts: 195,106
  • Total Topics: 21,213
  • Online today: 358
  • Online ever: 3,540 (September 03, 2022, 01:38:54 AM)
Users Online

Need hide some panels...

Started by diegolyanky, May 02, 2021, 02:41:24 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

diegolyanky


Hi:

I have a simple question: Is there a way to hide some panels when in mobile devices?

I need to hide left panel when a user is visiting site from mobile device.

I have some codes to do it, but I can't find the exact place to put them... To be honest, I don't understand very well how the templates and panels are built when they are called.

If someone have an idea about how to hide a panel when in mobile, please let me know.

I'm running SMF 2.0.18 and TP 2.01 under PHP 7.1

Thanks and regards!

@rjen

Simple answer to a simple questions: yes there are ways...
but no, there is no simple TinyPortal setting...

The first thing that needs adressing is the term 'mobile devices':
TinyPortal uses NO device detecting logic, but is responsive based in screen sizes.
As fas as I know detecting mobile devices is possible as such but due to the ever changing technology pretty much impossible to get 100% right.

And to be frank: the fact that a device is 'mobile' these days does not really say much about the capabilities anymore: I have an Ipad Pro 12" that can be considered a 'mobile' device, but the screen capabilities are better than some laptops...

The solution I can give you involves three edits to the responsive.css file that comes with TinyPortal, and will suppress the Left Panel based on the screen width of 900 px (the setting used in TinyPortal)

Since you are on 2.0.1 you can use the empty custom.css file that comes with TinyPortal and add this css. Change it, refresh the browser cache and that should do it:


/** screen smaller then 900px **/
@media all and (min-width: 0) and (max-width: 900px) {
.lrON.tp_responsive #tpleftbarContainer,
.tp_responsive.leftpanelOn  #tpleftbarContainer {
display: none;
}


For older TinyPortal versions that do not have the custom.css it is more work...

(edits ONLY needed if the custom.css is not available or changed)
Open responsive.css file and find:


/** screen from 500px to 900px **/
@media all and (min-width: 500px) and (max-width: 900px) {
.lrON.tp_responsive #tpleftbarContainer,
.lrON.tp_responsive #tprightbarContainer {
float:none!important;
}
.lrON.tp_responsive #tpleftbarContainer {
display: table-cell;
}


Change to

/** screen from 500px to 900px **/
@media all and (min-width: 500px) and (max-width: 900px) {
.lrON.tp_responsive #tpleftbarContainer,
.lrON.tp_responsive #tprightbarContainer {
float:none!important;
}
.lrON.tp_responsive #tpleftbarContainer {
display: table-cell;
/* add this in case both left and right panels are on */
display: none;
/* to here */
}


Then find:

@media all and (min-width: 0) and (max-width: 500px) {
.lrON.tp_responsive #tpleftbarContainer {
display: table-row-group;
}


and change to


@media all and (min-width: 0) and (max-width: 500px) {
.lrON.tp_responsive #tpleftbarContainer {
display: table-row-group;
/* add this in case both left and right panels are on */
display: none;
/* to here */
}


and the last, find:


.tp_responsive.leftpanelOn  #tpleftbarContainer,
.tp_responsive.rightpanelOn #tprightbarContainer {
display: table-footer-group;
}
.tp_responsive.leftpanelOn  #tpleftbarContainer,
.tp_responsive.rightpanelOn #tprightbarContainer {
float:none!important;
width: 100%!important;
}


and change to


.tp_responsive.leftpanelOn  #tpleftbarContainer,
.tp_responsive.rightpanelOn #tprightbarContainer {
display: table-footer-group;
}
/* add this in case the right panel is switched off */
.tp_responsive.leftpanelOn  #tpleftbarContainer {
display: none;
}
/* to here */
.tp_responsive.leftpanelOn  #tpleftbarContainer,
.tp_responsive.rightpanelOn #tprightbarContainer {
float:none!important;
width: 100%!important;
}
Running Latest TP on SMF2.1 at: www.fjr-club.nl

diegolyanky


@rjen:

In first place, many thanks for your reply and explanation...

It worked fine.

I had to edit both files: responsive.css and custom.css ... I don't know why... maybe I still having some old files ;)

The fact is: IT WORKED !!!...

Now that I have this example, I'll make to turn "off" the upper panel when is viewed from a PC or any device with more than 900px

Thanks again !!!

diegolyanky

Hi again @rjen:

I have some questions...

Because, it worked, but now I noticed isn't working again.

Now I'm checking the files again...

The questions I have are:


1° What is exactly this part?

See Image attached (whats this.png)

If I edit in that field, isn't the same?



2° How must I fill this marked fields? specially the marked in red...
And, what's about the yellow marek ones? (see attached "how to fill this.png")


3° How to make the lower and upper panels to not respect the same width than forum? ... I'm using responsive theme, and I can see my forum is in good size, but when I turn on the panels upper and lower, specially the lower, it make my forum to be out of size and respects the panel's size.

Thanks a lot for helping me... if you need anything, just let me know.

@rjen

Question 1:
No, that is not the same.

The custom template option allows you to change the article layout on your frontpage to your liking: this affects how articles are showing and what elements it shows and where: it does NOT affect the panels...

The help text: https://www.tinyportal.net/docs/index.php?page=Frontpage-settings

Question 2:
The help page for that is also available here:
https://www.tinyportal.net/docs/index.php?page=Panel-settings

The RED circled setting:
These settings allow you to set a fixed width in px for a panel. This is only available for side panels: this sets the panel to always (regardless of the screensize) have a standard width of X px wide.

If you apply the css change that will not change: the side panel will have the set width untill it is suppressed once the screen width goes below 900px.

The YELLOW circled setting:
Allow yoy to set an (optional) fixed width or heigth for all blocks IN the panel. This is usefull if you have multiple blocks in a panel and you want to give the all the exact same size and not size according to their content...

Question 3:
Quote3° How to make the lower and upper panels to not respect the same width than forum? ... I'm using responsive theme, and I can see my forum is in good size, but when I turn on the panels upper and lower, specially the lower, it make my forum to be out of size and respects the panel's size.

You lost me there. Any chance you can pint me to the forum where you are seeing this, so I can understand the question?
Running Latest TP on SMF2.1 at: www.fjr-club.nl