Оберните содержимое вокруг элемента справа, а затем откройте его при превышении минимальной ширины - PullRequest
Новая
       7

Оберните содержимое вокруг элемента справа, а затем откройте его при превышении минимальной ширины

0 голосов
/ 13 ноября 2018

Я пытаюсь обернуть текст вокруг изображения, расположенного справа, и сместить изображение ниже текста, когда экран становится слишком маленьким.

С учетом этих дополнительных требований:

  • Компонент Text имеет минимальную ширину для содержимого рядом со столбцом (скажем, 300 пикселей), что при превышении толкает изображение ниже текста.
  • Размер компонента изображения неизвестен.
  • Изображения будут отображаться с исходным размером, который может определять, отображается ли он справа от текста или под ним.
  • При печати

* должны применяться те же правила1015 * Пример

spec

Что я пробовал?

Мое текущее решение - это комбинация различных подходов.Он грязный / хакерский, поскольку использует JS для достижения части своих целей, что в итоге не соответствует требованию печати. ​​

Он работает следующим образом:

  • В html визуализируйте ИЗОБРАЖЕНИЕ послеТЕКСТ и плавающее ИЗОБРАЖЕНИЕ вправо так, чтобы изображение было справа с текстом, обернутым вокруг него.
  • В JS при изменении размера окна if windowWidth - imageWidth > 300px (наша минимальная ширина содержимого) обновите стиль контейнера доиспользуйте flex-direction column-reverse, чтобы изображение отображалось под текстом.

Не выполняется требование печати, так как проверка минимальной ширины происходит при изменении размера окна на основе ширины в пределах окна.В идеале это должно теперь основываться на ширине в пределах формата / макета бумаги.

Это выглядит следующим образом:

HTML: 

<div class="article-template-1">
    <div class="article-content" ng-style="articleContentResponsiveStyle">
        <div class="main-image-holder">
            <div ng-repeat="imageLink in images">
                <img ng-attr-src="{{imageLink.Location}}"
                     ng-attr-title="{{imageLink.Description}}" />
            </div>
        </div>
        <span model="Article.Content" bind-html-compile>{{Article.Content}}</span>
    </div>
</div>

CSS: 

#newsArticle .article-content-holder .article-template-1 .article-content .main-image-holder {
    float: right;
    display: flex;
    width: fit-content;
    flex-direction: column;
}

#newsArticle .article-content-holder .article-template-1 .article-content .main-image-holder img {
    max-width: 100%;
    width: fit-content;
}

Контроллер: 

var appWindow = angular.element(this.$window);
appWindow.bind("resize", this.updateArticleResponsiveStyle);

private exceedsMinContent:boolean = null;
private updateArticleResponsiveStyle = () => {
    // The minimum size that inline content needs to be before images are repositioned
    const minArticleWidth = 300;

    let windowWidth = window.innerWidth;
    let maxImageContainerWidth = windowWidth - minArticleWidth;
    let imageContainerWidth = angular.element(document.getElementsByClassName('main-image-holder'))[0].getBoundingClientRect().width;

    const previouslyExceedsMinContent = this.exceedsMinContent;
    this.exceedsMinContent = imageContainerWidth > maxImageContainerWidth;

    if (previouslyExceedsMinContent !== this.exceedsMinContent) {

        this.$scope.articleContentResponsiveStyle =
            this.exceedsMinContent ?
            {
                "display": "flex",
                "flex-direction": "column-reverse"
            } :
            {
                "display": "block"
            }

        this.$scope.$apply();
    }
}

Да, я считаю это неполное решение неудачным и предпочел бы чистыйПодход CSS, если это возможно.

...