标题字号折中;软件选择移入右上角汉堡菜单
用户反馈三点: 1. 顶栏图标太大(56px) 2. 顶栏文字反而比内容区还小 —— 主次颠倒 3. 不要再整页显示「选择软件:」,改成右上角三横线按钮,点开下拉选 字号标准(用户给的基准): 「选择软件」标签 13.5px,比它大两号 ≈ 17px。 → 顶栏 17px 字 / 30px 图标;内容区 15px 字 / 24px 图标。 这样 17 > 15,层级正确。 之前两轮都搞错了: - 先给顶栏 46px 图标 + 22px 字:图标过大 - 再给 56px + 26px:更大 - 而且内容区当时是 30px,比顶栏还大,视觉上「上面比下面小」 软件选择改造: - 顶栏右侧新增汉堡按钮(三横线,展开变×) - 抽屉面板放在 header 内、正文之上,默认 hidden - 列出软件:图标 + 名字 + 当前项标记 - index.php 删除整行「选择软件:」+ chips - new.php 表单内也删除那排 chip(同一选择不该出现两次) - 交互:点击展开/再点收起/点外部关闭/Esc 关闭 - 宽屏抽屉横向排列,窄屏纵向 验证(CDP 驱动真实浏览器): 汉堡按钮存在、初始收起、点击展开、aria 同步、软件条目与当前标记齐全、 再点收起、点外部关闭 —— 全部 PASS; 顶栏字号 17px > 内容区 15px,页面无裸露 ?>; 全部路由 200;窄屏 15px/13px 层级仍正确。
This commit is contained in:
+40
-3
@@ -55,8 +55,13 @@ function fb_layout_head($title, array $opt = []) {
|
||||
/* 顶栏品牌位:当前在哪个软件下,就显示「图标 + XX 反馈系统」。
|
||||
* 这是页面唯一的主标题 —— 多软件共用一套反馈系统,
|
||||
* 用户要一眼看清「我现在是在给哪个软件的反馈系统提问题」。
|
||||
* 内容区不再重复一遍同样的文字,只保留「图标 + 软件名」。 */
|
||||
* 内容区不再重复一遍同样的文字,只保留「图标 + 软件名」。
|
||||
*
|
||||
* 字号刻意比「选择软件」那个标签大一号左右(17px),
|
||||
* 不再压过内容区标题 —— 之前给到 26px 反而比下面的字还小,
|
||||
* 视觉上主次颠倒。 */
|
||||
$curSw = isset($opt['software']) && is_array($opt['software']) ? $opt['software'] : null;
|
||||
$swList = fb_softwares(true);
|
||||
?>
|
||||
<?php if ($curSw): ?>
|
||||
<a class="brand-mini" href="./" title="<?php echo e(fb_software_site_title($curSw)); ?>">
|
||||
@@ -70,9 +75,41 @@ function fb_layout_head($title, array $opt = []) {
|
||||
<?php endif; ?>
|
||||
<div class="spacer"></div>
|
||||
<a class="navlink hide-sm" href="./">全部问题</a>
|
||||
<?php if (fb_admin_logged_in()): ?><a class="navlink" href="admin.php">管理后台</a><?php endif; ?>
|
||||
<a class="btn-mini" href="new.php">我要反馈</a>
|
||||
<?php if (fb_admin_logged_in()): ?><a class="navlink hide-sm" href="admin.php">管理后台</a><?php endif; ?>
|
||||
<a class="btn-mini hide-sm" href="new.php">我要反馈</a>
|
||||
|
||||
<?php if (count($swList) > 1): ?>
|
||||
<?php /* 软件切换收进右上角汉堡菜单:
|
||||
* 原来平铺一行「选择软件:」+ 若干 chip,占掉一整行,
|
||||
* 而且软件一多就把列表往下推。收进抽屉后页面更干净,
|
||||
* 移动端也不用单独适配那排 chip。 */ ?>
|
||||
<button type="button" class="sw-toggle" id="swToggle"
|
||||
aria-label="切换软件" aria-expanded="false" aria-controls="swPanel">
|
||||
<span></span><span></span><span></span>
|
||||
</button>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<?php if (count($swList) > 1): ?>
|
||||
<div class="sw-panel" id="swPanel" hidden>
|
||||
<div class="wrap">
|
||||
<div class="sw-panel-hd">选择软件</div>
|
||||
<div class="sw-panel-list">
|
||||
<?php foreach ($swList as $s): ?>
|
||||
<?php
|
||||
$on = $curSw && (int)$s['id'] === (int)$curSw['id'];
|
||||
$href = fb_qs(['sw' => (string)$s['slug'], 'cat' => null, 'page' => null]);
|
||||
if ($href === '') { $href = '?sw=' . urlencode((string)$s['slug']); }
|
||||
?>
|
||||
<a class="sw-item<?php echo $on ? ' on' : ''; ?>" href="<?php echo e($href); ?>">
|
||||
<?php echo fb_software_badge($s, 'md'); ?>
|
||||
<?php if ($on): ?><span class="sw-item-cur">当前</span><?php endif; ?>
|
||||
</a>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</header>
|
||||
<main class="wrap">
|
||||
<?php
|
||||
|
||||
+11
-7
@@ -335,13 +335,17 @@ function fb_software_badge($software, $size = 'md', $label = '') {
|
||||
$icon = fb_software_icon($software);
|
||||
$name = $label !== '' ? (string)$label : (string)$software['name'];
|
||||
|
||||
/* 尺寸档位:
|
||||
* sm 软件选择器里的小标签
|
||||
* md 一般位置
|
||||
* lg 内容区「图标 + 软件名」
|
||||
* brand 顶栏主标题,要显著大于正文,图标与「XX 反馈系统」一起放大 */
|
||||
$px = ['sm' => 18, 'md' => 26, 'lg' => 38, 'brand' => 46];
|
||||
$fs = ['sm' => 14, 'md' => 19, 'lg' => 28, 'brand' => 32];
|
||||
/* 尺寸档位(以「选择软件」标签的 13.5px 为基准,逐档放大):
|
||||
* sm 18px 图标 / 14px 字 软件选择器里的小标签
|
||||
* md 26px 图标 / 19px 字 「选择软件」抽屉里的条目
|
||||
* lg 40px 图标 / 22px 字 内容区「图标 + 软件名」
|
||||
* brand 32px 图标 / 17px 字 顶栏主标题
|
||||
*
|
||||
* 🔴 用户明确指出:顶栏标题的字号「比下面还小」是错的,但给到 26px 又太大。
|
||||
* 折中标准 = 比「选择软件」那个 13.5px 标签大两号 ≈ 17px。
|
||||
* 图标同比缩到 32px,别让图标压过文字。 */
|
||||
$px = ['sm' => 18, 'md' => 26, 'lg' => 40, 'brand' => 32];
|
||||
$fs = ['sm' => 14, 'md' => 19, 'lg' => 22, 'brand' => 17];
|
||||
$box = isset($px[$size]) ? $px[$size] : 26;
|
||||
$fnt = isset($fs[$size]) ? $fs[$size] : 19;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user