Compact image modal layout (#22475)

ciar4n · HLeithner · commit 6c6824f6737c · 2019-06-15T11:00:12.000+02:00
* Media field style and layout

* Small screen considerations

* Tweaks

* Revert js change

* indent

* Fix scroll in chrome
diff --git a/administrator/components/com_media/views/images/tmpl/default.php b/administrator/components/com_media/views/images/tmpl/default.php
@@ -65,28 +65,30 @@
 ?>
 <div class="container-popup">
 
-	<form action="index.php?option=com_media&amp;asset=<?php echo $asset; ?>&amp;author=<?php echo $author; ?>" class="form-vertical" id="imageForm" method="post" enctype="multipart/form-data">
+	<form action="index.php?option=com_media&amp;asset=<?php echo $asset; ?>&amp;author=<?php echo $author; ?>" class="form-horizontal" id="imageForm" method="post" enctype="multipart/form-data">
 
 		<div id="messages" style="display: none;">
 			<span id="message"></span><?php echo JHtml::_('image', 'media/dots.gif', '...', array('width' => 22, 'height' => 12), true); ?>
 		</div>
 
 		<div class="well">
-			<div class="row">
-				<div class="span12 control-group">
+			<div class="row-fluid">
+				<div class="span8 control-group">
 					<div class="control-label">
-						<label class="control-label" for="folder"><?php echo JText::_('COM_MEDIA_DIRECTORY'); ?></label>
+						<label for="folder"><?php echo JText::_('COM_MEDIA_DIRECTORY'); ?></label>
 					</div>
 					<div class="controls">
 						<?php echo $this->folderList; ?>
 						<button class="btn" type="button" id="upbutton" title="<?php echo JText::_('COM_MEDIA_DIRECTORY_UP'); ?>"><?php echo JText::_('COM_MEDIA_UP'); ?></button>
 					</div>
 				</div>
-				<div class="pull-right">
-					<button class="btn btn-success button-save-selected" type="button" <?php if (!empty($onClick)) :
-					// This is for Mootools compatibility ?>onclick="<?php echo $onClick; ?>"<?php endif; ?> data-dismiss="modal"><?php echo JText::_('COM_MEDIA_INSERT'); ?></button>
-					<button class="btn button-cancel" type="button" onclick="window.parent.jQuery('.modal.in').modal('hide');<?php if (!empty($onClick)) :
-						// This is for Mootools compatibility ?>parent.jModalClose();<?php endif ?>" data-dismiss="modal"><?php echo JText::_('JCANCEL'); ?></button>
+				<div class="span4 control-group">
+					<div class="pull-right">
+						<button class="btn btn-success button-save-selected" type="button" <?php if (!empty($onClick)) :
+							// This is for Mootools compatibility ?>onclick="<?php echo $onClick; ?>"<?php endif; ?> data-dismiss="modal"><?php echo JText::_('COM_MEDIA_INSERT'); ?></button>
+						<button class="btn button-cancel" type="button" onclick="window.parent.jQuery('.modal.in').modal('hide');<?php if (!empty($onClick)) :
+							// This is for Mootools compatibility ?>parent.jModalClose();<?php endif ?>" data-dismiss="modal"><?php echo JText::_('JCANCEL'); ?></button>
+					</div>
 				</div>
 			</div>
 		</div>
@@ -95,15 +97,20 @@
 
 		<div class="well">
 			<div class="row-fluid">
-				<div class="span6 control-group">
+				<div class="span12 control-group">
 					<div class="control-label">
 						<label for="f_url"><?php echo JText::_('COM_MEDIA_IMAGE_URL'); ?></label>
 					</div>
 					<div class="controls">
 						<input type="text" id="f_url" value="" />
 					</div>
 				</div>
-				<?php if (!$this->state->get('field.id')) : ?>
+			</div>
+		</div>
+
+		<?php if (!$this->state->get('field.id')) : ?>
+			<div class="well">
+				<div class="row-fluid">
 					<div class="span6 control-group">
 						<div class="control-label">
 							<label title="<?php echo JText::_('COM_MEDIA_ALIGN_DESC'); ?>" class="noHtmlTip" for="f_align"><?php echo JText::_('COM_MEDIA_ALIGN'); ?></label>
@@ -117,9 +124,7 @@
 							</select>
 						</div>
 					</div>
-				<?php endif; ?>
-			</div>
-			<?php if (!$this->state->get('field.id')) : ?>
+				</div>
 				<div class="row-fluid">
 					<div class="span6 control-group">
 						<div class="control-label">
@@ -161,13 +166,11 @@
 						</div>
 					</div>
 				</div>
-			<?php endif; ?>
-
 			<input type="hidden" id="dirPath" name="dirPath" />
 			<input type="hidden" id="f_file" name="f_file" />
 			<input type="hidden" id="tmpl" name="component" />
-
 		</div>
+		<?php endif; ?>
 	</form>
 
 	<?php if ($user->authorise('core.create', 'com_media')) : ?>
diff --git a/administrator/components/com_media/views/imageslist/tmpl/default.php b/administrator/components/com_media/views/imageslist/tmpl/default.php
@@ -27,7 +27,6 @@
 			@media (max-width: 767px) {
 				li.imgOutline.thumbnail.height-80.width-80.center {
 					float: right;
-					margin-right: 15px;
 				}
 			}
 		'
@@ -40,7 +39,6 @@
 			@media (max-width: 767px) {
 				li.imgOutline.thumbnail.height-80.width-80.center {
 					float: left;
-					margin-left: 15px;
 				}
 			}
 		'
diff --git a/administrator/templates/isis/css/template-rtl.css b/administrator/templates/isis/css/template-rtl.css
@@ -7766,15 +7766,9 @@ ul.manager .height-50 .icon-folder-2 {
 	line-height: 35px;
 	font-size: 30px;
 }
-#imageForm {
-	margin: -25px 0 0;
-}
 #imageForm .well {
 	margin-bottom: 5px;
 }
