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
deleted 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
new 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>