Improve location message content

src/directives/location.ts

@@ -26,17 +26,16 @@ export default [
                 location: '=',
             },
             controllerAs: 'ctrl',
-            controller: [function() {
-                this.label = this.location.address ? this.location.address
-                        : this.location.lat  + ', ' + this.location.lon;
-            }],
+            controller: [function() { /* nothing */ }],
             template: `
-                <div class="file-message">
+                <div class="location-message">
                     <div class="circle">
                         <i class="material-icons md-24">location_on</i>
                     </div>
-                    <div class="info">
-                            {{ctrl.label}}
+                    <div class="location-details">
+                        <div class="description">{{ ctrl.location.description }}</div>
+                        <div class="details" ng-if="ctrl.location.address">{{ ctrl.location.address }}</div>
+                        <div class="details" ng-if="!ctrl.location.address">{{ ctrl.location.lat }}, {{ ctrl.location.lon }}</div>
                     </div>
                 </div>
             `,

src/sass/components/_message_media.scss

@@ -29,6 +29,8 @@ $loading-ring-thickness: 5px;
     .circle {
         height: $circle-size;
         width: $circle-size;
+        min-width: $circle-size;
+        min-height: $circle-size;
         background-color: grey;
         outline: none;
         position: relative;
@@ -136,7 +138,6 @@ $loading-ring-thickness: 5px;
         height: $circle-size;
         @include mouse-hand;
 
-
         .message-text {
             padding-top: 8px;
         }

src/sass/sections/_conversation.scss

@@ -256,19 +256,6 @@
             .thumbnail {
                 text-align: center;
                 max-width: 100%;
-                //height: 25vh;
-                //> img {
-                //    height: 100%;
-                //    width: auto;
-                //}
-								//
-                //&.location {
-                //    height: 200px;
-                //    > img {
-                //        height: 100%;
-                //        width: auto;
-                //    }
-                //}
             }
             .message-text {
                 margin-top: 8px;
@@ -367,6 +354,28 @@
                 align-items: center;
                 flex-direction: column;
                 padding: 4px 0;
+
+                .location-message {
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: flex-start;
+                    align-items: center;
+
+                    @include mouse-hand;
+
+                    .location-details {
+                        margin-left: 8px;
+
+                        .description {
+                            margin-bottom: 6px;
+                        }
+
+                        .details {
+                            font-size: 0.9em;
+                            line-height: 1.2em;
+                        }
+                    }
+                }
             }
 
             audio:focus {