From 9d2a0bef46e25489f34a8b85a64c56cdd4e9a629 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 21 Nov 2018 09:58:21 +0100
Subject: [PATCH] MOBILE-2730 style: Improve atto image alignment

---
 src/app/app.scss              | 37 +++++++++++++++++++++--------------
 src/directives/format-text.ts |  6 ++++++
 2 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/src/app/app.scss b/src/app/app.scss
index a527a7016..36646d97e 100644
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -625,40 +625,47 @@ ion-app.app-root {
       display: inline-block;
   }
 
+  .atto_image_button_text-top,
+  .atto_image_button_middle,
+  .atto_image_button_text-bottom,
+  .atto_image_button_left,
+  .atto_image_button_right {
+    vertical-align: middle;
+    max-width: 100%;
+    height: auto;
+    width: auto;
+    display: inline-block;
+    margin: 0 0.5em;
+
+    &.img-responsive {
+      /* If the image is display: block then linking the image to URLs won't work. */
+      /*display: inline-block;*/
+      max-width: 100%;
+      height: auto;
+      width: auto;
+    }
+  }
+
   .atto_image_button_text-top {
       vertical-align: text-top;
-      margin: 0 0.5em;
   }
 
   .atto_image_button_middle {
-      vertical-align: middle;
-      margin: 0 0.5em;
-  }
+      vertical-align: middle;  }
 
   .atto_image_button_text-bottom {
       vertical-align: text-bottom;
-      margin: 0 0.5em;
-  }
-
-  .atto_image_button_text-top.img-responsive,
-  .atto_image_button_middle.img-responsive,
-  .atto_image_button_text-bottom.img-responsive {
-      /* If the image is display: block then linking the image to URLs won't work. */
-      display: inline-block;
-      max-width: calc(100% - 1em);
   }
 
   /*rtl:begin:ignore*/
   .atto_image_button_left {
       @include float(start);
       @include margin(0, 0.5em, 0, 0);
-      max-width: calc(100% - 1em);
   }
 
   .atto_image_button_right {
       @include float(end);
       @include margin(0, 0, 0, 0.5em);
-      max-width: calc(100% - 1em);
   }
   /*rtl:end:ignore*/
 
diff --git a/src/directives/format-text.ts b/src/directives/format-text.ts
index 2c46e20f4..b2dc2d10d 100644
--- a/src/directives/format-text.ts
+++ b/src/directives/format-text.ts
@@ -137,6 +137,12 @@ export class CoreFormatTextDirective implements OnChanges {
             container.classList.add('atto_image_button_right');
         } else if (img.classList.contains('atto_image_button_left')) {
             container.classList.add('atto_image_button_left');
+        } else if (img.classList.contains('atto_image_button_text-top')) {
+            container.classList.add('atto_image_button_text-top');
+        } else if (img.classList.contains('atto_image_button_middle')) {
+            container.classList.add('atto_image_button_middle');
+        } else if (img.classList.contains('atto_image_button_text-bottom')) {
+            container.classList.add('atto_image_button_text-bottom');
         }
 
         this.domUtils.wrapElement(img, container);