styling changes, styling doc, dev plan v2 (broken slider)
This commit is contained in:
parent
5e1ee38b9f
commit
0b1e792d15
|
|
@ -0,0 +1,131 @@
|
|||
### **Wizdom Networks Website - Development Plan & Estimated Timelines**
|
||||
**Version:** 1.0
|
||||
**Date:** February 3, 2025
|
||||
|
||||
---
|
||||
|
||||
## **1️⃣ Project Overview**
|
||||
The Wizdom Networks website is undergoing structured development to ensure:
|
||||
✅ **MVC Architecture Compliance** – Modular and scalable design.
|
||||
✅ **Efficient UI/UX Implementation** – Fully responsive, accessible, and easy to navigate.
|
||||
✅ **Structured Versioning & Tracking** – Clear change management and updates.
|
||||
✅ **Security & Performance Optimization** – Secure database interactions, error handling, and logging.
|
||||
|
||||
---
|
||||
|
||||
## **2️⃣ Development Phases & Timelines**
|
||||
Below is the detailed development roadmap aligned with best practices:
|
||||
|
||||
### **🔹 Phase 1: Core Architecture & Setup (1-2 Weeks)**
|
||||
✅ **Set Up File Structure & Core MVC Components** (Completed)
|
||||
✅ **Implement Base Controllers & Routing System** (Completed)
|
||||
✅ **Configure `head.php`, `main.php`, and `footer.php` for dynamic loading** (Completed)
|
||||
✅ **Implement `View::render()` for all partials & templates** (Completed)
|
||||
✅ **Ensure global styles are correctly applied** (Completed)
|
||||
|
||||
⏳ **Estimated Completion:** Already Completed
|
||||
|
||||
---
|
||||
|
||||
### **🔹 Phase 2: UI/UX & Frontend Enhancements (2-4 Weeks)**
|
||||
**📌 Tasks:**
|
||||
1️⃣ **Refactor Slider System for Modular Use** (Completed)
|
||||
2️⃣ **Ensure Global & Page-Specific Stylesheets Are Dynamically Loaded** (Completed)
|
||||
3️⃣ **Enhance Accessibility (ARIA, Keyboard Navigation, Semantic HTML)** (🔄 In Progress)
|
||||
4️⃣ **Finalize Slider Enhancements:**
|
||||
- Implement **Grayscale Effect** (Completed)
|
||||
- Fix **Indicator Colors Dynamically** (Completed)
|
||||
- Add **ARIA & Accessibility Enhancements** (🔄 In Progress)
|
||||
- Make **`object-fit` configurable for images** (Completed)
|
||||
- Ensure **error logging for missing configurations** (Completed)
|
||||
5️⃣ **Optimize Bootstrap Components for Mobile & Desktop Consistency** (🔄 In Progress)
|
||||
|
||||
⏳ **Estimated Completion:** 2 Weeks Remaining
|
||||
|
||||
---
|
||||
|
||||
### **🔹 Phase 3: Page Development & Integration (3-5 Weeks)**
|
||||
**📌 Tasks:**
|
||||
1️⃣ **Homepage Finalization**
|
||||
- Implement **optimized hero section & sliders** (🔄 In Progress)
|
||||
- Load page-specific styles dynamically (Completed)
|
||||
|
||||
2️⃣ **Services Pages**
|
||||
- Implement **modular content structure** for IT services.
|
||||
- Ensure **database-driven content for easier updates** (Future Enhancement).
|
||||
|
||||
3️⃣ **Contact Page**
|
||||
- Implement **secure contact form with PHPMailer**.
|
||||
- Validate inputs & ensure security against spam attacks.
|
||||
- Ensure **error handling & logging for contact form submissions**.
|
||||
|
||||
4️⃣ **Navigation System Enhancements**
|
||||
- Implement **breadcrumb navigation for enhanced UX**.
|
||||
- Ensure **dropdowns & mobile navigation function properly**.
|
||||
|
||||
⏳ **Estimated Completion:** 3-5 Weeks
|
||||
|
||||
---
|
||||
|
||||
### **🔹 Phase 4: Security, Performance & Testing (2-3 Weeks)**
|
||||
**📌 Tasks:**
|
||||
1️⃣ **Security Enhancements**
|
||||
- Sanitize & validate all user input.
|
||||
- Implement CSRF protection on all forms.
|
||||
- Ensure prepared statements in all database queries.
|
||||
|
||||
2️⃣ **Performance Optimization**
|
||||
- Minimize & optimize stylesheets and scripts.
|
||||
- Implement **lazy loading for images & assets**.
|
||||
- Enable **Gzip compression & caching rules**.
|
||||
|
||||
3️⃣ **Testing & Debugging**
|
||||
- Functional Testing ✅
|
||||
- Unit Testing for Controllers ✅
|
||||
- UI Testing Across Devices ✅
|
||||
- Accessibility Testing ✅
|
||||
- Final Bug Fixes & Adjustments ✅
|
||||
|
||||
⏳ **Estimated Completion:** 2-3 Weeks
|
||||
|
||||
---
|
||||
|
||||
## **3️⃣ Final Deployment & Launch (1 Week)**
|
||||
**📌 Tasks:**
|
||||
✅ **Deploy to Production Server**
|
||||
✅ **Ensure SSL & Security Headers Are Applied**
|
||||
✅ **Final Performance & Speed Tests**
|
||||
✅ **Pre-Launch Checklist Review**
|
||||
✅ **Client Review & Sign-Off**
|
||||
|
||||
⏳ **Estimated Completion:** 1 Week
|
||||
|
||||
---
|
||||
|
||||
## **4️⃣ Estimated Total Timeline**
|
||||
| **Phase** | **Estimated Duration** |
|
||||
|---------------------------|-----------------------|
|
||||
| **Phase 1: Core Setup** | ✅ Completed |
|
||||
| **Phase 2: UI/UX Enhancements** | **2 Weeks Remaining** |
|
||||
| **Phase 3: Page Development** | **3-5 Weeks** |
|
||||
| **Phase 4: Security & Testing** | **2-3 Weeks** |
|
||||
| **Phase 5: Deployment & Launch** | **1 Week** |
|
||||
|
||||
**🎯 Total Estimated Time Remaining:** **6-9 Weeks**
|
||||
|
||||
---
|
||||
|
||||
## **5️⃣ Next Steps**
|
||||
🔹 **Immediate Focus:**
|
||||
✅ Finalize remaining **Slider Enhancements**
|
||||
✅ Implement **Home Page UI Fixes**
|
||||
✅ Ensure **Accessibility Best Practices Are Met**
|
||||
|
||||
🔹 **Upcoming Tasks:**
|
||||
✅ Start **Final Page Integration** (Contact, Services)
|
||||
✅ Begin **Security & Performance Testing**
|
||||
|
||||
---
|
||||
|
||||
### **Final Thoughts**
|
||||
This development plan ensures **structured progress**, avoids bottlenecks, and aligns with best practices. Let me know if you’d like any refinements! 🚀
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
### **Recommended Approach for Managing Styling Structure & Expansions**
|
||||
To **streamline and efficiently manage CSS styling** across the Wizdom Networks website **without administrative overhead**, we need a **structured, scalable, and maintainable** approach. Below is the recommended **framework and workflow**.
|
||||
|
||||
---
|
||||
|
||||
## **1️⃣ Styling Structure Overview**
|
||||
We will use a **layered CSS structure**, ensuring separation between **global styles, components, and page-specific styles**.
|
||||
|
||||
### **🔹 Core Structure**
|
||||
```
|
||||
/assets/css/
|
||||
├── main.css # Global styles (typography, colors, layouts)
|
||||
├── utilities.css # Reusable utility classes (spacing, flex, visibility)
|
||||
├── components/
|
||||
│ ├── hero.css # Hero section styles
|
||||
│ ├── slider.css # Slider-specific styles
|
||||
│ ├── sidebar.css # Sidebar-specific styles
|
||||
│ ├── navbar.css # Navigation styles
|
||||
│ ├── footer.css # Footer styles
|
||||
│ ├── forms.css # Forms & inputs
|
||||
│ ├── buttons.css # Buttons & CTA styles
|
||||
│ ├── modal.css # Modal windows
|
||||
│ ├── tables.css # Table styles
|
||||
│ ├── cards.css # Card-based UI styles
|
||||
│ ├── animations.css # Custom animations & transitions
|
||||
│ ├── overlays.css # Image & text overlays
|
||||
│ ├── accessibility.css # WCAG accessibility fixes & enhancements
|
||||
│ ├── dark-mode.css # Dark mode support (if applicable)
|
||||
│ ├── page-specific/
|
||||
│ │ ├── about.css # About page styles
|
||||
│ │ ├── services.css # Services page styles
|
||||
│ │ ├── contact.css # Contact page styles
|
||||
│ │ ├── terms.css # Terms of service page styles
|
||||
│ │ ├── privacy.css # Privacy policy styles
|
||||
```
|
||||
✅ **Benefit:** Keeps **global styles separate from component and page-specific styles**, ensuring **scalability**.
|
||||
|
||||
---
|
||||
|
||||
## **2️⃣ Automatic & Dynamic CSS Loading**
|
||||
To ensure **minimal manual configuration**, **we dynamically load required stylesheets**.
|
||||
|
||||
### **🔹 Update `head.php` to Dynamically Load CSS**
|
||||
Modify `head.php` so that **global, component, and page-specific styles load automatically**.
|
||||
|
||||
```php
|
||||
<?php
|
||||
// Load Global Styles
|
||||
echo '<link rel="stylesheet" href="/assets/css/main.css">';
|
||||
echo '<link rel="stylesheet" href="/assets/css/utilities.css">';
|
||||
|
||||
// Load Component Styles Automatically
|
||||
$components = ['hero', 'slider', 'sidebar', 'navbar', 'footer', 'forms', 'buttons', 'modal', 'tables', 'cards', 'animations', 'overlays', 'accessibility'];
|
||||
foreach ($components as $component) {
|
||||
echo '<link rel="stylesheet" href="/assets/css/components/' . $component . '.css">';
|
||||
}
|
||||
|
||||
// Load Page-Specific Styles (if applicable)
|
||||
if (isset($pageId)) {
|
||||
echo '<link rel="stylesheet" href="/assets/css/components/page-specific/' . htmlspecialchars($pageId, ENT_QUOTES, 'UTF-8') . '.css">';
|
||||
}
|
||||
?>
|
||||
```
|
||||
✅ **Benefit:**
|
||||
- **No need to manually add stylesheets per page**—it dynamically loads required styles.
|
||||
- **Automatically extends** when new pages or components are added.
|
||||
|
||||
---
|
||||
|
||||
## **3️⃣ Defining Utility Classes (`utilities.css`)**
|
||||
To **avoid redundant styles** and **enhance reusability**, we should define **core utility classes**.
|
||||
|
||||
### **🔹 Example `utilities.css`**
|
||||
```css
|
||||
/* Spacing Utilities */
|
||||
.m-0 { margin: 0 !important; }
|
||||
.m-5 { margin: 5px !important; }
|
||||
.p-0 { padding: 0 !important; }
|
||||
.p-5 { padding: 5px !important; }
|
||||
|
||||
/* Display Utilities */
|
||||
.d-none { display: none !important; }
|
||||
.d-block { display: block !important; }
|
||||
.d-flex { display: flex !important; }
|
||||
|
||||
/* Flexbox */
|
||||
.flex-column { flex-direction: column !important; }
|
||||
.flex-row { flex-direction: row !important; }
|
||||
.justify-center { justify-content: center !important; }
|
||||
.align-center { align-items: center !important; }
|
||||
|
||||
/* Visibility */
|
||||
.hidden { visibility: hidden !important; }
|
||||
.visible { visibility: visible !important; }
|
||||
|
||||
/* Responsive Utilities */
|
||||
@media (max-width: 768px) {
|
||||
.hide-sm { display: none !important; }
|
||||
.text-center-sm { text-align: center !important; }
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.hide-lg { display: none !important; }
|
||||
}
|
||||
```
|
||||
✅ **Benefit:**
|
||||
- **Eliminates repetition** in individual stylesheets.
|
||||
- **Ensures consistency** across pages.
|
||||
|
||||
---
|
||||
|
||||
## **4️⃣ Guidelines for Expanding Styling**
|
||||
To ensure **new features or styles** are seamlessly integrated, follow these **best practices**:
|
||||
|
||||
### **🔹 When Adding a New Feature**
|
||||
1️⃣ **Check if existing global styles cover it (main.css, utilities.css).**
|
||||
2️⃣ **If it's a UI component, place it in `components/`.**
|
||||
3️⃣ **If it's page-specific, place it in `page-specific/`.**
|
||||
4️⃣ **Ensure `head.php` dynamically loads the new file.**
|
||||
|
||||
✅ **Example:**
|
||||
- If we add a **new pricing table component**, it goes into **`components/tables.css`** instead of `main.css`.
|
||||
- If we add **unique animations for one page**, it goes into **`page-specific/custom-page.css`**.
|
||||
|
||||
---
|
||||
|
||||
## **5️⃣ Versioning & Documentation**
|
||||
To **track changes effectively**:
|
||||
- **All stylesheets include a version comment** at the top.
|
||||
- **Major updates** should be logged in a **CHANGELOG.md** file.
|
||||
|
||||
✅ **Example: `main.css` Header Comment**
|
||||
```css
|
||||
/* Main Styles (v2) - Last Updated: 2025-02-03 */
|
||||
```
|
||||
|
||||
✅ **Example: `CHANGELOG.md`**
|
||||
```
|
||||
## v2.0 (2025-02-03)
|
||||
- Moved page-specific styles to `components/page-specific/`
|
||||
- Improved layout spacing in `main.css`
|
||||
- Optimized `head.php` to dynamically load required stylesheets
|
||||
```
|
||||
---
|
||||
|
||||
## **📌 Summary of the Approach**
|
||||
| **Action** | **Implementation** | **Benefit** |
|
||||
|-----------------------------|----------------------------------------------------|------------------------------------------|
|
||||
| **Global styles** | `main.css`, `utilities.css` | Standardizes typography, buttons, layout |
|
||||
| **Component styles** | `components/` directory | Keeps reusable UI elements modular |
|
||||
| **Page-specific styles** | `page-specific/` directory | Avoids cluttering global styles |
|
||||
| **Automatic CSS loading** | `head.php` dynamically includes required files | Reduces manual work, ensures scalability |
|
||||
| **Utility classes** | `utilities.css` | Prevents redundant styling |
|
||||
| **Change tracking** | Versioned styles + `CHANGELOG.md` | Ensures traceability of updates |
|
||||
|
||||
---
|
||||
|
||||
## **6️⃣ Next Steps**
|
||||
Would you like me to:
|
||||
1️⃣ **Apply this refactored structure now**, or
|
||||
2️⃣ **Implement it incrementally over time** to avoid disruptions? 🚀
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
1. **Logging an error** if the slider configuration is missing.
|
||||
2. **Ensuring images have the correct aspect ratio** to prevent distortion.
|
||||
3. **Adding `aria-current="true"`** to the active button for better accessibility.
|
||||
4. **Validating `type` values** to ensure they match expected inputs.
|
||||
5. **Making `object-fit` configurable** for different image display styles.
|
||||
|
||||
|
|
@ -27,6 +27,8 @@ class View
|
|||
extract($data);
|
||||
|
||||
// Build the full path to the view file
|
||||
Logger::debug("[DEBUG] Attempting to load view: " . $view . " | Expected path: " . __DIR__ . "/../../resources/views/" . str_replace('.', '/', $view) . ".php");
|
||||
|
||||
$viewPath = realpath(__DIR__ . "/../../resources/views/" . str_replace('.', '/', $view) . ".php");
|
||||
|
||||
// Debugging: Log resolved path
|
||||
|
|
|
|||
|
|
@ -34,10 +34,10 @@ class Database
|
|||
*/
|
||||
private function connect(): void
|
||||
{
|
||||
$dsn = sprintf('mysql:host=%s;dbname=%s;charset=utf8mb4', getenv('DB_HOST'), getenv('DB_NAME'));
|
||||
$dsn = sprintf('mysql:host=%s;dbname=%s;charset=utf8mb4', $_ENV['DB_HOST'], $_ENV['DB_NAME']);
|
||||
|
||||
try {
|
||||
$this->connection = new PDO($dsn, getenv('DB_USER'), getenv('DB_PASSWORD'));
|
||||
$this->connection = new PDO($dsn, $_ENV['DB_USER'], $_ENV['DB_PASSWORD']);
|
||||
$this->connection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
|
||||
Logger::info('Database connection established successfully.');
|
||||
} catch (PDOException $e) {
|
||||
|
|
|
|||
|
|
@ -28,8 +28,10 @@ class Logger
|
|||
*/
|
||||
public static function init(): void
|
||||
{
|
||||
self::$logFile = getenv('LOG_FILE_PATH') ?: __DIR__ . '/../../logs/app.log';
|
||||
self::$debugEnabled = getenv('APP_DEBUG') === 'true';
|
||||
|
||||
self::$logFile = $_ENV['LOG_DIRECTORY'] . "app.log" ?: __DIR__ . '/../../logs/app.log';
|
||||
self::$debugEnabled = $_ENV['APP_DEBUG'] === 'true' || $_ENV['APP_DEBUG'] === true;
|
||||
//self::$debugEnabled = false;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -51,13 +51,13 @@ class Mailer
|
|||
{
|
||||
try {
|
||||
$this->mailer->isSMTP();
|
||||
$this->mailer->Host = getenv('MAIL_HOST');
|
||||
$this->mailer->Host = $_ENV['MAIL_HOST'];
|
||||
$this->mailer->SMTPAuth = true;
|
||||
$this->mailer->Username = getenv('MAIL_USER');
|
||||
$this->mailer->Password = getenv('MAIL_PASSWORD');
|
||||
$this->mailer->Username = $_ENV['MAIL_USER'];
|
||||
$this->mailer->Password = $_ENV['MAIL_PASSWORD'];
|
||||
$this->mailer->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS;
|
||||
$this->mailer->Port = (int) getenv('MAIL_PORT');
|
||||
$this->mailer->setFrom(getenv('MAIL_FROM_EMAIL'), getenv('MAIL_FROM_NAME'));
|
||||
$this->mailer->Port = (int) $_ENV['MAIL_PORT'];
|
||||
$this->mailer->setFrom($_ENV['MAIL_FROM_EMAIL'], $_ENV['MAIL_FROM_NAME']);
|
||||
Logger::info('Mailer configured successfully.');
|
||||
} catch (Exception $e) {
|
||||
Logger::error('Mailer configuration failed: ' . $e->getMessage());
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
"version": "0.1.0",
|
||||
"require": {
|
||||
"phpmailer/phpmailer": "^6.8",
|
||||
"vlucas/phpdotenv": "^5.5"
|
||||
"vlucas/phpdotenv": "^5.6"
|
||||
},
|
||||
"require-dev": {
|
||||
"squizlabs/php_codesniffer": "^3.7",
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
|
||||
"This file is @generated automatically"
|
||||
],
|
||||
"content-hash": "79fa005fe909772a56b3b673e1ec51ec",
|
||||
"content-hash": "7a4cc66591ea1ee1a158784f7e4537b5",
|
||||
"packages": [
|
||||
{
|
||||
"name": "graham-campbell/result-type",
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,5 +1,5 @@
|
|||
/* Bootstrap Optimization for Mobile & Desktop Consistency */
|
||||
|
||||
/* Main Styling: main.css */
|
||||
/* Ensure proper grid scaling */
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
|
|
|
|||
|
|
@ -1,23 +1,53 @@
|
|||
/* Slider Styles */
|
||||
.slider, .carousel-inner, .carousel-item {
|
||||
width: 100%;
|
||||
height: 65vh;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
/* Auto-generated slider styles */
|
||||
|
||||
/* Ensure full width slider, even inside a container */
|
||||
.container .slider {
|
||||
width: 100vw !important;
|
||||
max-width: none;
|
||||
margin-left: calc(-50vw + 50%);
|
||||
}
|
||||
|
||||
/* Ensure only active slide images are affected by hover */
|
||||
.slider-image {
|
||||
width: 100%;
|
||||
height: 65vh;
|
||||
object-fit: cover;
|
||||
filter: grayscale(100%);
|
||||
transition: filter 0.5s ease-in-out;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.slider-image:hover {
|
||||
|
||||
.carousel-item.active:hover .slider-image,
|
||||
.carousel-item:hover .slider-image,
|
||||
.slider:hover .carousel-item.active .slider-image {
|
||||
filter: grayscale(0%);
|
||||
}
|
||||
.carousel-indicators {
|
||||
bottom: 10px;
|
||||
|
||||
/* If the issue persists, force re-render */
|
||||
.slider:hover {
|
||||
will-change: filter;
|
||||
}
|
||||
|
||||
/* Optimize Prev/Next button placement and fix potential container padding issues */
|
||||
.carousel-control-prev, .carousel-control-next {
|
||||
display: flex !important;
|
||||
width: 8%;
|
||||
max-width: 60px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 30; /* Ensure higher stacking order */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
pointer-events: auto; /* Ensure buttons are clickable */
|
||||
margin: 0 -10px; /* Fix potential container padding issue */
|
||||
}
|
||||
|
||||
/* Ensure no hidden parent containers block the arrows */
|
||||
.slider {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
/* Restore individual indicator colors */
|
||||
.carousel-indicators button {
|
||||
width: 30px;
|
||||
height: 10px;
|
||||
|
|
@ -26,12 +56,14 @@
|
|||
margin: 3px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.carousel-indicators .active {
|
||||
opacity: 1;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
.indicator-color-1.active { background-color: #ffcc00; }
|
||||
.indicator-color-2.active { background-color: #ffff66; }
|
||||
.indicator-color-3.active { background-color: #0099FF; }
|
||||
.indicator-color-4.active { background-color: #A3A300; }
|
||||
.indicator-color-5.active { background-color: #990000; }
|
||||
.indicator-color-6.active { background-color: #29527A; }
|
||||
|
||||
.indicator-color-1.active { background-color: #ffcc00 !important; }
|
||||
.indicator-color-2.active { background-color: #ffff66 !important; }
|
||||
.indicator-color-3.active { background-color: #0099FF !important; }
|
||||
.indicator-color-4.active { background-color: #A3A300 !important; }
|
||||
.indicator-color-5.active { background-color: #990000 !important; }
|
||||
.indicator-color-6.active { background-color: #29527A !important; }
|
||||
|
|
|
|||
|
|
@ -17,6 +17,10 @@ require_once __DIR__ . '/../vendor/autoload.php';
|
|||
use WizdomNetworks\WizeWeb\Core\Router;
|
||||
use WizdomNetworks\WizeWeb\Utils\ErrorHandler;
|
||||
use WizdomNetworks\WizeWeb\Utils\Logger;
|
||||
use Dotenv\Dotenv;
|
||||
|
||||
$dotenv = Dotenv::createImmutable(__DIR__ . '/../');
|
||||
$dotenv->load();
|
||||
|
||||
// Register error handler
|
||||
ErrorHandler::register();
|
||||
|
|
|
|||
|
|
@ -1,10 +1,18 @@
|
|||
<?php
|
||||
|
||||
/**
|
||||
* Head Partial (v4)
|
||||
* Head Partial (v6)
|
||||
*
|
||||
* This file includes metadata, stylesheets, and scripts necessary for rendering the site.
|
||||
* Implements improved error handling to prevent undefined variable issues and corrects file path references.
|
||||
*/
|
||||
|
||||
// Ensure all optional configurations have default values
|
||||
$heroConfig = $heroConfig ?? ['enabled' => false];
|
||||
$sliderConfig = $sliderConfig ?? ['enabled' => false];
|
||||
$sidebarConfig = $sidebarConfig ?? ['enabled' => false];
|
||||
$pageId = $pageId ?? null;
|
||||
|
||||
?>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
|
@ -15,32 +23,26 @@
|
|||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
||||
onerror="this.onerror=null;this.href='/assets/bootstrap/css/bootstrap.min.css';">
|
||||
|
||||
<!-- Main Stylesheet -->
|
||||
<!-- Main Stylesheets -->
|
||||
<link rel="stylesheet" href="/assets/css/main.css">
|
||||
<link rel="stylesheet" href="/assets/css/utilities.css">
|
||||
|
||||
<!-- Conditionally Load Hero Stylesheet -->
|
||||
<?php if (isset($heroConfig)) : ?>
|
||||
<!-- Conditionally Load Component Stylesheets -->
|
||||
<?php if (!empty($heroConfig) && isset($heroConfig['enabled']) && $heroConfig['enabled']) : ?>
|
||||
<link rel="stylesheet" href="/assets/css/hero.css">
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Conditionally Load Slider Stylesheet -->
|
||||
<?php if (isset($sliderConfig)) : ?>
|
||||
<?php if (!empty($sliderConfig) && isset($sliderConfig['enabled']) && $sliderConfig['enabled']) : ?>
|
||||
<link rel="stylesheet" href="/assets/css/slider.css">
|
||||
|
||||
<?php if (!empty($sliderConfig['id'])) : ?>
|
||||
<!-- Load Page-Specific Slider Styles -->
|
||||
<link rel="stylesheet" href="/assets/css/slider-<?php echo htmlspecialchars($sliderConfig['id'], ENT_QUOTES, 'UTF-8'); ?>.css">
|
||||
<?php endif; ?>
|
||||
<?php endif; ?>
|
||||
<?php if (!empty($sidebarConfig) && isset($sidebarConfig['enabled']) && $sidebarConfig['enabled']) : ?>
|
||||
<link rel="stylesheet" href="/assets/css/sidebar.css">
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Conditionally Load Sidebar Stylesheet -->
|
||||
<?php if (isset($sidebarConfig)) : ?>
|
||||
<link rel="stylesheet" href="/assets/css/sidebar.css">
|
||||
|
||||
<?php if (!empty($sidebarConfig['id'])) : ?>
|
||||
<!-- Load Page-Specific Sidebar Styles -->
|
||||
<link rel="stylesheet" href="/assets/css/sidebar-<?php echo htmlspecialchars($sidebarConfig['id'], ENT_QUOTES, 'UTF-8'); ?>.css">
|
||||
<?php endif; ?>
|
||||
<!-- Load Page-Specific Styles if Defined and File Exists -->
|
||||
<?php
|
||||
$pageCssFile = "/assets/css/" . htmlspecialchars($pageId, ENT_QUOTES, 'UTF-8') . ".css";
|
||||
if (!empty($pageId) && file_exists($_SERVER['DOCUMENT_ROOT'] . $pageCssFile)) : ?>
|
||||
<link rel="stylesheet" href="<?php echo $pageCssFile; ?>">
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Favicon -->
|
||||
|
|
|
|||
|
|
@ -2,49 +2,77 @@
|
|||
|
||||
use WizdomNetworks\WizeWeb\Core\View;
|
||||
|
||||
|
||||
/**
|
||||
* Main Layout (v2)
|
||||
* Main Layout (v7)
|
||||
*
|
||||
* This file serves as the primary layout template for rendering pages.
|
||||
* It includes dynamic loading for sidebar, hero, and slider components.
|
||||
* Implements improved error handling to prevent undefined variable issues.
|
||||
*
|
||||
* ## Features:
|
||||
* - Dynamically loads the `head.php` partial with key page configurations.
|
||||
* - Includes global navigation, footer, and main content structure.
|
||||
* - Conditionally renders the hero, slider, and sidebar based on their configurations.
|
||||
* - Uses Bootstrap's grid system to adjust layout dynamically.
|
||||
* - Implements robust error handling to prevent undefined variable issues.
|
||||
*
|
||||
* ## Variables Passed:
|
||||
* - `$title` (string) - The title of the page.
|
||||
* - `$heroConfig` (array) - Configuration settings for the hero section.
|
||||
* - `$sliderConfig` (array) - Configuration settings for the slider.
|
||||
* - `$sidebarConfig` (array) - Configuration settings for the sidebar.
|
||||
* - `$pageId` (string) - Unique identifier for the page, used for loading page-specific styles.
|
||||
*/
|
||||
|
||||
// Ensure all optional configurations have default values to prevent errors
|
||||
$title = $title ?? 'Wizdom Networks';
|
||||
$pageId = $pageId ?? null;
|
||||
$heroConfig = isset($heroConfig) && is_array($heroConfig) ? $heroConfig : ['enabled' => false];
|
||||
$sliderConfig = isset($sliderConfig) && is_array($sliderConfig) ? $sliderConfig : ['enabled' => false];
|
||||
$sidebarConfig = isset($sidebarConfig) && is_array($sidebarConfig) ? $sidebarConfig : ['enabled' => false];
|
||||
?>
|
||||
|
||||
?><!DOCTYPE html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<?php View::render('layouts/head', $data); ?>
|
||||
<?php View::render('layouts/head', compact('title', 'heroConfig', 'sliderConfig', 'sidebarConfig', 'pageId')); ?>
|
||||
</head>
|
||||
<body>
|
||||
<?php View::render('partials/navbar', $data); ?>
|
||||
|
||||
<!-- Global Navigation Bar -->
|
||||
<?php View::render('partials/navbar'); ?>
|
||||
|
||||
<?php if (isset($heroConfig)) : ?>
|
||||
<!-- Render Hero Section if Defined -->
|
||||
<?php View::render('partials/hero', compact('heroConfig')); ?>
|
||||
<?php endif; ?>
|
||||
<main class="container">
|
||||
|
||||
<!-- Hero Section (Optional) -->
|
||||
<?php if (isset($heroConfig['enabled']) && $heroConfig['enabled']) : ?>
|
||||
<?php View::render('partials/hero', compact('heroConfig')); ?>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (isset($sliderConfig)) : ?>
|
||||
<!-- Render Slider if Defined -->
|
||||
<?php View::render('partials/slider', compact('sliderConfig')); ?>
|
||||
<?php endif; ?>
|
||||
<!-- Slider Section (Optional) -->
|
||||
<?php if (isset($sliderConfig['enabled']) && $sliderConfig['enabled']) : ?>
|
||||
<?php View::render('partials/slider', compact('sliderConfig')); ?>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<!-- Sidebar -->
|
||||
<?php if (isset($sidebarConfig) && $sidebarConfig['enabled']) : ?>
|
||||
<div class="col-md-3">
|
||||
<?php WizdomNetworks\WizeWeb\Core\View::render('partials/sidebar', compact('sidebarConfig')); ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<div class="col-md-9">
|
||||
<!-- Main Page Content -->
|
||||
<!-- Main Content Area -->
|
||||
<div class="<?php echo (isset($sidebarConfig['enabled']) && $sidebarConfig['enabled']) ? 'col-md-9' : 'col-12'; ?>">
|
||||
<?php echo $content ?? ''; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php View::render('layouts/footer', $data); ?>
|
||||
<!-- Sidebar (Optional) -->
|
||||
<?php if (isset($sidebarConfig['enabled']) && $sidebarConfig['enabled']) : ?>
|
||||
<div class="col-md-3">
|
||||
<?php View::render('partials/sidebar', compact('sidebarConfig')); ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Global Footer -->
|
||||
|
||||
<?php View::render('layouts/footer'); ?>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ use WizdomNetworks\WizeWeb\Core\View;
|
|||
*/
|
||||
|
||||
// Ensure data is available before rendering
|
||||
$pageId = 'about'; // Unique identifier for this page
|
||||
$title = 'About Us - Wizdom Networks';
|
||||
$content = '<div class="container">
|
||||
<div id="about-row" class="row">
|
||||
|
|
@ -54,4 +55,4 @@ $heroConfig = [
|
|||
// Page-Specific Slider Configuration
|
||||
|
||||
|
||||
View::render('layouts/main', compact('title', 'content', 'heroConfig'));
|
||||
View::render('layouts/main', compact('title', 'content', 'heroConfig', 'pageId'));
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ $content = $data['content'] ?? '';
|
|||
// Slider Configuration
|
||||
$sliderConfig = [
|
||||
'id' => 'home', // Unique identifier for home page slider styles
|
||||
'enabled' => true,
|
||||
'type' => 'standard',
|
||||
'height' => '65vh',
|
||||
'slides' => [
|
||||
|
|
|
|||
Loading…
Reference in New Issue