Страница 3 из 3

Спрятать информацию о пользователе под кнопку

Добавлено: 30 авг 2013, 19:08
CabinetAdmin
Небольшая модификация позволяющая скрывать и раскрывать информацию о пользователе под аватаром.

Как работает эта модификация можно посмотреть на нашем форуме кликнув на "Доп. информация" в профиле пользователя напротив сообщения.

Модификация для prosilver и его клонов.

Открываем шаблон overall_header.html, находим:

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

// ]]>
</script>
перед найденным добавляем:

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

function doCollapseExpand(id,img){
   var b = document.getElementById(id);
      if (b.style.display=='none'){
      b.style.display='';
   document.images[img].src='/images/dopinfo_up.gif'; 
} else {
      b.style.display='none';
   document.images[img].src='/images/dopinfo_down.gif';
} return false; }
/images/dopinfo_up.gif - изображение вверх, закрыть пункты профиля.
/images/dopinfo_down.gif - изображение вниз, открыть пункты профиля.
Закачиваем изображения на форум и меняем ссылки на свои.

Открываем шаблон viewtopic_body.html, находим:

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

<!-- IF postrow.POSTER_POSTS != '' --><dd><strong>{L_POSTS}:</strong> {postrow.POSTER_POSTS}</dd><!-- ENDIF -->
Перед найденным вставляем:

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

		<dd>
			<!-- IF postrow.U_POST_AUTHOR -->
			<a href="#" onclick="return doCollapseExpand('box{postrow.POST_ID}','btn{postrow.POST_ID}')">
			<img src="/images/dopinfo_down.gif" height="20" width="150" name="btn{postrow.POST_ID}" alt="" /></a>
			<!-- ENDIF -->
		</dd>
		<dl id="box{postrow.POST_ID}" style="display: none; margin-top: 5px; margin-bottom: 5px;">
/images/dopinfo_down.gif - меняем ссылку на своё изображение вниз. Если изображение других размеров, не забудьте изменить значения на свои.

Ниже находим:

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

		</dl>
	<!-- ENDIF -->
Перед найденным вставляем:

Модификация для subsilver2 и его клонов.

Открываем шаблон overall_header.html, находим:

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

// ]]>
</script>
перед найденным добавляем:

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

function doCollapseExpand(id,img){
   var b = document.getElementById(id);
      if (b.style.display=='none'){
      b.style.display='';
   document.images[img].src='/images/dopinfo_up.gif'; 
} else {
      b.style.display='none';
   document.images[img].src='/images/dopinfo_down.gif';
} return false; }
/images/dopinfo_up.gif - изображение вверх, закрыть пункты профиля.
/images/dopinfo_down.gif - изображение вниз, открыть пункты профиля.
Закачиваем изображения на форум и меняем ссылки на свои.

Открываем шаблон viewtopic_body.html, находим:

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

				<span class="postdetails">
меняем на:

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

				<span class="postdetails">
					<!-- IF postrow.U_POST_AUTHOR -->
					<a href="#" onclick="return doCollapseExpand('box{postrow.POST_ID}','btn{postrow.POST_ID}')">
					<img src="/images/dopinfo_down.gif" height="20" width="150" name="btn{postrow.POST_ID}" alt="" /></a>
					<!-- ENDIF -->
				</span>
				<span id="box{postrow.POST_ID}" class="postdetails" style="display: none;">
/images/dopinfo_down.gif - меняем ссылку на своё изображение вниз. Если изображение других размеров, не забудьте изменить значения на свои.



Изображения
Спрятать информацию о пользователе под кнопку - dopinfo_down.gif
Спрятать информацию о пользователе под кнопку - dopinfo_down.gif (1.38 КБ) 8670 просмотров
Спрятать информацию о пользователе под кнопку - dopinfo_up.gif
Спрятать информацию о пользователе под кнопку - dopinfo_up.gif (1.38 КБ) 8670 просмотров

Вариант без использования изображений, надписи - развернуть и свернуть.

Для обоих стилей скрипт будет следующим:

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

