fix: プロフィールカード周りを調整

src/develop/_layouts/two-column.html

@@ -89,7 +89,7 @@ <h2 class="sr-only">キーワード検索</h2>
 
           <section class="mt-8">
             <h2 class="mb-5 text-gray-800 font-bold">プロフィール</h2>
-            @include("/include/parts/profile-card.html")
+            @include("/include/user-profile/profile-card.html")
           </section>
           @endsection
         </div>

src/develop/admin/user/field.html

@@ -0,0 +1,60 @@
+<h3 class="acms-admin-admin-title2">プロフィール</h3>
+<table class="adminTable acms-admin-table-admin-edit">
+  <tr>
+    <th><label for="input-text-position">所属</label><i data-acms-tooltip="ユーザーが所属する部署などです。" class="acms-admin-icon-tooltip js-acms-tooltip-hover"></i></th>
+    <td>
+      <input type="text" name="position" value="{position}" size="30" id="input-text-position">
+      <input type="hidden" name="field[]" value="position">
+    </td>
+  </tr>
+  <tr>
+    <th><label for="input-text-user_title">肩書き</label><i data-acms-tooltip="ユーザーの肩書きです。" class="acms-admin-icon-tooltip js-acms-tooltip-hover"></i></th>
+    <td>
+      <input type="text" name="user_title" value="{user_title}" size="30" id="input-text-user_title">
+      <input type="hidden" name="field[]" value="user_title">
+    </td>
+  </tr>
+  <tr>
+    <th>画像
+      <i class="acms-admin-icon-tooltip js-acms-tooltip" data-acms-tooltip="ユーザーの画像です。"></i>
+    </th>
+    <td class="js-media-field">
+      <div class="js-droparea" data-thumbnail="{image@thumbnail}" data-type="image" style="width:200px"></div>
+      <p class="js-text acms-admin-text-danger" style="display:none">許可されていないファイルのため挿入できません。</p>
+      <div class="acms-admin-margin-top-mini">
+        <button type="button" class="js-insert acms-admin-btn" data-type="image">メディアを選択</button>
+      </div>
+      <input type="hidden" name="image" value="{image}" class="js-value">
+      <input type="hidden" name="field[]" value="image">
+      <input type="hidden" name="image:extension" value="media">
+    </td>
+  </tr>
+  <tr>
+    <th><label for="input-text-image-alt">代替テキスト</label><i data-acms-tooltip="ユーザーが登録した画像に代替をつけることができます。" class="acms-admin-icon-tooltip js-acms-tooltip-hover"></i></th>
+    <td>
+      <input type="text" name="image@alt" value="{image@alt}" size="30" id="input-text-image-alt">
+      <input type="hidden" name="field[]" value="image@alt">
+    </td>
+  </tr>
+  <tr>
+    <th><label for="input-text-x_twitter">X（旧Twitter）</label><i data-acms-tooltip="X（旧Twitter）のユーザページのURLを設定します。" class="acms-admin-icon-tooltip js-acms-tooltip-hover"></i></th>
+    <td>
+      <input type="text" name="x_twitter" value="{x_twitter}" size="50" id="input-text-x_twitter">
+      <input type="hidden" name="field[]" value="x_twitter">
+    </td>
+  </tr>
+  <tr>
+    <th><label for="input-text-facebook">Facebook</label><i data-acms-tooltip="FacebookのユーザページのURLを設定します。" class="acms-admin-icon-tooltip js-acms-tooltip-hover"></i></th>
+    <td>
+      <input type="text" name="facebook" value="{facebook}" size="50" id="input-text-facebook">
+      <input type="hidden" name="field[]" value="facebook">
+    </td>
+  </tr>
+  <tr>
+    <th><label for="input-text-github">Github</label><i data-acms-tooltip="GithubのプロフィールページのURLを設定します。" class="acms-admin-icon-tooltip js-acms-tooltip-hover"></i></th>
+    <td>
+      <input type="text" name="github" value="{github}" size="50" id="input-text-github">
+      <input type="hidden" name="field[]" value="github">
+    </td>
+  </tr>
+</table>

