Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Ind.ie Projects
Waystone
Commits
f3772721
Unverified
Commit
f3772721
authored
Sep 09, 2015
by
Aral Balkan
Browse files
Gave the post and person views a consistent look.
parent
9329b486
Changes
6
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>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment