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

View File

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

View File

@ -121,6 +121,19 @@
$(function() { $(function() {
$("#buttons .show-tags").button({ $("#buttons .show-tags").button({
icons: { primary: "ui-icon-folder-open" } 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({ $("#buttons .share").button({
icons: { primary: "ui-icon-transferthick-e-w" } icons: { primary: "ui-icon-transferthick-e-w" }