আপনি কীভাবে ট্রেলোতে একটি তালিকার কলামের প্রস্থকে পুনরায় আকার দিন?
আপনি কীভাবে ট্রেলোতে একটি তালিকার কলামের প্রস্থকে পুনরায় আকার দিন?
উত্তর:
ট্রেলোর বর্তমান প্রয়োগে, এটি কনফিগারযোগ্য নয়: উপলভ্য জায়গার উপর নির্ভর করে তালিকাগুলি আকারে 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')
।
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))
javascript javascript:(function() { $('.list-card').width('490px');$('.list-wrapper').width('500px');$('.list-card').css('max-width', '470px'); })();
করতে কার্ডের বিবরণ ব্যাপকতর, আপনি এই বুকমার্ক-স্ক্রিপ্ট ব্যবহার করতে পারেন:
javascript:(function(w) {
$('.window').css('width', w+'px');
$('.window-main-col').css('width', (w-184)+'px');
})(prompt("New Width? (default 730)", 1030))
আমার জন্য, ফুল-এইচডি-প্রদর্শনগুলিতে 300px যুক্ত করা আরও অনেক ভাল দেখায়
এটি সামান্য আপডেট হওয়া উত্তর হওয়ায় ট্রেলো এখন 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});
আমি তালিকাগুলি সংকীর্ণ করার চেষ্টা করছিলাম কারণ আমার বর্তমান বোর্ডে প্রচুর পরিমাণ রয়েছে এবং তাদের প্রায় সকলের জন্য টাইল ছিল কার্ডের প্রস্থের প্রায় 75% (আসলে, আমি মনে করি আমি এখনও সংখ্যাগরিষ্ঠ হলেই আমি সংখ্যাগরিষ্ঠতা পেতে পারি কার্ডের প্রস্থের 50% এরও কম শিরোনামযুক্ত)।
আমি এখানে প্রস্তাবিত জেএস স্ক্রিপ্টটি চেষ্টা করেছি (যদিও এটি সর্বশেষ নয়) এবং এটি তালিকাগুলি সংক্ষিপ্ততর করার সময় এটি তাদের মধ্যে সদ্য গঠিত ব্যবধানটি দূর করতে পারেনি। সুতরাং, আমি এই আদিমটি নিয়ে এসেছি তবে এটি করার কৌশলটি 'কৌশল করে':
বিপরীতে (জুম ইন এবং পাঠ্য সঙ্কুচিত করুন) কাজ করতে পারে যদি আপনি তালিকার প্রস্থ বৃদ্ধি করতে চান।
আমি আগেই বলেছি, জিনিসগুলি পরিচালনা করার পক্ষে এটি সম্ভবত 'যথাযথ' উপায় নয় তবে এটি আমার ফলাফল পেয়েছে এবং এটি দ্রুত।
এটি কোনও উপলভ্য বিকল্প নয় এবং সুতরাং ট্রেলোতে কলামগুলির প্রস্থগুলি স্থির করা আছে।
ওয়েব স্টোরটিতে ক্রোমের জন্য এখন "স্লিম লিস্টস ফর ট্রেলো তালিকা" নামে একটি অ্যাড-অন রয়েছে:
https://chrome.google.com/webstore/detail/slim-lists-for-trello/pjlejgbmijmafmobaofcgblpdbkaodod
প্রো 4 ট্রেইলো ফ্রি ক্রোম এক্সটেনশনটি ডাউনলোড করুন
"কাস্টম সিএসএস প্রয়োগ করুন" এ টিক দিন এবং এটি যুক্ত করুন:
.list {
width: 375px;
}
.list-wrapper {
width: 375px;
}
ফায়ারফক্সের এখন এটি যুক্ত হয়েছে: ট্রেলো সুপার পাওয়ারস ।