[4.0] Improve mobile view of permissions (#27670)

* wip * cs * cs * cs * wip * wip * align * deleted unnecessary class * cs * #27670 (comment) Co-authored-by: infograf768 <infografjms@gmail.com>
joomla · Feb 18, 2020 · af78eed · af78eed
1 parent 1cb34cf
commit af78eed
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 4 deletions.
diff --git a/administrator/templates/atum/scss/vendor/joomla-custom-elements/joomla-tab.scss b/administrator/templates/atum/scss/vendor/joomla-custom-elements/joomla-tab.scss
@@ -246,6 +246,55 @@ joomla-tab {
     #permissions-sliders {
       section[active] {
         padding: 0 !important;
+
+        @include media-breakpoint-down(md) {
+          .respTable {
+            [dir=ltr] & {
+              text-align: right;
+            }
+
+            [dir=rtl] & {
+              text-align: left;
+            }
+          }
+
+          .respTable, .respTable thead, .respTable tbody, .respTable tr, .respTable th, .respTable td {
+            display: block;
+          }
+
+          .respTable thead {
+            position: absolute;
+            top: -1111px;
+            left: -1111px;
+          }
+
+          .respTable td::before {
+            content: attr(data-label) ":";
+            font-weight: $bold-weight;
+
+            [dir=ltr] & {
+              float: left;
+              padding: 0 2em 0 0;
+            }
+
+            [dir=rtl] & {
+              float: right;
+              padding: 0 0 0 2em;
+            }
+          }
+
+          .respTable td:nth-child(1) {
+            font-weight: $bold-weight;
+          }
+
+          .respTable td:last-child {
+            border-bottom: 1em var(--atum-bg-dark-80) solid;
+          }
+
+          .oddCol {
+            background: var(--atum-bg-light);
+          }
+        }
       }
     }
   }

diff --git a/layouts/joomla/form/field/rules.php b/layouts/joomla/form/field/rules.php
@@ -101,7 +101,7 @@
 		<?php foreach ($groups as $group) : ?>
 			<?php $active = (int) $group->value === 1 ? ' active' : ''; ?>
 			<section class="tab-pane<?php echo $active; ?>" name="<?php echo htmlentities(LayoutHelper::render('joomla.html.treeprefix', array('level' => $group->level + 1)), ENT_COMPAT, 'utf-8') . $group->text; ?>" id="permission-<?php echo $group->value; ?>">
-				<table class="table">
+				<table class="table respTable">
 					<thead>
 						<tr>
 							<th style="width: 30%" class="actions" id="actions-th<?php echo $group->value; ?>">
@@ -123,7 +123,7 @@
 						<?php $isSuperUserGroup = Access::checkGroup($group->value, 'core.admin'); ?>
 						<?php foreach ($actions as $action) : ?>
 							<tr>
-								<td headers="actions-th<?php echo $group->value; ?>">
+								<td class="oddCol" data-label="<?php echo Text::_('JLIB_RULES_ACTION'); ?>" headers="actions-th<?php echo $group->value; ?>">
 									<label for="<?php echo $id; ?>_<?php echo $action->name; ?>_<?php echo $group->value; ?>">
 										<?php echo Text::_($action->title); ?>
 									</label>
@@ -133,7 +133,7 @@
 										</div>
 									<?php endif; ?>
 								</td>
-								<td headers="settings-th<?php echo $group->value; ?>">
+								<td data-label="<?php echo Text::_('JLIB_RULES_SELECT_SETTING'); ?>" headers="settings-th<?php echo $group->value; ?>">
 									<div class="d-flex align-items-center">
 										<select data-onchange-task="permissions.apply"
 												class="custom-select novalidate"
@@ -164,7 +164,7 @@ class="custom-select novalidate"
 									</div>
 								</td>
 
-								<td headers="aclaction-th<?php echo $group->value; ?>">
+								<td data-label="<?php echo Text::_('JLIB_RULES_CALCULATED_SETTING'); ?>" headers="aclaction-th<?php echo $group->value; ?>">
 									<?php $result = array(); ?>
 									<?php // Get the group, group parent id, and group global config recursive calculated permission for the chosen action. ?>
 									<?php $inheritedGroupRule 	= Access::checkGroup((int) $group->value, $action->name, $assetId);