page responsive avec les medias queries
This commit is contained in:
Caroline Girard
parent
9795111ce4
commit
f0568d3dec
@ -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)
|
||||
|
||||
@ -41,6 +41,10 @@ body{
|
||||
a{
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
img {
|
||||
display: none;
|
||||
}
|
||||
#cinquante{
|
||||
position:absolute;
|
||||
bottom:0px;
|
||||
@ -51,15 +55,15 @@ body{
|
||||
.bx-wrapper{
|
||||
margin:0;
|
||||
}
|
||||
|
||||
|
||||
.bx-controls{
|
||||
position:absolute;
|
||||
bottom:40px;
|
||||
left:0;
|
||||
right:0;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
.slide{
|
||||
.link_overlay{
|
||||
position:absolute;
|
||||
@ -75,14 +79,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 +94,10 @@ body{
|
||||
padding-bottom:50px;
|
||||
color:black;
|
||||
font-size:1em;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -131,8 +135,8 @@ h1{
|
||||
margin-top:0;
|
||||
text-transform:uppercase;
|
||||
font-weight:500;
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
#main_content{
|
||||
@ -163,14 +167,14 @@ h1{
|
||||
h2{
|
||||
color:white;
|
||||
}
|
||||
|
||||
|
||||
fieldset{
|
||||
border:0;
|
||||
padding:0;
|
||||
margin:0;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
table{
|
||||
width:600px !important;
|
||||
max-width:100%;
|
||||
@ -179,15 +183,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 +202,9 @@ h1{
|
||||
text-align:right;
|
||||
padding:14px 0;
|
||||
padding-top:0px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
.btn{
|
||||
border-color:white !important;
|
||||
color:white;
|
||||
@ -224,7 +228,7 @@ h1{
|
||||
padding:0;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
|
||||
#place,#contacts{
|
||||
display:inline-block;
|
||||
padding:25px 0;
|
||||
@ -232,7 +236,7 @@ h1{
|
||||
color:rgba(0,0,0,0.6);
|
||||
line-height:19px;
|
||||
text-align:left;
|
||||
|
||||
|
||||
}
|
||||
#contacts{
|
||||
padding-right:50px;
|
||||
@ -240,7 +244,7 @@ h1{
|
||||
#place{
|
||||
padding-right:35px;
|
||||
}
|
||||
|
||||
|
||||
#logos{
|
||||
padding:15px 0;
|
||||
float:left;
|
||||
@ -253,24 +257,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 +282,7 @@ h1{
|
||||
float:left;
|
||||
width:260px;
|
||||
background:center center no-repeat;
|
||||
|
||||
|
||||
}
|
||||
.description{
|
||||
margin-left:280px;
|
||||
@ -287,7 +291,7 @@ h1{
|
||||
}
|
||||
h2{
|
||||
background:no-repeat bottom left;
|
||||
|
||||
|
||||
background-image:url('/bottom-lines.png');
|
||||
background-size: 225px;
|
||||
padding-top:20px;
|
||||
@ -296,8 +300,8 @@ h2{
|
||||
margin-top:0;
|
||||
text-transform:uppercase;
|
||||
font-weight:500;
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -306,7 +310,7 @@ h2{
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
height:190px;
|
||||
height: 15%;
|
||||
z-index:3;
|
||||
}
|
||||
|
||||
@ -316,21 +320,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 +343,7 @@ h2{
|
||||
font-size:0.8em;
|
||||
opacity:0.7;
|
||||
padding-right:10px;
|
||||
|
||||
|
||||
}
|
||||
.menu{
|
||||
padding:5px 0;
|
||||
@ -349,7 +353,7 @@ h2{
|
||||
font-weight:500;
|
||||
font-size:1.2em;
|
||||
text-transform:uppercase;
|
||||
|
||||
|
||||
}
|
||||
.devis{
|
||||
background:#f2930d;
|
||||
@ -361,7 +365,7 @@ h2{
|
||||
color:black;
|
||||
text-decoration:none;
|
||||
font-size:1.2em;
|
||||
|
||||
|
||||
.color{
|
||||
height:1em;
|
||||
width:5px;
|
||||
@ -369,13 +373,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 +390,14 @@ h2{
|
||||
padding-bottom:30px;
|
||||
}
|
||||
#products{
|
||||
|
||||
|
||||
a{
|
||||
text-decoration:none;
|
||||
}
|
||||
h2{
|
||||
background-position:center bottom;
|
||||
text-align:center;
|
||||
|
||||
|
||||
}
|
||||
text-align:center;
|
||||
img{
|
||||
@ -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 {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -36,62 +36,63 @@
|
||||
<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&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")
|
||||
|
||||
=render :partial => "public/shared/menu_top"
|
||||
|
||||
#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")
|
||||
@ -104,35 +105,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 +143,21 @@
|
||||
prevText: '<'
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
-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
|
||||
=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
|
||||
@ -164,11 +167,11 @@
|
||||
#left_actus
|
||||
%h2
|
||||
Actualité
|
||||
|
||||
|
||||
|
||||
|
||||
-@articles_rss.each do |article|
|
||||
|
||||
|
||||
|
||||
|
||||
%div{:class => "actu"}
|
||||
|
||||
|
||||
@ -179,22 +182,22 @@
|
||||
|
||||
.description
|
||||
%h3= article['title']
|
||||
|
||||
|
||||
=simple_format article["description"]
|
||||
|
||||
|
||||
.cta
|
||||
=link_to "http://payresas.quartz.xyz"+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 "http://payresas.quartz.xyz"+article["url"].to_s, :target => "_blank", :style => "text-decoration:none;" do
|
||||
%div{:class =>"breve"}
|
||||
@ -203,13 +206,13 @@
|
||||
="-"
|
||||
= article['title']
|
||||
.clear
|
||||
|
||||
|
||||
|
||||
|
||||
#footer
|
||||
.center
|
||||
%h2
|
||||
Nous contacter
|
||||
|
||||
|
||||
-@contact = @contact || Contact.new(:provenance_id => 4)
|
||||
|
||||
.contact_form.contact_militer#form
|
||||
@ -220,17 +223,17 @@
|
||||
#logos
|
||||
=link_to "http://payreagri.quartz.xyz", :target => "_blank" do
|
||||
=image_tag "/payre-agriculture.png"
|
||||
|
||||
|
||||
=link_to "http://payre3p.quartz.xyz", :target => "_blank" do
|
||||
=image_tag "/payre-energies.png"
|
||||
|
||||
|
||||
=link_to "http://payrepmc.quartz.xyz", :target => "_blank" do
|
||||
=image_tag "/payre-maintenance.png"
|
||||
|
||||
|
||||
=link_to "http://payrejardinerie.fr/", :target => "_blank" do
|
||||
=image_tag "/payre-jardinerie.png"
|
||||
|
||||
|
||||
|
||||
|
||||
#place
|
||||
%p
|
||||
PAYRE MAINTENANCE CHAUDIERES
|
||||
@ -239,7 +242,7 @@
|
||||
%br
|
||||
38430 MOIRANS
|
||||
#contacts
|
||||
|
||||
|
||||
%p
|
||||
=ic :phone
|
||||
04 76 35 31 69
|
||||
@ -250,10 +253,10 @@
|
||||
=link_to "mailto:contact@ets-payre.fr" do
|
||||
=ic :"envelope-o"
|
||||
contact@ets-payre.fr
|
||||
|
||||
|
||||
.clear
|
||||
|
||||
|
||||
|
||||
|
||||
:javascript
|
||||
resize()
|
||||
|
||||
|
||||
|
||||
12
app/views/public/shared/_menu_top.html.haml
Normal file
12
app/views/public/shared/_menu_top.html.haml
Normal 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"
|
||||
Loading…
x
Reference in New Issue
Block a user