responsive du site

Gemfile.lock

@@ -356,4 +356,4 @@ DEPENDENCIES
   wicked_pdf
 
 BUNDLED WITH
-   1.16.1
+   1.17.3

app/assets/stylesheets/public.scss

@@ -236,6 +236,7 @@ h1{
   }
   #contacts{
     padding-right:50px;
+    left: 0px !important;
   }
   #place{
     padding-right:35px;
@@ -434,5 +435,246 @@ h2{
   }
 }
 
+// madias queries
+
+@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{
+  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 {
+
+    .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

@@ -94,8 +94,10 @@
       =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") if false
 
+
           #menu_top
             .sub_menu
               =render :partial => "public/shared/second_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"