顶栏图标改为与「标题+简介」整体垂直居中
用户:「图标应该在标题和它的简介的正中间…现在图标和上面的标题是对齐的,
把图标往下放一放,让标题和它下面的简介合起来和图标高度一样,
两个对齐上下。」
根因是结构问题,不是调 padding 能解决的:
以前图标和标题被 fb_software_badge() 包在同一个 .sw-badge 里(单行结构),
note 挂在它外面下面一层 ⇒ 图标天然只能对齐第一行文字,永远做不到两行居中。
改结构为「左图标 + 右文字列」两栏:
<a class="brand-mini">
<span class="brand-ic">图标</span> ← flex:none 30×30
<span class="brand-txt"> ← flex column
<span class="brand-title">标题</span>
<span class="brand-mini-note">简介</span>
</span>
</a>
外层 .brand-mini 用 align-items:center ⇒ 图标中线对齐文字列中线。
图标不再走 fb_software_badge(),改用 fb_software_icon() / icon_key 自己拼,
因为 badge 那个函数是把图标和名字绑死在一行的。
实测中线偏差:
桌面 1280:图标 18→48(中线 33.0),文字列 13.8→52.2(中线 33.0)→ 偏差 0.0px
手机 390:图标 17→43(中线 30.0),文字列 12.3→47.7(中线 30.0)→ 偏差 0.0px
首页(无软件时)仍是原来的 logo-mark + brand-text,未受影响;6 个路由全 200。
This commit is contained in:
+40
-11
@@ -34,20 +34,44 @@ p{margin:8px 0}
|
|||||||
/* 软件抽屉是 absolute + top:100%,需要它来做定位参照,否则会跑到页面最上面 */
|
/* 软件抽屉是 absolute + top:100%,需要它来做定位参照,否则会跑到页面最上面 */
|
||||||
}
|
}
|
||||||
.topbar .wrap{display:flex; align-items:center; gap:14px; min-height:66px; padding-top:9px; padding-bottom:9px; position:relative; box-sizing:border-box}
|
.topbar .wrap{display:flex; align-items:center; gap:14px; min-height:66px; padding-top:9px; padding-bottom:9px; position:relative; box-sizing:border-box}
|
||||||
/* 顶栏品牌位:两行结构
|
/* 顶栏品牌位:**左图标 + 右文字列**两栏
|
||||||
* 行1 = 图标 + 「XX 反馈系统」(软件主题色,17px)
|
*
|
||||||
* 行2 = 一句话简介(灰色 12.5px),只在有 note 时出现
|
* [📅] 同步日历反馈系统 ← 文字列
|
||||||
* 🔴 用户 2026-11-03:简介从内容区挪到这里,用灰色。
|
* 优秀的鸿蒙CalDav同步客户端
|
||||||
* 内容区那一行(标题+简介+我要反馈)与新顶栏完全重复,已删除。 */
|
*
|
||||||
.topbar .brand-mini{display:flex; flex-direction:column; align-items:flex-start; gap:1px; font-weight:700; font-size:17px; color:var(--fg); min-width:0; line-height:1.25}
|
* 🔴 用户 2026-11-03:「图标应该在标题和简介的正中间…
|
||||||
|
* 让标题和它下面的简介合起来和图标高度一样,两个对齐上下。」
|
||||||
|
* ⇒ 图标的垂直中线要与**两行文字整体**的中线重合,不是只对齐第一行。
|
||||||
|
*
|
||||||
|
* ⚠️ 关键在 align-items:center 作用在「图标 vs 文字列」这一层:
|
||||||
|
* 图标是 .brand-ic,文字列是 .brand-txt(内部再上下排 title/note)。
|
||||||
|
* 以前图标和标题被包在同一个 .sw-badge 里(单行结构),
|
||||||
|
* note 挂在它下面,图标天然只能对齐第一行 —— 那种结构做不到居中。
|
||||||
|
*/
|
||||||
|
.topbar .brand-mini{display:flex; flex-direction:row; align-items:center; gap:10px; font-weight:700; font-size:17px; color:var(--fg); min-width:0; line-height:1.25}
|
||||||
.topbar .brand-mini:hover{text-decoration:none; color:var(--fg)}
|
.topbar .brand-mini:hover{text-decoration:none; color:var(--fg)}
|
||||||
.topbar .brand-mini-row{display:flex; align-items:center; gap:10px; min-width:0}
|
/* 图标:固定 30×30 的方框,自身内容居中,不参与文字行高计算 */
|
||||||
|
.topbar .brand-ic{
|
||||||
|
width:30px; height:30px; flex:none;
|
||||||
|
display:flex; align-items:center; justify-content:center;
|
||||||
|
border-radius:9px; overflow:hidden;
|
||||||
|
}
|
||||||
|
.topbar .brand-ic img{width:30px; height:30px; object-fit:contain; display:block; border-radius:9px}
|
||||||
|
.topbar .brand-ic-ch{
|
||||||
|
font-size:17px; line-height:1; color:var(--swc, var(--brand)); font-weight:700;
|
||||||
|
}
|
||||||
|
/* 文字列:上下两行,自己成一组 */
|
||||||
|
.topbar .brand-txt{display:flex; flex-direction:column; justify-content:center; gap:1px; min-width:0}
|
||||||
|
.topbar .brand-title{
|
||||||
|
font-size:17px; font-weight:700; letter-spacing:.2px; line-height:1.25;
|
||||||
|
color:var(--swc, var(--brand));
|
||||||
|
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
|
||||||
|
}
|
||||||
.topbar .brand-mini-note{
|
.topbar .brand-mini-note{
|
||||||
font-size:12.5px; font-weight:400; color:var(--muted);
|
font-size:12.5px; font-weight:400; color:var(--muted);
|
||||||
line-height:1.35; max-width:520px;
|
line-height:1.3;
|
||||||
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
|
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
|
||||||
/* 与标题文字左对齐:让简介从图标右侧开始,而不是贴到图标左侧 */
|
max-width:520px;
|
||||||
padding-left:41px;
|
|
||||||
}
|
}
|
||||||
/* 顶栏里的软件标识:17px 字 + 32px 图标 ——
|
/* 顶栏里的软件标识:17px 字 + 32px 图标 ——
|
||||||
* 比「选择软件」标签(13.5px)大两号,又不至于压过内容区标题。 */
|
* 比「选择软件」标签(13.5px)大两号,又不至于压过内容区标题。 */
|
||||||
@@ -55,10 +79,15 @@ p{margin:8px 0}
|
|||||||
.topbar .brand-mini .sw-badge-nm{font-size:17px; font-weight:700; letter-spacing:.2px}
|
.topbar .brand-mini .sw-badge-nm{font-size:17px; font-weight:700; letter-spacing:.2px}
|
||||||
@media (max-width:560px){
|
@media (max-width:560px){
|
||||||
.topbar .wrap{min-height:60px; padding-top:8px; padding-bottom:8px}
|
.topbar .wrap{min-height:60px; padding-top:8px; padding-bottom:8px}
|
||||||
|
.topbar .brand-mini{font-size:15.5px; gap:8px}
|
||||||
|
.topbar .brand-ic{width:26px; height:26px}
|
||||||
|
.topbar .brand-ic img{width:26px; height:26px}
|
||||||
|
.topbar .brand-ic-ch{font-size:15px}
|
||||||
|
.topbar .brand-title{font-size:15.5px}
|
||||||
|
.topbar .brand-mini-note{font-size:11.5px; max-width:60vw}
|
||||||
.topbar .brand-mini .sw-badge-nm{font-size:15.5px}
|
.topbar .brand-mini .sw-badge-nm{font-size:15.5px}
|
||||||
.topbar .brand-mini .sw-badge-img{width:26px !important; height:26px !important}
|
.topbar .brand-mini .sw-badge-img{width:26px !important; height:26px !important}
|
||||||
.topbar .brand-mini .sw-badge{gap:7px}
|
.topbar .brand-mini .sw-badge{gap:7px}
|
||||||
.topbar .brand-mini-note{font-size:11.5px; padding-left:33px; max-width:60vw}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ---------- 右上角三横线按钮 + 下拉菜单 ---------- */
|
/* ---------- 右上角三横线按钮 + 下拉菜单 ---------- */
|
||||||
|
|||||||
+1
-1
@@ -8,7 +8,7 @@ if (!defined('FB_ROOT')) {
|
|||||||
define('FB_ROOT', dirname(__DIR__));
|
define('FB_ROOT', dirname(__DIR__));
|
||||||
// 静态资源版本号:改 assets/ 下的 css/js 后把这个数字 +1,
|
// 静态资源版本号:改 assets/ 下的 css/js 后把这个数字 +1,
|
||||||
// 让浏览器与 CDN 缓存失效。全站只此一处,别再往页面里写死数字。
|
// 让浏览器与 CDN 缓存失效。全站只此一处,别再往页面里写死数字。
|
||||||
if (!defined('FB_ASSET_V')) { define('FB_ASSET_V', 35); }
|
if (!defined('FB_ASSET_V')) { define('FB_ASSET_V', 36); }
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ------------------------------------------------------------------
|
/* ------------------------------------------------------------------
|
||||||
|
|||||||
+24
-6
@@ -85,16 +85,34 @@ function fb_layout_head($title, array $opt = []) {
|
|||||||
* 那个「同步日历反馈系统」下面那个位置,用个灰色的。」
|
* 那个「同步日历反馈系统」下面那个位置,用个灰色的。」
|
||||||
* 这样内容区就不用再重复一遍标题和简介了。 */
|
* 这样内容区就不用再重复一遍标题和简介了。 */
|
||||||
$swNoteTop = !empty($curSw['note']) ? trim((string)$curSw['note']) : '';
|
$swNoteTop = !empty($curSw['note']) ? trim((string)$curSw['note']) : '';
|
||||||
|
/* 图标要单独拿出来放在左边,才能与「标题 + 简介」两行**整体**垂直居中。
|
||||||
|
* 🔴 用户 2026-11-03:「图标应该在标题和简介的正中间…现在图标和上面的标题
|
||||||
|
* 是对齐的、在图标的正中间…把图标往下放一放,让标题和它下面的简介合起来
|
||||||
|
* 和图标高度一样,两个对齐上下。」
|
||||||
|
* ⇒ 结构必须是「图标 | 文字列」两栏,所以这里不用 fb_software_badge()
|
||||||
|
* (那个函数把图标和名字包在同一个 .sw-badge 里,天然是单行)。
|
||||||
|
* 改用 fb_software_icon()/icon_key 自己拼图标,名字单独放右侧。 */
|
||||||
|
$bIcon = fb_software_icon($curSw);
|
||||||
|
$bKey = trim((string)(isset($curSw['icon_key']) ? $curSw['icon_key'] : ''));
|
||||||
|
$bImg = $bKey !== '' ? fb_icon_url($bKey, 64) : '';
|
||||||
|
$bTitle = fb_software_site_title($curSw);
|
||||||
?>
|
?>
|
||||||
<a class="brand-mini" href="<?php echo e(fb_software_list_url($curSw)); ?>"
|
<a class="brand-mini" href="<?php echo e(fb_software_list_url($curSw)); ?>"
|
||||||
style="--swc:<?php echo e($curSwColor); ?>"
|
style="--swc:<?php echo e($curSwColor); ?>"
|
||||||
title="<?php echo e(fb_software_site_title($curSw)); ?>">
|
title="<?php echo e($bTitle); ?>">
|
||||||
<span class="brand-mini-row">
|
<span class="brand-ic" aria-hidden="true">
|
||||||
<?php echo fb_software_badge($curSw, 'brand', fb_software_site_title($curSw)); ?>
|
<?php if ($bImg !== ''): ?>
|
||||||
|
<img src="<?php echo e($bImg); ?>" alt="" width="30" height="30" loading="lazy">
|
||||||
|
<?php else: ?>
|
||||||
|
<span class="brand-ic-ch"><?php echo e($bIcon); ?></span>
|
||||||
|
<?php endif; ?>
|
||||||
|
</span>
|
||||||
|
<span class="brand-txt">
|
||||||
|
<span class="brand-title"><?php echo e($bTitle); ?></span>
|
||||||
|
<?php if ($swNoteTop !== ''): ?>
|
||||||
|
<span class="brand-mini-note"><?php echo e($swNoteTop); ?></span>
|
||||||
|
<?php endif; ?>
|
||||||
</span>
|
</span>
|
||||||
<?php if ($swNoteTop !== ''): ?>
|
|
||||||
<span class="brand-mini-note"><?php echo e($swNoteTop); ?></span>
|
|
||||||
<?php endif; ?>
|
|
||||||
</a>
|
</a>
|
||||||
<?php else: ?>
|
<?php else: ?>
|
||||||
<a class="brand-mini" href="./" title="<?php echo e($site); ?>">
|
<a class="brand-mini" href="./" title="<?php echo e($site); ?>">
|
||||||
|
|||||||
Reference in New Issue
Block a user