A stunning theme required

To talk about everything
User avatar
axew3
w3all User
w3all User
Posts: 2030
Joined: Fri Jan 22, 2016 5:15 pm
Location: Italy
Contact:

Re: A stunning theme required

Post by axew3 »

I've just remember that i had prepare this some day ago, it is the starting code that work into the default install theme of phpBB 3.2, the prosilver theme. Resize the forum list on index, and the topics list of viewforum.
Provide a throttle to not overload the cpu on resize.
Into overall_footer.html after:

Code: Select all

<!-- IF S_PLUPLOAD --><!-- INCLUDE plupload.html --><!-- ENDIF -->
{$SCRIPTS}
add:

Code: Select all

<script type="text/javascript">

function resizer() {

$('ul.topiclist.forums li.row dl.row-item').each(function () {
  var dhsf = ($(this.childNodes[0].nextElementSibling.childNodes[3]).height());
   if (null == dhsf){
 	var dhsf = ($(this.childNodes[1].childNodes[1]).height());
 }

 	if (dhsf < 55){ dhsf = 55; } // the needed min height 
      $(this,'ul.topiclist.forums li.row dl').children().css({
          height: dhsf + 'px',
          'padding':'0px'
        });
  
});

$('ul.topiclist.topics li.row dl.row-item').each(function () {
  var dhsf = ($(this.childNodes[0].nextElementSibling.childNodes[3]).height());
   if (null == dhsf){
 	var dhsf = ($(this.childNodes[1].childNodes[1]).height());
 }

 	if (dhsf < 55){ dhsf = 55; } // the needed min height 

      $(this,'ul.topiclist.topics li.row dl').children().css({
          height: dhsf + 'px',
          'padding':'0px'
        }); 
  
});


}

$( window ).load(function() {
 $('ul.topiclist.forums li.row dl.row-item').each(function () {
  $(this.childNodes[3]).wrapInner( "<table style=\"margin:0px;padding:0px;border-collapse:collapse;height:100%;width:100%\"><tbody><tr><td style=\"text-align:center;margin:0px;padding:0px;vertical-align:middle\"></td></tr></tbody></table>" );
  $(this.childNodes[3,5]).wrapInner( "<table style=\"margin:0px;padding:0px;border-collapse:collapse;height:100%;width:100%\"><tbody><tr><td style=\"text-align:center;margin:0px;padding:0px;vertical-align:middle\"></td></tr></tbody></table>" );
  $(this.childNodes[3,5,7]).wrapInner( "<table style=\"margin:0px;padding:0px;border-collapse:collapse;height:100%;width:100%\"><tbody><tr><td style=\"margin:0px;padding-left:6px;vertical-align:middle\"></td></tr></tbody></table>" );
 });	
  $('ul.topiclist.topics li.row dl.row-item').each(function () {
  $(this.childNodes[3]).wrapInner( "<table style=\"margin:0px;padding:0px;border-collapse:collapse;height:100%;width:100%\"><tbody><tr><td style=\"text-align:center;margin:0px;padding:0px;vertical-align:middle\"></td></tr></tbody></table>" );
  $(this.childNodes[3,5]).wrapInner( "<table style=\"margin:0px;padding:0px;border-collapse:collapse;height:100%;width:100%\"><tbody><tr><td style=\"text-align:center;margin:0px;padding:0px;vertical-align:middle\"></td></tr></tbody></table>" );
  $(this.childNodes[3,5,7]).wrapInner( "<table style=\"margin:0px;padding:0px;border-collapse:collapse;height:100%;width:100%\"><tbody><tr><td style=\"margin:0px;padding-left:6px;vertical-align:middle\"></td></tr></tbody></table>" );
 }); 
 resizer();
});

(function() {

  window.addEventListener("resize", resizeThrottler, false);

  var resizeTimeout;
  function resizeThrottler() {
    // ignore resize events as long as an actualResizeHandler execution is in the queue
    if ( !resizeTimeout ) {
      resizeTimeout = setTimeout(function() {
        resizeTimeout = null;
        actualResizeHandler();
       // The actualResizeHandler will execute at a rate of 45fps
       }, 198);
    }
  }

function actualResizeHandler() {
    // handle the resize event
     resizer();
}

}());

</script>
Recompile template!

User avatar
axew3
w3all User
w3all User
Posts: 2030
Joined: Fri Jan 22, 2016 5:15 pm
Location: Italy
Contact:

Re: A stunning theme required

Post by axew3 »

p.s the above code has been just updated, i have fail on copy the right piece, and it was not containing the resize for viewforum.php (topics list).
Now is ok.

User avatar
kaspir
Moderator
Moderator
Posts: 97
Joined: Mon Mar 20, 2017 2:38 pm
Location: USA
Contact:

Re: A stunning theme required

Post by kaspir »

Image

I LOVE IT!!!!

