Merge pull request #19 from paulcpederson/master

Fix CSS, No Fixed Sidebar
paulcpederson · May 30, 2014 · fb4e98d · fb4e98d
2 parents d501354 + 2668995
commit fb4e98d
Show file tree

Hide file tree

Showing 9 changed files with 91 additions and 33 deletions.
diff --git a/README.md b/README.md
@@ -156,11 +156,11 @@ Assuming you set that on your scope as `$scope.scatterData`, you can use the fol
 <graph data="scatterData" width="100%" height="600px">
   <x field="Height" type="Measure"></x>
   <y field="Weight" type="Measure"></y>
-  <scatter-plot series="Height"></scatter-plot>
+  <scatter-plot field="Weight" series="Height" label="Group A"></scatter-plot>
 </graph>
 ```
 
-* Note: right now if your data set has two heights which are the same, it will average the two weights together. This comes from dimple, but we'd like to change that default behavior, see [this issue](https://github.com/esripdx/angular-dimple/issues/15).*
+* Note: the `label` attribute will make all the points the same color and title the group with that label in the legend if you have one.*
 
 ## Contributing
 

diff --git a/documentation/layout.html b/documentation/layout.html
@@ -14,7 +14,7 @@
   <link rel="stylesheet" href="../css/examples.css"/>
 
   <!-- Brick Fonts -->
-  <link rel="stylesheet" href="//brick.a.ssl.fastly.net/Source+Code+Pro:200,300/EB+Garamond:400,400i/Open+Sans:400,700">
+  <link rel="stylesheet" href="//brick.a.ssl.fastly.net/Source+Code+Pro:200,300/Clear+Sans:200,300,400,400i,500,500i,700,700i">
 
 </head>
 
@@ -110,6 +110,10 @@
         </ul>
       </aside>
 
+      <div class="scroll-to-top">
+        <button class="btn outline" onClick="window.scrollTo(0,0);">Back to Top</button>
+      </div>
+
       <!-- Views -->
       <main class="column-18 pre-2 tablet-column-24 right">
         <div class="white-panel padded">

diff --git a/site/css/examples.css b/site/css/examples.css
@@ -151,3 +151,15 @@
     float: left;
   }
 }
+
+@media screen and (max-width: 480px) {
+  /* line 54, ../scss/examples.scss */
+  .container {
+    padding: 0 0;
+  }
+
+  /* line 57, ../scss/examples.scss */
+  .white-panel.padded {
+    padding: 2rem 1rem;
+  }
+}
diff --git a/site/css/style.css b/site/css/style.css
@@ -1868,6 +1868,7 @@ pre .tex .formula {
   padding: 1em;
   background-color: #1f85c4;
   color: #ecf0f3;
+  border: none;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   -ms-border-radius: 3px;
@@ -1878,44 +1879,48 @@ pre .tex .formula {
   font-size: 0.75em;
   font-weight: 300;
   cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
   -webkit-transition: background-color 75ms linear, color 75ms linear;
   -moz-transition: background-color 75ms linear, color 75ms linear;
   -o-transition: background-color 75ms linear, color 75ms linear;
   transition: background-color 75ms linear, color 75ms linear;
 }
-/* line 14, ../scss/base/_buttons.scss */
-.btn:hover {
+/* line 16, ../scss/base/_buttons.scss */
+.btn:hover, .btn:focus {
   background-color: #379fdf;
   color: white;
+  outline: none;
 }
-/* line 18, ../scss/base/_buttons.scss */
+/* line 21, ../scss/base/_buttons.scss */
 .btn.outline {
   background: transparent;
   color: #1f85c4;
   border: 1px solid #1f85c4;
 }
-/* line 22, ../scss/base/_buttons.scss */
+/* line 25, ../scss/base/_buttons.scss */
 .btn.outline:hover {
   background-color: #379fdf;
   color: white;
   border: 1px solid #379fdf;
 }
-/* line 28, ../scss/base/_buttons.scss */
+/* line 31, ../scss/base/_buttons.scss */
 .btn.dark-blue {
   background: #245070;
   color: #dde3e8;
 }
-/* line 31, ../scss/base/_buttons.scss */
+/* line 34, ../scss/base/_buttons.scss */
 .btn.dark-blue:hover {
   background-color: #306c97;
   color: #ecf0f3;
 }
-/* line 36, ../scss/base/_buttons.scss */
+/* line 39, ../scss/base/_buttons.scss */
 .btn.white {
   background: #fafbfe;
   color: #245070;
 }
-/* line 39, ../scss/base/_buttons.scss */
+/* line 42, ../scss/base/_buttons.scss */
 .btn.white:hover {
   background-color: white;
   color: #1f85c4;
@@ -2031,20 +2036,21 @@ pre .tex .formula {
 
 /* line 94, ../scss/style.scss */
 .sidebar {
-  position: fixed;
-  height: 100vh;
+  position: absolute;
   overflow: auto;
+  background-color: #fafbfe;
+  z-index: 2;
 }
-/* line 100, ../scss/style.scss */
+/* line 99, ../scss/style.scss */
 .sidebar li {
   margin-bottom: 1rem;
   padding: .25rem 0;
 }
-/* line 104, ../scss/style.scss */
+/* line 103, ../scss/style.scss */
 .sidebar a {
   width: 100%;
 }
-/* line 106, ../scss/style.scss */
+/* line 105, ../scss/style.scss */
 .sidebar a img {
   float: left;
   height: 3rem;
@@ -2065,13 +2071,13 @@ pre .tex .formula {
   -o-transition: all 200ms linear;
   transition: all 200ms linear;
 }
-/* line 118, ../scss/style.scss */
+/* line 117, ../scss/style.scss */
 .sidebar a:hover img {
   -webkit-box-shadow: 0 0 0 4px #dde3e8;
   -moz-box-shadow: 0 0 0 4px #dde3e8;
   box-shadow: 0 0 0 4px #dde3e8;
 }
-/* line 123, ../scss/style.scss */
+/* line 122, ../scss/style.scss */
 .sidebar span {
   display: inline-block;
   line-height: 3rem;
@@ -2083,14 +2089,25 @@ pre .tex .formula {
     position: relative;
     height: auto;
   }
-  /* line 133, ../scss/style.scss */
+  /* line 132, ../scss/style.scss */
   .sidebar li {
     display: inline-block;
     padding-right: 1rem;
   }
 }
 
-/* line 140, ../scss/style.scss */
+/* line 138, ../scss/style.scss */
+.scroll-to-top {
+  position: fixed;
+}
+@media screen and (max-width: 960px) {
+  /* line 138, ../scss/style.scss */
+  .scroll-to-top {
+    display: none;
+  }
+}
+
+/* line 145, ../scss/style.scss */
 .chart {
   position: absolute;
   top: 0;
@@ -2101,7 +2118,7 @@ pre .tex .formula {
   padding-left: 1rem;
 }
 
-/* line 150, ../scss/style.scss */
+/* line 155, ../scss/style.scss */
 .chart-icon {
   display: inline-block;
   margin-bottom: 1rem;
@@ -2121,11 +2138,11 @@ pre .tex .formula {
   transition: all 200ms linear;
   border: 1px solid #dde3e8;
 }
-/* line 162, ../scss/style.scss */
+/* line 167, ../scss/style.scss */
 .chart-icon:hover {
   background-color: #fafbfe;
 }
-/* line 165, ../scss/style.scss */
+/* line 170, ../scss/style.scss */
 .chart-icon:before {
   content: "";
   position: absolute;
@@ -2147,19 +2164,19 @@ pre .tex .formula {
   -o-transition: all 200ms linear;
   transition: all 200ms linear;
 }
-/* line 178, ../scss/style.scss */
+/* line 183, ../scss/style.scss */
 .chart-icon:hover:before {
   -webkit-box-shadow: 0 0 0 12px #dde3e8;
   -moz-box-shadow: 0 0 0 12px #dde3e8;
   box-shadow: 0 0 0 12px #dde3e8;
 }
-/* line 182, ../scss/style.scss */
+/* line 187, ../scss/style.scss */
 .chart-icon img {
   width: 100%;
   height: auto;
 }
 
-/* line 188, ../scss/style.scss */
+/* line 193, ../scss/style.scss */
 .footer {
   position: relative;
   z-index: 5;

diff --git a/site/documentation/index.html b/site/documentation/index.html
@@ -14,7 +14,7 @@
   <link rel="stylesheet" href="../css/examples.css"/>
 
   <!-- Brick Fonts -->
-  <link rel="stylesheet" href="//brick.a.ssl.fastly.net/Source+Code+Pro:200,300/EB+Garamond:400,400i/Open+Sans:400,700">
+  <link rel="stylesheet" href="//brick.a.ssl.fastly.net/Source+Code+Pro:200,300/Clear+Sans:200,300,400,400i,500,500i,700,700i">
 
 </head>
 
@@ -110,6 +110,10 @@
         </ul>
       </aside>
 
+      <div class="scroll-to-top">
+        <button class="btn outline" onClick="window.scrollTo(0,0);">Back to Top</button>
+      </div>
+
       <!-- Views -->
       <main class="column-18 pre-2 tablet-column-24 right">
         <div class="white-panel padded">

diff --git a/site/examples/index.html b/site/examples/index.html
@@ -13,7 +13,7 @@
   <link rel="stylesheet" href="../css/examples.css"/>
 
   <!-- Brick Fonts -->
-  <link rel="stylesheet" href="//brick.a.ssl.fastly.net/Source+Code+Pro:200,300/EB+Garamond:400,400i/Open+Sans:400,700">
+  <link rel="stylesheet" href="//brick.a.ssl.fastly.net/Source+Code+Pro:200,300/Clear+Sans:200,300,400,400i,500,500i,700,700i">
 
   <!-- Dimple and D3 -->
   <script src="http://d3js.org/d3.v3.min.js"></script>
@@ -89,6 +89,10 @@
         </ul>
       </aside>
 
+      <div class="scroll-to-top">
+        <button class="btn outline" onClick="window.scrollTo(0,0);">Back to Top</button>
+      </div>
+
       <!-- Views -->
       <main class="column-18 pre-2 tablet-column-24 right">
         <div ng-view></div>

diff --git a/site/scss/base/_buttons.scss b/site/scss/base/_buttons.scss
@@ -4,16 +4,19 @@
   padding: 1em;
   background-color: $blue;
   color: $lighter-gray;
+  border: none;
   @include border-radius(3px);
   text-decoration: none;
   font-family: $source;
   font-size: 0.75em;
   font-weight: 300;
   cursor: pointer;
+  @include user-select(none);
   @include transition(background-color 75ms linear, color 75ms linear);
-  &:hover {
+  &:hover, &:focus {
     background-color: lighten($blue, 10%);
     color: $white;
+    outline: none;
   }
   &.outline {
     background: transparent;

diff --git a/site/scss/examples.scss b/site/scss/examples.scss
@@ -48,4 +48,13 @@ h2 {
     margin-bottom: 1.5rem;
     float: left;
   }
+}
+
+@include respond-to($phone){
+  .container {
+    padding: 0 0;
+  }
+  .white-panel.padded {
+    padding: 2rem 1rem;
+  }
 }
diff --git a/site/scss/style.scss b/site/scss/style.scss
@@ -92,11 +92,10 @@
 }
 
 .sidebar {
-  position: fixed;
-  height: 100vh;
+  position: absolute;
   overflow: auto;
-
-
+  background-color: $off-white;
+  z-index: 2;
   li {
     margin-bottom: 1rem;
     padding: .25rem 0;
@@ -136,6 +135,12 @@
     }
   }
 }
+.scroll-to-top {
+  position: fixed;
+  @include respond-to($tablet-mid){
+    display: none;
+  }
+}
 
 .chart {
   position: absolute;