Collapse
This commit is contained in:
maher
@@ -26,6 +26,12 @@ final class DemoController extends AbstractController
|
||||
return $this->render('demo/empty.html.twig', []);
|
||||
}
|
||||
|
||||
#[Route('/demo/collapse', name: 'app_demo_collapse')]
|
||||
public function collapse(): Response
|
||||
{
|
||||
return $this->render('demo/collapse.html.twig', []);
|
||||
}
|
||||
|
||||
|
||||
#[Route('/demo/chart', name: 'app_demo_chart')]
|
||||
public function chart(): Response
|
||||
|
||||
@@ -82,6 +82,7 @@
|
||||
<a href="{{ path('app_demo_dropdown') }}" class="nav-link">Dropdown</a>
|
||||
<a href="{{ path('app_demo_icons') }}" class="nav-link">Icons</a>
|
||||
<a href="{{ path('app_demo_table') }}" class="nav-link">Table</a>
|
||||
<a href="{{ path('app_demo_collapse') }}" class="nav-link">Collapse</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -88,6 +88,7 @@
|
||||
<a href="{{ path('app_demo_dropdown') }}" class="nav-link">Dropdown</a>
|
||||
<a href="{{ path('app_demo_icons') }}" class="nav-link">Icons</a>
|
||||
<a href="{{ path('app_demo_table') }}" class="nav-link">Table</a>
|
||||
<a href="{{ path('app_demo_collapse') }}" class="nav-link">Collapse</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div><!-- container -->
|
||||
|
||||
394
templates/demo/collapse.html.twig
Normal file
394
templates/demo/collapse.html.twig
Normal file
@@ -0,0 +1,394 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-90680653-2"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'UA-90680653-2');
|
||||
</script>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<!-- Twitter -->
|
||||
<!-- <meta name="twitter:site" content="@bootstrapdash">
|
||||
<meta name="twitter:creator" content="@bootstrapdash">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="Azia">
|
||||
<meta name="twitter:description" content="Responsive Bootstrap 4 Dashboard Template">
|
||||
<meta name="twitter:image" content="https://www.bootstrapdash.com/azia/img/azia-social.png"> -->
|
||||
<!-- Facebook -->
|
||||
<!-- <meta property="og:url" content="https://www.bootstrapdash.com/azia">
|
||||
<meta property="og:title" content="Azia">
|
||||
<meta property="og:description" content="Responsive Bootstrap 4 Dashboard Template">
|
||||
|
||||
<meta property="og:image" content="https://www.bootstrapdash.com/azia/img/azia-social.png">
|
||||
<meta property="og:image:secure_url" content="https://www.bootstrapdash.com/azia/img/azia-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="600"> -->
|
||||
<!-- Meta -->
|
||||
<meta name="description" content="Responsive Bootstrap 4 Dashboard Template">
|
||||
<meta name="author" content="BootstrapDash">
|
||||
<title>Azia Responsive Bootstrap 4 Dashboard Template</title>
|
||||
<!-- vendor css -->
|
||||
<link href="{{ asset('assets/lib/fontawesome-free/css/all.min.css') }}" rel="stylesheet">
|
||||
<link href="{{ asset('assets/lib/ionicons/css/ionicons.min.css') }}" rel="stylesheet">
|
||||
<link href="{{ asset('assets/lib/typicons.font/typicons.css') }}" rel="stylesheet">
|
||||
<link href="{{ asset('assets/lib/line-awesome/css/line-awesome.min.css') }}" rel="stylesheet">
|
||||
<!-- azia CSS -->
|
||||
<link rel="stylesheet" href="{{ asset('assets/css/azia.css') }}">
|
||||
</head>
|
||||
<body>
|
||||
<div class="az-header">
|
||||
<div class="container">
|
||||
<div class="az-header-left">
|
||||
<a href="{{ path('app_demo_index') }}" class="az-logo"><span></span> azia</a>
|
||||
<a href="" id="azMenuShow" class="az-header-menu-icon d-lg-none"><span></span></a>
|
||||
</div>
|
||||
<!-- az-header-left -->
|
||||
<div class="az-header-menu">
|
||||
<div class="az-header-menu-header">
|
||||
<a href="{{ path('app_demo_index') }}" class="az-logo"><span></span> azia</a>
|
||||
<a href="" class="close">×</a>
|
||||
</div>
|
||||
<!-- az-header-menu-header -->
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a href="{{ path('app_demo_index') }}" class="nav-link"><i class="typcn typcn-chart-area-outline"></i> Dashboard</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="" class="nav-link with-sub"><i class="typcn typcn-document"></i> Pages</a>
|
||||
<nav class="az-menu-sub">
|
||||
<a href="{{ path('app_demo_signin') }}" class="nav-link">Sign In</a>
|
||||
<a href="{{ path('app_demo_signup') }}" class="nav-link">Sign Up</a>
|
||||
</nav>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ path('app_demo_chart') }}" class="nav-link"><i class="typcn typcn-chart-bar-outline"></i> Charts</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ path('app_demo_elements') }}" class="nav-link"><i class="typcn typcn-chart-bar-outline"></i> Forms</a>
|
||||
</li>
|
||||
<li class="nav-item active">
|
||||
<a href="" class="nav-link with-sub"><i class="typcn typcn-book"></i> Components</a>
|
||||
<div class="az-menu-sub">
|
||||
<div class="container">
|
||||
<div>
|
||||
<nav class="nav">
|
||||
<a href="{{ path('app_demo_buttons') }}" class="nav-link">Buttons</a>
|
||||
<a href="{{ path('app_demo_dropdown') }}" class="nav-link">Dropdown</a>
|
||||
<a href="{{ path('app_demo_icons') }}" class="nav-link">Icons</a>
|
||||
<a href="{{ path('app_demo_table') }}" class="nav-link">Table</a>
|
||||
<a href="{{ path('app_demo_collapse') }}" class="nav-link">Collapse</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<!-- container -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- az-header-menu -->
|
||||
<div class="az-header-right">
|
||||
<a href="https://www.bootstrapdash.com/demo/azia-free/docs/documentation.html" target="_blank" class="az-header-search-link"><i class="far fa-file-alt"></i></a>
|
||||
<a href="" class="az-header-search-link"><i class="fas fa-search"></i></a>
|
||||
<div class="az-header-message">
|
||||
<a href="#"><i class="typcn typcn-messages"></i></a>
|
||||
</div>
|
||||
<!-- az-header-message -->
|
||||
<div class="dropdown az-header-notification">
|
||||
<a href="" class="new"><i class="typcn typcn-bell"></i></a>
|
||||
<div class="dropdown-menu">
|
||||
<div class="az-dropdown-header mg-b-20 d-sm-none">
|
||||
<a href="" class="az-header-arrow"><i class="icon ion-md-arrow-back"></i></a>
|
||||
</div>
|
||||
<h6 class="az-notification-title">Notifications</h6>
|
||||
<p class="az-notification-text">You have 2 unread notification</p>
|
||||
<div class="az-notification-list">
|
||||
<div class="media new">
|
||||
<div class="az-img-user"><img src="{{ asset('assets/img/faces/face2.jpg') }}" alt=""></div>
|
||||
<div class="media-body">
|
||||
<p>Congratulate <strong>Socrates Itumay</strong> for work anniversaries</p>
|
||||
<span>Mar 15 12:32pm</span>
|
||||
</div>
|
||||
<!-- media-body -->
|
||||
</div>
|
||||
<!-- media -->
|
||||
<div class="media new">
|
||||
<div class="az-img-user online"><img src="{{ asset('assets/img/faces/face3.jpg') }}" alt=""></div>
|
||||
<div class="media-body">
|
||||
<p><strong>Joyce Chua</strong> just created a new blog post</p>
|
||||
<span>Mar 13 04:16am</span>
|
||||
</div>
|
||||
<!-- media-body -->
|
||||
</div>
|
||||
<!-- media -->
|
||||
<div class="media">
|
||||
<div class="az-img-user"><img src="{{ asset('assets/img/faces/face4.jpg') }}" alt=""></div>
|
||||
<div class="media-body">
|
||||
<p><strong>Althea Cabardo</strong> just created a new blog post</p>
|
||||
<span>Mar 13 02:56am</span>
|
||||
</div>
|
||||
<!-- media-body -->
|
||||
</div>
|
||||
<!-- media -->
|
||||
<div class="media">
|
||||
<div class="az-img-user"><img src="{{ asset('assets/img/faces/face5.jpg') }}" alt=""></div>
|
||||
<div class="media-body">
|
||||
<p><strong>Adrian Monino</strong> added new comment on your photo</p>
|
||||
<span>Mar 12 10:40pm</span>
|
||||
</div>
|
||||
<!-- media-body -->
|
||||
</div>
|
||||
<!-- media -->
|
||||
</div>
|
||||
<!-- az-notification-list -->
|
||||
<div class="dropdown-footer"><a href="">View All Notifications</a></div>
|
||||
</div>
|
||||
<!-- dropdown-menu -->
|
||||
</div>
|
||||
<!-- az-header-notification -->
|
||||
<div class="dropdown az-profile-menu">
|
||||
<a href="" class="az-img-user"><img src="{{ asset('assets/img/faces/face1.jpg') }}" alt=""></a>
|
||||
<div class="dropdown-menu">
|
||||
<div class="az-dropdown-header d-sm-none">
|
||||
<a href="" class="az-header-arrow"><i class="icon ion-md-arrow-back"></i></a>
|
||||
</div>
|
||||
<div class="az-header-profile">
|
||||
<div class="az-img-user">
|
||||
<img src="{{ asset('assets/img/faces/face1.jpg') }}" alt="">
|
||||
</div>
|
||||
<!-- az-img-user -->
|
||||
<h6>Aziana Pechon</h6>
|
||||
<span>Premium Member</span>
|
||||
</div>
|
||||
<!-- az-header-profile -->
|
||||
<a href="" class="dropdown-item"><i class="typcn typcn-user-outline"></i> My Profile</a>
|
||||
<a href="" class="dropdown-item"><i class="typcn typcn-edit"></i> Edit Profile</a>
|
||||
<a href="" class="dropdown-item"><i class="typcn typcn-time"></i> Activity Logs</a>
|
||||
<a href="" class="dropdown-item"><i class="typcn typcn-cog-outline"></i> Account Settings</a>
|
||||
<a href="{{ path('app_demo_signin') }}" class="dropdown-item"><i class="typcn typcn-power-outline"></i> Sign Out</a>
|
||||
</div>
|
||||
<!-- dropdown-menu -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- az-header-right -->
|
||||
</div>
|
||||
<!-- container -->
|
||||
</div>
|
||||
<!-- az-header -->
|
||||
<div class="az-content pd-y-20 pd-lg-y-30 pd-xl-y-40">
|
||||
<div class="container">
|
||||
<div class="az-content-left az-content-left-components">
|
||||
<div class="component-item">
|
||||
<label>UI Elements</label>
|
||||
<nav class="nav flex-column">
|
||||
<a href="{{ path('app_demo_buttons') }}" class="nav-link">Buttons</a>
|
||||
<a href="{{ path('app_demo_dropdown') }}" class="nav-link">Dropdown</a>
|
||||
<a href="{{ path('app_demo_icons') }}" class="nav-link">Icons</a>
|
||||
<a href="{{ path('app_demo_collapse') }}" class="nav-link active">Collapses</a>
|
||||
</nav>
|
||||
<label>Forms</label>
|
||||
<nav class="nav flex-column">
|
||||
<a href="{{ path('app_demo_elements') }}" class="nav-link">Form Elements</a>
|
||||
</nav>
|
||||
<label>Charts</label>
|
||||
<nav class="nav flex-column">
|
||||
<a href="{{ path('app_demo_chart') }}" class="nav-link">ChartJS</a>
|
||||
</nav>
|
||||
<label>Tables</label>
|
||||
<nav class="nav flex-column">
|
||||
<a href="{{ path('app_demo_table') }}" class="nav-link">Basic Tables</a>
|
||||
</nav>
|
||||
</div>
|
||||
<!-- component-item -->
|
||||
</div>
|
||||
<!-- az-content-left -->
|
||||
<div class="az-content-body pd-lg-l-40 d-flex flex-column">
|
||||
<div class="az-content-breadcrumb">
|
||||
<span>Components</span>
|
||||
<span>UI Elements</span>
|
||||
<span>Collapses</span>
|
||||
</div>
|
||||
<h2 class="az-content-title">Collapses</h2>
|
||||
|
||||
{# ---------------------------------------- #}
|
||||
<div id="accordion">
|
||||
<!-- Card 1 - Ligne en haut -->
|
||||
<div class="card border-top border-primary">
|
||||
<div class="card-header" id="headingOne" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
||||
<div class="d-flex align-items-center">
|
||||
<div style="flex: 1;">
|
||||
<h5 class="card-title mb-1">Very nice central apartment</h5>
|
||||
<p class="card-text mb-1">1 bedroom • 113 reviews</p>
|
||||
<div class="price">$85 per night</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-down arrow"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
|
||||
<div class="collapse-content">
|
||||
<img src="https://images.unsplash.com/photo-1564013799919-ab600027ffc6?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" class="card-img-top mb-3" alt="Very nice central apartment">
|
||||
|
||||
<p>Beautiful central apartment located in the heart of Chicago. Perfect for business travelers or tourists who want to experience the city.</p>
|
||||
|
||||
<div class="details">
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Check-in:</span>
|
||||
<span class="detail-value">3:00 PM</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Check-out:</span>
|
||||
<span class="detail-value">11:00 AM</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Max guests:</span>
|
||||
<span class="detail-value">2</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Rating:</span>
|
||||
<span class="detail-value">4.8/5 (113 reviews)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="amenities">
|
||||
<span class="amenity">WiFi</span>
|
||||
<span class="amenity">Kitchen</span>
|
||||
<span class="amenity">TV</span>
|
||||
<span class="amenity">Heating</span>
|
||||
<span class="amenity">Air conditioning</span>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary mt-3">Book now</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 2 - Ligne en bas -->
|
||||
<div class="card border-bottom border-success">
|
||||
<div class="card-header" id="headingTwo" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
||||
<div class="d-flex align-items-center">
|
||||
<div style="flex: 1;">
|
||||
<h5 class="card-title mb-1">Beautiful room in Chicago</h5>
|
||||
<p class="card-text mb-1">1 bedroom • 23 reviews</p>
|
||||
<div class="price">$85 per night</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-down arrow"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
|
||||
<div class="collapse-content">
|
||||
<img src="https://images.unsplash.com/photo-1522708323590-d24dbb6b0267?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" class="card-img-top mb-3" alt="Beautiful room in Chicago">
|
||||
|
||||
<p>Cozy room with beautiful views of Chicago. Located in a quiet neighborhood but close to public transportation.</p>
|
||||
|
||||
<div class="details">
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Check-in:</span>
|
||||
<span class="detail-value">2:00 PM</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Check-out:</span>
|
||||
<span class="detail-value">12:00 PM</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Max guests:</span>
|
||||
<span class="detail-value">2</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Rating:</span>
|
||||
<span class="detail-value">4.5/5 (23 reviews)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="amenities">
|
||||
<span class="amenity">WiFi</span>
|
||||
<span class="amenity">Breakfast</span>
|
||||
<span class="amenity">Parking</span>
|
||||
<span class="amenity">TV</span>
|
||||
<span class="amenity">Heating</span>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-success mt-3">Book now</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 3 - Ligne à droite -->
|
||||
<div class="card border-right border-danger">
|
||||
<div class="card-header" id="headingThree" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
||||
<div class="d-flex align-items-center">
|
||||
<div style="flex: 1;">
|
||||
<h5 class="card-title mb-1">Modern loft in downtown</h5>
|
||||
<p class="card-text mb-1">Studio • 47 reviews</p>
|
||||
<div class="price">$95 per night</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-down arrow"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
|
||||
<div class="collapse-content">
|
||||
<img src="https://images.unsplash.com/photo-1586023492125-27b2c045efd7?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" class="card-img-top mb-3" alt="Modern loft in downtown">
|
||||
|
||||
<p>Modern and stylish loft located in downtown Chicago. Features open space design and modern amenities.</p>
|
||||
|
||||
<div class="details">
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Check-in:</span>
|
||||
<span class="detail-value">4:00 PM</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Check-out:</span>
|
||||
<span class="detail-value">10:00 AM</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Max guests:</span>
|
||||
<span class="detail-value">3</span>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="detail-label">Rating:</span>
|
||||
<span class="detail-value">4.7/5 (47 reviews)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="amenities">
|
||||
<span class="amenity">WiFi</span>
|
||||
<span class="amenity">Kitchen</span>
|
||||
<span class="amenity">Gym access</span>
|
||||
<span class="amenity">Smart TV</span>
|
||||
<span class="amenity">Air conditioning</span>
|
||||
<span class="amenity">Washer/Dryer</span>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-danger mt-3">Book now</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- az-content-body -->
|
||||
</div>
|
||||
<!-- container -->
|
||||
</div>
|
||||
<!-- az-content -->
|
||||
<script src="{{ asset('assets/lib/jquery/jquery.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/lib/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
|
||||
<script src="{{ asset('assets/lib/ionicons/ionicons.js') }}"></script>
|
||||
<script src="../js/jquery.cookie.js') }}" type="text/javascript"></script>
|
||||
<script src="{{ asset('assets/js/azia.js') }}"></script>
|
||||
<script>
|
||||
$(function(){
|
||||
'use strict'
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -82,6 +82,7 @@
|
||||
<a href="{{ path('app_demo_dropdown') }}" class="nav-link">Dropdown</a>
|
||||
<a href="{{ path('app_demo_icons') }}" class="nav-link">Icons</a>
|
||||
<a href="{{ path('app_demo_table') }}" class="nav-link">Table</a>
|
||||
<a href="{{ path('app_demo_collapse') }}" class="nav-link">Collapse</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -89,6 +89,7 @@
|
||||
<a href="{{ path('app_demo_dropdown') }}" class="nav-link">Dropdown</a>
|
||||
<a href="{{ path('app_demo_icons') }}" class="nav-link">Icons</a>
|
||||
<a href="{{ path('app_demo_table') }}" class="nav-link">Table</a>
|
||||
<a href="{{ path('app_demo_collapse') }}" class="nav-link">Collapse</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -83,6 +83,7 @@
|
||||
<a href="{{ path('app_demo_dropdown') }}" class="nav-link">Dropdown</a>
|
||||
<a href="{{ path('app_demo_icons') }}" class="nav-link">Icons</a>
|
||||
<a href="{{ path('app_demo_table') }}" class="nav-link">Table</a>
|
||||
<a href="{{ path('app_demo_collapse') }}" class="nav-link">Collapse</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -83,6 +83,7 @@
|
||||
<a href="{{ path('app_demo_dropdown') }}" class="nav-link">Dropdown</a>
|
||||
<a href="{{ path('app_demo_icons') }}" class="nav-link">Icons</a>
|
||||
<a href="{{ path('app_demo_table') }}" class="nav-link">Table</a>
|
||||
<a href="{{ path('app_demo_collapse') }}" class="nav-link">Collapse</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -82,6 +82,7 @@
|
||||
<a href="{{ path('app_demo_dropdown') }}" class="nav-link">Dropdown</a>
|
||||
<a href="{{ path('app_demo_icons') }}" class="nav-link">Icons</a>
|
||||
<a href="{{ path('app_demo_table') }}" class="nav-link">Table</a>
|
||||
<a href="{{ path('app_demo_collapse') }}" class="nav-link">Collapse</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,8 +2,6 @@
|
||||
|
||||
{% block title %}Enquête{% endblock %}
|
||||
|
||||
|
||||
|
||||
{% block content %}
|
||||
|
||||
{% set prototypeHtml %}
|
||||
@@ -11,24 +9,29 @@
|
||||
{% endset %}
|
||||
|
||||
<style>
|
||||
|
||||
.save-question {
|
||||
position: fixed; right: 80px; top: 65%; width:215px;
|
||||
position: fixed;
|
||||
right: 80px;
|
||||
top: 65%;
|
||||
width: 215px;
|
||||
}
|
||||
|
||||
.add-question {
|
||||
position: fixed; right: 80px; top: 73%;
|
||||
position: fixed;
|
||||
right: 80px;
|
||||
top: 73%;
|
||||
}
|
||||
|
||||
.investigation-ready {
|
||||
position: fixed; right: 80px; top: 81%; width:215px;
|
||||
position: fixed;
|
||||
right: 80px;
|
||||
top: 81%;
|
||||
width: 215px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- az-header -->
|
||||
<div class="az-content">
|
||||
<div class="container">
|
||||
|
||||
<div class="az-content-body d-flex flex-column">
|
||||
<div class="az-content-breadcrumb">
|
||||
<span>Enquête</span>
|
||||
@@ -39,7 +42,6 @@
|
||||
<div class="az-content-label mg-b-5"></div>
|
||||
<p class="mg-b-20">Créer une nouvelle enquête</p>
|
||||
|
||||
|
||||
{{ form_start(form) }}
|
||||
<div class="tab-vertical mb-3" id="investigation-information">
|
||||
<ul class="nav nav-tabs" id="myTab3" role="tablist">
|
||||
@@ -92,23 +94,34 @@
|
||||
<div class="question-item">
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<div class="card border-left border-primary">
|
||||
<div id="accordion">
|
||||
<div class="card border-top border-primary">
|
||||
<div class="card-header" id="heading-{{ loop.index }}" data-toggle="collapse" data-target="#collapse-{{ loop.index }}" aria-expanded="true" aria-controls="collapse-{{ loop.index }}">
|
||||
<div class="d-flex align-items-center">
|
||||
<div style="flex: 1;">
|
||||
<h5 class="card-title mb-1">Question N: {{ loop.index }}</h5>
|
||||
<p class="card-text mb-1">{{ formQuestion.title.vars.value }}</p>
|
||||
</div>
|
||||
<i class="fas fa-chevron-down arrow"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="collapse-{{ loop.index }}" class="collapse {% if app.request.attributes.get('_route') == 'app_investigation_add' %} show {% endif %}" aria-labelledby="heading-{{ loop.index }}" data-parent="#accordion">
|
||||
<div class="collapse-content">
|
||||
<div class="card-body">
|
||||
<div class="form-group row">
|
||||
<div class="col-md-3">
|
||||
<h5 class="card-title mb-5 question-number">Question N: {{ loop.index }}</h5>
|
||||
</div>
|
||||
<div class="col-md-3 offset-2">
|
||||
<button type="button" class="btn btn-outline-secondary rounded-pill mb-3">
|
||||
<i class="fa fa-eye"></i>Afficher
|
||||
<i class="fa fa-eye"></i> Afficher
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-md-2 offset-2">
|
||||
<div class="col-md-2 offset-7">
|
||||
<button type="button" class="btn btn-danger remove-question mb-3 float-right">
|
||||
<i class="fa fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="control-label col-sm-2 align-self-center mb-0" for="{{ formQuestion.title.vars.id }}">{{ form_label(formQuestion.title) }}:</label>
|
||||
<div class="col-sm-8">
|
||||
@@ -133,6 +146,7 @@
|
||||
{{ form_widget(formQuestion.name_ar, {'attr': {'class': 'form-control', 'placeholder': 'Visible pour les participants' }}) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-5">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group col-sm-10">
|
||||
@@ -147,17 +161,18 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="card-title mt-4">Modalité</h4>
|
||||
<div class="row mt-3">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group ">
|
||||
<label>{{ form_label(formQuestion.type_modality) }}</label>
|
||||
{{ form_widget(formQuestion.type_modality, {'attr': {'class': 'form-control form-control-sm mb-3"' }}) }}
|
||||
{{ form_widget(formQuestion.type_modality, {'attr': {'class': 'form-control form-control-sm mb-3' }}) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mt-4">
|
||||
<div class="form-group">
|
||||
{% for key,child in formQuestion.choice %}
|
||||
{% for key, child in formQuestion.choice %}
|
||||
<div class="custom-control-inline">
|
||||
{{ form_widget(child) }}
|
||||
</div>
|
||||
@@ -168,56 +183,37 @@
|
||||
|
||||
{% set prototype %}
|
||||
<div class="modality-item border rounded p-3 mt-3 mb-3">
|
||||
|
||||
{# EN #}
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text">EN</span>
|
||||
{{ form_widget(formQuestion.modalitys.vars.prototype.name_en, {
|
||||
attr: {
|
||||
class: 'form-control',
|
||||
placeholder: 'Nom (EN)'
|
||||
}
|
||||
attr: { class: 'form-control', placeholder: 'Nom (EN)' }
|
||||
}) }}
|
||||
</div>
|
||||
{{ form_errors(formQuestion.modalitys.vars.prototype.name_en) }}
|
||||
|
||||
{# FR #}
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text">FR</span>
|
||||
{{ form_widget(formQuestion.modalitys.vars.prototype.name_fr, {
|
||||
attr: {
|
||||
class: 'form-control',
|
||||
placeholder: 'Nom (FR)'
|
||||
}
|
||||
attr: { class: 'form-control', placeholder: 'Nom (FR)' }
|
||||
}) }}
|
||||
</div>
|
||||
{{ form_errors(formQuestion.modalitys.vars.prototype.name_fr) }}
|
||||
|
||||
{# AR #}
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text">AR</span>
|
||||
{{ form_widget(formQuestion.modalitys.vars.prototype.name_ar, {
|
||||
attr: {
|
||||
class: 'form-control',
|
||||
placeholder: 'الاسم (AR)',
|
||||
dir: 'rtl'
|
||||
}
|
||||
attr: { class: 'form-control', placeholder: 'الاسم (AR)', dir: 'rtl' }
|
||||
}) }}
|
||||
</div>
|
||||
{{ form_errors(formQuestion.modalitys.vars.prototype.name_ar) }}
|
||||
|
||||
|
||||
</div>
|
||||
{% endset %}
|
||||
|
||||
{# modalities #}
|
||||
<div class="row mt-4">
|
||||
<div class="col-md-8">
|
||||
<div id="modalities" data-prototype="{{ prototype|e('html_attr') }}">
|
||||
|
||||
<div class="modalities-container" data-prototype="{{ prototype|e('html_attr') }}">
|
||||
{% for modality in formQuestion.modalitys %}
|
||||
<div class="modality-item border rounded p-3 mb-3">
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text">EN</span>
|
||||
{{ form_widget(modality.name_en, {
|
||||
@@ -237,11 +233,7 @@
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text">AR</span>
|
||||
{{ form_widget(modality.name_ar, {
|
||||
attr: {
|
||||
class: 'form-control',
|
||||
placeholder: 'الاسم (AR)',
|
||||
dir: 'rtl'
|
||||
}
|
||||
attr: { class: 'form-control', placeholder: 'الاسم (AR)', dir: 'rtl' }
|
||||
}) }}
|
||||
</div>
|
||||
{{ form_errors(modality.name_ar) }}
|
||||
@@ -250,22 +242,17 @@
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<button type="button" id="add-modality" class="btn btn-primary">Ajouter une modalité</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn btn-primary add-modality">Ajouter une modalité</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -285,38 +272,28 @@
|
||||
Enquête Prête
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% block javascripts %}
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
|
||||
var $collection = $('#questions-collection');
|
||||
var $addButton = $('.add-question');
|
||||
|
||||
// Compter les questions existantes
|
||||
$collection.data('index', $collection.find('.question-item').length);
|
||||
|
||||
|
||||
$addButton.on('click', function() {
|
||||
var index = $collection.data('index');
|
||||
|
||||
var prototype = $collection.data('prototype');
|
||||
|
||||
var newForm = prototype.replace(/__name__/g, index);
|
||||
|
||||
var newForm = prototype.replace(/__name__/g, index + 1);
|
||||
var $newElement = $('<div class="row question-item"></div>');
|
||||
|
||||
$newElement.append(newForm);
|
||||
$collection.append($newElement);
|
||||
|
||||
// Mettre à jour l'index
|
||||
$collection.data('index', index + 1);
|
||||
|
||||
// Afficher les boutons supprimer
|
||||
$('.remove-question').show();
|
||||
|
||||
updateIndexes();
|
||||
@@ -324,18 +301,13 @@
|
||||
$("html, body").animate({
|
||||
scrollTop: $(window).scrollTop() + 700
|
||||
}, 400);
|
||||
|
||||
});
|
||||
|
||||
// Suppression des questions
|
||||
$collection.on('click', '.remove-question', function() {
|
||||
console.log($('.question-item').length);
|
||||
if ($('.question-item').length > 1) {
|
||||
$(this).closest('.question-item').remove();
|
||||
console.log($(this).closest('.question-item').remove());
|
||||
updateIndexes();
|
||||
|
||||
// Cacher le bouton supprimer s'il ne reste qu'une question
|
||||
if ($('.question-item').length === 1) {
|
||||
$('.remove-question').hide();
|
||||
}
|
||||
@@ -348,38 +320,25 @@
|
||||
});
|
||||
}
|
||||
|
||||
$(document).on('click', '.add-modality', function() {
|
||||
var $container = $(this).closest('.row').find('.modalities-container');
|
||||
var index = $container.find('.modality-item').length;
|
||||
var prototype = $container.data('prototype');
|
||||
var newForm = prototype.replace(/__name__/g, index);
|
||||
var $newElement = $('<div class="modality-item border rounded p-3 mb-3"></div>').append(newForm);
|
||||
|
||||
|
||||
//modalities add-modality
|
||||
const container = document.getElementById('modalities');
|
||||
const addButton = document.getElementById('add-modality');
|
||||
let index = container.children.length;
|
||||
|
||||
addButton.addEventListener('click', () => {
|
||||
const prototype = container.dataset.prototype;
|
||||
const html = prototype.replace(/__name__/g, index);
|
||||
index++;
|
||||
|
||||
const div = document.createElement('div');
|
||||
div.classList.add('modality-item');
|
||||
div.innerHTML = html +
|
||||
'<button type="button" class="remove-modality btn btn-danger">Supprimer</button>';
|
||||
|
||||
container.appendChild(div);
|
||||
});
|
||||
|
||||
|
||||
container.addEventListener('click', (e) => {
|
||||
if (e.target.classList.contains('remove-modality')) {
|
||||
e.target.closest('.modality-item').remove();
|
||||
if (!$newElement.find('.remove-modality').length) {
|
||||
$newElement.append('<button type="button" class="remove-modality btn btn-danger btn-sm mt-2">Supprimer</button>');
|
||||
}
|
||||
|
||||
$container.append($newElement);
|
||||
});
|
||||
|
||||
|
||||
|
||||
$(document).on('click', '.remove-modality', function() {
|
||||
$(this).closest('.modality-item').remove();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
|
||||
{% endblock %}
|
||||
|
||||
|
||||
@@ -1,46 +1,60 @@
|
||||
<div class="col-md-8">
|
||||
<div class="card border-top border-primary">
|
||||
|
||||
<div class="card-header" id="heading-__name__" data-toggle="collapse" data-target="#collapse-__name__" aria-expanded="true" aria-controls="collapse-__name__">
|
||||
<div class="d-flex align-items-center">
|
||||
<div style="flex: 1;">
|
||||
<h5 class="card-title mb-1 question-number">Question N: </h5>
|
||||
</div>
|
||||
<i class="fas fa-chevron-down arrow"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="collapse-__name__" class="collapse show" aria-labelledby="heading-__name__" data-parent="#accordion">
|
||||
<div class="collapse-content">
|
||||
|
||||
<div class="col-md-8">
|
||||
<div class="card border-left border-primary">
|
||||
<div class="card-body">
|
||||
<div class="form-group row">
|
||||
<div class="col-md-3">
|
||||
<h5 class="card-title mb-5 question-number">Question N: </h5>
|
||||
</div>
|
||||
<div class="col-md-3 offset-2">
|
||||
<button type="button" class="btn btn-outline-secondary rounded-pill mb-3">
|
||||
<i class="fa fa-eye"></i>Afficher
|
||||
<i class="fa fa-eye"></i> Afficher
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-md-2 offset-2">
|
||||
<div class="col-md-2 offset-7">
|
||||
<button type="button" class="btn btn-danger remove-question mb-3 float-right">
|
||||
<i class="fa fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="control-label col-sm-2 align-self-center mb-0" for="{{ formQtn.title.vars.id }}">{{ form_label(formQtn.title) }}:</label>
|
||||
<div class="col-sm-8">
|
||||
{{ form_widget(formQtn.title, {'attr': {'class': 'form-control', 'placeholder': 'Visible que pour la createur du question' }}) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="control-label col-sm-2 align-self-center mb-0" for="{{ formQtn.name_en.vars.id }}">{{ form_label(formQtn.name_en) }}:</label>
|
||||
<div class="col-sm-8">
|
||||
{{ form_widget(formQtn.name_en, {'attr': {'class': 'form-control', 'placeholder': 'Visible pour les participants' }}) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="control-label col-sm-2 align-self-center mb-0" for="{{ formQtn.name_fr.vars.id }}">{{ form_label(formQtn.name_fr) }}:</label>
|
||||
<div class="col-sm-8">
|
||||
{{ form_widget(formQtn.name_fr, {'attr': {'class': 'form-control', 'placeholder': 'Visible pour les participants' }}) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="control-label col-sm-2 align-self-center mb-0" for="{{ formQtn.name_ar.vars.id }}">{{ form_label(formQtn.name_ar) }}:</label>
|
||||
<div class="col-sm-8">
|
||||
{{ form_widget(formQtn.name_ar, {'attr': {'class': 'form-control', 'placeholder': 'Visible pour les participants' }}) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-5">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group col-sm-10">
|
||||
@@ -55,6 +69,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="card-title mt-4">Modalité</h4>
|
||||
<div class="row mt-3">
|
||||
<div class="col-md-6">
|
||||
@@ -74,11 +89,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{% set prototype %}
|
||||
<div class="modality-item border rounded p-3 mt-3 mb-3">
|
||||
|
||||
{# EN #}
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text">EN</span>
|
||||
@@ -115,19 +127,15 @@
|
||||
}) }}
|
||||
</div>
|
||||
{{ form_errors(formQtn.modalitys.vars.prototype.name_ar) }}
|
||||
|
||||
|
||||
</div>
|
||||
{% endset %}
|
||||
|
||||
{# modalities #}
|
||||
<div class="row mt-4">
|
||||
<div class="col-md-8">
|
||||
<div id="modalities" data-prototype="{{ prototype|e('html_attr') }}">
|
||||
|
||||
<div class="modalities-container" data-prototype="{{ prototype|e('html_attr') }}">
|
||||
{% for modality in formQtn.modalitys %}
|
||||
<div class="modality-item border rounded p-3 mb-3">
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text">EN</span>
|
||||
{{ form_widget(modality.name_en, {
|
||||
@@ -160,19 +168,16 @@
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<button type="button" id="add-modality" class="btn btn-primary">Ajouter une modalité</button>
|
||||
<button type="button" class="btn btn-primary add-modality">Ajouter une modalité</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3"></div>
|
||||
Reference in New Issue
Block a user