suite

app/assets/stylesheets/plume_print.css.scss

@@ -1,3 +1,8 @@
+$grey:#61676A;
+$marron:#9A9289;
+$vert:#7BAE53;
+$beige:#F1F0EE;
+
 body{
 
   font-weight:bold;
@@ -5,7 +10,7 @@ body{
   width:102%;
   padding:0;
   margin:0;
-  font-family:Arial;
+  font-family:Lato, serif;
 }
 
 img{
@@ -19,23 +24,46 @@ html{
   margin:0
   
 }
-
+.clear{
+  clear:both;
+}
 .page{
   display: block;
-      clear: both;
-      
-      width: 210mm;
-      min-height: 297mm;
-      page-break-after: always;
-  background:#9A9289;
+  clear: both;
+  width:786px;
+  
+  min-height: 295mm;
+  page-break-after: always;
+
   //position:relative;
   
 }
-$grey:#61676A;
-$marron:#9A9289;
-$vert:#7BAE53;
 
-  
+.page_header{
+  background:$beige;
+  padding:10px 20px;
+  padding-top:20px;
+  img{
+    width:80px;
+    
+  }
+  .right{
+    text-align:right;
+    width:400px;
+    float:right;
+    font-size:18px;
+    margin-top:-10px;
+    span{
+      position:relative;
+      top:-7px;
+    }
+  }
+  .left{
+    text-transform:uppercase;
+    font-size:25px;
+    color:$marron;
+  }
+}
   
   
   #plume_header{

app/controllers/public/plumes_controller.rb

@@ -49,6 +49,8 @@ class Public::PlumesController < ApplicationController
                   disposition:                    'inline',                 # default 'inline'
                   layout:                       false,
                   page_size: 'A4',
+                  viewport_size: '800x600',
+                  page_width: 210,
                   template: "public/plumes/print.html.haml" ,
                   margin:  {   top:               0,                     # default 10 (mm)
                               bottom:            0,

app/views/public/plumes/print.html.haml

@@ -2,8 +2,9 @@
 %html
   %head
     %meta{:charset => "utf-8"}/
-
+    %meta{:name=>"viewport", :content=>"width=device-width,initial-scale=1"}
     =# wicked_pdf_javascript_include_tag "number_pages"
+    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
     = wicked_pdf_stylesheet_link_tag 'plume_print' 
   %body{:onload => "number_pages"}
     .page
@@ -21,14 +22,21 @@
       -@plume.plume_cats.order(:position).each do |plume_cat|
         -if plume_cat.title != "Brèves"
           -plume_cat.plume_articles.each do |plume_article|
-            =debug plume_article.article_type
-            =debug i
+            
+            -if plume_article.article_type == "page" or (plume_article.article_type == "demi" and i ==0) and plume_article.plume_cat
+              .page_header
+                .right
+                  =image_tag "http://lepicvert.org/plume-header.png"
+                  %span
+                    La Plume
+                    ="N°#{@plume.number}"
+                .left= plume_article.plume_cat.title
+                .clear
+            
             -if plume_article.article_type == "page" and i == 1
               -i = 0
               =raw "</div><div class='page'>"
             
-            -if plume_article.plume_cat
-              .plume_cat= plume_article.plume_cat.title
             %h1=plume_article.title
       
             .render_block
@@ -43,6 +51,14 @@
                 -i = 0
                 =raw "</div><div class='page'>"
     .page
+      .page_header
+        .right
+          =image_tag "http://lepicvert.org/plume-header.png"
+          %span
+            La Plume
+            ="N°#{@plume.number}"
+        .left Agenda
+        .clear
       -@plume.plume_events.each do |plume_event|
         .plume_event
           %h2=plume_event.title
@@ -52,6 +68,15 @@
             =plume_event.description
 
     .page
+      .page_header
+        .right
+          =image_tag "http://lepicvert.org/plume-header.png"
+          %span
+            La Plume
+            ="N°#{@plume.number}"
+        .left Brèves
+        .clear
+    
       -@breve_cat = @plume.plume_cats.where(:title => "Brèves").first
       -if @breve_cat