diff options
| -rw-r--r-- | src/App.scss | 7 | ||||
| -rw-r--r-- | src/App.vue | 12 | ||||
| -rw-r--r-- | src/assets/nsfw.jpg | bin | 18315 -> 0 bytes | |||
| -rw-r--r-- | src/assets/nsfw.png | bin | 0 -> 18166 bytes | |||
| -rw-r--r-- | src/components/attachment/attachment.js | 16 | ||||
| -rw-r--r-- | src/components/attachment/attachment.vue | 19 | ||||
| -rw-r--r-- | src/components/timeline/timeline.vue | 7 | ||||
| -rw-r--r-- | src/components/user_profile/user_profile.vue | 7 |
8 files changed, 39 insertions, 29 deletions
diff --git a/src/App.scss b/src/App.scss index fd5e6c16..ced2d069 100644 --- a/src/App.scss +++ b/src/App.scss @@ -63,7 +63,7 @@ nav { } -sidebar { +.sidebar { flex: 1; flex-basis: 300px; } @@ -255,3 +255,8 @@ nav { .fade-enter, .fade-leave-active { opacity: 0 } + +.main { + flex: 2; + flex-basis: 500px; +} diff --git a/src/App.vue b/src/App.vue index e46419e0..2cd6d079 100644 --- a/src/App.vue +++ b/src/App.vue @@ -6,14 +6,16 @@ </div> </nav> <div class="container" id="content"> - <sidebar> + <div class="sidebar"> <user-panel></user-panel> <nav-panel></nav-panel> <notifications v-if="currentUser"></notifications> - </sidebar> - <transition name="fade"> - <router-view></router-view> - </transition> + </div> + <div class="main"> + <transition name="fade"> + <router-view></router-view> + </transition> + </div> </div> </div> </template> diff --git a/src/assets/nsfw.jpg b/src/assets/nsfw.jpg Binary files differdeleted file mode 100644 index 6ae4ffe9..00000000 --- a/src/assets/nsfw.jpg +++ /dev/null diff --git a/src/assets/nsfw.png b/src/assets/nsfw.png Binary files differnew file mode 100644 index 00000000..bb6556b4 --- /dev/null +++ b/src/assets/nsfw.png diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js index 9f751863..c88497a2 100644 --- a/src/components/attachment/attachment.js +++ b/src/components/attachment/attachment.js @@ -1,4 +1,4 @@ -import nsfwImage from '../../assets/nsfw.jpg' +import nsfwImage from '../../assets/nsfw.png' import fileTypeService from '../../services/file_type/file_type.service.js' const Attachment = { @@ -7,17 +7,23 @@ const Attachment = { 'nsfw', 'statusId' ], - data: () => ({ nsfwImage }), + data: () => ({ + nsfwImage, + showHidden: false + }), computed: { type () { return fileTypeService.fileType(this.attachment.mimetype) + }, + hidden () { + return this.nsfw && !this.showHidden } }, methods: { - showNsfw () { - this.$store.commit('setNsfw', { id: this.statusId, nsfw: false }) + toggleHidden () { + this.showHidden = !this.showHidden } } } -export default Attachment
\ No newline at end of file +export default Attachment diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index 1e49cbeb..6bc0356a 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -1,15 +1,18 @@ <template> <div class="attachment"> - <a class="image-attachment" v-if="nsfw" v-on:click.prevent="showNsfw()"> + <a class="image-attachment" v-if="hidden" v-on:click.prevent="toggleHidden()"> <img :key="nsfwImage" :src="nsfwImage"></img> </a> + <div class="hider" v-if="nsfw && !hidden"> + <a href="#" @click.prevent="toggleHidden()">Hide</a> + </div> - <a class="image-attachment" v-if="type === 'image' && !nsfw" + <a class="image-attachment" v-if="type === 'image' && !hidden" :href="attachment.url" target="_blank"> <img :src="attachment.url"></img> </a> - <video v-if="type === 'video' && !nsfw" :src="attachment.url" controls></video> + <video v-if="type === 'video' && !hidden" :src="attachment.url" controls></video> <audio v-if="type === 'audio'" :src="attachment.url" controls></audio> @@ -34,12 +37,20 @@ display: flex; flex-wrap: wrap; .attachment { - flex: 1 0 30%; display: flex; margin: 0.2em; align-self: flex-start; + .hider { + position: absolute; + margin: 10px; + padding: 5px; + background: rgba(230,230,230,0.6); + border-radius: 0.5em; + font-weight: bold; + } + video { height: 100%; border: 1px solid; diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index fef96e4e..7de3ffca 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -18,10 +18,3 @@ </div> </template> <script src="./timeline.js"></script> - -<style> - .timeline.panel { - flex: 2; - flex-basis: 500px; - } -</style> diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue index 767982c5..eaa5396d 100644 --- a/src/components/user_profile/user_profile.vue +++ b/src/components/user_profile/user_profile.vue @@ -5,10 +5,3 @@ </template> <script src="./user_profile.js"></script> - -<style> - .user-profile { - flex: 2; - flex-basis: 500px; - } -</style> |
