Move Mini Profile To Right Side

[och]

I would like to move my entire mini profile to the right side. How could I go about doing this? Thanks in advance!

[shawnatdgk]

I'm sure this post was moved to Templates because this could be done via your Template Layout.
I don't know that way. I'm just not that familiar with the templates yet.
I tried this way with Javascript. It seemed to work. 
This will move the miniprofile for the actual thread pages. There may be some other random pages that the miniprofile exists, but none that I can think of. I originally had the "Quick Reply" message box on the bottom of the thread page trying to interfere with this code. Pretty sure i bugged it out Let me know if you see any problems. 
Like I said though, somebody may be able to show you to just move some things around in the Templates instead. 

Tweek the numbers in the last 2 lines to edit the spacing/margin.

Global Footer:


<script>
//Move miniprofile to the right
$( function (){
  if(pb.data("route").name == "thread"){
     mini = $(".mini-profile");
     $(".left-panel").hide();
     message = $("td .content");
     html = "<td class='left-panel'>"+mini.html()+"</td>";
     message.after(html);
     $(".controls").css("margin-right", "50px");  //(Quote, Edit, Thumbs Up
     $("td .message").css("margin-left", "20px"); //Message body
  }
})
</script>

[Chris]

Jun 28, 2023 2:42:09 GMT -8 shawnatdgk said:

Global Footer:


<script>
//Move miniprofile to the right
$( function (){
  if(pb.data("route").name == "thread"){
     mini = $(".mini-profile");
     $(".left-panel").hide();
     message = $("td .content");
     html = "<td class='left-panel'>"+mini.html()+"</td>";
     message.after(html);
     $(".controls").css("margin-right", "50px");  //(Quote, Edit, Thumbs Up
     $("td .message").css("margin-left", "20px"); //Message body
  }
})
</script>

You'll probably need to iterate over each post if you want to retain the proper authors on each post

[shawnatdgk]

hMmm. I see. I figured it couldn't really be that simple lol. Thank ya

[och]

Oh yay! I also have a border and background image for my mini-profiles. How could I get them to show up?

[shawnatdgk]

Jun 28, 2023 14:43:03 GMT -8 och said:

Oh yay! I also have a border and background image for my mini-profiles. How could I get them to show up?

Sorry och,
That code actually isn't ready yet. 
Chris noticed a bug in it. 
I'll see if i can fix it. 

[Chris]

