Plots2: Tag Contributor 페이지의 테이블 표시 문제

이 페이지를 관리하는 코드 라인이 여기에 있다고 생각합니다!

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님 , 안녕하세요. @jywarren 및 @emilyashley 와 함께 작업하면서 이 문제에 대한 몇 가지 부분이 있음을 깨닫고 있습니다. ㅋㅋㅋㅋ

1. 헤더 텍스트. 방금 이 문제를 해결하기 위해 만들었습니다. https://github.com/publiclab/plots2/issues/7847

2. 다양한 너비의 테이블 모양. 나는 몇 시간 안에 이것에 대해 더 쓸 것이다.

좋아 @ebarry . 그것은 문제가 되지 않습니다, 당신이 바쁠 것임에 틀림없다는 것을 알고 있습니다.

_2) 다른 너비의 테이블 모양_을 해결하기 위해 다행히도 솔루션이 이미 존재하지만 ~750픽셀 미만의 화면 너비에서만 볼 수 있습니다. 아마도 이것은 전화기에서와 같이 "미디어 너비"라고 합니까?

@sanchibansal340 도 위의 비디오에서 보여

좋은 점은 다음과 같습니다.

• Notes 열의 값에는 줄 바꿈이 없습니다. 더 큰 화면 너비에서 볼 수 있는 높이가 과장되지 않고 테이블의 모든 행 높이가 정상으로 유지될 수 있기 때문에 좋습니다.
• "팔로잉하는 사람들" 테이블은 "게시한 사람들"과 "메모"의 첫 번째 테이블 옆에 정렬되며 각 테이블의 회색 수평선을 적절한 공백으로 구분하여 별도의 테이블임을 나타냅니다. 다른 화면 너비에서는 이 테이블의 헤더가 맨 아래로 밀려나고 값이 표시되지 않습니다.

다음 단계

• [ ] 화면 너비가 다른 테이블 레이아웃을 불러오는 위치에 대한 코드 링크 찾기
• [ ] 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> _주변_ 내부 열(두 개의 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 Chrome Devtools에서 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에 있습니다. /publiclab/plots2/tree/master/app/views/tag/show 코드에 대한 포인터가 더 필요하면 알려주십시오. 감사

@patcon @sanchibansal340 @ebarry 훌륭한 탐정이 여기 있습니다 :rocket: 감사합니다

안녕하세요 @sanchibansal340님 , 다음 단계로 넘어가기 위해 프로젝트를 설치하는 방법에 관심이

@barry 하루 안에 업데이트하겠습니다. 이렇게 간단한 문제를 해결하는데 너무 오랜 시간이 걸리게 되어 죄송합니다.

굉장합니다 @sanchibansal340 감사합니다! 당신이 이것을 집어 주셔서 감사합니다.

@ebarry 이 프로젝트를 Windows에서 설정할 수 있습니까?

확실하지 않지만 채팅방에서 누군가가 이에 대한 답변을 도와줄 수 있는지 물었습니다. 이에 대한 귀하의 헌신에 감사드립니다. 너무 감사하고 감동적입니다. 또한 이것이 "처음 시도하는 사람"이 아니라는 점을 언급하고 싶습니다. -only" 문제는 여기에 약간의 복잡성이 있음을 의미합니다. 이는 경험이 많은 기여자와 짝을 이루어 해결하는 것이 좋을 수 있습니다. 이에 대해 개방하시겠습니까?

확실하지 않지만 채팅방에서 누군가가 이에 대한 답변을 도와줄 수 있는지 물었습니다. 이에 대한 귀하의 헌신에 감사드립니다. 너무 감사하고 감동적입니다. 또한 이것이 "처음 시도하는 사람"이 아니라는 점을 언급하고 싶습니다. -only" 문제는 여기에 약간의 복잡성이 있음을 의미합니다. 이는 경험이 많은 기여자와 짝을 이루어 해결하는 것이 좋을 수 있습니다. 이에 대해 개방하시겠습니까?

물론이지.

@ebarry Chrome Dev 도구의 소스 코드가 다르고 실제 코드가 완전히 다른 이유는 무엇입니까?
또한 README.md의 전제 조건에 따라 코드를 설정해야 합니까? 나는 HTML과 CSS 작업만 하고 있기 때문에 그렇게 할 필요가 없을 것이라고 생각했기 때문에 그렇게 하지 않았습니다.

sqlite3 및 rvm 등이 필요합니까? 아니면 sqlite3 및 rvm을 설정할 필요 없이 프로젝트의 HTML 및 CSS 부분에서 작업할 수 있습니까?

@sanchibansal340 이 문제에 대한 헌신에 감사드립니다 :heart:

귀하의 질문에 답변하기 위해 -

• Ruby on rails 및 특정 환경이 Linux에서 더 잘 작동하므로 Linux에서 설정하는 것이 좋습니다. 그러나 나는 당신이 Windows 시스템을 가지고 있다고 생각합니다(확실하지 않습니다 :question: ). 그래서 여기에 당신의 Windows에서 Linux를 설정하고 설치를 수행할 수 있는 몇 가지 방법이 있습니다. 이것을 참조

이제 내 개인적인 의견은 나중에 Opensource Linux로 계속 작업하려면 시스템을 이중 부팅하는 것이 좋습니다. OS가 사라집니다 :혼란스럽습니다: 기꺼이 도와드리겠습니다 :스마일: ).

