navbar周りのUserCSSの再設計
リファクタリングしたい気分だったので
#2024/02/14 01:44
適用してみました
問題があればロールバック、そうでなければそれぞれのページに変更を適用しようと思っています
#2024/02/14 17:04
バグを発見
(修正済み) ある条件下でtitleが左にずれる
history back buttonが表示される環境かつ画面幅が767px以下
環境としてはiPadでSplit Viewを使ったときとか？
打ち消しマージン関連の計算を間違えてるらしい
iOS環境でキーボードを開いたままスクロールするとproject titleがどっか行く
これは例のやつか
修正した問題
brand iconが左にずれている
margin-left: -4px をしているらしいproject titleの隣の日付が上にずれている
navbarのheightが40pxなのに対してproject-homeのheightは42px
top: -2px とあるので下揃えで済ませているらしいproject titleがPC環境を前提に配置されている
モバイル環境だと下矢印が表示されなかったり、PWA環境だと戻るボタンが表示されたりするが、関係なく画面内の決まった位置に固定されている
expandable menuが短くなっている
ちなみに何もしないとこうなる
ので短くなっていた Settings#62e5e0641280f0000006829e
頑張ってこうする
project titleが常に見えていて欲しい人もいるかも
searchボタンとStreamボタンが離れている
もともとこう
searchボタンの左にpaddingが付いてる
画面幅に合わせていい感じに縮めるため？
paddingを消した
PCとモバイル環境の差で表示が崩れないように調整もしてある
狭い環境でも崩れない！
すごい
一旦元に戻す
reset.css/* https://scrapbox.io/villagepump/navbarが画面幅いっぱいに表示されるようになったのを元に戻すUserCSS */
.app .navbar .row {
max-width: unset;
margin: unset;
}
/* https://scrapbox.io/villagepump/プロジェクトタイトルの隣に今日の日付を表示するUserCSS */
.quick-launch .project-home {
padding: 0 12px;
}
.quick-launch .project-home .title::after {
content: unset;
margin-left: unset;
padding: unset;
background-image: unset;
background-size: unset;
background-repeat: unset;
}
/* https://scrapbox.io/villagepump/scrapboxのトップページへのリンクをnav_barに固定するUserCSS */
.quick-launch .project-home {
position: unset;
top: unset;
left: unset;
z-index: unset;
}
.quick-launch .project-home {
--tool-text-color: unset;
}
/* project titleの字体調節 */
/* https://scrapbox.io/villagepump/Settings#61fe3aa17838e30000725668 */
.quick-launch .project-home, .quick-launch .project-home .title {
font-family: unset;
font-weight: 600;
}
/* mobile edit menuを押せるように、.expandable-menuの長さを制限する */
/* Settings https://scrapbox.io/villagepump/Settings#62e5e0641280f0000006829e */
.expandable-menu {
max-width: calc(100% - 50px);
}
/* https://scrapbox.io/villagepump/ScrapboxのBrand_iconを井戸端にするUserCSS */
body {
--logo-url: url("/assets/img/logo_cut.svg");
}
.brand-icon {
content: unset;
width: 32px;
height: 32px;
background-size: 100%;
background-position: unset;
background-repeat: no-repeat;
background-color: unset;
border-radius: unset;
border: unset;
background-origin: unset;
margin-left: unset;
}style.css.navbar .row {
max-width: 1200px;
margin-right: auto;
margin-left: auto;
}style.css.navbar .navbar-menu>li {
width: 32px;
min-width: 24px;
}
.navbar .navbar-menu>li.stream-btn {
display: block !important;
min-width: unset;
}
.navbar .navbar-menu>li>a.mobile-search-toggle {
padding-left: unset;
}
.navbar:has(.browser-like-tool-menu) .navbar-menu>li>a.mobile-search-toggle {
justify-content: end;
}
.expandable-menu-margin {
min-width: 12px;
}brand iconが大きいのでそれに合わせて余白を変更
プロジェクトタイトルが長いとき用にwidthを画面幅に合わせて狭めるコードが入ってるけど、「井戸端」程度では必要なさそう
style.css.container:has(.quick-launch) {
width: 100%;
max-width: unset;
padding: unset;
margin: unset;
}
.quick-launch .flex-box {
display: unset;
}
.quick-launch .flex-box .flex-item {
min-width: unset;
}
.quick-launch .flex-box .flex-item:has(.left-box) {
container-type: inline-size;
position: fixed;
top: 0;
z-index: 1000;
width: 100%;
height: 40px;
pointer-events: none;
}
.quick-launch .flex-box .flex-item:has(.right-box) {
padding-right: 8px;
padding-left: 8px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.quick-launch .flex-box .flex-item:has(.right-box) {
width: 736px;
}
}
@media (min-width: 992px) {
.quick-launch .flex-box .flex-item:has(.right-box) {
width: 956px;
}
}
@media (min-width: 1200px) {
.quick-launch .flex-box .flex-item:has(.right-box) {
width: 1156px;
}
}
@media (min-width: 992px) {
.quick-launch .flex-box .flex-item:has(.right-box) {
width: calc(100% - 60px);
max-width: 1200px;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.quick-launch .flex-box .flex-item:has(.right-box) {
width: calc(100% - 30px);
}
}
.quick-launch .left-box { /* <ボタンなし; 下矢印なし */
--padding: 16px;
--history-back-button: 46px;
--brand-icon: 32px;
--kamon-caret-down: 24px;
--width-ratio: 0.3;
--col-brand: calc((100cqw - var(--padding) * 2) * var(--width-ratio));
--col-brand-contents: var(--brand-icon);
--toggle-button: 24px;
--page-menu: calc(158px + var(--toggle-button));
--mobile-edit-tools: calc(280px + var(--toggle-button));
width: var(--col-brand);
padding-left: var(--col-brand-contents);
margin-left: var(--padding);
}
@media (max-width: 767px) {
.quick-launch .left-box {
--padding: 8px;
--width-ratio: 0.7;
}
}
.app:has(.navbar .kamon-caret-down) .quick-launch .left-box { /* <ボタンなし; 下矢印あり */
--col-brand-contents: calc(var(--brand-icon) + var(--kamon-caret-down));
}
.app:has(.navbar .history-back-button) .quick-launch .left-box { /* <あり; 下矢印なし */
--col-brand-contents: calc(var(--history-back-button) - var(--padding) + var(--brand-icon));
}
.app:has(.navbar .history-back-button):has(.navbar .kamon-caret-down) .quick-launch .left-box { /* <ボタンあり; 下矢印あり */
--col-brand-contents: calc(var(--history-back-button) - var(--padding) + var(--brand-icon) + var(--kamon-caret-down));
}
.quick-launch .left-box > * {
pointer-events: auto;
}
.quick-launch .project-home {
min-height: unset;
/* padding: 0 6px; */
padding: 0 8px;
border: unset;
}
.app:not(:has(.navbar .kamon-caret-down)) .quick-launch .project-home {
/* margin-left: 2px; */
margin-left: 4px;
}
@media (max-width: 767px) {
.app:has(.page-menu.xs) .quick-launch .left-box {
--expandable-menu: var(--page-menu);
clip-path: inset(0 max(var(--padding) + var(--col-brand) - (100cqw - var(--expandable-menu)), 0px) 0 0);
}
.app:has(.page-menu.xs.mobile-edit-tools) .quick-launch .left-box {
--expandable-menu: var(--mobile-edit-tools);
}
}style.css.quick-launch .project-home::after {
display: block;
flex-shrink: 0;
height: 36px;
aspect-ratio: 4 / 3;
/* margin-left: 6px; */
margin-left: 10px;
content: "";
background-image: url("https://daiiz-apps.appspot.com/today/jp.svg");
background-repeat: no-repeat;
background-size: contain;
}style.css.quick-launch .flex-box .flex-item:has(.left-box) {
left: max((100% - 1200px) / 2 - 16px, 0px);
max-width: calc(1200px + 16px * 2);
margin-right: auto;
margin-left: auto;
}井戸端用のカスタム
style.css.brand-icon {
--logo-url: url("/api/pages/villagepump/brand-icon/icon");
width: 40px;
height: 40px;
background-color: white;
background-position: center;
background-size: cover;
border: 4px solid transparent;
border-radius: 50%;
}
.quick-launch .left-box {
--brand-icon: 40px;
}style.css.quick-launch .project-home {
--tool-text-color: white;
}style.css.quick-launch .project-home .title {
font-family: serif;
font-weight: 400;
}再構築に伴って不要な記述を削除
brand-iconのmargin-leftを考慮していた部分を削除
style.css:root {
--furikake-high-bottom: 15px;
--furikake-high-left: -7px;
}
@keyframes brand-furikake {
0% {
margin: 0;
transform: rotate(0deg);
}
25% {
margin: 0 0 var(--furikake-high-bottom) var(--furikake-high-left);
transform: rotate(150deg);
}
30.0% { margin: 0 0 var(--furikake-high-bottom) var(--furikake-high-left); }
36.7% { margin: 0 0 0 var(--furikake-low-left); }
43.3% { margin: 0 0 var(--furikake-high-bottom) var(--furikake-high-left); }
50.0% { margin: 0 0 0 var(--furikake-low-left); }
85% {
transform: rotate(150deg);
}
100% {
margin: 0;
transform: rotate(0deg);
}
}
.navbar-brand .brand-icon {
animation-duration: 1.5s;
animation-timing-function: ease;
}
.navbar-brand:hover .brand-icon {
animation-name: brand-furikake;
}