-.thumbnails-media {
-	margin-left: 0;
-}
 .thumbnails-media .thumbnail {
 	background-color: #f4f4f4;
 	border-radius: 3px;
@@ -7783,8 +7777,7 @@ ul.manager .height-50 .icon-folder-2 {
 	padding: 0px;
 	height: 100px;
 	width: 100px;
-	margin: 8px 16px;
-	margin-left: 0 !important;
+	margin: 8px;
 	position: relative;
 	text-align: center;
 	overflow: hidden;
@@ -7969,6 +7962,7 @@ ul.manager .height-50 .icon-folder-2 {
 }
 #mediamanager-form {
 	margin: 0 -10px;
+	overflow-x: hidden;
 }
 #mediamanager-form > .muted {
 	padding: 0px;
@@ -7980,10 +7974,14 @@ ul.manager .height-50 .icon-folder-2 {
 #mediamanager-form .checkbox input {
 	margin-top: 3px;
 }
+#mediamanager-form .thumbnails {
+	margin: 0 -8px;
+	overflow-x: hidden;
+}
 #mediamanager-form .thumbnails .thumbnail {
 	height: 120px;
 	width: 120px;
-	margin: 0 18px 18px 0;
+	margin: 8px;
 }
 #mediamanager-form .thumbnails .imgThumb label,
 #mediamanager-form .thumbnails .imgTotal {
@@ -8047,6 +8045,7 @@ body.modal-open {
 	padding: 0;
 	width: 100%;
 	height: auto;
+	max-height: none;
 }
 .modal-body .container-fluid {
 	padding-top: 15px;
@@ -8065,7 +8064,10 @@ body.modal-open {
 	}
 }
 .container-popup {
-	padding: 28px 10px 10px 10px;
+	padding: 10px;
+}
+.field-media-wrapper iframe {
+	max-height: 75vh;
 }
 body .navbar,
 body .navbar-fixed-top {
diff --git a/administrator/templates/isis/css/template.css b/administrator/templates/isis/css/template.css
@@ -7766,15 +7766,9 @@ ul.manager .height-50 .icon-folder-2 {
 	line-height: 35px;
 	font-size: 30px;
 }
-#imageForm {
-	margin: -25px 0 0;
-}
 #imageForm .well {
 	margin-bottom: 5px;
 }
-.thumbnails-media {
-	margin-left: 0;
-}
 .thumbnails-media .thumbnail {
 	background-color: #f4f4f4;
 	border-radius: 3px;
@@ -7783,8 +7777,7 @@ ul.manager .height-50 .icon-folder-2 {
 	padding: 0px;
 	height: 100px;
 	width: 100px;
-	margin: 8px 16px;
-	margin-left: 0 !important;
+	margin: 8px;
 	position: relative;
 	text-align: center;
 	overflow: hidden;
@@ -7969,6 +7962,7 @@ ul.manager .height-50 .icon-folder-2 {
 }
 #mediamanager-form {
 	margin: 0 -10px;
+	overflow-x: hidden;
 }
 #mediamanager-form > .muted {
 	padding: 0px;
@@ -7980,10 +7974,14 @@ ul.manager .height-50 .icon-folder-2 {
 #mediamanager-form .checkbox input {
 	margin-top: 3px;
 }
+#mediamanager-form .thumbnails {
+	margin: 0 -8px;
+	overflow-x: hidden;
+}
 #mediamanager-form .thumbnails .thumbnail {
 	height: 120px;
 	width: 120px;
