मैं Trello में सूची की कॉलम चौड़ाई का आकार कैसे बदल सकता हूं?

Question

आप Trello में सूची की कॉलम चौड़ाई का आकार कैसे बनाते हैं?

Answer 1

ट्रेलो के वर्तमान कार्यान्वयन में, यह कॉन्फ़िगर करने योग्य नहीं है: सूची उपलब्ध स्थान के आधार पर प्रोग्राम आकार में 300-210 पिक्सल के बीच चौड़ी होनी चाहिए।

हालाँकि, यदि आप किसी हैक का बुरा नहीं मानते हैं, तो आप कुछ जावास्क्रिप्ट के साथ मामलों को अपने हाथों में ले सकते हैं:

(function(w) {
    $('.list').width(w);
    $('.list-area').width($('.list').length * (w+12));  // 12px inter-list spacing
    $('body').addClass('layout-horiz-scroll');  // force-enable horizontal scrolling
})(500)

(अपने इच्छित पिक्सेल चौड़ाई के साथ 500 को प्रतिस्थापित करें।)

आप इसे अपने ब्राउज़र के कंसोल पर निष्पादित कर सकते हैं, या इसे निम्न बुकमार्क के रूप में सहेज सकते हैं, जब भी आप कुछ और अधिक चौड़ाई चाहते हैं, क्लिक करने के लिए:

javascript:(function(w) { $('.list').width(w); $('.list-area').width($('.list').length * (w+12)); $('body').addClass('layout-horiz-scroll'); })(500)

संपादित करें : आपको वास्तविक वांछित आकार का अनुरोध करने के लिए बुकमार्कलेट के लिए एक और विकल्प है:

javascript:(function(w) { $('.list').width(w); $('.list-area').width($('.list').length * (w+12)); $('body').addClass('layout-horiz-scroll'); })(prompt("List width?", 500))

यह उत्तर को मान्य नहीं करेगा, इसलिए यदि आप कुछ ऐसा दर्ज करते हैं जो एक संख्या नहीं है तो यह काम नहीं करेगा।

Comments

यह भी खूब रही! क्या आपको लगता है कि आप एक जावास्क्रिप्ट प्रांप्ट के माध्यम से नंबर दर्ज कर सकते हैं ताकि उपयोगकर्ता को उस समय निर्णय लेना हो जाए जब बुकमार्क पर क्लिक किया जाता है?

— अल्फा

ज़रूर: 500कुछ के साथ बदलें prompt('List width?', '500'):।

— पाई डेलपोर्ट

धन्यवाद, मुझे आशा है कि आपको कोई आपत्ति नहीं है, लेकिन मैंने इसे आपके उत्तर में भी जोड़ दिया है, ताकि इसे और अधिक पूर्ण बनाया जा सके।

— अल्फा

बुकमार्क कोड में मामूली अद्यतन: कार्ड स्वयं को आकार नहीं दिया गया था (उनकी चौड़ाई 300px पर अधिकतम-चौड़ाई सीएसएस संपत्ति के साथ सूची-कार्ड कार्ड पर रखी गई थी)। javascript:(function(w) { $('.list-card').css('max-width', 'none');$('.list').width(w); $('.list-area').width($('.list').length * (w+12)); $('body').addClass('layout-horiz-scroll'); })(prompt("List width?", 500))

— antonlitvinenko

एक सरल बुकमार्क जो 2 दिसंबर 2016 को काम करता है:javascript javascript:(function() { $('.list-card').width('490px');$('.list-wrapper').width('500px');$('.list-card').css('max-width', '470px'); })();

— jmgarnier

Answer 2

कार्ड-विवरण को व्यापक बनाने के लिए , आप इस बुकमार्क-स्क्रिप्ट का उपयोग कर सकते हैं:

javascript:(function(w) { 
$('.window').css('width', w+'px');
$('.window-main-col').css('width', (w-184)+'px');
})(prompt("New Width? (default 730)", 1030))

मेरे लिए, फुल-एचडी-डिस्प्ले पर 300px बहुत बेहतर है

Answer 3

यह थोड़ा अपडेटेड उत्तर है क्योंकि ट्रेलो ने अब display: flexइसके बजाय बोर्ड सूची लेआउट सेट किया है display: block, इसलिए widthट्विस्ट अब काम नहीं करेगा।

यह भी कहा, कि Trello टेंट बनाया हर नए कार्ड के लिए शैली इंजेक्षन करने के लिए। इसलिए यह एक अच्छा विचार हो सकता है कि एक पर्यवेक्षक बनाएं और पृष्ठ के किसी भी डोम परिवर्तन की निगरानी करें, हर समय होने वाले शैली परिवर्तन को लागू करें।

