Апостроф CMS выравнивает пользовательский макет виджета

Question

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

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

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

Инструменты разработки и желаемый результат

home.html

<section class="bodysect--dark" id="artists">
    <h2 class="body__heading">Artists</h2>
    <div class="artistContainer">
        {{
          apos.area(data.page, 'artist', {
            widgets: {
              artist: {}
            }
          })
        }}
    </div>
</section>

Widget.html

    <div class="artist">
    <div class="artistImage">
        {{ apos.singleton(data.widget, 'areaImage', 'apostrophe-images', {
            widgets: {
                'apostrophe-images': {}
            }
        }) }}
    </div>
    <div class="artistName">
        {{ apos.singleton(data.widget, 'singletonName', 'apostrophe-rich-text', {
            widgets: {
                'apostrophe-rich-text': {}
             }
        }) }}
    </div>
    <div class="artistBio">
        {{ apos.singleton(data.widget, 'singletonBio', 'apostrophe-rich-text', {
            widgets: {
                'apostrophe-rich-text': {}
            }
        }) }}
    </div>
</div>

виджет index.js

module.exports = {        
  extend: 'apostrophe-widgets',        
  label: 'Artist',        
  contextualOnly: true,
  addFields: [
    {
      name: 'artistImage',
      type: 'singleton',
      label: 'Image Area',
      required: true
    },
    {
      name: 'artistName',
      type: 'singleton',
      label: 'Name Area',
      required: true
    },
    {
      name: 'artistBio',
      type: 'singleton',
      label: 'Bio Area',
      required: true
    },
  ]        
};

Заранее спасибо!

Answer 1

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

.horizontal-area {
  .apos-area-widgets, // proper context for logged-in user
  .apos-area { // proper context for logged-out user
    display: flex;
  }

  .apos-area-widget-wrapper {
    flex-grow: 1;
    flex-basis: 0;
  }
}

http://g.recordit.co/IlOPYKRUo0.gif

Возможно, вы захотите предоставить дополнительные изменения пользовательского интерфейса для настройки горизонтальной линии "Добавить содержимое" в пределах области горизонтальной области.