Расширение, чтобы скрыть часть post buttons

[romeo_piter]

Есть ли какое-то расширение, чтобы спрятать на десктопе основную массу кнопок в посте в выпадашку.
По аналогии как это происходит в адаптивной версии (там где ... заменяют кнопки) Уж больно неаккуратно выглядит это обилие кнопок.

[Nekstati]

Код: Выделить всё

.post-buttons {
    max-width: 64px !important;
}

Отправлено спустя 1 минуту 38 секунд:
Это костыль, т.к. кнопки на мобильной версии прячет JavaScript, и при загрузке страницы всё это безобразно мелькает, как и адаптивные ссылки и breadcrumbs в шапке. По уму надо убирать оттуда JavaScript и всё переделывать на CSS. Но расширением этого не сделать, это вопрос стиля.

[romeo_piter]

Спасибо. Да, не очень красиво, жаль. Даже при быстрой прогрузке страницы столбики переходят под точки.

[Nekstati]

Попробуйте так. Кнопки будут при загрузке невидимы (прозрачны), а потом постепенно появятся, уже после того, как JavaScript их обработает.

Код: Выделить всё

@keyframes postButtonsReveal {
	from { opacity: 0; }
	to { opacity: 1; }
}
.post-buttons {
	max-width: 64px !important;
	opacity: 0;
	animation: postButtonsReveal ease 0.3s 0.5s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

0.5s - время задержки до начала появления кнопок.

[romeo_piter]

Так работает быстрее, но кнопки в столбик всё равно видны обычного цвета. При отличной скорости загрузки страницы примерно как раз полсекунды, при задумчивой - как повезет :D

Отправлено спустя 3 минуты 13 секунд:
Вру, почему-то в этот раз пришлось кэш руками чистить, чтобы изменения пришли в норму. Так - огонь. Спасибо огромное.

Отправлено спустя 1 минуту 19 секунд:
И последний вопрос. Можно ли как-то вывести отдельную кнопку (благодарность) из этого поведения?

[romeo_piter]

Не нашел как сделать через цсс, пришлось править шаблон.
Добавил к <li> data-skip-responsive="true" в расширении спасибок и увеличил ваш вариант максимальной ширины - всё идеально!

[romeo_piter]

Всё же рано я радовался, после, например, ctrl+f5 на странице долгая прогрузка кнопок четко видна, т.е. прозрачность не срабатывает. То же самое при первом посещении страницы с другого устроиства. Такое ощущение, что пока страница в браузере не закэшировалась, своиство не отрабатывает. Может такое быть?

[Nekstati]

Не может. Наверное, страница перегружена, сервер тупит или браузер, и задержки 0.5s мало. Для теста можно поставить 3s, например.

Отправлено спустя 4 минуты 8 секунд:
Можно ещё вот так попробовать:

Код: Выделить всё

@keyframes postButtonsReveal {
	from { opacity: 0; }
	to { opacity: 1; }
}
.post-buttons {
	max-width: 64px !important;
	opacity: 0;
}
.hasjs .post-buttons {
	animation: postButtonsReveal ease 0.3s 0.5s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

Это означает сначала ждём, пока скрипты загрузятся и начнут работать, потом ждём ещё 0.5s, потом показываем кнопки.

[romeo_piter]

сервер тупит

Есть такое...

сначала ждём, пока скрипты загрузятся и начнут работать, потом ждём ещё 0.5s, потом показываем кнопки.

Супер. Работает.

[romeo_piter]

Nekstati, обнаружил 2 проблемы со сворачиванием кнопок.
1. Список прячется под цитату, то что за цитатой невозможно нажать. Ситуация появляется когда цитата в сообщении идет первой.
2. Если пост слишком коротки, а список кнопок длинный - нижние ссылки скрываются за тело следующего поста.

Untitled-1аа.jpg

Это можно как-то поправить?

[southklad]

Увеличьте значение z-index для выпадающего меню

[romeo_piter]

Увеличьте значение z-index для выпадающего меню

z-index нельзя установить для position:static

Nekstati, не подскажете, как решить 2 вопроса выше? Есть уточнения.
Выпадашка закрывается цитатой только если к ней применено св-во opacity. Если прозрачности нет, то все ок. Непонятно, почему так. У меня цитата с прозрачностью 0.5. Я бы уменьшил ей width чтобы она не пересекалась с выпадашкой, но тогда надо добавлять условие еще для адаптивки на смартфонах.
А за сообщение так и залезает...( Z-index не выставить. Непонятно (

[Nekstati]

Код: Выделить всё

ul.post-buttons {
    z-index: 1;
}

Отправлено спустя 36 минут 27 секунд:
romeo_piter, или попробуйте вообще по-другому, вместо всего описанного выше:

Код: Выделить всё

.section-viewtopic .post-buttons {
	max-width: 64px !important;
	opacity: 0;
	transition: opacity 0.3s 0.3s;
}
.hasjs .post-buttons {
	opacity: 1;
}