Vzhled administrace a gridů

Rudolf Svátek 2017-08-21 11:19

Výpis uživatelů už tedy funguje, jen není moc pěkný. Výpis a celé prostředí tedy upravíme tak, aby to bylo hezké.

Na webu jsou k dostání různé šablony administrací a backendů. Mně se třeba líbí https://adminlte.io/. Stáhnul jsem si ho a přizpůsobil si šablony tak, abych mohl Admin LTE využít. Tady nechám na tobě, jestli si chceš integrovat všechno, nebo jen něco, nebo použiješ to, co já.

Klidně si stáhni to, co používám já - není toho moc: assets.zip. Po stažení rozbal do složky \passwords\www.

To ale není vše. Je zapotřebí upravit si šablonu layoutu tak, aby se css a js načítaly a správně pracovaly. Obsah soubory \app\presenters\templates\@layout.latte se změní takto:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">

	<title>{ifset title}{include title|stripHtml} | {/ifset}Hesla</title>

	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="{$basePath}/assets/dist/css/app.css">
	<link rel="stylesheet" type="text/css" href="{$basePath}/assets/dist/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="{$basePath}/assets/dist/css/assets_compiled_libraries.css">
	<link rel="stylesheet" type="text/css" href="{$basePath}/assets/dist/css/assets_compiled_app.css">
	<link rel="stylesheet" type="text/css" href="{$basePath}/assets/dist/css/AdminLTE.min.css">
	<link rel="stylesheet" type="text/css" href="{$basePath}/assets/dist/css/ionicons.min.css">
	<link rel="stylesheet" type="text/css" href="{$basePath}/assets/dist/css/skins/skin-blue.min.css">
    {block head}{/block}
</head>

<body class="hold-transition skin-blue sidebar-mini sidebar-collapse">
<div class="wrapper">

	<header class="main-header">
		<a n:href="Users:" class="logo">
			<span class="logo-mini"><b>P</b>ass</span>
			<span class="logo-lg"><b>Passwords</b></span>
		</a>
		<nav class="navbar navbar-static-top">
			<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
				<span class="sr-only">Toggle navigation</span>
			</a>
		</nav>
	</header>
	<aside class="main-sidebar">
		<section class="sidebar">
			<ul class="sidebar-menu">
				<li><a n:href="Users:"><i class="fa fa-user"></i> <span>Uživatelé</span></a></li>
			</ul>
		</section>
	</aside>

	<div class="content-wrapper">
        {snippet flashes}
			<div n:foreach="$flashes as $flash" class="alert alert-{$flash->type} fade in">
				<button type="button" class="close" data-dismiss="alert">×</button>
				<p>{$flash->message}</p>
			</div>
        {/snippet}
        {snippetArea wrapper}
            {include #content}
        {/snippetArea}
	</div>
</div>

{block scripts}
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<script src="https://nette.github.io/resources/js/netteForms.min.js"></script>
	<script src="{$basePath}/assets/dist/js/assets_compiled_libraries.js"></script>
	<script src="{$basePath}/assets/dist/js/assets_compiled_app.js"></script>
	<script src="{$basePath}/assets/dist/js/app.min.js"></script>
	<script src="{$basePath}/assets/dist/js/demo.js"></script>
	<script src="{$basePath}/js/main.js"></script>
{/block}
</body>
</html>

Jestli už nějakou dobu v Nette děláš, je ti jasné, co se v šabloně děje. Nic tak složitého tam nevidím.

No a jestli se ti to povedlo, pak už výpis uživatelů bude takovýto:

Příště si doplníme všechny komponenty na výpis záznamů ze zbývajících tabulek a pohrajeme si malinko s routerem.

Redakční systém RS::RS Předchozí kapitola

Výpis dat v gridu

Redakční systém RS::RS Celý seriál

Aplikace na správu hesel

Redakční systém RS::RS Následující kapitola

Doplnění dalších komponent

Komentáře (0)

Přidej svůj komentář

O mně

Jmenuji se Rudolf Svátek. Jsem lektor výpočetní techniky a PHP programátor. Stavím firemní stránky a eshopy. Aby se mi to dělalo pohodlně, vytvořil jsem redakční systém RS::RS, který ti tu nabízím k použití.

Rychlý kontakt na mně

  • Rudolf Svátek
  • Telefon:
    +420 777 828 353
  • Email:
  • Adresa:
    Josefa Hory 1097/5
    736 01 Havířov
    ČR



Tyto stránky používají Cookies. Používáním stránek s tím souhlasíte Další informace