Add wrapper for the lists

olach · Aug 15, 2017 · 833a238 · 833a238
1 parent 182741a
commit 833a238
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 36 deletions.
diff --git a/assets/css/relationship.css b/assets/css/relationship.css
@@ -1,12 +1,16 @@
 /* Field wrapper: */
 .relationship-field {
+	background-color: white;
+}
+
+/* Wrapper for the lists: */
+.relationship-lists {
 	display: flex;
 	flex-wrap: wrap;
 	border: 1px solid #ddd;
-	background-color: white;
 }
 
-/* Default styling for both lists: */
+/* Default styling for the lists: */
 .relationship-list {
 	flex: 1 0 14em;
 	overflow-x: hidden;

diff --git a/template.php b/template.php
@@ -18,40 +18,42 @@
 <div class="field-content">
 	<div class="relationship-field" data-field="relationship">
 
-		<ul class="relationship-list relationship-list--available">
-			<?php foreach ($all_options as $key => $value): ?>
-				<li>
-					<button type="button" data-key="<?php echo $key; ?>"<?php e(array_key_exists($key, $selected_options), ' disabled') ?> aria-label="<?php echo i18n('add') ?> <?php echo $value ?>">
-						<?php echo $value ?>
-						<span class="icon-add" aria-hidden="true">
-							<i class="icon fa fa-plus-circle"></i>
-						</span>
-					</button>
-				</li>
-			<?php endforeach ?>
-		</ul>
-
-		<ul class="relationship-list relationship-list--selected">
-			<?php foreach ($selected_options as $key => $value): ?>
-				<li data-key="<?php echo $key; ?>" data-focus="true">
-					<input type="checkbox" name="<?php echo $field->name() . '[]' ?>" value="<?php echo $key ?>" checked />
-					<i class="icon icon-left fa fa-bars" aria-hidden="true"></i>
-					<span><?php echo $value; ?></span>
-					<button class="icon-delete" type="button" aria-label="<?php echo i18n('delete') ?> <?php echo $value ?>"><i class="icon fa fa-minus-circle" aria-hidden="true"></i></button>
-				</li>
-			<?php endforeach ?>
-		</ul>
-
-		<ul class="relationship-list relationship-list--unselected">
-			<?php foreach ($unselected_options as $key => $value): ?>
-				<li data-key="<?php echo $key; ?>" data-focus="true">
-					<input type="checkbox" name="<?php echo $field->name() . '[]' ?>" value="<?php echo $key ?>" />
-					<i class="icon icon-left fa fa-bars" aria-hidden="true"></i>
-					<span><?php echo $value; ?></span>
-					<button class="icon-delete" type="button" aria-label="<?php echo i18n('delete') ?> <?php echo $value ?>"><i class="icon fa fa-minus-circle" aria-hidden="true"></i></button>
-				</li>
-			<?php endforeach ?>
-		</ul>
+		<div class="relationship-lists">
+			<ul class="relationship-list relationship-list--available">
+				<?php foreach ($all_options as $key => $value): ?>
+					<li>
+						<button type="button" data-key="<?php echo $key; ?>"<?php e(array_key_exists($key, $selected_options), ' disabled') ?> aria-label="<?php echo i18n('add') ?> <?php echo $value ?>">
+							<?php echo $value ?>
+							<span class="icon-add" aria-hidden="true">
+								<i class="icon fa fa-plus-circle"></i>
+							</span>
+						</button>
+					</li>
+				<?php endforeach ?>
+			</ul>
+
+			<ul class="relationship-list relationship-list--selected">
+				<?php foreach ($selected_options as $key => $value): ?>
+					<li data-key="<?php echo $key; ?>" data-focus="true">
+						<input type="checkbox" name="<?php echo $field->name() . '[]' ?>" value="<?php echo $key ?>" checked />
+						<i class="icon icon-left fa fa-bars" aria-hidden="true"></i>
+						<span><?php echo $value; ?></span>
+						<button class="icon-delete" type="button" aria-label="<?php echo i18n('delete') ?> <?php echo $value ?>"><i class="icon fa fa-minus-circle" aria-hidden="true"></i></button>
+					</li>
+				<?php endforeach ?>
+			</ul>
+
+			<ul class="relationship-list relationship-list--unselected">
+				<?php foreach ($unselected_options as $key => $value): ?>
+					<li data-key="<?php echo $key; ?>" data-focus="true">
+						<input type="checkbox" name="<?php echo $field->name() . '[]' ?>" value="<?php echo $key ?>" />
+						<i class="icon icon-left fa fa-bars" aria-hidden="true"></i>
+						<span><?php echo $value; ?></span>
+						<button class="icon-delete" type="button" aria-label="<?php echo i18n('delete') ?> <?php echo $value ?>"><i class="icon fa fa-minus-circle" aria-hidden="true"></i></button>
+					</li>
+				<?php endforeach ?>
+			</ul>
+		</div>
 
 	</div>
 </div>