1. You can accomplish this via templates modifications by moving the mini-profile from appearing before the post content to appearing after the post content
   
   
   

   • Standard POST LIST Layout (default)

     SPOILER: Click to show

     {foreach $[post]}
     	<tr id="$[post.content_id]" class="$[post.content_class]{if $[post.even]} even{/if}{if $[viewing_recent_posts]} recent{/if}">
     		<td class="$[post.unblocked_class]">
     			<table role="grid">
     				<tr>
     					<td class="left-panel" rowspan="2">
     						$[post.created_by.miniprofile]
     					</td>
     					<td class="content">
     						<article>
     							<div class="content-head ui-helper-clearfix">
     								<div class="info">
     									$[post.thread]
     									<span class="date">$[post.created_on]</span>
     									{if $[post.how_posted]}
     										<span class="post-method">via $[post.how_posted]</span>
     									{/if}
     									$[post.likes]
     								</div>
     								<div class="controls">
     									$[post.quote_button]
     									$[post.edit_button]
     									$[post.likes.button]
     									$[post.select_options]
     								</div>
     							</div>
     							<h3 class="title aria-hidden">Post by $[post.created_by.name] on $[post.created_on]</h3>
     							<div class="message">$[post.message]</div>
     						</article>
     					</td>
     				</tr>
     				<tr>
     					<td class="foot">
     						{if $[post.edited]}
     							<div class="edited_by"><span class="italic">Last Edit:</span> $[post.edited.date] by $[post.edited.by_user]{if $[post.edited.reason]}: $[post.edited.reason]{/if}</div>
     						{/if}
     						{if $[post.created_by.signature]}
     							<div class="signature">$[post.created_by.signature]</div>
     						{/if}
     					</td>
     				</tr>
     			</table>
     		</td>
     		{if $[post.is_blocked]}
     			<td class="$[post.blocked_class] content center">
     				<div class="message note pad-bottom">This post is hidden</div>
     				$[post.display_blocked_post_button]
     			</td>
     		{/if}
     	</tr>
     {/foreach}
     {if !$[post]}
     	<tr class="last"><td class="last center" colspan="1">No posts were found.</td></tr>
     {/if}

     
     
     
     

   • Modified POST LIST Layout

     SPOILER: Click to show

     {foreach $[post]}
     	<tr id="$[post.content_id]" class="$[post.content_class]{if $[post.even]} even{/if}{if $[viewing_recent_posts]} recent{/if}">
     		<td class="$[post.unblocked_class]">
     			<table role="grid">
     				<tr>
     					<td class="left-panel hide" rowspan="2">
     						$[post.created_by.miniprofile]
     					</td>
     					<td class="content pad-right-double">
     						<article>
     							<div class="content-head ui-helper-clearfix">
     								<div class="info">
     									$[post.thread]
     									<span class="date">$[post.created_on]</span>
     									{if $[post.how_posted]}
     										<span class="post-method">via $[post.how_posted]</span>
     									{/if}
     									$[post.likes]
     								</div>
     								<div class="controls">
     									$[post.quote_button]
     									$[post.edit_button]
     									$[post.likes.button]
     									$[post.select_options]
     								</div>
     							</div>
     							<h3 class="title aria-hidden">Post by $[post.created_by.name] on $[post.created_on]</h3>
     							<div class="message">$[post.message]</div>
     						</article>
     					</td>
     				<td class="left-panel" rowspan="2">
     						$[post.created_by.miniprofile]
     					</td>
     				</tr>
     				<tr>
     					<td class="foot">
     						{if $[post.edited]}
     							<div class="edited_by"><span class="italic">Last Edit:</span> $[post.edited.date] by $[post.edited.by_user]{if $[post.edited.reason]}: $[post.edited.reason]{/if}</div>
     						{/if}
     						{if $[post.created_by.signature]}
     							<div class="signature">$[post.created_by.signature]</div>
     						{/if}
     					</td>
     				</tr>
     			</table>
     		</td>
     		{if $[post.is_blocked]}
     			<td class="$[post.blocked_class] content center">
     				<div class="message note pad-bottom">This post is hidden</div>
     				$[post.display_blocked_post_button]
     			</td>
     		{/if}
     	</tr>
     {/foreach}
     {if !$[post]}
     	<tr class="last"><td class="last center" colspan="1">No posts were found.</td></tr>
     {/if}

     
     
   
   
   
   If you have several themes, this change needs to be done in the POST LIST template of each theme. You may also opt to add some additional CSS to tweak the padding on the post content right side or the newly relocated mini-profile left side to give it some separation. The original mini-profile is still there but hidden to retain compatibility with codes that may assume the mini-profile is on the left.
   
   
2. The other option that shawnatdgk offered is a javascript code that will do the job and, in addition, apply the change to all themes installed on the forum without having to edit each theme. The javascript code also gives you a single central location to make edits in case you want to tweak something.
   
   The code that was previously posted had a few bugs so here is another that should retain the correct authors as well as rerun on new page change content.
   
   

   Code:

   SPOILER: Click to show

   <script>

   /* Switch Mini-profile to Right side (Installation: Global Header) */
