From e30a8efb0f27e2b0eee49ff69616567adaa0f9b0 Mon Sep 17 00:00:00 2001
From: andryyy <andre.peters@debinux.de>
Date: Tue, 10 Aug 2021 08:48:36 +0200
Subject: [PATCH] [Web] Fix responsive btn block
---
data/web/css/build/014-responsive.css | 241 ++++++++++++++------------
data/web/index.php | 10 +-
2 files changed, 137 insertions(+), 114 deletions(-)
diff --git a/data/web/css/build/014-responsive.css b/data/web/css/build/014-responsive.css
index 060b37c4..2085568a 100644
--- a/data/web/css/build/014-responsive.css
+++ b/data/web/css/build/014-responsive.css
@@ -7,94 +7,113 @@
}
.bootstrap-select {
- max-width: 350px;
+ max-width: 350px;
}
.panel-login .apps .btn {
width: auto;
float: left;
margin-right: 10px;
+ margin-top: auto;
+}
+.panel-login .apps .btn:hover {
+ margin-top: 1px !important;
+ border-bottom-width: 3px;
}
+@media (max-width: 767px) {
+ .panel-login .apps .btn {
+ width: 100%;
+ float: none;
+ margin-bottom: 10px;
+ }
+
+ .panel-login .apps .btn {
+ border-bottom-width: 4px;
+ }
+
+ .media-clearfix::after {
+ clear: both;
+ box-sizing: border-box;
+ }
+
+ .media-clearfix::before {
+ display: table;
+ content: " ";
+ box-sizing: border-box;
+ }
+
+ .xs-show {
+ display: block !important;
+ }
+
+ .js-tabcollapse-panel-group .panel{
+ border: none;
+ box-shadow: none;
+ }
+
+ .js-tabcollapse-panel-group .panel-body {
+ padding: 10px 0;
+ }
+
+ .js-tabcollapse-panel-group .js-tabcollapse-panel-body .panel-body {
+ padding: 0;
+ }
+
+ .js-tabcollapse-panel-body .panel-heading {
+ display: none;
+ }
+
+ .js-tabcollapse-panel-body .well,
+ .panel-body .form-inline.well {
+ border: none;
+ padding: 0;
+ margin: 0;
+ box-shadow: none;
+ background-color: #fff;
+ }
+
+ .js-tabcollapse-panel-heading {
+ display: block;
+ height: 37px;
+ line-height: 37px;
+ text-indent: 15px;
+ }
+ .js-tabcollapse-panel-heading:hover {
+ text-decoration: none;
+ }
+ .js-tabcollapse-panel-heading {
+ position: relative;
+ }
+ .js-tabcollapse-panel-heading:after {
+ content: '';
+ display: block;
+ position: absolute;
+ top: 17px;
+ right: 17px;
+ width: 0;
+ height: 0;
+ margin-left: 2px;
+ vertical-align: middle;
+ border-bottom: 4px dashed;
+ border-right: 4px solid transparent;
+ border-left: 4px solid transparent;
+ }
+ .js-tabcollapse-panel-heading.collapsed:after {
+ border-bottom: none;
+ border-top: 4px dashed;
+ }
-@media (max-width: 767px) {
- .panel-login .apps .btn {
- width: 100%;
- float: none;
- margin-bottom: 10px;
- }
-
- .xs-show {
- display: block !important;
- }
-
- .js-tabcollapse-panel-group .panel{
- border: none;
- box-shadow: none;
- }
-
- .js-tabcollapse-panel-group .panel-body {
- padding: 10px 0;
- }
-
- .js-tabcollapse-panel-group .js-tabcollapse-panel-body .panel-body {
- padding: 0;
- }
-
- .js-tabcollapse-panel-body .panel-heading {
- display: none;
- }
-
- .js-tabcollapse-panel-body .well,
- .panel-body .form-inline.well {
- border: none;
- padding: 0;
- margin: 0;
- box-shadow: none;
- background-color: #fff;
- }
-
- .js-tabcollapse-panel-heading {
- display: block;
- height: 37px;
- line-height: 37px;
- text-indent: 15px;
- }
- .js-tabcollapse-panel-heading:hover {
- text-decoration: none;
- }
- .js-tabcollapse-panel-heading {
- position: relative;
- }
- .js-tabcollapse-panel-heading:after {
- content: '';
- display: block;
- position: absolute;
- top: 17px;
- right: 17px;
- width: 0;
- height: 0;
- margin-left: 2px;
- vertical-align: middle;
- border-bottom: 4px dashed;
- border-right: 4px solid transparent;
- border-left: 4px solid transparent;
- }
- .js-tabcollapse-panel-heading.collapsed:after {
- border-bottom: none;
- border-top: 4px dashed;
- }
-
.recent-login-success {
- font-size: 14px;
- margin-top: 10px !important;
+ font-size: 14px;
+ margin-top: 10px !important;
}
.pull-xs-right {
- float: right !important;
+ float: right !important;
}
.pull-xs-right .dropdown-menu {
- right: 0;
- left: auto;
+ right: 0;
+ left: auto;
}
.text-xs-left {
text-align: left;
@@ -135,7 +154,7 @@
line-height: 15px;
}
.input-xs-lg {
- height: 47px;
+ height: 47px;
padding: 13px 16px;
}
.btn-group:not(.input-group-btn) {
@@ -143,7 +162,7 @@
flex-wrap: wrap;
}
.panel-login .btn-group {
- display: block;
+ display: block;
}
.mass-actions-user .btn-group {
float: none;
@@ -154,7 +173,7 @@
width: 100%;
}
div[class^='mass-actions'] .btn-group .dropdown-menu {
- top: 50%;
+ top: 50%;
}
div[class^='mass-actions'] .btn-group .btn-group .dropdown-menu,
div.mass-actions-quarantine .btn-group .dropdown-menu,
@@ -167,17 +186,17 @@
padding: 8px 20px;
}
div[class^='mass-actions'] .dropdown-header {
- font-size: 14px;
- font-weight: bold;
+ font-size: 14px;
+ font-weight: bold;
}
.space20 {
margin-bottom: 10px;
}
.top100 {
- top: 100% !important;
+ top: 100% !important;
}
.top33 {
- top: 33% !important;
+ top: 33% !important;
}
.footable-filtering .form {
width: 65%;
@@ -189,90 +208,90 @@
text-align: left;
}
.footable-first-visible {
- min-width: 55px;
+ min-width: 55px;
}
table>tbody>tr>td>span.footable-toggle {
- font-size: 24px;
- margin-right: 14px !important;
+ font-size: 24px;
+ margin-right: 14px !important;
}
table>tbody>tr>td>span.footable-toggle + input {
- position: absolute;
- left: 38px;
+ position: absolute;
+ left: 38px;
}
.pagination {
margin-bottom: 5px;
}
tr.footable-filtering>th>form {
- width: 270px;
+ width: 270px;
}
.mass-actions-mailbox {
padding: 0;
}
.panel-xs-lg .panel-heading {
- height: 66px;
- line-height: 47px;
+ height: 66px;
+ line-height: 47px;
}
.panel-xs-lg .btn-group .btn {
- padding-right: 5px;
- padding-left: 5px;
+ padding-right: 5px;
+ padding-left: 5px;
}
.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
- width: 100%;
+ width: 100%;
}
.btn-group:not(.bootstrap-select) {
- width: auto !important;
+ width: auto !important;
}
.bootstrap-select {
- max-width: 100%;
+ max-width: 100%;
}
.img-responsive {
- margin: 0 auto;
+ margin: 0 auto;
}
.btn-group.footable-actions {
- position: absolute;
+ position: absolute;
width: 90vw !important;
left: 0;
height: 36px;
margin-top: -8px;
}
.btn-group.footable-actions .btn {
- padding: 10px 16px 7px;
+ padding: 10px 16px 7px;
line-height: 15px;
display: block;
width: 100%;
}
.btn-group.footable-actions:after {
- content: "";
- display: block;
- clear: both;
+ content: "";
+ display: block;
+ clear: both;
}
.bootstrap-select.btn-group.show-tick .dropdown-menu li a span.text {
- margin-right: 14px;
- white-space: normal;
+ margin-right: 14px;
+ white-space: normal;
}
.clearfix {
- flex-basis: 100%;
- height: 0;
+ flex-basis: 100%;
+ height: 0;
}
.btn-group > .btn-group {
- flex-basis: 100%;
+ flex-basis: 100%;
}
.btn-group .btn {
- display: flex !important;
- align-items: center;
- justify-content: center;
+ display: flex !important;
+ align-items: center;
+ justify-content: center;
}
.btn-group .btn i {
margin-right: 5px;
}
.btn-group .btn .caret {
- margin-left: 5px;
+ margin-left: 5px;
}
.panel-login .btn-group .btn {
- display: block !important;
+ display: block !important;
}
.panel-login .clearfix {
- height: auto;
+ height: auto;
}
}
diff --git a/data/web/index.php b/data/web/index.php
index 47f34279..93e72a77 100644
--- a/data/web/index.php
+++ b/data/web/index.php
@@ -81,7 +81,7 @@ $_SESSION['index_query_string'] = $_SERVER['QUERY_STRING'];
<li<?= ($_SESSION['mailcow_locale'] == $c) ? ' class="active"' : ''; ?>><a href="?<?= http_build_query(array_merge($_GET, array('lang' => $c))) ?>"><span class="flag-icon flag-icon-<?=$c;?>"></span> <?=$v;?></a></li>
<?php } ?>
</ul>
- <?php } ?>
+ <?php } ?>
<div class="clearfix"></div>
</div>
</form>
@@ -99,7 +99,9 @@ $_SESSION['index_query_string'] = $_SERVER['QUERY_STRING'];
foreach ($MAILCOW_APPS as $app) {
if (getenv('SKIP_SOGO') == "y" && preg_match('/^\/SOGo/i', $app['link'])) { continue; }
?>
+ <div class="media-clearfix">
<a href="<?=(isset($app['link'])) ? htmlspecialchars($app['link']) : '';?>" role="button" title="<?=(isset($app['description'])) ? htmlspecialchars($app['description']) : '';?>" class="btn btn-primary btn-lg btn-block"><?= htmlspecialchars($app['name']); ?></a>
+ </div>
<?php
}
}
@@ -108,12 +110,14 @@ $_SESSION['index_query_string'] = $_SERVER['QUERY_STRING'];
foreach ($app_links as $row) {
foreach ($row as $key => $val) {
?>
- <a href="<?= htmlspecialchars($val); ?>" role="button" class="btn btn-primary btn-lg btn-block"><?= htmlspecialchars($key); ?></a>
+ <div class="media-clearfix">
+ <a href="<?= htmlspecialchars($val); ?>" role="button" class="btn btn-primary btn-lg btn-block"><?= htmlspecialchars($key); ?></a>
+ </div>
<?php
}
}
} ?>
- </div>
+ </div>
<?php }
?>
</div>