From f90e02162b858af119616265f36ad2e252ccf04e Mon Sep 17 00:00:00 2001
From: Jordan Vidrine <30537603+jordanvidrine@users.noreply.github.com>
Date: Thu, 30 Jul 2020 10:25:28 -0500
Subject: [PATCH] UI: Styling for Published Page (#10335)

* UI: Styling for Published Page

Styling to look more visually connected to Discourse
---
 app/assets/stylesheets/publish.scss           | 44 ++++++++++++++++---
 app/controllers/published_pages_controller.rb |  3 ++
 app/views/published_pages/show.html.erb       | 20 ++++++---
 3 files changed, 55 insertions(+), 12 deletions(-)

diff --git a/app/assets/stylesheets/publish.scss b/app/assets/stylesheets/publish.scss
index f06ff9881ae..8808167d4e3 100644
--- a/app/assets/stylesheets/publish.scss
+++ b/app/assets/stylesheets/publish.scss
@@ -1,17 +1,47 @@
 @import "common";
 
-.published-page-wrapper {
+.published-page-content-wrapper {
   margin: 2em auto;
   max-width: 800px;
 }
 
+.pp-header {
+  width: 100%;
+  top: 0;
+  z-index: z("header");
+  background-color: $secondary;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.25);
+  position: sticky;
+  top: 0;
+  .pp-header-wrapper {
+    width: 925px;
+    display: flex;
+    margin: 0em auto;
+    padding: 0.5em 0;
+    align-items: center;
+    .pp-logo {
+      height: 45px;
+      margin-right: 1em;
+      line-height: 1em;
+    }
+    .pp-title {
+      color: $header_primary;
+      font-size: 3em;
+      margin: 0;
+      max-height: 1.25em;
+    }
+  }
+}
+
 .published-page {
   background-color: $secondary;
   color: $primary;
-}
 
-.published-page-title {
-  color: $header_primary;
+  blockquote {
+    margin-left: 0;
+    margin-right: 0;
+    padding: 12px;
+  }
 }
 
 .published-page-author {
@@ -21,12 +51,16 @@
 
   .avatar {
     margin-right: 1em;
+    height: 45px;
+    width: 45px;
+    border: 4px solid rgba($tertiary, 0.75);
   }
   .topic-created-at {
     color: $primary-medium;
   }
 }
 
-.published-page-body {
+.published-page-content-body {
   font-size: 1.25em;
+  padding-bottom: 2em;
 }
diff --git a/app/controllers/published_pages_controller.rb b/app/controllers/published_pages_controller.rb
index f61a0b00b2b..4ce11777097 100644
--- a/app/controllers/published_pages_controller.rb
+++ b/app/controllers/published_pages_controller.rb
@@ -31,6 +31,9 @@ class PublishedPagesController < ApplicationController
 
     @topic = pp.topic
     @canonical_url = @topic.url
+    @logo = SiteSetting.logo_small
+    @site_url = Discourse.base_url
+    @border_color = "#" + ColorScheme.base_colors["tertiary"]
 
     @body_classes = Set.new([
       'published-page',
diff --git a/app/views/published_pages/show.html.erb b/app/views/published_pages/show.html.erb
index f57fb078be7..962240f08a4 100644
--- a/app/views/published_pages/show.html.erb
+++ b/app/views/published_pages/show.html.erb
@@ -1,9 +1,15 @@
-<div class="published-page-wrapper">
-  <div class="published-page-header">
-    <h1 class="published-page-title"><%= @topic.title %></h1>
-
+<div class="pp-header">
+    <div class="pp-header-wrapper">
+      <a href="<%= @site_url %>">
+        <img class="pp-logo" src="<%=@logo.url%>"/>
+      </a>
+      <h1 class="pp-title"><%= @topic.title %></h1>
+    </div>
+  </div>
+<div class="published-page-content-wrapper">
+  <div class="published-page-content-header">
     <div class="published-page-author">
-      <img width="45" height="45" src="<%= @topic.user.avatar_template.gsub('{size}', '90') %>" class="avatar">
+      <img class="avatar" src="<%= @topic.user.avatar_template.gsub('{size}', '90') %>">
       <div class="published-page-author-details">
         <div class="username"><%= @topic.user.username %></div>
         <div class="topic-created-at"><%= short_date(@topic.created_at) %></div>
@@ -11,8 +17,8 @@
     </div>
   </div>
   <%- if @topic.first_post.present? %>
-    <div class="published-page-body">
+    <div class="published-page-content-body">
       <%= @topic.first_post.cooked.html_safe %>
     </div>
   <%- end -%>
-</div>
+</div>
\ No newline at end of file