fix minor corrections. (#5)

yii2-extensions · Oct 10, 2023 · 84f5990 · 84f5990
1 parent d3b3733
commit 84f5990
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 48 deletions.
diff --git a/README.md b/README.md
@@ -65,8 +65,8 @@ root
 The web application contains:
 
 - [x] Pages - [Screenshots]:
-    - [about](docs/about.jpg)
-    - [contact](docs/contact.jpg)
+    - [about](docs/about.png)
+    - [contact](docs/contact.png)
 
 <p align="justify">
 It includes all commonly used configurations that would allow you to focus on adding new

diff --git a/composer.json b/composer.json
@@ -12,7 +12,7 @@
     "prefer-stable": true,
     "require": {
         "php": ">=8.1",
-        "npm-asset/fortawesome--fontawesome-free": "^6.0",
+        "npm-asset/fortawesome--fontawesome-free": "^6.4",
         "sjaakp/yii2-icon": "^1.0",
         "oomphinc/composer-installers-extender": "^2.0",
         "yiisoft/yii2": "^2.2",

diff --git a/src/Framework/resource/js/site.js b/src/Framework/resource/js/site.js
@@ -41,11 +41,11 @@
     const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
 
     // Añade las siguientes líneas para mostrar el icono de verificación en el botón activo.
-    const activeCheckIcon = btnToActive.querySelector('.bi');
+    const activeCheckIcon = btnToActive.querySelector('.check');
     activeCheckIcon.classList.remove('d-none');
 
     document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
-      const checkIcon = element.querySelector('.bi');
+      const checkIcon = element.querySelector('.check');
       if (element === btnToActive) {
         checkIcon.classList.remove('d-none');
       } else {

diff --git a/src/Framework/resource/layout/component/toggle_dark.php b/src/Framework/resource/layout/component/toggle_dark.php
@@ -0,0 +1,85 @@
+<?php
+
+declare(strict_types=1);
+
+use sjaakp\icon\Icon;
+use yii\bootstrap5\Html;
+
+?>
+<?= Html::beginTag('li') ?>
+    <?= Html::beginTag('div', ['class' => 'dropdown bd-mode-toggle']) ?>
+        <?= Html::beginTag(
+            'button',
+            [
+                'aria-expanded' => 'false',
+                'aria-label' => 'Toggle theme (auto)',
+                'class' => 'btn btn-bd-primary dropdown-toggle d-flex align-items-center',
+                'data-bs-toggle' => 'dropdown',
+                'id' => 'bd-theme',
+                'type' => 'button'
+            ],
+        ) ?>
+            <?= Icon::renderIcon('solid', 'circle-half-stroke', ['class' => 'me-2 fa-solid fa-xl theme-icon-active']) ?>
+            <?= Html::tag('span', 'Toggle theme', ['class' => 'visually-hidden', 'id' => 'bd-theme-text']) ?>
+        <?= Html::endTag('button') ?>
+        <?= Html::beginTag(
+            'ul',
+            ['aria-labelledby' => 'bd-theme-text', 'class' => 'dropdown-menu dropdown-menu-end shadow'],
+        ) ?>
+            <?= Html::beginTag('li') ?>
+                <?= Html::beginTag(
+                    'button',
+                    [
+                        'aria-pressed' => 'false',
+                        'class' => 'dropdown-item d-flex align-items-center',
+                        'data-bs-theme-value' => 'light',
+                    ],
+                ) ?>
+                    <?= Icon::renderIcon('solid', 'sun', ['class' => 'me-2 fa-solid theme-icon']) ?>
+                    Light
+                    <?= Icon::renderIcon(
+                        'solid',
+                        'check',
+                        ['class' => 'check ms-auto d-none', 'width' => '1em', 'height' => '1em'],
+                    ) ?>
+                <?= Html::endTag('button') ?>
+            <?= Html::endTag('li') ?>
+            <?= Html::beginTag('li') ?>
+                <?= Html::beginTag(
+                    'button',
+                    [
+                        'aria-pressed' => 'false',
+                        'class' => 'dropdown-item d-flex align-items-center',
+                        'data-bs-theme-value' => 'dark',
+                    ],
+                ) ?>
+                    <?= Icon::renderIcon('solid', 'moon', ['class' => 'me-2 fa-solid theme-icon']) ?>
+                    Dark
+                    <?= Icon::renderIcon(
+                        'solid',
+                        'check',
+                        ['class' => 'check ms-auto d-none', 'width' => '1em', 'height' => '1em'],
+                    ) ?>
+                <?= Html::endTag('button') ?>
+            <?= Html::endTag('li') ?>
+            <?= Html::beginTag('li') ?>
+                <?= Html::beginTag(
+                    'button',
+                    [
+                        'aria-pressed' => 'false',
+                        'class' => 'dropdown-item d-flex align-items-center',
+                        'data-bs-theme-value' => 'auto',
+                    ],
+                ) ?>
+                    <?= Icon::renderIcon('solid', 'circle-half-stroke', ['class' => 'me-2 fa-solid theme-icon']) ?>
+                    Auto
+                    <?= Icon::renderIcon(
+                        'solid',
+                        'check',
+                        ['class' => 'check ms-auto d-none', 'width' => '1em', 'height' => '1em'],
+                    ) ?>
+                <?= Html::endTag('button') ?>
+            <?= Html::endTag('li') ?>
+        <?= Html::endTag('ul') ?>
+    <?= Html::endTag('div') ?>
+<?= Html::endTag('li');
diff --git a/src/Framework/resource/layout/footer.php b/src/Framework/resource/layout/footer.php
@@ -4,7 +4,11 @@
 
 use sjaakp\icon\Icon;
 use yii\bootstrap5\Html;
+use yii\web\View;
 
+/**
+ * @var View $this
+ */
 ?>
 <?= Html::beginTag('div', ['class' => 'container']) ?>
     <?= Html::beginTag('footer', ['class' => 'd-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top']) ?>
@@ -63,44 +67,7 @@
                 ),
                 ['class' => 'ms-3'],
             ) ?>
-            <li class="ms-1">
-                <!-- Inicio Toggle modo dark -->
-                <div class="dropdown bd-mode-toggle">
-                <button class="btn btn-bd-primary dropdown-toggle d-flex align-items-center"
-                        id="bd-theme"
-                        type="button"
-                        aria-expanded="false"
-                        data-bs-toggle="dropdown"
-                        aria-label="Toggle theme (auto)">
-                    <?= Icon::renderIcon('solid', 'circle-half-stroke', ['class' => 'me-2 fa-solid fa-xl theme-icon-active']) ?>
-                    <span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
-                </button>
-                <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="bd-theme-text">
-                    <li>
-                    <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
-                        <?= Icon::renderIcon('solid', 'sun', ['class' => 'me-2 fa-solid theme-icon']) ?>
-                        Light
-                        <svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
-                    </button>
-                    </li>
-                    <li>
-                    <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
-                        <?= Icon::renderIcon('solid', 'moon', ['class' => 'me-2 fa-solid theme-icon']) ?>
-                        Dark
-                        <svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
-                    </button>
-                    </li>
-                    <li>
-                    <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
-                        <?= Icon::renderIcon('solid', 'circle-half-stroke', ['class' => 'me-2 fa-solid theme-icon']) ?>
-                        Auto
-                        <svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
-                    </button>
-                    </li>
-                </ul>
-                </div>
-                <!-- Fin Toggle modo dark -->
-            </li>
+            <?= $this->render('component/toggle_dark') ?>
         <?= Html::endTag('ul') ?>
     <?= Html::endTag('footer') ?>
 <?= Html::endTag('div') ?>
diff --git a/src/Framework/resource/layout/main.php b/src/Framework/resource/layout/main.php
@@ -22,11 +22,6 @@
         <?= $this->render('head') ?>
         <?= Html::beginTag('body') ?>
             <?php $this->beginBody() ?>
-                <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
-                <symbol id="check2" viewBox="0 0 16 16">
-                    <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
-                </symbol>
-                </svg>
                 <?= Html::beginTag('wrapper', ['class' => 'd-flex flex-column']) ?>
                     <?= $this->render('component/menu') ?>
                     <?= Html::beginTag(