From acc439f26684d3d188542e904190532ac781c936 Mon Sep 17 00:00:00 2001
From: Roger Braun <roger@rogerbraun.net>
Date: Fri, 4 Nov 2016 12:55:09 +0100
Subject: [PATCH] Attachment CSS fixes.

---
 src/App.scss                             |  24 ------
 src/components/attachment/attachment.vue | 100 +++++++++++++----------
 2 files changed, 58 insertions(+), 66 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index a15751aa..4856f990 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -156,30 +156,6 @@ status.ng-enter.ng-enter-active {
     margin: 1em;
 }
 
-.attachments {
-    display: flex;
-    flex-wrap: wrap;
-}
-
-.attachment, attachment {
-    flex: 1 0 30%;
-    display: flex;
-    margin: 0.2em;
-    align-self: flex-start;
-
-    img {
-        border: 1px solid;
-        border-radius: 0.5em;
-        width: 100%;
-    }
-
-    video {
-        border: 1px solid;
-        border-radius: 0.5em;
-        width: 100%;
-    }
-
-}
 
 .media-body {
     flex: 1
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 7feab42c..b8c55a1a 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -25,54 +25,70 @@
 <script src="./attachment.js"></script>
 
 <style lang="scss">
- .attachment {
-     video {
-         height: 100%;
-     }
+  .attachments {
+      display: flex;
+      flex-wrap: wrap;
+      .attachment {
 
-     .oembed {
-         img {
-             width: 100%;
-             height: 100%;
-         }
-     }
+          flex: 1 0 30%;
+          display: flex;
+          margin: 0.2em;
+          align-self: flex-start;
 
-    .oembed {
-        border: 1px solid rgba(0, 0, 0, 0.14);
-        width: 100%;
+          video {
+              height: 100%;
+              border: 1px solid;
+              border-radius: 0.5em;
+              width: 100%;
+          }
 
-        display: flex;
-        .image {
-            flex: 1;
-            img {
-                border: 0px;
-                border-radius: 0;
-            }
-        }
+          .oembed {
+              img {
+                  width: 100%;
+                  height: 100%;
+              }
+          }
 
-        .text {
-            flex: 2;
-            margin: 8px;
-            h1 {
-                font-size: 14px;
-                margin: 0px;
+          .oembed {
+              border: 1px solid rgba(0, 0, 0, 0.14);
+              width: 100%;
 
-                a {
-                    color: black;
-                }
-            }
-        }
-    }
+              display: flex;
+              .image {
+                  flex: 1;
+                  img {
+                      border: 0px;
+                      border-radius: 0;
+                  }
+              }
 
-     a.image-attachment {
-         display: flex;
-         flex: 1;
+              .text {
+                  flex: 2;
+                  margin: 8px;
+                  h1 {
+                      font-size: 14px;
+                      margin: 0px;
 
-         img {
-             width: 100%;
-             height: 100%;
-             flex: 1;
-         }
-     }
+                      a {
+                          color: black;
+                      }
+                  }
+              }
+          }
+
+          a.image-attachment {
+              display: flex;
+              flex: 1;
+
+              img {
+                  width: 100%;
+                  height: 100%;
+                  flex: 1;
+                  border: 1px solid;
+                  border-radius: 0.5em;
+                  width: 100%;
+              }
+          }
+      }
  }
 </style>