Незнаю куда выложить, написал userscript для Tampermonkey (Chrome, Firefox), который улучшает форму комментариев.
  • Возможность закрепить форму внизу страницы
  • Автоматическое изменение высоты в зависимости от набранного текста
код
// ==UserScript==
// @name XGM - Улучшенная форма для комментариев
// @description Улучшает вид формы комментариев
// @author https://xgm.guru/user/NazarPunk
// @license MIT
// @version 1.0
// @include /^https?:\/\/xgm\.guru.*$/
// @noframes
// @run-at document-end
// @source https://github.com/nazarpunk/XGM
// ==/UserScript==
'use strict';
document.addEventListener("DOMContentLoaded", () => {
	const $textarea = document.getElementById('input_comment');
	const $form = document.getElementById('comment_form');
	const $actions = document.querySelector('#comment_form .form-actions');
	if ($form === null || $textarea === null || $actions === null) { return; }

	$textarea.addEventListener('input', () => {
		$textarea.style.height = 'auto';
		$textarea.style.height = $textarea.scrollHeight + 'px';

	}, false);

	let br = document.querySelector('#comment_form > br');
	br.parentNode.removeChild(br);

	$form.setAttribute('style', `position: sticky; bottom: 0`);

	const style = window.getComputedStyle($textarea, null);
	const padding = parseInt(style.getPropertyValue('padding-left')) + parseInt(style.getPropertyValue('padding-right')) + 2;
	$textarea.setAttribute('style', `
										min-height: 100px;
										width: calc(100% - ${padding}px) !important;
										box-sizing: content-box;
										overflow: hidden;
										border-radius: 0;
										resize: none;
										z-index: 5;
										position: relative;`
	);

	$actions.setAttribute('style', `margin: 0`);
	$actions.innerHTML += `<label style="float: right"><input id="comment_form_stickyInput" type="checkbox" autocomplete="off"> закрепить</label>`;
	const $sticky = document.getElementById('comment_form_stickyInput');
	const key = 'comment-form-sticky';

	const recheck = () => {
		$form.style.position = $sticky.checked ? 'sticky' : 'static';
		localStorage[$sticky.checked ? 'removeItem' : 'setItem'](key, '');
		console.log($sticky.checked);
	};

	$sticky.checked = localStorage.getItem(key) === null;
	recheck();

	$sticky.addEventListener('change', recheck);

	$textarea.dispatchEvent(new Event('input', {
		'bubbles': false,
		'cancelable': true
	}));
});

Решение

Короче, часть уже внедрена, часть можешь пилить - теперь тебе никто это делать не мешает)
`
ОЖИДАНИЕ РЕКЛАМЫ...

Показан только небольшой набор комментариев вокруг указанного. Перейти к актуальным.
0
37
5 лет назад
0
Это всё прикольно, но надо тестировать по факту.
0
29
5 лет назад
0
но надо тестировать по факту.
Всё тестировать нужно, я уже пару недостатов нашёл. Будет время, перепишу на jquery, который бы обновить не помешало, и поправлю.
0
37
5 лет назад
0
Если обновить, бутстрап посыпется. Бутстрап уже пробовали обновлять - дизайн посыпался)
0
29
5 лет назад
0
Если обновить, бутстрап посыпется
Юзайте jquery-migrate чтоб не сыпалось.
ScorpioT1000:
Бутстрап уже пробовали обновлять - дизайн посыпался)
Можно же только bootstrap.js обновить и не трогать стили.
0
37
5 лет назад
0
Я цеплял bootstrap-responsive на ту же версию. Это давно напрашивается. Но пришли к выводу, что надо будет заняться новым дизайном целиком.
0
37
4 года назад
0
Короче, часть уже внедрена, часть можешь пилить - теперь тебе никто это делать не мешает)
Принятый ответ
Показан только небольшой набор комментариев вокруг указанного. Перейти к актуальным.
Чтобы оставить комментарий, пожалуйста, войдите на сайт.