ট্রেলোতে তালিকার কলামের প্রস্থকে আমি কীভাবে আকার দিতে পারি?


29

আপনি কীভাবে ট্রেলোতে একটি তালিকার কলামের প্রস্থকে পুনরায় আকার দিন?

উত্তর:


23

ট্রেলোর বর্তমান প্রয়োগে, এটি কনফিগারযোগ্য নয়: উপলভ্য জায়গার উপর নির্ভর করে তালিকাগুলি আকারে 300-2210 পিক্সেলের মধ্যে আকারযুক্ত হয়।

তবে, যদি আপনি কিছুটা হ্যাক কিছু মনে করেন না, আপনি কিছু জাভাস্ক্রিপ্ট দিয়ে বিষয়গুলি নিজের হাতে নিতে পারেন:

(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))

এটি উত্তরটির বৈধতা দেবে না, সুতরাং আপনি এমন কিছু প্রবেশ করান যা সংখ্যা নয় এটি কার্যকর হবে না।


এটা অসাধারণ! আপনি কি মনে করেন যে আপনি জাভাস্ক্রিপ্ট প্রম্পটের মাধ্যমে নম্বরটি প্রবেশ করাতে পারেন যাতে ব্যবহারকারী বুকমার্কলেট ক্লিক করার মুহুর্তে সিদ্ধান্ত নিতে পারে?
আলফা

নিশ্চিত: প্রতিস্থাপন 500ভালো কিছু সঙ্গে prompt('List width?', '500')
পাই ডিলপোর্ট

ধন্যবাদ, আমি আশা করি আপনার কোনও আপত্তি নেই তবে আমি এটিকে আরও সম্পূর্ণ করার জন্য আপনার উত্তরটিতে যুক্ত করেছি।
আলফা

1
বুকমার্কলেটের কোডটিতে ছোটখাটো আপডেট: কার্ডগুলি তাদের পুনরায় আকার দেওয়া হয়নি (তাদের প্রস্থটি .list- কার্ড শ্রেণিতে সর্বোচ্চ প্রস্থের CSS সম্পত্তি সহ 300px এ কেপ করা হয়েছিল) app 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))
অ্যান্টনলিটভিনেনকো

1
একটি সহজ বুকমার্কলেট যা javascript javascript:(function() { $('.list-card').width('490px');$('.list-wrapper').width('500px');$('.list-card').css('max-width', '470px'); })();
শে

5

করতে কার্ডের বিবরণ ব্যাপকতর, আপনি এই বুকমার্ক-স্ক্রিপ্ট ব্যবহার করতে পারেন:

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

আমার জন্য, ফুল-এইচডি-প্রদর্শনগুলিতে 300px যুক্ত করা আরও অনেক ভাল দেখায়


1

এটি সামান্য আপডেট হওয়া উত্তর হওয়ায় ট্রেলো এখন display: flexপরিবর্তে বোর্ডের তালিকা বিন্যাসটি সেট করেdisplay: block , তাই widthমোড় আর কাজ করবে না।

এছাড়াও, উল্লেখ্য যে ট্রেলো প্রতিটি তৈরি কার্ডে স্টাইলটি ইনজেক্ট করার জন্য তাঁবু করে অতএব এটি পর্যবেক্ষক তৈরি করা এবং পৃষ্ঠার যে কোনও ডিওএম পরিবর্তন পর্যবেক্ষণ করা, স্টাইল পরিবর্তন সর্বদা সংঘটিত করা প্রয়োগ করা ভাল ধারণা হতে পারে।

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});

1

আমি তালিকাগুলি সংকীর্ণ করার চেষ্টা করছিলাম কারণ আমার বর্তমান বোর্ডে প্রচুর পরিমাণ রয়েছে এবং তাদের প্রায় সকলের জন্য টাইল ছিল কার্ডের প্রস্থের প্রায় 75% (আসলে, আমি মনে করি আমি এখনও সংখ্যাগরিষ্ঠ হলেই আমি সংখ্যাগরিষ্ঠতা পেতে পারি কার্ডের প্রস্থের 50% এরও কম শিরোনামযুক্ত)।

আমি এখানে প্রস্তাবিত জেএস স্ক্রিপ্টটি চেষ্টা করেছি (যদিও এটি সর্বশেষ নয়) এবং এটি তালিকাগুলি সংক্ষিপ্ততর করার সময় এটি তাদের মধ্যে সদ্য গঠিত ব্যবধানটি দূর করতে পারেনি। সুতরাং, আমি এই আদিমটি নিয়ে এসেছি তবে এটি করার কৌশলটি 'কৌশল করে':

  1. আপনি পছন্দসই তালিকার প্রস্থ না পাওয়া পর্যন্ত Ctrl + '-' টিপুন (সম্ভবত এটি সমস্ত তালিকা পর্দার সাথে ফিট করে)
  2. এখনই পাঠ্যটি সম্ভবত খুব ছোট তাই উপাদান পরিদর্শকটি খুলুন এবং .লিস্ট-কার্ড-শিরোনামের জন্য সিএসএস সম্পাদনা করুন এবং ফন্টের আকার বাড়ান (আমি 'ফন্টের আকার: বৃহত্তর;' যোগ করেছি এবং এটি যথেষ্ট বলে মনে হয়েছে)।
  3. (alচ্ছিক) যদি আপনি দেখতে পান যে 'জি'র এবং এর নিচের অংশটি হারিয়েছে আপনি নীচে প্যাডিংয়ের কয়েক পিক্সেল যুক্ত করতে চাইতে পারেন (আমি 10 যোগ করেছি)।

বিপরীতে (জুম ইন এবং পাঠ্য সঙ্কুচিত করুন) কাজ করতে পারে যদি আপনি তালিকার প্রস্থ বৃদ্ধি করতে চান।

আমি আগেই বলেছি, জিনিসগুলি পরিচালনা করার পক্ষে এটি সম্ভবত 'যথাযথ' উপায় নয় তবে এটি আমার ফলাফল পেয়েছে এবং এটি দ্রুত।


0

এটি কোনও উপলভ্য বিকল্প নয় এবং সুতরাং ট্রেলোতে কলামগুলির প্রস্থগুলি স্থির করা আছে।


0

ওয়েব স্টোরটিতে ক্রোমের জন্য এখন "স্লিম লিস্টস ফর ট্রেলো তালিকা" নামে একটি অ্যাড-অন রয়েছে:

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


1
এটি কীভাবে সমস্যার সমাধান করবে? আপনি যে সরঞ্জামটির প্রস্তাব দিচ্ছেন তার সাথে কি আপনি অন্তত লিঙ্ক করতে পারেন?
আলে

এই এক্সটেনশনটি আমার জন্য সমস্যার সমাধান করেছে। ডাউন-ভোটাররা দয়া করে পুনর্বিবেচনা করুন, ওপি এখন একটি লিঙ্ক যুক্ত করেছে এবং এটি দরকারী উত্তর।
yoyo

এটি কেবল প্রস্থ হ্রাস করে, এবং আমার কাছে কনফিগারযোগ্য দেখায় না।
ভলভক্স


আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.