Porterっぽい編集バーをいい感じに2列にしたい
Mijinko_SD.icon
https://gyazo.com/49ff61f13167c59a2f04de1287d7dc89
通知ステータスをいい感じに上にもってきたいがうまくいかない
構造的には
<div class"app">
<div class"status-bar">
<div class"page-status">
この内の.status-barをいい感じに持ち上げたい
編集バーの高さは可変であるという想定なので、固定値で上に持ち上げるわけにもいかない
.status-barと編集バーを新しく用意した要素の中に突っ込むのが無難そう
問題はある
うまいこと突っ込めるかどうか
突っ込んでも正しく動作するかどうか
試してみないと分からないが多分こわれるtakker.icon
Reactの管理と干渉する
試しに<div class="bottom-bar">を用意してその中に突っ込んでみましたが、（少なくとも見かけ上は）うまく動いてるっぽいですMijinko_SD.icon
https://gyazo.com/602bb93cd218ad712914a8aa9c127c41 https://gyazo.com/85e9af44334e920349665e1e3483e175
よし、この方向でやってみようかな
使ったコード
code:js
const bottomBar = document.createElement("div")
bottomBar.classList.add("bottom-bar")
const statusBar = document.querySelector(".status-bar")
bottomBar.append(statusBar)
document.querySelector(".app").append(bottomBar)
https://gyazo.com/5ee61955f72ff2a3272eeec29ceed45c
いい感じなのでは？
いい感じそう。触ってみようmeganii.icontakker.icon
2段にしてみようとはしているけれどまだ時間がかかりそう
すること自体はそこまで難しくはないけれど、試行錯誤しているので
あと、関係ないことをしすぎてて作業が全然進んでいない
https://gyazo.com/39c4db3950f333690398320bb1331662 https://gyazo.com/330603aa0f639cc615a7861619e14d1a
https://gyazo.com/8fa93fce57af4614940f61cc16b54ced
CSS盛り込みすぎたせいでminifyしてもそこまで小さくならないな
CSSだけ別にminifyすべきか
やったけど、tsをbundleする時にCSSも同時にminifyできないかな
壊れなかったのは予想外だったtakker.icon
.status-barはReactの方で生えたり消したりを操作していそうだったので、勝手に別の場所に移動するとReactが検知できずにエラーを吐くかと予想していた
実際には壊れなかった
.status-barは一度作られたら再生成されないからか？
できなさそうな理由を挙げるのはよくないな……
2段にしたので、ボタンを増やしやすくなったかも
かといってボタンを大きくすると邪魔になる
うーん、面倒だぞ…
（ボタンを減らすという選択肢はいつでも実行できるので、それをしない方向で考えている）
https://gyazo.com/ebb1e467848b660332ee8286ac614469
賢い解決法ではないが、heightを28pxから34pxに増やした
これだったらもうちょっとアイコンを大きくしてもいいな
CSSで操作しやすいように、div要素にもclassを生やした
https://gyazo.com/01181d08af103eef31c11bc476d55a91
大体終わったMijinko_SD.icon
CSSもいじりたくなってきた
ボタンの並べ替えもCSSのみでできるはずなので、いい感じに調整したい
もちろんtsのソースに含めるのではなく、自分で勝手に適用する用だけど