glyphicons and contact page init

Gruntfile.js

@@ -93,6 +93,13 @@ module.exports = function(grunt) {
             "uglify": true,
             "tests" : ['svg']
           }
+        },
+        copy: {
+          fonts: {
+            files: [
+              {expand: true, flatten: true, src: ['web/vendor/bootstrap-sass/assets/fonts/bootstrap/*'], dest: 'web/built/app/fonts/bootstrap/', filter: 'isFile'}
+            ]
+          }
         }
     });
 
@@ -101,11 +108,12 @@ module.exports = function(grunt) {
     grunt.loadNpmTasks('grunt-contrib-coffee');
     grunt.loadNpmTasks('grunt-contrib-watch');
     grunt.loadNpmTasks('grunt-contrib-concat');
+    grunt.loadNpmTasks('grunt-contrib-copy');
     grunt.loadNpmTasks('grunt-contrib-uglify');
     grunt.loadNpmTasks("grunt-modernizr");
 
-    grunt.registerTask('default', ['buildcss', 'buildjs']);
+    grunt.registerTask('default', ['buildcss', 'buildjs', 'assets:install']);
     grunt.registerTask('buildcss', ['sass:dist', 'concat:css']);
     grunt.registerTask('buildjs', ['modernizr:dist', 'coffee:compile', 'concat:js', 'uglify']);
-    grunt.registerTask('assets:install', ['symlink']);
+    grunt.registerTask('assets:install', ['symlink', 'copy:fonts']);
 };

package.json

@@ -9,6 +9,7 @@
     "grunt-contrib-coffee": "~1.0.0",
     "grunt-contrib-watch": "~0.6.1",
     "grunt-contrib-concat": "~1.0.1",
+    "grunt-contrib-copy": "~1.0.0",
     "grunt-symlink": "~0.4.0",
     "grunt-contrib-uglify": "~0.2.2",
     "grunt-modernizr": "~1.0.2"

src/AppBundle/Controller/ContactController.php

@@ -16,12 +16,17 @@ class ContactController extends AppBundleBaseController
    */
   public function contactAction(Request $request){
     $form = $this->createFormBuilder()
-      ->add('name', TextType::class)
+      ->add('name', TextType::class, [
+        'attr'  => [
+          'placeholder' => 'Nom et prénom',
+          'required' => true
+        ]
+      ])
       ->add('submit', SubmitType::class, [
-          'label' => 'Submit Me Now!',
-          'attr'  => [
-              'class' => 'btn btn-success'
-          ]
+        'label' => 'Envoyer la demande',
+        'attr'  => [
+            'class' => 'btn send'
+        ]
       ])
       ->getForm();
 

src/AppBundle/Resources/public/coffee/construct-tim.coffee

@@ -32,3 +32,54 @@ $(document).ready ->
       return
     ), 'xml'
     return
+
+
+# Google map
+gmap_container = 'map-canvas-general'
+if $('#' + gmap_container).length
+  initialize = ->
+    styles = [
+      { stylers: [
+        { hue: '#00ffe6' }
+        { saturation: -100 }
+      ] }
+      {
+        featureType: 'road'
+        elementType: 'geometry'
+        stylers: [
+          { lightness: 0 }
+          { 'gamma': 1.18 }
+          { visibility: 'simplified' }
+        ]
+      }
+      {
+        featureType: 'road'
+        elementType: 'labels'
+        stylers: [ { visibility: 'off' } ]
+      }
+    ]
+    styledMap = new (google.maps.StyledMapType)(styles, name: 'Styled Map')
+    image = '/images/frontend/static/map/map-marker.png'
+    #Map marker - image location
+    myLatlng = new (google.maps.LatLng)(50.468376, 4.987975)
+    #Your location
+    mapOptions =
+      zoom: 10
+      scrollwheel: false
+      center: myLatlng
+      mapTypeControlOptions: mapTypeIds: [
+        google.maps.MapTypeId.ROADMAP
+        'map_style'
+      ]
+    map = new (google.maps.Map)(document.getElementById(gmap_container), mapOptions)
+    marker = new (google.maps.Marker)(
+      position: myLatlng
+      map: map
+      icon: image
+      title: 'Construct-Tim')
+    #Associate the styled map with the MapTypeId and set it to display.
+    map.mapTypes.set 'map_style', styledMap
+    map.setMapTypeId 'map_style'
+    return
+
+  google.maps.event.addDomListener window, 'load', initialize

