✅️当日の予定をタイムラインに常時表示するUserScriptが#editorに被らないようにする

不便

z-indexの都合でカーソルだけは見えるので、そこからインデントの位置を推測して書くしかない

隠れている文字は自分で予想する

流石にストレス溜まってきたので直したい

編集のために一旦閉じてしまうと、開き直すのを忘れて、timelineが目に入りにくくなるデメリットもある

修正方法

修正開始

code:css

.page-column {

display: grid;

align-items: flex-start;

flex-wrap: nowrap;

justify-content: center;

gap: 10px;

grid-template-columns: 46px minmax(200px, 960px) min-content;

grid-template-areas: "spacer page menu";

margin-top: 16px

}

@media(991px < width) {

.page-column: has(.page-sidebar) {

grid-template-columns:minmax(200px, 3fr) minmax(170px, 1fr) min-content;

grid-template-areas: "page sidebar menu"

}

}

@media(min-width: 768px)and (max-width: 991px) {

.page-column {

grid-template-columns:minmax(200px, 960px) min-content;

grid-template-areas: "page menu"

}

}

@media(max-width: 767px) {

.page-column {

display:flex

}

}

code:style.css

.page-column {

grid-template-columns: var(--page-column-columns, 46px minmax(200px, 960px) min-content);

grid-template-areas: var(--page-column-areas, "spacer page menu");

}

@media(991px < width) {

.page-column:has(.page-sidebar) {

grid-template-columns: var(--page-column-columns-sidebar, minmax(200px, 3fr) minmax(170px, 1fr) min-content);

grid-template-areas: var(--page-column-areas-sidebar, "page sidebar menu");

}

}

@media(min-width: 768px) and (max-width: 991px) {

.page-column {

grid-template-columns: var(--page-column-columns-768, minmax(200px, 960px) min-content);

grid-template-areas: var(--page-column-areas-768, "page menu");

}

}

@media(max-width: 767px) {

.page-column {

display: grid;

grid-template-columns: var(--page-column-columns-767, 1fr);

grid-template-areas: var(--page-column-areas-767, "page");

}

}

問題なく動きそう

CSS変数を設定する

code:setting.css

.page-column {

--page-column-columns: 100px minmax(200px, 960px) min-content;

--page-column-areas: "spacer page menu";

--page-column-columns-sidebar: 100px minmax(200px, 3fr) minmax(170px, 1fr) min-content;

--page-column-areas-sidebar: "spacer page sidebar menu";

--page-column-columns-768: var(--page-column-columns);

--page-column-areas-768: var(--page-column-areas);

--page-column-columns-767: 100px 1fr;

--page-column-areas-767: "spacer page";

}

いいかんじ

https://gyazo.com/8d64e6068ea9a03c2cc89d1ccb0893b8

修正したい点

画面幅が広い時、まず右端が100pxになるまで余白を分配し、その後両端に余白を分配するようにしたい

code:wide.css

.page-column {

--page-column-columns: 100px minmax(200px, 960px) min-content 1fr;

--page-column-areas: "spacer page menu spacer2";

}

.app .container {

container-type: inline-size;

}

.page-column {

--page-column-columns: minmax(200px, 960px) min-content;

--page-column-areas: "page menu";

--page-column-columns-sidebar: minmax(200px, 3fr) minmax(170px, 1fr) min-content;

--page-column-areas-sidebar: "page sidebar menu";

}

}

画面幅ではなく、要素幅に応じて切り替えたい

幅の計算がむずいので

$ --page-column-columns-767: minmax(60px, calc(100% / 767 * 100)) 1fr;

draft2

https://gyazo.com/27826ff2c498a924c6120b07c3f8bfaf

code:draft2.css

.page-column {

--page-column-columns: 100px minmax(200px, 960px) min-content 1fr;

--page-column-areas: "spacer page menu spacer2";

--page-column-columns-sidebar: 100px minmax(200px, 3fr) minmax(170px, 1fr) min-content;

--page-column-areas-sidebar: "spacer page sidebar menu";

--page-column-columns-768: var(--page-column-columns);

--page-column-areas-768: var(--page-column-areas);

--page-column-columns-767: minmax(60px, calc(100% / 767 * 100)) 1fr;

--page-column-areas-767: "spacer page";

}

.app .container {

container-type: inline-size;

}

.page-column {

--page-column-columns: minmax(200px, 960px) min-content;

--page-column-areas: "page menu";

}

}

問題なさそう

infoboxがあるページの挙動も確認する

いや、このままでいいや

code:css

.wedget {

max-width: 100px;

width: calc(100vw / 767 * 100 - 10px);

min-width: 60px;

}

11:22:11 merged

minified CSS反映ミス

11:38:54

まだミスってた

今度はimport-devで試したので、大丈夫だと思う

11:50:33 テスト中

でも今回はどこにもなさそう……

こいつが原因か

じゃあこれでいいや

いや、wedgetの開閉を検知できない。やめよう

修正しないこと

https://gyazo.com/ee3178eee32b20b9fc760976fccd79dd