paxton
/
mailcow
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Web] Fix responsive btn block

master
andryyy 2021-08-10 08:48:36 +02:00
parent 9afea99189
commit e30a8efb0f
No known key found for this signature in database
GPG Key ID: 8EC34FF2794E25EF
2 changed files with 137 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

241
data/web/css/build/014-responsive.css
View File

@ -7,94 +7,113 @@
} }
.bootstrap-select { .bootstrap-select {
max-width: 350px; max-width: 350px;
} }
.panel-login .apps .btn { .panel-login .apps .btn {
width: auto; width: auto;
float: left; float: left;
margin-right: 10px; 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 { .recent-login-success {
font-size: 14px; font-size: 14px;
margin-top: 10px !important; margin-top: 10px !important;
} }
.pull-xs-right { .pull-xs-right {
float: right !important; float: right !important;
} }
.pull-xs-right .dropdown-menu { .pull-xs-right .dropdown-menu {
right: 0; right: 0;
left: auto; left: auto;
} }
.text-xs-left { .text-xs-left {
text-align: left; text-align: left;
@ -135,7 +154,7 @@
line-height: 15px; line-height: 15px;
} }
.input-xs-lg { .input-xs-lg {
height: 47px; height: 47px;
padding: 13px 16px; padding: 13px 16px;
} }
.btn-group:not(.input-group-btn) { .btn-group:not(.input-group-btn) {
@ -143,7 +162,7 @@
flex-wrap: wrap; flex-wrap: wrap;
} }
.panel-login .btn-group { .panel-login .btn-group {
display: block; display: block;
} }
.mass-actions-user .btn-group { .mass-actions-user .btn-group {
float: none; float: none;
@ -154,7 +173,7 @@
width: 100%; width: 100%;
} }
div[class^='mass-actions'] .btn-group .dropdown-menu { div[class^='mass-actions'] .btn-group .dropdown-menu {
top: 50%; top: 50%;
} }
div[class^='mass-actions'] .btn-group .btn-group .dropdown-menu, div[class^='mass-actions'] .btn-group .btn-group .dropdown-menu,
div.mass-actions-quarantine .btn-group .dropdown-menu, div.mass-actions-quarantine .btn-group .dropdown-menu,
@ -167,17 +186,17 @@
padding: 8px 20px; padding: 8px 20px;
} }
div[class^='mass-actions'] .dropdown-header { div[class^='mass-actions'] .dropdown-header {
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
} }
.space20 { .space20 {
margin-bottom: 10px; margin-bottom: 10px;
} }
.top100 { .top100 {
top: 100% !important; top: 100% !important;
} }
.top33 { .top33 {
top: 33% !important; top: 33% !important;
} }
.footable-filtering .form { .footable-filtering .form {
width: 65%; width: 65%;
@ -189,90 +208,90 @@
text-align: left; text-align: left;
} }
.footable-first-visible { .footable-first-visible {
min-width: 55px; min-width: 55px;
} }
table>tbody>tr>td>span.footable-toggle { table>tbody>tr>td>span.footable-toggle {
font-size: 24px; font-size: 24px;
margin-right: 14px !important; margin-right: 14px !important;
} }
table>tbody>tr>td>span.footable-toggle + input { table>tbody>tr>td>span.footable-toggle + input {
position: absolute; position: absolute;
left: 38px; left: 38px;
} }
.pagination { .pagination {
margin-bottom: 5px; margin-bottom: 5px;
} }
tr.footable-filtering>th>form { tr.footable-filtering>th>form {
width: 270px; width: 270px;
} }
.mass-actions-mailbox { .mass-actions-mailbox {
padding: 0; padding: 0;
} }
.panel-xs-lg .panel-heading { .panel-xs-lg .panel-heading {
height: 66px; height: 66px;
line-height: 47px; line-height: 47px;
} }
.panel-xs-lg .btn-group .btn { .panel-xs-lg .btn-group .btn {
padding-right: 5px; padding-right: 5px;
padding-left: 5px; padding-left: 5px;
} }
.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) { .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
width: 100%; width: 100%;
} }
.btn-group:not(.bootstrap-select) { .btn-group:not(.bootstrap-select) {
width: auto !important; width: auto !important;
} }
.bootstrap-select { .bootstrap-select {
max-width: 100%; max-width: 100%;
} }
.img-responsive { .img-responsive {
margin: 0 auto; margin: 0 auto;
} }
.btn-group.footable-actions { .btn-group.footable-actions {
position: absolute; position: absolute;
width: 90vw !important; width: 90vw !important;
left: 0; left: 0;
height: 36px; height: 36px;
margin-top: -8px; margin-top: -8px;
} }
.btn-group.footable-actions .btn { .btn-group.footable-actions .btn {
padding: 10px 16px 7px; padding: 10px 16px 7px;
line-height: 15px; line-height: 15px;
display: block; display: block;
width: 100%; width: 100%;
} }
.btn-group.footable-actions:after { .btn-group.footable-actions:after {
content: ""; content: "";
display: block; display: block;
clear: both; clear: both;
} }
.bootstrap-select.btn-group.show-tick .dropdown-menu li a span.text { .bootstrap-select.btn-group.show-tick .dropdown-menu li a span.text {
margin-right: 14px; margin-right: 14px;
white-space: normal; white-space: normal;
} }
.clearfix { .clearfix {
flex-basis: 100%; flex-basis: 100%;
height: 0; height: 0;
} }
.btn-group > .btn-group { .btn-group > .btn-group {
flex-basis: 100%; flex-basis: 100%;
} }
.btn-group .btn { .btn-group .btn {
display: flex !important; display: flex !important;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.btn-group .btn i { .btn-group .btn i {
margin-right: 5px; margin-right: 5px;
} }
.btn-group .btn .caret { .btn-group .btn .caret {
margin-left: 5px; margin-left: 5px;
} }
.panel-login .btn-group .btn { .panel-login .btn-group .btn {
display: block !important; display: block !important;
} }
.panel-login .clearfix { .panel-login .clearfix {
height: auto; height: auto;
} }
} }

10
data/web/index.php
View File

@ -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> <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 } ?> <?php } ?>
</ul> </ul>
<?php } ?> <?php } ?>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
</form> </form>
@ -99,7 +99,9 @@ $_SESSION['index_query_string'] = $_SERVER['QUERY_STRING'];
foreach ($MAILCOW_APPS as $app) { foreach ($MAILCOW_APPS as $app) {
if (getenv('SKIP_SOGO') == "y" && preg_match('/^\/SOGo/i', $app['link'])) { continue; } 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> <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 <?php
} }
} }
@ -108,12 +110,14 @@ $_SESSION['index_query_string'] = $_SERVER['QUERY_STRING'];
foreach ($app_links as $row) { foreach ($app_links as $row) {
foreach ($row as $key => $val) { 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 <?php
} }
} }
} ?> } ?>
</div> </div>
<?php } <?php }
?> ?>
</div> </div>