[Sprint/Caesar] March 17th hotfixes (#15)

* (feat): Render comments rich embeds

* (feat): Add Messenger help text

* (fix): Fix discovery channel cards text on small screens

Author: edgebal

src/app/modules/comments/list.component.html

@@ -41,6 +41,18 @@
       <div class="m-ionic-comments--comment">
         <p allow-text-select [innerHtml]="comment.description | tags"></p>
 
+        <!-- Rich content -->
+        <div class="m-ionic-comments--rich-embed"
+          *ngIf="comment.perma_url && comment.title"
+          (click)="openInBrowser(comment.perma_url)"
+        >
+          <img [src]="comment.thumbnail_src" (error)="comment.thumbnail_src = null" *ngIf="comment.thumbnail_src">
+          <div class="m-ionic-comments--rich-embed-meta">
+            <h3>{{comment.title}}</h3>
+            <p>{{comment.perma_url | domain }}</p>
+          </div>
+        </div>
+
         <!-- Images -->
         <div class="m-ionic-image allow-select"
          *ngIf="comment.thumbnail_src && !comment.perma_url">

src/app/modules/comments/list.component.scss

@@ -66,3 +66,44 @@
     }
   }
 }
+
+.m-ionic-comments--rich-embed{
+  margin: 0 16px;
+  border: 1px solid #eeeeee;
+  padding: 8px;
+
+  img{
+    width: 25%;
+    height: 100%;
+    min-width: 25%;
+    max-width: 100%;
+    max-height: 120px;
+    float: left;
+  }
+
+  .m-ionic-comments--rich-embed-meta {
+    margin-left: 25%;
+    padding: 0 8px;
+  }
+
+  h3{
+    font-size:16px;
+    margin: 0 0 8px;
+    padding: 0;
+  }
+
+  p{
+    margin: 0;
+    padding: 0;
+    color:#888;
+  }
+
+  &:before,
+  &:after {
+      content: " ";
+      display: table;
+  }
+  &:after {
+      clear: both;
+  }
+}

src/app/modules/discovery/discovery.component.scss

@@ -92,6 +92,11 @@
         font-size: 12px;
         letter-spacing: 0.5px;
 
+        @media only screen and (max-device-width: 320px) {
+          font-size: 11px;
+          letter-spacing: 0.2px;
+        }
+
         label{
           font-weight: 500;
         }

src/app/modules/messenger/setup.component.html

@@ -30,5 +30,10 @@
 
   </div>
 
+  <div class="m-ionic-messenger--setup-info">
+    <p>You only need to enter this encryption password once as long as you stay signed in.</p>
+    <p>It is important so that no one other than you and the people you are communicating with can access the content of your messages.</p>
+    <p>By default the content of your messages is fully encrypted. For heightened security you may wish to go to your app settings and turn off push notifications in order to disallow metadata from being tracked.</p>
+  </div>
 
 </ion-content>

src/app/modules/messenger/setup.component.scss

@@ -22,3 +22,16 @@
     box-shadow: none;
   }
 }
+
+.m-ionic-messenger--setup-info {
+  padding: 16px;
+
+  p {
+    font-size: 12px;
+    color: #666;
+
+    &:before {
+      content: '\2022\00a0';
+    }
+  }
+}