src/develop/include/head/js.html

@@ -4,7 +4,7 @@
 <script src="%{JS_LIB_JQUERY_DIR}jquery-%{JS_LIB_JQUERY_DIR_VERSION}.min.js" charset="UTF-8"></script><!-- BEGIN_MODULE Js -->
 <script src="/acms.js{arguments}" charset="UTF-8" id="acms-js"></script><!-- END_MODULE Js -->
 <!-- END_MODULE Touch_SessionWithContribution -->
-<!-- <script src="https://unpkg.com/htmx.org@2.0.1" integrity="sha384-QWGpdj554B4ETpJJC9z+ZHJcA/i59TyjxEPXiiUgN2WmTyV5OEZWCD6gQhgkdpB/" crossorigin="anonymous"></script> -->
+<script src="https://unpkg.com/htmx.org@2.0.1" integrity="sha384-QWGpdj554B4ETpJJC9z+ZHJcA/i59TyjxEPXiiUgN2WmTyV5OEZWCD6gQhgkdpB/" crossorigin="anonymous"></script>
 <!-- BEGIN_MODULE Vite -->
 <!-- BEGIN_IF [{useDevServer}/eq/1] -->
 <script type="module" src="{devServerUrl}/@vite/client"></script>

src/develop/include/user-profile/profile-card.html

@@ -0,0 +1,37 @@
+<!-- BEGIN_MODULE User_Profile id="" -->
+<!-- BEGIN user:loop -->
+<div class="w-full mt-3 border border-gray-200 rounded-lg shadow-sm">
+  <div class="flex flex-col items-center justify-center p-5">
+    <!-- BEGIN_IF [{image@path}/nem] -->
+    <img class="w-32 h-32 mb-6 rounded-full" src="%{MEDIA_ARCHIVES_DIR}{image@path}" alt="{image@alt}">
+    <!-- ELSE_IF [{icon}/nem] -->
+    <img class="w-32 h-32 mb-6 rounded-full" src="%{ARCHIVES_DIR}{icon}" alt="">
+    <!-- END_IF -->
+
+    <h2 class="text-indigo-500 text-lg font-bold">{name}</h2><!-- BEGIN position:veil -->
+    <p class="text-gray-800">{position}</p><!-- END position:veil --><!-- BEGIN title:veil -->
+    <p class="text-gray-800">{user_title}</p><!-- END title:veil -->
+  </div>
+
+  <!-- BEGIN sns:veil -->
+  <div class="flex border-t border-gray-200 divide-x divide-gray-200">
+    <!-- BEGIN x_twitter:veil -->
+    <a href="{x_twitter}" class="flex-1 block p-5 text-center text-gray-300 transition duration-200 ease-out hover:bg-gray-100 hover:text-gray-500">
+      <img src="/images/icons/x.svg" alt="" class="w-6 h-6 mx-auto">
+    </a>
+    <!-- END x_twitter:veil -->
+    <!-- BEGIN facebook:veil -->
+    <a href="{facebook}" class="flex-1 block p-5 text-center text-gray-300 transition duration-200 ease-out hover:bg-gray-100 hover:text-gray-500">
+      <img src="/images/icons/facebook.svg" alt="" class="w-6 h-6 mx-auto">
+    </a>
+    <!-- END facebook:veil -->
+    <!-- BEGIN github:veil -->
+    <a href="{github}" class="flex-1 block p-5 text-center text-gray-300 transition duration-200 ease-out hover:bg-gray-100 hover:text-gray-500">
+      <img src="/images/icons/github.svg" alt="" class="w-6 h-6 mx-auto">
+    </a>
+    <!-- END github:veil -->
+  </div>
+  <!-- END sns:veil -->
+</div>
+<!-- END user:loop -->
+<!-- END_MODULE User_Profile -->