var newWidth = 400;
var cardNewHeight = 40;
function enforceNewWidth() {
  (function(w) {
      $('.list').css({flex: '0 0 ' + w + 'px'});

      // updated 2015-04-01
      $('.list').css('max-width', w + 'px');

      $('.list-card').css('max-width', w + 'px');
      $('.list-card').css('min-height', cardNewHeight + 'px');
      // $('.list-area').width($('.list').length * (w+12));  // 12px inter-list spacing    
      $('textarea.list-card-composer-textarea').css({width: (w - 40) + 'px'});
  })(newWidth);
}

enforceNewWidth();

var observer = new MutationObserver(function(mutations) {
  enforceNewWidth();
});

observer.observe(document, {childList: true, subtree: true});

Answer 4

मैं सूचियों को संकीर्ण बनाने की कोशिश कर रहा था क्योंकि मेरे वर्तमान बोर्ड में बहुत सारे हैं और उनमें से लगभग सभी के लिए टाइल कार्ड की चौड़ाई का लगभग 75% थी (वास्तव में, मुझे लगता है कि मुझे अभी भी बहुमत मिल सकता है अगर मैं केवल गिना जाऊं कार्ड की चौड़ाई का 50% से कम शीर्षक वाले)।

मैंने यहाँ सुझाए गए जेएस स्क्रिप्ट की कोशिश की (हालांकि नवीनतम नहीं) और जबकि यह वास्तव में सूचियों को संकीर्ण बना देता था, यह उनके साथ नवगठित अंतर को समाप्त नहीं करता था। इसलिए, मैं इस आदिम के साथ आया था लेकिन इसे करने का तरीका 'ट्रिक' करता है:

1. Ctrl + '-' तब तक दबाएं जब तक कि आपको वांछित सूची चौड़ाई न मिल जाए (यह संभवत: तब होगा जब सभी सूचियाँ स्क्रीन पर फिट होंगी)
2. अब तक पाठ संभवतः बहुत छोटा है इसलिए तत्व निरीक्षक को खोलें और .list-card-title के लिए css संपादित करें और फ़ॉन्ट आकार बढ़ाएं (मैंने 'फ़ॉन्ट-आकार जोड़ा: बड़ा;' और यह पर्याप्त प्रतीत होता है)।
3. (वैकल्पिक) यदि आप 'जी' देखते हैं और इस तरह उनके निचले हिस्से को गायब कर रहे हैं, तो आप नीचे पैडिंग के कुछ पिक्सल जोड़ना चाह सकते हैं (I) लगभग 100%।

यदि आप सूची की चौड़ाई बढ़ाना चाहते हैं तो विपरीत (ज़ूम इन और टेक्स्ट सिकोड़ें) काम कर सकता है।

जैसा कि मैंने पहले कहा, यह संभवत: चीजों को संभालने का 'उचित' तरीका नहीं है, लेकिन मुझे वह परिणाम मिला जो मैं चाहता था और यह जल्दी है।

Answer 5

यह एक उपलब्ध विकल्प नहीं है और इसलिए ट्रेलो में स्तंभों की चौड़ाई तय की गई है।

Answer 6

अब वेब स्टोर पर उपलब्ध "स्लिम लिस्ट्स फॉर ट्रेलो" नामक क्रोम के लिए एक ऐड-ऑन है:

https://chrome.google.com/webstore/detail/slim-lists-for-trello/pjlejgbmijmafmobaofcgblpdbkaodod

Comments

यह समस्या को कैसे हल करता है? क्या आप कम से कम उस टूल से लिंक कर सकते हैं जिसे आप सुझा रहे हैं?

— ऐले

इस विस्तार ने मेरे लिए समस्या हल कर दी। डाउन-वोटर्स कृपया फिर से देखें, ओपी ने अब एक लिंक जोड़ा है और यह उपयोगी उत्तर है।

— योयो

यह केवल चौड़ाई को कम करता है, और मुझे विन्यास योग्य नहीं लगता है।

— वोल्वोक्स

Answer 7

1. Pro4Trello Free Chrome एक्सटेंशन डाउनलोड करें

2. "कस्टम सीएसएस लागू करें" पर टिक करें और इसे जोड़ें:

   .list {
     width: 375px;
   }
   
   .list-wrapper {
     width: 375px;
   }
   

Answer 8

फ़ायरफ़ॉक्स में अब इसके लिए एक ऐड है: ट्रेलो सुपर पॉवर्स ।