1
0
mirror of https://github.com/mailcow/mailcow-dockerized.git synced 2024-12-12 10:45:14 +02:00

[Web] Fix responsive btn block

This commit is contained in:
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

View File

@ -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;
}
}

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>
<?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>