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 और @emilyashley के साथ काम करके महसूस कर रहा

1. हेडर टेक्स्ट। मैंने इसे हल करने के लिए अभी यह मुद्दा बनाया है https://github.com/publiclab/plots2/issues/7847

2. विभिन्न चौड़ाई में तालिका की उपस्थिति। मैं इस पर कुछ घंटों में और लिखूंगा।

ठीक है @ebarry । यह कोई समस्या नहीं है, मुझे पता है कि आप व्यस्त होंगे।

संबोधित करने के लिए _2) विभिन्न चौड़ाई पर तालिका की उपस्थिति_, सौभाग्य से समाधान पहले से मौजूद है-हालांकि, यह केवल ~ 750 पिक्सेल से कम स्क्रीनविड्थ पर दिखाई देता है। शायद इसे "मीडिया चौड़ाई" के रूप में जाना जाता है, जैसा कि फोन के लिए है?

यहाँ तालिका बहुत अच्छी लग रही है, जैसा कि @sanchibansal340 ऊपर वीडियो में भी दिखाया गया है:

यहाँ इसके बारे में क्या बढ़िया है:

• नोट्स कॉलम के मानों में कोई लाइन ब्रेक नहीं है। यह अच्छा है क्योंकि तालिका में सभी पंक्तियों की ऊंचाई सामान्य रह सकती है, ऊंचाई में अतिरंजित होने के बजाय जिसे आप अधिक स्क्रीनविड्थ पर देख सकते हैं।
• "लोग जो अनुसरण कर रहे हैं" की तालिका "पोस्ट करने वाले लोग" और "नोट्स" की पहली तालिका के बगल में है, प्रत्येक तालिका की ग्रे क्षैतिज रेखाओं को अलग करने वाले उपयुक्त सफेद स्थान के साथ, यह संदेश देते हुए कि ये अलग टेबल हैं। अन्य स्क्रीन चौड़ाई पर, इस तालिका के शीर्षलेख नीचे धकेल दिए जाते हैं, और मान प्रदर्शित नहीं होते हैं।

अगला कदम

• [ ] कोड लिंक ढूंढें जहां स्क्रीन की चौड़ाई अलग-अलग टेबल लेआउट को सम्मन करती है
• [ ] तालिका के प्रदर्शन को प्रदर्शित करने के लिए सेट करें क्योंकि यह 750px से कम चौड़ाई _सभी चौड़ाई पर

नमस्ते सांची बंसल340, मेरा मतलब कल इस मुद्दे को ठीक करने के लिए "खुद को सौंपना" नहीं था, अगर आप इसे अभी भी पसंद करेंगे तो मैंने इसे आपको सौंप दिया है। 🌳

हां, मैं इस पर काम करना चाहता हूं। क्षमा करें परीक्षा के कारण थोड़ा व्यस्त था। मैं 3 दिनों में शुरू करूंगा, क्या यह ठीक रहेगा?

हाँ बहुत ध्न्यवाद! परीक्षा के लिए शुभकामनाएँ, और भरपूर आराम भी करें :)

नमस्ते @ सांची बंसल340 , परीक्षा कैसे हुई?

अरे @ebarry। परीक्षा अच्छी रही, मैं इस मुद्दे पर काम कर रहा हूं और इसे 2 दिनों में पूरा कर लिया जाएगा।
आपको अपडेट न करने के लिए खेद है।

@ebarry ऐसा क्यों है कि क्रोम देव टूल्स पर सोर्स कोड अलग है और वास्तविक कोड पूरी तरह से अलग है?
क्या मुझे README.md में किसी और चीज के अनुसार कोड सेट करना होगा। मैंने ऐसा नहीं किया क्योंकि मुझे लगा कि मैं सिर्फ HTML और CSS पर काम कर रहा हूं, इसलिए मुझे ऐसा नहीं करना पड़ेगा।

@ebarry 'स्थिति: पूर्ण' को हटाकर, 'जो लोग अनुसरण कर रहे हैं' तालिका 'तालिका पोस्ट करने वाले लोगों' के नीचे जा रही है। क्या आप इस प्रकार का प्रारूप चाहते हैं या आप तालिका को केवल कंधे से कंधा मिलाकर चाहते हैं?

नीचे स्क्रीनशॉट संलग्न है कि यह कैसा दिखता है

@sanchibansal340 ये स्क्रीनशॉट समस्या का वर्णन करने में बहुत मददगार हैं!

मोबाइल दृश्य में, "अनुसरण करने वाले लोगों" के लिए तालिका को अन्य तालिकाओं के नीचे ले जाने में मदद मिलेगी, लेकिन यह वह नहीं है जिसके बारे में यह मुद्दा है, तो चलिए इस भाग को अभी के लिए अलग रख देते हैं।

