Merge pull request #295 from sitedyno/bootstrap-html

Update HTML & code for bootstrap 4
FriendsOfCake · Dec 21, 2021 · 4bcb8af · 4bcb8af
2 parents 97397c1 + 5c86305
commit 4bcb8af
Show file tree

Hide file tree

Showing 10 changed files with 50 additions and 42 deletions.
diff --git a/templates/cell/TablesList/display.php b/templates/cell/TablesList/display.php
@@ -1,9 +1,8 @@
 <?php
-foreach ($tables as $table => $config) {
-    ?>
-    <li><?= $this->Html->link($config['title'], [
-        'controller' => $config['controller'],
-        'action' => $config['action'],
-    ]); ?></li>
-    <?php
+
+use CrudView\Menu\MenuItem;
+
+foreach ($tables as $entry) {
+    $menu = new MenuItem($entry['title'], ['controller' => $entry['controller'], 'action' => 'index']);
+    echo $this->element('menu/item', ['item' => $menu, 'itemClass' => 'nav-link']);
 }
diff --git a/templates/element/form/buttons.php b/templates/element/form/buttons.php
@@ -1,5 +1,5 @@
 <?php if (!empty($formSubmitExtraLeftButtons)) : ?>
-<div class="col pull-left">
+<div class="float-left">
     <?php
     $btns = [];
     foreach ($formSubmitExtraLeftButtons as $button) {
@@ -19,7 +19,7 @@
 </div>
 <?php endif ?>
 
-<div class="col pull-right">
+<div class="float-right">
     <?= $this->Form->button(
         $formSubmitButtonText,
         ['class' => 'btn btn-primary', 'name' => '_save', 'value' => '1']

diff --git a/templates/element/index/table.php b/templates/element/index/table.php
@@ -1,5 +1,5 @@
 <div class="table-responsive">
-    <table class="table table-hover table-condensed">
+    <table class="table table-hover table-sm">
     <thead>
         <tr>
             <?= $this->element('index/bulk_actions/table', compact('bulkActions', 'primaryKey', 'singularVar')); ?>

diff --git a/templates/element/menu/divider.php b/templates/element/menu/divider.php
@@ -1 +1 @@
-<li class="divider"></li>
+<li class="dropdown-divider"></li>
diff --git a/templates/element/menu/item.php b/templates/element/menu/item.php
@@ -1,7 +1,15 @@
+<?php
+$itemClass = $itemClass ?? 'nav-link';
+$options = array_merge($item->getOptions(), ['class' => 'nav-link']);
+?>
+<?php if ($itemClass === 'nav-link') : ?>
+<li class="nav-item">
+<?php else : ?>
 <li>
+<?php endif; ?>
     <?php if ($item->getUrl() === null) : ?>
-        <span class="nav-header"><?= $item->getTitle() ?></span>
+        <span class="<?= $itemClass; ?> disabled"><?= $item->getTitle(); ?></span>
     <?php else : ?>
-        <?= $this->Html->link($item->getTitle(), $item->getUrl(), $item->getOptions()); ?>
+        <?= $this->Html->link($item->getTitle(), $item->getUrl(), $options); ?>
     <?php endif; ?>
 </li>
diff --git a/templates/element/sidebar.php b/templates/element/sidebar.php
@@ -9,9 +9,9 @@
 }
 ?>
 
-<div class="collapse navbar-collapse navbar-ex1-collapse navbar-left bs-sidebar">
+<div class="collapse navbar-collapse show navbar-ex1-collapse navbar-left bs-sidebar">
     <nav>
-        <ul class="nav nav-pills nav-stacked">
+        <ul class="nav nav-pills flex-column bg-light">
             <?php if ($sidebarNavigation === null) : ?>
                 <?= $this->cell('CrudView.TablesList', [
                     'tables' => Hash::get($actionConfig, 'scaffold.tables'),

diff --git a/templates/element/topbar.php b/templates/element/topbar.php
@@ -4,7 +4,7 @@
 }
 ?>
 
-<ul class="nav navbar-nav navbar-right navbar-user">
+<ul class="nav justify-content-end" role="navigation">
     <?php
     foreach ($utilityNavigation as $entry) {
         if ($entry instanceof \CrudView\Menu\MenuItem) {

diff --git a/templates/element/view/related/has_many.php b/templates/element/view/related/has_many.php
@@ -16,7 +16,7 @@
     ?>
     <div class="related">
         <h3><?= __d('crud', 'Related {0}', [Inflector::humanize($details['controller'])]); ?></h3>
-        <div class="actions-wrapper">
+        <div class="actions-wrapper mb-3">
             <?= $this->CrudView->createRelationLink($alias, $details, ['class' => 'btn btn-secondary']);?>
         </div>
         <?php

diff --git a/templates/element/view/related/has_one.php b/templates/element/view/related/has_one.php
@@ -11,7 +11,7 @@
 <div class="related">
     <h3><?= __d('crud', 'Related {0}', [Inflector::humanize($details['controller'])]); ?></h3>
 
-    <div class="actions-wrapper">
+    <div class="actions-wrapper mb-3">
         <?= $this->Html->link(
             __d('crud', 'View {0}', [Inflector::humanize(Inflector::underscore($alias))]),
             ['plugin' => $details['plugin'], 'controller' => $details['controller'], 'action' => 'view', ${$viewVar}[$alias][$details['primaryKey']]],

diff --git a/templates/layout/default.php b/templates/layout/default.php
@@ -11,30 +11,31 @@
     <?= $this->fetch('headjs'); ?>
 </head>
 <body>
-    <nav class="navbar navbar-default navbar-static-top" role="navigation">
-        <div class="container-fluid">
-            <div class="navbar-header">
-                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
-                    <span class="sr-only">Toggle navigation</span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                </button>
-                <?php
-                    $siteTitleContent = $siteTitle;
-                if (!empty($siteTitleImage)) {
-                    $siteTitleContent = $this->Html->image($siteTitleImage);
-                }
-                if (empty($siteTitleLink)) {
-                    echo $this->Html->tag('span', $siteTitleContent, ['class' => 'navbar-brand', 'escape' => false]);
-                } else {
-                    echo $this->Html->link($siteTitleContent, $siteTitleLink, ['class' => 'navbar-brand', 'escape' => false]);
-                }
-                ?>
-            </div>
+    <nav class="navbar navbar-light bg-light" role="navigation">
+            <button type="button" class="navbar-toggler mr-2" data-toggle="collapse" data-target=".navbar-ex1-collapse">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <?php
+            $siteTitleContent = $siteTitle;
+            if (!empty($siteTitleImage)) {
+                $siteTitleContent = $this->Html->image($siteTitleImage, ['class' => 'navbar-brand mr-auto']);
+            }
+            if (empty($siteTitleLink)) {
+                echo $this->Html->tag(
+                    'span',
+                    $siteTitleContent,
+                    ['class' => 'navbar-brand mr-auto', 'escape' => false]
+                );
+            } else {
+                echo $this->Html->link(
+                    $siteTitleContent,
+                    $siteTitleLink,
+                    ['class' => 'navbar-brand mr-auto', 'escape' => false]
+                );
+            }
+            ?>
 
             <?= $this->element('topbar'); ?>
-        </div>
     </nav>
 
     <div class="container-fluid">
@@ -47,10 +48,10 @@
                     <?= $this->fetch('action_link_forms'); ?>
                 </div>
             <?php else : ?>
-                <div class="col-xs-0 col-sm-2 col-lg-2">
+                <div class="col-0 col-sm-2 col-lg-2">
                     <?= $this->element('sidebar'); ?>
                 </div>
-                <div class="col-xs-12 col-sm-10 col-lg-10">
+                <div class="col-12 col-sm-10 col-lg-10">
                     <?= $this->Flash->render(); ?>
                     <?= $this->element('breadcrumbs') ?>
                     <?= $this->fetch('content'); ?>