From 8245a7087eac2e0725f2546d7bac9e68de94f58e Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Fri, 1 Jul 2011 21:30:12 -0700 Subject: add twipsies... --- bootstrap-1.0.0.css | 60 ++++++++++++++++++++++++++++++++++++++ bootstrap-1.0.0.min.css | 6 ++++ docs/assets/js/application.js | 44 +++++++++++++++++++++++++++- docs/index.html | 33 ++++++++++++++++++++- lib/patterns.less | 67 +++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 208 insertions(+), 2 deletions(-) diff --git a/bootstrap-1.0.0.css b/bootstrap-1.0.0.css index a902aaba6a..3046626e70 100644 --- a/bootstrap-1.0.0.css +++ b/bootstrap-1.0.0.css @@ -1593,3 +1593,63 @@ div.modal .modal-footer .btn { float: right; margin-left: 10px; } +div.twipsy { + display: block; + position: absolute; + visibility: visible; + padding: 5px; + font-size: 10px; + z-index: 100000; + filter: alpha(opacity=80); + -khtml-opacity: 0.8; + -moz-opacity: 0.8; + opacity: 0.8; +} +div.twipsy.above .twipsy-arrow { + bottom: 0; + left: 50%; + margin-left: -5px; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-top: 5px solid #000; +} +div.twipsy.left .twipsy-arrow { + top: 50%; + right: 0; + margin-top: -5px; + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + border-left: 5px solid #000; +} +div.twipsy.below .twipsy-arrow { + top: 0; + left: 50%; + margin-left: -5px; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-bottom: 5px solid #000; +} +div.twipsy.right .twipsy-arrow { + top: 50%; + left: 0; + margin-top: -5px; + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + border-right: 5px solid #000; +} +div.twipsy .twipsy-inner { + padding: 5px 8px 4px; + background-color: #000; + color: white; + text-align: center; + max-width: 200px; + text-decoration: none; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} +div.twipsy .twipsy-arrow { + position: absolute; + width: 0; + height: 0; +} diff --git a/bootstrap-1.0.0.min.css b/bootstrap-1.0.0.min.css index 8650c0f79b..e066d5ba60 100644 --- a/bootstrap-1.0.0.min.css +++ b/bootstrap-1.0.0.min.css @@ -197,3 +197,9 @@ div.modal{position:fixed;top:50%;left:50%;z-index:2000;width:560px;margin:-280px div.modal .modal-body{padding:20px;} div.modal .modal-footer{background-color:#eee;padding:14px 20px 15px;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;zoom:1;}div.modal .modal-footer:after{display:block;visibility:hidden;height:0;clear:both;content:".";} div.modal .modal-footer .btn{float:right;margin-left:10px;} +div.twipsy{display:block;position:absolute;visibility:visible;padding:5px;font-size:10px;z-index:100000;filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}div.twipsy.above .twipsy-arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000;} +div.twipsy.left .twipsy-arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000;} +div.twipsy.below .twipsy-arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000;} +div.twipsy.right .twipsy-arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000;} +div.twipsy .twipsy-inner{padding:5px 8px 4px;background-color:#000;color:white;text-align:center;max-width:200px;text-decoration:none;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} +div.twipsy .twipsy-arrow{position:absolute;width:0;height:0;} diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js index 8a74c2eb3c..8f54c99699 100644 --- a/docs/assets/js/application.js +++ b/docs/assets/js/application.js @@ -34,7 +34,7 @@ $(document).ready(function(){ $(this).parents('.add-on').removeClass('active'); } }); - + // Disable certain links in docs $('ul.tabs a, ul.pills a, .pagination a').click(function(e) { e.preventDefault(); @@ -84,4 +84,46 @@ $(document).ready(function(){ processScroll(); $window.scroll(processScroll); + + // POSITION TWIPSIES + // ================= + $('.twipsies.well a').each(function () { + var type = this.title + , $anchor = $(this) + , $twipsy = $('.twipsy.' + type) + + , twipsy = { + width: $twipsy.width() + 10 + , height: $twipsy.height() + 10 + } + + , anchor = { + position: $anchor.position() + , width: $anchor.width() + , height: $anchor.height() + } + + , offset = { + above: { + top: anchor.position.top - twipsy.height + , left: anchor.position.left + (anchor.width/2) - (twipsy.width/2) + } + , below: { + top: anchor.position.top + anchor.height + , left: anchor.position.left + (anchor.width/2) - (twipsy.width/2) + } + , left: { + top: anchor.position.top + (anchor.height/2) - (twipsy.height/2) + , left: anchor.position.left - twipsy.width - 5 + } + , right: { + top: anchor.position.top + (anchor.height/2) - (twipsy.height/2) + , left: anchor.position.left + anchor.width + 5 + } + } + + $twipsy.css(offset[type]) + + }); + }); \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index d1b9241819..ea6bd178bd 100644 --- a/docs/index.html +++ b/docs/index.html @@ -265,8 +265,10 @@
h6. Heading 6
-

Example paragraph (body text)

+

Example paragraph

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

+

Example headingHas sub-heading...

+

You can also add subheadings with the <strong> and <em>

@@ -1080,6 +1082,35 @@ +
+
+

Tool Tips

+

Twipsies are super useful for aiding a confused user and pointing them in the right direction.

+
+
+
+
+Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae accusantium fugit voluptas nemo voluptas voluptatem rem quae aut veritatis quasi quae. +
+
+
below!
+
+
+
+
right!
+
+
+
+
left!
+
+
+
+
above!
+
+
+
+
+
diff --git a/lib/patterns.less b/lib/patterns.less index 7d330f6ddb..76868e0060 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -506,3 +506,70 @@ div.modal { } } } + +// Twipsy +// ------ + +div.twipsy { + display: block; + position: absolute; + visibility: visible; + padding: 5px; + font-size: 10px; + z-index: 100000; + .opacity(80); + &.above { + .twipsy-arrow { + bottom: 0; + left: 50%; + margin-left: -5px; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-top: 5px solid #000; + } + } + &.left { + .twipsy-arrow { + top: 50%; + right: 0; + margin-top: -5px; + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + border-left: 5px solid #000; + } + } + &.below { + .twipsy-arrow { + top:0; + left:50%; + margin-left: -5px; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-bottom: 5px solid #000; + } + } + &.right { + .twipsy-arrow { + top: 50%; + left: 0; + margin-top: -5px; + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + border-right: 5px solid #000; + } + } + .twipsy-inner { + padding: 5px 8px 4px; + background-color: #000; + color: white; + text-align: center; + max-width: 200px; + text-decoration:none; + .border-radius(4px); + } + .twipsy-arrow { + position: absolute; + width: 0; + height: 0; + } +} \ No newline at end of file -- cgit v1.2.3 From 5a7f3f72cbc86d79ac6c5967eed39be72bc08561 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Fri, 1 Jul 2011 21:37:12 -0700 Subject: clean up js a tiny bit --- docs/assets/js/application.js | 91 +++++++++++++++++++++++++------------------ 1 file changed, 53 insertions(+), 38 deletions(-) diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js index 8f54c99699..8b29f6c21a 100644 --- a/docs/assets/js/application.js +++ b/docs/assets/js/application.js @@ -1,6 +1,47 @@ $(document).ready(function(){ - // Example dropdown for topbar nav + // scroll spy logic + // ================ + + var activeTarget, + $window = $(window), + position = {}, + nav = $('body > .topbar li a'), + targets = nav.map(function () { + return $(this).attr('href'); + }), + offsets = $.map(targets, function (id) { + return $(id).offset().top; + }); + + + function setButton(id) { + nav.parent("li").removeClass('active'); + $(nav[$.inArray(id, targets)]).parent("li").addClass('active'); + } + + function processScroll(e) { + var scrollTop = $window.scrollTop() + 10, i; + for (i = offsets.length; i--;) { + if (activeTarget != targets[i] && scrollTop >= offsets[i] && (!offsets[i + 1] || scrollTop <= offsets[i + 1])) { + activeTarget = targets[i]; + setButton(activeTarget); + } + } + } + + nav.click(function () { + processScroll(); + }); + + processScroll(); + + $window.scroll(processScroll); + + + // Dropdown example for topbar nav + // =============================== + $("body").bind("click", function(e) { $("ul.menu-dropdown").hide(); $('a.menu').parent("li").removeClass("open").children("ul.menu-dropdown").hide(); @@ -23,10 +64,16 @@ $(document).ready(function(){ return false; }); + // table sort example + // ================== + $("#sortTableExample").tablesorter( {sortList: [[1,0]]} ); - // add on + + // add on logic + // ============ + $('.add-on :checkbox').click(function() { if ($(this).attr('checked')) { $(this).parents('.add-on').addClass('active'); @@ -35,7 +82,10 @@ $(document).ready(function(){ } }); + // Disable certain links in docs + // ============================= + $('ul.tabs a, ul.pills a, .pagination a').click(function(e) { e.preventDefault(); }); @@ -49,44 +99,9 @@ $(document).ready(function(){ }); - // scroll spyer - var activeTarget, - $window = $(window), - position = {}, - nav = $('body > .topbar li a'), - targets = nav.map(function () { - return $(this).attr('href'); - }), - offsets = $.map(targets, function (id) { - return $(id).offset().top; - }); - - - function setButton(id) { - nav.parent("li").removeClass('active'); - $(nav[$.inArray(id, targets)]).parent("li").addClass('active'); - } - - function processScroll(e) { - var scrollTop = $window.scrollTop() + 10, i; - for (i = offsets.length; i--;) { - if (activeTarget != targets[i] && scrollTop >= offsets[i] && (!offsets[i + 1] || scrollTop <= offsets[i + 1])) { - activeTarget = targets[i]; - setButton(activeTarget); - } - } - } - - nav.click(function () { - processScroll(); - }); - - processScroll(); - - $window.scroll(processScroll); - // POSITION TWIPSIES // ================= + $('.twipsies.well a').each(function () { var type = this.title , $anchor = $(this) -- cgit v1.2.3 From 26f9e8c4e8580c2d41f31a4fb504ee8c0fdeb145 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Fri, 1 Jul 2011 21:38:33 -0700 Subject: add text to p tag doi --- docs/index.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/index.html b/docs/index.html index ea6bd178bd..1caea7c8fa 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1088,9 +1088,11 @@

Twipsies are super useful for aiding a confused user and pointing them in the right direction.

-
+
+

Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae accusantium fugit voluptas nemo voluptas voluptatem rem quae aut veritatis quasi quae. +

below!
-- cgit v1.2.3