function doCollapseExpand(id){
   var b = document.getElementById(id);
      if (b.style.display=='none'){
      b.style.display='';
   document.getElementById('btn').innerHTML = '{L_COLLAPSE_VIEW}';
} else {
      b.style.display='none';
   document.getElementById('btn').innerHTML = '{L_EXPAND_VIEW}';
} return false; }
Для prosilver, в шаблоне viewtopic_body.html, находим:

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

<!-- IF postrow.POSTER_POSTS != '' --><dd><strong>{L_POSTS}:</strong> {postrow.POSTER_POSTS}</dd><!-- ENDIF -->
Перед найденным вставляем:

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

		<dd>
			<!-- IF postrow.U_POST_AUTHOR -->
			<a href="#" onclick="return doCollapseExpand('box{postrow.POST_ID}')"><b id="btn">{L_EXPAND_VIEW}</b></a>
			<!-- ENDIF -->
		</dd>
		<dl id="box{postrow.POST_ID}" style="display: none; margin-top: 5px; margin-bottom: 5px;">
Ниже находим:

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

		</dl>
	<!-- ENDIF -->
Перед найденным вставляем:
Для subsilver2 в шаблоне viewtopic_body.html:

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

				<span class="postdetails">
меняем на:

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

				<span class="postdetails">
					<!-- IF postrow.U_POST_AUTHOR -->
					<a href="#" onclick="return doCollapseExpand('box{postrow.POST_ID}')"><b id="btn">{L_EXPAND_VIEW}</b></a>
					<!-- ENDIF -->
				</span>
				<span id="box{postrow.POST_ID}" class="postdetails" style="display: none;">
Пользуемся.

Спрятать информацию о пользователе под кнопку

Добавлено: 14 май 2019, 16:38
CabinetAdmin
Дык, точно так же, наверно... :scratch: Всё как в первом посте описано, за исключением скрипта, как скрипт устанавливать написано тут viewtopic.php?p=76496#p76496

Спрятать информацию о пользователе под кнопку

Добавлено: 15 май 2019, 08:17
LEOPARD
CabinetAdmin, у меня нет ни одной строки, которые находятся в первом посте. Собственно, как я и ожидал.
Куда скрипт вставлять?

Спрятать информацию о пользователе под кнопку

Добавлено: 15 май 2019, 08:23
LEOPARD
CabinetAdmin, и да, как центрировать минипрофиль? Чтобы все было по центру.

Спрятать информацию о пользователе под кнопку

Добавлено: 15 май 2019, 15:47
CabinetAdmin
По поводу скрипта я уже выше дал ссылку.
По поводу остального, строка:

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

<!-- IF postrow.POSTER_POSTS != '' --><dd><strong>{L_POSTS}:</strong> {postrow.POSTER_POSTS}</dd><!-- ENDIF -->
в 3.1 и 3.2 версиях выглядит так:

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

<!-- IF postrow.POSTER_POSTS != '' --><dd class="profile-posts"><strong>{L_POSTS}{L_COLON}</strong> <!-- IF postrow.U_SEARCH !== '' --><a href="{postrow.U_SEARCH}"><!-- ENDIF -->{postrow.POSTER_POSTS}<!-- IF postrow.U_SEARCH !== '' --></a><!-- ENDIF --></dd><!-- ENDIF -->
в принципе можно догадаться что это тоже самое.
Всё.

