responsive and burger menu done

Gemfile.lock

@@ -152,7 +152,7 @@ GEM
     multi_json (1.13.1)
     multi_xml (0.6.0)
     multipart-post (2.0.0)
-    mysql2 (0.3.18)
+    mysql2 (0.4.10)
     net-scp (1.2.1)
       net-ssh (>= 2.6.5)
     net-sftp (2.1.2)

app/assets/stylesheets/public.scss

@@ -56,15 +56,15 @@ img{
   .bx-wrapper{
     margin:0;
   }
-  
+
   .bx-controls{
     position:absolute;
     bottom:40px;
     left:0;
     right:0;
-    
+
   }
-  
+
   .slide{
     .link_overlay{
       position:absolute;
@@ -80,14 +80,14 @@ img{
       right:50px;
       background:rgba(255,255,255,0.85);
       width:590px;
-      
+
     }
     .logo{
       position:absolute;
       top:30px;
       left:30px;
       width:135px;
-      
+
     }
     .content{
       text-decoration:none;
@@ -95,10 +95,10 @@ img{
       padding-bottom:50px;
       color:black;
       font-size:1em;
-      
+
     }
-    
+
-    
+
   }
 }
 
@@ -136,8 +136,8 @@ h1{
   margin-top:0;
   text-transform:uppercase;
   font-weight:500;
-  
+
-  
+
 }
 
 #main_content{
@@ -168,14 +168,14 @@ h1{
   h2{
     color:white;
   }
-  
+
   fieldset{
     border:0;
     padding:0;
     margin:0;
-    
+
   }
-  
+
   table{
     width:600px !important;
     max-width:100%;
@@ -184,15 +184,15 @@ h1{
       padding-bottom:12px;
     }
   }
-  
+
   input, textarea{
     box-sizing:border-box;
     padding:12px 15px;
     font-size:1em;
     width:100%;
     border:0;
-    
+
-    
+
   }
   .error{
     color:red;
@@ -203,9 +203,9 @@ h1{
     text-align:right;
     padding:14px 0;
     padding-top:0px;
-    
+
   }
-  
+
   .btn{
     border-color:white !important;
     color:white;
@@ -229,7 +229,7 @@ h1{
     padding:0;
     margin:0;
   }
-  
+
   #place,#contacts{
     display:inline-block;
     padding:25px 0;
@@ -237,7 +237,7 @@ h1{
     color:rgba(0,0,0,0.6);
     line-height:19px;
     text-align:left;
-    
+
   }
   #contacts{
     padding-right:50px;
@@ -245,7 +245,7 @@ h1{
   #place{
     padding-right:35px;
   }
-  
+
   #logos{
     padding:15px 0;
     float:left;
@@ -258,24 +258,24 @@ h1{
 #actus{
   padding:20px 0;
   padding-bottom:50px;
-  
+
   h3{
     text-transform:uppercase;
     font-weight:500;
     margin-bottom:-10px;
     padding-bottom:0;
-    
+
   }
   #left_actus{
     float:left;
     width:65%;
   }
-  
+
   #right_actus{
     float:left;
     width:35%;
   }
-  
+
 }
 
 .actu{
@@ -283,7 +283,7 @@ h1{
     float:left;
     width:260px;
     background:center center no-repeat;
-    
+
   }
   .description{
     margin-left:280px;
@@ -292,7 +292,7 @@ h1{
 }
 h2{
   background:no-repeat bottom left;
-  
+
   background-image:url('/bottom-lines.png');
   background-size: 225px;
   padding-top:20px;
@@ -301,8 +301,8 @@ h2{
   margin-top:0;
   text-transform:uppercase;
   font-weight:500;
-  
+
-  
+
 }
 
 
@@ -321,21 +321,21 @@ h2{
   left:0;
   right:0;
   min-height:100px;
-  
+
   background:black;
   padding-right:20px;
   padding-top:30px;
-  
-  
 
-  background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.25) 30%,rgba(0,0,0,0) 100%); 
+
-  
+
-  
+  background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.25) 30%,rgba(0,0,0,0) 100%);
+
+
   z-index:2;
   color:white;
-  
+
   text-align:right;
-  
+
   a{
     color:white;
     text-decoration:none;
@@ -344,7 +344,7 @@ h2{
     font-size:0.8em;
     opacity:0.7;
     padding-right:10px;
-    
+
   }
   .menu{
     padding:5px 0;
@@ -354,7 +354,7 @@ h2{
       font-weight:500;
       font-size:1.2em;
       text-transform:uppercase;
-     
+
     }
     .devis{
       background:#f2930d;
@@ -366,7 +366,7 @@ h2{
   color:black;
   text-decoration:none;
   font-size:1.2em;
-  
+
   .color{
     height:1em;
     width:5px;
@@ -374,13 +374,13 @@ h2{
     top:2px;
     background:black;
     display:inline-block;
-    
+
   }
-  
+
   border-bottom:1px dashed rgba(0,0,0,0.9);
   padding-bottom:10px;
   margin-bottom:10px;
-  
+
 }
 .product_icon{
   text-align:center;
@@ -391,14 +391,14 @@ h2{
   padding-bottom:30px;
 }
 #products{
-  
+
   a{
     text-decoration:none;
   }
   h2{
     background-position:center bottom;
     text-align:center;
-    
+
   }
   text-align:center;
   img{
@@ -407,3 +407,240 @@ h2{
   }
 }
 
+.menu_outer {
+  display: none;
+}
+
+.bars {
+  display:none;
+}
+
+// medias queries
+
+@media screen and (max-width: 880px) {
+  .sub_menu {
+    display: none;
+  }
+
+  #logo_fond {
+    width: 30%;
+    height: auto;
+  }
+
+  .menu {
+    display: none;
+  }
+
+ //menu
+
+  .main.row-fluid .btn {
+    display: block !important;
+    margin-left: auto !important;
+    margin-right: auto !important;
+    margin: 30px !important;
+  }
+
+  .bars {
+    display: block;
+    z-index: 300;
+    font-size: 30px;
+    color: #F29125;
+    z-index:111;
+    position:fixed;
+    top:10px;
+    right:10px;
+
+  }
+
+  table {
+    font-size: 11px;
+    span {
+      font-size: 12px !important;
+    }
+  }
+
+
+#menu_top{
+  position:static;
+  min-height:0;
+  padding:0;
+}
+
+.suppmenu {
+  display: none;
+}
+.menu_outer{
+  //display:block;
+  display: none;
+    position:fixed;
+    top:0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    background: rgba(50,50,50,0.90);
+    padding: 14% !important;
+    z-index: 3;
+  .menu {
+    display: block;
+  }
+}
+
+  .menu {
+
+
+
+
+    a{
+      color: rgba(255, 255, 255, 1) !important;
+      display: block !important;
+      padding: 10px 25px !important;
+      font-size: 20px !important;
+    }
+  }
+
+  .content {
+    display: none;
+  }
+
+  #cinquante {
+    width: 150px !important;
+  }
+
+  .main.row-fluid {
+    p {
+      padding: 0 30px;
+    }
+
+    .btn {
+      margin: 5px;
+    }
+  }
+  .columns.span_10 {
+    width: 100%;
+ }
+
+  .row {
+    img {
+      max-width: 150px;
+    }
+  }
+
+  .img.image_content{
+    top: 40%;
+    left: 30%;
+    transform: translate(180%, -15%);
+
+  }
+
+  //formulaire
+
+  #footer table {
+    width: auto !important;
+    max-width: auto;
+    border-collapse: collapse;
+  }
+
+  #footer .submit {
+    width: auto;
+    max-width: auto;
+  }
+
+  .center {
+    margin: 20px;
+  }
+
+  #footer {
+    margin-top: 0px;
+  }
+
+  // articles
+  .actu .description {
+    margin-left: 0px;
+    margin-right: 0px;
+  }
+  #actus #left_actus {
+    float: left;
+    width: 100%;
+}
+  .actu .img {
+    float: none;
+    width: 100%;
+    background: center center no-repeat;
+  }
+
+  .img.with_ratio {
+    background-size: contain !important;
+    margin-top: 20px;
+  }
+
+  #actus #right_actus {
+    float: center;
+    width: 100%;
+  }
+
+  .breve {
+    margin-top: 20px;
+  }
+
+  #sub_footer #place {
+    padding-right: 0px;
+    height: 20vh;
+  }
+  #sub_footer #logos img {
+    height: 75px;
+    margin: 0 10px;
+    p {
+      margin-left: 10px;
+    }
+  }
+  #sub_footer #contacts {
+    padding-right: 50px;
+  }
+  //pour les particuliers
+  #main_content {
+    padding: 0px;
+    position: static;
+  }
+
+  h1 {
+    font-size: 20px;
+    margin-bottom: 10px;
+  }
+
+  .columns.span_4 {
+    width: 100%;
+  }
+
+  .row {
+    margin-top: 20px;
+  }
+
+  .expandable_image {
+    img {
+      margin-top: 20px;
+    }
+  }
+
+  .columns.span_3 {
+
+    .img.image_content {
+    top: 40%;
+    left: 30%;
+    transform: translate(0%, -15%);
+    padding: 0;
+    }
+    img {
+      margin-top: 0px;
+      height: auto !important;
+      margin-left: 3px;
+      width: 70px;
+      margin-top: 20px;
+    }
+
+  .columns {
+    box-sizing: border-box;
+    float: center;
+    display: inline-block;
+    }
+  }
+}

