[FIX] responsive tables

This commit is contained in:
iAmShorty 2014-04-02 15:10:58 +02:00
parent 9e256904f9
commit 040e2baa35
2 changed files with 174 additions and 161 deletions

View File

@ -65,37 +65,37 @@ input[type="search"],
input[type="tel"], input[type="tel"],
input[type="color"], input[type="color"],
.uneditable-input { .uneditable-input {
background-color: #ffffff; background-color: #ffffff;
padding: 4px 4px 4px 4px; padding: 4px 4px 4px 4px;
font-size: 11px; font-size: 11px;
color: #555555; color: #555555;
border: 1px solid #ccc; border: 1px solid #ccc;
height: 25px; height: 25px;
line-height: 25px; line-height: 25px;
} }
.input-group-sm > .form-control, .input-group-sm > .form-control,
.input-group-sm > .input-group-addon, .input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn { .input-group-sm > .input-group-btn > .btn {
height: 25px; height: 25px;
font-size: 12px; font-size: 12px;
} }
.form-control { .form-control {
font-size: 12px; font-size: 12px;
} }
.input-group .input-group-addon { .input-group .input-group-addon {
line-height: 1!important; line-height: 1!important;
} }
.glyphicon{ .glyphicon{
line-height: 1em; line-height: 1em;
} }
.select-mini, .input-group { .select-mini, .input-group {
font-size: 11px; font-size: 11px;
height: 25px; height: 25px;
} }
/* Navigation */ /* Navigation */
@ -105,145 +105,154 @@ input[type="color"],
/* Top Right Navigation Dropdown Styles */ /* Top Right Navigation Dropdown Styles */
.navbar-top-links li { .navbar-top-links li {
display: inline-block; display: inline-block;
} }
.navbar-top-links li:last-child { .navbar-top-links li:last-child {
margin-right: 15px; margin-right: 15px;
} }
.navbar-top-links li a { .navbar-top-links li a {
padding: 15px; padding: 15px;
min-height: 50px; min-height: 50px;
} }
.dropdown-user { .dropdown-user {
min-width:100px; min-width:100px;
} }
.navbar-top-links .dropdown-menu li { .navbar-top-links .dropdown-menu li {
display: block; display: block;
} }
.navbar-top-links .dropdown-menu li:last-child { .navbar-top-links .dropdown-menu li:last-child {
margin-right: 0; margin-right: 0;
} }
.navbar-top-links .dropdown-menu li a { .navbar-top-links .dropdown-menu li a {
padding: 3px 20px; padding: 3px 20px;
min-height: 0; min-height: 0;
} }
.navbar-top-links .dropdown-menu li a div { .navbar-top-links .dropdown-menu li a div {
white-space: normal; white-space: normal;
} }
.navbar-top-links .dropdown-messages, .navbar-top-links .dropdown-messages,
.navbar-top-links .dropdown-tasks, .navbar-top-links .dropdown-tasks,
.navbar-top-links .dropdown-alerts { .navbar-top-links .dropdown-alerts {
width: 310px; width: 310px;
min-width: 0; min-width: 0;
} }
.navbar-top-links .dropdown-messages { .navbar-top-links .dropdown-messages {
margin-left: 5px; margin-left: 5px;
} }
.navbar-top-links .dropdown-tasks { .navbar-top-links .dropdown-tasks {
margin-left: -59px; margin-left: -59px;
} }
.navbar-top-links .dropdown-alerts { .navbar-top-links .dropdown-alerts {
/*#margin-left: -123px; */ /*#margin-left: -123px; */
} }
.navbar-top-links .dropdown-user { .navbar-top-links .dropdown-user {
right: 0; right: 0;
left: auto; left: auto;
} }
/* Sidebar Menu Styles */ /* Sidebar Menu Styles */
.sidebar-search { .sidebar-search {
padding: 15px; padding: 15px;
} }
.arrow { .arrow {
float: right; float: right;
} }
.fa.arrow:before { .fa.arrow:before {
content: "\f104"; content: "\f104";
} }
.active > a > .fa.arrow:before { .active > a > .fa.arrow:before {
content: "\f107"; content: "\f107";
} }
.nav-second-level li, .nav-second-level li,
.nav-third-level li { .nav-third-level li {
border-bottom: none !important; border-bottom: none !important;
} }
.nav-second-level li a { .nav-second-level li a {
padding-left: 37px; padding-left: 37px;
} }
.nav-third-level li a { .nav-third-level li a {
padding-left: 52px; padding-left: 52px;
} }
@media(min-width:768px) { @media(min-width:768px) {
.navbar-static-side { .navbar-static-side {
z-index: 1; z-index: 1;
position: absolute; position: absolute;
width: 250px; width: 250px;
} }
.navbar-top-links .dropdown-messages, .navbar-top-links .dropdown-messages,
.navbar-top-links .dropdown-tasks, .navbar-top-links .dropdown-tasks,
.navbar-top-links .dropdown-alerts { .navbar-top-links .dropdown-alerts {
margin-left: auto; margin-left: auto;
} }
.col-md-spark, .col-md-spark-2 {
float: left;
}
.col-md-spark {
width:16.65%
}
.col-md-spark-2 {
width:20%
}
} }
.navbar-default .navbar-nav .open .dropdown-menu > li > a, .navbar-default .navbar-nav .open .dropdown-menu > li > a,
.navbar-default .navbar-nav .open .dropdown-menu { .navbar-default .navbar-nav .open .dropdown-menu {
font-size: 12px; font-size: 12px;
} }
.navbar-default .navbar-nav .open .dropdown-menu > li a:hover { .navbar-default .navbar-nav .open .dropdown-menu > li a:hover {
font-size: 12px; font-size: 12px;
} }
/* Buttons */ /* Buttons */
/* ------------------------------- */ /* ------------------------------- */
.btn-outline { .btn-outline {
color: inherit; color: inherit;
background-color: transparent; background-color: transparent;
transition: all .5s; transition: all .5s;
} }
.btn-primary.btn-outline { .btn-primary.btn-outline {
color: #428bca; color: #428bca;
} }
.btn-success.btn-outline { .btn-success.btn-outline {
color: #5cb85c; color: #5cb85c;
} }
.btn-info.btn-outline { .btn-info.btn-outline {
color: #5bc0de; color: #5bc0de;
} }
.btn-warning.btn-outline { .btn-warning.btn-outline {
color: #f0ad4e; color: #f0ad4e;
} }
.btn-danger.btn-outline { .btn-danger.btn-outline {
color: #d9534f; color: #d9534f;
} }
.btn-primary.btn-outline:hover, .btn-primary.btn-outline:hover,
@ -251,7 +260,7 @@ input[type="color"],
.btn-info.btn-outline:hover, .btn-info.btn-outline:hover,
.btn-warning.btn-outline:hover, .btn-warning.btn-outline:hover,
.btn-danger.btn-outline:hover { .btn-danger.btn-outline:hover {
color: #fff; color: #fff;
} }
/* Pages */ /* Pages */
@ -260,52 +269,52 @@ input[type="color"],
/* Dashboard Chat */ /* Dashboard Chat */
.chat { .chat {
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
.chat li { .chat li {
margin-bottom: 10px; margin-bottom: 10px;
padding-bottom: 5px; padding-bottom: 5px;
border-bottom: 1px dotted #B3A9A9; border-bottom: 1px dotted #B3A9A9;
} }
.chat li.left .chat-body { .chat li.left .chat-body {
margin-left: 60px; margin-left: 60px;
} }
.chat li.right .chat-body { .chat li.right .chat-body {
margin-right: 60px; margin-right: 60px;
} }
.chat li .chat-body p { .chat li .chat-body p {
margin: 0; margin: 0;
color: #777777; color: #777777;
} }
.panel .slidedown .glyphicon, .panel .slidedown .glyphicon,
.chat .glyphicon { .chat .glyphicon {
margin-right: 5px; margin-right: 5px;
} }
.chat-panel .panel-body { .chat-panel .panel-body {
height: 350px; height: 350px;
overflow-y: scroll; overflow-y: scroll;
} }
/* Login Page */ /* Login Page */
.login-panel { .login-panel {
margin-top: 25%; margin-top: 25%;
} }
/* Flot Chart Containers */ /* Flot Chart Containers */
.flot-chart { .flot-chart {
display: block; display: block;
height: 400px; height: 400px;
} }
.flot-chart-content { .flot-chart-content {
@ -342,13 +351,6 @@ table.dataTable thead .sorting:after {
color: rgba(50,50,50,.5); color: rgba(50,50,50,.5);
} }
.table {
width: 100%;
margin-bottom: 20px;
table-layout: fixed;
word-wrap: break-word;
}
div.dataTables_length select { div.dataTables_length select {
font-size: 11px; font-size: 11px;
height: 25px; height: 25px;
@ -406,7 +408,7 @@ div.dataTables_paginate ul.pagination {
} }
.show-grid { .show-grid {
margin: 15px 0; margin: 15px 0;
} }
/* No Padding for Tables */ /* No Padding for Tables */
@ -433,156 +435,144 @@ div.dataTables_paginate ul.pagination {
} }
.footer { .footer {
clear: both; clear: both;
text-align: center; text-align: center;
padding: 4px 0px 0px; padding: 4px 0px 0px;
font-size: 11px; font-size: 11px;
width: 100%; width: 100%;
} }
.margin-bottom-sm { .margin-bottom-sm {
margin-bottom: 5px !important; margin-bottom: 5px !important;
} }
p.overview { p.overview {
font-family: 'Open Sans',sans-serif; font-family: 'Open Sans',sans-serif;
font-weight: 600; font-weight: 600;
font-size: 11px; font-size: 11px;
text-transform: uppercase; text-transform: uppercase;
display: block; display: block;
margin-bottom: 4px; margin-bottom: 4px;
} }
span.overview { span.overview {
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
} }
div.overview { div.overview {
margin: 20px 0px 0px; margin: 20px 0px 0px;
} }
span.bigfont { span.bigfont {
font-size: 100%; font-size: 100%;
} }
th.smallwidth { th.smallwidth {
width: 250px; width: 250px;
} }
.col-md-spark, .col-md-spark-2 { .col-md-spark, .col-md-spark-2 {
position:relative; position:relative;
min-height:1px; min-height:1px;
padding-left:15px; padding-left:15px;
padding-right:15px padding-right:15px
}
@media (min-width:992px) {
.col-md-spark, .col-md-spark-2 {
float: left;
}
.col-md-spark {
width:16.65%
}
.col-md-spark-2 {
width:20%
}
} }
span.overview-mhs { span.overview-mhs {
font-size: 11px; font-size: 11px;
font-weight: bold; font-weight: bold;
} }
div.black { div.black {
color: black; color: black;
} }
div.progress-fix { div.progress-fix {
margin: 0px 0px 5px 0px; margin: 0px 0px 5px 0px;
} }
span.spark-18 { span.spark-18 {
margin: -20%; margin: -20%;
} }
span.spark-25 { span.spark-25 {
margin: -25%; margin: -25%;
} }
/* Test Edit */ /* Test Edit */
.circle-tile { .circle-tile {
margin-bottom: 30px; margin-bottom: 30px;
} }
.circle-tile { .circle-tile {
margin-bottom: 15px; margin-bottom: 15px;
text-align: center; text-align: center;
} }
.circle-tile-content { .circle-tile-content {
padding-top: 50px; padding-top: 50px;
border-radius: 8px; border-radius: 8px;
border: 3px solid rgba(255, 255, 255, 0.3); border: 3px solid rgba(255, 255, 255, 0.3);
} }
.circle-tile-description { .circle-tile-description {
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 16px;
} }
.circle-tile-number { .circle-tile-number {
padding: 0px 1px 4px; padding: 0px 1px 4px;
} }
.circle-tile-heading { .circle-tile-heading {
position: relative; position: relative;
width: 80px; width: 80px;
height: 80px; height: 80px;
margin: 0px auto -40px; margin: 0px auto -40px;
border: 3px solid rgba(255, 255, 255, 0.3); border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 100%; border-radius: 100%;
color: #FFF; color: #FFF;
transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s;
} }
.circle-tile-heading .fa { .circle-tile-heading .fa {
line-height: 80px; line-height: 80px;
} }
.lightblue { .lightblue {
background-color: #2FAACE; background-color: #2FAACE;
} }
.text-faded { .text-faded {
color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.7);
} }
.text-link { .text-link {
color: #FFFFFF; color: #FFFFFF;
} }
p.up { p.up {
margin: -5px 0px -8px; margin: -5px 0px -8px;
font-weight: 600; font-weight: 600;
} }
div.up { div.up {
margin: -10px 0px 6px 0px; margin: -10px 0px 6px 0px;
} }
p.up-more { p.up-more {
margin: -6px 0px 10px; margin: -6px 0px 10px;
font-weight: 600; font-weight: 600;
} }
p.up-more2 { p.up-more2 {
margin: -6px 0px 0px; margin: -6px 0px 0px;
} }
div.fade { div.fade {
opacity: 0.8; opacity: 0.8;
} }
/* End Test */ /* End Test */
@ -591,16 +581,32 @@ div.fade {
.table>tbody>tr>th .table>tbody>tr>th
{ {
padding-left:3px; padding-left:3px;
padding-bottom:3px; padding-bottom:3px;
border: 1px solid #ddd; border: 1px solid #ddd;
background-color: #f9f9f9; background-color: #f9f9f9;
padding-right:1px; padding-right:1px;
} }
.table>tbody>tr>td .table > tbody > tr > td
{ {
padding:4px; padding:4px;
}
.panel > .table,
.panel > .table-responsive > .table {
margin-bottom: 0;
}
.table-responsive
{
white-space: nowrap;
width: 100%;
margin-bottom: 15px;
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
} }
/* End Tables */ /* End Tables */

View File

@ -1,3 +1,10 @@
/**
* metisMenu v1.0.1
* Author : Osman Nuri Okumuş
* Copyright 2014
* Licensed under MIT
*/
;(function ($, window, document, undefined) { ;(function ($, window, document, undefined) {
var pluginName = "metisMenu", var pluginName = "metisMenu",
@ -42,4 +49,4 @@
}); });
}; };
})(jQuery, window, document); })(jQuery, window, document);