[4.0] [com_associations] Improving display of the sidebyside page (#2…

…7111)
joomla · Nov 30, 2019 · b7048c7 · b7048c7
1 parent a49712d
commit b7048c7
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 8 deletions.
diff --git a/administrator/components/com_associations/Field/Modal/AssociationField.php b/administrator/components/com_associations/Field/Modal/AssociationField.php
@@ -45,8 +45,8 @@ protected function getInput()
 		// The active item id field.
 		$value = (int) $this->value > 0 ? (int) $this->value : '';
 
-		Factory::getDocument()->addScriptOptions('modal-associations', ['itemId' => $value]);
-		HTMLHelper::_('script', 'com_associations/modal-associations.min.js', ['version' => 'auto', 'relative' => true]);
+		Factory::getDocument()->addScriptOptions('admin_associations_modal', ['itemId' => $value]);
+		HTMLHelper::_('script', 'com_associations/admin_associations_modal.min.js', ['version' => 'auto', 'relative' => true]);
 
 		// Setup variables for display.
 		$html = array();

diff --git a/administrator/components/com_associations/tmpl/association/edit.php b/administrator/components/com_associations/tmpl/association/edit.php
@@ -56,9 +56,11 @@
 		<div class="outer-panel" id="right-panel">
 			<div class="inner-panel">
 				<div class="language-selector">
-					<h3 class="target-text"><?php echo Text::_('COM_ASSOCIATIONS_ASSOCIATED_ITEM'); ?></h3>
-					<?php echo $this->form->getInput('modalassociation'); ?>
-					<?php echo $this->form->getInput('itemlanguage'); ?>
+					<div class="clearfix">
+						<h3 class="target-text"><?php echo Text::_('COM_ASSOCIATIONS_ASSOCIATED_ITEM'); ?></h3>
+					</div>
+					<div class="langtarget"><?php echo $this->form->getInput('itemlanguage'); ?></div>
+					<div class="modaltarget"><?php echo $this->form->getInput('modalassociation'); ?></div>
 				</div>
 				<iframe id="target-association" name="target-association" title="target-association"
 					src="<?php echo $this->defaultTargetSrc; ?>"
@@ -72,7 +74,6 @@
 				</iframe>
 			</div>
 		</div>
-
 	</div>
 
 	<input type="hidden" name="task" value="">

diff --git a/build/media_source/com_associations/css/sidebyside.css b/build/media_source/com_associations/css/sidebyside.css
@@ -32,9 +32,26 @@
 	border: 0 !important;
 }
 
+.sidebyside .langtarget {
+	float: left;
+}
+
+.sidebyside .modaltarget {
+	float: left;
+	margin-left: .5rem;
+}
+
+.sidebyside #target-association {
+	margin-top: .5rem;
+}
+
+.sidebyside #reference-association {
+	margin-top: 3.35rem;
+}
+
 .target-text {
 	float: left;
-	width: 30%;
+	width: auto;
 }
 
 /* RTL overrides */
@@ -54,17 +71,56 @@ html[dir=rtl] .sidebyside .full-width .inner-panel {
 	padding: 0 !important;
 }
 
+html[dir=rtl] .sidebyside .langtarget {
+	float: right;
+}
+
+html[dir=rtl] .sidebyside .modaltarget {
+	float: right;
+	margin-left: 0;
+	margin-right: .5rem;
+}
+
 html[dir=rtl] .target-text {
 	float: right;
 }
 
 /* Responsive layout */
-@media (max-width: 767px) {
+@media (max-width: 1140px) {
+	.sidebyside #reference-association {
+		margin-top: 6.2rem;
+	}
+
+	.sidebyside .langtarget {
+		float: none;
+	}
+
+	.sidebyside .modaltarget {
+		float: left;
+		margin-left: 0;
+	}
+
+	html[dir=rtl] .sidebyside .langtarget {
+		float: none;
+	}
+
+	html[dir=rtl] .sidebyside .modaltarget {
+		float: right;
+		margin-left: 0;
+		margin-right: 0;
+	}
+}
+
+@media (max-width: 767.98px) {
 	.sidebyside .outer-panel {
 		float: none;
 		width: 100%;
 	}
 
+	.sidebyside #reference-association {
+		margin-top: 0;
+	}
+
 	.sidebyside #left-panel .inner-panel {
 		padding: 0;
 	}