Plots2: タグコントリビューターページでのテーブル表示の問題

このページを管理するコード行はここにあると思います！

https://github.com/publiclab/plots2/blob/f70e6ea791d78b098c2556ebecf58402c030f6c2/app/views/tag/_contributors.html.erb#L44 -L69

この問題は未解決ですか？

はい、ありがとうございます。この号は未解決です。

サイトを開いたとき、ビデオに表示されていません

こんにちは、 https：//publiclab.org/contributors/evidenceを試しました

https://publiclab.org/contributors/water-qualityはどうですか？

https://drive.google.com/file/d/1QGaSavgEuES-I-faI7-ozNSaiI4MGIZT/view?usp=drivesdk

それは私のラップトップと電話の両方のように表示されています。 動画が見れるか確認して頂けますか？
ありがとう

ありがとう@ sanchibansal340-私はあなたに同意します。 あなたのビデオは、 https：//publiclab.org/contributors/water-qualityの表示が適切に機能していることを示しているようです。

少なくとも画面が設定されている現在の幅では、私にとってはさらに悪化しているように見えます。

さて、私はそれに取り組みます

こんにちは@ sanchibansal340 、私があなたに返信するのに7日かかった後、とても早く返信してくれてありがとう！ @jywarrenと共同作業を通じて、この問題にはいくつかの要素があることに

1. ヘッダーテキスト。 https://github.com/publiclab/plots2/issues/7847に対処するためにこの問題を作成しました

2. さまざまな幅でのテーブルの外観。 これについては、数時間以内に詳しく説明します。

わかりました@ebarry 。 それは問題ではありません、私はあなたが忙しいに違いないことを理解しています。

_2）さまざまな幅でのテーブルの外観に対処するために_、幸いなことに解決策はすでに存在しますが、画面幅が750ピクセル未満でしか表示されません。 おそらく、これは電話の場合のように「メディア幅」と呼ばれますか？

@ sanchibansal340も上のビデオで示したように、これが見栄えのするテーブルです。

これがそれの素晴らしいところです：

• [メモ]列​​の値に改行はありません。 これは、より大きな画面幅で表示される高さを誇張するのではなく、テーブル内のすべての行の高さを通常のままにすることができるため、優れています。
• 「フォローしている人」の表は、「投稿した人」と「メモ」の最初の表の横に並んでおり、各表の灰色の横線を適切な空白で区切って、これらが別々の表であることを示しています。 他の画面幅では、このテーブルのヘッダーが一番下にプッシュされ、値は表示されません。

次のステップ

• []画面の幅がさまざまなテーブルレイアウトを呼び出す場所のコードリンクを見つける
• [] 750px未満の幅で表示されるように、テーブルの表示を_すべての幅で

こんにちはSanchiBansal340、私は昨日問題を修正するために「自分自身を割り当てる」つもりはありませんでした、あなたがまだそれを望むならば、私はあなたにそれを割り当てました。 🌳

はい、取り組みたいです。 申し訳ありませんが、試験のため少し忙しかったです。 3日で始めますが、大丈夫ですか？

はい、どうもありがとうございました！ 試験で頑張ってください、そしてまたたくさんの休息をとってください:)

こんにちは@ SanchiBansal340 、試験はどうでしたか？

ねえ@ebarry。 試験は順調に進みました。私はこの問題に取り組んでおり、2日以内に完了します。
更新しなくてすみません。

@ebarry Chrome Devツールのソースコードが異なり、実際のコードが完全に異なるのはなぜですか？
また、README.mdの前提条件に従ってコードを設定する必要がありますか。 HTMLとCSSに取り組んでいるだけだと思っていたので、そうする必要はありませんでした。

@ebarryは、「position：absolute」、「テーブルをフォローしている人」を削除して、「テーブルを投稿した人」の下に移動します。 この種のフォーマットが必要ですか、それともテーブルを並べて表示するだけですか？

それがどのように見えるかについてのスクリーンショットを以下に添付しました

@ sanchibansal340これらのスクリーンショットは、問題の説明に非常に役立ちます。

モバイルビューでは、「フォローしている人」のテーブルを他のテーブルの下に移動すると便利ですが、これはこの問題の原因ではないので、ここではこの部分を脇に置いておきましょう。