src/AppBundle/Resources/public/coffee/welcome.coffee

@@ -196,52 +196,3 @@ $(document).ready ->
       clickEvent = false
       return
     return
-
-#Google map
-
-initialize = ->
-  styles = [
-    { stylers: [
-      { hue: '#00ffe6' }
-      { saturation: -100 }
-    ] }
-    {
-      featureType: 'road'
-      elementType: 'geometry'
-      stylers: [
-        { lightness: 0 }
-        { 'gamma': 1.18 }
-        { visibility: 'simplified' }
-      ]
-    }
-    {
-      featureType: 'road'
-      elementType: 'labels'
-      stylers: [ { visibility: 'off' } ]
-    }
-  ]
-  styledMap = new (google.maps.StyledMapType)(styles, name: 'Styled Map')
-  image = '/images/frontend/static/map/map-marker.png'
-  #Map marker - image location
-  myLatlng = new (google.maps.LatLng)(50.468376, 4.987975)
-  #Your location
-  mapOptions =
-    zoom: 10
-    scrollwheel: false
-    center: myLatlng
-    mapTypeControlOptions: mapTypeIds: [
-      google.maps.MapTypeId.ROADMAP
-      'map_style'
-    ]
-  map = new (google.maps.Map)(document.getElementById('map-canvas'), mapOptions)
-  marker = new (google.maps.Marker)(
-    position: myLatlng
-    map: map
-    icon: image
-    title: 'Construct-Tim')
-  #Associate the styled map with the MapTypeId and set it to display.
-  map.mapTypes.set 'map_style', styledMap
-  map.setMapTypeId 'map_style'
-  return
-
-google.maps.event.addDomListener window, 'load', initialize

src/AppBundle/Resources/public/scss/contact.sass

@@ -0,0 +1,118 @@
+@import "_variables"
+@import "_functions"
+
+
+section.contact
+  padding: 50px 0
+  #forms
+    input, textarea
+      border: 1px solid #eeeeee
+      -webkit-border-radius: 5px
+      -moz-border-radius: 5px
+      border-radius: 5px
+      color: #222222
+      font-size: 18px
+      font-weight: 300
+      height: auto
+      width: 100%
+      letter-spacing: 0.5px
+      margin-bottom: 18px
+      outline: none
+      padding: 10px 15px 10px
+      transition: all 300ms linear
+      -o-transition: all 300ms linear
+      -ms-transition: all 300ms linear
+      -moz-transition: all 300ms linear
+      -webkit-transition: all 300ms linear
+
+  #comment-form
+    input, textarea
+      border: 1px solid #eeeeee
+      -webkit-border-radius: 5px
+      -moz-border-radius: 5px
+      border-radius: 5px
+      color: #222222
+      font-size: 18px
+      font-weight: 300
+      height: auto
+      width: 100%
+      letter-spacing: 0.5px
+      margin-bottom: 18px
+      outline: none
+      padding: 10px 15px 10px
+      transition: all 300ms linear
+      -o-transition: all 300ms linear
+      -ms-transition: all 300ms linear
+      -moz-transition: all 300ms linear
+      -webkit-transition: all 300ms linear
+
+  #forms
+    select
+      border: 1px solid #eeeeee
+      -webkit-border-radius: 5px
+      -moz-border-radius: 5px
+      border-radius: 5px
+      color: #222222
+      font-size: 18px
+      font-weight: 300
+      height: auto
+      width: 100%
+      letter-spacing: 0.5px
+      margin-bottom: 18px
+      outline: none
+      padding: 10px 15px 10px
+      transition: all 300ms linear
+      -o-transition: all 300ms linear
+      -ms-transition: all 300ms linear
+      -moz-transition: all 300ms linear
+      -webkit-transition: all 300ms linear
+      height: 50px
+    textarea
+      height: 185px
+      margin-bottom: 0
+
+  #comment-form textarea
+    height: 185px
+    margin-bottom: 0
+
+  #forms button.send, #comment-form button.send
+    width: auto
+    border-radius: 0
+    background-color: $color-brand-primary-light
+    color: #fff
+    text-align: left
+    padding: 20px
+    font-weight: bold
+    font-size: 1.3em
+
+  #forms
+    input:hover, textarea:hover, input:focus, textarea:focus
+      border-color: #404040
+
+  #comment-form
+    input:hover, textarea:hover, input:focus, textarea:focus
+      border-color: #404040
+
+  #forms .required:after, #comment-form .required:after
+    content: "Required field"
+    font-size: 14px
+    opacity: 0
+    pointer-events: none
+    position: absolute
+    right: 25px
+    top: 10px
+    transition: all 0.2s ease 0s
+    z-index: 15
+
+  #forms .required.error:after, #comment-form .required.error:after
+    opacity: 1
+
+  .notification
+    display: none
+    cursor: pointer
+
+
+section.map
+  #map-canvas-general
+    width: 100%
+    height: 350px

