Postbit Changes (Phase II Upgrade)


Login or Register for Dates, Times and to Reply

 
Thread Tools Search this Thread
# 1  
Postbit Changes (Phase II Upgrade)

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.....
# 2  
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:


Code:
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:

Code:
$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
# 3  
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

Image

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
This User Gave Thanks to Neo For This Post:
# 4  
HTML Template (working live now)

Code:
post_thanks_postbit

New divs:

Code:
<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&amp;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&amp;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:

Code:
<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&amp;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&amp;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>

# 5  
Quote:
Originally Posted by Neo
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:


Code:
1. Thank You
    .....

Divs done in Thank You post bit.


Quote:
Originally Posted by Neo
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:

Code:
$post[imageattachmentlinks]
$post[otherattachments
$post[moderatedattachments]

....
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:

Code:
<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:

Code:
<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:

Code:
<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.
# 6  
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.
# 7  
Added some new Javascript jQuery code to showthread:


Code:
<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.
Login or Register for Dates, Times and to Reply

Previous Thread | Next Thread
Thread Tools Search this Thread
Search this Thread:
Advanced Search

4 More Discussions You Might Find Interesting

1. Web Development

New Supplementary CSS for Forum Postbit

Working on moving inline style to a supplementary CSS file. This one is postbit.css: .pb-wrapper { border-style: solid; border-width: 1px; border-color: rgba(110, 117, 182, 0.99); padding: 0px 0px 0px 0px; } .pb-wrapper-b { padding: 0px; border-width: 0px 0px 1px... (0 Replies)
Discussion started by: Neo
0 Replies

2. Shell Programming and Scripting

XML Phase with awk

Hi Guys, Input XML File :- <managedObject class="RMOD_R" distName="MRBTS-101/X/R-7"> <list name="activeCellsList"> <p>15</p> <p>201</p> </list> <p name="aldManagementProtocol">True</p> <p name="serialNumber">845</p> </managedObject> Output :- ... (5 Replies)
Discussion started by: pareshkp
5 Replies

3. What is on Your Mind?

Small bug in the Quick Editor function in postbit

Hey, There was a small bug in the Quick Editor function in postbit, but I fixed it (basically a double quote was missing from an element id): <div id="post_message_$post" class="neo-message-area">$post</div> Was <div id="post_message_$post class="neo-message-area">$post</div> Should... (1 Reply)
Discussion started by: Neo
1 Replies

4. Solaris

init phase

Hello, Can somebody explain me the relationship between /sbin and /etc directories ? what is the relationship between them and what are the roles of files such as rcd.1 etc? (1 Reply)
Discussion started by: saudsos
1 Replies

Featured Tech Videos