Ver código fonte

responsive site provisoire

master
Charly 3 anos atrás
pai
commit
9c653dbaf9
10 arquivos alterados com 223 adições e 28 exclusões
  1. +5
    -1
      config/routes.yaml
  2. BIN
      public/assets/img/Logo-Aux-Actes-Citoyens.jpg
  3. +10
    -1
      public/assets/sass/_home.scss
  4. +61
    -0
      public/assets/sass/_responsive.scss
  5. +1
    -0
      public/assets/sass/screen.scss
  6. +78
    -14
      public/assets/stylesheets/screen.css
  7. +19
    -0
      src/Controller/Frontend/DefaultController.php
  8. +6
    -1
      src/Entity/Site/Page.php
  9. +35
    -11
      templates/frontend/home.html.twig
  10. +8
    -0
      templates/page/page.html.twig

+ 5
- 1
config/routes.yaml Ver arquivo

@@ -10,6 +10,10 @@ app_homepage:
path: /
defaults: { _controller: App\Controller\DefaultController::index , _locale: fr }

home:
app_home:
path: /home
controller: App\Controller\Frontend\DefaultController:home

app_legal_mention:
path: /mentions-legales
controller: App\Controller\Frontend\DefaultController::mention

BIN
public/assets/img/Logo-Aux-Actes-Citoyens.jpg Ver arquivo

Antes Depois
Largura: 433  |  Altura: 299  |  Tamanho: 53KB Largura: 361  |  Altura: 219  |  Tamanho: 28KB

+ 10
- 1
public/assets/sass/_home.scss Ver arquivo

@@ -1,4 +1,7 @@
#home {
padding-bottom: 30px;
padding-top: 30px;

header {
.logo-aac {
width: 80%;
@@ -15,7 +18,7 @@
font-size: 32px;
font-family: dinbold;
position: absolute;
bottom: 46px;
bottom: 19px;
width: 100%;

.main-title {
@@ -71,4 +74,10 @@
width: 60%;
margin-top: 50px;
}

footer {
.legal-mention {
text-align: right;
}
}
}

+ 61
- 0
public/assets/sass/_responsive.scss Ver arquivo

@@ -0,0 +1,61 @@
.hidden {
display: none !important;
}

@media screen and (max-width: 1200px) {
#home {
header {
.bloc-logo {
text-align: center;

.logo-aac {
max-height: 200px;
width: auto;
max-width: 100%;
height: 100%;
}
}

h1 {
font-size: 23px;
}
}

h2 {
font-size: 24px;
}

ul li button {
width: 90%;
font-size: 16px;
}
}
}

@media screen and (max-width: 768px) {
#home {
header {
h1 {
font-size: 21px;
}
}

.hidden-mobile {
display: none;
}

.bloc-title {
min-height: 120px;
}

h2 {
margin-top: 0;
}

.bloc-video-mobile {
margin-top: 30px;
margin-bottom: 30px;
display: block !important;
}
}
}

+ 1
- 0
public/assets/sass/screen.scss Ver arquivo

@@ -13,6 +13,7 @@ $yellow: #ffe580;

@import "_base.scss";
@import "_home.scss";
@import "_responsive.scss";

@font-face {
font-family: 'dinregular';

+ 78
- 14
public/assets/stylesheets/screen.css Ver arquivo

@@ -67,36 +67,41 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
display: block;
}