$(() => {
   function mpflip() {
$('[id^="post-"].item.post.even').each((post_index,post)=>{
           const mp = $('.left-panel', post);
           $('.content', post).after(mp[0].outerHTML)
.css('padding-right','1.5rem')
mp.hide();
       });
   } pb.data('proboards.post') && (mpflip(),pb.events.on('afterSearch', mpflip));    
})



   </script>

   
   
   

   Preview:

   SPOILER: Click to show
   
   
   
   

   *(Alternating Option):

   SPOILER: Click to show
   
   

   You could also make the mini-profiles alternate by adding an even class to this line of the code
   
   

   Right side mini-profiles

   $('[id^="post-"].item.post').each((post_index,post)=>{ 

   
   

   Alternating sides mini-profiles

   $('[id^="post-"].item.post.even').each((post_index,post)=>{ 

   
   

   Preview:

   SPOILER: Click to show

   

   
   
   

[shawnatdgk]

<script>
/* Switch Mini-profile to Right side (Installation: Global Header) */
$(() => {
function mpflip() {
$('[id^="post-"].item.post.even').each((post_index,post)=>{
const mp = $('.left-panel', post);
$('.content', post).after(mp[0].outerHTML)
.css('padding-right','1.5rem')
mp.hide();
});
} pb.data('proboards.post') && (mpflip(),pb.events.on('afterSearch', mpflip));
})

</script>

Crazy. I study code almost religiously. Like sometimes to where my brain feels like it's about to shut down! lol
But this code by Chris above, just reminds me of how much I really don't know. Like that right there is top notch coding if ya ask me. Wish I knew all that!

[Chris]

Jul 7, 2023 18:32:51 GMT -8 shawnatdgk said:

<script>
/* Switch Mini-profile to Right side (Installation: Global Header) */
$(() => {
function mpflip() {
$('[id^="post-"].item.post.even').each((post_index,post)=>{
const mp = $('.left-panel', post);
$('.content', post).after(mp[0].outerHTML)
.css('padding-right','1.5rem')
mp.hide();
});
} pb.data('proboards.post') && (mpflip(),pb.events.on('afterSearch', mpflip));
})

</script>

Crazy. I study code almost religiously. Like sometimes to where my brain feels like it's about to shut down! lol
But this code by Chris above, just reminds me of how much I really don't know. Like that right there is top notch coding if ya ask me. Wish I knew all that!

It's like any other new language, first, you learn to use the low-hanging fruits such as the cuss words, greetings, etc. then you move on to the more nuanced vocabulary

• $(() => {

  $( document ).ready() said:

  Experienced developers sometimes use the shorthand $() for $( document ).ready(). If you are writing code that people who aren't experienced with jQuery may see, it's best to use the long form.

  Arrow function expressions said:

  An arrow function expression is a compact alternative to a traditional function expression, with some semantic differences and deliberate limitations in usage:

  • Arrow functions don't have their own bindings to this, arguments, or super, and should not be used as methods.
  • Arrow functions cannot be used as constructors. Calling them with new throws a TypeError. They also don't have access to the new.target keyword.
  • Arrow functions cannot use yield within their body and cannot be created as generator functions.

  
  
  

• $('[id^="post-"].item.post').each((post_index,post)=>{ 

  
  This line queries for a list of elements that have an id attribute that starts with "post-" and in addition, have a "item" and a "post" class (to distinguish it from cog menu items that also have ids that start with "post-"). It is generally considered bad practice to use just an attribute selector by itself due to poor performance but given that it is also paired with class lookups that issue should be mitigated. The reason the <TR> element is not used in the selector (e.g. TR[id^="post-"]) is because it can be changed in the theme template to something else like a <DIV> or <SECTION> so that omission actually broadens the compatibility of the code by not assuming it will always be a <TR>.

  
  
  

• const mp = $('.left-panel', post);
  $('.content', post).after(mp[0].outerHTML)

  
  The first line grabs the mini-profile cell and saves it in a variable. That first line is equivalent to $(post).find('.left-panel') because post is being used as the context of the query instead of the default top-tier document context.
  
  Since jQuery has no corresponding call to obtain the outerHTML of the mini-profile cell, the second line drops down to using native JavaScript to get it by employing an array index to pull the DOM element from the jQuery "array" and accessing the native property on the raw DOM element. It then uses that to recreate the mini-profile cell after the post content.

  
  
  

• .css('padding-right','1.5rem')
  mp.hide();

  
  Add padding to the newly recreated right side mini-profile to create separation between itself and the preceding post content and then finally hide the original mini-profile.

  
  
  

• pb.data('proboards.post') && (mpflip(),pb.events.on('afterSearch', mpflip));

  
  If we're on a page that contains posts then run the mpflip function and also setup an event listener to rerun the mpflip function whenever the post listing changes. Note that pb.data('proboards.post') will return null if 'proboards.post' is not in proboards.dataHash thus evaluating that first part of the expression to false and short-circuiting the program flow by ignoring the rest of the expression and jumping to the next line. This technique is called micro-branching and generally includes the comma operator when accomplishing several tasks.
  
  The line would probably be more readable if written this way
  
  

  if( pb.data('proboards.post') ){ 
    mpflip();
    pb.events.on('afterSearch', mpflip);
  }

  
  
  This approach, by the way, is an easy catch-all way to detect pages with posts without having to lookup and research every possible route name that may result in actual posts being on the page. There was an earlier exception where 'proboards.post' would not be in the dataHash in the posts_by_ip route (can't remember exact route name) but I believe Proboards already fixed that little bug.

  
  
  

Related: jQuery API

The code can still be improved! For example, moving the dataHash check to the top would save on a doc.ready call if we're on a page with no posts. Currently, it schedules a doc.ready and then determines if we're on a page containing posts within the doc.ready call. We could also include a filter variable to target specific posts. For example, the pseudo-class :has(.mini-profile .badge-25) added to the selector would target only mini-profiles that have Proboards+ badges and flip only those. The possibilities are almost endless.

[shawnatdgk]

Wow. Thanks for that thorough explanation.
I'm definitely gonna need to read over it another hundred times.
I'll be referring to this page for many trips to come. 
Thanks again!