app/views/layouts/public.html.haml

@@ -36,62 +36,63 @@
     <meta name="msapplication-TileColor" content="#ffffff">
     <meta name="msapplication-TileImage" content="/mstile-144x144.png">
     <meta name="theme-color" content="#ffffff">
-    
+
     %meta{:name=>"viewport", :content=>"width=device-width,initial-scale=1"}
     %meta{ :"http-equiv" => "Content-Type", :content => "text/html; charset=utf-8" }
     %meta{ :"name" => "Description", :content => @description }
-    %meta{ :"name" => "Keywords", :content => @keywords }  
+    %meta{ :"name" => "Keywords", :content => @keywords }
 
     -if @facebook_img
       =raw '<meta property="og:image" content="http://payresas.fr'+@facebook_img.to_s+'"/>'
       =raw '<link rel="image_src" href="http://payresas.fr'+@facebook_img.to_s+'"/>'
-      
+
       =raw '<meta name="twitter:card" content="summary_large_image">'
-      
+
-      
+
-      
+
-      
+
       =raw '<meta property="twitter:image" content="http://payresas.fr'+@facebook_img.to_s+'"/>'
-      
+
-     
+
-      
+
-      
+
       -@img_size = FastImage.size('http://payresas.fr'+@facebook_img.to_s)
