Как я могу выложить div в дорожках, используя html / css? - PullRequest
Новая
       28

Как я могу выложить div в дорожках, используя html / css?

0 голосов
/ 30 апреля 2019

Я разрабатываю что-то похожее на доску Канбан, где я раскладываю карты (представленные в виде div) в столбцах (также представленных в виде div). Рисунок 1 иллюстрирует текущее состояние моего приложения:

layout now

Каждая карта - это div. Карты сгруппированы в столбцы (красные пунктирные линии), которые представляют собой элементы div, расположенные в макете flexbox. Раскраска показывает, к какому выпуску привязана карта.

Код: index.html: 

<!doctype html>
<html>
<head>
    <title>Some code to copy & paste into your project</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="map">
        <div class="column">
            <div class="card release-1"></div>
            <div class="card release-2"></div>
            <div class="card release-3"></div>
        </div>
        <div class="column">
            <div class="card release-1"></div>
            <div class="card release-1"></div>
            <div class="card release-3"></div>
            <div class="card release-3"></div>
        </div>
        <div class="column">
            <div class="card release-2"></div>
            <div class="card release-2"></div>
            <div class="card release-3"></div>
            <div class="card release-3"></div>
        </div>
    </div>
</body>
</html>

styles.css: 

.map {
    display: flex;
    flex-direction: row;
}

.column {
    display: flex;
    flex-direction: column;

}

.card {
    width: 100px;
    height: 80px;
    border: 1px solid black;
    margin: 10px;
}

.release-1 {
    background-color: #f90;
}

.release-2 {
    background-color: #0a0;
}

.release-3 {
    background-color: #0af;
}

Теперь я бы хотел добавить дорожки для релизов. Результат должен выглядеть так:

layout with swimlanes I'm aiming for

Я не нашел способа поместить что-то вроде «точек останова» в гибкие колонны, чтобы переместить карты на следующую дорожку.

Сетка будет работать, но мне нужно знать, сколько у меня будет колонн и дорожек. Поскольку карта визуализируется динамически, мне также потребуется динамически отображать CSS. Не похоже на лучший подход для меня: -P

Совершенно очевидно, что это можно сделать с помощью html-таблиц, но есть две причины, которые мешают мне их использовать:

  1. В те времена, когда плавающие макеты на основе div и css заменяли макеты таблиц, я узнал, что таблицы следует использовать только для данных, а не для макетов
  2. Весь мой макет уже основан на div. Переход на таблицы потребует больших усилий, которых я бы хотел избежать

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

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

Прямо сейчас я не использую фронтальный фреймворк, просто обычный html & css. Я бы хотел так держать, если возможно.

У вас есть предложения?

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

Ответы [ 2 ]

1 голос
/ 30 апреля 2019

Что-то в этом направлении? 

document.querySelector('.toggle-lanes')
  .addEventListener('click', toggleLanes)

function toggleLanes(e) {
document.querySelector('.toggle-lanes-target').classList.toggle('lanes')
  
}
:root {
  --column: 1;
  --release: 1;
}

.cards {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-rows: auto;
  grid-auto-flow: row dense;
}
.cards .card {
  padding: 20px;
  box-sizing: border-box;
  border-radius: 20px;
  border: 3px solid silver;
  border: 1px solid silver;
  background-color: gold;
  grid-column-start: var(--column);
}
.cards .card.release-1 {
  background-color: orange;
}
.cards .card.release-2 {
  background-color: green;
}
.cards .card.release-3 {
  background-color: blue;
}

.cards.lanes {
  grid-auto-flow: column dense;
}
.cards.lanes .card {
  grid-row-start: calc(var(--release) * 1000 + var(--num));
}

.card[style*="--release:1"],
.card[style*="--release: 1"] {
  background-color: orange;
}

.card[style*="--release:2"],
.card[style*="--release: 2"] {
  background-color: green;
}

.card[style*="--release:3"],
.card[style*="--release: 3"] {
  background-color: blue;
}
<button class="toggle-lanes">Click to toggle swimming lanes</button>

<div class="cards toggle-lanes-target">
  <div class="card" style="--column: 1; --release: 1; --num: 1">C1 R1 A</div>
  <div class="card" style="--column: 2; --release: 1; --num: 1">C2 R1 B</div>
  <div class="card" style="--column: 2; --release: 1; --num: 2">C2 R1 C</div>
  <div class="card" style="--column: 1; --release: 2; --num: 1">C1 R2 D</div>
  <div class="card" style="--column: 3; --release: 2; --num: 1">C3 R2 E</div>
  <div class="card" style="--column: 3; --release: 2; --num: 2">C3 R2 F</div>
  <div class="card" style="--column: 1; --release: 3; --num: 1">C1 R3 G</div>
  <div class="card" style="--column: 2; --release: 3; --num: 1">C2 R3 H</div>
  <div class="card" style="--column: 2; --release: 3; --num: 2">C2 R3 I</div>
  <div class="card" style="--column: 3; --release: 3; --num: 1">C3 R3 J</div>
  <div class="card" style="--column: 3; --release: 3; --num: 2">C3 R3 J</div>
