From 13c54f4b194c829b2d2dcce0b42319bed926be40 Mon Sep 17 00:00:00 2001 From: Caroline Girard Date: Tue, 19 Mar 2019 16:39:48 +0100 Subject: [PATCH] version responsive --- Gemfile.lock | 2 +- app/assets/stylesheets/public.scss | 300 +++++++++++++++--- app/views/layouts/public.html.haml | 139 ++++---- app/views/public/shared/_first_menu.html.haml | 2 +- app/views/public/shared/_home.html.haml | 108 +++---- app/views/public/shared/_menu_top.html.haml | 14 + 6 files changed, 391 insertions(+), 174 deletions(-) create mode 100644 app/views/public/shared/_menu_top.html.haml diff --git a/Gemfile.lock b/Gemfile.lock index 6fc4c37..b206604 100644 --- a/Gemfile.lock +++ b/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) diff --git a/app/assets/stylesheets/public.scss b/app/assets/stylesheets/public.scss index 7e829e7..b7dc27b 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,7 +232,7 @@ h1{ color:rgba(0,0,0,0.6); line-height:19px; text-align:left; - + } #contacts{ padding-right:50px; @@ -240,7 +240,7 @@ h1{ #place{ padding-right:35px; } - + #logos{ padding:15px 0; float:left; @@ -253,24 +253,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 +278,7 @@ h1{ float:left; width:260px; background:center center no-repeat; - + } .description{ margin-left:280px; @@ -287,7 +287,7 @@ h1{ } h2{ background:no-repeat bottom left; - + background-image:url('/bottom-lines.png'); background-size: 225px; padding-top:20px; @@ -296,8 +296,8 @@ h2{ margin-top:0; text-transform:uppercase; font-weight:500; - - + + } @@ -316,21 +316,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 +339,7 @@ h2{ font-size:0.8em; opacity:0.7; padding-right:10px; - + } .menu{ padding:5px 0; @@ -349,7 +349,7 @@ h2{ font-weight:500; font-size:1.2em; text-transform:uppercase; - + } .devis{ background:#f2930d; @@ -361,7 +361,7 @@ h2{ color:black; text-decoration:none; font-size:1.2em; - + .color{ height:1em; width:5px; @@ -369,13 +369,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 +386,14 @@ h2{ padding-bottom:30px; } #products{ - + a{ text-decoration:none; } h2{ background-position:center bottom; text-align:center; - + } text-align:center; img{ @@ -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; + } +} diff --git a/app/views/layouts/public.html.haml b/app/views/layouts/public.html.haml index f664cb8..16bddd8 100644 --- a/app/views/layouts/public.html.haml +++ b/app/views/layouts/public.html.haml @@ -36,62 +36,58 @@ - + %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 - =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" + + + .slide_home.slider -@home_slider = HomeSlider.find_by_slug("home") @@ -104,35 +100,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 +138,16 @@ 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" - + + + =render :partial => "public/shared/menu_top" + + -if @menu_item and @menu_item.id == 1 - + #main=yield -else #main_content=yield @@ -164,11 +157,11 @@ #left_actus %h2 Actualité - - + + -@articles_rss.each do |article| - - + + %div{:class => "actu"} @@ -179,22 +172,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 +196,13 @@ ="-" = article['title'] .clear - - + + #footer .center %h2 Nous contacter - + -@contact = @contact || Contact.new(:provenance_id => 2) .contact_form.contact_militer#form @@ -220,16 +213,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 SAS PAYRE @@ -238,7 +231,7 @@ %br 38430 MOIRANS #contacts - + %p =ic :phone 04 76 35 31 69 @@ -249,10 +242,10 @@ =link_to "mailto:contact@ets-payre.fr" do =ic :"envelope-o" contact@ets-payre.fr - + .clear - - + + :javascript resize() - + diff --git a/app/views/public/shared/_first_menu.html.haml b/app/views/public/shared/_first_menu.html.haml index cb24e20..829f5c4 100644 --- a/app/views/public/shared/_first_menu.html.haml +++ b/app/views/public/shared/_first_menu.html.haml @@ -1,4 +1,4 @@ -MenuItem.where(:parent_id => nil, :menu_id => 1).order(:position).each do |menu_item| =menu_item_link(menu_item) - + diff --git a/app/views/public/shared/_home.html.haml b/app/views/public/shared/_home.html.haml index 9358661..c69088e 100644 --- a/app/views/public/shared/_home.html.haml +++ b/app/views/public/shared/_home.html.haml @@ -13,7 +13,7 @@ -if home_slider_slide.image_file =link_to home_slider_slide.url.to_s, :target => ("_blank" if home_slider_slide.popup) do %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.28}} - + .description.vertical_center %h3 -if home_slider_slide.article @@ -21,31 +21,31 @@ =lang_article.title -else =home_slider_slide.titre1 - + -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) .date =home_slider_slide.description1 - + .btn =home_slider_slide.cta_text - - - - - + + + + + :javascript $(document).ready(function(){ @@ -54,7 +54,7 @@ prevText: '<' }); }); - + @@ -74,20 +74,20 @@ .angle{:onclick => ""} =ic :"angle-right" .slider_breve - - + + -@home_slides_simu.each do |home_slider_slide| - + =link_to home_slider_slide.url.to_s, :target => ("_blank" if home_slider_slide.popup) do - + .inner .description %h3.bclamp{:style => ""}=home_slider_slide.titre1 - - - - - + + + + + -@articles = Article.before(Time.now).recents.joins(:lang_articles).where("lang_articles.enabled = 1 and lang_articles.lang_site_id = ?", @lang.id).limit(6) @@ -103,36 +103,36 @@ -img_url = "https://payreagri.quartz.xyz"+article.image_file.file.large.medium.url -else -img_url = "" - + .desktop_inline .home_article_header .img.with_ratio{:style => "background: black center center;background-image:url('#{img_url}');position:relative;background-size:cover;", :data => {:ratio => 0.62}} .description - + %h2= lang_article.title - + .date %hr =l article.published_at, :format => "%d/%m/%Y" %span.sep ="|" =l article.published_at, :format => "%H:%M" - + .cat -cats = [] -article.categories.uniq.each do |cat| -cats << link_to(cat.lang(I18n.locale.to_s).name, category_public_article_path(:lang => @lang.slug,:slug => cat.lang(I18n.locale.to_s).slug), :title => "Articles de la catégorie \""+cat.lang(I18n.locale.to_s).name.to_s+'"') =raw cats.join(", ") - - + + =simple_format lang_article.description.truncate(160, separator: ' ') .cta - =link_to qit("Lire l'article"), article_path(:slug => lang_article.slug, :lang => @lang.slug), :class => "btn" + =link_to qit("Lire l'article"), article_path(:slug => lang_article.slug, :lang => @lang.slug), :class => "btn" .clear - + .row.home_article_sub_headers .mobile_inline -@articles[0..0].each do |article| @@ -152,26 +152,26 @@ =link_to article_path(:slug => lang_article.slug, :lang => @lang.slug) do %h2= lang_article.title .description - + =link_to article_path(:slug => lang_article.slug, :lang => @lang.slug) do - + .date - + =l article.published_at, :format => "%d/%m/%Y" %span.sep ="|" =l article.published_at, :format => "%H:%M" - + .cat -cats = [] -article.categories.uniq.each do |cat| -cats << link_to(cat.lang(I18n.locale.to_s).name, category_public_article_path(:lang => @lang.slug,:slug => cat.lang(I18n.locale.to_s).slug), :title => "Articles de la catégorie \""+cat.lang(I18n.locale.to_s).name.to_s+'"') =raw cats.join(", ") - + =link_to article_path(:slug => lang_article.slug, :lang => @lang.slug) do =simple_format lang_article.description.truncate(160, separator: ' ') - + -@articles[1..2].each do |article| -lang_article = article.lang_articles.find_by_lang_site_id(@lang.id) -img_url = "" @@ -189,17 +189,17 @@ =link_to article_path(:slug => lang_article.slug, :lang => @lang.slug) do %h2= lang_article.title .description - + =link_to article_path(:slug => lang_article.slug, :lang => @lang.slug) do - + .date - + =l article.published_at, :format => "%d/%m/%Y" %span.sep ="|" =l article.published_at, :format => "%H:%M" - + .cat -cats = [] -article.categories.uniq.each do |cat| @@ -207,13 +207,13 @@ =raw cats.join(", ") =link_to article_path(:slug => lang_article.slug, :lang => @lang.slug) do =simple_format lang_article.description.truncate(160, separator: ' ') - - + + .columns.span_4.last-child =link_to "/#{I18n.locale.to_s}/blog.html" do .blog_encart =image_tag "/logo_blog.png" - + %h3 Blog .home_article_more =link_to "/#{I18n.locale.to_s}/blog.html" do @@ -226,15 +226,15 @@ %span.sep > .clear - - + + -@menu_item_combat = MenuItem.find(260) -if @lang.slug == "fr" .home_nos_combats %h1= @menu_item_combat.menu_content.lang_pages.find_by_lang_site_id(@lang.id).title %p.desc = @menu_item_combat.menu_content.lang_pages.find_by_lang_site_id(@lang.id).description - + .inner_combats -i = 0 -MenuItem.where(:parent_id => @menu_item_combat.id).order(:position).each do |menu_item| @@ -244,13 +244,13 @@ -name = menu_item_lang.name - + -img_url = "" -if menu_item.image_file - - -img_url = menu_item.image_file.file.large.medium.url + + -img_url = menu_item.image_file.file.large.medium.url -if menu_item.image_file and menu_item.image_file.photograph -@page_images_credits << menu_item.image_file.photograph @@ -259,20 +259,20 @@ -css_style = "background-image:url('#{img_url}');background-size:100%;background-size:cover;background-position:center center;background-color:black;" - - - + + + -if menu_item_lang.enabled == true and menu_item_lang.visible == true -if i <= 6 =link_to @one_voice_host.to_s+menu_item_path(:url => menu_item_lang.url, :lang => @lang.slug) ,:style => css_style, :class => "square_link "+("active" if menu_item.id == @menu_item.id).to_s do .inner .vertical_center=menu_item.menu_item_langs.find_by_lang_site_id(@lang.id).name - + -else =link_to @one_voice_host.to_s+menu_item_path(:url => menu_item_lang.url, :lang => @lang.slug) ,:class => "line_combat_link "+("active" if menu_item.id == @menu_item.id).to_s do .right > - + =menu_item.menu_item_langs.find_by_lang_site_id(@lang.id).name - - \ No newline at end of file + + 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..0b153f6 --- /dev/null +++ b/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" +