Вы здесь

Как позиционировать регионы?

0

Добрый день, хочу сделать следующий шаблон для друпала
https://jsfiddle.net/strelkovandreyvalerievich/akuwct3s/
Его особенность в том, что почти все регионы position: fixed и фиксированной ширины, причём все регионы могут быть каждый по разному заняты, т.е. на одной странице один набор, на другой - другой

Не знаю как правильнее делается, раз position: fixed и ширина фиксированная, то получается у меня везде позиционирование должно быть строгое.

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

В файле template.php

<?php

function starterkit_preprocess_page(array &$variables) {

  if (!empty($variables['page']['header'])) {
    $variables['header_bar_class'] = 'with-header-bar';
  }
  else {
    $variables['header_bar_class'] = 'without-header-bar';
  }

  if (!empty($variables['page']['top_bar'])) {
    $variables['top_bar_class'] = 'with-top-bar';
  }
  else {
    $variables['top_bar_class'] = 'without-top-bar';
  }

  if (!empty($variables['page']['footer_bar'])) {
    $variables['top_bar_class'] = 'with-footer-bar';
  }
  else {
    $variables['top_bar_class'] = 'without-footer-bar';
  }  

  if (!empty($variables['page']['left_compact_bar'])) {
    $variables['left_compact_bar_class'] = 'with-left-compact-bar';
  }
  else {
    $variables['left_compact_bar_class'] = 'without-left-compact-bar';
  }

  if (!empty($variables['page']['left_bar'])) {
    $variables['left_bar_class'] = 'with-left-bar';
  }
  else {
    $variables['left_bar_class'] = 'without-left-bar';
  }   

  if (!empty($variables['page']['right_bar'])) {
    $variables['right_bar_class'] = 'with-right-bar';
  }
  else {
    $variables['right_bar_class'] = 'without-right-bar';
  }    

  if (!empty($variables['page']['left_sidebar']) && !empty($variables['page']['right_sidebar'])) {
    $variables['content_column_class'] = 'col-md-6';
  }
  elseif (!empty($variables['page']['left_sidebar']) || !empty($variables['page']['right_sidebar'])) {
    $variables['content_column_class'] = 'col-md-9';
  }
  if (empty($variables['page']['left_sidebar']) && empty($variables['page']['right_sidebar'])) {
    $variables['content_column_class'] = 'col-md-12';
  }

}

И уже дальше в page.tpl.php что то подобное

<?php
/**
 * Header
 */
?>

<?php if (($page['header_bar'])): ?>
  <div class="<?php print $header_bar_class; ?> header-bar">  
    <?php print render($page['header_bar']); ?>
  </div>
<?php endif; ?>

<?php
/**
 * Left bar
 */
?>

<div class="<?php print $header_bar_class . ' ' . $top_bar_class . ' ' . $left_compact_bar_class . ' ' . $left_bar_class . ' ' . $right_bar_class; ?> global-content-bar">

  <?php if (!empty($page['left_compact_bar'])): ?>
    <div class="left-compact-bar">
      <?php print render($page['left_compact_bar']); ?>
    </div>
  <?php endif; ?>

  <?php if (!empty($page['left_bar'])): ?>
    <div class="left-bar">
      <?php print render($page['left_bar']); ?>
    </div>
  <?php endif; ?>

<?php
/**
 * Content
 */
?>

<?php if (!empty($page['top_bar'])): ?>
  <div class="top-bar">
    <?php print render($page['top_bar']); ?>
  </div>
<?php endif; ?>

  <div class="content-bar">

    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <?php if (!empty($title)): ?>
            <div class="title-bar">
              <?php print $title; ?>
            </div>
          <?php endif; ?>

          <div class="breadcrumb-bar">
            <?php if (!empty($breadcrumb)): print $breadcrumb;
            endif;?>
          </div>
        </div>
      </div>

      <div class="row">

        <?php if (!empty($page['left_sidebar'])): ?>
          <div class="col-md-3">
            <?php print render($page['left_sidebar']); ?>
          </div>
        <?php endif; ?>

        <div class="<?php print $content_column_class; ?>">
          <?php print $messages; ?>
          <?php if (!empty($tabs)): ?>
            <?php print render($tabs); ?>
          <?php endif; ?>
          <?php print render($page['content']); ?>
        </div>

        <?php if (!empty($page['right_sidebar'])): ?>
          <div class="col-md-3">
            <?php print render($page['right_sidebar']); ?>
          </div>
        <?php endif; ?>
      </div>
    </div>
  </div>

<?php
/**
 * Right bar
 */
?>

  <?php if (!empty($page['right_bar'])): ?>
    <div class="right-bar">
      <?php print render($page['right_bar']); ?>
    </div>
  <?php endif; ?>

<?php
/**
 * Footer bar
 */
?>

<?php if (!empty($page['footer_bar'])): ?>
  <div class="footer-bar">
    <?php print render($page['footer_bar']); ?>
  </div>
<?php endif; ?>  

</div>

Ну а CSS файле там вообще страх начинается, т.е. в завимости от комбинации классов with-.... without-.... with...
Я начинаю различно позиционировать тот или иной регион
Яркий пример:

.with-left-compact-bar.with-left-bar.with-right-bar .content-bar {
  width: calc(100% - 630px);
  margin-left: 380px;
}

.with-left-compact-bar.with-left-bar.without-right-bar .content-bar {
  width: calc(100% - 380px);
  margin-left: 380px;
}

.with-left-compact-bar.without-left-bar.without-right-bar .content-bar {
  width: calc(100% - 130px);
  margin-left: 130px;
}

.without-left-compact-bar.with-left-bar.without-right-bar .content-bar {
  width: calc(100% - 250px);
  margin-left: 250px;
}

.with-left-compact-bar.without-left-bar.with-right-bar .content-bar {
  width: calc(100% - 380px);
  margin-left: 130px;
}

.without-left-compact-bar.with-left-bar.with-right-bar .content-bar {
  width: calc(100% - 500px);
  margin-left: 250px;
}

.without-left-compact-bar.without-left-bar.with-right-bar .content-bar {
  width: calc(100% - 250px);
}

И всё это мне напоминает какой то колхоз, и где внутри думаю, что всё это иначе можно сделать.

Версия Drupal: 
7.x
Категория: 
Theming
Вопрос задан 21.10.2018 - 08:39

А почему бы не использовать любой из доступных CSS фреймворков, чтобы не городить непонятно что на костылях?

Комментарий оставлен 24.10.2018 - 12:06

Ответы