GuzhavinAleksey/Vmeda.Online
1
0
Fork 0
forked from CIT/Vmeda.Online
Code Pull Requests Activity

MOBILE-2730 style: Improve atto image alignment

Browse Source
This commit is contained in:
Pau Ferrer Ocaña 2018-11-21 09:58:21 +01:00
parent bb3a525a5b
commit 9d2a0bef46
2 changed files with 28 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/app/app.scss
View File

@ -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*/

6
src/directives/format-text.ts
View File

@ -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);