Merge pull request #2972 from consul/dashboard-pdf

Dashboard PDF

app/assets/stylesheets/application.scss

@@ -7,7 +7,6 @@
 @import 'layout';
 @import 'participation';
 @import 'pages';
-@import 'dashboard_poster_pdf';
 @import 'dashboard';
 @import 'legislation';
 @import 'legislation_process';

app/assets/stylesheets/dashboard.scss

@@ -10,6 +10,7 @@
 // 08. Polls
 // 09. Email preview
 // 10. Poster preview
+// 11. Poster PDF
 //
 
 // 01. Dashboard global
@@ -440,41 +441,72 @@
 }
 
 // 10. Poster preview
-// --------------------
+// ------------------
 
 .dashboard-poster-preview {
 
   .poster-header {
-    background-color: $brand;
+    background: $brand;
     color: #fff;
-    padding: $line-height * 2;
+    padding: $line-height * 2 $line-height $line-height * 6;
+
+    h1 {
+      color: #fff;
+      font-size: rem-calc(80);
+      line-height: rem-calc(80);
+    }
 
     p {
       font-size: rem-calc(24);
     }
 
     .intro {
-      margin: $line-height * 2;
+      margin: $line-height * 2 auto;
+      max-width: 60%;
       text-align: justify;
     }
+  }
 
-    .image-caption {
-      color: #fff;
-      font-size: rem-calc(20);
-      font-weight: bold;
-      margin-bottom: 0;
-      text-align: center;
+  .proposal-image {
+    margin: 0 auto;
+    max-width: 80%;
+    position: relative;
+
+    &::before {
+      background: #ff9e00;
+      content: '';
+      height: rem-calc(120);
+      left: -36px;
+      position: absolute;
+      top: -180px;
+      width: rem-calc(120);
     }
 
-    .proposal-image {
+    img {
+      box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
+      margin-top: rem-calc(-144);
+      position: relative;
       width: 100%;
     }
   }
 
-  .proposal-title {
+  h2 {
+    color: $text-medium;
+    margin: $line-height 0;
+    margin-left: 10%;
+    text-align: left;
+  }
+
+  h3 {
     color: $brand;
-    font-size: rem-calc(40);
+    font-size: rem-calc(50);
     margin-bottom: $line-height * 2;
+
+    .title-quote {
+      display: inline-block;
+      top: rem-calc(-12);
+      vertical-align: baseline;
+    }
   }
 
   .poster-footer {
@@ -485,3 +517,94 @@
     width: 50%;
   }
 }
+
+// 11. Poster PDF
+// --------------
+
+.dashboard-poster-pdf {
+
+  .poster-header {
+    background: $brand;
+    color: #fff;
+    padding: rem-calc(320) rem-calc(160) rem-calc(640);
+    text-align: center;
+
+    h1 {
+      color: #fff;
+      font-size: rem-calc(250);
+      line-height: rem-calc(250);
+      text-align: left;
+    }
+
+    p {
+      font-size: rem-calc(80);
+      line-height: rem-calc(80);
+
+      &.intro {
+        margin: rem-calc(160) auto;
+        max-width: 60%;
+        text-align: justify;
+      }
+    }
+  }
+
+  .proposal-image {
+    margin: 0 auto;
+    max-width: rem-calc(2000);
+    position: relative;
+
+    &::before {
+      background: #ff9e00;
+      content: '';
+      height: rem-calc(400);
+      left: -120px;
+      position: absolute;
+      top: -720px;
+      width: rem-calc(400);
+    }
+
+    img {
+      box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
+      margin-top: rem-calc(-600);
+      position: relative;
+      width: 100%;
+    }
+  }
+
+  .poster-content {
+    margin: 0 auto;
+    max-width: rem-calc(2000);
+  }
+
+  h2 {
+    color: $text-medium;
+    font-size: rem-calc(80);
+    margin-top: rem-calc(80);
+  }
+
+  h3 {
+    color: $brand;
+    font-size: rem-calc(200);
+    line-height: rem-calc(240);
+    margin: rem-calc(80) 0;
+    position: relative;
+    width: 90%;
+
+    .title-quote {
+      display: inline-block;
+      top: rem-calc(-40);
+      vertical-align: baseline;
+    }
+  }
+
+  .poster-footer {
+    border-left: 10px solid $border;
+    color: $text-medium;
+    font-size: rem-calc(60);
+    line-height: rem-calc(60);
+    margin: 0 auto;
+    max-width: 60%;
+    padding-left: rem-calc(40);
+    width: 100%;
+  }
+}

app/assets/stylesheets/dashboard_poster_pdf.scss

@@ -1,81 +0,0 @@
-.dashboard-poster-pdf {
-
-  .header {
-    background-color: #3700fd;
-    color: #fff;
-    padding: 40pt 40pt 80pt;
-    margin-bottom: 0;
-    border-bottom: 0;
-
-    h1 {
-      font-size: 40pt;
-      color: #dcf5fe;
-    }
-
-    h2 {
-      font-size: 40pt;
-    }
-
-    p {
-      text-align: justify;
-      width: 60%;
-      margin-left: auto;
-      margin-right: auto;
-      margin-top: 40pt;
-      font-size: 18pt;
-    }
-
-    .image-caption {
-      margin-bottom: 0;
-      text-align: center;
-      color: #fff;
-      font-weight: bold;
-      font-size: 18pt;
-    }
-  }
-
-  .proposal-image {
-    display: block;
-    margin-top: -75pt;
-    margin-bottom: 40pt;
-
-    img {
-      display: block;
-      margin-left: auto;
-      margin-right: auto;
-    }
-  }
-
-  h3 {
-    display: block;
-    width: 60%;
-    margin-left: auto;
-    margin-right: auto;
-    font-size: 18pt;
-    font-weight: bold;
-    color: #505050;
-  }
-
-  .proposal-title {
-    display: block;
-    font-size: 40pt;
-    font-weight: bold;
-    text-align: left;
-    margin-left: auto;
-    margin-right: auto;
-    color: #3800ff;
-    width: 60%;
-    margin-bottom: 40pt;
-  }
-
-  .poster-footer {
-    font-size: 15pt;
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-    width: 50%;
-    padding-left: 10pt;
-    border-left: 1pt solid #a9a9a9;
-    text-align: left;
-  }
-}