github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-26 20:33:38 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UI: Styling for Published Page (#10335)

Browse Source 
* 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";
.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;
}

3
app/controllers/published_pages_controller.rb
View File

@ -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',

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

@ -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,7 +17,7 @@
</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 -%>