Hey there, I'm currently working on Devaon's templates. Don't mind the incoherent stuff. Thanks !
Welcome to Devaon

Back to thread listUser Card #1
Jeg
Sun Apr 17, 2022 11:26 pm

A minimalist User Card that appears when clicking on any link redirecting to any user's profile.

User Card #1 6BMpV0n

In the profile_view_body template, add the following code at the beginning of it:

Code:
<div style="display: none;">
<div class="userprofile" data-online="{USER_ONLINE}" data-id="{CUR_USER_ID}">
 <div class="userprofile_top">
 <div class="userprofile_avatar">{AVATAR_IMG}</div>
 <div class="userprofile_username">{USERNAME}</div>
           <div class="userprofile_infos"><span>{POSTER_RANK}</span><br />Last seen <b>{LAST_VISIT_TIME}</b></div>
 </div>
  
   <div class="userprofile_bottom">
           <div class="userprofile_fieldset">
                 <!-- BEGIN profile_field -->
                   <div class="userprofile_field"><plabel>{profile_field.LABEL}</plabel>
                        <pcontent>{profile_field.CONTENT}</pcontent></div>
 <!-- END profile_field -->
           </div>
          
           <div class="userprofile_links">
                   <a class="userprofile_full" href="/u{CUR_USER_ID}">View full profile</a>
                   <a class="userprofile_pm" href="/privmsg?mode=post&u={CUR_USER_ID}">PM</a>
           </div>
   </div>
</div>
</div>


Create a new javascript on all the pages with the following code:

Code:
$(function() {
$('a[href^="/u"]').on('click', function(e) {
    e.preventDefault();
    var link = $(this).attr('href');
    var offset = $(this).offset();
    var posY = offset.top;
    var posX = offset.left;
    var width = $(this).outerWidth();
  
    $('body').after('<div class="userinfo" style="display: none; z-index: 2;"></div>');
    
    $.get(link, function(data) {
        data = $(data).find('.userprofile');

 $('.userinfo').html(data);

    $(".userinfo").css({
        position: "absolute",
        top: posY + "px",
        left: (posX + width) + "px"
    }).fadeIn(150);

      
    });
  
    $(document).mouseup(function(f) {
    var container = $('.userinfo');
    if (!container.is(f.target) && container.has(f.target).length === 0)
    {
      container.fadeOut(150, function(){ container.remove(); });
    }
    });
    
});
});


Finally, add the following CSS to your stylesheet:

Code:
.userinfo {
    display: block;
    background-color: white;
    width: 300px;
    box-sizing: border-box;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 0 30px #30303025, 0 0 0 300vw #30303030;
    font-family: 'Roboto', sans-serif;
 font-size: 10pt;
}

.userprofile_username {
    margin-top: 15px;
    font-family: 'Roboto', sans-serif;
    font-size: 18pt;
}

.userprofile_infos {
 color: #66696c;
 font-weight: 500;
 font-size: 8pt;
}

.userprofile_infos span {
    font-weight: 600;
}

.userprofile_bottom {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #e3e9ef;
}

.userprofile_field {
    margin: 0 0 5px 0;
}

plabel, pcontent {
    display: inline-block;
}

pcontent {
    font-weight: 500;
    margin-left: 5px;
}

.userprofile_links {
    margin-top: 30px;
    text-align: center;
}

a.userprofile_full {
    background-color: #1e56c3;
    display: inline-block;
    margin-right: 10px;
    color: white;
    padding: 10px;
    border-radius: 4px;
    font-weight: 500;
    text-decoration: none !important;
    transition: all .25s ease-in-out;
    opacity: .8;
}

a.userprofile_full:hover {
    opacity: 1;
}

a.userprofile_pm {
 background-color: #838589;
 display: inline-block;
 color: white;
 padding: 10px 20px;
 border-radius: 4px;
 font-weight: 500;
 text-decoration: none !important;
 transition: all .25s ease-in-out;
 opacity: .8;
}

a.userprofile_pm:hover {
    opacity: 1;
}