* [MOD] UI tweaks for mobile friendly.

This commit is contained in:
nuxsmin
2017-01-28 12:13:19 +01:00
parent 456dcf0495
commit dcc10c5bee
7 changed files with 109 additions and 44 deletions

View File

@@ -16,9 +16,21 @@ $color-blue-fg: #2196f3;
$color-grey: #555;
@mixin box-shadow() {
-webkit-box-shadow: 2px 2px 3px -3px #a9a9a9;
-moz-box-shadow: 2px 2px 3px -3px #a9a9a9;
box-shadow: 1px 1px 2px #d9d9d9;
-webkit-box-shadow: 2px 2px 3px -3px rgba(0, 0, 0, 0.14);
-moz-box-shadow: 2px 2px 3px -3px rgba(0, 0, 0, 0.14);
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.14);
}
@mixin box-shadow-top() {
-webkit-box-shadow: 0 -3px 2px -2px rgba(0, 0, 0, 0.14);
-moz-box-shadow: 0 -3px 2px -2px rgba(0, 0, 0, 0.14);
box-shadow: 0 -3px 2px -2px rgba(0, 0, 0, 0.14);
}
@mixin border-radius($radius) {
border-radius: $radius !important;
-moz-border-radius: $radius !important;
-webkit-border-radius: $radius !important;
}
@mixin color-red() {

View File

@@ -139,8 +139,10 @@ pre, code, samp, kbd {
left: 50%;
padding: 1em;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 5px;
display: none; }
display: none;
border-radius: 5px !important;
-moz-border-radius: 5px !important;
-webkit-border-radius: 5px !important; }
#wrap-loading.overlay-full {
top: 0;
left: 0;
@@ -306,9 +308,9 @@ pre, code, samp, kbd {
background: #5c6bc0;
color: #fff;
border: 0 solid transparent;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px; }
border-radius: 3px !important;
-moz-border-radius: 3px !important;
-webkit-border-radius: 3px !important; }
#content .extra-info {
margin-top: 20px; }
#content #tabs fieldset {
@@ -566,7 +568,9 @@ pre, code, samp, kbd {
background-color: transparent;
max-width: 100%;
margin: 0 auto;
border-radius: 0; }
border-radius: 0 !important;
-moz-border-radius: 0 !important;
-webkit-border-radius: 0 !important; }
#box-popup.image img {
width: auto;
margin: 0 auto; }
@@ -621,11 +625,9 @@ footer {
background-color: #f5f5f5;
color: #b9b9b9;
font-size: 1em;
box-shadow: 0 -8px 6px -6px #c9c9c9;
-webkit-box-shadow: 0 -8px 6px -6px #c9c9c9;
-moz-box-shadow: 0 -8px 6px -6px #c9c9c9;
display: flex;
justify-content: space-between; }
-webkit-box-shadow: 0 -3px 2px -2px rgba(0, 0, 0, 0.14);
-moz-box-shadow: 0 -3px 2px -2px rgba(0, 0, 0, 0.14);
box-shadow: 0 -3px 2px -2px rgba(0, 0, 0, 0.14); }
footer .footer-parts {
display: flex;
justify-content: space-between; }
@@ -701,9 +703,9 @@ footer {
border-bottom: 1px solid #c9c9c9; }
.shadow {
-webkit-box-shadow: 2px 2px 3px -3px #a9a9a9;
-moz-box-shadow: 2px 2px 3px -3px #a9a9a9;
box-shadow: 1px 1px 2px #d9d9d9; }
-webkit-box-shadow: 2px 2px 3px -3px rgba(0, 0, 0, 0.14);
-moz-box-shadow: 2px 2px 3px -3px rgba(0, 0, 0, 0.14);
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.14); }
.noRes {
width: 60%;
@@ -1130,6 +1132,19 @@ fieldset.warning {
width: 100%; }
#box-popup h2 > .btn-popup-close {
display: inline-block; } }
display: inline-block; }
.mdl-data-table {
table-layout: fixed;
width: 100%; }
.table-responsive td, .table-responsive th {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis; }
.table-responsive .cell-actions i {
display: block !important; } }
/*# sourceMappingURL=styles.css.map */

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -29,8 +29,8 @@
left: 50%;
padding: 1em;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 5px;
display: none;
@include border-radius(5px);
&.overlay-full {
top: 0;
left: 0;
@@ -243,9 +243,7 @@
background: $color-indigo-fg;
color: #fff;
border: 0 solid rgba(0, 0, 0, 0);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
@include border-radius(3px);
}
.extra-info {
margin-top: 20px;
@@ -581,7 +579,7 @@
background-color: transparent;
max-width: 100%;
margin: 0 auto;
border-radius: 0;
@include border-radius(0);
img {
width: auto;
margin: 0 auto;
@@ -650,11 +648,7 @@ footer {
background-color: #f5f5f5;
color: #b9b9b9;
font-size: 1em;
box-shadow: 0 -8px 6px -6px #c9c9c9;
-webkit-box-shadow: 0 -8px 6px -6px #c9c9c9;
-moz-box-shadow: 0 -8px 6px -6px #c9c9c9;
display: flex;
justify-content: space-between;
@include box-shadow-top();
.footer-parts {
display: flex;
justify-content: space-between;
@@ -710,9 +704,7 @@ footer {
}
.round, .round5 {
border-radius: 5px !important;
-moz-border-radius: 5px !important;
-webkit-border-radius: 5px !important;
@include border-radius(5px);
}
.midround {
@@ -728,9 +720,7 @@ footer {
}
.fullround {
border-radius: 50% !important;
-moz-border-radius: 50% !important;
-webkit-border-radius: 50% !important;
@include border-radius(50%);
}
.iconMini {
@@ -1193,4 +1183,22 @@ fieldset.warning {
display: inline-block;
}
}
.mdl-data-table {
table-layout:fixed;
width:100%;
}
.table-responsive {
td, th {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
.cell-actions i{
display: block !important;
}
}
}

View File

@@ -6,7 +6,7 @@
*/
?>
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable data-table">
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable table-responsive data-table">
<thead>
<tr>
<?php foreach ($data->getHeader()->getHeaders() as $header): ?>

View File

@@ -9,35 +9,65 @@
<tbody>
<tr>
<td class="descField"><?php echo __('Cuenta'); ?></td>
<td class="valField"><?php echo $link->getAccountName(); ?></td>
<td class="valField">
<div class="lowres-title"><?php echo __('Cuenta'); ?></div>
<?php echo $link->getAccountName(); ?>
</td>
</tr>
<tr>
<td class="descField"><?php echo __('Fecha Creación'); ?></td>
<td class="valField"><?php echo $link->getDateAdd(); ?></td>
<td class="valField">
<div class="lowres-title"><?php echo __('Fecha Creación'); ?></div>
<?php echo $link->getDateAdd(); ?>
</td>
</tr>
<tr>
<td class="descField"><?php echo __('Fecha Caducidad'); ?></td>
<td class="valField"><?php echo $link->getDateExpire(); ?></td>
<td class="valField">
<div class="lowres-title"><?php echo __('Fecha Caducidad'); ?></div>
<?php echo $link->getDateExpire(); ?>
</td>
</tr>
<tr>
<td class="descField"><?php echo __('Usuario'); ?></td>
<td class="valField"><?php echo $link->getUserLogin(); ?></td>
<td class="valField">
<div class="lowres-title"><?php echo __('Usuario'); ?></div>
<?php echo $link->getUserLogin(); ?>
</td>
</tr>
<tr>
<td class="descField"><?php echo __('Notificar'); ?></td>
<td class="valField"><?php echo $link->getNotify(); ?></td>
<td class="valField">
<div class="lowres-title"><?php echo __('Notificar'); ?></div>
<?php echo $link->getNotify(); ?>
</td>
</tr>
<tr>
<td class="descField"><?php echo __('Visitas'); ?></td>
<td class="valField"><?php echo $link->getCountViews(); ?></td>
<td class="valField">
<div class="lowres-title"><?php echo __('Visitas'); ?></div>
<?php echo $link->getCountViews(); ?>
</td>
</tr>
<tr>
<td class="descField"><?php echo __('Hash'); ?></td>
<td class="valField"><?php echo $link->getPublicLinkHash(); ?></td>
<td class="valField">
<div class="lowres-title"><?php echo __('Hash'); ?></div>
<?php echo $link->getPublicLinkHash(); ?>
</td>
</tr>
<tr>
<td class="descField"><?php echo __('Uso'); ?></td>
<td class="valField">
<div class="lowres-title"><?php echo __('Uso'); ?></div>
<div class="list-wrap">
<ul class="mdl-list">
<?php foreach ($link->getUseInfo() as $useInfo): ?>