Template talk:Navbox/编辑请求 - Grandom(2020.12.08)

由Grandom提出的对Template:Navbox、Template:Navbox subgroup、MediaWiki:Gadget-desktop-styles.css和MediaWiki:Gadget-mobile-styles.css的编辑请求：

状态：   完成

平时编辑过程中陆续注意到navbox里的一些小问题，但考虑到其在全站大面积使用也就没急着提交。前阵子注意到模块化navbox取得了一些进展，所以这次集中请求编辑，希望在完全模块化之前解决这些问题。
由于涉及页面较多，内容较长，所以单开了一个讨论页来申请。这里召唤两位熟悉的前辈@AnnAngela和@サンムル帮助审核，也欢迎其他大佬给出建议。
所有修改一共分成四部分，可以使用右侧的切换按钮分别显示每部分修改与下方的说明。

grouppadding	不显示不显示显示显示
title居中	不显示不显示显示显示
移动端绿条	不显示不显示显示显示
其他问题	不显示不显示显示显示

Template:Navbox ---Title and Navbar--- -->{{#if:{{{title|}}}|<tr>{{#if:{{{titlegroup|}}}|<!--  --><td class="navbox-group" style="{{{basestyle|}}};<!--  -->padding:{{{grouppadding|0 {{#ifeq:{{{border|{{{1|}}}}}}|subgroup|0.75em|1em}}}}};{{{groupstyle|}}};{{{titlegroupstyle|}}}">{{{titlegroup|}}}</td><!--  --><th style="border-left:2px solid #fdfdfd;width:100%;|<th style="}}{{{basestyle|}}};{{{titlestyle|}}}" <!--  -->colspan={{#expr:2{{#if:{{{imageleft|}}}|+1}}{{#if:{{{image|}}}|+1}}{{#if:{{{titlegroup|}}}|-1}}}} <!--  -->class="navbox-title"><!-- -->{{#if:{{#switch:{{{navbar|}}}|plain|off=1}}<!--  -->{{#if:{{{name|}}}||{{#switch:{{{border|{{{1|}}}}}}|subgroup|child|none=1}}}}|<!--  -->{{#ifeq:{{{navbar|}}}|off|{{#ifeq:{{{state|}}}|plain|<div style="float:right;width:662.78em;">&nbsp;</div>}}|<!--  -->{{#ifeq:{{{state|}}}|plain||<div style="float:left; width:662.78em;text-align:left;">&nbsp;</div>}}}}|<!--  --><div style="float:left; width:662.78em;text-align:left;"><span class="mobileonly">&nbsp;</span><!--  -->{{Navbar|{{{name}}}|fontstyle={{{basestyle|}}};{{{titlestyle|}}};border:none;|mini=1}}<!--  --></div>{{#ifeq:{{{state|}}}|plain|<div style="float:right;width:662.78em;">&nbsp;</div>}}}}<!--  --><span style="font-size:{{#switch:{{{border|{{{1|}}}}}}|subgroup|child|none=100|#default=110}}%;"><!--  -->{{{title}}}</span></th></tr>}}<!-- 需要对每个group进行修改： -->{{#if:{{{list2|}}}|<!--  -->{{#if:{{{title|}}}{{{above|}}}{{{list1|}}}|<tr style="height:2px"><td></td></tr>}}<tr><!--  -->{{#if:{{{group2|}}}|<td class="navbox-group" style="{{{basestyle|}}};<!--  -->padding:{{{grouppadding|0 {{#ifeq:{{{border|{{{1|}}}}}}|subgroup|0.75em|1em}}}}};{{{groupstyle|}}};{{{group2style|}}}"><!--  -->{{{group2}}}</td><td style="text-align:left;border-left:2px solid #fdfdfd;|<td colspan=2 style="}}<!--  -->width:100%;padding:0px;{{{liststyle|}}};{{{evenstyle|}}};{{{list2style|}}}" <!--  -->class="navbox-list navbox-{{#ifeq:{{{evenodd|}}}|swap|odd|{{{evenodd|even}}}}}"><!--  --><div style="padding:{{{listpadding|0em 0.25em}}}">{{{list2}}}</div></td></tr>}}<!--	MediaWiki:Gadget-desktop-styles.css .navbox-group {     font-weight: 700;     padding-left: 1em;     padding-right: 1em;     padding-left: 1em;     padding-right: 1em;     white-space: nowrap; } .collapseButton {     float: right;     font-weight: 400;     text-align: right;     width: auto; } .navbox .collapseButton {     width: 6em; }.collapseButton {     float: right;     font-weight: 400;     text-align: right;     width: auto; } .navbox .collapseButton {     width: 6em; }
	MediaWiki:Gadget-mobile-styles.css html > body.skin-minerva .navbox {     border: 1px solid #aaa;     clear: both;     padding: 1px;     text-align: center;     width: 100%;     background: #fdfdfd; } html > body.skin-minerva .navbox-subgroup {     background: #fdfdfd; } html > body.skin-minerva .navbox-subgroup .navbox-group, html > body.skin-minerva .navbox-abovebelow {     background: #e6f6e6; } html > body.skin-minerva .navbox-title>div:first-of-type {     display: none; } html > body.skin-minerva .navbox-title>div:first-of-type {     display: none; } @media screen and (max-width: 640px) {     html > body.skin-minerva .navbox-group,     html > body.skin-minerva .navbox-list,     html > body.skin-minerva .navbox-title {         display: block;         width: 100% !important;         box-sizing: border-box;     }     html > body.skin-minerva .navbox-group+* {         display: block;         width: 100%;         display: block;         width: 100%;         border-left: 1em solid #a5e4a5 !important;         padding-left: 3px !important;         padding-top: 3px !important;         border-left: 1em solid #a5e4a5 !important;         padding-left: 3px !important;         padding-top: 3px !important;         border-left: 0 !important;         border-top: 2px solid #fdfdfd;         box-sizing: border-box;         box-sizing: border-box;     }     html > body.skin-minerva .navbox-subgroup .navbox-group+* {         border-left: 1em solid #e6f6e6 !important;     }     html > body.skin-minerva .navbox-subgroup .navbox-group+* {         border-left: 1em solid #e6f6e6 !important;     }     html > body.skin-minerva .navbox-group + .navbox-list > .navbox-subgroup {         border-left: .75em solid transparent;     }     html > body.skin-minerva .navbox td[rowspan] {         display: none;     } }
Template:Navbox subgroup |border = {{#if:{{{border|}}}|{{{border}}}|childchildsubgroup}} |groupwidth = {{{groupwidth|}}}|groupwidth = {{{groupwidth|}}} |bodyclass = {{{bodyclass|}}}|bodyclass = {{{bodyclass|}}} |titleclass = {{{titleclass|}}}|titleclass = {{{titleclass|}}} |aboveclass = {{{aboveclass|}}}|aboveclass = {{{aboveclass|}}} |belowclass = {{{belowclass|}}}|belowclass = {{{belowclass|}}} |groupclass = {{{groupclass|}}}|groupclass = {{{groupclass|}}} |listclass = {{{listclass|}}}|listclass = {{{listclass|}}} |style = display:table;display:table;{{{style|}}};{{{bodystyle|}}} |groupstyle = padding-left:0em;padding-right:0em;padding-left:0em;padding-right:0em;{{{groupstyle|}}} |{{#if:{{{evenodd|}}}|evenodd|void1}} = {{{evenodd|}}} |{{#if:{{{listpadding|}}}|listpadding|void2}} = {{{listpadding|}}} |{{#if:{{{grouppadding|}}}|grouppadding|void3}} = {{{grouppadding|}}} 需要对每个group进行修改： |group1 = {{#if:{{{group1|}}}|<div style="padding:{{{grouppadding|0em 0.75em;}}}">{{#if:{{{group1|}}}|<div style="padding:{{{grouppadding|0em 0.75em;}}}">{{{group1|}}}</div>}}</div>}}

grouppadding
与listpadding不同，grouppadding目前是一个仅供{{Navbox subgroup}}使用的参数，而且是以“先用0覆盖样式表的默认值，再套一层div并规定其左右边距”这种迂回的方式修改了其默认值，而且会与groupstyle发生冲突。这里将这一参数整合进{{Navbox}}中。值得一提的是，修改后的{{Navbox subgroup}}与{{Navbox|subgroup}}已经完全一致，英文维基则已经用后者完全代替并删除了前者。

title居中
{{Navbox}}中Navbar一节的本意是通过固定查论编和[折叠]的宽度为6em，并在只出现一个时填充一个空白div，来保证标题居中。但现在的[折叠]按钮不再使用旧的类名collapseButton，导致规定的宽度失效。
如果用同样的方法固定现在的[折叠]按钮，点击按钮后出现的边框会比文字宽出一截影响美观。所以这里修改为固定查论编和空白div为2.78em，使其在绝大多数字体下与[折叠]等宽。
另，因为现在子元素{{navbar}}已经自带nomobile，所以将样式表中的display:none删除，并效仿空白div添加一个mobileonly的空格使移动版标题也居中。

移动端绿条
移动版窄屏下，为了便于区分，每个子分类中通过样式表添加了左侧的border“绿条”，由于该border在非窄屏视图中充当“竖线”的作用，所以无法在不影响非窄屏表现的前提下修改颜色。目前一般将其修改为透明来改善观感。常用的修改方式{{navboxmfix}}操作较繁琐，效果差强人意（图2）；只将样式表规定的绿色改为透明有时看起来也不协调（图3）。于是这里重写了缩进的生成逻辑，进一步解决这个问题。

‌外部图片

查看原始图片

原效果

‌外部图片

查看原始图片

修改后

‌外部图片

查看原始图片

{{navboxmfix}}

‌外部图片

查看原始图片

修改后

‌外部图片

查看原始图片

border-color透明

‌外部图片

查看原始图片

修改后

其他问题
其他的一些小问题，包括：
①{{Navbox subgroup}}中多余的{{Navbox}}中没有对应参数的参数；
②{{Navbox subgroup}}中已经整合到{{Navbox}}的重复样式；
③移动版缺少的，导致和桌面版观感不同的背景颜色样式；
④移动版窄屏下，覆盖某些元素规定的宽度（也在移动端绿条问题和grouppadding问题中起了一些作用）；
⑤移动版窄屏下，隐藏两侧图片。

以上所有更改已应用在…/naubox、…/naubox subgroup、…/desktop.css和…/mobile.css中，并利用…/宝可梦系列角色、…/fripSide和在数十个大家族模板中以预览的方式进行测试。
待进一步审核确认后，我也会提供四个页面修改后的完整代码用于编辑。—— Grandom 2020年12月8日 (二) 03:03 (CST)

---

看下来修改的wiki部分没问题，css部分还需要@AnnAngela的意见。P.S.这个编辑页面做得太精美了，建议永久留存。--サンムル（讨论） 2020年12月8日 (二) 10:37 (CST)

感谢 为了代码不被识别处理，用各种转义跟wikitext和HTML斗智斗勇了好久。—— Grandom 2020年12月8日 (二) 17:38 (CST)

关于标题居中，不建议手工计算文本宽度，可以考虑position:absolute。

话说这个申请放在单开的用户讨论页，真的有其他人会看到吗……——移动版用户 Bhsd（讨论） 2020年12月9日 (三) 02:13 (CST)

这个地方是以尽量减小改动幅度为原则做了一些妥协。“既然不能限制折叠按钮的宽度，原来的6em也没什么特殊意义了，不如换成一个更接近居中的宽度。”是这么个思路。
换成绝对定位的话修改幅度有点大，有点担心可能在某些页面出现什么奇怪的问题：
Template:Navbox
---Title and Navbar---
-->{{#if:{{{title|}}}|<tr>{{#if:{{{titlegroup|}}}|<!--
 --><td class="navbox-group" style="{{{basestyle|}}};{{{groupstyle|}}};{{{titlegroupstyle|}}}">{{{titlegroup|}}}</td><!--
 --><th style="border-left:2px solid #fdfdfd;width:100%;|<th style="}}position:relative;{{{basestyle|}}};{{{titlestyle|}}}" <!--
 -->colspan={{#expr:2{{#if:{{{imageleft|}}}|+1}}{{#if:{{{image|}}}|+1}}{{#if:{{{titlegroup|}}}|-1}}}} <!--
 -->class="navbox-title"><!--

-->{{#if:{{#switch:{{{navbar|}}}|plain|off=1}}<!--
 -->{{#if:{{{name|}}}||{{#switch:{{{border|{{{1|}}}}}}|subgroup|child|none=1}}}}|<!--
 -->{{#ifeq:{{{navbar|}}}|off|{{#ifeq:{{{state|}}}|plain|<div style="float:right;width:6em;">&nbsp;</div>}}|<!--
 -->{{#ifeq:{{{state|}}}|plain||<div style="float:left; width:6em;text-align:left;">&nbsp;</div>}}}}|<!--
 --><div style="float:left; width:6em;position:absolute;text-align:left;"><!--
 -->{{Navbar|{{{name}}}|fontstyle={{{basestyle|}}};{{{titlestyle|}}};border:none;|mini=1}}<!--
 --></div>{{#ifeq:{{{state|}}}|plain|<div style="float:right;width:6em;">&nbsp;</div>}}}}<!--

MediaWiki:Gadget-desktop-styles.css 和 MediaWiki:Gadget-mobile-styles.css
.navbox-title > .mw-collapsible-toggle {
    position: absolute;
    right: 1em;
}
另外这四个页面基本都要管理员以上权限才能修改，监视了的人大概也不多。分类:受到保护无法编辑的页面在分类:积压工作里还是挺明显的，挂上一阵相关人员应该就都看到了…吧。—— Grandom 2020年12月9日 (三) 07:44 (CST)

成功地把我钓进来了XD--サンムル（讨论） 2020年12月10日 (四) 11:22 (CST)

看起来没什么大问题，请提供可供直接复制的代码。——From AnnAngela the Temporary Bureaucrat (Talk) 2020年12月10日 (四) 12:59 (CST)

@AnnAngela 感谢，一直以来的各种申请都麻烦AnnA姐了。navbox、navbox subgroup、Gadget-desktop-styles、Gadget-mobile-styles —— Grandom 2020年12月10日 (四) 15:43 (CST)

Done.——From AnnAngela the Temporary Bureaucrat (Talk) 2020年12月10日 (四) 21:08 (CST)

@AnnAngela {{Navbox}}Navbar一节有四个 被转换成正常空格了。没注意<pre>不能防止其转换。My bad… —— Grandom 2020年12月10日 (四) 21:33 (CST)

Fixed.——From AnnAngela the Temporary Bureaucrat (Talk) 2020年12月10日 (四) 21:46 (CST)

感谢 —— Grandom 2020年12月10日 (四) 21:55 (CST)

---

这此的更改和上次的就麻烦@サンムル同步到模块:nav了。
另外提报个模块:nav collapsible groups的bug：这里的liststyle应该只提交给子navbox的list，父navbox的list无需自定义样式参数，模块里多提交给了父navbox的list：

{{navbox with collapsible groups|style=display:inline-table;width:50%;vertical-align:top|name=test|title=模板:navbox with collapsible groups|group1=group1|list1=list1|state1=mw-uncollapsed|group2=group2|list2=list2 list2style="font-size:150%"|list2style=font-size:150%|state2=mw-uncollapsed}}
{{#invoke:nav|box|collapsible groups|style=display:inline-table;width:50%;vertical-align:top|name=test|title=模块:nav{{!}}box{{!}}collapsible groups|group1=group1|list1=list1|state1=mw-uncollapsed|group2=group2|list2=list2 list2style="font-size:150%"|list2style=font-size:150%|state2=mw-uncollapsed}}

P.S.修复后会将示例删除消除隐藏分类 —— Grandom 2020年12月10日 (四) 22:28 (CST)

Done.--サンムル（讨论） 2020年12月11日 (五) 09:57 (CST)

---

@Grandom width: 6em -> width 2.78em 的更改造成了布局Bug，父元素的宽度比子元素还小了，见图：截图 --聪明又可爱的妹空酱（讨论） 2020年12月12日 (六) 23:40 (CST)

@妹空酱 这里为6em时，在使用Wikiplus时父元素宽度也会小于子元素。但因为规定了子元素宽度所以应该不会影响布局，之前规定为140px，现在为fit-content !important，详见Special:差异/955613/4585025。—— Grandom 2020年12月13日 (日) 00:21 (CST)

测试了一下，fit-content属性同样可以解决新版Wikiplus的换行问题，建议添加至小工具，或者干脆将该条转移至全站桌面版CSS。@AnnAngela —— Grandom 2020年12月13日 (日) 00:33 (CST)

@Grandom 这与Wikiplus无关，此外Wikiplus不希望覆盖mw本身自带样式。父元素宽度小于子元素这本来就不合理，当前只是恰好能工作，此外我看不出这个地方要限制宽度的理由。cc @AnnAngela --聪明又可爱的妹空酱（讨论） 2020年12月13日 (日) 10:03 (CST)

我记得限制宽度是为了保证title能正居中而不是歪的，不过我早就改了=。=Special:差异/955613/4585025——From AnnAngela the Temporary Bureaucrat (Talk) 2020年12月13日 (日) 10:07 (CST)

@妹空酱 所以我才建议把这一条写进mw自带样式里啊，此处@AnnAngela，MediaWiki:Gadget-Wikiplus.css在使用新版Wikiplus时不生效。
或者干脆让Navbar成为绝对元素从根本上解决需要考虑子元素宽度的问题：
 --><div style="position:relative;float:left; width:2.78em;text-align:left;"><span class="mobileonly">&nbsp;</span><!--
 -->{{Navbar|{{{name}}}|style=position:absolute|fontstyle={{{basestyle|}}};{{{titlestyle|}}};border:none;|mini=1}}<!--
这样连MediaWiki:Gadget-Wikiplus.css的内容都可以省了。—— Grandom 2020年12月13日 (日) 11:37 (CST)

首先，css处无法检测是否安装了w+，所以只能在gadget样式里加（等新版正式发布后你仍然可以通过小工具来加载新版）。其次，如果写成绝度定位，那么窄屏+桌面版下可能会出现元素重叠问题。——From AnnAngela the Temporary Bureaucrat (Talk) 2020年12月13日 (日) 13:22 (CST)