Пример реализации Страниц - Планы на будущее - Страницы - Invision Community Jump to content

Russian support for Invision Community

Пример реализации Страниц - Планы на будущее


Description

В данном руководстве мы пошагово создадим страницу с планами компании/сообщества. Страница выглядит следующим образом:
Скрытый текст

2.png3.png

 

Страница разработана на приложении Страницы, а каждый пункт (на примере - Поинты, Инвайты, Дизайн, Реакции) это статьи базы данных. 

PS: если вам не хочется самостоятельно делать подобную страницу, вы можете перейти к концу инструкции и скачать .xml файл, который можно импортировать как базу данных.

Описание работы

Страница представляет из себя небольшие записи, информирующие пользователей сообщества о дальнейших планах и нововведениях компании/сообщества. Пользователи сообщества могут реагировать на каждый пункт, таким образом выражать своё отношение на каждое нововведение, администратор, в свою очередь, судя по реакциям пользователей может менять статус нововведений, отдавая предпочтение более востребовательным. В ходе работы будут даны более подробные комментарии.

Создание базы данных

Первое, что необходимо сделать - создать новую базу данных. Этот процесс подробно описан в документе Создание базы данных в Invision Community. У наше базы будут следующие отличительные черты:

  • Название базы данных: Планы на будущее.
  • Использовать категории: Нет, хранить записи непосредственно в базе данных.
  • Ключ базы данных: plans.
  • Язык: пункт.
  • Разрешить комментарии: нет.
  • Разрешить отзывы: нет.
  • Включить загрузку изображения к записи: нет.

После чего сохраняем базу.

Создание страницы

Теперь нам необходимо добавить нашу базу на новую страницу. Подробная инструкция по созданию страниц в Invision Community. Параметры страницы:

  • Название - Планы на будущее.
  • Название файла страницы - future.

Теперь необходимо подключить CSS код к нашей странице. Для этого переходим в меню шаблоны -> Новый -> Добавить новый CSS файл. Назовём его status.css и вставим следующий css код:

Скрытый текст

.c4StatusTable {
  max-width: 800px;
  margin: 0 auto;
}

.c4StatusRow {
  display: block;
}

.c4StatusRow:not( .ipsModerated ):hover {
  background: #f5f5f5;
}

.c4StatusRow .ipsColumn_medium {
  width: 180px;
}

.c4StatusBadge {
  line-height: 28px;
  padding: 0 10px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  display: block;
  color: #fff;
  text-align: center;
}

.c4StatusBadge_upNext {
  background: #2980b9; 
}

.c4StatusBadge_comingSoon {
  background: #d35400;
}

.c4StatusBadge_future {
 background: #2c3e50; 
}

.c4StatusBadge_done {
  background: #27ae60;
}

.c4StatusRow {
 padding:30px; 
}
.cCmsListing li {
 position:relative 
}
.ibtRepBnts {
  position: absolute;
  right: 23px;
  top: 59px;
}
@media screen and (max-width: 767px) {
  .ibtRepBnts {top:37px;}
}

 

После чего, необходимо зайти в настройки страницы future и во вкладке Включения в страницу выбрать только что созданный нами css файл. 

Шаблоны базы данных

Для нашей базы необходимо модифицировать шаблон отображения списка записей. Другие шаблоны базы оставим стандартными, т.к. будет задействована одна страница - отображающая список пунктов. Для этого переходим в меню Шаблоны -> кнопка Новый -> Добавить шаблон базы данных:

  • Название: Featureplan
  • Тип шаблона: Список записей
  • Присвоить к базе данных: Планы на будущее

После сохранения изменим три шаблона (замените их содержимое полностью):

recordRow

Скрытый текст


{{$rowIds = array();}}
{{foreach $rows as $row}}
	{{$idField = $row::$databaseColumnId;}}
	{{$rowIds[] = $row->$idField;}}
{{endforeach}}
{{foreach $rows as $row}}
	{{$idField = $row::$databaseColumnId;}}
	<li class="ipsSpacer_bottom ipsClearfix" data-rowID='{$row->$idField}'>
      	<a href='#' class='c4StatusRow ipsAreaBackground_light {{if $row->fieldValues()['field_5'] == '4'}}ipsFaded{{endif}} ipsPad ipsType_blendLinks {{if $row->hidden()}}ipsModerated{{endif}}' data-ipsDialog data-ipsDialog-title="{$row->_title}" data-ipsDialog-size='medium' data-ipsDialog-content='#el4StatusInfo_{$row->$idField}'>
			<div class='ipsColumns ipsColumns_collapsePhone'>
				<div class='ipsColumn ipsColumn_fluid'>
					<h4 class='ipsType_sectionHead ipsType_break'>
						<strong>{{if $row->_title}}{$row->_title}{{else}}<em class="ipsType_light">{lang="content_deleted"}</em>{{endif}}</strong>
					</h4>
					{{if $row->isFutureDate() || $row->mapped('pinned') || $row->mapped('featured') || $row->hidden() === -1 || $row->hidden() === 1}}
						<span>
							{{if $row->isFutureDate()}}
								<span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_warning" data-ipsTooltip title='{$row->futureDateBlurb()}'><i class='fa fa-clock-o'></i></span>
							{{elseif $row->hidden() === -1}}
								<span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_warning" data-ipsTooltip title='{$row->hiddenBlurb()}'><i class='fa fa-eye-slash'></i></span>
							{{elseif $row->hidden() === 1}}
								<span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_warning" data-ipsTooltip title='{lang="pending_approval"}'><i class='fa fa-warning'></i></span>
							{{endif}}							
							{{if $row->mapped('pinned')}}
								<span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_positive" data-ipsTooltip title='{lang="pinned"}'><i class='fa fa-thumb-tack'></i></span>
							{{endif}}
							{{if $row->mapped('featured')}}
								<span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_positive" data-ipsTooltip title='{lang="featured"}'><i class='fa fa-star'></i></span>
							{{endif}}
						</span>
					{{endif}}

					<div class='ipsType_normal ipsType_break'>
						{$row->customFieldDisplayByKey('summary', 'listing')|raw}
					</div>
				</div>
				<div class='ipsColumn ipsColumn_medium'>
					{$row->customFieldDisplayByKey('status2', 'listing')|raw}
				</div>
              
			</div>
          
		</a>
		{{if \IPS\IPS::classUsesTrait( $row, 'IPS\Content\Reactable' ) and settings.reputation_enabled}}
                  <div class="ipsPad_half ibtRepBnts">{template="reputationMini" app="core" group="global" params="$row"}</div>
              {{endif}}
		{{if $table->container()->can('add')}}
			<a href='{$row->url()}' class='ipsType_medium'>
				(Изменить)
			</a>
		{{endif}}
		<div id='el4StatusInfo_{$row->$idField}' class='ipsHide'>
			<div class='ipsPad ipsType_normal ipsType_break ipsType_contained ipsType_richText'>
				{$row->content()|raw}
			</div>
		</div>
	</li>
{{endforeach}}

 

 