/* line 3, ../sass/_home.scss */
/* line 1, ../sass/_home.scss */
#home {
padding-bottom: 30px;
padding-top: 30px;
}
/* line 6, ../sass/_home.scss */
#home header .logo-aac {
width: 80%;
}
/* line 7, ../sass/_home.scss */
/* line 10, ../sass/_home.scss */
#home header .personnages-acc {
width: 26%;
position: absolute;
bottom: 0;
}
/* line 13, ../sass/_home.scss */
/* line 16, ../sass/_home.scss */
#home header h1 {
color: #aab769;
font-size: 32px;
font-family: dinbold;
position: absolute;
bottom: 46px;
bottom: 19px;
width: 100%;
}
/* line 21, ../sass/_home.scss */
/* line 24, ../sass/_home.scss */
#home header h1 .main-title {
margin-left: 26%;
display: inline-block;
width: 70%;
}
/* line 27, ../sass/_home.scss */
/* line 30, ../sass/_home.scss */
#home header h1 .aac {
color: #dc5b2f;
}
/* line 33, ../sass/_home.scss */
/* line 36, ../sass/_home.scss */
#home h2 {
color: #568a73;
font-size: 30px;
@@ -104,11 +109,11 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
margin-bottom: 30px;
font-family: dinbold;
}
/* line 42, ../sass/_home.scss */
/* line 45, ../sass/_home.scss */
#home ul li {
margin-top: 25px;
}
/* line 45, ../sass/_home.scss */
/* line 48, ../sass/_home.scss */
#home ul li button {
width: 70%;
font-size: 18px;
@@ -117,28 +122,87 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
-webkit-border-radius: 15px 15px;
border-radius: 15px / 15px;
}
/* line 51, ../sass/_home.scss */
/* line 54, ../sass/_home.scss */
#home ul li button a {
color: #FFF;
}
/* line 56, ../sass/_home.scss */
/* line 59, ../sass/_home.scss */
#home ul li .yellow {
background-color: #ffe680;
}
/* line 60, ../sass/_home.scss */
/* line 63, ../sass/_home.scss */
#home ul li .green {
background-color: #aab769;
}
/* line 64, ../sass/_home.scss */
/* line 67, ../sass/_home.scss */
#home ul li .orange {
background-color: #dc5b2f;
}
/* line 70, ../sass/_home.scss */
/* line 73, ../sass/_home.scss */
#home .logo-coop {
width: 60%;
margin-top: 50px;
}
/* line 79, ../sass/_home.scss */
#home footer .legal-mention {
text-align: right;
}

/* line 1, ../sass/_responsive.scss */
.hidden {
display: none !important;
}

@media screen and (max-width: 1200px) {
/* line 8, ../sass/_responsive.scss */
#home header .bloc-logo {
text-align: center;
}
/* line 11, ../sass/_responsive.scss */
#home header .bloc-logo .logo-aac {
max-height: 200px;
width: auto;
max-width: 100%;
height: 100%;
}
/* line 19, ../sass/_responsive.scss */
#home header h1 {
font-size: 23px;
}
/* line 24, ../sass/_responsive.scss */
#home h2 {
font-size: 24px;
}
/* line 28, ../sass/_responsive.scss */
#home ul li button {
width: 90%;
font-size: 16px;
}
}
@media screen and (max-width: 768px) {
/* line 38, ../sass/_responsive.scss */
#home header h1 {
font-size: 21px;
}
/* line 43, ../sass/_responsive.scss */
#home .hidden-mobile {
display: none;
}
/* line 47, ../sass/_responsive.scss */
#home .bloc-title {
min-height: 120px;
}
/* line 51, ../sass/_responsive.scss */
#home h2 {
margin-top: 0;
}
/* line 55, ../sass/_responsive.scss */
#home .bloc-video-mobile {
margin-top: 30px;
margin-bottom: 30px;
display: block !important;
}
}
@font-face {
font-family: 'dinregular';
src: url("../fonts/din_regular-webfont.eot");

+ 19
- 0
src/Controller/Frontend/DefaultController.php Ver arquivo

@@ -2,15 +2,34 @@

namespace App\Controller\Frontend;

use Doctrine\ORM\EntityManagerInterface;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
use App\Entity\Site\Page;

class DefaultController extends AbstractController
{
protected $em;

public function __construct(EntityManagerInterface $em)
{
$this->em = $em;
}

public function home()
{
return $this->render('frontend/home.html.twig');
}

public function mention(): Response
{
$pageRepository = $this->em->getRepository(Page::class);

return $this->render('page/page.html.twig', [
'controller_name' => 'IndexController',
'page' => $pageRepository->findOneByDevAlias('legal-mention')
]);
}

}

+ 6
- 1
src/Entity/Site/Page.php Ver arquivo

@@ -42,7 +42,12 @@ class Page extends AbstractFullEntity
$this->gallery = new ArrayCollection();
}

