Auteur Topic: [Tinyportal]  (gelezen 18 keer)

Offline @rjen

  • Webmaster
  • *
  • Diamant deelnemer
  • Berichten: 6854
    • Arjen
    • Welling
    • www.wellingweb.nl
  • FJR: 2018 AE Phantom Blue
[Tinyportal]
« Gepost op: zaterdag, 03 februari 2018, 20:23:07 »
I am not sure I agree that this is not a TP issue.

I did a lot of testing previously when Allvip developed the responsive option, and I did some more digging this week.
Let me explain my reasoning:

Background: on my website I have two themes: the default Curve theme and an own theme which is effectively a curve variation. On both themes the responsive Curve mod is working fine. I have made some tweaks and additions to the css over time to fix some things that I was not happy with, but overall it is still responsive curve.
On my site I am NOT using the side panels in the forum section: left and right panel are set to be hidden in the forum using the TP settings. The side panels are used on the home page and article pages though.

My observations:

We now see that some posts extend off-screen on small devices. This happens on the (TP) site and on mine when using Responsive TP (version 1.3R and 1.4R both):
1. Extremely long URL's are posted that cannnot be cleanly wrapped
   Example: https://test.fjr-club.nl/index.php?topic=21293
2. BBC Code blocks are inserted
   Example: https://test.fjr-club.nl/index.php?topic=21291.0
   
Ihe issues with the overflows in posts do NOT occur in my themes with responsive curve when TP is not installed.

See examples 1 and 2.
(All examples from a W10 pc using Chrome browser)




Now I install TP1.4R and check my example posts again in a narrow screen.
I notice that the both posts are still displayed the same way: staying inside the displayed area of the screen

See examples 3 and 4.



Now I activate the side panels on the forum section and I check the sample posts again.
What now happens is that in the example posts the previously shown slide bars disappear and the post breaks the layout.

See examples 5 and 6.



Now, upon inspecting the page differences between situation with the side panels switched off and switched on I notice that in TP there is a switch made at a window width of 900px. This is exactly when the issue starts appearing. This is the setting in the tp-style.css where the side panels are being moved from the side to the bottom. And the section in the css from line 1954 becomes active.

Now I started to check the difference in the page css when the side panels are off and when they are on, and I noticed that following:
To make the layout responsive the TP css moves uses container-divs: tpleftbarContainer, tprightbarContainer and centerContainer around the screen. These are being moved around with css using a display setting when the screen width goes below 900px.
To do this the css is using element styles (which I guess are set in the template based on the setting in TP is the side panels are on or off):  when the side panels are off the style used for the Centercontainer is ".tp_responsive #centerContainer" and when they are on the Style used is ".lrs.tp_responsive #centerContainer". These styles have their own css settings which forces the display of the Center block in 'table-caption' and that's where the problems start...

Inspector with the side panels switched off


Inspector with the side panels switched on


Hope this helps in finding the right place to fix it.
My best guess is that the fix needs to be made by adding the correct styling in tp-style.css between line 2123 and 2192, where the extra CSS sits for when the side panels are ON...

/********** RESPONSIVE TP - only if one or both sidebars are ON on the page ***********/

.lrs #centerContainer {
overflow:hidden; /* do not delete */
}
/** screen smaller then 500px **/
@media all and (min-width: 0px) and (max-width: 500px) {
.lrON.tp_responsive #tpleftbarContainer {
display: table-row-group;
}
.lrON.tp_responsive #tprightbarContainer {
display: table-footer-group;
}
.tp_responsive #tpleftbarContainer,
.tp_responsive #tprightbarContainer {
width:100%!important;
    float:none!important;
}
.tp_responsive #tpleftbarContainer #tpleftbarHeader,
.tp_responsive #tprightbarContainer #tprightbarHeader {
padding: 0px;
    margin: 0px;
}
}
/** 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;
}
.lrON.tp_responsive #tprightbarContainer {
    display: table-cell;
}
.tp_responsive #tpleftbarContainer,
.tp_responsive #tprightbarContainer {
width:49%!important;
padding:0.5%;
}
}
/** screen smaller then 900px **/
@media all and (min-width: 0px) and (max-width: 900px) {
.tp_responsive #centerContainer {
overflow:visible!important;
}
.lrs.tp_responsive #mainContainer {
display: table;
width:100%; /* can be changed but not deleted
it must have a width in px or % because of display table */
}
.lrs.tp_responsive #centerContainer {
display: table-caption;
}
.tp_responsive.leftpanelOn  #tpleftbarContainer,
.tp_responsive.rightpanelOn #tprightbarContainer {
    display: table-footer-group;
}
.tp_responsive.leftpanelOn  #tpleftbarContainer,
.tp_responsive.rightpanelOn #tprightbarContainer {
    width: 100%!important;
float:none!important;
}
.tp_responsive.leftpanelOn #tpleftbarContainer #tpleftbarHeader,
.tp_responsive.rightpanelOn #tprightbarContainer #tprightbarHeader{
padding: 0px;
    margin: 0px;
}
}




 
2018 AE Phantom Blue
2013 A Midnight Black
2008 A Silver Tech