हम उपयुक्त कॉलम चौड़ाई के साथ दोनों तालिकाओं के साथ-साथ दृश्य बनाए रखना चाहते हैं। क्या यह देखने का कोई तरीका है कि 750px से अधिक स्क्रीन पर CSS कहाँ बदलता है? मैंने स्वयं डेवलपर टूल का उपयोग करके पृष्ठ को देखने की कोशिश की लेकिन मैं जो ढूंढ रहा हूं उसे खोजने के लिए पर्याप्त परिचित नहीं हूं!

हे सब! ऐसा लगता है कि हमारे पास हमारी पिछली एचटीएमएल संरचना में बूटस्ट्रैप स्वरूपण बग है :)

इसे किसी अन्य रसोइए के साथ भ्रमित नहीं करना चाहते, लेकिन ऐसा लगता है कि शायद इसके मूल में थोड़ा बूटस्ट्रैप उपयोग का मुद्दा है, यह शुरुआत से ही चीजों को जटिल कर रहा है

tl; डॉ - होने एक .col-* div के एक बच्चे के रूप में एक और .col-* div (उन लोगों के साथ अलग करने के बिना एक .row div) बूटस्ट्रैप द्वारा समर्थित नहीं है

ग्रिड सिस्टम नेस्टिंग पर बूटस्ट्रैप डॉक्स से :

अपनी सामग्री को डिफ़ॉल्ट ग्रिड के साथ नेस्ट करने के लिए, मौजूदा .col-sm-* कॉलम में एक नई .row और .col-sm-* कॉलम का सेट जोड़ें । नेस्टेड पंक्तियों में कॉलम का एक सेट शामिल होना चाहिए जो 12 या उससे कम तक जोड़ता है (यह आवश्यक नहीं है कि आप सभी 12 उपलब्ध कॉलम का उपयोग करें)।

जब मैं एक नया <div class="row"></div> _ चारों ओर आंतरिक कॉल (दो col-md-6 कॉलम) जोड़ता हूं और उन्हीं col-md-6 divs के लिए इनलाइन शैलियों को हटा देता हूं, तो ऐसा लगता है कि क्लीनर (और संपूर्ण मूल चौड़ाई को कवर करने के लिए फैलता है, जो अपेक्षित लगता है)।

--- /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_ की जड़ है (कुल चौड़ाई और छोटी चौड़ाई जो जोड़ नहीं है, हो सकता है?) अगर यह सही लगता है, तो मैं किसी और के लिए पीआर के साथ चलने के लिए और अधिक संदर्भ के लिए खुश हूं :)

इन जानकारियों @patcon और @sanchibansal340 को खोजने के लिए धन्यवाद! हमारे योगदानकर्ता तालिकाओं का अच्छा दिखना वास्तव में बहुत अच्छा होगा क्योंकि सार्वजनिक लैब योगदानकर्ताओं से बनी है :) क्या अगले चरण किसी को भी स्पष्ट लगते हैं?

@ebarry मैंने Chrome Devtools पर 3 बदलाव किए हैं। मुझे 750px चीज़ भी मिली, लेकिन मैं उसका स्क्रीनशॉट नहीं ले पा रहा था। पहले 2 स्क्रीनशॉट में मैंने टेबल की चौड़ाई बदल दी है। अब समस्या यह है कि मुझे यह कोड स्थानीय फाइलों में नहीं मिल रहा है। कोई विचार मैं उन्हें कैसे ढूंढ सकता हूं?
मैंने किए गए परिवर्तनों के स्क्रीनशॉट संलग्न किए हैं और तालिका इसके साथ कैसी दिखती है।

@ebarry ऐसा क्यों है कि क्रोम देव टूल्स पर सोर्स कोड अलग है और वास्तविक कोड पूरी तरह से अलग है?
क्या मुझे README.md में किसी और चीज के अनुसार कोड सेट करना होगा। मैंने ऐसा नहीं किया क्योंकि मुझे लगा कि मैं सिर्फ HTML और CSS पर काम कर रहा हूं, इसलिए मुझे ऐसा नहीं करना पड़ेगा।

अरे @ sanchibansal340 हाँ, आपको इस पर काम करने के लिए परियोजना को स्थापित करने की आवश्यकता होगी ... लेकिन आप इसे

@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 महान जासूसी का काम यहां: रॉकेट: धन्यवाद:

नमस्ते @ sanchibansal340 , क्या आपको यह जानने में दिलचस्पी है कि इसे अगले चरण में ले जाने के लिए परियोजना को कैसे स्थापित किया जाए? हमें बताएं कि किस सहायता से मदद मिलेगी!

@ebarry मैं आपको एक दिन के भीतर अपडेट कर दूंगा। मुझे खेद है कि इतनी सरल समस्या को हल करने में मुझे इतना समय लग रहा है।

बहुत बढ़िया धन्यवाद @sanchibansal340! आप इसे उठाकर सराहना करते हैं।

