Postbit Changes (Phase II Upgrade)


Login or Register to Reply

 
Thread Tools Search this Thread
# 1  
Old 07-19-2018
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  
Old 07-19-2018
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  
Old 07-19-2018
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:
Corona688 (07-20-2018)
# 4  
Old 07-19-2018
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  
Old 07-19-2018
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  
Old 07-20-2018
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  
Old 07-21-2018
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 to Reply

|
Thread Tools Search this Thread
Search this Thread:
Advanced Search

More UNIX and Linux Forum Topics You Might Find Helpful
Docker learning Phase-I RavinderSingh13 Docker 7 01-06-2019 11:13 PM
Update to Advanced Search Page (Phase 1) Neo What is on Your Mind? 0 12-22-2018 10:42 AM
New Supplementary CSS for Forum Postbit Neo Web Development 0 12-14-2018 07:07 AM
XML Phase with awk pareshkp Shell Programming and Scripting 5 12-11-2018 12:34 PM
Phase III: CSS Flexbox Upgrades Neo What is on Your Mind? 0 08-08-2018 05:08 AM
Small bug in the Quick Editor function in postbit Neo What is on Your Mind? 1 08-05-2018 06:24 AM
Prototyping New Responsive Mobile for UNIX.COM - Phase II Neo What is on Your Mind? 63 11-30-2017 02:52 AM
init phase saudsos Solaris 1 12-10-2010 03:17 AM