適切な列幅で両方のテーブルを並べて表示することを検討しています。 750pxを超える画面サイズでCSSがどこで変化するかを確認する方法はありますか？ 自分で開発ツールを使ってページを見ようとしましたが、探しているものを見つけるのに十分な知識がありません。

やあみんな！ 以前のhtml構造にブートストラップフォーマットのバグがあるようです:)

これを別の料理人と混同したくないが、おそらくこれの核心に小さなブートストラップの使用上の問題があるようで、それは最初から物事を複雑にしている

tl; dr-別の.col-* divの子として.col-* divを持つ（ .row divで区切らない）ことは、ブートストラップではサポートされていません

グリッドシステムのネストに関するブートストラップドキュメントから：

デフォルトのグリッドでコンテンツをネストするには、既存の.col-sm- *列内に新しい.rowと.col-sm- *列のセットを追加します。 ネストされた行には、合計が12以下の列のセットを含める必要があります（使用可能な12個の列すべてを使用する必要はありません）。

新しい<div class="row"></div> _around_内部列（2つのcol-md-6列）を追加し、同じcol-md-6 divのインラインスタイルを削除すると、よりクリーンに機能するようです（および親の幅全体をカバーするように拡張されますが、これは予想どおりです）。

--- /tmp/_contributors.html.erb 2020-05-20 15:36:04.000000000 -0300
+++ /tmp/_contributors.html.erb.new 2020-05-20 15:37:05.000000000 -0300
@@ -34,7 +34,8 @@
 <% elsif @note_count.nil? || <strong i="20">@note_count</strong> == 0 %>
   <p><%= raw translation('tag.contributors.no_contributors', :tag => params[:id]) %>:</p>
 <% else %>
-  <div class="col-md-6" style="display: inline-block;">
+  <div class="row">
+  <div class="col-md-6">
     <table class="table">
       <tr>
         <th style="width:75%;"><%= translation('tag.contributors.people_who\'ve_posted') %></th>
@@ -50,7 +51,7 @@
       <% end %>
     </table>
   </div>
-  <div class="col-md-6"  style="display: inline-table; position:absolute">
+  <div class="col-md-6">
     <table class="table">
       <tr>
         <th> <%= translation('tag.contributors.people_who_are_following') %> </th>
@@ -62,5 +63,6 @@
       <% end %>
     </table>
   </div>
+  </div>
   <br />
 <% end %>

その変更でどのように見えるかについては、以下を参照してください。

これがこの問題の_part_の原因であることは間違いありません（合計幅とそれよりも小さい幅は合計されないのではないでしょうか？）。 それが正しく見えるなら、私はより多くのコンテキストを持つ他の誰かがPRで実行することを嬉しく思います:)

これらの洞察を見つけてくれてありがとう@patconと@ sanchibansal340 ！ Public Labは寄稿者で構成されているので、寄稿者テーブルの見栄えを良くするのは本当に素晴らしいことです:)次のステップは誰にとっても明確に見えますか？

@ebarry ChromeDevtoolsで3つの変更を加えました。 750pxのものも見つかりましたが、スクリーンショットを撮ることができませんでした。 最初の2つのスクリーンショットでは、テーブルの幅を変更しました。 問題は、ローカルファイルでこのコードが見つからないことです。 どうすればそれらを見つけることができますか？
加えられた変更のスクリーンショットと、テーブルがどのように表示されるかを添付しました。

@ebarry Chrome Devツールのソースコードが異なり、実際のコードが完全に異なるのはなぜですか？
また、README.mdの前提条件に従ってコードを設定する必要がありますか。 HTMLとCSSに取り組んでいるだけだと思っていたので、そうする必要はありませんでした。

ねえ@ sanchibansal340ええ、これで作業するにはプロジェクトをインストールする必要があります...しかし、githubでそれを行うこともできますが、実装のテストに問題があり、通常はUI変更のスクリーンショットが必要です。 素晴らしい調査をありがとう：tada：

@ sanchibansal340これらのファイルはhttps://github.com/publiclab/plots2/blob/master/app/views/tag/show.html.erbでパーシャルとしてレンダリングされ、これらのパーシャルはこのフォルダーhttps://github.comにあります

@patcon @ sanchibansal340 @ebarry素晴らしい探偵の仕事はここにあります：rocket：ありがとう

