diff --git a/README.md b/README.md index bdab5251..114228d8 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ > A Qvitter-style frontend for certain GS servers. -![screenshot](http://i.imgur.com/3q30Zxt.jpg) +![screenshot](https://my.mixtape.moe/kjzioz.PNG) # FOR ADMINS diff --git a/index.html b/index.html index 668b21bb..b7654cc1 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + diff --git a/src/App.scss b/src/App.scss index 8a1942c6..0a7e1ce5 100644 --- a/src/App.scss +++ b/src/App.scss @@ -213,13 +213,20 @@ nav { } .main { - flex: 1; - flex-basis: 65%; + flex-basis: 60%; + flex-grow: 1; + flex-shrink: 1; } .sidebar { - flex: 1; - flex-basis: 35%; + flex: 0; + flex-basis: 35%; +} + +.sidebar-flexer { + flex: 1; + flex-basis: 345px; + width: 365px; } .mobile-shown { @@ -238,6 +245,30 @@ nav { } } +@media all and (min-width: 960px) { + .sidebar { + overflow: hidden; + max-height: 100vh; + width: 350px; + position: fixed; + margin-top: -10px; + + .sidebar-container { + height: 96vh; + width: 362px; + padding-top: 10px; + padding-right: 20px; + overflow-x: hidden; + overflow-y: scroll; + } + } + .sidebar-flexer { + max-height: 96vh; + flex-shrink: 0; + flex-grow: 0; + } +} + @media all and (max-width: 959px) { .mobile-hidden { display: none; diff --git a/src/App.vue b/src/App.vue index c4b3cb13..fcfdae97 100644 --- a/src/App.vue +++ b/src/App.vue @@ -15,10 +15,14 @@ -
- - - +
+
+
+ + + +
+
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index 1ba1c02a..d50664b6 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -33,10 +33,10 @@ .attachments { display: flex; flex-wrap: wrap; - margin-right: -0.8em; + margin-right: -0.7em; .attachment { flex: 1 0 30%; - margin: 0.5em 0.8em 0.6em 0.0em; + margin: 0.5em 0.7em 0.6em 0.0em; align-self: flex-start; &.html { diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index 281b0183..e89fa84f 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -8,6 +8,11 @@ const sortAndFilterConversation = (conversation) => { } const conversation = { + data () { + return { + highlight: null + } + }, props: [ 'statusoid', 'collapsable' @@ -54,6 +59,9 @@ const conversation = { } else { return (id === this.statusoid.id) } + }, + setHighlight (id) { + this.highlight = Number(id) } } } diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue index 726cfb65..8b1e00ac 100644 --- a/src/components/conversation/conversation.vue +++ b/src/components/conversation/conversation.vue @@ -8,7 +8,7 @@
- +
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index 9bc2a5ec..c7c650a9 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -1,6 +1,8 @@ @import '../../_variables.scss'; .notifications { + // a bit of a hack to allow scrolling below notifications + padding-bottom: 15em; .panel-heading { // force the text to stay centered, while keeping diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue index 661d842c..a326e9cd 100644 --- a/src/components/notifications/notifications.vue +++ b/src/components/notifications/notifications.vue @@ -14,11 +14,11 @@
-

{{ notification.action.user.name }}
favorited your status

+

{{ notification.action.user.name }}
favorited your status

{{ notification.status.text }}

-

{{ notification.action.user.name }}
repeated your status

+

{{ notification.action.user.name }}
repeated your status

{{ notification.status.text }}

diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index 07280a41..c3f1b1f0 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -4,6 +4,10 @@
+
+ + +
@@ -13,10 +17,6 @@ {{file.url}}
-
- - -
@@ -44,14 +44,20 @@ .form-bottom { display: flex; padding: 0.5em; + height: 32px; button { - flex: 2; + width: 10em; } } .attachments { - padding: 0.5em; + padding: 0 0.5em; + + .attachment { + position: relative; + margin: 0.5em 0.8em 0.2em 0; + } i { position: absolute; diff --git a/src/components/status/status.js b/src/components/status/status.js index bb026fe1..5e7bde53 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -11,7 +11,8 @@ const Status = { 'statusoid', 'expandable', 'inConversation', - 'focused' + 'focused', + 'highlight' ], data: () => ({ replying: false, @@ -53,6 +54,16 @@ const Status = { return { borderBottomColor: this.$store.state.config.colors['base02'] } + }, + isFocused () { + // retweet or root of an expanded conversation + if (this.focused) { + return true + } else if (!this.inConversation) { + return false + } + // use conversation highlight only when in conversation + return this.status.id === this.highlight } }, components: { @@ -75,6 +86,10 @@ const Status = { toggleReplying () { this.replying = !this.replying }, + gotoOriginal () { + // only handled by conversation, not status_or_conversation + this.$emit('goto', this.status.in_reply_to_status_id) + }, toggleExpanded () { this.$emit('toggleExpanded') }, @@ -84,6 +99,20 @@ const Status = { toggleUserExpanded () { this.userExpanded = !this.userExpanded } + }, + watch: { + 'highlight': function (id) { + id = Number(id) + if (this.status.id === id) { + let rect = this.$el.getBoundingClientRect() + if (rect.top < 100) { + window.scrollBy(0, rect.top - 200) + } else if (rect.bottom > window.innerHeight - 100) { + // will be useful when scrolling down to replies or root posts is in + window.scrollBy(0, rect.bottom + 200) + } + } + } } } diff --git a/src/components/status/status.vue b/src/components/status/status.vue index b471888a..db33a200 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -1,5 +1,5 @@