Adds styles to dashboard poster
This commit is contained in:
decabeza
@@ -10,6 +10,7 @@
|
|||||||
// 08. Polls
|
// 08. Polls
|
||||||
// 09. Email preview
|
// 09. Email preview
|
||||||
// 10. Poster preview
|
// 10. Poster preview
|
||||||
|
// 11. Poster PDF
|
||||||
//
|
//
|
||||||
|
|
||||||
// 01. Dashboard global
|
// 01. Dashboard global
|
||||||
@@ -436,41 +437,72 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 10. Poster preview
|
// 10. Poster preview
|
||||||
// --------------------
|
// ------------------
|
||||||
|
|
||||||
.dashboard-poster-preview {
|
.dashboard-poster-preview {
|
||||||
|
|
||||||
.poster-header {
|
.poster-header {
|
||||||
background-color: $brand;
|
background: $brand;
|
||||||
color: #fff;
|
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 {
|
p {
|
||||||
font-size: rem-calc(24);
|
font-size: rem-calc(24);
|
||||||
}
|
}
|
||||||
|
|
||||||
.intro {
|
.intro {
|
||||||
margin: $line-height * 2;
|
margin: $line-height * 2 auto;
|
||||||
|
max-width: 60%;
|
||||||
text-align: justify;
|
text-align: justify;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.image-caption {
|
.proposal-image {
|
||||||
color: #fff;
|
margin: 0 auto;
|
||||||
font-size: rem-calc(20);
|
max-width: 80%;
|
||||||
font-weight: bold;
|
position: relative;
|
||||||
margin-bottom: 0;
|
|
||||||
text-align: center;
|
&::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%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.proposal-title {
|
h2 {
|
||||||
|
color: $text-medium;
|
||||||
|
margin: $line-height 0;
|
||||||
|
margin-left: 10%;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
color: $brand;
|
color: $brand;
|
||||||
font-size: rem-calc(40);
|
font-size: rem-calc(50);
|
||||||
margin-bottom: $line-height * 2;
|
margin-bottom: $line-height * 2;
|
||||||
|
|
||||||
|
.title-quote {
|
||||||
|
display: inline-block;
|
||||||
|
top: rem-calc(-12);
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.poster-footer {
|
.poster-footer {
|
||||||
@@ -481,3 +513,94 @@
|
|||||||
width: 50%;
|
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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,26 +1,36 @@
|
|||||||
<% content_for :action_title, t("dashboard.poster.index.title") %>
|
<% content_for :action_title, t("dashboard.poster.index.title") %>
|
||||||
<div class="row expanded">
|
<div class="row expanded">
|
||||||
<div class="small-12 medium-9 large-7 column dashboard-poster-preview">
|
<div class="small-12 medium-9 column dashboard-poster-preview">
|
||||||
<div class="poster-header">
|
<div class="poster-header">
|
||||||
<h1><%= t("dashboard.poster.index.poster_title_html") %></h1>
|
<h1>
|
||||||
|
<%= t("dashboard.poster.index.poster_title") %>
|
||||||
|
<br>
|
||||||
|
<%= t("dashboard.poster.index.poster_subtitle") %>
|
||||||
|
</h1>
|
||||||
<p class="intro"><%= t("dashboard.poster.index.intro_text") %></p>
|
<p class="intro"><%= t("dashboard.poster.index.intro_text") %></p>
|
||||||
<p class="text-center">
|
<p class="text-center">
|
||||||
<strong><%= t("dashboard.poster.index.proposal_code", code: proposal.code) %></strong>
|
<strong><%= t("dashboard.poster.index.proposal_code", code: proposal.code) %></strong>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<% if proposal.image.present? %>
|
<div class="proposal-image">
|
||||||
<%= image_tag proposal.image.attachment.url(:large) %>
|
<% if proposal.image.present? %>
|
||||||
<% else %>
|
<%= image_tag proposal.image.attachment.url(:large) %>
|
||||||
<%= image_tag "default_mailing.jpg" %>
|
<% else %>
|
||||||
<% end %>
|
<%= image_tag "default_mailing.jpg" %>
|
||||||
|
<% end %>
|
||||||
<div class="margin text-center">
|
|
||||||
<h2><%= t("dashboard.poster.index.support") %></h2>
|
|
||||||
<h3 class="proposal-title">"<%= proposal.title %>"</h3>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p class="poster-footer"><%= t("dashboard.poster.index.footer") %></p>
|
<div class="poster-content text-center">
|
||||||
|
<h2><%= t("dashboard.poster.index.support") %></h2>
|
||||||
|
<h3>
|
||||||
|
<span class="title-quote">"</span>
|
||||||
|
<%= proposal.title %>
|
||||||
|
<span class="title-quote">"</span>
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<p class="poster-footer"><%= t("dashboard.poster.index.footer") %></p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<%= render 'poster_options' %>
|
<%= render 'poster_options' %>
|
||||||
|
|||||||
@@ -6,26 +6,36 @@
|
|||||||
<%= wicked_pdf_stylesheet_link_tag 'application' -%>
|
<%= wicked_pdf_stylesheet_link_tag 'application' -%>
|
||||||
<%= wicked_pdf_stylesheet_link_tag 'pdf_fonts' -%>
|
<%= wicked_pdf_stylesheet_link_tag 'pdf_fonts' -%>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="dashboard-poster-pdf">
|
||||||
<div class="row">
|
<div class="poster-header">
|
||||||
<div class="small-12 medium-9 column dashboard-poster-pdf">
|
<h1>
|
||||||
<div class="header">
|
<%= t("dashboard.poster.index.poster_title") %>
|
||||||
<h1><%= t("dashboard.poster.index.poster_title_html") %></h1>
|
<br>
|
||||||
<p><%= t("dashboard.poster.index.intro_text") %></p>
|
<%= t("dashboard.poster.index.poster_subtitle") %>
|
||||||
<p class="image-caption"><%= t("dashboard.poster.index.proposal_code", code: proposal.code) %></p>
|
</h1>
|
||||||
</div>
|
<p class="intro"><%= t("dashboard.poster.index.intro_text") %></p>
|
||||||
|
<p class="text-center">
|
||||||
|
<strong><%= t("dashboard.poster.index.proposal_code", code: proposal.code) %></strong>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="proposal-image">
|
<div class="proposal-image">
|
||||||
<%= wicked_pdf_image_tag proposal.image.attachment.url(:large), class: 'proposal-image' if proposal.image.present? %>
|
<% if proposal.image.present? %>
|
||||||
<%= wicked_pdf_image_tag 'default_mailing.jpg', class: 'proposal-image' unless proposal.image.present? %>
|
<%= wicked_pdf_image_tag proposal.image.attachment.url(:large) %>
|
||||||
</div>
|
<% else %>
|
||||||
|
<%= wicked_pdf_image_tag "default_mailing.jpg" %>
|
||||||
|
<% end %>
|
||||||
|
</div>
|
||||||
|
|
||||||
<h3><%= t("dashboard.poster.index.support") %></h3>
|
<div class="poster-content">
|
||||||
|
<h2><%= t("dashboard.poster.index.support") %></h2>
|
||||||
|
<h3>
|
||||||
|
<span class="title-quote">"</span>
|
||||||
|
<%= proposal.title %>
|
||||||
|
<span class="title-quote">"</span>
|
||||||
|
</h3>
|
||||||
|
|
||||||
<div class="proposal-title">"<%= proposal.title %>"</div>
|
<p class="poster-footer"><%= t("dashboard.poster.index.footer") %></p>
|
||||||
|
|
||||||
<div class="poster-footer"><%= t("dashboard.poster.index.footer") %></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user