Adds styles to dashboard poster
This commit is contained in:
decabeza
@@ -10,6 +10,7 @@
|
||||
// 08. Polls
|
||||
// 09. Email preview
|
||||
// 10. Poster preview
|
||||
// 11. Poster PDF
|
||||
//
|
||||
|
||||
// 01. Dashboard global
|
||||
@@ -436,41 +437,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);
|
||||
}
|
||||
|
||||
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 {
|
||||
@@ -481,3 +513,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%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,27 +1,37 @@
|
||||
<% content_for :action_title, t("dashboard.poster.index.title") %>
|
||||
<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">
|
||||
<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="text-center">
|
||||
<strong><%= t("dashboard.poster.index.proposal_code", code: proposal.code) %></strong>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="proposal-image">
|
||||
<% if proposal.image.present? %>
|
||||
<%= image_tag proposal.image.attachment.url(:large) %>
|
||||
<% else %>
|
||||
<%= 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 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>
|
||||
|
||||
<%= render 'poster_options' %>
|
||||
</div>
|
||||
|
||||
@@ -6,26 +6,36 @@
|
||||
<%= wicked_pdf_stylesheet_link_tag 'application' -%>
|
||||
<%= wicked_pdf_stylesheet_link_tag 'pdf_fonts' -%>
|
||||
</head>
|
||||
<body>
|
||||
<div class="row">
|
||||
<div class="small-12 medium-9 column dashboard-poster-pdf">
|
||||
<div class="header">
|
||||
<h1><%= t("dashboard.poster.index.poster_title_html") %></h1>
|
||||
<p><%= t("dashboard.poster.index.intro_text") %></p>
|
||||
<p class="image-caption"><%= t("dashboard.poster.index.proposal_code", code: proposal.code) %></p>
|
||||
<body class="dashboard-poster-pdf">
|
||||
<div class="poster-header">
|
||||
<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="text-center">
|
||||
<strong><%= t("dashboard.poster.index.proposal_code", code: proposal.code) %></strong>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="proposal-image">
|
||||
<%= wicked_pdf_image_tag proposal.image.attachment.url(:large), class: 'proposal-image' if proposal.image.present? %>
|
||||
<%= wicked_pdf_image_tag 'default_mailing.jpg', class: 'proposal-image' unless proposal.image.present? %>
|
||||
<% if proposal.image.present? %>
|
||||
<%= wicked_pdf_image_tag proposal.image.attachment.url(:large) %>
|
||||
<% 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>
|
||||
|
||||
<div class="poster-footer"><%= t("dashboard.poster.index.footer") %></div>
|
||||
</div>
|
||||
<p class="poster-footer"><%= t("dashboard.poster.index.footer") %></p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user