Фриланс-проєкти

Фриланс-проєкти

Виправити CSS/DOM-верстку карток у Chrome extension для локалізації D&D Beyond

HTML та CSS верстання, Javascript та Typescript — неправильно зазначені категорії?

Є Chrome extension Manifest V3, який локалізує сайт D&D Beyond українською. Проєкт написаний на TypeScript + WXT. Розширення працює через content script: знаходить англійський текст на сторінках D&D Beyond і замінює його українським перекладом.

Проблема виникла на сторінці:

https://www.dndbeyond.com/classes

Після перекладу текст у картках класів стає довшим, ніж англійський, і верстка D&D Beyond починає ламатися. Особливо проблема в елементах:

.listing-card
.listing-card__content
.listing-card__body
.listing-card__description
.characters-statblock
.listing-card__callout
.listing-card__callout-button

На сторінці картки мають фіксовані висоти, max-height, overflow: hidden, absolute-positioned блоки та кнопку, через що нижня частина тексту, особливо блок характеристик (Primary Ability, Hit Point Die, Saves), обрізається або візуально не влазить у контейнер.

Потрібно:

Розібрати реальну DOM/CSS-структуру карток на dndbeyond.com/classes.
Виправити стилі так, щоб усі картки класів коректно розширювалися під український текст.
Виправлення має працювати для всіх карток, а не для окремих nth-of-type.
Не ховати текст, не обрізати його, не робити line-clamp.
Не ламати оригінальний вигляд сторінки більше, ніж потрібно.
Кнопка View ... Details / український аналог не має перекривати текст.
Картка має коректно працювати у різних ширинах браузера: повноекранний режим, середня ширина, вузький режим.
Рішення має бути вбудоване в content script розширення, бажано scoped тільки для сторінки класів або .body-rpgclass-index.

Стек:

TypeScript
WXT
Chrome Extension Manifest V3
Content scripts
DOM manipulation
CSS override/injection
D&D Beyond live DOM

Файли, які можуть знадобитися:

entrypoints/dndbeyond.content/index.tsx
lib/dndbeyond/localizer.ts
lib/dndbeyond/dictionary.ts

Їх я надам через GitHub

Критерії приймання:

На https://www.dndbeyond.com/classes усі картки класів показують повний текст.
Блок .characters-statblock повністю видимий у кожній картці.
Кнопки не перекривають текст.
Картки можуть збільшуватися по висоті.
Рішення працює для PHB-класів і додаткових класів нижче на сторінці: Artificer, Blood Hunter, Gunslinger, Monster Hunter тощо.
Після переходу з іншої сторінки назад на /classes стилі й переклад продовжують працювати.
npm run compile проходить без помилок.

Важливо:

Не потрібно переписувати весь проєкт. Потрібна точкова, але надійна правка верстки карток для локалізованого українського тексту.

Ставки 38 Обговорення 1

Stanislav Odyntsov

2 0

Проєкти -
Оцінка -
Рейтинг 1 109

Бюджет: 1500 UAH Термін: 2 дні

Доброго дня! Подивився ваші скріни — проблему видно чітко: у картках (Паладін, Рейнджер тощо) блок статів «Основна характеристика / Кістка хітів / Рятівні» перекривається помаранчевою кнопкою внизу, а низ тексту ріжеться. Це фіксована висота + overflow:hidden +
absolute-кнопка ламаються під довший український текст.

Як виправлю (точково, scoped):
- CSS-override, прив'язаний до .body-rpgclass-index (тільки сторінка класів), інжектиться з content script.
- .listing-card + діти (__content, __body, __description, .characters-statblock): height / max-height → auto, overflow:hidden → visible, контент у flex-column — опис і статблок течуть, картка росте під текст.
- .listing-card__callout / __callout-button: виводжу кнопку з absolute у потік (звичайний блок наприкінці картки) — більше не перекриває статблок.
- Працює для ВСІХ карток (спільні класи, без nth-of-type), на повноекранному / середньому / вузькому.
- Без обрізання, line-clamp і приховування — як у вимогах.
- D&D Beyond SPA: після повернення на /classes стилі переприкладаю (зачеплюся у ваш MutationObserver / re-translate), щоб трималося.
- npm run compile — без помилок.

