kate522/wordpress-theme-aksrt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(share): mobile share chrome and tabbar poster entry

Browse Source 
Use a bottom sheet share panel on small screens and add a one-tap
poster button to the single-post footer tabbar extend.
This commit is contained in:
kate522
2026-07-16 22:31:18 +08:00
parent 357d710b1b
commit 2c31da1454
3 changed files with 76 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/frontend/single-post/author-actions.css
+53
View File
@@ -335,6 +335,59 @@ html.dark .share-item {
.theme-dark .share-item[data-platform="copy"]:hover { background: rgba(255,255,255,0.06); color: #ccc; }
.theme-dark .share-item[data-platform="poster"]:hover { background: rgba(245,158,11,0.12); color: #f59e0b; }
/* Narrow screens: bottom sheet so dropdown never clips off-screen */
@media (max-width: 767px) {
.share-dropdown {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: auto;
transform: none;
width: 100%;
max-width: none;
z-index: 1200;
padding: 0 0 calc(12px + env(safe-area-inset-bottom, 0px));
background: transparent;
}
.share-dropdown[aria-hidden="false"] {
animation: shareSheetIn 0.22s ease-out forwards;
}
@keyframes shareSheetIn {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.share-dropdown__grid {
justify-content: space-around;
flex-wrap: wrap;
gap: 6px;
margin: 0 10px;
padding: 14px 12px 16px;
border-radius: 14px 14px 10px 10px;
box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.16);
}
.share-item {
min-width: 64px;
flex: 1 1 28%;
max-width: 33%;
}
#share-qrcode-box {
position: static;
margin: 10px auto 0;
transform: none;
}
body.aksrt-share-sheet-open {
overflow: hidden;
}
body.aksrt-share-sheet-open::before {
content: '';
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.35);
z-index: 1190;
}
}
.theme-dark .post-drop-meta__menu,
html.dark .post-drop-meta__menu {
background: var(--surface-1, #323335);
assets/js/post-share.js
+6 -2
View File
@@ -135,7 +135,8 @@
function closeDropdown() {
dropdown.setAttribute('aria-hidden', 'true');
trigger.setAttribute('aria-expanded', 'false');
triggers.forEach(function (t) { t.setAttribute('aria-expanded', 'false'); });
document.body.classList.remove('aksrt-share-sheet-open');
if (window.AksrtShare && typeof window.AksrtShare.hideQrFallback === 'function') {
window.AksrtShare.hideQrFallback(qrBox);
} else if (qrBox) {
@@ -152,7 +153,10 @@
}
dropdown.setAttribute('aria-hidden', 'false');
trigger.setAttribute('aria-expanded', 'true');
triggers.forEach(function (t) { t.setAttribute('aria-expanded', 'true'); });
if (window.matchMedia && window.matchMedia('(max-width: 767px)').matches) {
document.body.classList.add('aksrt-share-sheet-open');
}
}
trigger.addEventListener('click', function (event) {
inc/helpers/aksrt-template-tags.php
+17
View File
@@ -1357,16 +1357,33 @@ if (!function_exists('aksrt_render_footer_tabbar_single_extend')) :
endif;
if ($share_on) :
$share_title = get_the_title($post_id);
$share_url = get_permalink($post_id) ?: '';
$share_image = get_the_post_thumbnail_url($post_id, 'large') ?: '';
?>
<button type="button"
class="tabbar-item single-action-tabbar action-share"
data-type="share"
data-share-title="<?php echo esc_attr((string) $share_title); ?>"
data-share-url="<?php echo esc_url((string) $share_url); ?>"
<?php if ($share_image !== '') : ?>data-share-image="<?php echo esc_url((string) $share_image); ?>"<?php endif; ?>
aria-haspopup="true"
aria-expanded="false"
aria-label="<?php esc_attr_e('分享', 'aksrt'); ?>">
<i class="fas fa-share-alt" aria-hidden="true"></i>
<?php if ($show_text) : ?><span><?php esc_html_e('分享', 'aksrt'); ?></span><?php endif; ?>
</button>
<button type="button"
class="tabbar-item single-action-tabbar action-poster"
data-type="poster"
data-share-platform="poster"
data-share-title="<?php echo esc_attr((string) $share_title); ?>"
data-share-url="<?php echo esc_url((string) $share_url); ?>"
<?php if ($share_image !== '') : ?>data-share-image="<?php echo esc_url((string) $share_image); ?>"<?php endif; ?>
aria-label="<?php esc_attr_e('海报', 'aksrt'); ?>">
<i class="fas fa-image" aria-hidden="true"></i>
<?php if ($show_text) : ?><span><?php esc_html_e('海报', 'aksrt'); ?></span><?php endif; ?>
</button>
<?php
endif;