Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UI: Styling for Published Page (#10335) 

* UI: Styling for Published Page

Styling to look more visually connected to Discourse
This commit is contained in:
Jordan Vidrine 2020-07-30 10:25:28 -05:00 committed by GitHub
parent 5e2e374c72
commit f90e02162b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 55 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
app/assets/stylesheets/publish.scss
View File

@ -1,17 +1,47 @@
@import "common"; @import "common";
.published-page-wrapper { .published-page-content-wrapper {
margin: 2em auto; margin: 2em auto;
max-width: 800px; 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 { .published-page {
background-color: $secondary; background-color: $secondary;
color: $primary; color: $primary;
}
.published-page-title { blockquote {
color: $header_primary; margin-left: 0;
margin-right: 0;
padding: 12px;
}
} }
.published-page-author { .published-page-author {
@ -21,12 +51,16 @@
.avatar { .avatar {
margin-right: 1em; margin-right: 1em;
height: 45px;
width: 45px;
border: 4px solid rgba($tertiary, 0.75);
} }
.topic-created-at { .topic-created-at {
color: $primary-medium; color: $primary-medium;
} }
} }
.published-page-body { .published-page-content-body {
font-size: 1.25em; font-size: 1.25em;
padding-bottom: 2em;
} }

3
app/controllers/published_pages_controller.rb
View File

@ -31,6 +31,9 @@ class PublishedPagesController < ApplicationController
@topic = pp.topic @topic = pp.topic
@canonical_url = @topic.url @canonical_url = @topic.url
@logo = SiteSetting.logo_small
@site_url = Discourse.base_url
@border_color = "#" + ColorScheme.base_colors["tertiary"]
@body_classes = Set.new([ @body_classes = Set.new([
'published-page', 'published-page',

20
app/views/published_pages/show.html.erb
View File

@ -1,9 +1,15 @@
<div class="published-page-wrapper"> <div class="pp-header">
<div class="published-page-header"> <div class="pp-header-wrapper">
<h1 class="published-page-title"><%= @topic.title %></h1> <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"> <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="published-page-author-details">
<div class="username"><%= @topic.user.username %></div> <div class="username"><%= @topic.user.username %></div>
<div class="topic-created-at"><%= short_date(@topic.created_at) %></div> <div class="topic-created-at"><%= short_date(@topic.created_at) %></div>
@ -11,8 +17,8 @@
</div> </div>
</div> </div>
<%- if @topic.first_post.present? %> <%- if @topic.first_post.present? %>
<div class="published-page-body"> <div class="published-page-content-body">
<%= @topic.first_post.cooked.html_safe %> <%= @topic.first_post.cooked.html_safe %>
</div> </div>
<%- end -%> <%- end -%>
</div> </div>