From 258586b50579eea1e855381d20bc582de243b026 Mon Sep 17 00:00:00 2001 From: Umputun Date: Fri, 2 Mar 2018 13:49:40 -0600 Subject: [PATCH 01/14] switch to tsNano to avoid ordering issues --- app/store/bolt.go | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/app/store/bolt.go b/app/store/bolt.go index 59a57ecb..e795e2c5 100644 --- a/app/store/bolt.go +++ b/app/store/bolt.go @@ -39,6 +39,8 @@ const ( userLimit = 50 ) +const tsNano = "2006-01-02T15:04:05.000000000Z07:00" + // BoltSite defines single site param type BoltSite struct { FileName string // full path to boltdb @@ -117,7 +119,7 @@ func (b *BoltDB) Create(comment Comment) (commentID string, err error) { // add reference to comment to "last" bucket lastBkt := tx.Bucket([]byte(lastBucketName)) ref := b.makeRef(comment) - commentTs := []byte(comment.Timestamp.Format(time.RFC3339Nano)) + commentTs := []byte(comment.Timestamp.Format(tsNano)) e = lastBkt.Put(commentTs, ref) if e != nil { return errors.Wrapf(e, "can't put reference %s to %s", ref, lastBucketName) @@ -288,7 +290,7 @@ func (b *BoltDB) SetBlock(siteID string, userID string, status bool) error { bucket := tx.Bucket([]byte(blocksBucketName)) switch status { case true: - if e := bucket.Put([]byte(userID), []byte(time.Now().Format(time.RFC3339Nano))); e != nil { + if e := bucket.Put([]byte(userID), []byte(time.Now().Format(tsNano))); e != nil { return errors.Wrapf(e, "failed to put %s to %s", userID, blocksBucketName) } case false: @@ -327,7 +329,7 @@ func (b *BoltDB) Blocked(siteID string) (users []BlockedUser, err error) { err = bdb.View(func(tx *bolt.Tx) error { bucket := tx.Bucket([]byte(blocksBucketName)) return bucket.ForEach(func(k []byte, v []byte) error { - ts, e := time.ParseInLocation(time.RFC3339Nano, string(v), time.Local) + ts, e := time.ParseInLocation(tsNano, string(v), time.Local) if e != nil { return errors.Wrap(e, "can't parse block ts") } From dfb14a4c6de562bc3169d233aba3ba0273ed0577 Mon Sep 17 00:00:00 2001 From: igoradamenko Date: Sat, 3 Mar 2018 22:01:34 +0300 Subject: [PATCH 02/14] don't wrap styles for html and body with #ID selector --- web/webpack.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/webpack.config.js b/web/webpack.config.js index bffb9ec3..33bcf282 100644 --- a/web/webpack.config.js +++ b/web/webpack.config.js @@ -21,7 +21,7 @@ const commonStyleLoaders = [ plugins: [ require('autoprefixer')({ browsers: ['> 1%'] }), require('postcss-url')({ url: 'inline', maxSize: 5 }), - require('postcss-wrap')({ selector: `#${NODE_ID}` }), + require('postcss-wrap')({ selector: `#${NODE_ID}` , skip: /^html|body$/}), require('postcss-csso'), ] } From 950ba6b5c013887b25d2e949a4a9084aebb207ef Mon Sep 17 00:00:00 2001 From: igoradamenko Date: Sat, 3 Mar 2018 22:05:18 +0300 Subject: [PATCH 03/14] remove animation of comment controls --- web/app/components/comment/__controls/comment__controls.scss | 2 -- web/app/components/comment/comment.scss | 1 - 2 files changed, 3 deletions(-) diff --git a/web/app/components/comment/__controls/comment__controls.scss b/web/app/components/comment/__controls/comment__controls.scss index 5e41f63c..f8f97d0d 100644 --- a/web/app/components/comment/__controls/comment__controls.scss +++ b/web/app/components/comment/__controls/comment__controls.scss @@ -3,8 +3,6 @@ user-select: none; @media (hover: hover) { - margin-left: 0; - transition: transform .2s .1s ease-out, opacity .2s .1s ease-out; font-weight: 700; opacity: 0; } diff --git a/web/app/components/comment/comment.scss b/web/app/components/comment/comment.scss index 9fd079b8..9624fa60 100644 --- a/web/app/components/comment/comment.scss +++ b/web/app/components/comment/comment.scss @@ -10,7 +10,6 @@ @media (hover: hover) { &:hover { .comment__controls { - transform: translateX(8px); opacity: 1; } } From 53f11adb7132bc32822710fcc58b5b04175f7f43 Mon Sep 17 00:00:00 2001 From: igoradamenko Date: Sat, 3 Mar 2018 22:05:33 +0300 Subject: [PATCH 04/14] decrease margins between comments --- web/app/components/comment/comment.scss | 2 +- web/app/components/thread/thread.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/web/app/components/comment/comment.scss b/web/app/components/comment/comment.scss index 9624fa60..bf3711e0 100644 --- a/web/app/components/comment/comment.scss +++ b/web/app/components/comment/comment.scss @@ -3,7 +3,7 @@ .comment { position: relative; overflow: hidden; - margin-bottom: $offset; + margin-bottom: $offset / 2; font-size: 16px; line-height: 1.2; diff --git a/web/app/components/thread/thread.scss b/web/app/components/thread/thread.scss index 59307364..a8149d32 100644 --- a/web/app/components/thread/thread.scss +++ b/web/app/components/thread/thread.scss @@ -1,5 +1,5 @@ @import 'common/variables'; .thread { - margin-bottom: $offset; + margin-bottom: $offset / 2; } From 41299c4d7edf6af5cf385efa33cb0a33cf4794c9 Mon Sep 17 00:00:00 2001 From: igoradamenko Date: Sat, 3 Mar 2018 22:05:44 +0300 Subject: [PATCH 05/14] add preloader block --- .../preloader/__bounce/preloader__bounce.scss | 35 +++++++++++++++++++ web/app/components/preloader/index.js | 5 +++ web/app/components/preloader/preloader.jsx | 13 +++++++ web/app/components/preloader/preloader.scss | 5 +++ 4 files changed, 58 insertions(+) create mode 100644 web/app/components/preloader/__bounce/preloader__bounce.scss create mode 100644 web/app/components/preloader/index.js create mode 100644 web/app/components/preloader/preloader.jsx create mode 100644 web/app/components/preloader/preloader.scss diff --git a/web/app/components/preloader/__bounce/preloader__bounce.scss b/web/app/components/preloader/__bounce/preloader__bounce.scss new file mode 100644 index 00000000..009c0c7d --- /dev/null +++ b/web/app/components/preloader/__bounce/preloader__bounce.scss @@ -0,0 +1,35 @@ +.preloader__bounce { + display: inline-block; + width: 10px; + height: 10px; + margin-right: 3px; + background-color: #333; + border-radius: 100%; + animation: preloaderBounce 1.4s infinite ease-in-out both; + + &:first-child { + animation-delay: -.32s; + } + + &:nth-child(2) { + animation-delay: -.16s; + } + + &:last-child { + margin-right: 0; + } + + @keyframes preloaderBounce { + 0% { + transform: scale(0); + } + + 40% { + transform: scale(1); + } + + 80%, 100% { + transform: scale(0); + } + } +} diff --git a/web/app/components/preloader/index.js b/web/app/components/preloader/index.js new file mode 100644 index 00000000..74d4e5b1 --- /dev/null +++ b/web/app/components/preloader/index.js @@ -0,0 +1,5 @@ +export { default } from './preloader'; + +require('./preloader.scss'); + +require('./__bounce/preloader__bounce.scss'); diff --git a/web/app/components/preloader/preloader.jsx b/web/app/components/preloader/preloader.jsx new file mode 100644 index 00000000..e2ab0ed5 --- /dev/null +++ b/web/app/components/preloader/preloader.jsx @@ -0,0 +1,13 @@ +import { h, Component } from 'preact'; + +export default class Preloader extends Component { + render(props, state) { + return ( +
+
+
+
+
+ ); + } +} diff --git a/web/app/components/preloader/preloader.scss b/web/app/components/preloader/preloader.scss new file mode 100644 index 00000000..932b616b --- /dev/null +++ b/web/app/components/preloader/preloader.scss @@ -0,0 +1,5 @@ +.preloader { + width: 60px; + text-align: center; + font-size: 0; +} From e75b9fb2ed134306b9ed398638cce0723c32b3b7 Mon Sep 17 00:00:00 2001 From: igoradamenko Date: Sat, 3 Mar 2018 22:06:51 +0300 Subject: [PATCH 06/14] add preloader block to root component instead of text 'Loading..' --- .../root/__preloader/root__preloader.scss | 6 +++ .../root/_loading/root_loading.scss | 39 ------------------- web/app/components/root/index.js | 3 +- web/app/components/root/root.jsx | 7 +++- web/app/components/root/root.scss | 1 + 5 files changed, 13 insertions(+), 43 deletions(-) create mode 100644 web/app/components/root/__preloader/root__preloader.scss delete mode 100644 web/app/components/root/_loading/root_loading.scss diff --git a/web/app/components/root/__preloader/root__preloader.scss b/web/app/components/root/__preloader/root__preloader.scss new file mode 100644 index 00000000..77af553b --- /dev/null +++ b/web/app/components/root/__preloader/root__preloader.scss @@ -0,0 +1,6 @@ +.root__preloader { + position: absolute; + left: 0; + right: 0; + margin: 0 auto; +} diff --git a/web/app/components/root/_loading/root_loading.scss b/web/app/components/root/_loading/root_loading.scss deleted file mode 100644 index 4674958e..00000000 --- a/web/app/components/root/_loading/root_loading.scss +++ /dev/null @@ -1,39 +0,0 @@ -// TODO: add true preloader - -.root_loading { - position: relative; - height: 3em; - - &::after { - content: 'Loading..'; - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - margin: auto; - animation: rootLoading 1s infinite; - } - - @keyframes rootLoading { - 0% { - content: 'Loading..'; - } - - 25% { - content: 'Loading...'; - } - - 50% { - content: 'Loading..'; - } - - 75% { - content: 'Loading.'; - } - - 100% { - content: 'Loading.'; - } - } -} diff --git a/web/app/components/root/index.js b/web/app/components/root/index.js index 387778d4..4d0661ec 100644 --- a/web/app/components/root/index.js +++ b/web/app/components/root/index.js @@ -4,8 +4,7 @@ require('./root.scss'); require('./__auth-panel/root__auth-panel.scss'); require('./__input/root__input.scss'); +require('./__preloader/root__preloader.scss'); require('./__pinned-comment/root__pinned-comment.scss'); require('./__pinned-comments/root__pinned-comments.scss'); require('./__thread/root__thread.scss'); - -require('./_loading/root_loading.scss'); diff --git a/web/app/components/root/root.jsx b/web/app/components/root/root.jsx index e7c280e4..cf254690 100644 --- a/web/app/components/root/root.jsx +++ b/web/app/components/root/root.jsx @@ -8,6 +8,7 @@ import store from 'common/store'; import AuthPanel from 'components/auth-panel'; import Comment from 'components/comment'; import Input from 'components/input'; +import Preloader from 'components/preloader'; import Thread from 'components/thread'; export default class Root extends Component { @@ -91,7 +92,9 @@ export default class Root extends Component { if (!loaded) { return (
-
+
+ +
); } @@ -101,7 +104,7 @@ export default class Root extends Component { return (
-
+
Date: Sun, 4 Mar 2018 00:24:44 +0300 Subject: [PATCH 07/14] hide input field for guests --- web/TODO.md | 1 - .../root/__auth-panel/root__auth-panel.scss | 3 -- .../components/root/__input/root__input.scss | 2 +- .../root__pinned-comments.scss | 2 +- .../root/__threads/root__threads.scss | 3 ++ web/app/components/root/index.js | 2 +- web/app/components/root/root.jsx | 36 ++++++++++++------- 7 files changed, 29 insertions(+), 20 deletions(-) delete mode 100644 web/app/components/root/__auth-panel/root__auth-panel.scss create mode 100644 web/app/components/root/__threads/root__threads.scss diff --git a/web/TODO.md b/web/TODO.md index 27c0714c..00d74b6b 100644 --- a/web/TODO.md +++ b/web/TODO.md @@ -1,7 +1,6 @@ major features: - improve design - - add true preloader - disable inputs for guests - hide reply links for guests - check mobile ui diff --git a/web/app/components/root/__auth-panel/root__auth-panel.scss b/web/app/components/root/__auth-panel/root__auth-panel.scss deleted file mode 100644 index 1bda3eb6..00000000 --- a/web/app/components/root/__auth-panel/root__auth-panel.scss +++ /dev/null @@ -1,3 +0,0 @@ -.root__auth-panel { - margin-bottom: 4px; -} diff --git a/web/app/components/root/__input/root__input.scss b/web/app/components/root/__input/root__input.scss index 2440c942..cfa788fd 100644 --- a/web/app/components/root/__input/root__input.scss +++ b/web/app/components/root/__input/root__input.scss @@ -1,3 +1,3 @@ .root__input { - margin-bottom: 24px; + margin-top: 4px; } diff --git a/web/app/components/root/__pinned-comments/root__pinned-comments.scss b/web/app/components/root/__pinned-comments/root__pinned-comments.scss index 7ffef917..547c776a 100644 --- a/web/app/components/root/__pinned-comments/root__pinned-comments.scss +++ b/web/app/components/root/__pinned-comments/root__pinned-comments.scss @@ -1,7 +1,7 @@ @import 'common/variables'; .root__pinned-comments { - margin-bottom: $offset * 2; + margin-top: 24px; padding: ($offset / 3) ($offset / 2); border: 2px solid #0aa; border-radius: 4px; diff --git a/web/app/components/root/__threads/root__threads.scss b/web/app/components/root/__threads/root__threads.scss new file mode 100644 index 00000000..b3e37227 --- /dev/null +++ b/web/app/components/root/__threads/root__threads.scss @@ -0,0 +1,3 @@ +.root__threads { + margin-top: 24px; +} diff --git a/web/app/components/root/index.js b/web/app/components/root/index.js index 4d0661ec..b2eef646 100644 --- a/web/app/components/root/index.js +++ b/web/app/components/root/index.js @@ -2,9 +2,9 @@ export { default } from './root'; require('./root.scss'); -require('./__auth-panel/root__auth-panel.scss'); require('./__input/root__input.scss'); require('./__preloader/root__preloader.scss'); require('./__pinned-comment/root__pinned-comment.scss'); require('./__pinned-comments/root__pinned-comments.scss'); require('./__thread/root__thread.scss'); +require('./__threads/root__threads.scss'); diff --git a/web/app/components/root/root.jsx b/web/app/components/root/root.jsx index cf254690..52a0f1a7 100644 --- a/web/app/components/root/root.jsx +++ b/web/app/components/root/root.jsx @@ -101,22 +101,26 @@ export default class Root extends Component { // TODO: i think we should do it on backend const pinnedComments = store.getPinnedComments(); + const isGuest = !Object.keys(user).length; return (
- + { + !isGuest && ( + + ) + } { !!pinnedComments.length && ( @@ -135,14 +139,20 @@ export default class Root extends Component { } { - comments.map(thread => ( - - )) + !!comments.length && ( +
+ { + comments.map(thread => ( + + )) + } +
+ ) }
From efa195a4f90983c66de068882352c6368af23059 Mon Sep 17 00:00:00 2001 From: igoradamenko Date: Sun, 4 Mar 2018 00:25:55 +0300 Subject: [PATCH 08/14] hide reply link for guests --- web/app/components/comment/comment.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/web/app/components/comment/comment.jsx b/web/app/components/comment/comment.jsx index eb50fc25..79af82b5 100644 --- a/web/app/components/comment/comment.jsx +++ b/web/app/components/comment/comment.jsx @@ -141,6 +141,7 @@ export default class Comment extends Component { render(props, { userBlocked, pinned, score, scoreIncreased, scoreDecreased, isInputVisible }) { const { data, mix, mods = {} } = props; const isAdmin = store.get('user').admin; + const isGuest = !Object.keys(store.get('user')).length; const time = new Date(data.time); // TODO: which format for datetime should we choose? @@ -195,7 +196,7 @@ export default class Comment extends Component { {o.time} { - !mods.disabled && ( + !mods.disabled && !isGuest && ( reply From 8316a716b6b8fb6605e3138fc6edcf97d86ae57d Mon Sep 17 00:00:00 2001 From: igoradamenko Date: Sun, 4 Mar 2018 00:26:41 +0300 Subject: [PATCH 09/14] remove avatar background --- web/TODO.md | 5 ----- web/app/components/comment/__avatar/comment__avatar.scss | 1 - 2 files changed, 6 deletions(-) diff --git a/web/TODO.md b/web/TODO.md index 00d74b6b..d2a48ea9 100644 --- a/web/TODO.md +++ b/web/TODO.md @@ -1,14 +1,9 @@ major features: - improve design - - disable inputs for guests - - hide reply links for guests - check mobile ui - add icons for social networks - - remove grey avatars 'cause we have default img - add time format 'X hours ago' - - use static buttons 'reply', 'pin', etc instead of dynamic - - maybe we should change layout: vote buttons | avatar | info; info: (top: name, points, time), (center: text), (bottom: controls) - edit comment - `PUT /api/v1/comment/{id}?site=site-id&url=post-url` - add description of web part to readme diff --git a/web/app/components/comment/__avatar/comment__avatar.scss b/web/app/components/comment/__avatar/comment__avatar.scss index 44e08462..124aeaa5 100644 --- a/web/app/components/comment/__avatar/comment__avatar.scss +++ b/web/app/components/comment/__avatar/comment__avatar.scss @@ -8,5 +8,4 @@ height: $avatarSize; margin-right: $avatarOffset; border-radius: 4px; - background: #eee; } From 1761f216bd91c9fd70778f02b1675da874b3f02f Mon Sep 17 00:00:00 2001 From: igoradamenko Date: Sun, 4 Mar 2018 00:32:27 +0300 Subject: [PATCH 10/14] fix input button size in safari --- web/app/components/input/__button/input__button.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/web/app/components/input/__button/input__button.scss b/web/app/components/input/__button/input__button.scss index 6cf3f2c8..ffd4c323 100644 --- a/web/app/components/input/__button/input__button.scss +++ b/web/app/components/input/__button/input__button.scss @@ -8,6 +8,7 @@ bottom: 0; box-sizing: border-box; width: $buttonWidth; + height: 100%; padding: 0 10px; font-size: 16px; border: 0; From 32c796c3072892ab1b3a0e7d08b31ef451e1b8b7 Mon Sep 17 00:00:00 2001 From: igoradamenko Date: Sun, 4 Mar 2018 00:43:43 +0300 Subject: [PATCH 11/14] change color of action links --- web/app/components/comment/__action/comment__action.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/app/components/comment/__action/comment__action.scss b/web/app/components/comment/__action/comment__action.scss index fb24d978..3cd88b8a 100644 --- a/web/app/components/comment/__action/comment__action.scss +++ b/web/app/components/comment/__action/comment__action.scss @@ -1,7 +1,7 @@ .comment__action { margin-left: 8px; font-weight: 700; - color: #777; + color: #0aa; cursor: pointer; &:hover { From 4fc75c5e44911dc2edac68022c92623b99f250bb Mon Sep 17 00:00:00 2001 From: igoradamenko Date: Sun, 4 Mar 2018 00:44:34 +0300 Subject: [PATCH 12/14] add styles for links, images and brs in comments --- .../comment/__text/comment__text.scss | 23 ++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/web/app/components/comment/__text/comment__text.scss b/web/app/components/comment/__text/comment__text.scss index c0f50581..bc03e370 100644 --- a/web/app/components/comment/__text/comment__text.scss +++ b/web/app/components/comment/__text/comment__text.scss @@ -5,7 +5,28 @@ margin: 0; + p { - margin-top: 5px; + margin-top: 8px; + } + + // imported comments have br instead of p + br { + content: ''; + display: block; + margin-top: 8px; } } + + a { + color: #0aa; + + &:hover { + color: #06c5c5; + text-decoration: none; + } + } + + img { + max-width: 100%; + max-height: 300px; + } } From a645aafe8c87020151ac5e4eacc4f1796121c660 Mon Sep 17 00:00:00 2001 From: igoradamenko Date: Sun, 4 Mar 2018 00:45:28 +0300 Subject: [PATCH 13/14] change styles of username --- web/app/components/comment/__username/comment__username.scss | 3 ++- .../components/comment/_view/_admin/comment_view_admin.scss | 1 - web/app/components/comment/comment.jsx | 1 - 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/web/app/components/comment/__username/comment__username.scss b/web/app/components/comment/__username/comment__username.scss index 1546489b..75f1b9ed 100644 --- a/web/app/components/comment/__username/comment__username.scss +++ b/web/app/components/comment/__username/comment__username.scss @@ -1,3 +1,4 @@ .comment__username { - color: #06c5c5; + color: #777; + font-weight: 700; } diff --git a/web/app/components/comment/_view/_admin/comment_view_admin.scss b/web/app/components/comment/_view/_admin/comment_view_admin.scss index 5ab3a17c..9d24f9da 100644 --- a/web/app/components/comment/_view/_admin/comment_view_admin.scss +++ b/web/app/components/comment/_view/_admin/comment_view_admin.scss @@ -1,6 +1,5 @@ .comment_view_admin { .comment__username { - font-weight: 700; color: #ff4700; }; } diff --git a/web/app/components/comment/comment.jsx b/web/app/components/comment/comment.jsx index 79af82b5..9df571cf 100644 --- a/web/app/components/comment/comment.jsx +++ b/web/app/components/comment/comment.jsx @@ -177,7 +177,6 @@ export default class Comment extends Component {
- {/* TODO: add link to user's profile in social if we have it */} {o.user.name} From cd08c56d22f428b1987059f027fd0758e791a697 Mon Sep 17 00:00:00 2001 From: igoradamenko Date: Sun, 4 Mar 2018 00:45:53 +0300 Subject: [PATCH 14/14] improve styles of links in auth-panel --- .../auth-panel/__pseudo-link/auth-panel__pseudo-link.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/web/app/components/auth-panel/__pseudo-link/auth-panel__pseudo-link.scss b/web/app/components/auth-panel/__pseudo-link/auth-panel__pseudo-link.scss index d81c8d3a..fa9a37f0 100644 --- a/web/app/components/auth-panel/__pseudo-link/auth-panel__pseudo-link.scss +++ b/web/app/components/auth-panel/__pseudo-link/auth-panel__pseudo-link.scss @@ -1,6 +1,11 @@ .auth-panel__pseudo-link { display: inline-block; + font-weight: 700; white-space: nowrap; cursor: pointer; - color: #06c5c5; + color: #0aa; + + &:hover { + color: #06c5c5; + } }