Skip to content

GitLab

Unverified Commit f3772721 authored by Aral Balkan's avatar Aral Balkan
Browse files

Gave the post and person views a consistent look.

parent 9329b486
Hide whitespace changes
Inline Side-by-side
routes/public/post.coffee
View file @ f3772721
......@@ -2,16 +2,17 @@
# Waystone Public Timeline
#
fs = require 'fs-extra-as-promised'
moment = require 'moment'
path = require 'path-extra'
TeleportationAPI = require '../../TeleportationAPI'
PublicTimelineWeaver = require '../../PublicTimelineWeaver'
module.exports = (app) ->
route = (request, response) ->
messageID = request.params.messageID
# Custom formatter for message body ids
messageBodyIDFormatter = (messageID) ->
return messageID + '-body'
......@@ -132,11 +133,35 @@ module.exports = (app) ->
return profileImagePath
(new PublicTimelineWeaver).getMessage(messageID).then (message) ->
console.log 'Post route got message: '
console.log message
#
# Read the person details
#
messageID = request.param 'messageID'
accountHandle = request.param 'accountHandle'
console.log "Account handle: #{accountHandle}"
mainFolderForPerson = (new TeleportationAPI).folderForHandle(accountHandle)
aboutPersonFolder = path.join mainFolderForPerson, 'public', 'from', 'about'
profileImageURL = "/person/#{accountHandle}/about/me.jpg"
indieFriendURL = "indie://friend/#{accountHandle}"
console.log "About person folder: #{aboutPersonFolder}"
profileDataPath = path.join(aboutPersonFolder, "me.json")
fs.readFileAsync(profileDataPath)
.then (profileData) ->
profile = JSON.parse(profileData)
(new PublicTimelineWeaver).getMessage(messageID).then (message) ->
console.log 'Post route got message: '
console.log message
# TODO: Add the formatters to the messages themselves so we don’t have to duplicate them on the client.
# TODO: Add the formatters to the messages themselves so we don’t have to duplicate them on the client.
# Reverse the message order to match that of the Cocoa client.
response.render 'post', {message: message, __set: { formatters: {messageBodyIDFormatter: messageBodyIDFormatter, messageStatusIDFormatter: messageStatusIDFormatter, profileImagePathFormatter: profileImagePathFormatter, personFormatter:personFormatter, addFriendLinkFormatter: addFriendLinkFormatter, addFriendTextFormatter:addFriendTextFormatter, postDateFormatter:postDateFormatter, timestampFormatter: timestampFormatter}}}
# Reverse the message order to match that of the Cocoa client.
response.render 'post', {accountHandle, accountHandle, indieFriendURL: indieFriendURL, profileImageURL: profileImageURL, profile: profile, message: message, __set: { formatters: {messageBodyIDFormatter: messageBodyIDFormatter, messageStatusIDFormatter: messageStatusIDFormatter, profileImagePathFormatter: profileImagePathFormatter, personFormatter:personFormatter, addFriendLinkFormatter: addFriendLinkFormatter, addFriendTextFormatter:addFriendTextFormatter, postDateFormatter:postDateFormatter, timestampFormatter: timestampFormatter}}}
static/css/person.css
View file @ f3772721
......@@ -20,6 +20,7 @@ h1
font-size: 64px;
line-height: 1;
margin-bottom: 0;
margin-top: 12px;
border-bottom: 0;
}
......@@ -37,6 +38,7 @@ h2
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 24px;
}
#indieHopeBalloonLogo
......@@ -92,7 +94,8 @@ h2
.bodyText
{
margin-left: 0;
margin-left: auto;
margin-right: auto;
}
.meta
......@@ -161,4 +164,18 @@ header
.new-person-notification p:nth-child(2)
{
padding-top: 26px;
}
\ No newline at end of file
}
.displayNone
{
display:none;
}
.progress-spinner
{
display:inline;
width:16px;
vertical-align:top;
padding-top: 2px;
padding-right:5px;
}
static/css/public.css
View file @ f3772721
......@@ -2,92 +2,105 @@
body
{
font-family: "Avenir Next";
padding-left:24px;
padding-right: 24px;
font-family: "Avenir Next";
padding-left:24px;
padding-right: 24px;
}
h1
{
font-weight: 400;
color: #333;
font-size: 36px;
width: 100%;
border-bottom: 2px solid #333;
/* to bring it in line w webkit margin in Cocoa */
margin-top: 0.67em;
margin-bottom: 0.67em;
font-weight: 400;
color: #333;
font-size: 36px;
width: 100%;
border-bottom: 2px solid #333;
/* to bring it in line w webkit margin in Cocoa */
margin-top: 0.67em;
margin-bottom: 0.67em;
}
.message
{
/* border-radius: 12px; */
/* background-color: #f0f0f0; */
border-bottom: 1px solid #eee;
padding: 6px;
margin-bottom: 6px;
/* border-radius: 12px; */
/* background-color: #f0f0f0; */
border-bottom: 1px solid #eee;
padding: 6px;
margin-bottom: 6px;
}
img
{
/* Make photos break the flow */
display:block;
/* Make photos break the flow */
display:block;
/* Limit the size of photos so that they don’t overwhelm the display. */
max-width:100%;
/* Limit the size of photos so that they don’t overwhelm the display. */
max-width:100%;
}
.timestamp
{
font-size:10px;
color: #ccc;
text-align: center;
font-size:10px;
color: #ccc;
text-align: center;
}
.bodyText, .meta
{
max-width: 500px;
margin-left: 96px;
max-width: 500px;
margin-left: 96px;
}
.image-and-body
{
width: 100%;
break: both;
overflow: hidden;
margin-bottom: 6px;
width: 100%;
break: both;
overflow: hidden;
margin-bottom: 6px;
}
.profileImage
{
width: 56px;
border-radius: 28px;
float: left;
margin-right: 36px;
width: 56px;
border-radius: 28px;
float: left;
margin-right: 36px;
}
.meta
{
font-size:small;
color: #999;
font-style: italic;
font-size:small;
color: #999;
font-style: italic;
}
.meta a
{
color: #999;
color: #999;
}
.add-friend-icon
{
width:18px;
opacity: 0.4;
display:inline;
vertical-align: middle;
width:18px;
opacity: 0.4;
display:inline;
vertical-align: middle;
}
video
{
max-width:100%;
max-width:100%;
}
.displayNone
{
display:none;
}
.progress-spinner
{
display:inline;
width:16px;
vertical-align:top;
padding-top: 2px;
padding-right:5px;
}
views/person.html
View file @ f3772721
......@@ -12,21 +12,6 @@
<script src="/js/set.js"></script>
<script src="/js/person.js"></script>
<script data-set-text='meta'></script>
<style type="text/css">
.displayNone
{
display:none;
}
.progress-spinner
{
display:inline;
width:16px;
vertical-align:top;
padding-top: 2px;
padding-right:5px;
}
</style>
</head>
<body data-set-attribute='data-accountHandle accountHandle'>
<header>
......
views/post.html
View file @ f3772721
......@@ -5,6 +5,7 @@
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width'>
<link rel='stylesheet' href='/css/public.css'>
<link rel='stylesheet' href='/css/person.css'>
<script type='text/javascript' src='/js/superagent.js'></script>
<script type='text/javascript' src='/js/moment.js'></script>
<script src="/js/set.js"></script>
......@@ -27,9 +28,15 @@
</style>
</head>
<body>
<section id='public-timeline'>
<h1><span data-set-text='message.key postDateFormatter'>X time ago</span>, <span data-set-text='message.key personFormatter'>Person</span> wrote…</h1>
<header>
<img id="profile-image" data-set-attribute='src profileImageURL'>
<h1 id='name'><span data-set-text='profile.displayName'></span><a href='/'><img id='indieHopeBalloonLogo' src='/images/indie-hope-balloon-logo.png'></a></h1>
<p id='bio' data-set-text='html profile.bio'></p>
<p><a data-set-attribute='href indieFriendURL'><img class='add-friend-icon' src='/images/person_add@2x.png' alt='Send friend request'></a></p>
</header>
<section id='public-timeline'>
<!-- This recreates what we’re doing via JavaScript on the Cocoa client. -->
<!-- TODO: Evaluate using Set on the Cocoa client also. -->
<div id='messages' class='messages'>
......@@ -37,9 +44,8 @@
<div class='messageBody' data-set-attribute='id message.key messageBodyIDFormatter'>
<!-- <p class="timestamp" data-set-text='message.key'>Message timestamp</p> -->
<div class="image-and-body">
<img class="profileImage" data-set-attribute='src message.key profileImagePathFormatter'>
<div class="bodyText" data-set-text='html message.value'>Message body HTML</div>
<div class="meta"><span class='postDate' data-set-attribute='data-timestamp message.key timestampFormatter' data-set-text='message.key postDateFormatter'></span> by <span data-set-text='message.key personFormatter'></span> <a data-set-attribute='href message.key addFriendLinkFormatter' data-set-text='html message.key addFriendTextFormatter'></a></div>
<div class="meta"><span class='postDate' data-set-attribute='data-timestamp message.key timestampFormatter' data-set-text='message.key postDateFormatter'></span></div>
</div>
</div>
<!-- <div class='messageStatus' data-set-attribute='id message.key messageStatusIDFormatter'></div>-->
......
views/public.html
View file @ f3772721
......@@ -4,27 +4,12 @@
<title>Waystone: Public timeline</title>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width'>
<link rel='stylesheet' href='/css/public.css'>
<script type='text/javascript' src='/js/superagent.js'></script>
<script type='text/javascript' src='/js/moment.js'></script>
<script src="/js/set.js"></script>
<script src="/js/public.js"></script>
<script data-set-text='meta'></script>
<style type="text/css">
.displayNone
{
display:none;
}
.progress-spinner
{
display:inline;
width:16px;
vertical-align:top;
padding-top: 2px;
padding-right:5px;
}
</style>
<link rel='stylesheet' href='/css/public.css'>
<script type='text/javascript' src='/js/superagent.js'></script>
<script type='text/javascript' src='/js/moment.js'></script>
<script src="/js/set.js"></script>
<script src="/js/public.js"></script>
<script data-set-text='meta'></script>
</head>
<body>
<section id='public-timeline'>
......@@ -32,24 +17,24 @@
<!-- This recreates what we’re doing via JavaScript on the Cocoa client. -->
<!-- TODO: Evaluate using Set on the Cocoa client also. -->
<div id='messages' class='messages' data-set-if='messages'>
<!-- Repeater -->
<div class='message' data-set-repeat='message messages' data-set-attribute='id message.key' >
<div class='messageBody' data-set-attribute='id message.key messageBodyIDFormatter'>
<!-- <p class="timestamp" data-set-text='message.key'>Message timestamp</p> -->
<div class="image-and-body">
<img class="profileImage" data-set-attribute='src message.key profileImagePathFormatter'>
<div class="bodyText" data-set-text='html message.value'>Message body HTML</div>
<div class="meta"><a data-set-attribute='href message.key permanentLinkFormatter'><span class='postDate' data-set-attribute='data-timestamp message.key timestampFormatter' data-set-text='message.key postDateFormatter'></span></a> <span data-set-text='html message.key personFormatter'></span> <a data-set-attribute='href message.key addFriendLinkFormatter' data-set-text='html message.key addFriendTextFormatter'></a></div>
</div>
</div>
<!-- <div class='messageStatus' data-set-attribute='id message.key messageStatusIDFormatter'></div>-->
</div>
</div>
<div id='messages' class='messages' data-set-if='messages'>
<!-- Repeater -->
<div class='message' data-set-repeat='message messages' data-set-attribute='id message.key' >
<div class='messageBody' data-set-attribute='id message.key messageBodyIDFormatter'>
<!-- <p class="timestamp" data-set-text='message.key'>Message timestamp</p> -->
<div class="image-and-body">
<img class="profileImage" data-set-attribute='src message.key profileImagePathFormatter'>
<div class="bodyText" data-set-text='html message.value'>Message body HTML</div>
<div class="meta"><a data-set-attribute='href message.key permanentLinkFormatter'><span class='postDate' data-set-attribute='data-timestamp message.key timestampFormatter' data-set-text='message.key postDateFormatter'></span></a> <span data-set-text='html message.key personFormatter'></span> <a data-set-attribute='href message.key addFriendLinkFormatter' data-set-text='html message.key addFriendTextFormatter'></a></div>
</div>
</div>
<!-- <div class='messageStatus' data-set-attribute='id message.key messageStatusIDFormatter'></div>-->
</div>
</div>
<div id='loadProgress' class='displayNone'>
<p style='text-align:center;'><img class='progress-spinner' src='/images/progress-spinner@2x.gif'></p>
</div>
<div id='loadProgress' class='displayNone'>
<p style='text-align:center;'><img class='progress-spinner' src='/images/progress-spinner@2x.gif'></p>
</div>
<section>
</body>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Like this? Fund us! Your patronage helps keep us independent and going.