page responsive avec les medias queries

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

@@ -41,6 +41,10 @@ body{
   a{
     text-decoration:none;
   }
+
+  img {
+    display: none;
+  }
   #cinquante{
     position:absolute;
     bottom:0px;
@@ -306,7 +310,7 @@ h2{
   position:absolute;
   top:0;
   left:0;
-  height:190px;
+  height: 15%;
   z-index:3;
 }
 
@@ -402,3 +406,267 @@ h2{
   }
 }
 
+.menu_outer {
+  display: none;
+}
+
+.bars {
+  display:none;
+}
+
+@media screen and (max-width: 880px) {
+  .sub_menu {
+    display: none;
+  }
+
+  //menu
+  .bars {
+    display: block;
+    z-index: 300;
+    font-size: 30px;
+    color: #E21424;
+    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;
+  .menu {
+    display: none;
+  }
+  .menu_outer {
+    .menu {
+      display: block;
+    }
+  a {
+    #logo_fond {
+      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 {
+
+
+
+
+    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;
+      font-size: 15px;
+    }
+
+    .btn {
+      margin: 5px;
+    }
+  }
+
+  .columns.span_12 {
+    padding-top: 10px !important;
+
+    .main.row-fluid {
+      p {
+        font-size: 18px !important;
+        strong {
+          font-size: 18px;
+        }
+        span {
+         font-size: 18px !important;
+        }
+      }
+    }
+  }
+  .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;
+    .btn {
+      position: relative !important;
+      right: 70% !important;
+    }
+  }
+
+  // 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 {
+
+  }
+  #sub_footer #logos img {
+    height: 75px;
+    margin: 0 10px;
+    p {
+      margin-left: 10px;
+    }
+  }
+  #sub_footer #contacts {
+    padding-right: 50px;
+    position: relative;
+    left: -20%;
+    height: 15vh;
+  }
+  //pour les particuliers
+  #main_content {
+    padding: 0px;
+    position: static;
+  }
+
+  h1 {
+    font-size: 20px;
+    margin-bottom: 10px;
+  }
+
+  .columns.span_4 {
+    width: 100%;
+  }
+
+  .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;
+    }
+  }
+
+  //maintenance
+.columns.span_5 {
+  width: 90%;
+}
+
+.text-justify {
+  li {
+    padding-bottom: 20px;
+    }
+  }
+
+  .main.row-fluid .btn {
+    margin: 5px 14%;
+  }
+
+  #main_content {
+
+  }
+}
+

app/views/layouts/public.html.haml

@@ -82,6 +82,7 @@
     -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
@@ -146,6 +147,8 @@
     -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

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"