diff options
| -rw-r--r-- | src/App.scss | 19 | ||||
| -rw-r--r-- | src/components/attachment/attachment.vue | 11 | ||||
| -rw-r--r-- | src/components/post_status_form/post_status_form.vue | 3 | ||||
| -rw-r--r-- | src/components/style_switcher/style_switcher.js | 9 | ||||
| -rw-r--r-- | src/components/user_card/user_card.vue | 7 | ||||
| -rw-r--r-- | src/components/user_card_content/user_card_content.js | 64 | ||||
| -rw-r--r-- | src/components/user_card_content/user_card_content.vue | 65 | ||||
| -rw-r--r-- | src/main.js | 71 | ||||
| -rw-r--r-- | src/services/color_convert/color_convert.js | 34 | ||||
| -rw-r--r-- | src/services/style_setter/style_setter.js | 22 | ||||
| -rw-r--r-- | static/config.json | 3 |
11 files changed, 165 insertions, 143 deletions
diff --git a/src/App.scss b/src/App.scss index 9aa3ee98..4146e68b 100644 --- a/src/App.scss +++ b/src/App.scss @@ -16,7 +16,12 @@ h4 { } #content { - padding-top: 60px; + box-sizing: border-box; + padding-top: 60px; + margin: auto; + min-height: 100vh; + max-width: 980px; + background-color: rgba(0,0,0,0.15); } .text-center { @@ -157,15 +162,6 @@ main-router { margin: 0; } - -#content { - margin: auto; - min-height: 100vh; - max-width: 980px; - padding-bottom: 1em; - background-color: rgba(0,0,0,0.1); -} - .container > * { min-width: 0px; } @@ -210,10 +206,11 @@ nav { .panel-switcher { display: none; width: 100%; - + height: 46px; button { display: block; flex: 1; + max-height: 32px; margin: 0.5em; padding: 0.5em; } diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index 20d10cce..57ff2625 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -34,6 +34,13 @@ display: flex; flex-wrap: wrap; margin-right: -0.7em; + + .attachment.media-upload-container { + flex: 0 0 auto; + max-height: 300px; + max-width: 100%; + } + .attachment { flex: 1 0 30%; margin: 0.5em 0.7em 0.6em 0.0em; @@ -82,9 +89,7 @@ img.media-upload { margin-bottom: -2px; max-height: 300px; - width: 100%; - height: 100%; - flex: 1; + max-width: 100%; } .oembed { diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index d0210286..19a00aeb 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -25,7 +25,7 @@ <i class="icon-cancel" @click="clearError"></i> </div> <div class="attachments"> - <div class="attachment base03-border" v-for="file in newStatus.files"> + <div class="media-upload-container attachment base03-border" v-for="file in newStatus.files"> <i class="fa icon-cancel" @click="removeMediaFile(file)"></i> <img class="thumbnail media-upload" :src="file.image" v-if="type(file) === 'image'"></img> <video v-if="type(file) === 'video'" :src="file.image" controls></video> @@ -40,6 +40,7 @@ <script src="./post_status_form.js"></script> <style lang="scss"> + .tribute-container { ul { padding: 0px; diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index b1359d13..a762f914 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -1,3 +1,5 @@ +import { rgbstr2hex } from '../../services/color_convert/color_convert.js' + export default { data () { return { @@ -19,13 +21,6 @@ export default { }) }, mounted () { - const rgbstr2hex = (rgb) => { - if (rgb[0] === '#') { - return rgb - } - rgb = rgb.match(/\d+/g) - return `#${((Number(rgb[0]) << 16) + (Number(rgb[1]) << 8) + Number(rgb[2])).toString(16)}` - } this.bgColorLocal = rgbstr2hex(this.$store.state.config.colors['base00']) this.fgColorLocal = rgbstr2hex(this.$store.state.config.colors['base02']) this.textColorLocal = rgbstr2hex(this.$store.state.config.colors['base05']) diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue index ba315faa..6c150a7a 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -63,9 +63,14 @@ width: -moz-webkit-fill-available; stretch: fill; margin: 0.2em 0 0.7em 0; - border-radius: 5px; + border-radius: 10px; border-style: solid; border-color: inherit; border-width: 1px; + overflow: hidden; + + p { + margin-bottom: 0; + } } </style> diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js new file mode 100644 index 00000000..6e67a321 --- /dev/null +++ b/src/components/user_card_content/user_card_content.js @@ -0,0 +1,64 @@ +import { hex2rgb } from '../../services/color_convert/color_convert.js' + +export default { + props: [ 'user', 'switcher' ], + computed: { + headingStyle () { + const color = this.$store.state.config.colors['base00'] + if (color) { + const rgb = hex2rgb(color) + console.log(rgb) + return { + backgroundColor: `rgb(${Math.floor(rgb[0] * 0.53)}, ${Math.floor(rgb[1] * 0.56)}, ${Math.floor(rgb[2] * 0.59)})`, + backgroundImage: `url(${this.user.cover_photo})` + } + } + }, + bodyStyle () { + return { + background: `linear-gradient(to bottom, rgba(0, 0, 0, 0), ${this.$store.state.config.colors['base00']} 80%)` + } + }, + isOtherUser () { + return this.user.id !== this.$store.state.users.currentUser.id + }, + loggedIn () { + return this.$store.state.users.currentUser + }, + dailyAvg () { + const days = Math.ceil((new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000)) + return Math.round(this.user.statuses_count / days) + } + }, + methods: { + followUser () { + const store = this.$store + store.state.api.backendInteractor.followUser(this.user.id) + .then((followedUser) => store.commit('addNewUsers', [followedUser])) + }, + unfollowUser () { + const store = this.$store + store.state.api.backendInteractor.unfollowUser(this.user.id) + .then((unfollowedUser) => store.commit('addNewUsers', [unfollowedUser])) + }, + blockUser () { + const store = this.$store + store.state.api.backendInteractor.blockUser(this.user.id) + .then((blockedUser) => store.commit('addNewUsers', [blockedUser])) + }, + unblockUser () { + const store = this.$store + store.state.api.backendInteractor.unblockUser(this.user.id) + .then((unblockedUser) => store.commit('addNewUsers', [unblockedUser])) + }, + toggleMute () { + const store = this.$store + store.commit('setMuted', {user: this.user, muted: !this.user.muted}) + store.state.api.backendInteractor.setUserMute(this.user) + }, + setProfileView (v) { + const store = this.$store + store.commit('setProfileView', { v }) + } + } +} diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue index 5635a177..4c40c55f 100644 --- a/src/components/user_card_content/user_card_content.vue +++ b/src/components/user_card_content/user_card_content.vue @@ -84,69 +84,7 @@ </div> </template> -<script> - export default { - props: [ 'user', 'switcher' ], - computed: { - headingStyle () { - let color = this.$store.state.config.colors['base00'] - if (color) { - let rgb = this.$store.state.config.colors['base00'].match(/\d+/g) - return { - backgroundColor: `rgb(${Math.floor(rgb[0] * 0.53)}, ${Math.floor(rgb[1] * 0.56)}, ${Math.floor(rgb[2] * 0.59)})`, - backgroundImage: `url(${this.user.cover_photo})` - } - } - }, - bodyStyle () { - return { - background: `linear-gradient(to bottom, rgba(0, 0, 0, 0), ${this.$store.state.config.colors['base00']} 80%)` - } - }, - isOtherUser () { - return this.user.id !== this.$store.state.users.currentUser.id - }, - loggedIn () { - return this.$store.state.users.currentUser - }, - dailyAvg () { - const days = Math.ceil((new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000)) - return Math.round(this.user.statuses_count / days) - } - }, - methods: { - followUser () { - const store = this.$store - store.state.api.backendInteractor.followUser(this.user.id) - .then((followedUser) => store.commit('addNewUsers', [followedUser])) - }, - unfollowUser () { - const store = this.$store - store.state.api.backendInteractor.unfollowUser(this.user.id) - .then((unfollowedUser) => store.commit('addNewUsers', [unfollowedUser])) - }, - blockUser () { - const store = this.$store - store.state.api.backendInteractor.blockUser(this.user.id) - .then((blockedUser) => store.commit('addNewUsers', [blockedUser])) - }, - unblockUser () { - const store = this.$store - store.state.api.backendInteractor.unblockUser(this.user.id) - .then((unblockedUser) => store.commit('addNewUsers', [unblockedUser])) - }, - toggleMute () { - const store = this.$store - store.commit('setMuted', {user: this.user, muted: !this.user.muted}) - store.state.api.backendInteractor.setUserMute(this.user) - }, - setProfileView (v) { - const store = this.$store - store.commit('setProfileView', { v }) - } - } - } -</script> +<script src="./user_card_content.js"></script> <style lang="scss"> @import '../../_variables.scss'; @@ -164,7 +102,6 @@ .profile-panel-body { top: -0em; padding-top: 4em; - word-wrap: break-word; } diff --git a/src/main.js b/src/main.js index b6544a5a..6c5bf83e 100644 --- a/src/main.js +++ b/src/main.js @@ -63,54 +63,55 @@ const store = new Vuex.Store({ strict: process.env.NODE_ENV !== 'production' }) -const routes = [ - { name: 'root', path: '/', redirect: '/main/all' }, - { path: '/main/all', component: PublicAndExternalTimeline }, - { path: '/main/public', component: PublicTimeline }, - { path: '/main/friends', component: FriendsTimeline }, - { path: '/tag/:tag', component: TagTimeline }, - { name: 'conversation', path: '/notice/:id', component: ConversationPage, meta: { dontScroll: true } }, - { name: 'user-profile', path: '/users/:id', component: UserProfile }, - { name: 'mentions', path: '/:username/mentions', component: Mentions }, - { name: 'settings', path: '/settings', component: Settings }, - { name: 'registration', path: '/registration', component: Registration }, - { name: 'user-settings', path: '/user-settings', component: UserSettings } -] - -const router = new VueRouter({ - mode: 'history', - routes, - scrollBehavior: (to, from, savedPosition) => { - if (to.matched.some(m => m.meta.dontScroll)) { - return false - } - return savedPosition || { x: 0, y: 0 } - } -}) - const i18n = new VueI18n({ locale: currentLocale, fallbackLocale: 'en', messages }) -/* eslint-disable no-new */ -new Vue({ - router, - store, - i18n, - el: '#app', - render: h => h(App) -}) - window.fetch('/static/config.json') .then((res) => res.json()) - .then(({name, theme, background, logo, registrationOpen}) => { + .then((data) => { + const {name, theme, background, logo, registrationOpen} = data store.dispatch('setOption', { name: 'name', value: name }) store.dispatch('setOption', { name: 'theme', value: theme }) store.dispatch('setOption', { name: 'background', value: background }) store.dispatch('setOption', { name: 'logo', value: logo }) store.dispatch('setOption', { name: 'registrationOpen', value: registrationOpen }) + + const routes = [ + { name: 'root', path: '/', redirect: data['defaultPath'] || '/main/all' }, + { path: '/main/all', component: PublicAndExternalTimeline }, + { path: '/main/public', component: PublicTimeline }, + { path: '/main/friends', component: FriendsTimeline }, + { path: '/tag/:tag', component: TagTimeline }, + { name: 'conversation', path: '/notice/:id', component: ConversationPage, meta: { dontScroll: true } }, + { name: 'user-profile', path: '/users/:id', component: UserProfile }, + { name: 'mentions', path: '/:username/mentions', component: Mentions }, + { name: 'settings', path: '/settings', component: Settings }, + { name: 'registration', path: '/registration', component: Registration }, + { name: 'user-settings', path: '/user-settings', component: UserSettings } + ] + + const router = new VueRouter({ + mode: 'history', + routes, + scrollBehavior: (to, from, savedPosition) => { + if (to.matched.some(m => m.meta.dontScroll)) { + return false + } + return savedPosition || { x: 0, y: 0 } + } + }) + + /* eslint-disable no-new */ + new Vue({ + router, + store, + i18n, + el: '#app', + render: h => h(App) + }) }) window.fetch('/static/terms-of-service.html') diff --git a/src/services/color_convert/color_convert.js b/src/services/color_convert/color_convert.js new file mode 100644 index 00000000..13dd8979 --- /dev/null +++ b/src/services/color_convert/color_convert.js @@ -0,0 +1,34 @@ +import { map } from 'lodash' + +const rgb2hex = (r, g, b) => { + [r, g, b] = map([r, g, b], (val) => { + val = Math.ceil(val) + val = val < 0 ? 0 : val + val = val > 255 ? 255 : val + return val + }) + return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}` +} + +const hex2rgb = (hex) => { + const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex) + return result ? { + r: parseInt(result[1], 16), + g: parseInt(result[2], 16), + b: parseInt(result[3], 16) + } : null +} + +const rgbstr2hex = (rgb) => { + if (rgb[0] === '#') { + return rgb + } + rgb = rgb.match(/\d+/g) + return `#${((Number(rgb[0]) << 16) + (Number(rgb[1]) << 8) + Number(rgb[2])).toString(16)}` +} + +export { + rgb2hex, + hex2rgb, + rgbstr2hex +} diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 449ffd51..6863bd0a 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -1,4 +1,5 @@ -import { times, map } from 'lodash' +import { times } from 'lodash' +import { rgb2hex, hex2rgb } from '../color_convert/color_convert.js' // While this is not used anymore right now, I left it in if we want to do custom // styles that aren't just colors, so user can pick from a few different distinct @@ -56,16 +57,6 @@ const setStyle = (href, commit) => { cssEl.addEventListener('load', setDynamic) } -const rgb2hex = (r, g, b) => { - [r, g, b] = map([r, g, b], (val) => { - val = Math.ceil(val) - val = val < 0 ? 0 : val - val = val > 255 ? 255 : val - return val - }) - return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}` -} - const setColors = (col, commit) => { const head = document.head const body = document.body @@ -111,15 +102,6 @@ const setColors = (col, commit) => { commit('setOption', { name: 'customTheme', value: col }) } -const hex2rgb = (hex) => { - const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex) - return result ? { - r: parseInt(result[1], 16), - g: parseInt(result[2], 16), - b: parseInt(result[3], 16) - } : null -} - const setPreset = (val, commit) => { window.fetch('/static/styles.json') .then((data) => data.json()) diff --git a/static/config.json b/static/config.json index 8b596992..b186246b 100644 --- a/static/config.json +++ b/static/config.json @@ -3,5 +3,6 @@ "theme": "pleroma-dark", "background": "/static/bg.jpg", "logo": "/static/logo.png", - "registrationOpen": false + "registrationOpen": false, + "defaultPath": "/main/all" } |