Add basic responsive styles
This commit is contained in:
Will Rossiter
parent
d68e523e72
commit
e3c417113b
|
|
@ -275,7 +275,7 @@ fieldset { border: none; }
|
|||
#language input.action { float: right; margin-top: 4px;}
|
||||
|
||||
/* Footer */
|
||||
#footer { width: 960px;
|
||||
#footer {
|
||||
margin: 21px auto;
|
||||
}
|
||||
#footer p {
|
||||
|
|
@ -561,7 +561,6 @@ span.is-folder {float: right;}
|
|||
|
||||
|
||||
.container {
|
||||
min-width: 540px;
|
||||
max-width: 960px;
|
||||
margin: auto;
|
||||
}
|
||||
|
|
@ -579,6 +578,15 @@ span.is-folder {float: right;}
|
|||
border: none;
|
||||
}
|
||||
|
||||
#content-column img {
|
||||
max-width: 90%;
|
||||
border: 1px solid #ccc;
|
||||
box-shadow: 0 0 6px #ddd;
|
||||
padding: 6px;
|
||||
margin: 7px 0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#sidebar-column {
|
||||
width: 22.5%;
|
||||
float: left;
|
||||
|
|
@ -768,8 +776,12 @@ span.is-folder {float: right;}
|
|||
#sidebar-column .sidebar-box input.text {
|
||||
padding: 3px 3px 4px 3px;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
#footer { width: 960px; margin: 22px auto; }
|
||||
#footer {
|
||||
padding: 21px 1.25%;
|
||||
max-width: 960px;
|
||||
}
|
||||
#footer p { font-size: 11px; line-height: 18px; color: #798D85;}
|
||||
#footer p a { color: #798D85; text-decoration: underline; }
|
||||
#footer .cc-logo { float: right; }
|
||||
|
|
@ -969,4 +981,41 @@ ul.pagination {
|
|||
.typography a[href$=".EXE"],
|
||||
.typography a.application {
|
||||
padding: 2px; padding-left: 20px; background: url(../../docsviewer/images/icons/application.png) no-repeat left center;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 540px) {
|
||||
#content-column {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#container {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
#sidebar-column {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#sidebar-column .sidebar-box {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#footer {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.pinned { position: absolute; left: 0; top: 0; background: #fff; width: 35%; overflow: hidden; overflow-x: scroll; border-right: 1px solid #ccc; border-left: 1px solid #ccc; }
|
||||
.pinned table { border-right: none; border-left: none; width: 100%; }
|
||||
.pinned table th, .pinned table td { white-space: nowrap; }
|
||||
.pinned td:last-child { border-bottom: 0; }
|
||||
|
||||
div.table-wrapper { position: relative; margin-bottom: 20px; overflow: hidden; border-right: 1px solid #ccc; }
|
||||
div.table-wrapper div.scrollable table { margin-left: 35%; }
|
||||
div.table-wrapper div.scrollable { overflow: scroll; overflow-y: hidden; }
|
||||
|
||||
table td, table th { position: relative; white-space: nowrap; overflow: hidden; }
|
||||
table th:first-child, table td:first-child, table td:first-child, .pinned table td { display: none; }
|
||||
.pinned table td:first-child,
|
||||
.pinned table th:first-child { display: block; }
|
||||
}
|
||||
|
|
@ -1,6 +1,77 @@
|
|||
;(function($) {
|
||||
$(document).ready(function() {
|
||||
var switched = false;
|
||||
|
||||
var updateTables = function() {
|
||||
if (($(window).width() < 540) && !switched ){
|
||||
switched = true;
|
||||
|
||||
$("table").each(function(i, element) {
|
||||
splitTable($(element));
|
||||
});
|
||||
|
||||
return true;
|
||||
}
|
||||
else if (switched && ($(window).width() > 540)) {
|
||||
switched = false;
|
||||
|
||||
$("table").each(function(i, element) {
|
||||
unsplitTable($(element));
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
$(window).load(updateTables);
|
||||
$(window).on("redraw",function() {
|
||||
switched = false;
|
||||
updateTables();
|
||||
}); // An event to listen for
|
||||
|
||||
$(window).on("resize", updateTables);
|
||||
|
||||
|
||||
function splitTable(original) {
|
||||
original.wrap("<div class='table-wrapper' />");
|
||||
|
||||
var copy = original.clone();
|
||||
copy.find("td:not(:first-child), th:not(:first-child)").css("display", "none");
|
||||
copy.removeClass("responsive");
|
||||
|
||||
original.closest(".table-wrapper").append(copy);
|
||||
copy.wrap("<div class='pinned' />");
|
||||
original.wrap("<div class='scrollable' />");
|
||||
|
||||
setCellHeights(original, copy);
|
||||
}
|
||||
|
||||
function unsplitTable(original) {
|
||||
original.closest(".table-wrapper").find(".pinned").remove();
|
||||
original.unwrap();
|
||||
original.unwrap();
|
||||
}
|
||||
|
||||
function setCellHeights(original, copy) {
|
||||
var tr = original.find('tr'),
|
||||
tr_copy = copy.find('tr'),
|
||||
heights = [];
|
||||
|
||||
tr.each(function (index) {
|
||||
var self = $(this),
|
||||
tx = self.find('th, td');
|
||||
|
||||
tx.each(function () {
|
||||
var height = $(this).outerHeight(true);
|
||||
heights[index] = heights[index] || 0;
|
||||
|
||||
if (height > heights[index]) heights[index] = height;
|
||||
});
|
||||
});
|
||||
|
||||
tr_copy.each(function (index) {
|
||||
$(this).height(heights[index]);
|
||||
});
|
||||
}
|
||||
|
||||
/** -----------------------------------------------
|
||||
* TABLE OF CONTENTS
|
||||
*
|
||||
|
|
|
|||
Loading…
Reference in New Issue