Шаблон редактирования страницы для Cotonti Siena (grid-модель)

Шаблон редактирования страницы для Cotonti Siena (grid-модель)

Типовой шаблон редактирования страницы с заменой табличной модели на grid-модель

<!-- BEGIN: MAIN -->
<main id="page_edit" class="my-4">
	<div class="container">
		{FILE "{PHP.cfg.themes_dir}/{PHP.theme}/warnings.tpl"}
		<h2 class="mb-3">{PAGEEDIT_PAGETITLE} #{PAGEEDIT_FORM_ID} ({PAGEEDIT_FORM_LOCAL_STATUS})</h2>

		<form action="{PAGEEDIT_FORM_SEND}" enctype="multipart/form-data" method="post" name="pageform">
			<div class="d-md-grid mb-4" id="pageadmin">

				<div class="interim">
					<div>{PHP.L.Category}:</div>
					<div>{PAGEEDIT_FORM_CAT}</div>
				</div>
				<div class="interim">
					<div>{PHP.L.Title}:</div>
					<div>{PAGEEDIT_FORM_TITLE|cot_rc_modify($this, 'class="form-control"')}</div>
				</div>
				<div class="interim">
					<div>{PHP.L.Description}:</div>
					<div>{PAGEEDIT_FORM_DESCRIPTION|cot_rc_modify($this, 'class="form-control"')}</div>
				</div>
				<div class="interim">
					<div>{PHP.L.Date}:</div>
					<div>
						{PAGEEDIT_FORM_DATE}
						<div class="small mt-1 mb-0">{PAGEEDIT_FORM_DATENOW} {PHP.L.Update}</div>
					</div>
				</div>
				<div class="interim">
					<div>{PHP.L.Begin}:</div>
					<div>{PAGEEDIT_FORM_BEGIN}</div>
				</div>
				<div class="interim">
					<div>{PHP.L.Expire}:</div>
					<div>{PAGEEDIT_FORM_EXPIRE}</div>
				</div>
				<div class="interim">
					<div>{PHP.L.Alias}:</div>
					<div>{PAGEEDIT_FORM_ALIAS|cot_rc_modify($this, 'class="form-control"')}</div>
				</div>
				<div class="interim">
					<div>{PHP.L.page_metatitle}:</div>
					<div>{PAGEEDIT_FORM_METATITLE|cot_rc_modify($this, 'class="form-control"')}</div>
				</div>
				<div class="interim">
					<div>{PHP.L.page_metadesc}:</div>
					<div>{PAGEEDIT_FORM_METADESC|cot_rc_modify($this, 'class="form-control"')}</div>
				</div>

				<!-- IF {PAGEEDIT_FORM_TAGS} -->
				<div class="interim">
					<div>{PHP.L.Tags}:</div>
					<div>{PAGEEDIT_FORM_TAGS}</div>
				</div>
				<!-- ENDIF -->

				<!-- BEGIN: ADMIN -->
				<div class="interim">
					<div>{PHP.L.Owner} / {PHP.L.Author}:</div>
					<div class="d-flex flex-column flex-md-row gap-2">
						{PAGEEDIT_FORM_OWNER_ID|cot_rc_modify($this, 'class="form-control"')}
						{PAGEEDIT_FORM_AUTHOR|cot_rc_modify($this, 'class="form-control"')}
					</div>
				</div>
				<div class="interim">
					<div>{PHP.L.Hits}:</div>
					<div>{PAGEEDIT_FORM_HITS|cot_rc_modify($this, 'class="form-control"')}</div>
				</div>
				<!-- END: ADMIN -->

				<div class="interim">
					<div>{PHP.L.Parser}:</div>
					<div>{PAGEEDIT_FORM_PARSER}</div>
				</div>
				<div class="interim">
					<div class="fullwidth px-0 py-3">{PAGEEDIT_FORM_TEXT}</div>
				</div>
				<div class="interim">
					<div>{PHP.L.page_deletepage}:</div>
					<div>{PAGEEDIT_FORM_DELETE}</div>
				</div>

				<div class="interim">
					<div class="fullwidth p-md-3 d-flex gap-2">
						<!-- IF {PHP.usr_can_publish} -->
						<button type="submit" name="rpagestate" value="0" class="btn btn-success btn-sm">
							{PHP.L.Publish}
						</button>
						<!-- ENDIF -->
						<button type="submit" name="rpagestate" value="2" class="btn btn-warning btn-sm">
							{PHP.L.Saveasdraft}
						</button>
						<button type="submit" name="rpagestate" value="1" class="btn btn-danger btn-sm">
							{PHP.L.Submitforapproval}
						</button>
					</div>
				</div>

			</div>
		</form>

	</div>
</main>

<style media="screen">
	div#pageadmin	{ grid-template-columns: 20% 80%; }
	div.interim		{ margin-bottom: .75rem; }
	div.interim > div:first-child	{ margin-bottom: .125rem; }

	span.select2	{ width: 100%!important; }

	@media (min-width: 768px) {
		div.interim	{ display: contents; }
		div.interim > div	{ padding: .5rem .75rem; }
		div.interim > div:first-child	{ margin-bottom: 0; }
		div.interim:nth-child(odd) > div	{ background: #f3f3f3; }
		div.interim:nth-child(even) > div	{ background: #fefefe; }
		div.fullwidth	{ grid-column: span 2; }
	}
</style>

<script>
	$(document).ready(function() {
	  /* Stylize Form Select */
	  $('form select').addClass('form-select').css({'width': 'auto', 'display': 'inline-block'});
	  $('form select option').addClass('fs-6');
	});
</script>
<!-- END: MAIN -->