Уточню: 1) Стилі інжектяться через content_scripts.css чи програмно? 2) Є MutationObserver на ре-переклад, у який зачепитися?

Орієнтовно: 1500 грн, 1–2 дні (точкова правка, не переписування). Готовий почати одразу, щойно надасте доступ до репозиторію (GitHub).

Олексій Мироненко

19 0

Проєкти 20
Оцінка 5.0
Рейтинг 3 545

Бюджет: 1500 UAH Термін: 2 дні

Вітаю Вас, Микита! 👋

Ознайомився з описом і чітко бачу проблему: під час локалізації D&D Beyond картки класів мають фіксовані висоти й overflow, через що український текст обрізається. Працюю з TypeScript, content scripts для Chrome MV3 та CSS-оверврайдами; маю досвід внесення точкових правок стилів і маніпуляцій DOM у live-сайтах без радикального втручання в UI.

Можу зробити надійну, scoped-правку в content script (орієнтовано під .body-rpgclass-index або /classes), щоб картки могли коректно розширюватися під український текст, characters-statblock був повністю видимий, а кнопки не перекривали контент. Гарантую збереження оригінального вигляду наскільки це можливо і сумісність з npm run compile.

Готовий почати після доступу до репозиторію або вказаних файлів (entrypoints/dndbeyond.content/index.tsx, lib/dndbeyond/localizer.ts, lib/dndbeyond/dictionary.ts) — відповім на будь-які питання та пришлю перші правки у вигляді PR/патчу.

🌐 Портфоліо з останніми кейсами:
https://mrnko.com

💼 Профіль Freelancehunt:
Freelancehunt

🤝 Буду радий обговорити деталі проєкту, відповісти на Ваші запитання та запропонувати найкраще рішення для досягнення потрібного результату.

⭐️⭐️⭐️⭐️⭐️ Давайте співпрацювати — і разом створимо якісний продукт, який принесе результат Вашому бізнесу! 🚀✨ Готовий розпочати роботу вже найближчим часом.

Розробка сайтів під ключ • SEO • Google Ads • Meta Ads. Допомагаю бізнесам залучати нових клієнтів та зростати онлайн.

Микита Сорокін

16 0

Проєкти 16
Оцінка 5.0
Рейтинг 1 900

Бюджет: 1500 UAH Термін: 2 дні

Вітаю, мене звуть Микита.
Готовий допомогти з виправленням CSS та DOM-верстки карток для вашого розширення під D&D Beyond.
Перевизначу стилі так, щоб український текст не ламав картки, а всі блоки та кнопки відображалися коректно на різних екранах.

Маю досвід розробки Chrome extensions на Manifest V3 та TypeScript, тому швидко розберуся з вашим кодом.
Портфоліо: Freelancehunt

Орієнтовні ціна, сроки: 1500 грн, 1-2 дні.
Пишіть, домовимось

Я буду підтримувати ваш проект та виправляти проблему даже після пітвердження виконання

Максим О.

5 0

Проєкти 5
Оцінка 5.0
Рейтинг 673

Бюджет: 2000 UAH Термін: 7 днів

Привіт, я працював над Chrome розширенням для перекладу Jira інтерфейсу українською (проєкт "JiraUA Translator") - там теж стикався з проблемами overflow та збитої верстки після локалізації, виправив 150+ CSS конфліктів для динамічних карток

Цікаво, чи ви вже пробували використовувати CSS Grid замість Flexbox для .listing-card__content, або проблема саме в absolute positioning блоків характеристик?