Purge cache wors too after adding this script to footer. I first used on my test forum which anyone can see it working here: https://phpbb.thetopfew.com/viewforum.php?f=2

Then I put on my live site here: https://forums.thetopfew.com/ (and this is a custom theme, based on prosilver!) works like a charm, seriously.

I could have never helped you with this, lol. BUT I FRICKIN LOVE IT! WOW.. Glad I stayed up with this topic.. hell a good job mate! I would make that a phpbb extension and maybe ask for donations mate or drag more ppl to your site per clicks to download it.. seriously. Once people understand what this does, phpbb platform users may will want it!
Image
World of Phaos RPG online is making it's come back! Play free now!
Check out phpBB contributions & extension downloads. :P

User avatar
axew3
w3all User
w3all User
Posts: 2030
Joined: Fri Jan 22, 2016 5:15 pm
Location: Italy
Contact:

Re: A stunning theme required

Post by axew3 »

so we go to further improve it ... let say that the code intentionally leave something not needed, like:

Code: Select all

$( this,'ul.topiclist.forums li.row dl.row-item').height();
could may just be:

Code: Select all

$(this).height();
it is in place to be more clear where we aim ... ok it is little elementary, but you know, i'm a simple man :lol:

User avatar
kaspir
Moderator
Moderator
Posts: 97
Joined: Mon Mar 20, 2017 2:38 pm
Location: USA
Contact:

Re: A stunning theme required

Post by kaspir »

Far from simple code tho.. that's some complicated script to me! I feel tiny all the sudden.. :D
Image
World of Phaos RPG online is making it's come back! Play free now!
Check out phpBB contributions & extension downloads. :P

User avatar
kaspir
Moderator
Moderator
Posts: 97
Joined: Mon Mar 20, 2017 2:38 pm
Location: USA
Contact:

Re: A stunning theme required

Post by kaspir »

Okay, say I want to NOT resize the row-items height, BUT instead only want to vertically-align the 'dd' elements (such as posts and reply numbers).

How would I edit this script? Thanks, I think I could can still benefit from your nice script here, without compromising my topic descriptions extension that the script height adjustment interferes with.

Thanks as always!
Image
World of Phaos RPG online is making it's come back! Play free now!
Check out phpBB contributions & extension downloads. :P

User avatar
axew3
w3all User
w3all User
Posts: 2030
Joined: Fri Jan 22, 2016 5:15 pm
Location: Italy
Contact:

Re: A stunning theme required

Post by axew3 »

The vertical align of first row not happen due to the fact the table elements isn't injected to the first dt element.
So vertical align for these elements child not work ...
updating the messy code above as soon!, that will fix any aspect for correct resize on topics list (and also about dt vertical align on both forums and topics lists).

User avatar
axew3
w3all User
w3all User
Posts: 2030
Joined: Fri Jan 22, 2016 5:15 pm
Location: Italy
Contact:

Re: A stunning theme required

Post by axew3 »

The first version above, even isn't prefect, and with bad/wrong explain, work but not align to middle the first element dt on each row.
This can be added into phpBB subsilver overall_footer.html without any change, it will work.
This is maybe, the correct (little improved) code to use:

Code: Select all

<script type="text/javascript">
// w3all resizer

function w3all_resizer() {
// x ul.topiclist.topics
$('ul.topiclist.topics li.row dl.row-item').each(function () {
// cross nodes fix check
	var hb1 = ($(this.childNodes[1].childNodes[3]).height());
  var hb2 = ($(this.childNodes[1].childNodes[1]).height());
  
 var hb3 = ($(this.childNodes[1].childNodes[1].childNodes[11]).height());
  var hbr = Math.max(hb1, hb2);

 	if (hbr < 55){ hbr = 55; } // the needed min height for form list rows
 	if(hbr > 55 && hb3 !== null){ hbr += hb3+6; } // wow, the needed min height, more the pagination row ... if there is one on this row
 	
      $(this,'ul.topiclist.topics li.row dl').children().css({
          height: hbr + 'px',
          'padding':'0px'
        });
});

// x ul.topiclist.forums
$('ul.topiclist.forums li.row dl.row-item').each(function () {
// cross nodes fix check
	var hb1 = ($(this.childNodes[1].childNodes[3]).height());
  var hb2 = ($(this.childNodes[1].childNodes[1]).height());
  var hbr = Math.max(hb1, hb2);

 	if (hbr < 55){ hbr = 55; } // the needed min height for form list rows
      $(this,'ul.topiclist.forums li.row dl').children().css({
          height: hbr + 'px',
          'padding':'0px'
        });
});
}