public function getId(): ?int
public function __toString()
{
return $this->title;
}

public function getId(): ?int
{
return $this->id;
}

+ 35
- 11
templates/frontend/home.html.twig Ver arquivo

@@ -3,31 +3,40 @@

{% block body %}
<div id="home" class="ui container">
<header class="ui grid">
<div class="five wide column">
<header class="ui stackable grid">
<div class="five wide column bloc-logo">
<img class="logo-aac" src="{{ asset('assets/img/Logo-Aux-Actes-Citoyens.jpg') }}"
alt="logo aux actes citoyens">
</div>
<div class="eleven wide column">
<div class="eleven wide column bloc-title">
<h1>
<img class="personnages-acc" src="{{ asset('assets/img/Personnages-AAC.jpg') }}" alt="Aux actes Citoyens">
<img class="personnages-acc" src="{{ asset('assets/img/Personnages-AAC.jpg') }}"
alt="Aux actes Citoyens">
<span class="main-title">La plateforme numérique <br><span class="aac">« Aux actes Citoyens »</span> arrive bientôt !</span>
</h1>
</div>
</header>
<div class="ui grid">
<div class="hidden bloc-video-mobile">
<iframe width="100%" height="350px" src="https://www.youtube.com/embed/1dC1OoIi87o"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
<div class="ui stackable grid">
<div class="five wide column">
<h2>En attendant,<br>rejoignez-nous !</h2>

<ul>
<li>
<button class="ui button yellow">
<a href="{{ asset('assets/pdf/AAC-Fiche-Pratique-Aux-Actes-Citoyens.pdf') }}" title="Découvrir" target="_blank">Découvrir</a>
<a href="{{ asset('assets/pdf/AAC-Fiche-Pratique-Aux-Actes-Citoyens.pdf') }}"
title="Découvrir" target="_blank">Découvrir</a>
</button>
</li>
<li>
<button class="ui button green">
<a href="{{ asset('assets/pdf/Dossier-Partenariat-web.pdf') }}" title="Dossier partenariat" target="_blank">Dossier partenariat</a>
<a href="{{ asset('assets/pdf/Dossier-Partenariat-web.pdf') }}" title="Dossier partenariat"
target="_blank">Dossier partenariat</a>
</button>
</li>
<li>
@@ -38,13 +47,28 @@
</ul>

<div>
<img class="logo-coop" src="{{ asset('assets/img/Logo-Cooperative-Citoyens.jpg') }}"
alt="la cooperative des citoyens">
<a href="https://www.lacooperativedescitoyens.fr/" title="lacooperativedescitoyens" target="_blank">
<img class="logo-coop" src="{{ asset('assets/img/Logo-Cooperative-Citoyens.jpg') }}"
alt="la cooperative des citoyens">
</a>
</div>
</div>
<div class="eleven wide column">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/1dC1OoIi87o" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="eleven wide column bloc-video hidden-mobile">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/1dC1OoIi87o"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</div>
<footer>
<div class="ui grid">
<div class="legal-mention column eight wide column">
<a href="{{ path('app_legal_mention') }}" title="Mentions légales">Mentions légales</a>
</div>
<div class="column eight wide column">
création <a href="https://www.laclic.fr/" title="La Clic !" target="_blank">LA CLIC !</a>
</div>
</div>
</footer>
</div>
{% endblock %}

+ 8
- 0
templates/page/page.html.twig Ver arquivo

@@ -0,0 +1,8 @@
{% extends 'frontend/base.html.twig' %}

{% block body %}
<div class="ui container">
<h1>{{ page.title }}</h1>
<p>{{ page.description|raw }}</p>
</div>
{% endblock %}

Carregando…
Cancelar
Salvar