🎨 MBTI

FishPiOffical · Dec 24, 2023 · 5871808 · 5871808
1 parent 10251e2
commit 5871808
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 16 deletions.
diff --git a/src/main/resources/css/home.css b/src/main/resources/css/home.css
diff --git a/src/main/resources/css/mobile-base.css b/src/main/resources/css/mobile-base.css
diff --git a/src/main/resources/js/common.js b/src/main/resources/js/common.js
@@ -1545,6 +1545,18 @@ var Util = {
                     '            <div class="fn__ellipsis">\n' +
                     '                <a class="user-card__name" href="' + Label.servePath + '/member/' + userName + '"><b>' + userNickname + '</b></a>\n' +
                     '                <a class="ft-gray ft-smaller" href="' + Label.servePath + '/member/' + userName + '"><b>' + userName + '</b></a>\n';
+                if (mbti !== "") {
+                    let leftMbti = mbti;
+                    if (mbti.indexOf('-') > 0) {
+                        leftMbti = mbti.split('-')[0];
+                    }
+                    html += '' +
+                        '<a target="_blank" href="https://www.16personalities.com/ch/' + leftMbti + '-%E4%BA%BA%E6%A0%BC" class="tooltipped-new tooltipped__n" rel="nofollow"\n' +
+                        '   aria-label="TA是 ' + mbti + '">\n' +
+                        '   <span style="background-color: #b2b1ff;color: #fff;font-size: 12px;line-height: 20px;border-radius: 3px;height: 20px;display: inline-block;padding: 0 5px;vertical-align: middle;box-sizing: border-box;svg {margin-top: 2px;}">' +
+                        '   <svg style="vertical-align: -3px"><use xlink:href="#mbti"></use></svg> ' + mbti + '</span>' +
+                        '</a>\n';
+                }
                 html += '            </div>\n';
                 if (userIntro !== "") {
                     html += '' +
@@ -1620,19 +1632,6 @@ var Util = {
                         '    </svg>\n' +
                         '</a>\n';
                 }
-                if (mbti !== "") {
-                    let leftMbti = mbti;
-                    if (mbti.indexOf('-') > 0) {
-                        leftMbti = mbti.split('-')[0];
-                    }
-                    html += '' +
-                        '<a target="_blank" href="https://www.16personalities.com/ch/' + leftMbti + '-%E4%BA%BA%E6%A0%BC" class="tooltipped-new tooltipped__n" rel="nofollow"\n' +
-                        '   aria-label="TA是 ' + mbti + '">\n' +
-                        '    <svg>\n' +
-                        '        <use xlink:href="#mbti"></use>\n' +
-                        '    </svg>\n' +
-                        '</a>\n';
-                }
 
                 html += '' +
                     '<a class="tooltipped-new tooltipped__n" rel="nofollow" onclick="javascript:void(0)" style="background-color:#eeeeeecc;border-radius:5px;padding:0 7px 0 4px;cursor:default;color:#6d6c6c;font-size:12px;"\n' +

diff --git a/src/main/resources/js/common.min.js b/src/main/resources/js/common.min.js
diff --git a/src/main/resources/scss/home.scss b/src/main/resources/scss/home.scss
@@ -103,6 +103,23 @@
     line-height: 30px;
   }
 
+  .mbti {
+    background-color: #b2b1ff;
+    color: #fff;
+    font-size: 12px;
+    line-height: 20px;
+    border-radius: 3px;
+    height: 20px;
+    display: inline-block;
+    padding: 0 5px;
+    vertical-align: middle;
+    box-sizing: border-box;
+
+    svg {
+      margin-top: 2px;
+    }
+  }
+
   .online,
   .offline,
   .color_admin,

diff --git a/src/main/resources/scss/mobile-base.scss b/src/main/resources/scss/mobile-base.scss
@@ -2012,6 +2012,23 @@ code .dec {
     line-height: 30px;
   }
 
+  .mbti {
+    background-color: #b2b1ff;
+    color: #fff;
+    font-size: 12px;
+    line-height: 20px;
+    border-radius: 3px;
+    height: 20px;
+    display: inline-block;
+    padding: 0 5px;
+    vertical-align: middle;
+    box-sizing: border-box;
+
+    svg {
+      margin-top: 2px;
+    }
+  }
+
   .online,
   .offline,
   .color_admin,

diff --git a/src/main/resources/skins/classic/home/home-side.ftl b/src/main/resources/skins/classic/home/home-side.ftl
@@ -34,6 +34,11 @@
                         ${privateMessageLabel}
                     </button>
                 </#if>
+                <#if user.mbti != "">
+                    <a target="_blank" style="text-decoration: none" href="https://www.16personalities.com/ch/${user.mbti[0..3]}-%E4%BA%BA%E6%A0%BC" class="tooltipped-new tooltipped__n" rel="nofollow" aria-label="TA是 ${user.mbti}">
+                        <span class="mbti"><svg style="vertical-align: -3px"><use xlink:href="#mbti"></use></svg> ${user.mbti}</span>
+                    </a>
+                </#if>
                 <#if (isLoggedIn && ("adminRole" == currentUser.userRole || currentUser.userName == user.userName)) || 0 == user.userOnlineStatus>
                     <span class="tooltipped tooltipped-n" aria-label="<#if user.userOnlineFlag>${onlineLabel}<#else>${offlineLabel}</#if>">
                         <span class="<#if user.userOnlineFlag>online<#else>offline</#if>"><#if user.userOnlineFlag>在线<#else>离线</#if></span>

diff --git a/src/main/resources/skins/mobile/home/home-side.ftl b/src/main/resources/skins/mobile/home/home-side.ftl
@@ -34,6 +34,11 @@
                         ${privateMessageLabel}
                     </button>
                 </#if>
+                <#if user.mbti != "">
+                    <a target="_blank" style="text-decoration: none" href="https://www.16personalities.com/ch/${user.mbti[0..3]}-%E4%BA%BA%E6%A0%BC" class="tooltipped-new tooltipped__n" rel="nofollow" aria-label="TA是 ${user.mbti}">
+                        <span class="mbti"><svg style="vertical-align: -3px"><use xlink:href="#mbti"></use></svg> ${user.mbti}</span>
+                    </a>
+                </#if>
                 <#if (isLoggedIn && ("adminRole" == currentUser.userRole || currentUser.userName == user.userName)) || 0 == user.userOnlineStatus>
                     <span class="tooltipped tooltipped-n" aria-label="<#if user.userOnlineFlag>${onlineLabel}<#else>${offlineLabel}</#if>">
                         <span class="<#if user.userOnlineFlag>online<#else>offline</#if>"><#if user.userOnlineFlag>在线<#else>离线</#if></span>