From d6c5c7707f6595828f9d86fc9acc591487d7f776 Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eromano@users.noreply.github.com>
Date: Sat, 14 Oct 2017 08:33:15 +0100
Subject: [PATCH] fix demo layout tag and social (#2473)

---
 .../components/social/social.component.html   | 29 ++++++++--------
 .../components/social/social.component.scss   |  9 +++--
 .../app/components/tag/tag.component.html     | 34 ++++++++++---------
 .../app/components/tag/tag.component.scss     |  5 ++-
 4 files changed, 42 insertions(+), 35 deletions(-)

diff --git a/demo-shell-ng2/app/components/social/social.component.html b/demo-shell-ng2/app/components/social/social.component.html
index 7bd1e17bff..07a4990cff 100644
--- a/demo-shell-ng2/app/components/social/social.component.html
+++ b/demo-shell-ng2/app/components/social/social.component.html
@@ -1,16 +1,17 @@
 <label for="nodeId"><b>Insert Node Id</b></label><br>
 <input id="nodeId" type="text" size="48" [(ngModel)]="nodeId"><br>
-<md-grid-list cols="2" rowHeight="100px">
-    <md-grid-tile>
-        <md-list>
-            <md-list-item> <div class="adf-social-title" >Like component</div> </md-list-item>
-            <md-list-item> <adf-like [nodeId]="nodeId"></adf-like></md-list-item>
-        </md-list>
-    </md-grid-tile>
-    <md-grid-tile>
-        <md-list>
-            <md-list-item> <div class="adf-social-title" >Rating component</div> </md-list-item>
-            <md-list-item> <adf-rating [nodeId]="nodeId"></adf-rating></md-list-item>
-        </md-list>
-    </md-grid-tile>
-</md-grid-list>
+
+<div fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
+    <div class="adf-social-example-area" fxFlex.gt-md="1 1 auto">
+        <md-card>
+            <div class="adf-social-title">Like component</div>
+            <adf-like [nodeId]="nodeId"></adf-like>
+        </md-card>
+    </div>
+    <div class="adf-social-example-area" fxFlex.gt-md="1 1 auto">
+        <md-card>
+            <div class="adf-social-title">Rating component</div>
+            <adf-rating [nodeId]="nodeId"></adf-rating>
+        </md-card>
+    </div>
+</div>
diff --git a/demo-shell-ng2/app/components/social/social.component.scss b/demo-shell-ng2/app/components/social/social.component.scss
index 7ba46a48a3..d1977438b2 100644
--- a/demo-shell-ng2/app/components/social/social.component.scss
+++ b/demo-shell-ng2/app/components/social/social.component.scss
@@ -1,3 +1,8 @@
-.adf-social-title{
-
+.adf-social-example-area {
+    margin: 10px;
+}
+
+
+.adf-social-example-title {
+    padding-bottom: 12px;
 }
diff --git a/demo-shell-ng2/app/components/tag/tag.component.html b/demo-shell-ng2/app/components/tag/tag.component.html
index 11d44c424a..6a26d0fe3e 100644
--- a/demo-shell-ng2/app/components/tag/tag.component.html
+++ b/demo-shell-ng2/app/components/tag/tag.component.html
@@ -1,19 +1,21 @@
 <label for="nodeId"><b>Insert Node Id</b></label><br>
 <input id="nodeId" type="text" size="48" [(ngModel)]="nodeId"><br>
-<div class="adf-tag-example-area">
-    <md-card>
-        <adf-tag-node-actions-list [nodeId]="nodeId"></adf-tag-node-actions-list>
-    </md-card>
-</div>
-<div class="adf-tag-example-area">
-    <md-card>
-        <div class="adf-tag-example-title">List Tags Content Services</div>
-        <adf-tag-list></adf-tag-list>
-    </md-card>
-</div>
-<div class="adf-tag-example-area">
-    <md-card>
-        <div class="adf-tag-example-title">Tag list By Node ID</div>
-        <adf-tag-node-list [nodeId]="nodeId"></adf-tag-node-list>
-    </md-card>
+<div fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
+    <div class="adf-tag-example-area" fxFlex.gt-md="1 1 auto">
+        <md-card>
+            <adf-tag-node-actions-list [nodeId]="nodeId"></adf-tag-node-actions-list>
+        </md-card>
+    </div>
+    <div class="adf-tag-example-area" fxFlex.gt-md="1 1 auto">
+        <md-card>
+            <div class="adf-tag-example-title">List Tags Content Services</div>
+            <adf-tag-list></adf-tag-list>
+        </md-card>
+    </div>
+    <div class="adf-tag-example-area" fxFlex.gt-md="1 1 auto">
+        <md-card>
+            <div class="adf-tag-example-title">Tag list By Node ID</div>
+            <adf-tag-node-list [nodeId]="nodeId"></adf-tag-node-list>
+        </md-card>
+    </div>
 </div>
diff --git a/demo-shell-ng2/app/components/tag/tag.component.scss b/demo-shell-ng2/app/components/tag/tag.component.scss
index 292e1264f4..b416d4fd67 100644
--- a/demo-shell-ng2/app/components/tag/tag.component.scss
+++ b/demo-shell-ng2/app/components/tag/tag.component.scss
@@ -1,9 +1,8 @@
 .adf-tag-example-area {
-    width: calc(33.3333333333% - 16px);
-    margin: 8px;
-    float: left;
+    margin: 10px;
 }
 
+
 .adf-tag-example-title {
     padding-bottom: 12px;
 }