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
parent
9afea99189
commit
e30a8efb0f
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user