ajout du code html et css pour afficher la homepage en bootstrap

SebFox2011 · Jul 1, 2019 · 08bcd04 · 08bcd04
1 parent bbf1963
commit 08bcd04
Show file tree

Hide file tree

Showing 8 changed files with 142 additions and 26 deletions.
diff --git a/assets/css/app.scss b/assets/css/app.scss
@@ -5,3 +5,46 @@
 body {
     background-color: lightgray;
 }
+
+html {
+    scroll-behavior: smooth;
+}
+
+.album img {
+    height: 225px;
+    object-fit: contain;
+}
+
+.jumbotron {
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+    margin-bottom: 0;
+    background-color: #fff;
+}
+@media (min-width: 768px) {
+    .jumbotron {
+        padding-top: 6rem;
+        padding-bottom: 6rem;
+    }
+}
+
+.jumbotron p:last-child {
+    margin-bottom: 0;
+}
+
+.jumbotron-heading {
+    font-weight: 300;
+}
+
+.jumbotron .container {
+    max-width: 40rem;
+}
+
+footer {
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+}
+
+footer p {
+    margin-bottom: .25rem;
+}
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -12,3 +12,5 @@ require('../css/app.scss');
 // const $ = require('jquery');
 
 console.log('Hello Webpack Encore! Edit me in assets/js/app.js');
+
+
diff --git a/composer.json b/composer.json
@@ -5,7 +5,7 @@
         "php": "^7.1.3",
         "ext-ctype": "*",
         "ext-iconv": "*",
-        "sensio/framework-extra-bundle": "^5.1",
+        "sensio/framework-extra-bundle": "^5.3",
         "symfony/apache-pack": "^1.0",
         "symfony/asset": "4.3.*",
         "symfony/console": "4.3.*",

diff --git a/composer.lock b/composer.lock
diff --git a/src/Controller/DefaultController.php b/src/Controller/DefaultController.php
@@ -8,7 +8,7 @@
 class DefaultController extends AbstractController
 {
     /**
-     * @Route("/default", name="default")
+     * @Route("/", name="default")
      */
     public function index()
     {

diff --git a/templates/base.html.twig b/templates/base.html.twig
@@ -2,11 +2,99 @@
 <html>
     <head>
         <meta charset="UTF-8">
-        <title>{% block title %}Welcome!{% endblock %}</title>
-        {% block stylesheets %}{% endblock %}
+        <title>{% block title %}Digitalendar!{% endblock %}</title>
+        {% block stylesheets %}
+            {{ encore_entry_link_tags('app') }}
+
+        {% endblock %}
     </head>
     <body>
-        {% block body %}{% endblock %}
-        {% block javascripts %}{% endblock %}
+        {% block body %}
+            <header>
+                <div class="navbar navbar-dark bg-dark shadow-sm">
+                    <div class="container d-flex justify-content-between">
+                        <a href="index.html" class="navbar-brand d-flex align-items-center">
+                            <strong>Digitalendar</strong>
+                        </a>
+                        <nav class="my-2 my-md-0">
+                            <a class="p-2 text-white" href="events.html">Les événements</a>
+                            <a class="p-2 text-white" href="add-event.html">Proposer un événement</a>
+                            <a class="p-2 text-white" href="account.html">Mon compte</a>
+                        </nav>
+                    </div>
+                </div>
+            </header>
+
+            <main role="main">
+
+                <section class="jumbotron text-center">
+                    <div class="container">
+                        <h1 class="jumbotron-heading">Digitalendar</h1>
+                        <p class="lead text-muted">Votre agenda d'événements autour du digital</p>
+                        <p>
+                            <a href="#events" class="btn btn-primary my-2">Les prochains événements</a>
+                            <a href="events.html" class="btn btn-secondary my-2">Tous les événements</a>
+                        </p>
+                    </div>
+                </section>
+                <div id="events" class="album py-5 bg-light">
+                    <div class="container">
+
+                        <h2>Les prochains événements</h2>
+
+                        <div class="row">
+
+                            <div class="col-md-4">
+                                <div class="card mb-4 shadow-sm">
+                                    <img src="build/upload/logo-wwf-2019.png" alt="West Web Festival">
+                                    <div class="card-body">
+                                        <h3 class="card-text">West Web Festival</h3>
+                                        <div class="d-flex justify-content-between align-items-center">
+                                            <div class="btn-group">
+                                                <a href="event.html" class="btn btn-sm btn-outline-secondary">Voir</a>
+                                                <a href="#" class="btn btn-sm btn-outline-secondary">Modifier</a>
+                                            </div>
+                                            <small class="text-muted">Carhaix | 18-19 juillet 2019</small>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="col-md-4">
+                                <div class="card mb-4 shadow-sm">
+                                    <img src="build/upload/open-source-summit.jpg" alt="Open Source Summit">
+                                    <div class="card-body">
+                                        <h3 class="card-text">Open Source Summit</h3>
+                                        <div class="d-flex justify-content-between align-items-center">
+                                            <div class="btn-group">
+                                                <a href="event.html" class="btn btn-sm btn-outline-secondary">Voir</a>
+                                            </div>
+                                            <small class="text-muted">Paris | 10-11 décembre 2019</small>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                        </div>
+                    </div>
+                </div>
+
+
+            </main>
+
+        {% endblock %}
+        {% block footer %}
+            <footer class="text-muted">
+                <div class="container">
+                    <p class="float-right">
+                        <a href="#">Haut de page</a>
+                    </p>
+                    <p>&copy; Digitalendar 2019</p>
+                </div>
+            </footer>
+        {% endblock %}
+        {% block javascripts %}
+            {{ encore_entry_script_tags('app') }}
+        {% endblock %}
     </body>
-</html>
+</html>
diff --git a/templates/default/displayEvent.html.twig b/templates/default/displayEvent.html.twig
@@ -0,0 +1 @@
+{% extends'base.html.twig' %}
diff --git a/templates/default/index.html.twig b/templates/default/index.html.twig
@@ -1,20 +1,2 @@
 {% extends 'base.html.twig' %}
 
-{% block title %}Hello DefaultController!{% endblock %}
-
-{% block body %}
-<style>
-    .example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
-    .example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
-</style>
-
-<div class="example-wrapper">
-    <h1>Hello {{ controller_name }}! ✅</h1>
-
-    This friendly message is coming from:
-    <ul>
-        <li>Your controller at <code><a href="{{ '/Applications/MAMP/htdocs/Digitalendar/src/Controller/DefaultController.php'|file_link(0) }}">src/Controller/DefaultController.php</a></code></li>
-        <li>Your template at <code><a href="{{ '/Applications/MAMP/htdocs/Digitalendar/templates/default/index.html.twig'|file_link(0) }}">templates/default/index.html.twig</a></code></li>
-    </ul>
-</div>
-{% endblock %}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -12,3 +12,5 @@ require('../css/app.scss');
		// const $ = require('jquery');

		console.log('Hello Webpack Encore! Edit me in assets/js/app.js');