version responsive

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

@@ -402,3 +402,213 @@ h2{
   }
 }
 
+.menubar {
+  display: none;
+}
+
+.bars {
+  display:none;
+}
+
+//responsive
+img, table{
+  max-width:100%;
+}
+@media screen and (max-width: 880px) {
+  //menu
+  .bars {
+    display: block;
+    z-index: 300;
+    font-size: 30px;
+    color: #00BD00;
+    z-index:111;
+    position:fixed;
+    top:10px;
+    right:10px;
+
+  }
+
+#menu_top{
+  position:static;
+  min-height:0;
+  padding:0;
+}
+.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 {
+
+
+
+
+    a{
+      color: rgba(255, 255, 255, 1) !important;
+      display: block !important;
+      padding: 10px 25px !important;
+      font-size: 20px !important;
+    }
+  }
+
+  //bannière
+  #logo_fond {
+    width: 25%;
+    height: auto;
+  }
+
+  #cinquante {
+    width: 40% !important;
+  }
+
+  .menu {
+
+  }
+
+  .sub_menu {
+    font-size: 10px !important;
+    opacity: 0.7;
+    padding-right: 0px !important;
+    position: absolute;
+    bottom: 0;
+    color: white;
+    left: 10%;
+    right: 10%;
+  }
+
+  .content {
+    display: none;
+  }
+
+  .columns {
+    padding-top: 40px !important;
+    padding-bottom: 40px !important;
+  }
+
+  //production
+
+  .columns .span_12 {
+    padding: 0 30px;
+    span {
+      font-size: 15px !important;
+    }
+  }
+
+  //actu
+  .actu .description {
+    margin-left: 0px;
+  }
+
+  #right_actus {
+    float: none !important;
+    width: 90% !important;
+    margin-right: 20px;
+    position: relative;
+    left: 5%;
+  }
+
+  .actu .img {
+    float: none;
+    width: 100%;
+    background: center center no-repeat;
+  }
+  #actus #left_actus {
+    float: auto;
+    width: 90%;
+    padding: 20px;
+  }
+
+  .cta .btn {
+    margin-bottom: 20px;
+  }
+
+  //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;
+  }
+  //footer
+  #sub_footer #logos img {
+    height: 70px;
+  }
+
+  //grandescultures
+
+  .columns.span_3 {
+    text-align: left;
+    width: 100%;
+    padding: 0px;
+  }
+  .columns.span_4 {
+    width: 100%;
+    padding: 0px;
+  }
+
+  .columns.span_5 {
+    width: 100%;
+    padding: 0px;
+  }
+  .columns.span_3 {
+    .columns.span_12 {
+      padding: 0px;
+      width: 100%;
+    }
+  }
+
+  .columns.span_6 {
+    width: 100%;
+    a {
+      margin-bottom: 20px;
+    }
+  }
+
+  #main_content {
+    width: auto;
+    top: 0px;
+    .columns {
+      padding: 10px !important;
+    }
+    h1 {
+      position: relative;
+      top: 10px;
+      font-size: 20px;
+    }
+    .download_content {
+      margin-bottom: 20px;
+    }
+  }
+
+  //production animale
+  .columns.span_12 {
+    img {
+      width: 100%;
+    }
+  }
+
+  .rea-gal {
+      text-align: center;
+    }
+}

app/views/layouts/public.html.haml

@@ -78,17 +78,13 @@
 
 
   %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")
 
-        #menu_top
-          .sub_menu
-            =render :partial => "public/shared/second_menu"
-          .menu
-            =render :partial => "public/shared/first_menu"
-          
+        =render :partial => "public/shared/menu_top"
 
 
 
@@ -147,11 +143,8 @@
       .slide_home_wrapper.with_ratio{:style => "background-image:url('#{@img_url}');", :data => {:ratio => 0.35}}
 
 
-        #menu_top
-          .sub_menu
-            =render :partial => "public/shared/second_menu"
-          .menu
-            =render :partial => "public/shared/first_menu"
+        =render :partial => "public/shared/menu_top"
+
 
     -if @menu_item and @menu_item.id == 1
 

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

@@ -0,0 +1,14 @@
+
+#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"
+