-      
+
       -if @img_size and @img_size.size > 0
         =raw '<meta property="og:image:width" content="'+@img_size[0].to_s+'"/>'
         =raw '<meta property="og:image:height" content="'+@img_size[1].to_s+'"/>'
-  
+
     = javascript_include_tag "public"
-    
+
-    = csrf_meta_tag 
+    = csrf_meta_tag
     =render :partial => "public/shared/ga"
-    
+
     = stylesheet_link_tag 'public', :media => :all
-    
+
     <link href="https://fonts.googleapis.com/css?family=Galada|Lato:400,900|Roboto+Slab:400,700" rel="stylesheet">
     <script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
     =javascript_include_tag "https://maps.googleapis.com/maps/api/js?libraries=places,geometry&amp;sensor=false"
 
-    
+
-    
+
-      
+
 
   %body
     =link_to image_tag("/logo-fond.png", :id => "logo_fond"), "/"
     -if @menu_item and @menu_item.id == 1
       .slide_home_wrapper
         =image_tag("/50ans.png", :id => "cinquante")
-      
+        =render :partial => "public/shared/menu_top"
+
         #menu_top
           .sub_menu
             =render :partial => "public/shared/second_menu"
           .menu
             =render :partial => "public/shared/first_menu"
-          
+
-          
+
-                        
+
-    
+
         .slide_home.slider
 
           -@home_slider = HomeSlider.find_by_slug("home")
@@ -104,35 +105,35 @@
             -@home_slides_simu = @home_slides_simu.joins(:lang_sites).where("lang_sites.id = ?", @lang.id)
             -@home_slides_simu.each do |home_slider_slide|
               -if home_slider_slide.image_file
-                
+
                 %div.with_ratio.slide{:style => "background-image:url('#{home_slider_slide.image_file.file.large.url}');background-size:100%;background-size:cover;", :data => {:ratio => 0.45}}
                   =link_to home_slider_slide.url.to_s, :target => ("_blank" if home_slider_slide.popup) do
                     .link_overlay
                   .description.vertical_center
                     =link_to home_slider_slide.url.to_s, :target => ("_blank" if home_slider_slide.popup) do
