avatar修改提示

整理代码

views/user/info.php

@@ -293,6 +293,18 @@ $darkMode = Yii::$app->user->identity->dark_mode;
         </div>
     </div>
 <?php
+Modal::begin([
+    'title' => '<h4>更改用户头像</h4>',
+    'id' => 'avatarModal',
+//    'size' => 'modal-sm',
+]);
+
+echo Html::tag('div', '<i class="fa-solid fa-circle-info" id="info_icon"></i>
+<p>要修改头像，请前往Gravatar<a href="https://gravatar.com/" target=”_blank”><i class="fa-solid fa-arrow-up-right-from-square"></i></a>，使用相同的电子邮箱地址创建/登录账户后对头像进行管理</p>
+<br>Q: 修改头像后不起作用?<br>A: 尝试ctrl+F5强制刷新或清除cache后刷新页面<br><a href="https://support.gravatar.com/" target=”_blank”>更多帮助</a>', ['class' => 'modal-body']);
+
+Modal::end();
+
 Modal::begin([
     'title' => '<h4>确定？</h4>',
     'id' => 'deleteAccountModal',

web/css/user-info.css

@@ -94,9 +94,11 @@
     color: rgb(100, 96, 100);
     font-size: 0.95rem;
 }
+
 html[data-bs-theme="dark"] .login-info-dv .user-login-info-content {
     color: inherit;
 }
+
 .accordion-item {
     margin-bottom: 5px;
     border-top: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color) !important;
@@ -152,9 +154,11 @@ html[data-bs-theme="dark"] .login-info-dv .user-login-info-content {
     font-size: 0.75rem;
     color: rgb(140, 139, 139);
 }
+
 html[data-bs-theme="dark"] .storage-columns span, .storage-columns p {
     color: inherit;
 }
+
 .storage-columns p {
     margin-bottom: 0.5rem !important;
 }
@@ -193,6 +197,12 @@ html[data-bs-theme="dark"] .storage-columns span, .storage-columns p {
     color: black;
     padding-left: 2px;
 }
+
 html[data-bs-theme="dark"] #current {
     color: inherit;
 }
+
+#info_icon {
+    font-size: 2em;
+    line-height: 1.5;
+}

web/js/user-info.js

@@ -33,3 +33,7 @@ $(document).ready(function () {
         });
     });
 });
+
+document.querySelector('.avatar-container').addEventListener('click', function () {
+    $('#avatarModal').modal('show');
+});