@ebarry क्या मैं इस प्रोजेक्ट को विंडोज़ पर सेटअप कर सकता हूं?

मुझे यकीन नहीं है, लेकिन मैंने चैट रूम में पूछा है कि क्या कोई इसका उत्तर देने में मदद कर सकता है। इस पर आपके समर्पण के लिए धन्यवाद, मैं बहुत आभारी और प्रभावित हूं। मैं यह भी उल्लेख करना चाहता हूं कि यह "फर्स्ट-टाइमर" नहीं है -only" समस्या है, जिसका अर्थ है कि यहां कुछ जटिलता है जिसे अधिक अनुभवी योगदानकर्ता के साथ जोड़कर संबोधित करना बहुत अच्छा हो सकता है। क्या आप इसके लिए खुले होंगे?

मुझे यकीन नहीं है, लेकिन मैंने चैट रूम में पूछा है कि क्या कोई इसका उत्तर देने में मदद कर सकता है। इस पर आपके समर्पण के लिए धन्यवाद, मैं बहुत आभारी और प्रभावित हूं। मैं यह भी उल्लेख करना चाहता हूं कि यह "फर्स्ट-टाइमर" नहीं है -only" समस्या है, जिसका अर्थ है कि यहां कुछ जटिलता है जिसे अधिक अनुभवी योगदानकर्ता के साथ जोड़कर संबोधित करना बहुत अच्छा हो सकता है। क्या आप इसके लिए खुले होंगे?

हाँ यकीनन।

@ebarry ऐसा क्यों है कि क्रोम देव टूल्स पर सोर्स कोड अलग है और वास्तविक कोड पूरी तरह से अलग है?
क्या मुझे README.md में किसी और चीज के अनुसार कोड सेट करना होगा। मैंने ऐसा नहीं किया क्योंकि मुझे लगा कि मैं सिर्फ HTML और CSS पर काम कर रहा हूं, इसलिए मुझे ऐसा नहीं करना पड़ेगा।

मैं sqlite3 और rvm आदि होने के बारे में बात कर रहा था। क्या मुझे उनकी आवश्यकता है या क्या मैं sqlite3 और rvm को सेटअप किए बिना प्रोजेक्ट के HTML और CSS भाग पर काम कर सकता हूँ?

अरे @sanchibansal340 इस मुद्दे के प्रति समर्पण के लिए बहुत-बहुत धन्यवाद: दिल:

आपके कुछ प्रश्नों का उत्तर देने के लिए -

• यह अनुशंसा की जाती है कि आप इसे लिनक्स पर सेट करें क्योंकि रूबी ऑन रेल्स और हमारा विशेष वातावरण लिनक्स के साथ बेहतर काम करता है। लेकिन मेरा मानना ​​​​है कि आपके पास एक विंडोज़ सिस्टम है (क्या मुझे यकीन नहीं है: प्रश्न:) तो यहाँ कुछ तरीके हैं जिनसे आप अपनी विंडोज़ में लिनक्स को सेटअप कर सकते हैं और इंस्टॉलेशन कर सकते हैं। कृपया उल्लेख इस ।

अब मेरी व्यक्तिगत राय होगी कि आप अपने सिस्टम को डुअल बूट करें क्योंकि बाद में यदि आप ओपनसोर्स के साथ काम करना जारी रखना चाहते हैं तो लिनक्स आपका उद्धारकर्ता होगा: 100: लेकिन कृपया इसे तब करें जब आप इसे करने के तरीके के बारे में पूरी तरह से स्पष्ट हों (कुछ गलत कदम और आपके ओएस गायब हो जाता है: भ्रमित: मुझे मदद करने में खुशी होगी: मुस्कान:)।

• परियोजना की स्थापना सबसे अच्छा तरीका है! चूंकि हमें यह जांचने की आवश्यकता है कि क्या आपके परिवर्तन स्थानीय रूप से ठीक से काम करते हैं, स्क्रीनशॉट की आवश्यकता हो सकती है और यह भी कि क्या परिवर्तनों के लिए हमें किसी भी प्रकार के परीक्षणों को अपडेट करने की आवश्यकता होगी। चूंकि यह किसी मुद्दे का थोड़ा जटिल है इसलिए कुछ परीक्षण की आवश्यकता हो सकती है: पसीना_स्माइल:

आशा है कि यह आपके प्रश्नों का उत्तर देगा! यदि आपको कोई समस्या आती है तो बेझिझक मुझे पिंग करें :v:

@Tlazypanda दिशानिर्देशों के लिए बहुत बहुत धन्यवाद। मैं अपने लैपटॉप को डुअल बूट करूंगा, हालांकि ओएस गायब होने के बारे में थोड़ा डरावना है लेकिन जरूरत पड़ने पर मैं आपकी मदद मांगूंगा।

धन्यवाद @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