Skip to content
Prev Previous commit
Next Next commit
Divide the Bootstrap template into subtemplates
  • Loading branch information
eematveev committed May 7, 2023
commit 1ee77f783fd721297c06cd34171ef4154acf02df
27 changes: 25 additions & 2 deletions App/Controllers/Home.php
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,32 @@ class Home extends \Core\Controller
*/
public function indexAction($params)
{
$args = [
$mainArgs = [
'title' => 'Fixed navbar',
'description' => 'Fixed navbar: Bootstrap 4 example template',
'author' => 'Twitter',
'menu' => [
[
'title' => 'Home',
'class' => 'active',
'href' => '#',
],
[
'title' => 'Link',
'class' => null,
'href' => '#',
],
[
'title' => 'Disabled',
'class' => 'disabled',
'href' => '#',
],
],
];
View::render('bootstrap.phtml', $args);
$bootstrapArgs = [
'navbar' => View::render('navbar.phtml', $mainArgs),
'main' => View::render('Home/index.phtml', $mainArgs),
];
echo View::render('bootstrap.phtml', $mainArgs + $bootstrapArgs);
}
}
6 changes: 6 additions & 0 deletions App/Views/Home/index.phtml
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<div class="jumbotron">
<h1>Fixed navbar</h1>
<h4>Bootstrap 4 example template</h4>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser's viewport.</p>
<a class="btn btn-lg btn-primary" href="https://getbootstrap.com/docs/4.0/components/navbar/" role="button">View navbar docs &raquo;</a>
</div>
35 changes: 4 additions & 31 deletions App/Views/bootstrap.phtml
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<meta name="description" content="<?= $description ?>">
<meta name="author" content="<?= $author ?>">
<link rel="icon" href="https://getbootstrap.com/docs/4.0/assets/img/favicons/favicon.ico">

<title><?= $title ?></title>
Expand All @@ -20,37 +20,10 @@

<body>

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Fixed navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<?= $navbar ?>

<main role="main" class="container">
<div class="jumbotron">
<h1>Fixed navbar</h1>
<h4>Bootstrap 4 example template</h4>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser's viewport.</p>
<a class="btn btn-lg btn-primary" href="https://getbootstrap.com/docs/4.0/components/navbar/" role="button">View navbar docs &raquo;</a>
</div>
<?= $main ?>
</main>

<!-- Bootstrap core JavaScript
Expand Down
22 changes: 22 additions & 0 deletions App/Views/navbar.phtml
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="./" title="<?= $description ?>"><?= $title ?></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<?php foreach ($menu as $m) { ?>
<li class="nav-item<?= ' ' . $m['class'] ?>">
<a class="nav-link" href="<?= $m['href'] ?>"><?= $m['title'] ?>
<?php if ($m['class'] == 'active') { ?>
<span class="sr-only">(current)</span>
<?php } ?></a>
</li>
<?php } ?>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
4 changes: 4 additions & 0 deletions Core/View.php
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,11 @@ public static function render($view, $args = [])
$file = dirname(__DIR__) . "/App/Views/$view"; // relative to Core directory

if (is_readable($file)) {
ob_start();
require $file;
$ob_contents = ob_get_contents();
ob_end_clean();
return $ob_contents;
} else {
throw new \Exception("$file not found");
}
Expand Down