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

Commit 2e869a6

Browse files
bradfrostbradfrost
committed
Annotation style and behavior tweaks
1 parent ddcbc4c commit 2e869a6

File tree

5 files changed

+111
-114
lines changed

5 files changed

+111
-114
lines changed

‎public/styleguide/css/styleguide.css

Lines changed: 41 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -433,6 +433,8 @@
433433
color: #222222;
434434
padding: 1em 0.5em;
435435
margin: 1em 0; }
436+
.sg-code a, .sg-annotations a {
437+
text-decoration: underline; }
436438

437439
.sg-code pre {
438440
white-space: -moz-pre-line;
@@ -525,14 +527,50 @@
525527
.sg-label {
526528
line-height: 1; }
527529

528-
#comment-container {
530+
#sg-annotation-container {
529531
position: fixed;
530532
bottom: 0;
531533
left: 0;
532534
z-index: 99;
533535
width: 100%;
534-
padding: 1em;
535-
background: red; }
536+
padding: 1em; }
537+
538+
/* Annotations */
539+
#sg-annotation-container {
540+
-moz-box-sizing: border-box;
541+
-webkit-box-sizing: border-box;
542+
box-sizing: border-box;
543+
font-family: "HelveticaNeue", "Helvetica", "Arial", sans-serif;
544+
font-size: 90%;
545+
background: #222222;
546+
color: gray;
547+
position: fixed;
548+
top: auto;
549+
padding: 1rem 1rem 4rem;
550+
bottom: 0;
551+
left: 0;
552+
width: 100%;
553+
z-index: 2;
554+
-webkit-transition: bottom 0.3s ease-out;
555+
-moz-transition: bottom 0.3s ease-out;
556+
-webkit-transition: bottom 0.3s ease-out;
557+
-ms-transition: bottom 0.3s ease-out;
558+
-o-transition: bottom 0.3s ease-out;
559+
transition: bottom 0.3s ease-out; }
560+
#sg-annotation-container a {
561+
color: #dddddd; }
562+
563+
#sg-annotation-close-btn {
564+
color: #fff;
565+
position: absolute;
566+
top: 1em;
567+
right: 1em;
568+
text-transform: uppercase;
569+
text-decoration: none;
570+
text-align: right; }
571+
572+
.has-comment, .has-comment a {
573+
cursor: help !important; }
536574

537575
@font-face {
538576
font-family: 'icons';
@@ -575,45 +613,3 @@
575613

576614
.icon-eye:before {
577615
content: "\e001"; }
578-
579-
/* Annotations */
580-
#comment-container {
581-
font-family: "HelveticaNeue", "Helvetica", "Arial", sans-serif;
582-
background: #222222;
583-
color: #fff;
584-
position: relative;
585-
top: 0;
586-
left: 0;
587-
z-index: 2;
588-
text-align: left;
589-
padding: 1em; }
590-
#comment-container a {
591-
color: #dddddd; }
592-
593-
#close-comments {
594-
color: #fff;
595-
position: absolute;
596-
top: 1em;
597-
right: 1em;
598-
text-transform: uppercase;
599-
display: none; }
600-
601-
#comment-container {
602-
position: fixed;
603-
top: auto;
604-
padding: 1em 1em 4em;
605-
bottom: 0;
606-
left: 0;
607-
width: 100%;
608-
-webkit-transition: bottom 0.3s ease-out;
609-
-moz-transition: bottom 0.3s ease-out;
610-
-webkit-transition: bottom 0.3s ease-out;
611-
-ms-transition: bottom 0.3s ease-out;
612-
-o-transition: bottom 0.3s ease-out;
613-
transition: bottom 0.3s ease-out; }
614-
615-
#close-comments {
616-
display: block; }
617-
618-
.has-comment, .has-comment a {
619-
cursor: help !important; }

‎public/styleguide/css/styleguide.scss

Lines changed: 49 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -634,6 +634,10 @@ $animate-quick: 0.2s;
634634
color: $sg-primary;
635635
padding: $sg-pad $sg-pad-half;
636636
margin: $sg-space 0;
637+
638+
a {
639+
text-decoration: underline;
640+
}
637641
}
638642

639643
.sg-code {
@@ -763,16 +767,59 @@ $animate-quick: 0.2s;
763767
}
764768

765769
//Annotation
766-
#comment-container {
770+
#sg-annotation-container {
767771
position: fixed;
768772
bottom: 0;
769773
left: 0;
770774
z-index: 99;
771775
width: 100%;
772776
padding: $sg-pad;
773-
background: red;
774777
}
775778

779+
780+
/* Annotations */
781+
#sg-annotation-container {
782+
-moz-box-sizing: border-box;
783+
-webkit-box-sizing: border-box;
784+
box-sizing: border-box;
785+
font-family: $sg-font;
786+
font-size: 90%;
787+
background: $sg-primary;
788+
color: $sg-secondary;
789+
position: fixed;
790+
top: auto;
791+
padding: 1rem 1rem 4rem;
792+
bottom: 0;
793+
left: 0;
794+
width: 100%;
795+
z-index: 2;
796+
-webkit-transition: bottom 0.3s ease-out;
797+
-moz-transition: bottom 0.3s ease-out;
798+
-webkit-transition: bottom 0.3s ease-out;
799+
-ms-transition: bottom 0.3s ease-out;
800+
-o-transition: bottom 0.3s ease-out;
801+
transition: bottom 0.3s ease-out;
802+
803+
a {
804+
color: $sg-tertiary;
805+
}
806+
}
807+
808+
#sg-annotation-close-btn {
809+
color: #fff;
810+
position: absolute;
811+
top: 1em;
812+
right: 1em;
813+
text-transform: uppercase;
814+
text-decoration: none;
815+
text-align: right;
816+
}
817+
818+
.has-comment, .has-comment a {
819+
cursor: help !important;
820+
}
821+
822+
776823
// Icon Font
777824