-	margin: 0 18px 18px 0;
+	margin: 8px;
 }
 #mediamanager-form .thumbnails .imgThumb label,
 #mediamanager-form .thumbnails .imgTotal {
@@ -8047,6 +8045,7 @@ body.modal-open {
 	padding: 0;
 	width: 100%;
 	height: auto;
+	max-height: none;
 }
 .modal-body .container-fluid {
 	padding-top: 15px;
@@ -8065,7 +8064,10 @@ body.modal-open {
 	}
 }
 .container-popup {
-	padding: 28px 10px 10px 10px;
+	padding: 10px;
+}
+.field-media-wrapper iframe {
+	max-height: 75vh;
 }
 body .navbar,
 body .navbar-fixed-top {
diff --git a/administrator/templates/isis/html/layouts/joomla/form/field/media.php b/administrator/templates/isis/html/layouts/joomla/form/field/media.php
@@ -93,7 +93,7 @@
 	data-url="<?php echo $url; ?>"
 	data-modal=".modal"
 	data-modal-width="100%"
-	data-modal-height="400px"
+	data-modal-height="645px"
 	data-input=".field-media-input"
 	data-button-select=".button-select"
 	data-button-clear=".button-clear"
@@ -112,7 +112,6 @@
 		array(
 			'title'       => JText::_('JLIB_FORM_CHANGE_IMAGE'),
 			'closeButton' => true,
-			'footer'      => '<button type="button" class="btn" data-dismiss="modal">' . JText::_('JCANCEL') . '</button>',
 		)
 	);
 
diff --git a/administrator/templates/isis/less/blocks/_media.less b/administrator/templates/isis/less/blocks/_media.less
@@ -9,14 +9,12 @@ ul.manager .height-50 .icon-folder-2 {
 }
 
 #imageForm {