src/AppBundle/Resources/public/scss/homepage.sass

@@ -185,6 +185,6 @@ body.homepage
         padding: 10px
 
   section.map
-    #map-canvas
+    #map-canvas-general
       width: 100%
       height: 350px

src/AppBundle/Resources/public/scss/main.sass

@@ -372,4 +372,5 @@ section.blog
 @import "post"
 @import "project_type"
 @import "project"
+@import "contact"
 @import "homepage"

src/AppBundle/Resources/views/base_homepage.html.twig

@@ -2,42 +2,15 @@
 
 {% block body %}
 
-  <section class="carousel slide" id="ZCarousel">
-    <div class="scroll-down"><a href="#about"><span class="glyphicon glyphicon-download"></span></a></div>
-    <!--Indicators-->
-    <ol class="carousel-indicators">
-      <li class="active" data-slide-to="0" data-target="#ZCarousel"></li>
-      <li data-slide-to="1" data-target="#ZCarousel"></li>
-      <li data-slide-to="2" data-target="#ZCarousel"></li>
-    </ol>
-    <!--Wrapper for Slides-->
-    <div class="carousel-inner">
-      <div class="item active">
-        <!--Set the first background image using inline CSS below.-->
-        <div class="fill" style="background-image:url('/images/frontend/background/background1.jpg');"></div>
-        <div class="carousel-caption"><img data-fallback="logo-construct-tim-namur-big.jpg" alt="Entrepreneur général en bâtiment | Construct-Tim" src="/images/brand/logo-construct-tim-namur-big.svg" /></div>
-      </div>
-      <div class="item">
-        <!--Set the second background image using inline CSS below.-->
-        <div class="fill" style="background-image:url('/images/frontend/background/background2.jpg');"></div>
-        <div class="carousel-caption"><img data-fallback="logo-construct-tim-namur-big.jpg" alt="Entrepreneur général en bâtiment | Construct-Tim" src="/images/brand/logo-construct-tim-namur-big.svg" /></div>
-      </div>
-      <div class="item">
-        <!--Set the third background image using inline CSS below.-->
-        <div class="fill" style="background-image:url('/images/frontend/background/background3.jpg');"></div>
-        <div class="carousel-caption"><img data-fallback="logo-construct-tim-namur-big.jpg" alt="Entrepreneur général en bâtiment | Construct-Tim" src="/images/brand/logo-construct-tim-namur-big.svg" /></div>
-      </div>
-    </div>
-    <!--Controls--><a class="left carousel-control" data-slide="prev" href="#ZCarousel"><span class="icon-prev"></span></a><a class="right carousel-control" data-slide="next" href="#ZCarousel"><span class="icon-next"></span></a>
-  </section>
+  {{ include('AppBundle::partials/_carousel.html.twig') }}
 
   {% block header %}
-    {{ include('AppBundle::partials/_header.html.twig') }}
+    {{ include('AppBundle::partials/global/_header.html.twig') }}
   {% endblock %}
 
   {% block content %}{% endblock %}
 
   {% block footer %}
-    {{ include('AppBundle::partials/_footer.html.twig') }}
+    {{ include('AppBundle::partials/global/_footer.html.twig') }}
   {% endblock %}
 {% endblock %}

src/AppBundle/Resources/views/base_pages.html.twig

@@ -2,7 +2,12 @@
 
 {% block body %}
   {% block header %}
-
+    {{ include('AppBundle::partials/global/_header.html.twig') }}
   {% endblock %}
+
   {% block content %}{% endblock %}
+
+  {% block footer %}
+    {{ include('AppBundle::partials/global/_footer.html.twig') }}
+  {% endblock %}
 {% endblock %}