first implementation of link card #64

src/app/components/stream/status/card/card.component.html

@@ -1,3 +1,8 @@
-<p>
-  card works!
-</p>
+<div class="card">
+    <a *ngIf="card.type === 'link'" class="card__link" href="{{ card.url }}" target="_blank">
+        <img class="card__link--image" src="{{ card.image }}" alt="" />
+        
+        <h3 class="card__link--title">{{ card.title }}</h3>
+        <span class="card__link--host">{{ host }}</span>
+    </a>
+</div>

src/app/components/stream/status/card/card.component.scss

@@ -0,0 +1,44 @@
+@import "variables";
+// @import "mixins";
+
+.card {
+    border: 1px solid $card-border-color;
+    background-color: $column-background;
+    border-radius: 3px;
+    transition: all .2s;
+    white-space: nowrap;
+    overflow: hidden;
+
+    &:hover {
+        background-color: lighten($column-background, 5);
+    }
+
+    &__link {
+        display: block;
+        text-decoration: none;
+        color: whitesmoke;
+
+        &--image {
+            width: 55px;
+            height: 55px;
+            float: left;
+            object-fit: cover;
+            border-right: 1px solid $card-border-color;
+            margin-right: 10px;
+        }
+
+        &--title {
+            margin: 10px 0 0 0px;
+            font-size: 1em;
+        }
+
+        &--host {
+            margin: 10px 0 0 0px;
+            font-size: 0.8em;
+            opacity: .7;
+        }
+
+
+    }
+    
+}

src/app/components/stream/status/card/card.component.ts

@@ -11,11 +11,15 @@ export class CardComponent implements OnInit {
 
     @Input() card: Card;
 
+    host: string;
+
     constructor() { }
 
     ngOnInit() {
         console.warn('card');
         console.warn(this.card);
+
+        this.host = this.card.url.replace('https://', '').replace('http://', '').split('/')[0];
     }
 
 }

src/app/components/stream/status/status.component.html

@@ -67,7 +67,7 @@
             (accountSelected)="accountSelected($event)" (hashtagSelected)="hashtagSelected($event)"
             (textSelected)="textSelected()"></app-databinded-text>
 
-        <app-card *ngIf="displayedStatus.card" [card]="displayedStatus.card"></app-card>
+        <app-card class="status__card" *ngIf="displayedStatus.card && !hasAttachments" [card]="displayedStatus.card"></app-card>
 
         <app-attachements *ngIf="!isContentWarned && hasAttachments" class="attachments"
             [attachments]="displayedStatus.media_attachments">

src/app/components/stream/status/status.component.scss

@@ -111,6 +111,11 @@
         margin: 0 10px 0 $avatar-column-space;
         display: block;
     }
+    &__card {
+        word-wrap: break-word;
+        margin: 10px 10px 0 $avatar-column-space;
+        display: block;
+    }
     &__content-warning {
         min-height: 80px;
         display: block; // border: 1px solid greenyellow;

src/app/components/stream/status/status.component.ts

@@ -47,7 +47,7 @@ export class StatusComponent implements OnInit {
     @Input('statusWrapper')
     set statusWrapper(value: StatusWrapper) {
         this._statusWrapper = value;
-        console.warn(value.status);
+        // console.warn(value.status);
         this.status = value.status;
 
         if (this.status.reblog) {

src/sass/_variables.scss

@@ -50,4 +50,6 @@ $button-background-color-hover: lighten($color-primary, 20);
 
 
 
-$column-background: #0f111a;
+$column-background: #0f111a;
+
+$card-border-color: #1e2435;