Пропоную зв'язатися, я безкоштовно проконсультую вас з технічної сторони та складемо план розробки + розповім про мою команду! ⚡

Алла Мелкумян

5 0

Проєкти 5
Оцінка 5.0
Рейтинг 1 567

Бюджет: 1500 UAH Термін: 2 дні

Доброго дня.

Працюю з Chrome Extensions (Manifest V3), TypeScript та content scripts, тому задача виглядає цілком зрозумілою. Судячи з опису, проблема не в локалізації як такій, а в тому, що верстка D&D Beyond розрахована на англомовний контент і використовує фіксовані висоти, overflow та позиціонування елементів, через що український текст фізично не поміщається в картках.

Mykola Skobletskyi

11 0

Проєкти 11
Оцінка 5.0
Рейтинг 1 956

Бюджет: 2000 UAH Термін: 2 дні

Добрий день. Мене звуть Микола, я Front-End розробник з досвідом більше 6 років. Успішно розробив не одне розширення на цій платформі. Відкритий до співпраці. Пишіть в лс, обговоримо деталі.

Єгор Мурунов

50 0

Проєкти 51
Оцінка 5.0
Рейтинг 865

Бюджет: 1000 UAH Термін: 1 день

Вітаю, Микита!
Я готовий вам допомогнти з проєктом.
Маю досвід роботи з chrome розширеннями та кастомними скриптами. Підкоригую стилі.
Пишіть, буду радий вам допомогти!
Портфоліо: Freelancehunt
Пишіть, буду радий вам допомогти!

Artur Boiko

4 0

Проєкти 4
Оцінка 4.9
Рейтинг 1 606

Бюджет: 1000 UAH Термін: 1 день

Доброго дня!

Точкові правки верстки в Chrome-розширеннях (Manifest V3, content scripts) — наш профільний напрямок, завдання зрозуміле повністю. Стек ваш (TypeScript + WXT + CSS-інʼєкція) — наш робочий.

Проблема ясна: український текст довший за англійський, а картки класів мають фіксовані висоти, max-height, overflow:hidden та absolute-кнопку — тому текст і блок характеристик обрізаються.

Як виправимо (за вашими критеріями приймання):

розберемо реальний DOM/CSS карток на /classes;
scoped CSS-override для .listing-card і вкладених елементів: знімаємо фіксовані висоти / max-height / overflow, переводимо контейнер на auto-height (flex), щоб картка коректно розширювалась під текст;
absolute-кнопку повернемо в потік або додамо нижній відступ, щоб вона не перекривала текст;
рішення працює для всіх карток через класи (не nth-of-type), включно з Artificer, Blood Hunter, Gunslinger тощо;
без line-clamp, без обрізки й приховування тексту;
коректно на всіх ширинах (повноекранний / середній / вузький);
переживає SPA-навігацію назад на /classes (re-apply через MutationObserver);
scoped лише під .body-rpgclass-index, щоб не зачіпати решту сайту;
npm run compile проходить без помилок.
Без переписування проєкту — рівно точкова, але надійна правка, як ви й просите. Дасте репозиторій — розберемо живий DOM і зробимо акуратно.

Деталі по проекту — в особистих. Готові зайти в роботу.

Тарас О.

4 0

Проєкти 4
Оцінка 5.0
Рейтинг 2 025

Бюджет: 1500 UAH Термін: 2 дні

Вітаю!

Маю великий досвід в створенні сайтів та додатків.
Готовий виконати поставлене завдання.

Пропоную обговорити деталі в особистих повідомленнях.

Аліна Войницька

0 0

Проєкти -
Оцінка -
Рейтинг 457

Бюджет: 1000 UAH Термін: 3 дні

Добрий день!
Можемо допомогти з доопрацюванням Chrome Extension на WXT + TypeScript.
Маємо досвід роботи з:
• Manifest V3;
• content scripts;
• динамічною модифікацією DOM;
• CSS override/injection;
• адаптацією сторонніх сайтів без втручання в їхній код.

