diff --git a/app/lib/queries.js b/app/lib/queries.js index 4ce27ce..2e7dd00 100644 --- a/app/lib/queries.js +++ b/app/lib/queries.js @@ -81,6 +81,7 @@ const getPosts = async (ssbServer, profile) => { content: { type: "post", root: { $not: true }, + channel: { $not: true }, }, }, }, diff --git a/app/public/js/index.js b/app/public/js/index.js index 638f2cc..a4c3298 100644 --- a/app/public/js/index.js +++ b/app/public/js/index.js @@ -52,3 +52,16 @@ if (profilePicUpload) { profilePicUpload.addEventListener("change", previewImage); previewImage(); } + +const jsPublicOption = document.querySelector(".js-public-option"); +const jsVanishingOption = document.querySelector(".js-vanishing-option"); +const jsVanishingMessage = document.querySelector(".js-vanishing-message"); +if (jsVanishingOption) { + const onVisibilityChange = () => { + const vanishing = jsVanishingOption.checked; + jsVanishingMessage.style.display = vanishing ? "block" : "none"; + }; + jsPublicOption.addEventListener("change", onVisibilityChange); + jsVanishingOption.addEventListener("change", onVisibilityChange); + onVisibilityChange(); +} diff --git a/app/public/style.css b/app/public/style.css index 30f9082..57ef485 100644 --- a/app/public/style.css +++ b/app/public/style.css @@ -2,10 +2,8 @@ box-sizing: border-box; } body { - font-family: "Helvetica Neue", Arial, sans-serif; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; - /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, - Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; */ margin: 0; line-height: 1.3em; word-wrap: break-word; @@ -120,6 +118,12 @@ main { align-content: stretch; } +.reverse-columns { + display: flex; + align-content: stretch; + flex-direction: row-reverse; +} + h1 { font-weight: bold; line-height: 1.3em; @@ -139,8 +143,8 @@ h2 { .post { display: flex; - padding: 20px 0; - border-bottom: 1px solid #ccc; + padding: 10px 0; + border-top: 1px solid #ddd; } .post-profile-pic { @@ -179,7 +183,7 @@ a.notification-box, button.notification-box { background: none; text-align: center; - border: 1px solid #333; + border: 1px solid #666; cursor: pointer; color: #000; margin-right: 8px; @@ -191,7 +195,7 @@ button.notification-box { a.notification-box:hover, button.notification-box:hover { - background: #e2e2e2; + background: #f0f0f0; color: #000; } @@ -278,3 +282,29 @@ button.notification-box:hover { max-width: 100%; display: block; } + +.friend-item { + border: 1px solid #ddd; + border-radius: 3px; + padding: 5px; + display: flex; + align-items: center; + margin-bottom: 5px; + text-decoration: none; + color: #000; + background: #fff; +} + +.friend-item:hover { + background: #f0f0f0; +} + +.compose-post { + border-radius: 5px; + border: 1px solid #aaaaaa; + resize: none; + width: 100%; + padding: 8px; + height: 66px; + line-height: 1.3em; +} diff --git a/app/views/_friends.ejs b/app/views/_friends.ejs new file mode 100644 index 0000000..df8109f --- /dev/null +++ b/app/views/_friends.ejs @@ -0,0 +1,8 @@ +

Friends

+ +<% friends.friends.map(friend => { %> + + +
<%= friend.name %>
+
+<% }) %> \ No newline at end of file diff --git a/app/views/_post.ejs b/app/views/_post.ejs deleted file mode 100644 index 28f647b..0000000 --- a/app/views/_post.ejs +++ /dev/null @@ -1,13 +0,0 @@ -
-
- -
-
-
- <%= post.authorProfile.name %> -
-
- <%= post.content.text.slice(0, 140) %> -
-
-
\ No newline at end of file diff --git a/app/views/_posts.ejs b/app/views/_posts.ejs new file mode 100644 index 0000000..3e08af7 --- /dev/null +++ b/app/views/_posts.ejs @@ -0,0 +1,21 @@ +
+ <% posts.map(post => { %> +
+
+ +
+
+
+ <%= post.authorProfile.name %> +
+
+ <% let text = post.content.text.slice(0, 140) %> + <% if (post.content.text.length > 140) text += "..." %> + <% text.split("\n").map((line, index) => { %> + <%- index > 0 ? "
" : "" %><%= line %> + <% }) %> +
+
+
+ <% }) %> +
\ No newline at end of file diff --git a/app/views/home.ejs b/app/views/home.ejs index 616c37e..15ef208 100644 --- a/app/views/home.ejs +++ b/app/views/home.ejs @@ -7,23 +7,12 @@ <%= profile.description %> -

Friends

- - - + <%- include('_friends', { friends }) %>
<% if (vanishingMessages.length > 0) { %> -
+ -

Friends

- -
+ <%- include('_friends', { friends }) %>
-

<%= profile.name %>'s Wall

-

Leave <%= profile.name %> a message

" method="POST">
- - + + +
+ +
- <% posts.map(post => { %> - <%- include('_post', { post }) %> - <% }) %> +

<%= profile.name %>'s Wall

+ <%- include('_posts', { posts }) %>