categoryHeader

Скрытый текст


<div class='ipsType_center ipsSpacer_bottom ipsSpacer_top'>
	<h1 class="ipsType_veryLarge ipsType_reset">{$category->_title}</h1>
	<div class='ipsType_richText ipsType_large ipsType_light ipsSpacer_bottom'>
		{$category->_description|raw}
	</div>
  	<div class='ipsResponsive_noFloat ipsResponsive_hidePhone'>
		{template="follow" app="core" group="global" params="'cms','categories' . $category->database_id, $category->_id, \IPS\cms\Records::containerFollowerCount( $category )"}
	</div>
</div>
<div class='c4StatusTable'>
{{if ! \IPS\Request::i()->isAjax() AND ! isset( \IPS\Request::i()->advancedSearchForm ) AND $category->show_records}}
	<ul class="ipsToolList ipsToolList_horizontal ipsClearfix ipsSpacer_both ipsResponsive_hidePhone">
		{{if $category->can('add')}}
			<li class='ipsToolList_primaryAction'>
				<a class="ipsButton ipsButton_medium ipsButton_important ipsButton_fullWidth" href="{$category->url()->setQueryString( array( 'do' => 'form', 'd' => \IPS\cms\Databases\Dispatcher::i()->databaseId ) )}">{lang="cms_add_new_record_button" sprintf="\IPS\cms\Databases::load( $category->database_id )->recordWord( 1 )"}</a>
			</li>
		{{endif}}
	</ul>
{{endif}}
</div>
{{if count( $activeFilters )  AND ! isset( \IPS\Request::i()->advancedSearchForm )}}
	{template="filterMessage" app="cms" location="database" group="status" params="$activeFilters, $category"}
{{endif}}

 

 

categoryTable

Скрытый текст


<div class='c4StatusTable' data-baseurl='{$table->baseUrl}' data-resort='{$table->resortKey}' data-controller='core.global.core.table{{if $table->canModerate()}},core.front.core.moderation{{endif}}'>
	{{if ! count($rows)}}
		<div class="ipsPad">
			{lang="cms_no_records_to_show" sprintf="\IPS\cms\Databases::load( \IPS\cms\Databases\Dispatcher::i()->databaseId )->recordWord()"}
		</div>
	{{else}}
		<ol class='ipsDataList ipsDataList_zebra ipsClear cCmsListing {{foreach $table->classes as $class}}{$class} {{endforeach}}' id='elTable_{$table->uniqueId}' data-role="tableRows">
			{template="$table->rowsTemplate[1]" params="$table, $headers, $rows" object="$table->rowsTemplate[0]"}
		</ol>
	{{endif}}
</div>

 

 

ОБРАТИТЕ ВНИМАНИЕ, что в шаблоне recordRow необходимо подставить ID своего поля (которое мы создадим ниже), в конструкции:

{{if $row->fieldValues()['field_5'] == '4'}}

Где field_5 - ID поля статус. У вас он будет свой. 

 

Настройка дополнительных полей

Последнее, что нам осталось сделать - настроить дополнительные поля, отображающие статус и подробное описание нововведения.

Для этого переходим в раздел админцентра Базы данных и в меню справа от нашей базы выбираем пункт Управление полями. Нам необходимо добавить два поля:

Поле #1 - статус

Название: Статус

Тип: окно выбора

Ключ/Значение: 1/Следующее, 2/Скоро, 3/Планируется, 4/Завершено

Вкладка Параметры отображения:

Ключ шаблона: status2

Формат списка записей: указать

{{if intval( $formValue ) === 1}}
	<span class='c4StatusBadge c4StatusBadge_upNext'>{$value}</span>
{{elseif intval( $formValue ) === 2}}
	<span class='c4StatusBadge c4StatusBadge_comingSoon'>{$value}</span>
{{elseif intval( $formValue ) === 3}}
	<span class='c4StatusBadge c4StatusBadge_future'>{$value}</span>
{{elseif intval( $formValue ) === 4}}
	<span class='c4StatusBadge c4StatusBadge_done'>{$value}</span>
{{endif}}

Показать при отображении записи: нет

Сохранить.

Поле #2 - резюме

Информация из этого поля располагается под название пункта. 

Название: Резюме

Тип: Текст

Вкладка Параметры отображения:

Ключ: summary

Показать в списке записей: Без форматирования

Показать при отображении записи: нет

  • Спасибо 2
 Share

User Feedback

Recommended Comments

There are no comments to display.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Privacy Policy We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.