• 프로젝트를 설정하는 것이 가장 좋은 방법입니다! 변경 사항이 로컬에서 제대로 작동하는지 확인해야 하므로 스크린샷이 필요할 수 있으며 변경 사항으로 인해 모든 종류의 테스트를 업데이트해야 하는지 여부도 확인할 수 있습니다. 이것은 약간 복잡한 문제이기 때문에 몇 가지 테스트가 필요할 수 있습니다. :sweat_smile:

이것이 귀하의 질문에 대한 답변이 되기를 바랍니다! 문제가 발생하는 경우 언제든지 저에게 핑을 보내주세요 :v:

@Tlazypanda 가이드라인을 주셔서 감사합니다. OS가 사라지는 부분이 약간 무섭긴 하지만 랩탑을 이중 부팅할 것입니다. 하지만 필요한 경우 도움을 요청할 것입니다.

@Tlazypanda 감사합니다!!! 그리고 @sanchibansal340 당신은 이 챌린지를

안녕하세요, 저는 여기에서 모든 솔루션을 살펴보고 그 중 일부를 시험해보고 싶었습니다. 그래서 여기에서 풀 리퀘스트를 열었습니다: https://github.com/publiclab/plots2/pull/8021

내가 적절하다고 생각하는 좁은 보기에서 오른쪽 "팔로워" 테이블을 왼쪽 "기고자" 테이블 아래로 밀어 넣습니다. 두 테이블이 너무 좁으면 단일 테이블로 읽혀서 혼란스럽습니다.

내가 제안하고 싶은 한 가지는 "관련 태그" 텍스트를 제거하거나 이동하는 것입니다. @ebarry 우리가 그런 태그를 넣을 수 있다고 생각했던 위치를 기억합니까? 내 기억으로는 오른쪽의 전체 25% 열을 잘 사용하지 않기 때문에 다르게 표시하고 싶었습니다. 이에 대한 새 문제를 열겠습니다. 이에 대한 계획을 개발할 수 있다면 @sanchibansal340 이 도움이 될까요? 한 번 @sanchibansal340에 대해 조금 안내해 드리겠습니다!

https://github.com/publiclab/plots2/pull/8021 의 솔루션이 진행 중인 것처럼 보이면 이를 병합하고 추가 개선으로 이동할 수 있습니다. 감사합니다!

아, 그리고 "관련 태그"와 관련하여 링크하기 위해 @ebarry 는 이에 대해 이야기하기에 적절한 장소라고 생각하는 이 토론을 다시 나타 https://github.com/publiclab/plots2/issues/6307