Перейти к публикации
View in the app

A better way to browse. Learn more.

Дизайн и модификация Invision Community

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Всплывающее новое ЛС или уведомление.

Опубликовано:

Подскажите пожалуйста, какой шаблон отвечает за вывод всплывающего на переднем плане нового ЛС?

Проблемка в том, что нижний край чуть ниже нижней панели и не нажать на кнопки. Хотелось бы его укоротить по высоте. В CSS нашел отвечающую часть, хотя может это и не вся. За основу беру дефолтный стиль, там это окно привязано к нижней точке и остается на месте при прокрутке скролом. Пока это решил параметром "position: absolute;", теперь оно движется вверх со скролом. Размеры по ширине меняются и динамичны при изменении разрешения, а вот высота константа. При этом высоты всех элементов меняются, кроме текста внутри и нижней части с кнопками.

Кусок CSS

#pm_notification {
background: url({style_images_url}/trans_bg.png);
color: #515151;
padding: 0;
margin: 0px 20% 0%;
width: 60%;
position: absolute;
z-index: 2000;
}

#pm_notification #pm_wrap {
	background: #dfe3d0;
	padding: 0px 0 0px 0;
	margin: 10px;
}


#pm_notification h2 {
	font-size: 1.1em;
	font-weight: bold;
	clear: none;
	padding-left: 18px;
	margin: -8px 0 0 10px;
	color: #4d4d4d;
}

	#pm_notification.open h2 {
		background: url({style_images_url}/folder_open.png ) no-repeat 2px 2px;
	}
	#pm_notification.closed h2 {
		background: url({style_images_url}/folder_closed.png ) no-repeat 2px 2px;
	}

#pm_notification p.excerpt { 
	margin: 15px 20px 25px;
	line-height: 150%;
	overflow: auto;
	max-height: 200px;
}

#pm_notification p.desc {
	margin: 0px 15px 0;
	float: right;
}

body#ipboard_body #pm_notification p.submit {	
	margin: 15px 0 0;
	padding-left: 15px;
	text-align: left;
}

#pm_notification a.configure {
	font-size: 0.9em;
	float: right;
	margin-right: 15px;
}
#pm_notification .ok_thanks {
	text-align: center;
	padding: 6px;
	clear: both;
}

#pm_notification h3 {
	background-color: #dae4ed;
	font-size: 1.2em;
	padding: 6px;
	margin-bottom: 2px;
}

#pm_notification h3 a {
	text-decoration: underline;
}

#pm_notification h3 img {
	margin-right: 6px;
}

 

 

Вот и подумал, что возможно (скорее всего) это в шаблоне, а найти не могу. Спасибо

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

Опубликовано:
  • Автор

Код шаблона нашел

				<if test="pmbox:|:is_array( $items['notifications'] )">
				<div id='pm_notification' class='open' rel='{$items['notifications']['notify_id']}'>
					<div id='pm_wrap'>
						<h3><a href='#j_content' id='close_pm_notification'><img src="{$this->settings['img_url']}/close_popup.png" alt="x"></a> <span id='pm_notify_title'>{$items['notifications']['notify_title']}</span></h3>
						<p class='desc'><strong>{$this->lang->words['pc_sent']}</strong> <span id='pm_date'>{parse date="$items['notifications']['notify_sent']" format="short"}</span></p>
						<p id='pm_notify_excerpt' class='excerpt'>
							{$items['notifications']['notify_text']}
						</p>
						<p class='submit'>
							<if test="$items['notifications']['notify_url']">
								<a href='{$items['notifications']['notify_url']}' id='view_pm_notification' class='input_submit'>{$this->lang->words['global_pm_read_short']}<if test="unreadCheck:|:$this->memberData['notification_cnt'] > 1"> (<span id='pm-count'>1</span>/{$this->memberData['notification_cnt']})</if></a>  
							<else />
								<a href='{parse url="app=core&module=usercp&area=viewNotification&do=view&view={$items['notifications']['notify_id']}" base="public"}' id='view_pm_notification' class='input_submit'>{$this->lang->words['global_pm_read']}<if test="unreadCheck:|:$this->memberData['notification_cnt'] > 1"> (<span id='pm-count'>1</span>/{$this->memberData['notification_cnt']})</if></a>  
							</if>
							<a href='{parse url="app=core&module=usercp&area=markNotification&do=mark&mark={$items['notifications']['notify_id']}" base="public"}' id='ack_pm_notification' class='input_submit alt'>{$this->lang->words['mark_pc_read']}</a>  

							<a href='#' id='notification_go_forward' class='configure input_submit<if test="morethanonenotification:|:$this->memberData['notification_cnt'] < 2"> hide</if>'>></a>
							<a href='#' id='notification_go_back' class='configure input_submit hide'><</a>

							<a href='{parse url="app=core&module=usercp&tab=core&area=notifications" base="public"}' class='configure'>{$this->lang->words['configure_notifications']}</a>
						</p>
					</div>
				</div>
				<script type='text/javascript'>
					$('pm_notification').hide();
				</script>
			</if>

 

Это ничего не прояснило :unsure:

Изменено пользователем Андрей Волков
Добавил тег code

Опубликовано:

Это ничего не прояснило :rolleyes:

Естественно. Позиционирование или задается в яваскрипте или скорее всего в CSS

Опубликовано:
  • Автор

Естественно. Позиционирование или задается в яваскрипте или скорее всего в CSS

Ну все приведено выше, и шаблон и CSS к нему :rolleyes: Про яву забыл, сейчас посмотрю. Видел на зарубежных один баг репорт по этому поводу, но ответов не было.

Изменено пользователем Андрей Волков

Опубликовано:
  • Автор

Вот код явы

if( $('pm_notification') )
	{
		/* Ensure pop-up isn't larger than viewport */
		var _vph = document.viewport.getDimensions().height - 275;

		$('pm_notify_excerpt').setStyle( 'max-height:' + _vph + 'px; width:95%'  );

		new Effect.Parallel([
			new Effect.Appear( $('pm_notification') ),
			new Effect.BlindDown( $('pm_notification') )
		], { duration: 0.5 } );

		if( $('close_pm_notification') ){
			$('close_pm_notification').observe('click', ipb.global.closePMpopup );
		}

		if( $('ack_pm_notification') ){
			$('ack_pm_notification').observe('click', ipb.global.markReadPMpopup );
		}

		if( $('notification_go_forward') )
		{
			$('notification_go_forward').observe( 'click', ipb.global.getNextNotification );
		}

		if( $('notification_go_back') )
		{
			$('notification_go_back').observe( 'click', ipb.global.getPreviousNotification );
		}
	}

 

Вот она нужная строчка :rolleyes: $('pm_notify_excerpt').setStyle( 'max-height:' + _vph + 'px; width:95%' );

Изменено пользователем Андрей Волков

Создайте аккаунт или войдите в него для комментирования

Сейчас на странице 0

  • Нет пользователей, просматривающих эту страницу.

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.