From ca4c0f13715a99c79e2c531b8a607008fda7f460 Mon Sep 17 00:00:00 2001 From: Brad Frost Date: Sun, 16 Mar 2014 00:56:31 -0400 Subject: [PATCH] Add overflow to dropdowns so nav items that appear below the fold can be accessed. --- .gitignore | 2 + core/styleguide/css/styleguide.css | 52 ++- core/styleguide/css/styleguide.scss | 9 +- core/styleguide/js/styleguide.js | 46 ++- public/styleguide/js/styleguide.js | 612 ---------------------------- 5 files changed, 66 insertions(+), 655 deletions(-) delete mode 100644 public/styleguide/js/styleguide.js diff --git a/.gitignore b/.gitignore index 3ec0336..85a84e1 100644 --- a/.gitignore +++ b/.gitignore @@ -13,3 +13,5 @@ latest-change.txt /public/styleguide/css/styleguide.css /public/styleguide/css/styleguide.scss + +/core/styleguide/css/.sass-cache/ diff --git a/core/styleguide/css/styleguide.css b/core/styleguide/css/styleguide.css index 04a81ef..37eb184 100755 --- a/core/styleguide/css/styleguide.css +++ b/core/styleguide/css/styleguide.css @@ -89,10 +89,7 @@ top: 0; left: 0; z-index: 2; - width: 100%; - -webkit-box-shadow: inset 0 1px 0 #5f6164, inset 0 -1px 0 #2e2f2f, 0 1px 3px rgba(0, 0, 0, 0.3); - -moz-box-shadow: inset 0 1px 0 #5f6164, inset 0 -1px 0 #2e2f2f, 0 1px 3px rgba(0, 0, 0, 0.3); - box-shadow: inset 0 1px 0 #5f6164, inset 0 -1px 0 #2e2f2f, 0 1px 3px rgba(0, 0, 0, 0.3); } + width: 100%; } .sg-header * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; @@ -197,14 +194,15 @@ overflow: hidden; max-height: 0; min-width: 10em; - background: #222222; -webkit-transition: max-height 0.1s ease-out; -moz-transition: max-height 0.1s ease-out; -ms-transition: max-height 0.1s ease-out; -o-transition: max-height 0.1s ease-out; transition: max-height 0.1s ease-out; } + .sg-acc-panel li { + background: #222222; } .sg-acc-panel.active { - max-height: 50em; + max-height: 120em; overflow: auto; } .sg-acc-panel.sg-right { position: absolute; @@ -213,7 +211,7 @@ .sg-acc-panel.sg-left { position: absolute; left: auto; } - .sg-acc-panel [class^="icon-"]:before, .sg-acc-panel [class*=" icon-"]:before { + .sg-acc-panel [class^="sg-icon-"]:before { display: inline-block; margin-right: 0.4em; } @@ -224,9 +222,6 @@ top: 0; right: 0; z-index: 2; } - @media all and (min-width: 72em) { - .sg-controls { - width: 44em; } } .sg-control-trigger { border-bottom: 1px solid rgba(255, 255, 255, 0.05); } @@ -280,16 +275,16 @@ max-height: none; max-width: none; } .sg-size-options > li { - display: inline-block; + float: left; border: 0; border-left: 1px solid rgba(255, 255, 255, 0.05); } } -.sg-find { +#sg-size-mq { display: none; } + @media all and (min-width: 72em) { + #sg-size-mq { + display: block; } } -@media all and (min-width: 48em) { - .sg-find { - display: block; } } #sg-form { margin: 0; border: 0; @@ -640,7 +635,6 @@ div.clear { border-radius: 50%; opacity: .7; } -/* Pattern Lab icon fonts */ /* Pattern Lab icon fonts */ @font-face { font-family: 'icomoon'; @@ -649,7 +643,7 @@ div.clear { font-weight: normal; font-style: normal; } -.icon-search, .icon-cog, .icon-minus, .icon-plus, .icon-menu, .icon-radio-checked, .sg-checkbox.active, .icon-radio-unchecked, .sg-checkbox, .icon-file, .icon-link, .icon-keyboard, .icon-qrcode, .icon-eye, .sg-checkbox { +.sg-icon-search, .sg-icon-cog, .sg-icon-minus, .sg-icon-plus, .sg-icon-menu, .sg-icon-radio-checked, .sg-checkbox.active, .sg-icon-radio-unchecked, .sg-checkbox, .sg-icon-file, .sg-icon-link, .sg-icon-keyboard, .sg-icon-qrcode, .sg-icon-eye, .sg-checkbox { font-family: 'icomoon'; speak: none; font-style: normal; @@ -661,41 +655,41 @@ div.clear { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } -.icon-search:before { +.sg-icon-search:before { content: "\e600"; font-size: 85%; } -.icon-cog:before { +.sg-icon-cog:before { content: "\e601"; } -.icon-minus:before { +.sg-icon-minus:before { content: "\e602"; } -.icon-plus:before { +.sg-icon-plus:before { content: "\e603"; } -.icon-menu:before { +.sg-icon-menu:before { content: "\e604"; } -.icon-radio-checked:before, .sg-checkbox.active:before, .sg-checkbox.active:before { +.sg-icon-radio-checked:before, .sg-checkbox.active:before, .sg-checkbox.active:before { content: "\e605"; } -.icon-radio-unchecked:before, .sg-checkbox:before, .sg-checkbox:before { +.sg-icon-radio-unchecked:before, .sg-checkbox:before, .sg-checkbox:before { content: "\e606"; } -.icon-file:before { +.sg-icon-file:before { content: "\e607"; } -.icon-link:before { +.sg-icon-link:before { content: "\e608"; } -.icon-keyboard:before { +.sg-icon-keyboard:before { content: "\e609"; } -.icon-qrcode:before { +.sg-icon-qrcode:before { content: "\e60a"; } -.icon-eye:before { +.sg-icon-eye:before { content: "\e60b"; } /******************************************************************/ diff --git a/core/styleguide/css/styleguide.scss b/core/styleguide/css/styleguide.scss index 9ff198b..1dd0b44 100755 --- a/core/styleguide/css/styleguide.scss +++ b/core/styleguide/css/styleguide.scss @@ -290,11 +290,14 @@ $animate-quick: 0.2s; overflow: hidden; max-height: 0; min-width: 10em; - background: $sg-primary; @include sg-transition(max-height,0.1s,ease-out); + li { + background: $sg-primary; + } + &.active { - max-height: 50em; + max-height: 120em; overflow: auto; } @@ -410,7 +413,7 @@ $animate-quick: 0.2s; #sg-size-mq { display: none; - @media all and (min-width: $sg-bp-med) { + @media all and (min-width: $sg-bp-large) { display: block; } } diff --git a/core/styleguide/js/styleguide.js b/core/styleguide/js/styleguide.js index 33a861d..c137e24 100644 --- a/core/styleguide/js/styleguide.js +++ b/core/styleguide/js/styleguide.js @@ -1,14 +1,15 @@ (function (w) { var sw = document.body.clientWidth, //Viewport Width - sh = document.body.clientHeight, //Viewport Height + sh = $(document).height(), //Viewport Height minViewportWidth = 240, //Minimum Size for Viewport maxViewportWidth = 2600, //Maxiumum Size for Viewport viewportResizeHandleWidth = 14, //Width of the viewport drag-to-resize handle $sgViewport = $('#sg-viewport'), //Viewport element $sizePx = $('.sg-size-px'), //Px size input element in toolbar $sizeEms = $('.sg-size-em'), //Em size input element in toolbar - $bodySize = parseInt($('body').css('font-size')), //Body size of the document + $bodySize = parseInt($('body').css('font-size')), //Body size of the document, + $headerHeight = $('.sg-header').height(), discoID = false, discoMode = false, hayMode = false; @@ -16,10 +17,12 @@ //Update dimensions on resize $(w).resize(function() { sw = document.body.clientWidth; - sh = document.body.clientHeight; + sh = $(document).height(); + + setAccordionHeight(); }); - /* Accordion dropdown */ + // Accordion dropdown $('.sg-acc-handle').on("click", function(e){ e.preventDefault(); @@ -36,14 +39,24 @@ //Activate selected panel $this.toggleClass('active'); $panel.toggleClass('active'); + setAccordionHeight(); }); + //Accordion Height + function setAccordionHeight() { + var $activeAccordion = $('.sg-acc-panel.active').first(), + accordionHeight = $activeAccordion.height(), + availableHeight = sh-$headerHeight; //Screen height minus the height of the header + + $activeAccordion.height(availableHeight); //Set height of accordion to the available height + } + $('.sg-nav-toggle').on("click", function(e){ e.preventDefault(); $('.sg-nav-container').toggleClass('active'); }); - //"View (containing clean, code, raw, etc options) Trigger + // "View (containing clean, code, raw, etc options) Trigger $('#sg-t-toggle').on("click", function(e){ e.preventDefault(); $(this).parents('ul').toggleClass('active'); @@ -387,6 +400,18 @@ updateSizeReading(size); } + + //Detect larger screen and no touch support + /* + if('ontouchstart' in document.documentElement && window.matchMedia("(max-width: 700px)").matches) { + $('body').addClass('no-resize'); + $('#sg-viewport ').width(sw); + + alert('workit'); + } else { + + } + */ $('#sg-gen-container').on('touchstart', function(event){}); @@ -438,7 +463,7 @@ var testWidth = screen.width; if (window.orientation !== undefined) { - testWidth = (window.orientation === 0) ? screen.width : screen.height; + testWidth = (window.orientation == 0) ? screen.width : screen.height; } if (($(window).width() == testWidth) && ('ontouchstart' in document.documentElement) && ($(window).width() <= 1024)) { $("#sg-rightpull-container").width(0); @@ -482,7 +507,7 @@ history.replaceState({ "pattern": patternName }, null, null); } - if (document.getElementById("sg-raw") !== undefined) { + if (document.getElementById("sg-raw") != undefined) { document.getElementById("sg-raw").setAttribute("href",urlHandler.getFileName(patternName)); } @@ -577,7 +602,7 @@ } } else if (data.keyPress == 'ctrl+shift+0') { sizeiframe(320,true); - } else if (found == data.keyPress.match(/ctrl\+shift\+([1-9])/)) { + } else if (found = data.keyPress.match(/ctrl\+shift\+([1-9])/)) { var val = mqs[(found[1]-1)]; var type = (val.indexOf("px") !== -1) ? "px" : "em"; val = val.replace(type,""); @@ -590,11 +615,10 @@ window.addEventListener("message", receiveIframeMessage, false); $('.sg-tools').click(function() { - if ((qrCodeGenerator.lastGenerated === "") || (qrCodeGenerator.lastGenerated !== window.location.search)) { + if ((qrCodeGenerator.lastGenerated == "") || (qrCodeGenerator.lastGenerated != window.location.search)) { qrCodeGenerator.getQRCode(); qrCodeGenerator.lastGenerated = window.location.search; } }); -})(this); - +})(this); \ No newline at end of file diff --git a/public/styleguide/js/styleguide.js b/public/styleguide/js/styleguide.js deleted file mode 100644 index cf1e17f..0000000 --- a/public/styleguide/js/styleguide.js +++ /dev/null @@ -1,612 +0,0 @@ -(function (w) { - - var sw = document.body.clientWidth, //Viewport Width - sh = document.body.clientHeight, //Viewport Height - minViewportWidth = 240, //Minimum Size for Viewport - maxViewportWidth = 2600, //Maxiumum Size for Viewport - viewportResizeHandleWidth = 14, //Width of the viewport drag-to-resize handle - $sgViewport = $('#sg-viewport'), //Viewport element - $sizePx = $('.sg-size-px'), //Px size input element in toolbar - $sizeEms = $('.sg-size-em'), //Em size input element in toolbar - $bodySize = parseInt($('body').css('font-size')), //Body size of the document - discoID = false, - discoMode = false, - hayMode = false; - - //Update dimensions on resize - $(w).resize(function() { - sw = document.body.clientWidth; - sh = document.body.clientHeight; - }); - - /* Accordion dropdown */ - $('.sg-acc-handle').on("click", function(e){ - e.preventDefault(); - - var $this = $(this), - $panel = $this.next('.sg-acc-panel'), - subnav = $this.parent().parent().hasClass('sg-acc-panel'); - - //Close other panels if link isn't a subnavigation item - if (!subnav) { - $('.sg-acc-handle').not($this).removeClass('active'); - $('.sg-acc-panel').not($panel).removeClass('active'); - } - - //Activate selected panel - $this.toggleClass('active'); - $panel.toggleClass('active'); - }); - - $('.sg-nav-toggle').on("click", function(e){ - e.preventDefault(); - $('.sg-nav-container').toggleClass('active'); - }); - - //"View (containing clean, code, raw, etc options) Trigger - $('#sg-t-toggle').on("click", function(e){ - e.preventDefault(); - $(this).parents('ul').toggleClass('active'); - }); - - //Size Trigger - $('#sg-size-toggle').on("click", function(e){ - e.preventDefault(); - $(this).parents('ul').toggleClass('active'); - }); - - //Phase View Events - $('.sg-size[data-size]').on("click", function(e){ - e.preventDefault(); - killDisco(); - killHay(); - - var val = $(this).attr('data-size'); - - if (val.indexOf('px') > -1) { - $bodySize = 1; - } - - val = val.replace(/[^\d.-]/g,''); - sizeiframe(Math.floor(val*$bodySize)); - }); - - //Size View Events - - // handle small button - function goSmall() { - killDisco(); - killHay(); - sizeiframe(getRandom(minViewportWidth,500)); - } - - $('#sg-size-s').on("click", function(e){ - e.preventDefault(); - goSmall(); - }); - - jwerty.key('ctrl+shift+s', function(e) { - goSmall(); - return false; - }); - - // handle medium button - function goMedium() { - killDisco(); - killHay(); - sizeiframe(getRandom(500,800)); - } - - $('#sg-size-m').on("click", function(e){ - e.preventDefault(); - goMedium(); - }); - - jwerty.key('ctrl+shift+m', function(e) { - goLarge(); - return false; - }); - - // handle large button - function goLarge() { - killDisco(); - killHay(); - sizeiframe(getRandom(800,1200)); - } - - $('#sg-size-l').on("click", function(e){ - e.preventDefault(); - goLarge(); - }); - - jwerty.key('ctrl+shift+l', function(e) { - goLarge(); - return false; - }); - - //Click Full Width Button - $('#sg-size-full').on("click", function(e){ //Resets - e.preventDefault(); - killDisco(); - killHay(); - sizeiframe(sw); - }); - - //Click Random Size Button - $('#sg-size-random').on("click", function(e){ - e.preventDefault(); - killDisco(); - killHay(); - sizeiframe(getRandom(minViewportWidth,sw)); - }); - - //Click for Disco Mode, which resizes the viewport randomly - $('#sg-size-disco').on("click", function(e){ - e.preventDefault(); - killHay(); - - if (discoMode) { - killDisco(); - - } else { - startDisco(); - } - }); - - /* Disco Mode */ - function disco() { - sizeiframe(getRandom(minViewportWidth,sw)); - } - - function killDisco() { - discoMode = false; - clearInterval(discoID); - discoID = false; - } - - function startDisco() { - discoMode = true; - discoID = setInterval(disco, 800); - } - - jwerty.key('ctrl+shift+d', function(e) { - if (!discoMode) { - startDisco(); - } else { - killDisco(); - } - return false; - }); - - //Stephen Hay Mode - "Start with the small screen first, then expand until it looks like shit. Time for a breakpoint!" - $('#sg-size-hay').on("click", function(e){ - e.preventDefault(); - killDisco(); - if (hayMode) { - killHay(); - } else { - startHay(); - } - }); - - //Stop Hay! Mode - function killHay() { - var currentWidth = $sgViewport.width(); - hayMode = false; - $sgViewport.removeClass('hay-mode'); - $('#sg-gen-container').removeClass('hay-mode'); - sizeiframe(Math.floor(currentWidth)); - } - - // start Hay! mode - function startHay() { - hayMode = true; - $('#sg-gen-container').removeClass("vp-animate").width(minViewportWidth+viewportResizeHandleWidth); - $sgViewport.removeClass("vp-animate").width(minViewportWidth); - - var timeoutID = window.setTimeout(function(){ - $('#sg-gen-container').addClass('hay-mode').width(maxViewportWidth+viewportResizeHandleWidth); - $sgViewport.addClass('hay-mode').width(maxViewportWidth); - - setInterval(function(){ var vpSize = $sgViewport.width(); updateSizeReading(vpSize); },100); - }, 200); - } - - // start hay from a keyboard shortcut - jwerty.key('ctrl+shift+h', function(e) { - if (!hayMode) { - startHay(); - } else { - killHay(); - } - }); - - //Pixel input - $sizePx.on('keydown', function(e){ - var val = Math.floor($(this).val()); - - if(e.keyCode === 38) { //If the up arrow key is hit - val++; - sizeiframe(val,false); - } else if(e.keyCode === 40) { //If the down arrow key is hit - val--; - sizeiframe(val,false); - } else if(e.keyCode === 13) { //If the Enter key is hit - e.preventDefault(); - sizeiframe(val); //Size Iframe to value of text box - $(this).blur(); - } - }); - - $sizePx.on('keyup', function(){ - var val = Math.floor($(this).val()); - updateSizeReading(val,'px','updateEmInput'); - }); - - //Em input - $sizeEms.on('keydown', function(e){ - var val = parseFloat($(this).val()); - - if(e.keyCode === 38) { //If the up arrow key is hit - val++; - sizeiframe(Math.floor(val*$bodySize),false); - } else if(e.keyCode === 40) { //If the down arrow key is hit - val--; - sizeiframe(Math.floor(val*$bodySize),false); - } else if(e.keyCode === 13) { //If the Enter key is hit - e.preventDefault(); - sizeiframe(Math.floor(val*$bodySize)); //Size Iframe to value of text box - } - }); - - $sizeEms.on('keyup', function(){ - var val = parseFloat($(this).val()); - updateSizeReading(val,'em','updatePxInput'); - }); - - // set 0 to 320px as a default - jwerty.key('ctrl+shift+0', function(e) { - e.preventDefault(); - sizeiframe(320,true); - return false; - }); - - // handle the MQ click - var mqs = []; - $('#sg-mq a').each(function(i) { - - mqs.push($(this).html()); - - // bind the click - $(this).on("click", function(i,k) { - return function(e) { - e.preventDefault(); - var val = $(k).html(); - var type = (val.indexOf("px") !== -1) ? "px" : "em"; - val = val.replace(type,""); - var width = (type === "px") ? val*1 : val*$bodySize; - sizeiframe(width,true); - } - }(i,this)); - - // bind the keyboard shortcut. can't use cmd on a mac because 3 & 4 are for screenshots - jwerty.key('ctrl+shift+'+(i+1), function (k) { - return function(e) { - var val = $(k).html(); - var type = (val.indexOf("px") !== -1) ? "px" : "em"; - val = val.replace(type,""); - var width = (type === "px") ? val*1 : val*$bodySize; - sizeiframe(width,true); - return false; - } - }(this)); - - }); - - //Resize the viewport - //'size' is the target size of the viewport - //'animate' is a boolean for switching the CSS animation on or off. 'animate' is true by default, but can be set to false for things like nudging and dragging - function sizeiframe(size,animate) { - var theSize; - - if(size>maxViewportWidth) { //If the entered size is larger than the max allowed viewport size, cap value at max vp size - theSize = maxViewportWidth; - } else if(size