Forum - Mitgliederliste sortiert aufrufen - Visitenkarten-Outfit

<!-- Visitenkarten-Design für die Mitgliederliste -->
<style>
.memberlist td, #userlist td, .card-body-addon td, .c_r_cont2 td, #memberlist td, .cat td {
  padding:5px;
  border:none;
  vertical-align: middle; 
  width: auto; 
}
.memberlist tr {
  border:none !important;
}
.sortieren {
 
  /* Hintergrundfarbe Sortierleiste */
  background:#cccccc;  
  color: #000000;
  padding:20px;
} 
.sortieren a {
  color:#ffffff;
}
.mbt .sortieren {
 
  /* Abstand Sortierleiste - Nur fürs Xobor (v6) */
  margin:10px 10px 0 10px;
}
.table_list, .visitenkarte, .customsfield {
  border-collapse:  collapse !important; 
  font-weight:normal;
}
.visitenkarte {
  height:90px;
  width:auto;
 
  /* Breite Visitenkarte - Für die Templates (v1, v2, v4 + v6) */
  max-width:500px; 
  border:1px solid #aaaaaa; 
}
.visitenkarte td, .visitenkarte small {
 
  /* Hintergrundfarbe Visitenkarte */
  background:#ffffff !important;
  line-height: 20px;
 
  /* Schriftgröße Visitenkarte */
  font-size:12px !important;
  color: #000000;
  padding-left:0;
}
.c_r_content2 .visitenkarte {
 
  /* Breite Visitenkarte - Nur fürs Gaia (v3) */
  max-width:265px; 
}
.visitenkarte b img { 
 
  /* Größe Benutzertitel */
  max-height:25px;
  width:auto;
}
.avatarimg { 
  text-align: center !important;
  width: 80px !important; 
}
.avatarsize {    
  margin:5px;
  max-width: 70px; 
  height:70px;
  object-fit: cover;
}
.min_mit, .no_x6 {
  display:none;
}
.cat .no_x6 {
  display:block;
}
.Infos_min {
 
  /* Info-Button */
  display:inline-block; background: #dddddd; color: #000000; margin:10px; padding: 2px 10px; border: 1px solid #aaaaaa; border-radius: 5px; cursor: pointer;
}
.Infos_min:hover {
  background: #ffffff;
}
</style>
 
 
<script>
document.addEventListener('DOMContentLoaded', function() {
 
// Neue Suchfilter DropDown-Menü - Speziell fürs V6
$('ul li.dropdown-item:nth-child(3)').after('<li class="dropdown-item"><a href="{{sortregistered_link}}"><small>Mitglied seit</small></a></li>');
$('ul li.dropdown-item:nth-child(6)').after('{{show_gallery==true.start}}<li class="dropdown-item"><a href="{{sortimg_link}}"><small>Bilder</small></a></li>{{show_gallery==true.end}}');
// Filter bei Minimierung im DropDown-Menü ausblenden
$('ul li.dropdown-item:contains("E-Mail"), ul li.dropdown-item:contains("Punkte"), ul li.dropdown-item:contains("Bilder"), {{customfields.startlist}}{{customfields:sortlink==true.start}}ul li.dropdown-item:contains("{{customfields:feldname}}"),{{customfields:sortlink==true.end}}{{customfields.end}}.pseudoClass').addClass('min_mit').css('display','none');
 
// Neue Suchfilter DropDown-Menü - Speziell fürs V4
$('.page_userlist .foptions_list a:nth-child(3)').after('<a href="{{sortregistered_link}}"><small>Mitglied seit</small></a>');
$('.page_userlist .foptions_list a:nth-child(6)').after('{{show_gallery==true.start}}<a class="min_mit" style="display:none;" href="{{sortimg_link}}"><small>Bilder</small></a>{{show_gallery==true.end}}');
// Filter bei Minimierung im DropDown-Menü ausblenden
$('.page_userlist .foptions_list a:contains("E-Mail"), .page_userlist .foptions_list a:contains("Punkte"), .page_userlist .foptions_list a:contains("Bilder"), {{customfields.startlist}}{{customfields:sortlink==true.start}}.page_userlist .foptions_list a:contains("{{customfields:feldname}}"),{{customfields:sortlink==true.end}}{{customfields.end}}.pseudoClass').addClass('min_mit').css('display','none');
 
  $('.memberlist, #userlist .card-body-addon, .c_r_cont2 .c_r_content2, #memberlist, .cat').html(`
  <table style="border:1px solid #dddddd; width:100%; margin:auto;"><tr><td class="ntit no_x6" colspan="99">&nbsp;Mitglieder</td></tr>
  <tr><td>
    <div class="sortieren">
      <b>Sortieren nach:</b><br><br>
 
      <a href="{{sortname_link}}"><b>Name</b></a> &nbsp;&nbsp;|&nbsp;&nbsp;
      <span class="min_mit"><a href="{{sortmail_link}}"><b>E-Mail</b></a> &nbsp;&nbsp;|&nbsp;&nbsp;</span>
      <a href="{{sorttitle_link}}"><b>Titel</b></a> &nbsp;&nbsp;|&nbsp;&nbsp;
      <a href="{{sortregistered_link}}"><b>Mitglied seit</b></a> &nbsp;&nbsp;|&nbsp;&nbsp;
      <a href="{{sortmsgs_link}}"><b>Beiträge</b></a> &nbsp;&nbsp;|&nbsp;&nbsp;
      <span class="min_mit">{{points_active==true.start}}<a href="{{sortpoints_link}}"><b>Punkte</b></a> &nbsp;&nbsp;|&nbsp;&nbsp;{{points_active==true.end}}</span>
      <span class="min_mit">{{show_gallery==true.start}}<a href="{{sortimg_link}}"><b>Bilder</b></a> &nbsp;&nbsp;|&nbsp;&nbsp;{{show_gallery==true.end}}</span>
      {{useronline==true.start}}<a href="{{sortonline_link}}"><b>Zuletzt online</b></a>{{useronline==true.end}}
 
      {{customfields.startlist}}
      {{customfields:sortlink==true.start}}
      <span class="min_mit">&nbsp;&nbsp;|&nbsp;&nbsp;<a href="{{customfields:sortlink}}"><b>{{customfields:feldname}}</b></a></span>
      {{customfields:sortlink==true.end}}
      {{customfields.end}}
    </div>
    
    <!-- Info-Button oben -->
    <div class="Infos_min">Infos erweitern</div>
 
    <table class="table_list" style="width:100%;" border="0"><tr>
      {{users.startlist}}
      <td valign="top" style="padding:10px; max-width:500px; display:inline-block;">
 
        <table class="visitenkarte" width="100%">
          <tr>
            <td class="avatarimg" style="overflow: hidden; text-align: left;" valign="top">
 
              {{userimage.start}}{{users:userimage}}{{userimage.end}}
 
              {{users:userimage==true.start}}
              <a href="{{users:link}}"><img class="avatarsize" src="{{userimage}}"></a>
              {{users:userimage==true.else}}
 
	          {{users:user_gender==true.start}}
 
			  {{users:user_gender_m==true.start}}
		      <img class="avatarsize" src="//files.homepagemodules.de/b2001010/a_382.png">
			  {{users:user_gender_m==true.end}}
 
			  {{users:user_gender_w==true.start}}
			  <img  class="avatarsize" src="//files.homepagemodules.de/b2001010/a_383.png">
			  {{users:user_gender_w==true.end}}
 
		      {{users:user_gender==true.else}}
              <img class="avatarsize" src="//files.homepagemodules.de/b2001010/a_551.png">
		      {{users:user_gender==true.end}}
 
              {{users:userimage==true.end}}
            </td>
            <td valign="top" style="text-align:left; width:200px; padding-left:10px;color:#000000;">
              <a href="{{users:link}}" style="text-decoration: none;"><b><span {{users:usercolor==true.start}}style="color:{{users:usercolor}} !important;"{{users:usercolor==true.end}}><span style="color: #222222;">{{users:name}}</span></span></b></a>
              <br />
              <b>{{users:title}}</b>
 
              <small class="mail_vi min_mit"><br>E-Mail: <i>{{users:mail}}</i></small>
 
              <small><br>Registriert seit: <i>{{users:registered|dateformat(d.m.Y)}}</i></small>
 
              <small><br><span class="min_mit">{{points_active==true.start}}Punkte / {{points_active==true.end}}</span>Beiträge: <i><span class="min_mit">{{points_active==true.start}}{{users:points|numberformat}} / {{points_active==true.end}}</span>{{users:msgs|numberformat}}</i></small>
 
              {{show_gallery==true.start}}<small class="min_mit"><br>Bilder: <i>{{users:numpix}}</i></small>{{show_gallery==true.end}}
 
              {{useronline==true.start}}<small><br>Zuletzt Online: <i>{{users:online|dateformat(d.m.Y)}}</i></small>{{useronline==true.end}}
 
              {{users:usercustomfields.startlist}}
	          {{usercustomfields:value==true.start}}
		      <table class="customsfield min_mit"><tr>
				<td>{{usercustomfields:name}}:</td>
				<td><small><i>{{usercustomfields:value}}</i></small></td>
			  </tr></table>
	          {{usercustomfields:value==true.end}}
              {{users:usercustomfields.end}}
            </td>
 
          </tr>
        </table>
 
      </td>
      {{users.end}}
    </tr></table>
    
    <!-- Info-Button unten -->
    <div class="Infos_min">Infos erweitern</div>
  </td></tr>
  </table>
  `);
  
  // Leere E-Mailfelder und Felder mit "0" ausblenden!
  $('.visitenkarte small').html(function(index, link){
    return link.replace("Punkte / </span>", "</span>").replace("0 / </span>0</i>", "</span>0</i>").replace("<br>Bilder: <i>0</i>", "").replace("<br>Zuletzt Online: <i>0</i>", "<br><br>").replace("<br>E-Mail: <i></i>", "");
  });
  
  // Infos erweitern  
  let linkstate = 0;
  $('.Infos_min').on('click',function(){
   if(linkstate === 0){ 
     linkstate = 1;
     $('.min_mit').show();
     $('.Infos_min').text('Infos minimieren');
     
     // Sitzungscookie setzen - Zustand speichern
     sessionStorage.setItem('info_min','true');
   }else{
     linkstate = 0;
     $('.min_mit').hide();
     $('.Infos_min').text('Infos erweitern');
     
     // Sitzungscookie löschen - Speicherung wird aufgehoben
     sessionStorage.setItem('info_min','false');
   };
  });
  
  // Sitzungscookie auslesen
  if (sessionStorage.getItem('info_min') == 'true'){
     $('.min_mit').show();
     $('.Infos_min').text('Infos minimieren');
     linkstate = 1;
  };
    
});
</script>