nfu-nfumde/modules/member/member_index2.html.erb

<div class="i-member index-member-2">
  <div data-list="roles" data-level="0">
    <div class="i-member-section">
      <div data-level="1" data-list="status-list">
        <h3 class="i-member-status-title">{{status-title}}</h3>
        <div class="i-member-list" data-level="2" data-list="members">
          <div class="i-member-item row">
            <div class="i-member-item-inner clearfix">
              <div class="i-member-pic-wrap col-sm-4">
                <a href="{{link_to_show}}" title="{{name}}">
                  <img class="i-member-pic img-thumbnail" src="{{image}}" title="{{name}}">
                </a>
              </div>
              <div class="i-member-profile-data-wrap col-sm-8">
                  <ul class="i-member-profile-list" data-list="profile_data" data-level="3">
                    <li class="i-member-profile-item">
                        <span class="i-member-title {{title_class}}">{{title}}</span>
                        <span class="i-member-value {{value_class}}">{{value}}</span>
                    </li>
                  </ul>
                  <details class="member-details"><summary>詳細介紹 (點擊展開)</summary> <div class="member-intro">  </div> </details>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{{pagination_goes_here}}
<script>

  for(var i = 0;i < $('.i-member img').length ; i++){
    if($('.i-member img').eq(i).attr('alt')=="" ){
      $('.i-member img').eq(i).attr('alt','noname');
      $('.i-member img').eq(i).attr('title','noname');
      $('.i-member img').eq(i).parent().attr('title','noname');
    }
  }
  for(var i = 0;i < $('.i-member span.member-data-value-name a').length ; i++){
    if($('.i-member span.member-data-value-name a').eq(i).html().trim().replace('&nbsp;','') == "")
      $('.i-member span.member-data-value-name a').eq(i).html('noname');
  }
function moveProfileItemsIntoPicWrap() {
  $('.i-member-item').each(function () {
    const $memberItem = $(this);
    const $picWrap = $memberItem.find('.i-member-pic-wrap');

    if (!$picWrap.length) return;

    // ① 有姓名的 profile-item
    const $nameProfileItem = $memberItem
      .find('.i-member-profile-item')
      .has('.member-data-value-name');

    if ($nameProfileItem.length) {
      $nameProfileItem.appendTo($picWrap);
    }

    // ② 只抓「本 i-member-item 中,包含 .member-data-title-0 的 profile-item」
    const $title0ProfileItems = $memberItem
      .find('.i-member-profile-item')
      .has('.member-data-title-0');

    if ($title0ProfileItems.length) {
      $title0ProfileItems.appendTo($picWrap);
    }

    // ③ 只抓「本 i-member-item 中,包含 .member-data-value-8 的 profile-item」
    const $title8ProfileItems = $memberItem
      .find('.i-member-profile-item')
      .has('.member-data-value-8');

    // 找到本 i-member-item 中的 .i-member-profile-data-wrap
    const $profileDataWrap = $memberItem.find('.i-member-profile-data-wrap');

    if ($profileDataWrap.length && $title8ProfileItems.length) {
      $title8ProfileItems.insertAfter($profileDataWrap);

      // 加上 CSS 樣式
      $title8ProfileItems.css({
        'width': 'auto',
        'float': 'right',
        'margin-top': '1em'
      });
    }
  });
}


$(function () {
  moveProfileItemsIntoPicWrap();
});
$(function () {

  $('.i-member-item').each(function () {

    const $item = $(this);
    const $profileList = $item.find('.i-member-profile-list');
    const $target = $item.find('.member-details .member-intro');

    // 保護：必要元素不存在就跳過
    if (!$profileList.length || !$target.length) return;

    // 取倒數兩個 .i-member-profile-item
    const $lastTwoItems = $profileList
      .children('.i-member-profile-item')
      .slice(-2);

    // 移動到 member-intro 裡
    $lastTwoItems.appendTo($target);

  });

});
function removeEmptyMemberDetails() {
    $('.i-member-item').each(function() {
        // 在當前的 .i-member-item 中找到 .member-intro
        var $memberIntro = $(this).find('.member-intro');
        
        // 檢查 .member-intro 是否為空(去除空白後)
        if ($.trim($memberIntro.text()) === '' && $memberIntro.children().length === 0) {
            // 移除當前 .i-member-item 內的 .member-details
            $(this).find('.member-details').remove();
        }
    });
}
$(document).ready(function() {
    removeEmptyMemberDetails();
});
$(document).ready(function() {
    $('.i-member-item').each(function() {
        var $item = $(this);
        var $profileList = $item.find('.i-member-profile-list');
        
        if ($profileList.is(':empty') || $.trim($profileList.html()) === '') {
            $item.find('.i-member-profile-data-wrap').remove();
            $item.find('.i-member-pic-wrap').css('width', '100%').removeClass('col-sm-4').addClass('col-sm-12');
        }
    });
});
</script>
<style>
.member-data-title-5 {
    display: none;
}
details.member-details {
    clear: both;
    width: 100%;
}
q {
    border: 3px solid #f29d4b;
    border-radius: 20px;
    padding: 0.4em;
    display: inline-block;
    margin-right: 0.5em;
    margin-bottom: 0.5em;
    @media(max-width:480px){

    }
}
.member-data-title-name {
    display: none !important;
}
.i-member-title {
    font-weight: bold;
    color: #8b281f;
    font-size: 1.2em;
    display: block;
}
.i-member-profile-item{
  @media(min-width:480px){
    width: 50%;
    float: left;
    &:last-child{
      width:100%;
    }
  }
}
.member-data-value-name{
    font-weight: 700;
    font-size: 1.4em;
}
.i-member-pic-wrap{
  .i-member-profile-item{
    margin-top: 1em;
    font-size: 1em;
    margin-bottom: 0;
    &:last-child{
      margin-top: 0;
    }
    @media(min-width:480px){
      width: 100%;
      float:none;
    }
  }
}
.i-member-profile-data-wrap.col-sm-9 {
    background: #fff;
    border-radius: 1em;
    padding: 0.8em;
}
</style>