Для вашого кейсу можемо:
• проаналізувати реальну DOM/CSS-структуру карток на D&D Beyond;
• прибрати обмеження висоти та конфлікти overflow;
• забезпечити коректне розширення карток під український текст;
• виправити позиціонування кнопок, щоб вони не перекривали контент;
• зробити рішення адаптивним для різних розмірів екрана;
• обмежити дію стилів лише сторінкою /classes;
• перевірити коректну роботу після SPA-навігації та повторного відкриття сторінки.
Після отримання доступу до репозиторію зможемо швидко оцінити обсяг робіт, строки та запропонувати оптимальне рішення без переписування існуючої логіки локалізації.

Илья П.

37 0

Проєкти 37
Оцінка 5.0
Рейтинг 2 335

Бюджет: 1500 UAH Термін: 2 дні

Доброго дня, тут немає особливих проблем, треба тільки визначитися що робимо з проблемою - якщо збільшуємо картки по висоті, нехай буде так. Внесу правки в контентний скрипти, текст буде поміщатися.

Ihor Nadolskyi

45 0

Проєкти 45
Оцінка 5.0
Рейтинг 11 620

Бюджет: 1200 UAH Термін: 1 день

Вітаю, багато працюю наразі з extensions
Виконаю Вашу задачу швидко
Буду радий Вам допомогти!

Dmytro Ivchenko

4 0

Проєкти 4
Оцінка 4.9
Рейтинг 976

Бюджет: 6000 UAH Термін: 3 дні

Вітаю!
Зацікавив ваш проєкт. Маю досвід роботи з TypeScript, Chrome Extensions (Manifest V3), content scripts, DOM manipulation та кастомними CSS override для сторонніх сайтів без втручання в їхній вихідний код.
З опису бачу, що проблема не в локалізації як такій, а в тому, що D&D Beyond використовує жорстко обмежені контейнери з фіксованими висотами, overflow та позиціонуванням елементів під англомовний контент. Після збільшення довжини тексту українською верстка закономірно починає обрізати контент і конфліктувати з кнопками та statblock-блоками.
Можу:
— проаналізувати актуальну DOM та CSS-структуру сторінки /classes;
— знайти всі вузькі місця, які викликають обрізання контенту;
— реалізувати акуратний CSS injection через content script;
— зробити рішення прив'язаним лише до сторінки класів (.body-rpgclass-index або інший стабільний селектор);
— забезпечити коректну роботу після SPA-навігації D&D Beyond;
— перевірити роботу для всіх класів, включаючи Artificer, Blood Hunter, Gunslinger та інші;
— зберегти максимально близький до оригіналу вигляд сторінки.
Також врахую різні розміри екранів та перевірю поведінку на широкому, середньому та вузькому режимах браузера.
Працюю з GitHub workflow, можу внести зміни безпосередньо у ваш репозиторій та забезпечити, щоб npm run compile проходив без помилок.
Готовий переглянути код після надання доступу до репозиторію та оперативно підготувати надійне рішення без переписування всієї архітектури розширення.

Дмитро М.

12 0

Проєкти 12
Оцінка 5.0
Рейтинг 1 390

Бюджет: 5000 UAH Термін: 3 дні

Вітаю,
Маю великий досвід у розробці браузерних розширень, а також роботі з локалізацією та i18n. Готовий до співпраці

Олег Патрушев

21 0

Проєкти 21
Оцінка -
Рейтинг 612

Бюджет: 3000 UAH Термін: 5 днів

Привіт! Можу виконати ваше завдання. Досвід є. Пишіть, домовимось.

Ваня Кутузов

427 9

Проєкти 421
Оцінка 4.7
Рейтинг 2 589

Бюджет: 3000 UAH Термін: 2 дні

Думаю, можу допомогти, треба дивитися розширення повністю.