</div>

Использование пользовательских свойств CSS помогает решить проблему бесконечных столбцов / строк

Единственная небольшая сложность заключается в вычислении значения свойства --num. Это в основном подсчет карт с одинаковыми значениями --column и --release.

Динамические таблицы стилей понадобятся только в том случае, если вы будете использовать неограниченное количество версий.

0 голосов
/ 01 мая 2019

Благодаря помощи @yunzen я нашел решение. В основном все сводилось к размещению релизов в сетке. Карты найдут свою позицию в контейнере выпуска.

Недостатком этого подхода является то, что части CSS должны генерироваться динамически в соответствии с количеством столбцов и выпусков в сетке. Но он облегчает понимание кода по сравнению с ответом @ yunzen.

Минимальное решение

HTML: 

<!doctype html>
<html>
<head>
    <title>Grid</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="map">

        <div class="release column-1 release-1">
            <div class="card"></div>
        </div>
        <div class="release column-1 release-2">
            <div class="card"></div>
        </div>
        <div class="release column-1 release-3">
            <div class="card"></div>
        </div>

        <div class="release column-2 release-1">
            <div class="card"></div>
            <div class="card"></div>
        </div>
        <div class="release column-2 release-3">
            <div class="card"></div>
            <div class="card"></div>
        </div>

        <div class="release column-3 release-2">
            <div class="card"></div>
            <div class="card"></div>
        </div>
        <div class="release column-3 release-3">
            <div class="card"></div>
            <div class="card"></div>
        </div>

    </div>
</body>
</html>

CSS: 

/* STATIC */

.map {
    display: grid;
    grid-auto-columns: min-content;
    grid-auto-rows: min-content;
}

.card {
    width: 100px;
    height: 80px;
    border: 1px solid black;
    margin: 10px;
}

/* DYNAMIC */

.column-1 {
    grid-column-start: 1;
    grid-column-end: 2;
}

.column-2 {
    grid-column-start: 2;
    grid-column-end: 3;
}

.column-3 {
    grid-column-start: 3;
    grid-column-end: 4;
}

.release-1 {
    grid-row-start: 1;
    grid-row-end: 2;
}

.release-2 {
    grid-row-start: 2;
    grid-row-end: 3;
}

.release-3 {
    grid-row-start: 3;
    grid-row-end: 4;
}

/* DEBUG */

.release-1 .card {
    background-color: #f90;
}

.release-2 .card {
    background-color: #0a0;
}

.release-3 .card {
    background-color: #0af;
}

с колонными контейнерами

Поскольку я хотел бы сохранить контейнеры столбцов, я расширил приведенный выше код следующим образом:

HTML: 

<!doctype html>
<html>
<head>
    <title>Grid with Columns</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="map">

        <div class="column column-1">
            <div class="release release-1">
                <div class="card"></div>
            </div>
            <div class="release release-2">
                <div class="card"></div>
            </div>
            <div class="release release-3">
                <div class="card"></div>
            </div>
        </div>

        <div class="column column-2">
            <div class="release release-1">
                <div class="card"></div>
                <div class="card"></div>
            </div>
            <div class="release release-3">
                <div class="card"></div>
                <div class="card"></div>
            </div>
        </div>

        <div class="column column-3">
            <div class="release release-2">
                <div class="card"></div>
                <div class="card"></div>
            </div>
            <div class="release release-3">
                <div class="card"></div>
                <div class="card"></div>
            </div>
        </div>

    </div>
</body>
</html>

CSS: 

/* STATIC */

.map {
    display: grid;
    grid-auto-columns: min-content;
    grid-auto-rows: min-content;
}

.column {
    display: contents;
}

.card {
    width: 100px;
    height: 80px;
    border: 1px solid black;
    margin: 10px;
}

/* DYNAMIC */

.column-1 .release {
    grid-column-start: 1;
    grid-column-end: 2;
}

.column-2 .release {
    grid-column-start: 2;
    grid-column-end: 3;
}

.column-3 .release {
    grid-column-start: 3;
    grid-column-end: 4;
}

.release-1 {
    grid-row-start: 1;
    grid-row-end: 2;
}

.release-2 {
    grid-row-start: 2;
    grid-row-end: 3;
}

.release-3 {
    grid-row-start: 3;
    grid-row-end: 4;
}

/* DEBUG */

.release-1 .card {
    background-color: #f90;
}

.release-2 .card {
    background-color: #0a0;
}

.release-3 .card {
    background-color: #0af;
}

Наиболее интересной частью этого является "display: contents;" для колонн-контейнеров. Поддержка браузера для этой функции по-прежнему плоха , поэтому мне, возможно, придется вернуться к первому примеру. Если вы хотите узнать больше об этом, посмотрите здесь .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...