$( window ).load(function() {
 $('ul.topiclist.forums li.row dl.row-item').each(function () {
 // $(this.childNodes[1]).wrapInner( "<table style=\"margin:0px;padding:0px;border-collapse:collapse;height:100%;width:100%\"><tbody><tr><td style=\"text-align:center;margin:0px;padding:0px;vertical-align:middle\"></td></tr></tbody></table>" );
 
  $(this.childNodes[3]).wrapInner( "<table style=\"margin:0px;padding:0px;border-collapse:collapse;height:100%;width:100%\"><tbody><tr><td style=\"text-align:center;margin:0px;padding:0px;vertical-align:middle\"></td></tr></tbody></table>" );
  $(this.childNodes[3,5]).wrapInner( "<table style=\"margin:0px;padding:0px;border-collapse:collapse;height:100%;width:100%\"><tbody><tr><td style=\"text-align:center;margin:0px;padding:0px;vertical-align:middle\"></td></tr></tbody></table>" );
  $(this.childNodes[3,5,7]).wrapInner( "<table style=\"margin:0px;padding:0px;border-collapse:collapse;height:100%;width:100%\"><tbody><tr><td style=\"margin:0px;padding-left:6px;vertical-align:middle\"></td></tr></tbody></table>" );
 });
  $('ul.topiclist.topics li.row dl.row-item').each(function () {
  $(this.childNodes[3]).wrapInner( "<table style=\"margin:0px;padding:0px;border-collapse:collapse;height:100%;width:100%\"><tbody><tr><td style=\"text-align:center;margin:0px;padding:0px;vertical-align:middle\"></td></tr></tbody></table>" );
  $(this.childNodes[3,5]).wrapInner( "<table style=\"margin:0px;padding:0px;border-collapse:collapse;height:100%;width:100%\"><tbody><tr><td style=\"text-align:center;margin:0px;padding:0px;vertical-align:middle\"></td></tr></tbody></table>" );
  $(this.childNodes[3,5,7]).wrapInner( "<table style=\"margin:0px;padding:0px;border-collapse:collapse;height:100%;width:100%\"><tbody><tr><td style=\"margin:0px;padding-left:6px;vertical-align:middle\"></td></tr></tbody></table>" );
 });
 
 w3all_resizer();
});

(function() {

  window.addEventListener("resize", resizeThrottler, false);

  var resizeTimeout;
  function resizeThrottler() {
    // ignore resize events as long as an actualResizeHandler execution is in the queue
    if ( !resizeTimeout ) {
      resizeTimeout = setTimeout(function() {
        resizeTimeout = null;
        w3actualResizeHandler();
       // The actualResizeHandler will execute at a rate of 45fps
       }, 198);
    }
  }

function w3actualResizeHandler() {
    // handle the resize event
     w3all_resizer();
}

}());

</script>
While the second version, with also first element aligned to middle require to inject more code into the DOM, to correctly vertical align even the dt and related nested div.list-inner ...
The working example is here online right now, you can see the result, but to achieve this result, there are some things to explain.
I will try to provide an easy and short how to, with js code (and few easy changes into css i've apply to get colored columns) into the default prosilver theme.
The main problem here, is to traverse the DOM getting the value (height in this case, of the div.list-inner, ), where phpBB add more nested divs into the main dt when for example, there is a new post into forum/topic: in this case, phpBB display Red icon that is also a link. This added a element, is added by phpBB in the case there is a new post, and not if there are no new posts. The worse is that is added outside the div.list-inner! ... we could move manually it inside the div.list-inner, and the rendered result would be the same ... why they have put it so outside the div.list-inner is mysterious to me ... by the way, should be a reason may i ignore at moment ...
So, when we iterate to get the height value of div.list-inner, the code can fail because the childNodes structure we search for not match in some row and js error return: (TypeError: this.childNodes[1].childNodes[1].childNodes[0]... is undefined) ... because some row could contain the <a> element to render the icon as a link....

The joke could be further more improved, or done in several ways, moving the element a inside the div.list-inner manually as above mentioned, with jQuery or JS onload, when necessary, and checking the DOM searching for childNodes in a way or another when required.
I've just remove these lines, one for each file, into files forumlist_body.html, and viewforum_body.html.
So the icon display but is not more an active link, which isn't a big loss, it is redundant because there are more links that point to the same in the same row.
I stop here this crazy example for the moment. I think will be complicated for many, i would like not became impossible for +- all.

Posting this night my time all the easy procedure/code, to complete the logic that explain all this crazy thing, with middle vertical align for dt as is in this online example.

We are crazy, We are cool! ;)

User avatar
axew3
w3all User
w3all User
Posts: 2030
Joined: Fri Jan 22, 2016 5:15 pm
Location: Italy
Contact:

Re: A stunning theme required

Post by axew3 »

The improved version of the jQuery snippet code and procedure, to vertical align also elements of first dt into a default phpBB Subsilver theme, and ready colors.css, CSS file to get the result as in this online example, is here:
viewtopic.php?f=17&t=572

Post Reply