こんにちは@ sanchibansal340 、これを次のステップに進めるためにプロジェクトをインストールする方法を理解することに興味がありますか？ どのようなサポートが役立つか教えてください！

@ebarry1日以内に更新します。 このような単純な問題の解決に時間がかかって申し訳ありません。

素晴らしいありがとう@ sanchibansal340！ これを手に取ってくれてありがとう。

@ebarryこのプロジェクトをWindowsでセットアップできますか？

よくわかりませんが、チャットルームで誰かがこれに答えるのを手伝ってくれるかどうか尋ねました。これに献身してくれてありがとう、私はとても感謝して感銘を受けました。これは「初めての人」ではないことにも言及したいと思います。 -のみ」の問題。これは、経験豊富な寄稿者とペアを組むことで対処できる複雑さがあることを意味します。それを受け入れますか？

よくわかりませんが、チャットルームで誰かがこれに答えるのを手伝ってくれるかどうか尋ねました。これに献身してくれてありがとう、私はとても感謝して感銘を受けました。これは「初めての人」ではないことにも言及したいと思います。 -のみ」の問題。これは、経験豊富な寄稿者とペアを組むことで対処できる複雑さがあることを意味します。それを受け入れますか？

はい、確かに。

@ebarry Chrome Devツールのソースコードが異なり、実際のコードが完全に異なるのはなぜですか？
また、README.mdの前提条件に従ってコードを設定する必要がありますか。 HTMLとCSSに取り組んでいるだけだと思っていたので、そうする必要はありませんでした。

私はsqlite3とrvmなどを持っていることについて話していました。それらが必要ですか、それともsqlite3とrvmをセットアップせずにプロジェクトのHTMLとCSSの部分で作業できますか？

ねえ@ sanchibansal340この問題にご

あなたの質問のいくつかに答えるために-

• Ruby on Railsと特定の環境はLinuxでより適切に機能するため、これをLinuxでセットアップすることをお勧めします。 しかし、私はあなたがウィンドウズシステムを持っていると信じています（私は正しくわかりません：question :)ので、ここにあなたがあなたのウィンドウズでLinuxをセットアップしてインストールを実行することができるいくつかの方法があります。 こちらをご参照ください。

私の個人的な意見は、後でOpensource Linuxで作業を続けたい場合は、システムをデュアルブートすることです：100：しかし、それを行う方法が完全に明確な場合は、これを行ってください（いくつかの間違った手順とOSが消える：confused：喜んでお手伝いします：smile :)。

• プロジェクトを設定するのが最善の方法です。 変更がローカルで正常に機能するかどうかを確認する必要があるため、スクリーンショットが必要になる場合があります。また、変更によって何らかのテストを更新する必要がある場合もあります。 これは少し複雑な問題なので、テストが必要になる場合があります：sweat_smile：

これがあなたの質問に答えることを願っています！ 問題が発生した場合に備えて、遠慮なく私にpingしてください：v：

@Tlazypandaはガイドラインをありがとうございました。 ラップトップをデュアルブートしますが、OSの消失に関する部分は少し怖いですが、必要に応じて助けを求めます。

ありがとう@Tlazypanda !!! そして@ sanchibansal340あなたはこの挑戦に挑戦するのに素晴らしいです。 インストール時のグループトラブルシューティングについては、＃3840も参照してください。

こんにちは、すべて、私はここですべてのソリューションを調べて、それらのいくつかを試してみたいと思ったので、ここでプルリクエストを開きました： https ：

右側の「フォロワー」テーブルを左側の「寄稿者」テーブルの下に、より狭いビューでプッシュします。これは適切だと思います。 2つのテーブルが狭すぎると、1つのテーブルとして読み取られるため、混乱を招きます。

私が提案したいことの1つは、「関連タグ」テキストを削除または移動することです。 @ sanchibansal340はそれを手伝うことに興味があるでしょうか？ @ sanchibansal340になったら、少しガイドさせていただきます。

https://github.com/publiclab/plots2/pull/8021のソリューションが進捗しているように見える場合は、それをマージしてさらに改良することができます。 みんな、ありがとう！

ああ、そして「関連タグ」に関してリンクするために、 @ ebarryはこの議論を再浮上させました。これは、それについて話すのに適切な場所だと思います！ https://github.com/publiclab/plots2/issues/6307