CSS: Define responsive breakpoints, add to Access Controls, Bridges, Call Block, Buttons class.

This commit is contained in:
Nate
2019-10-19 20:29:44 -06:00
parent e29c4df126
commit a413f35f70
5 changed files with 53 additions and 14 deletions

View File

@@ -154,7 +154,7 @@
echo " </th>\n";
echo th_order_by('access_control_name', $text['label-access_control_name'], $order_by, $order);
echo th_order_by('access_control_default', $text['label-access_control_default'], $order_by, $order);
echo th_order_by('access_control_description', $text['label-access_control_description'], $order_by, $order);
echo th_order_by('access_control_description', $text['label-access_control_description'], $order_by, $order, null, "class='hide-xs'");
if (permission_exists('access_control_edit') && $_SESSION['theme']['list_row_edit_button']['boolean'] == 'true') {
echo " <td class='action-button'>&nbsp;</td>\n";
}
@@ -173,7 +173,7 @@
echo " </td>\n";
echo " <td><a href='".$list_row_url."'>".escape($row['access_control_name'])."</a></td>\n";
echo " <td>".escape($row['access_control_default'])."</td>\n";
echo " <td class='description overflow'>".escape($row['access_control_description'])."</td>\n";
echo " <td class='description overflow hide-xs'>".escape($row['access_control_description'])."</td>\n";
if (permission_exists('access_control_edit') && $_SESSION['theme']['list_row_edit_button']['boolean'] == 'true') {
echo " <td class='action-button'>";
echo button::create(['type'=>'button','title'=>$text['button-edit'],'icon'=>$_SESSION['theme']['button_icon_edit'],'link'=>$list_row_url]);

View File

@@ -193,7 +193,7 @@
echo th_order_by('bridge_name', $text['label-bridge_name'], $order_by, $order);
echo th_order_by('bridge_destination', $text['label-bridge_destination'], $order_by, $order);
echo th_order_by('bridge_enabled', $text['label-bridge_enabled'], $order_by, $order, null, "class='center'");
echo " <th>".$text['label-description']."</th>\n";
echo " <th class='hide-sm-dn'>".$text['label-description']."</th>\n";
if (permission_exists('bridge_edit') && $_SESSION['theme']['list_row_edit_button']['boolean'] == 'true') {
echo " <td class='action-button'>&nbsp;</td>\n";
}
@@ -225,7 +225,7 @@
echo " <td class='no-link center'>";
echo button::create(['type'=>'submit','class'=>'link','label'=>$text['label-'.$row['bridge_enabled']],'title'=>$text['button-toggle'],'onclick'=>"list_self_check('checkbox_".$x."'); list_action_set('toggle'); list_form_submit('form_list')"]);
echo " </td>\n";
echo " <td class='description overflow'>".escape($row['bridge_description'])."</td>\n";
echo " <td class='description overflow hide-sm-dn'>".escape($row['bridge_description'])."</td>\n";
if (permission_exists('bridge_edit') && $_SESSION['theme']['list_row_edit_button']['boolean'] == 'true') {
echo " <td class='action-button'>";
echo button::create(['type'=>'button','title'=>$text['button-edit'],'icon'=>$_SESSION['theme']['button_icon_edit'],'link'=>$list_row_url]);

View File

@@ -186,7 +186,7 @@
echo th_order_by('call_block_action', $text['label-action'], $order_by, $order);
echo th_order_by('call_block_enabled', $text['label-enabled'], $order_by, $order, null, "class='center'");
echo th_order_by('date_added', $text['label-date-added'], $order_by, $order);
echo " <th>".$text['label-description']."</th>\n";
echo " <th class='hide-md-dn'>".$text['label-description']."</th>\n";
if (permission_exists('call_block_edit') && $_SESSION['theme']['list_row_edit_button']['boolean'] == 'true') {
echo " <td class='action-button'>&nbsp;</td>\n";
}
@@ -218,7 +218,7 @@
echo button::create(['type'=>'submit','class'=>'link','label'=>$text['label-'.$row['call_block_enabled']],'title'=>$text['button-toggle'],'onclick'=>"list_self_check('checkbox_".$x."'); list_action_set('toggle'); list_form_submit('form_list')"]);
echo " </td>\n";
echo " <td>".date("j M Y H:i:s".(defined('TIME_24HR') && TIME_24HR == 1 ? 'a' : null), $row['date_added'])."</td>\n";
echo " <td class='description overflow'>".escape($row['call_block_description'])."</td>\n";
echo " <td class='description overflow hide-md-dn'>".escape($row['call_block_description'])."</td>\n";
if (permission_exists('call_block_edit') && $_SESSION['theme']['list_row_edit_button']['boolean'] == 'true') {
echo " <td class='action-button'>";
echo button::create(['type'=>'button','title'=>$text['button-edit'],'icon'=>$_SESSION['theme']['button_icon_edit'],'link'=>$list_row_url]);

View File

@@ -58,7 +58,7 @@ if (!class_exists('button')) {
!$array['icon'] ||
$array['class'] == 'link'
)) {
$hide_class = $array['icon'] && $button_icons != 'always' && $button_icons != 'never' ? 'hide-sm' : null;
$hide_class = $array['icon'] && $button_icons != 'always' && $button_icons != 'never' ? 'hide-md-dn' : null;
$pad_class = $array['icon'] ? 'pad' : null;
$button .= "<span class='button-label ".$hide_class." ".$pad_class."'>".$array['label']."</span>";
}

View File

@@ -712,17 +712,56 @@ $default_login = ($_REQUEST['login'] == 'default') ? true : false;
}
<?php } ?>
/* small screen, hide button labels if icons present */
@media (max-width: 990px) {
button:not(.btn-link) > span.button-label.hide-sm {
/* BREAKPOINTS ****************************************************************/
/* hide button labels on medium and smaller screens (only if icons present) */
@media (max-width: 991.98px) {
button:not(.btn-link) > span.button-label.hide-md-dn {
display: none;
}
}
/* large screen show button labels if icons present */
@media (min-width: 991px) {
button:not(.btn-link) > span.button-label.hide-sm {
display: inline;
/* screens = extra small */
@media (max-width: 575.98px) {
.hide-xs,
.hide-sm-dn,
.hide-md-dn,
.hide-lg-dn {
display: none;
}
}
/* screens = small */
@media (min-width: 576px) and (max-width: 767.98px) {
.hide-sm,
.hide-sm-dn,
.hide-md-dn,
.hide-lg-dn {
display: none;
}
}
/* screens = medium */
@media (min-width: 768px) and (max-width: 991.98px) {
.hide-md,
.hide-md-dn,
.hide-lg-dn {
display: none;
}
}
/* screens = large */
@media (min-width: 992px) and (max-width: 1199.98px) {
.hide-lg,
.hide-lg-dn {
display: none;
}
}
/* screens >= extra large */
@media (min-width: 1200px) {
.hide-xl {
display: none;
}
}