По поводу центрирования профиля. В content.css к .postprofile { добавить text-align: center;, далее найти:

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

.postprofile .avatar {
	display: block;
	float: left;
	max-width: 100%;
}
float: left; заменить на margin: 0 auto;.

Спрятать информацию о пользователе под кнопку

Добавлено: 15 май 2019, 17:08
LEOPARD
CabinetAdmin, я не въеду куда скрипт вставлять. Первое сделано.

Спрятать информацию о пользователе под кнопку

Добавлено: 15 май 2019, 18:57
LEOPARD
CabinetAdmin, вот такая дичь получается :(
Изображение

Спрятать информацию о пользователе под кнопку

Добавлено: 16 май 2019, 15:30
CabinetAdmin
LEOPARD писал(а): я не въеду куда скрипт вставлять
Процитировать чтоль?
CabinetAdmin писал(а): Добавьте перед </head> так
LEOPARD писал(а): вот такая дичь получается
Не правильно добавили, видимо.

Спрятать информацию о пользователе под кнопку

Добавлено: 16 май 2019, 15:43
LEOPARD
CabinetAdmin, скрипт я туда и вставлял. Там все верно.
Вот это не туда вставил

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

[quote="CabinetAdmin"][post]64095[/post] Ниже находим:
КОД: ВЫДЕЛИТЬ ВСЁ

		</dl>
	<!-- ENDIF -->


Перед найденным вставляем:
КОД: ВЫДЕЛИТЬ ВСЁ

		</dl>[/quote]
Просто такой строки не было. Пришлось допирать, где окончание кода.
А так, да, все получилось, спасибо!

Спрятать информацию о пользователе под кнопку

Добавлено: 16 май 2019, 15:55
CabinetAdmin
Ну ёмаё...
Найти:

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

		</dl>

		<div class="postbody">
и перед добавить:

Спрятать информацию о пользователе под кнопку

Добавлено: 16 май 2019, 16:13
LEOPARD
CabinetAdmin, да все уже сделал из предыдущего поста)
Просто для меня этот код - сущий ад. Гуманитарии мы... :(

Спрятать информацию о пользователе под кнопку

Добавлено: 13 июн 2019, 15:06
LEOPARD
CabinetAdmin, можно еще вопросец по этому всему?)
Спойлер есть. А можно ли как-то открытие/закрытие сделать плавным, с заданной плавностью?

Спрятать информацию о пользователе под кнопку

Добавлено: 13 июн 2019, 20:51
CabinetAdmin
Можно, но тогда будут нужны ещё и стили.
Структура:

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

		<dd>
			<!-- IF postrow.U_POST_AUTHOR -->
			<a href="#" onclick="return doCollapseExpand('box{postrow.POST_ID}','btn{postrow.POST_ID}')">
			<img src="/images/dopinfo_down.gif" height="20" width="150" name="btn{postrow.POST_ID}" alt="" /></a>
			<!-- ENDIF -->
		</dd>
		<dl id="box{postrow.POST_ID}" class="dopinfo">
остальное тоже самое.

Скрипт:

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

<script>
function doCollapseExpand(id){
	var b = document.getElementById(id);
	if (b.className=='dopinfo'){
		b.classList.add('dopinfo-open');
		document.getElementById('btn').innerHTML = '{L_COLLAPSE_VIEW}';
	} else {
		b.classList.remove('dopinfo-open');
		document.getElementById('btn').innerHTML = '{L_EXPAND_VIEW}';
	} return false;
}
</script>
И стили:

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

.dopinfo {
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	margin-top: 5px;
	margin-bottom: 5px;
	-webkit-transition: opacity .3s, max-height .3s;
	-moz-transition: opacity .3s, max-height .3s;
	transition: opacity .3s, max-height .3s;
}
.dopinfo.dopinfo-open {
	max-height: 250px;
	opacity: 1;
}
opacity .3s плавное появление - 0.3 секунды.
max-height .3s плавное открытие до максимальной высоты блока, так же 0.3 секунды.
max-height: 250px; максимальная высота блока, если мало - добавить.

Спрятать информацию о пользователе под кнопку

Добавлено: 13 июн 2019, 22:54
LEOPARD
CabinetAdmin, теперь при клике на спойлер меня просто перекидывает в самый верх страницы

Спрятать информацию о пользователе под кнопку

Добавлено: 14 июн 2019, 15:21
CabinetAdmin
А, ну да, надо же ещё класс элементу добавить, плюс инлайновые стили можно в css перенести... сейчас подправлю предыдущее сообщение.

Спрятать информацию о пользователе под кнопку

Добавлено: 14 июн 2019, 17:52
LEOPARD
CabinetAdmin писал(а): А, ну да, надо же ещё класс элементу добавить, плюс инлайновые стили можно в css перенести... сейчас подправлю предыдущее сообщение.
Ну ваще! Красотенечка)
Громнейшее спасибо!