-	margin: -25px 0 0;
 	.well {
 		margin-bottom: 5px;
 	}
 }
 .thumbnails-media {
 	@thumbSize:100px;
-	margin-left: 0;
 	.thumbnail {
 		background-color: #f4f4f4;
 		border-radius: @inputBorderRadius;
@@ -25,8 +23,7 @@ ul.manager .height-50 .icon-folder-2 {
 		padding: 0px;
 		height: @thumbSize;
 		width: @thumbSize;
-		margin: 8px 16px;
-		margin-left: 0 !important;
+		margin: 8px;
 		position: relative;
 		text-align: center;
 		overflow: hidden;
@@ -203,6 +200,7 @@ ul.manager .height-50 .icon-folder-2 {
 }
 #mediamanager-form {
 	margin: 0 -10px;
+	overflow-x: hidden;
 	> .muted {
 		padding: 0px;
 	}
@@ -214,10 +212,12 @@ ul.manager .height-50 .icon-folder-2 {
 		}
 	}
 	.thumbnails {
+		margin: 0 -8px;
+		overflow-x: hidden;
 		.thumbnail {
 			height: 120px;
 			width: 120px;
-			margin: 0 18px 18px 0;
+			margin: 8px
 		}
 		.imgThumb label, .imgTotal {
 			line-height: 120px;
diff --git a/administrator/templates/isis/less/blocks/_modals.less b/administrator/templates/isis/less/blocks/_modals.less
@@ -25,6 +25,7 @@ body.modal-open {
   padding: 0;
   width: 100%;
   height: auto;
+  max-height: none;
   .container-fluid {
     padding-top: 15px;
     padding-bottom: 15px;
@@ -46,7 +47,12 @@ body.modal-open {
 	}
 }
 
-/* Component pop-up */
+// Component pop-up
 .container-popup {
-	padding: 28px 10px 10px 10px;
+	padding: 10px;
+}
+
+// Media modal
+.field-media-wrapper iframe {
+  max-height: 75vh;
 }
diff --git a/media/media/css/popup-imagelist.css b/media/media/css/popup-imagelist.css
@@ -3,6 +3,11 @@
  * @license		GNU General Public License version 2 or later; see LICENSE.txt
  */
 
+.contentpane {
+	padding: 0 !important;
+	overflow-x: hidden;
+}
+
 .item {
 	float: left;
 	border: 1px solid #ccc !important;
@@ -64,7 +69,7 @@ html>body .item img {
 }
 
 .thumbnails.thumbnails-media {
-	margin-left: 0;
+	margin: 0 -8px;
 }
 .thumbnails-media .thumbnail {
 	background-color: #f4f4f4;
@@ -74,8 +79,7 @@ html>body .item img {
 	padding: 0px;
 	height: 100px;
 	width: 100px;
-	margin: 8px 16px;
-	margin-left: 0 !important;
+	margin: 8px;
 	position: relative;
 	text-align: center;
 	overflow: hidden;
diff --git a/media/media/css/popup-imagemanager.css b/media/media/css/popup-imagemanager.css
@@ -3,6 +3,17 @@
  * @license		GNU General Public License version 2 or later; see LICENSE.txt
  */
 
+@media only screen and (min-width: 768px) {
+	#imageForm .control-group,
+	#uploadform .control-group {
+	    margin-bottom: 0;
+	}
+}
+
+#uploadform.well {
+    margin-bottom: -26px;
+}
+
 img {
 	border: 0 none;
 }
@@ -25,14 +36,13 @@ button:hover {
 
 iframe {
 	width: 100%;
-	overflow-x: false;
 	border: 0 none;
 	margin: 0 0 0.5em 0;
 	padding: 0;
 }
 
 iframe#imageframe {
-	height: 200px;
+	height: 350px;
 }
 
 a:hover {

Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,6 @@`
`27`	`27`	`@media (max-width: 767px) {`
`28`	`28`	`li.imgOutline.thumbnail.height-80.width-80.center {`
`29`	`29`	`float: right;`
`30`		`- margin-right: 15px;`
`31`	`30`	`}`
`32`	`31`	`}`
`33`	`32`	`'`
`@@ -40,7 +39,6 @@`
`40`	`39`	`@media (max-width: 767px) {`
`41`	`40`	`li.imgOutline.thumbnail.height-80.width-80.center {`
`42`	`41`	`float: left;`
`43`		`- margin-left: 15px;`
`44`	`42`	`}`
`45`	`43`	`}`
`46`	`44`	`'`
Original file line number	Diff line number	Diff line change
`@@ -9,14 +9,12 @@ ul.manager .height-50 .icon-folder-2 {`
`9`	`9`	`}`
`10`	`10`
`11`	`11`	`#imageForm {`
`12`		`- margin: -25px 0 0;`
`13`	`12`	`.well {`
`14`	`13`	`margin-bottom: 5px;`
`15`	`14`	`}`
`16`	`15`	`}`
`17`	`16`	`.thumbnails-media {`
`18`	`17`	`@thumbSize:100px;`
`19`		`- margin-left: 0;`
`20`	`18`	`.thumbnail {`
`21`	`19`	`background-color: #f4f4f4;`
`22`	`20`	`border-radius: @inputBorderRadius;`
`@@ -25,8 +23,7 @@ ul.manager .height-50 .icon-folder-2 {`
`25`	`23`	`padding: 0px;`
`26`	`24`	`height: @thumbSize;`
`27`	`25`	`width: @thumbSize;`
`28`		`- margin: 8px 16px;`
`29`		`- margin-left: 0 !important;`
	`26`	`+ margin: 8px;`
`30`	`27`	`position: relative;`
`31`	`28`	`text-align: center;`
`32`	`29`	`overflow: hidden;`
`@@ -203,6 +200,7 @@ ul.manager .height-50 .icon-folder-2 {`
`203`	`200`	`}`
`204`	`201`	`#mediamanager-form {`
`205`	`202`	`margin: 0 -10px;`
	`203`	`+ overflow-x: hidden;`
`206`	`204`	`> .muted {`
`207`	`205`	`padding: 0px;`
`208`	`206`	`}`
`@@ -214,10 +212,12 @@ ul.manager .height-50 .icon-folder-2 {`
`214`	`212`	`}`
`215`	`213`	`}`
`216`	`214`	`.thumbnails {`
	`215`	`+ margin: 0 -8px;`
	`216`	`+ overflow-x: hidden;`
`217`	`217`	`.thumbnail {`
`218`	`218`	`height: 120px;`
`219`	`219`	`width: 120px;`
`220`		`- margin: 0 18px 18px 0;`
	`220`	`+ margin: 8px`
`221`	`221`	`}`
`222`	`222`	`.imgThumb label, .imgTotal {`
`223`	`223`	`line-height: 120px;`