-                   
+
-                        
+
-        
+
                       -if home_slider_slide.titre2?
                         .sub_title=home_slider_slide.titre2
                       -elsif home_slider_slide.article
                         .sub_title
                           -if home_slider_slide.article.category
-                
+
                             -cats = []
                             -home_slider_slide.article.categories.uniq.each do |cat|
                               -cats << cat.lang(I18n.locale.to_s).name
                             =cats.join(", ")
-                
+
                             %span.sep
                               ="|"
                             =l(home_slider_slide.article.published_at, :format => :human_date)
                       .content
                         =home_slider_slide.description1
-                
+
-                   
+
-     
+
-  
+
 
         :javascript
           $(document).ready(function(){
@@ -142,19 +143,21 @@
             prevText: '<'
           });
           });
-  
+
     -else
       .slide_home_wrapper.with_ratio{:style => "background-image:url('#{@img_url}');", :data => {:ratio => 0.35}}
-        
+
-      
+        =render :partial => "public/shared/menu_top"
+
+
         #menu_top
           .sub_menu
             =render :partial => "public/shared/second_menu"
           .menu
             =render :partial => "public/shared/first_menu"
-            
+
     -if @menu_item and @menu_item.id == 1
-     
+
       #main=yield
     -else
       #main_content=yield
@@ -164,11 +167,11 @@
           #left_actus
             %h2
               Actualité
-        
+
-            
+
             -@articles_rss.each do |article|
-  
+
-   
+
               %div{:class => "actu"}
 
 
@@ -179,22 +182,22 @@
 
                 .description
                   %h3= article['title']
-  
+
                   =simple_format article["description"]
-  
+
                   .cta
                     =link_to "https://groupe-payre.fr"+article["url"].to_s, :class => "btn", :target => "_blank" do
                       =qit("Lire l'article")
                       >
                 .clear
 
-              
+
-            
+
-            
+
           #right_actus
             %h2
               L'actu du groupe
-       
+
             -@breves_rss[0..10].each do |article|
               =link_to "https://groupe-payre.fr"+article["url"].to_s,  :target => "_blank", :style => "text-decoration:none;" do
                 %div{:class =>"breve"}
@@ -203,13 +206,13 @@
                   ="-"
                   = article['title']
           .clear
-        
+
-        
+
       #footer
         .center
           %h2
             Nous contacter
-      
+
           -@contact = @contact || Contact.new(:provenance_id => 3)
 
           .contact_form.contact_militer#form
@@ -220,16 +223,16 @@
       #logos
         =link_to "https://payreagriculture.fr", :target => "_blank" do
           =image_tag "/payre-agriculture.png"
-          
+
         =link_to "https://payreenergies.fr", :target => "_blank" do
           =image_tag "/payre-energies.png"
-          
+
         =link_to "https://payremaintenance.fr", :target => "_blank" do
           =image_tag "/payre-maintenance.png"
-          
+
         =link_to "http://payrejardinerie.fr/", :target => "_blank" do
           =image_tag "/payre-jardinerie.png"
-      
+
       #place
         %p
           Payre Produits Pétroliers
@@ -238,7 +241,7 @@
           %br
           38430 MOIRANS
       #contacts
-      
+
         %p
           =ic :phone
           04 76 35 31 69
@@ -249,10 +252,10 @@
           =link_to "mailto:contact@ets-payre.fr" do
             =ic :"envelope-o"
             contact@ets-payre.fr
-      
+
       .clear
-          
+
-      
+
     :javascript
       resize()
-  
+

app/views/public/shared/_first_menu.html.haml

@@ -1,6 +1,6 @@
 
 -MenuItem.where(:parent_id => nil, :menu_id => 1).order(:position).each do |menu_item|
   =menu_item_link(menu_item)
-  
+
 =link_to "Demander un devis","#", :class => "devis"
-    
+

app/views/public/shared/_menu_top.html.haml

@@ -0,0 +1,12 @@
+#menu_top
+
+  =link_to image_tag("/logo-fond.png", :id => "logo_fond"), "/"
+
+  .bars{:onclick => "$(this).closest('#menu_top').find('.menu_outer').toggle();"}
+    =ic :bars
+
+  .menu_outer
+    .sub_menu
+      =render :partial => "public/shared/second_menu"
+    .menu
+      =render :partial => "public/shared/first_menu"