778825
@font-face {
@@ -820,53 +867,4 @@ $animate-quick: 0.2s;
820867
}
821868
.icon-eye:before {
822869
content: "\e001";
823-
}
824-
825-
826-
/* Annotations */
827-
#comment-container {
828-
font-family: $sg-font;
829-
background: $sg-primary;
830-
color: #fff;
831-
position: relative;
832-
top: 0;
833-
left: 0;
834-
z-index: 2;
835-
text-align: left;
836-
padding: 1em;
837-
838-
a {
839-
color: $sg-tertiary;
840-
}
841-
}
842-
843-
#close-comments {
844-
color: #fff;
845-
position: absolute;
846-
top: 1em;
847-
right: 1em;
848-
text-transform: uppercase;
849-
display: none;
850-
}
851-
852-
#comment-container {
853-
position: fixed;
854-
top: auto;
855-
padding: 1em 1em 4em;
856-
bottom: 0;
857-
left: 0;
858-
width: 100%;
859-
-webkit-transition: bottom 0.3s ease-out;
860-
-moz-transition: bottom 0.3s ease-out;
861-
-webkit-transition: bottom 0.3s ease-out;
862-
-ms-transition: bottom 0.3s ease-out;
863-
-o-transition: bottom 0.3s ease-out;
864-
transition: bottom 0.3s ease-out;
865-
}
866-
#close-comments {
867-
display: block;
868-
}
869-
870-
.has-comment, .has-comment a {
871-
cursor: help !important;
872870
}

‎public/styleguide/js/annotations-viewer.js

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,7 @@ var annotationsViewer = {
1717
$('body').addClass('comments-ready');
1818
$('#sg-t-annotations').click(function(e) {
1919

20-
e.preventDefault();
21-
20+
e.preventDefault();
2221
annotationsViewer.toggleComments();
2322
annotationsViewer.commentContainerInit();
2423

@@ -48,40 +47,40 @@ var annotationsViewer = {
4847

4948
commentContainerInit: function() {
5049

51-
if (document.getElementById("comment-container") == undefined) {
52-
$('<div id="comment-container" style="display: none;"></div>').html('<a href="#" id="close-comments">Close</a><h2 id="comment-title">Annotation Title</h2><div id="comment-text">Here is some comment text</div>').appendTo('body').css('bottom',-$(document).outerHeight());
50+
if (document.getElementById("sg-annotation-container") == undefined) {
51+
$('<div id="sg-annotation-container" style="display: none;"></div>').html('<a href="#" id="sg-annotation-close-btn">Close</a><h2 id="sg-annotation-title">Annotation Title</h2><div id="sg-annotation-text">Here is some comment text</div>').appendTo('body').css('bottom',-$(document).outerHeight());
5352
}
5453

5554
if (annotationsViewer.sw < annotationsViewer.breakpoint) {
56-
$('#comment-container').hide();
55+
$('#sg-annotation-container').hide();
5756
} else {
58-
$('#comment-container').show();
57+
$('#sg-annotation-container').show();
5958
}
6059

61-
$('body').delegate('#close-comments','click',function(e) {
62-
annotationsViewer.slideComment($('#comment-container').outerHeight());
60+
$('body').delegate('#sg-annotation-close-btn','click',function(e) {
61+
annotationsViewer.slideComment($('#sg-annotation-container').outerHeight());
6362
return false;
6463
});
6564

6665
},
6766

6867
slideComment: function(pos) {
6968

70-
$('#comment-container').show();
69+
$('#sg-annotation-container').show();
7170

7271
if (annotationsViewer.sw > annotationsViewer.breakpoint) {
73-
$('#comment-container').css('bottom',-pos);
72+
$('#sg-annotation-container').css('bottom',-pos);
7473
} else {
75-
var offset = $('#comment-container').offset().top;
74+
var offset = $('#sg-annotation-container').offset().top;
7675
$('html,body').animate({scrollTop: offset}, 500);
7776
}
7877

7978
},
8079

8180
updateComment: function(el,title,msg) {
82-
var $container = $('#comment-container'),
83-
$title = $('#comment-title'),
84-
$text = $('#comment-text');
81+
var $container = $('#sg-annotation-container'),
82+
$title = $('#sg-annotation-title'),
83+
$text = $('#sg-annotation-text');
8584
$title.text(title);
8685
$text.html(msg);
8786
annotationsViewer.slideComment(0);
@@ -103,7 +102,7 @@ var annotationsViewer = {
103102
if (event.data.commentOverlay == "on") {
104103
annotationsViewer.updateComment(event.data.el,event.data.title,event.data.comment);
105104
} else {
106-
annotationsViewer.slideComment($('#comment-container').outerHeight());
105+
annotationsViewer.slideComment($('#sg-annotation-container').outerHeight());
107106
}
108107
}
109108

‎source/_data/annotations.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎source/_patternlab-files/pattern-header-footer/header.html

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,11 @@
44
<title>Pattern Lab Pattern</title>
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width" />
7+
8+
<!--
9+
Styleguide CSS is included for
10+
-->
11+
<link rel="stylesheet" href="../../styleguide/css/styleguide.css" media="all">
712

813
<!--
914
Remember that patterns are displayed from two-levels deep (e.g. patterns/patterntype-patternsubtype-patternname/patterntype-patternsubtype-patternname.html)
@@ -17,6 +22,5 @@
1722
</style>
1823

1924
</head>
20-
<body>
21-
25+
<body class="sg-single-pattern">
2226
<!-- Start of Pattern -->

0 commit comments

Comments
 (0)