Skip to content

Commit 38522d5

Browse files
nikolaswisenikolaswise
committed
Merge pull request #7 from nikolaswise/master
responsive styles
2 parents 6479e9a + a6265cd commit 38522d5

File tree

11 files changed

+474
-159
lines changed

11 files changed

+474
-159
lines changed

‎README.md‎

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -99,20 +99,6 @@ Passing a line tag with a field and no value will draw a line on the chart for e
9999
</bar-graph>
100100
```
101101

102-
#### Future Graph Types
103-
104-
We'd like to accomplish all of the following charts as directives:
105-
106-
- Line
107-
- Multiple Line
108-
- Area
109-
- Stacked Area
110-
- 100% Stacked Area
111-
- Bar
112-
- Multiple Bar
113-
- Stacked Bar
114-
- Donut
115-
116102
## Contributing
117103

118104
1. Fork & clone

‎documentation/layout.html‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -45,73 +45,73 @@
4545
<div class="row">
4646

4747
<!-- Menu -->
48-
<aside class="sidebar column-4">
48+
<aside class="sidebar column-4 tablet-column-24">
4949
<ul class="menu">
5050
<li>
5151
<a href="#graph">
5252
<img src="../img/graph.svg">
53-
<span>Graph</span>
53+
<span class="phone-hide">Graph</span>
5454
</a>
5555
</li>
5656
<li>
5757
<a href="#x">
5858
<img src="../img/x.svg">
59-
<span>X</span>
59+
<span class="phone-hide">X</span>
6060
</a>
6161
</li>
6262
<li>
6363
<a href="#y">
6464
<img src="../img/y.svg">
65-
<span>Y</span>
65+
<span class="phone-hide">Y</span>
6666
</a>
6767
</li>
6868
<li>
6969
<a href="#legend">
7070
<img src="../img/legend.svg">
71-
<span>Legend</span>
71+
<span class="phone-hide">Legend</span>
7272
</a>
7373
</li>
7474
<li>
7575
<a href="#line">
7676
<img src="../img/line.svg">
77-
<span>Line</span>
77+
<span class="phone-hide">Line</span>
7878
</a>
7979
</li>
8080
<li>
8181
<a href="#bar">
8282
<img src="../img/bar.svg">
83-
<span>Bar</span>
83+
<span class="phone-hide">Bar</span>
8484
</a>
8585
</li>
8686
<li>
8787
<a href="#stacked-bar">
8888
<img src="../img/stacked-bar.svg">
89-
<span>Stacked Bar</span>
89+
<span class="phone-hide">Stacked Bar</span>
9090
</a>
9191
</li>
9292
<li>
9393
<a href="#area">
9494
<img src="../img/area.svg">
95-
<span>Area</span>
95+
<span class="phone-hide">Area</span>
9696
</a>
9797
</li>
9898
<li>
9999
<a href="#stacked-area">
100100
<img src="../img/stacked-area.svg">
101-
<span>Stacked Area</span>
101+
<span class="phone-hide">Stacked Area</span>
102102
</a>
103103
</li>
104104
<li>
105105
<a href="#scatter-plot">
106106
<img src="../img/scatter-plot.svg">
107-
<span>Scatter Plot</span>
107+
<span class="phone-hide">Scatter Plot</span>
108108
</a>
109109
</li>
110110
</ul>
111111
</aside>
112112

113113
<!-- Views -->
114-
<main class="column-18 pre-2 right">
114+
<main class="column-18 pre-2 tablet-column-24 right">
115115
<div class="white-panel padded">
116116
<%= content %>
117117
</div>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-dimple",
3-
"version": "0.1.0",
3+
"version": "1.0.0",
44
"description": "Angular.js wrapper for the Dimple charting language",
55
"repository": "https://github.com/esripdx/angular-dimple",
66
"license": "ISC",

‎site/css/examples.css‎

Lines changed: 121 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,101 @@
1-
/* line 4, ../scss/examples.scss */
1+
/* line 109, ../scss/base/_mixins.scss */
2+
.show {
3+
visibility: visible;
4+
}
5+
6+
/* line 113, ../scss/base/_mixins.scss */
7+
.hide {
8+
display: none !important;
9+
visibility: hidden;
10+
}
11+
12+
@media screen and (min-width: 960px) {
13+
/* line 118, ../scss/base/_mixins.scss */
14+
.phone-hide {
15+
visibility: visible;
16+
}
17+
18+
/* line 119, ../scss/base/_mixins.scss */
19+
.tablet-hide {
20+
visibility: visible;
21+
}
22+
23+
/* line 120, ../scss/base/_mixins.scss */
24+
.phone-show {
25+
display: none !important;
26+
visibility: hidden;
27+
}
28+
29+
/* line 121, ../scss/base/_mixins.scss */
30+
.tablet-show {
31+
display: none !important;
32+
visibility: hidden;
33+
}
34+
35+
/* line 122, ../scss/base/_mixins.scss */
36+
.tablet-only {
37+
display: none !important;
38+
visibility: hidden;
39+
}
40+
}
41+
@media screen and (max-width: 959px) and (min-width: 480px) {
42+
/* line 127, ../scss/base/_mixins.scss */
43+
.phone-hide {
44+
visibility: visible;
45+
}
46+
47+
/* line 128, ../scss/base/_mixins.scss */
48+
.tablet-hide {
49+
display: none !important;
50+
visibility: hidden;
51+
}
52+
53+
/* line 129, ../scss/base/_mixins.scss */
54+
.phone-show {
55+
display: none !important;
56+
visibility: hidden;
57+
}
58+
59+
/* line 130, ../scss/base/_mixins.scss */
60+
.tablet-show {
61+
visibility: visible;
62+
}
63+
64+
/* line 131, ../scss/base/_mixins.scss */
65+
.tablet-only {
66+
visibility: visible;
67+
}
68+
}
69+
@media screen and (max-width: 479px) {
70+
/* line 136, ../scss/base/_mixins.scss */
71+
.phone-hide {
72+
display: none !important;
73+
visibility: hidden;
74+
}
75+
76+
/* line 137, ../scss/base/_mixins.scss */
77+
.tablet-hide {
78+
display: none !important;
79+
visibility: hidden;
80+
}
81+
82+
/* line 138, ../scss/base/_mixins.scss */
83+
.phone-show {
84+
visibility: visible;
85+
}
86+
87+
/* line 139, ../scss/base/_mixins.scss */
88+
.tablet-show {
89+
visibility: visible;
90+
}
91+
92+
/* line 140, ../scss/base/_mixins.scss */
93+
.tablet-only {
94+
display: none !important;
95+
visibility: hidden;
96+
}
97+
}
98+
/* line 5, ../scss/examples.scss */
299
.white-panel {
3100
margin-bottom: 1rem;
4101
background-color: white;
@@ -12,74 +109,45 @@
12109
-o-border-radius: 3px;
13110
border-radius: 3px;
14111
}
15-
/* line 10, ../scss/examples.scss */
112+
/* line 11, ../scss/examples.scss */
16113
.white-panel.padded {
17114
padding: 2rem;
18115
}
19-
/* line 14, ../scss/examples.scss */
116+
/* line 15, ../scss/examples.scss */
20117
.white-panel h2 {
21118
padding: 6rem 0 1rem 0;
22119
}
23120

24-
/* line 19, ../scss/examples.scss */
121+
@media screen and (max-width: 662px) {
122+
/* line 20, ../scss/examples.scss */
123+
h2 {
124+
display: inline-block;
125+
}
126+
}
127+
128+
/* line 26, ../scss/examples.scss */
25129
.example-link {
26130
margin-top: -2.75rem;
27131
float: right;
28132
font-family: "Source Code Pro", "Inconsolata", "Consolas", "Courier New", monospace;
29133
font-size: 1rem;
30134
}
31135

32-
/* line 26, ../scss/examples.scss */
33-
.sidebar {
34-
position: fixed;
35-
height: 100vh;
36-
overflow: auto;
37-
}
38-
/* line 30, ../scss/examples.scss */
39-
.sidebar li {
40-
margin-bottom: 1rem;
41-
padding: .25rem 0;
42-
}
43-
/* line 34, ../scss/examples.scss */
44-
.sidebar a {
45-
width: 100%;
46-
}
47-
/* line 36, ../scss/examples.scss */
48-
.sidebar a img {
49-
float: left;
50-
height: 3rem;
51-
width: 3rem;
52-
margin-right: 1rem;
53-
background-color: white;
54-
border: 2px solid #dde3e8;
55-
-webkit-border-radius: 50%;
56-
-moz-border-radius: 50%;
57-
-ms-border-radius: 50%;
58-
-o-border-radius: 50%;
59-
border-radius: 50%;
60-
-webkit-box-shadow: 0 0 0 0 #dde3e8;
61-
-moz-box-shadow: 0 0 0 0 #dde3e8;
62-
box-shadow: 0 0 0 0 #dde3e8;
63-
-webkit-transition: all 200ms linear;
64-
-moz-transition: all 200ms linear;
65-
-o-transition: all 200ms linear;
66-
transition: all 200ms linear;
67-
}
68-
/* line 48, ../scss/examples.scss */
69-
.sidebar a:hover img {
70-
-webkit-box-shadow: 0 0 0 4px #dde3e8;
71-
-moz-box-shadow: 0 0 0 4px #dde3e8;
72-
box-shadow: 0 0 0 4px #dde3e8;
73-
}
74-
/* line 53, ../scss/examples.scss */
75-
.sidebar span {
76-
display: inline-block;
77-
line-height: 3rem;
78-
}
79-
80-
/* line 59, ../scss/examples.scss */
136+
/* line 35, ../scss/examples.scss */
81137
.api-link {
82138
font-size: 1rem;
83139
float: right;
84140
line-height: 3.25rem;
85141
}
142+
143+
@media screen and (max-width: 662px) {
144+
/* line 43, ../scss/examples.scss */
145+
.example-link,
146+
.api-link {
147+
width: 100%;
148+
display: block;
149+
margin-top: 0rem;
150+
margin-bottom: 1.5rem;
151+
float: left;
152+
}
153+
}

0 commit comments

Comments
 (0)