Sliding panel for tags

This commit is contained in:
Gonzalo Bellver 2011-10-11 14:43:03 -03:00
parent a5dbd51be7
commit 83d2dd4603
3 changed files with 25 additions and 6 deletions

View File

@ -20,7 +20,7 @@ html {
body {
margin: 0;
padding: 20px;
padding: 0 20px 20px 20px;
background: @body-background;
min-height: 100%;
font-family: @font-family;
@ -49,10 +49,11 @@ body {
#tags {
width: @tags-width;
opacity: 0;
padding: @tags-padding;
float: left;
border: @tags-border-size solid @base-color * 5;
border-right: none;
position: absolute;
h2 {
font-size: @base-font-size * 1.5;
@ -75,9 +76,9 @@ body {
@table-width: 100% - (@tags-width + (@tags-padding / @body-width * 100) + @table-gap);
#map-table {
width: @table-width;
width: 100% !important;
display: inline-block;
border: @base-border-size solid @base-color * 5;
}
/* ----------------------------- Toolbar -------------------------------- */
@ -91,6 +92,6 @@ body {
/* ----------------------------- Buttons -------------------------------- */
#buttons {
margin-left: 100% - @table-width;
margin-left: @tags-width;
margin-bottom: @base-margin;
}

View File

@ -5,6 +5,8 @@
@sorting-odd-color: #D3D6FF;
@red: #FF0000;
@base-border-size: 1px;
@base-color: #111;
.rounded-corners (@radius: 5px) {
border-radius: @radius;
@ -87,12 +89,15 @@
table.display {
margin: 0 auto;
clear: both;
float:right;
width: 100%;
border: @base-border-size solid @base-color * 5;
thead th {
padding: 3px 18px 3px 10px;
border-bottom: 1px solid black;
font-weight: bold;
cursor: pointer;
background: white;
}
tfoot th {

View File

@ -121,7 +121,20 @@
$(function() {
$("#buttons .show-tags").button({
icons: { primary: "ui-icon-folder-open" }
});
}).click(function() {
if ($("#tags").css("opacity") == 0) {
$("#tags").css("opacity", 1);
$("#maps").animate({
width: "80%"
}, 1000);
} else {
$("#maps").animate({
width: "100%"
}, 1000, function() {
$("#tags").css("opacity", 0);
});
}
});
$("#buttons .share").button({
icons: { primary: "ui-icon-transferthick-e-w" }
});