Skip to content
This repository was archived by the owner on Feb 7, 2023. It is now read-only.

Commit ca4c0f1

Browse files
bradfrostbradfrost
committed
Add overflow to dropdowns so nav items that appear below the fold can be accessed.
1 parent 12e234b commit ca4c0f1

File tree

5 files changed

+66
-655
lines changed

5 files changed

+66
-655
lines changed

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,3 +13,5 @@ latest-change.txt
1313

1414
/public/styleguide/css/styleguide.css
1515
/public/styleguide/css/styleguide.scss
16+
17+
/core/styleguide/css/.sass-cache/

‎core/styleguide/css/styleguide.css

Lines changed: 23 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -89,10 +89,7 @@
8989
top: 0;
9090
left: 0;
9191
z-index: 2;
92-
width: 100%;
93-
-webkit-box-shadow: inset 0 1px 0 #5f6164, inset 0 -1px 0 #2e2f2f, 0 1px 3px rgba(0, 0, 0, 0.3);
94-
-moz-box-shadow: inset 0 1px 0 #5f6164, inset 0 -1px 0 #2e2f2f, 0 1px 3px rgba(0, 0, 0, 0.3);
95-
box-shadow: inset 0 1px 0 #5f6164, inset 0 -1px 0 #2e2f2f, 0 1px 3px rgba(0, 0, 0, 0.3); }
92+
width: 100%; }
9693
.sg-header * {
9794
-moz-box-sizing: border-box;
9895
-webkit-box-sizing: border-box;
@@ -197,14 +194,15 @@
197194
overflow: hidden;
198195
max-height: 0;
199196
min-width: 10em;
200-
background: #222222;
201197
-webkit-transition: max-height 0.1s ease-out;
202198
-moz-transition: max-height 0.1s ease-out;
203199
-ms-transition: max-height 0.1s ease-out;
204200
-o-transition: max-height 0.1s ease-out;
205201
transition: max-height 0.1s ease-out; }
202+
.sg-acc-panel li {
203+
background: #222222; }
206204
.sg-acc-panel.active {
207-
max-height: 50em;
205+
max-height: 120em;
208206
overflow: auto; }
209207
.sg-acc-panel.sg-right {
210208
position: absolute;
@@ -213,7 +211,7 @@
213211
.sg-acc-panel.sg-left {
214212
position: absolute;
215213
left: auto; }
216-
.sg-acc-panel [class^="icon-"]:before, .sg-acc-panel [class*=" icon-"]:before {
214+
.sg-acc-panel [class^="sg-icon-"]:before {
217215
display: inline-block;
218216
margin-right: 0.4em; }
219217

@@ -224,9 +222,6 @@
224222
top: 0;
225223
right: 0;
226224
z-index: 2; }
227-
@media all and (min-width: 72em) {
228-
.sg-controls {
229-
width: 44em; } }
230225

231226
.sg-control-trigger {
232227
border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
@@ -280,16 +275,16 @@
280275
max-height: none;
281276
max-width: none; }
282277
.sg-size-options > li {
283-
display: inline-block;
278+
float: left;
284279
border: 0;
285280
border-left: 1px solid rgba(255, 255, 255, 0.05); } }
286281

287-
.sg-find {
282+
#sg-size-mq {
288283
display: none; }
284+
@media all and (min-width: 72em) {
285+
#sg-size-mq {
286+
display: block; } }
289287

290-
@media all and (min-width: 48em) {
291-
.sg-find {
292-
display: block; } }
293288
#sg-form {
294289
margin: 0;
295290
border: 0;
@@ -640,7 +635,6 @@ div.clear {
640635
border-radius: 50%;
641636
opacity: .7; }
642637

