Перейти к содержанию

User Javascript and CSS: улучшения для форума


Рекомендуемые сообщения

Всем привет! Я бы хотел поделиться своими собственными твиками для улучшения форума (косметическими и функциональными). Список не полный и в свободное время будет пополняться.

Инструкция:
1) Установите в свой браузер расширение User JavaScript and CSS;
2) Зайдите в настройки расширения и добавьте правило для сайта https://prodevs.ru/forum. В левое поле JS вставьте следующий код:

/* Упоминание пользователя по клику (в разработке) */
// В планах: сделать автоматическую фокусировку и раскрытие формы при клике на ник (возможно переделать способ вставки упоминания в форму)

const profileLinks = document.querySelectorAll("ul.cAuthorPane_info.ipsList_reset a.ipsType_break");
for (let i = 0; i < profileLinks.length; i++)
{
	profileLinks[i].removeAttribute('data-ipshover');
	profileLinks[i].removeAttribute('data-ipshover-target');
	profileLinks[i].removeAttribute('data-ipshover-width');
	profileLinks[i].setAttribute('href_old', profileLinks[i].getAttribute('href'));
	profileLinks[i].setAttribute('href', `#replyForm`);
	profileLinks[i].setAttribute('onclick', `GS_InsertMention(this.getAttribute('href_old'))`);
	profileLinks[i].setAttribute('title', `Вставить имя в форму быстрого ответа`);
}

function GS_InsertMention(profileURL)
{
	let textArea = document.querySelector(".cke_wysiwyg_div > p");
	
	if (textArea.innerHTML === "<br>")
		textArea.innerHTML = `<a href="` + profileURL + `" contenteditable="false" data-ipshover="" data-ipshover-target="` + profileURL +"?do=hovercard" + `" data-mentionid="1">@` + event.target.textContent + `</a>` + `&nbsp;`;
	else
		textArea.innerHTML += `</p>` + `<a href="` + profileURL + `" contenteditable="false" data-ipshover="" data-ipshover-target="` + profileURL+"?do=hovercard" + `" data-mentionid="1">@` + event.target.textContent + `</a>` + `&nbsp;`;
}

/**/

/* Исправление переводов */

// Предстоящие события
if (document.getElementsByClassName("ipsType_light ipsPad_half ipsType_center")[0])
{
	document.getElementsByClassName("ipsType_light ipsPad_half ipsType_center")[0].innerText = "Предстоящих событий пока нет";
}

/* Внешний вид */

// Удаление полупрозрачных разделителей в меню пользователя (где его аватар)
document.querySelectorAll(".elUserNav_sep").forEach(sep => {
	sep.remove();
});

А в правое поле CSS этот код:

/* Прятание некрасивой подсветки поиска при выделении строки "Поиск..." */
div#elSearchWrapper.cSearchExpanded::before
{
	opacity: 0;
}

/* Уменьшение строки с ссылками "Форум, Непрочитанные + Отметить сайт прочитанным" */
nav.ipsBreadcrumb
{
	font-size: 14.9px;
}

/* Уменьшение расстояния между строкой с ссылками (выше) и содержимым внизу */
nav.ipsBreadcrumb_top
{
	margin-bottom: 4px;
}

/* Уменьшение расстояния между строкой с ссылками (выше) и содержимым вверху */
nav.ipsBreadcrumb_bottom
{
	margin-top: 0px;
}

/* Уменьшение расстояния между строкой с ссылками (выше) и рекламной картинкой */
.ipsImage.ipsContained
{
	margin-bottom: -4px;
}

/* Небольшое уменьшение зелёной строки с поиском */
.ipsNavBar_primary.ipsLayout_container
{
    height: 50px;
}

/* Уменьшение блоков разделов форумов */
.ipsType_sectionTitle.ipsType_reset
{
	padding: 12.5px;
}

/* Уменьшение текстов заголовков разделов форумов */
.ipsType_sectionTitle.ipsType_reset.cForumTitle
{
	font-size: 14px;
}

/* Уменьшение стрелочки "Свернуть категорию" */
.ipsPos_right.ipsJS_show.ipsType_noUnderline.cForumToggle:after
{
    font-size: 16px;
    position: relative;
    top: -2px;
}

/* Небольшое уменьшение прозрачности блоков форумов в свёрнутом виде */
li.cForumRow.ipsBox.ipsSpacer_bottom.ipsResponsive_pull.cForumRow_hidden
{
	opacity: 0.95;
}

/* Уменьшение расстояния между блоками форумов... */
li.cForumRow.ipsBox.ipsSpacer_bottom.ipsResponsive_pull, .ipsApp.ipsSpacer_bottom, .ipsApp.ipsSpacer_both
{
	margin-bottom: 9px;
}

/* Уменьшение заголовка и размера блока виджетов "Кто в онлайне, Пользователи..." */
.ipsType_reset.ipsWidget_title
{
	font-size: 14px;
	padding: 12.5px;
}

/* Приподнятие меню пользователя (где его аватар) */
#elUserNav
{
	padding: 5px;
}

3) Сохраните изменения (Ctrl + S) и перезагрузите страницу форума.

Изменения до и после:
changes-before.pngchanges-after.png

Изменено пользователем GameSoul
Ссылка на комментарий

Да. Я думаю это полезное изменение. Ты можешь еще уменьшить пространство между блоками? И возможно даже уменьшить ширину у главного блока форума. Сейчас все такое огромное, что вообще некомфортно 

icon-64x64.png icon-64x64.png

Ссылка на комментарий
5 часов назад, q3olegka сказал:

Уменьшить пространство между блоками; Возможно даже уменьшить ширину у главного блока форума.

Покажи пожалуйста скриншотами эти места (не совсем понял, что нужно поменять).

Ссылка на комментарий

Вышло обновление твиков (список изменений):

  • Выровнены стрелки "Свернуть категорию" в блоках форумов
  • Добавлено небольшое приподнятие меню пользователя
  • Исправлена строка перевода про предстоящие события
  • Удалены полупрозрачные разделители в меню пользователя
Ссылка на комментарий
  • 3 месяца спустя...

Вышло обновление твиков (список изменений):

  • Добавлена функция упоминания пользователя по клику на его ник (как на старом форуме; еще будет дорабатываться)
  • Небольшие косметические изменения
Ссылка на комментарий

Присоединяйтесь к обсуждению

Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.
Примечание: Ваш пост будет проверен модератором, прежде чем станет видимым.

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Восстановить форматирование

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...