nicolas/chaix_app
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

responsive du site

Browse Source
This commit is contained in:
Caroline Girard 2019-03-21 13:32:08 +01:00
parent 7135bd55aa
commit 204ceceaf1
4 changed files with 367 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Gemfile.lock
View File

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

334
app/assets/stylesheets/public.scss
View File

@ -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 {
}
}

130
app/views/layouts/public.html.haml
View File

@ -36,46 +36,46 @@
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">
%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 '<meta property="og:image" content="http://payresas.fr'+@facebook_img.to_s+'"/>'
=raw '<link rel="image_src" href="http://payresas.fr'+@facebook_img.to_s+'"/>'
=raw '<meta name="twitter:card" content="summary_large_image">'
=raw '<meta property="twitter:image" content="http://payresas.fr'+@facebook_img.to_s+'"/>'
-@img_size = FastImage.size('http://payresas.fr'+@facebook_img.to_s)
-if @img_size and @img_size.size > 0
=raw '<meta property="og:image:width" content="'+@img_size[0].to_s+'"/>'
=raw '<meta property="og:image:height" content="'+@img_size[1].to_s+'"/>'
= javascript_include_tag "public"
= csrf_meta_tag
= csrf_meta_tag
=render :partial => "public/shared/ga"
= stylesheet_link_tag 'public', :media => :all
<link href="https://fonts.googleapis.com/css?family=Galada|Lato:400,900|Roboto+Slab:400,700" rel="stylesheet">
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
=javascript_include_tag "https://maps.googleapis.com/maps/api/js?libraries=places,geometry&amp;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()

12
app/views/public/shared/_menu_top.html.haml Normal file
View File

@ -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"