643-
/* Pattern Lab icon fonts */
644638
/* Pattern Lab icon fonts */
645639
@font-face {
646640
font-family: 'icomoon';
@@ -649,7 +643,7 @@ div.clear {
649643
font-weight: normal;
650644
font-style: normal; }
651645

652-
.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 {
646+
.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 {
653647
font-family: 'icomoon';
654648
speak: none;
655649
font-style: normal;
@@ -661,41 +655,41 @@ div.clear {
661655
-webkit-font-smoothing: antialiased;
662656
-moz-osx-font-smoothing: grayscale; }
663657

664-
.icon-search:before {
658+
.sg-icon-search:before {
665659
content: "\e600";
666660
font-size: 85%; }
667661

668-
.icon-cog:before {
662+
.sg-icon-cog:before {
669663
content: "\e601"; }
670664

671-
.icon-minus:before {
665+
.sg-icon-minus:before {
672666
content: "\e602"; }
673667

674-
.icon-plus:before {
668+
.sg-icon-plus:before {
675669
content: "\e603"; }
676670

677-
.icon-menu:before {
671+
.sg-icon-menu:before {
678672
content: "\e604"; }
679673

680-
.icon-radio-checked:before, .sg-checkbox.active:before, .sg-checkbox.active:before {
674+
.sg-icon-radio-checked:before, .sg-checkbox.active:before, .sg-checkbox.active:before {
681675
content: "\e605"; }
682676

683-
.icon-radio-unchecked:before, .sg-checkbox:before, .sg-checkbox:before {
677+
.sg-icon-radio-unchecked:before, .sg-checkbox:before, .sg-checkbox:before {
684678
content: "\e606"; }
685679

686-
.icon-file:before {
680+
.sg-icon-file:before {
687681
content: "\e607"; }
688682

689-
.icon-link:before {
683+
.sg-icon-link:before {
690684
content: "\e608"; }
691685

692-
.icon-keyboard:before {
686+
.sg-icon-keyboard:before {
693687
content: "\e609"; }
694688

695-
.icon-qrcode:before {
689+
.sg-icon-qrcode:before {
696690
content: "\e60a"; }
697691

698-
.icon-eye:before {
692+
.sg-icon-eye:before {
699693
content: "\e60b"; }
700694

701695
/******************************************************************/

‎core/styleguide/css/styleguide.scss

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -290,11 +290,14 @@ $animate-quick: 0.2s;
290290
overflow: hidden;
291291
max-height: 0;
292292
min-width: 10em;
293-
background: $sg-primary;
294293
@include sg-transition(max-height,0.1s,ease-out);
295294

295+
li {
296+
background: $sg-primary;
297+
}
298+
296299
&.active {
297-
max-height: 50em;
300+
max-height: 120em;
298301
overflow: auto;
299302
}
300303

@@ -410,7 +413,7 @@ $animate-quick: 0.2s;
410413
#sg-size-mq {
411414
display: none;
412415

413-
@media all and (min-width: $sg-bp-med) {
416+
@media all and (min-width: $sg-bp-large) {
414417
display: block;
415418
}
416419
}

‎core/styleguide/js/styleguide.js

Lines changed: 35 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,28 @@
11
(function (w) {
22

33
var sw = document.body.clientWidth, //Viewport Width
4-
sh = document.body.clientHeight, //Viewport Height
4+
sh = $(document).height(), //Viewport Height
55
minViewportWidth = 240, //Minimum Size for Viewport
66
maxViewportWidth = 2600, //Maxiumum Size for Viewport
77
viewportResizeHandleWidth = 14, //Width of the viewport drag-to-resize handle
88
$sgViewport = $('#sg-viewport'), //Viewport element
99
$sizePx = $('.sg-size-px'), //Px size input element in toolbar
1010
$sizeEms = $('.sg-size-em'), //Em size input element in toolbar
11-
$bodySize = parseInt($('body').css('font-size')), //Body size of the document
11+
$bodySize = parseInt($('body').css('font-size')), //Body size of the document,
12+
$headerHeight = $('.sg-header').height(),
1213
discoID = false,
1314
discoMode = false,
1415
hayMode = false;
1516

1617
//Update dimensions on resize
1718
$(w).resize(function() {
1819
sw = document.body.clientWidth;
19-
sh = document.body.clientHeight;
20+
sh = $(document).height();
21+
22+
setAccordionHeight();
2023
});
2124

22-
/* Accordion dropdown */
25+
// Accordion dropdown
2326
$('.sg-acc-handle').on("click", function(e){
2427
e.preventDefault();
2528

@@ -36,14 +39,24 @@
3639
//Activate selected panel
3740
$this.toggleClass('active');
3841
$panel.toggleClass('active');
42+
setAccordionHeight();
3943
});
4044

45+
//Accordion Height
46+
function setAccordionHeight() {
47+
var $activeAccordion = $('.sg-acc-panel.active').first(),
48+
accordionHeight = $activeAccordion.height(),
49+
availableHeight = sh-$headerHeight; //Screen height minus the height of the header
50+
51+
$activeAccordion.height(availableHeight); //Set height of accordion to the available height
52+
}
53+
4154
$('.sg-nav-toggle').on("click", function(e){
4255
e.preventDefault();
4356
$('.sg-nav-container').toggleClass('active');
4457
});
4558

46-
//"View (containing clean, code, raw, etc options) Trigger
59+
// "View (containing clean, code, raw, etc options) Trigger
4760
$('#sg-t-toggle').on("click", function(e){
4861
e.preventDefault();
4962
$(this).parents('ul').toggleClass('active');
@@ -387,6 +400,18 @@
387400

388401
updateSizeReading(size);
389402
}
403+
404+
//Detect larger screen and no touch support
405+
/*
406+
if('ontouchstart' in document.documentElement && window.matchMedia("(max-width: 700px)").matches) {
407+
$('body').addClass('no-resize');
408+
$('#sg-viewport ').width(sw);
409+
410+
alert('workit');
411+
} else {
412+
413+
}
414+
*/
390415

391416
$('#sg-gen-container').on('touchstart', function(event){});
392417

@@ -438,7 +463,7 @@
438463

439464
var testWidth = screen.width;
440465
if (window.orientation !== undefined) {
441-
testWidth = (window.orientation === 0) ? screen.width : screen.height;
466+
testWidth = (window.orientation == 0) ? screen.width : screen.height;
442467
}
443468
if (($(window).width() == testWidth) && ('ontouchstart' in document.documentElement) && ($(window).width() <= 1024)) {
444469
$("#sg-rightpull-container").width(0);
@@ -482,7 +507,7 @@
482507
history.replaceState({ "pattern": patternName }, null, null);
483508
}
484509

485-
if (document.getElementById("sg-raw") !== undefined) {
510+
if (document.getElementById("sg-raw") != undefined) {
486511
document.getElementById("sg-raw").setAttribute("href",urlHandler.getFileName(patternName));
487512
}
488513

@@ -577,7 +602,7 @@
577602
}
578603
} else if (data.keyPress == 'ctrl+shift+0') {
579604
sizeiframe(320,true);
580-
} else if (found == data.keyPress.match(/ctrl\+shift\+([1-9])/)) {
605+
} else if (found = data.keyPress.match(/ctrl\+shift\+([1-9])/)) {
581606
var val = mqs[(found[1]-1)];
582607
var type = (val.indexOf("px") !== -1) ? "px" : "em";
583608
val = val.replace(type,"");
@@ -590,11 +615,10 @@
590615
window.addEventListener("message", receiveIframeMessage, false);
591616

592617
$('.sg-tools').click(function() {
593-
if ((qrCodeGenerator.lastGenerated === "") || (qrCodeGenerator.lastGenerated !== window.location.search)) {
618+
if ((qrCodeGenerator.lastGenerated == "") || (qrCodeGenerator.lastGenerated != window.location.search)) {
594619
qrCodeGenerator.getQRCode();
595620
qrCodeGenerator.lastGenerated = window.location.search;
596621
}
597622
});
598623

599-
})(this);
600-
624+
})(this);

0 commit comments

Comments
 (0)