From 204ceceaf15826065d3221194faff815bca0b4c7 Mon Sep 17 00:00:00 2001 From: Caroline Girard Date: Thu, 21 Mar 2019 13:32:08 +0100 Subject: [PATCH] responsive du site --- Gemfile.lock | 2 +- app/assets/stylesheets/public.scss | 334 +++++++++++++++++--- app/views/layouts/public.html.haml | 130 ++++---- app/views/public/shared/_menu_top.html.haml | 12 + 4 files changed, 367 insertions(+), 111 deletions(-) create mode 100644 app/views/public/shared/_menu_top.html.haml diff --git a/Gemfile.lock b/Gemfile.lock index b206604..95a241a 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -356,4 +356,4 @@ DEPENDENCIES wicked_pdf BUNDLED WITH - 1.16.1 + 1.17.3 diff --git a/app/assets/stylesheets/public.scss b/app/assets/stylesheets/public.scss index b7ccf9d..8e38157 100644 --- a/app/assets/stylesheets/public.scss +++ b/app/assets/stylesheets/public.scss @@ -51,15 +51,15 @@ body{ .bx-wrapper{ margin:0; } - + .bx-controls{ position:absolute; bottom:40px; left:0; right:0; - + } - + .slide{ .link_overlay{ position:absolute; @@ -75,14 +75,14 @@ body{ right:50px; background:rgba(255,255,255,0.85); width:590px; - + } .logo{ position:absolute; top:30px; left:30px; width:135px; - + } .content{ text-decoration:none; @@ -90,10 +90,10 @@ body{ padding-bottom:50px; color:black; font-size:1em; - + } - - + + } } @@ -131,8 +131,8 @@ h1{ margin-top:0; text-transform:uppercase; font-weight:500; - - + + } #main_content{ @@ -163,14 +163,14 @@ h1{ h2{ color:white; } - + fieldset{ border:0; padding:0; margin:0; - + } - + table{ width:600px !important; max-width:100%; @@ -179,15 +179,15 @@ h1{ padding-bottom:12px; } } - + input, textarea{ box-sizing:border-box; padding:12px 15px; font-size:1em; width:100%; border:0; - - + + } .error{ color:red; @@ -198,9 +198,9 @@ h1{ text-align:right; padding:14px 0; padding-top:0px; - + } - + .btn{ border-color:white !important; color:white; @@ -224,7 +224,7 @@ h1{ padding:0; margin:0; } - + #place,#contacts{ display:inline-block; padding:25px 0; @@ -232,15 +232,16 @@ h1{ color:rgba(0,0,0,0.6); line-height:19px; text-align:left; - + } #contacts{ padding-right:50px; + left: 0px !important; } #place{ padding-right:35px; } - + #logos{ padding:15px 0; float:left; @@ -253,24 +254,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{ @@ -278,7 +279,7 @@ h1{ float:left; width:260px; background:center center no-repeat; - + } .description{ margin-left:280px; @@ -287,7 +288,7 @@ h1{ } h2{ background:no-repeat bottom left; - + background-image:url('/bottom-lines.png'); background-size: 225px; padding-top:20px; @@ -296,8 +297,8 @@ h2{ margin-top:0; text-transform:uppercase; font-weight:500; - - + + } @@ -316,21 +317,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; @@ -339,7 +340,7 @@ h2{ font-size:0.8em; opacity:0.7; padding-right:10px; - + } .menu{ padding:5px 0; @@ -349,7 +350,7 @@ h2{ font-weight:500; font-size:1.2em; text-transform:uppercase; - + } .devis{ background:#f2930d; @@ -361,7 +362,7 @@ h2{ color:black; text-decoration:none; font-size:1.2em; - + .color{ height:1em; width:5px; @@ -369,13 +370,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; @@ -386,14 +387,14 @@ h2{ padding-bottom:30px; } #products{ - + a{ text-decoration:none; } h2{ background-position:center bottom; text-align:center; - + } text-align:center; img{ @@ -429,10 +430,251 @@ h2{ box-sizing: border-box; &:hover{ opacity:0.8; - + } } } +// 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 { + + } +} diff --git a/app/views/layouts/public.html.haml b/app/views/layouts/public.html.haml index 79e74e6..3facec7 100644 --- a/app/views/layouts/public.html.haml +++ b/app/views/layouts/public.html.haml @@ -36,46 +36,46 @@ - + %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 '' =raw '' - + =raw '' - - - - + + + + =raw '' - - - - + + + + -@img_size = FastImage.size('http://payresas.fr'+@facebook_img.to_s) - + -if @img_size and @img_size.size > 0 =raw '' =raw '' - + = javascript_include_tag "public" - - = csrf_meta_tag + + = csrf_meta_tag =render :partial => "public/shared/ga" - + = stylesheet_link_tag 'public', :media => :all - + =javascript_include_tag "https://maps.googleapis.com/maps/api/js?libraries=places,geometry&sensor=false" - - - + + + %body -if !current_admin @@ -85,7 +85,7 @@ #actus .center %h2 - Notre nouveau site sera en ligne + Notre nouveau site sera en ligne %strong dans quelques jours .clear %br @@ -94,17 +94,19 @@ =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" .menu =render :partial => "public/shared/first_menu" - - - - + + + + .slide_home.slider -@home_slider = HomeSlider.find_by_slug("home") @@ -117,35 +119,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(){ @@ -155,19 +157,19 @@ prevText: '<' }); }); - + -else .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" - + -if @menu_item and @menu_item.id == 1 - + #main=yield -else #main_content=yield @@ -177,11 +179,11 @@ #left_actus %h2 Actualités agricoles - - + + -@articles_rss[0..3].each do |article| - - + + %div{:class => "actu"} @@ -192,22 +194,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"} @@ -216,13 +218,13 @@ ="-" = article['title'] .clear - - + + #footer .center %h2 Nous contacter - + -@contact = @contact || Contact.new(:provenance_id => 2) .contact_form.contact_militer#form @@ -233,16 +235,16 @@ #logos =link_to "https://etschaix.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 ETS CHAIX @@ -251,21 +253,21 @@ %br 05000 GAP #contacts - + %p =ic :phone 04 92 51 35 05 %br =ic :fax - 04 92 53 42 89 + 04 92 53 42 89 %br =link_to "mailto:contact@etschaix.fr" do =ic :"envelope-o" contact@etschaix.fr - + .clear - - + + :javascript resize() - + diff --git a/app/views/public/shared/_menu_top.html.haml b/app/views/public/shared/_menu_top.html.haml new file mode 100644 index 0000000..6bb87c6 --- /dev/null +++ b/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"