Plots2: 「ヘッダーの挿入」ツールバーボタンのレスポンシブスタイリングを修正

作成日 2021年03月21日  ·  3コメント  ·  ソース: publiclab/plots2

従来のエディターでは、ウィンドウのサイズを変更すると、[ヘッダーの挿入]ツールバーボタンのアイコンが完全に消えます。
具体的には、ウィンドウの幅が700pxより大きく1000pxより小さい場合。

ビデオ

(ヘッダーボタンは下のビデオのHです)

https://user-images.githubusercontent.com/4361605/111892783-b005ec80-89bb-11eb-81e6-14d68b3a9422.mov

再現する方法

当サイトのレガシーエディタを使用している場所に移動します。 これには、メモ、Wiki、および質問が含まれます。
/wiki/newも含まれます。

  1. たとえば、安定版のテストサーバーでこのメモに移動します。
  2. 上記のようにウィンドウのサイズを変更し、Hがどのように消えるかを確認します。

推奨される修正

コードベースとCSSスタイルシートで調査を行う必要があります。

ツールバーの部分は/app/views/editor/_toolbar.html.erbます:
https://github.com/publiclab/plots2/blob/07a243da39702501d0f5d4de8a3683a24d680a38/app/views/editor/_toolbar.html.erb#L29 -L44

アイコンがクラスd-md-none spanでラップされていることに気付いたので、それでよいかもしれません。 しかし、間違いなくこれをいじって、あなたが見つけたものを見てください!

これは、FTOを完了したばかりで、もう少しやりがいのあることを望んでいる人にとっては大きな問題です。

この問題を主張するには、ここにコメントを投稿してください。その後、行き詰まった場合は、助けを求めるコメントを投稿してください。

CSS easy feature help wanted

最も参考になるコメント

@waridroxニース、それは速かった! 行き詰まったら、ここにコメントを投稿してください。

全てのコメント3件

やってみてもいいですか? @ noi5e

@waridroxニース、それは速かった! 行き詰まったら、ここにコメントを投稿してください。

あなたは彼らが言うことを知っています-時々答えはあなたの目の前にあります...

https://github.com/publiclab/plots2/blob/07a243da39702501d0f5d4de8a3683a24d680a38/app/views/editor/_toolbar.html.erb#L29 -L43
この場合、40行目のコードは、スタイルと競合する不要なスパン要素を適用していました。 それを削除するだけで問題は解決しました:D

_これを見つけるのに多くの時間が費やされましたが、変更後に機能が妨げられることはありません😅_

https://user-images.githubusercontent.com/58583793/111906743-2831e800-8a78-11eb-953d-58dfe534048b.mp4

色を元に戻しました。デバッグを目的としたものです。

このページは役に立ちましたか?
0 / 5 - 0 評価