Next in the pipeline, thinking I will work on postbit (the core of the posts) and try to get Bootstrap and badges working in postbit and not break the quick editors in the post.
Note, I had to turn off the scrollbars in postbit for now because when I turn them on, it breaks the quick editor in posts.
Will keep you informed, as always.....
OK.... after a lot of analysis of the postbit HTML template, the first thing which must be done is to remove the tables from the 10 $templatehooks, and and search of the DB reveals only 2 plugins are using these template hooks:
1. Thank You
2. Scott - 998 - Add History to PostBit Menu
However, the table in 998 is not an issue because that table is a small popup menu and does not need to be changed at this time.
The Thank You hack is important, so I need to covert all of these to divs first and get rid of the table tags.
Then, after that, the next step, based on postbit HTML analysis, is to look inside these post array items and check for table, td and tr tags since all of these are wrapped in table tags:
$post[imageattachmentlinks]
$post[otherattachments
$post[moderatedattachments]
Then that is done and nothing is broken, then can look at converting the main postbit message table and rows.
... gezzzzzz LOL
I swear, the next time I scratch down some quick analysis of an HTML file, I'll try to take better notes.
Actually, these kind of notes are useful, so next time I'll do it much better, LOL
Note: Moving this thread over to "war stories" haha since this is a war against 10 year old HTML code, hacked and smacked over 10 years... and not trying to bring all this code up to snuff.
My scratchy notes above shows that there is really a war going on to make this happen, LOL
HTML Template (working live now)
post_thanks_postbit
New divs:
<div style="padding:$stylevar[cellpadding]px 0px 0px 0px;">
<div class="alt2" style="padding:$stylevar[cellpadding];border-style:solid;border-width:1px;" width="100%">
<div style="padding:0px;padding:10px 10px 10px 10px;">
<div class="alt2" style="display:inline-block;">
<if condition="$post['post_thanks_amount'] == 1">
<span style="float:left;margin-left:2px;font-weight:bold;">
<phrase 1="$post[username]">$vbphrase[post_thanks_user_says]</phrase>
</span>
<else />
<span style="float:left;margin-left:2px;font-weight:bold;"><phrase 1="$post[post_thanks_amount_formatted]" 2="$post[username]">
$vbphrase[post_thanks_users_say]</phrase>
</span>
</if>
</div>
<if condition="$bbuserinfo['usergroupid'] == 6">
<div class="alt2" style="float:right;padding:0px 20px 0px 0px;display:inline-block;" align="right" nowrap="nowrap">
<a href="post_thanks.php?do=post_thanks_remove_all&p=$post[postid]"<if condition="$vboptions['disable_ajax'] != 2">
onclick="return post_thanks_remove_all($post[postid], <if condition="$vboptions['post_groan_integrate']">true<else />false</if>);"
</if> rel="nofollow">$vbphrase[post_thanks_remove]
</a>
</div >
</if>
<if condition="$post['show_thanks_remove_option']">
<div class="alt2" style="float:right;padding:0px 20px 0px 0px;display:inline-block;" align="right" nowrap="nowrap">
<a href="post_thanks.php?do=post_thanks_remove_user&p=$post[postid]"<if condition="$vboptions['disable_ajax'] != 2">
onclick="return post_thanks_remove_user($post[postid], <if condition="$vboptions['post_groan_integrate']">true<else />false</if>);"
</if> rel="nofollow">$vbphrase[post_thanks_remove_user]</a>
</div >
</if>
</div>
<div class="alt1" colspan="3" style="padding:10px 10px 10px 10px;">$post[post_thanks_bit]</div>
</div>
</div>
Old table style:
<div style="padding:$stylevar[cellpadding]px 0px 0px 0px">
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr>
<td class="alt2" style="padding:0px;padding:10px 10px 10px 10px;">
<if condition="$post['post_thanks_amount'] == 1">
<span style="margin-left:2px;font-weight:bold;"><phrase 1="$post[username]">
$vbphrase[post_thanks_user_says]</phrase>
</span>
<else />
<span style="margin-left:2px;font-weight:bold;"><phrase 1="$post[post_thanks_amount_formatted]" 2="$post[username]">
$vbphrase[post_thanks_users_say]</phrase>
</span>
</if>
</td >
<if condition="$bbuserinfo['usergroupid'] == 6">
<td class="alt2" style="padding:0px 20px 0px 0px;" align="right" nowrap="nowrap">
<a href="post_thanks.php?do=post_thanks_remove_all&p=$post[postid]"<if condition="$vboptions['disable_ajax'] != 2 AND FALSE">
onclick="return post_thanks_remove_all($post[postid], <if condition="$vboptions['post_groan_integrate']">true<else />false</if>);"</if> rel="nofollow">
$vbphrase[post_thanks_remove]
</a>
</td >
</if>
<if condition="$post['show_thanks_remove_option']">
<td class="alt2" style="padding:0px 20px 0px 0px;" align="right" nowrap="nowrap">
<a href="post_thanks.php?do=post_thanks_remove_user&p=$post[postid]"<if condition="$vboptions['disable_ajax'] != 2 AND FALSE">
onclick="return post_thanks_remove_user($post[postid], <if condition="$vboptions['post_groan_integrate']">true<else />false</if>);"</if>
rel="nofollow">$vbphrase[post_thanks_remove_user]</a>
</td >
</if>
</tr>
<tr><td class="alt1" colspan="3"><div style="padding:0px 20px 0px 5px;">$post[post_thanks_bit]</div></td></tr>
</table>
</div>
Divs done in Thank You post bit.
For these three tables above, I already have a working solution on mobile using Swiper for attachments (and for pagination).
For example in postbit, the solution was:
<div style="font-size:1.1em;text-decoration:none;margin:10px;color:black;">
<br>$post[message]<br />
<!-- attachments -->
<if condition="$show['attachments']">
<div align="center" style="margin-top:20px;color:black;"> Attachments</div>
<div style="margin-top:15px;margin-bottom:15px;">
<if condition="$show['thumbnailattachment'] OR $show['imageattachment'] OR $show['otherattachment']">
<div class="swiper-container" >
<div class="swiper-wrapper" style="margin-bottom:15px;" align="center">
<if condition="$show['thumbnailattachment']">
$post[thumbnailattachments]
</if>
<if condition="$show['imageattachment']">
$post[imageattachments]
</if>
<if condition="$show['otherattachment']">
$post[otherattachments]
</if>
</div>
using this JS, which I can configure for desktop and make the attachments look good in the posts:
<script type="text/javascript">
var swiper = new Swiper('.swiper-container', {
loop: true,
pagination: {
el: '.swiper-pagination',
type: 'fraction',
clickable: true,
},
});
</script>
For example, I will try the Swiper "Space Between Slides" demo, but smaller:
<script>
var swiper = new Swiper('.swiper-container', {
spaceBetween: 30,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
</script>
This should be easy since I have already implemented Swiper on mobile.
Swiper for post attachments (images, pdf, etc.) has been installed and seems to be working OK. I'm not totally happy with the alignment and thumbnail sizes, etc. but I'll address that after finishing all the other critical tasks to do to modernize postbit.
If anyone experiences any odd behavior with post attachments, please post the link to the thread / post where you encounter a problem. There may be some hidden bugs I cannot see due to attachments sizes, types of images (jpg, gif, png, etc).
Thanks.
Added some new Javascript jQuery code to showthread:
<script>
jQuery(document).ready(function(){
jQuery("body").css({"background-color":"white"});
jQuery("#showthread-toolbar").find("table").css({"border-bottom-width":"1px","margin-bottom":"10px;"});
jQuery("#showthread-toolbar").find("table").addClass("table table-responsive");
jQuery(".neo-similiarthreads-wrapper").css({"overflow":"auto"});
jQuery(".neo-quickreply-wrapper").css({"overflow":"auto"});
jQuery(".neo-postbit-wrapper").addClass("table table-responsive").css({"border-width":"1px 0px 0px 0px","border-style":"solid"});
if (jQuery(".neo-postbit-wrapper").prop('scrollWidth') > jQuery(".neo-postbit-wrapper").width() ) {
jQuery(".neo-postbit-wrapper").css({"margin-top":"0px","margin-bottom":"10px"});
jQuery(".neo-bbcode-code-flag").text("(Using Scrollbar)").css({"margin-left":"10px","font-size":".8em"});
}
});
</script>
Anyway, I plan to covert the tables to divs in postbit and showthread templates, so this overflow scroll bar code is just temporary.
OK.. For mobile logged in users (which is not very many, usually less a handful at a time), I have added some jQuery AJAX Javascript to automatically update the "Users Online" info on the home page.
Note: I need to change this from .load() to .getJson() when I have some time.
Neo,
Just noticed something. Somehow the Options active link in the bottom left corner of the Reply/Message editor isn't either active while hovering over nor is clickable.
PostIcons in the Go Advanced Edition isn't either.
Yeah, I've having some challenges moving some CSS to load remotely.
I reverted that change, so hopefully it's OK again.
That Options text is not a link and is not active. It is and always has been a text lable for the buttons underneath.
I see - thanks!