Максим В.

0 0

Проєкти -
Оцінка -
Рейтинг 172

Бюджет: 3000 UAH Термін: 2 дні

Звертайтеся, зроблю

Vladislav Melnyk

0 0

Проєкти -
Оцінка -
Рейтинг 355

Бюджет: 700 UAH Термін: 1 день

Це можна зробити за день…
Якщо точніше за пару годин
Напишіть мені

Микита Торбинський

9 0

Проєкти 9
Оцінка -
Рейтинг 536

Бюджет: 5000 UAH Термін: 2 дні

Маю 3.5 роки комерційного досвіду з TypeScript, Vue/Nuxt, React та Node.js. Регулярно працюю з Chrome Extension Manifest V3, content scripts та CSS-ін'єкціями в live DOM.

Бачу задачу чітко: фіксовані висоти та overflow:hidden на картках класів ламаються під довший українськи текст. Рішення scoped на .body-rpgclass-index: знімаємо max-height, міняємо overflow на visible для .listing-card та вкладених блоків (.listing-card__content, __body, __description, .characters-statblock), виводимо .listing-card__callout-button з absolute у нормальний потік. Результат: картки ростуть під контент, statblock видимий, кнопка не перекриває текст, npm run compile проходить.

Готовий взяти в роботу після отримання файлів з репозиторію.

Вадим Тягульский

42 0

Проєкти 42
Оцінка 5.0
Рейтинг 4 021

Бюджет: 1000 UAH Термін: 1 день

Доброго дня
Завдання зрозумів, можу взяти в роботу

приблизний план який бачу як це зробити

Розгорнути проєкт локально та відтворити проблему на сторінці /classes.
Проаналізувати поточну реалізацію локалізації та механізм підключення стилів.
Дослідити DOM і CSS структуру карток класів D&D Beyond.
Реалізувати CSS-правки для коректного відображення локалізованого тексту.
Усунути перекриття тексту кнопками та забезпечити коректне відображення характеристик.
Перевірити роботу для всіх карток класів, включно з додатковими.
Перевірити адаптивність на різних розмірах екрана.
Перевірити коректну роботу після навігації між сторінками.
Провести фінальне тестування та перевірити успішну збірку проєкту.

по вартості орієнтовно можу запропонувати 1250грн, або якщо є бажаний орієнтир по сумі, теж можете сказати, я зможу розглянути

наразі не завантажений , зможу оперативно приступити до виконання

Станіслав Д.

2 0

Проєкти -
Оцінка -
Рейтинг 475

Бюджет: 2200 UAH Термін: 2 дні

Вітаю! Готовий обговорити та виконати Ваше замовлення.

https://smate1.github.io/ink.design/
https://smate1.github.io/PanterEx/
https://smate1.github.io/stay_safe/
https://smate1.github.io/avg/

Іван Бабієнко

1 0

Проєкти -
Оцінка -
Рейтинг 546

Бюджет: 800 UAH Термін: 1 день

Вітаю!

Бачу проблему чітко — фіксовані висоти та overflow:hidden
на картках ламають верстку при довшому українському тексті.

Рішення: scoped CSS override в content script тільки для
.body-rpgclass-index — прибираємо max-height, overflow:hidden,
даємо картками розширюватись по висоті, фіксуємо кнопку.

Стек: TypeScript, Chrome Extension MV3, WXT, CSS injection.
Готовий після доступу до GitHub репозиторію.

Вартість: 800 UAH
Термін: 1 день

Роман Лабойко

3 0

Проєкти -
Оцінка -
Рейтинг 543

Бюджет: 1000 UAH Термін: 2 дні

Доброї ночі. Можу виправити проблему з версткою карток на D&D Beyond для української локалізації. Проаналізую DOM/CSS структуру, підготую універсальний CSS override для всіх класів, інтегрую рішення в content script WXT та перевірю роботу на різних розмірах екрана.