Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 3eefea1

Browse files
author
Joseph Damiba
authored
Merge pull request plotly#1239 from plotly/dash-anchor
Adding Dash Ad
2 parents ce38fe7 + f0e5e79 commit 3eefea1

File tree

5 files changed

+79
-119
lines changed

5 files changed

+79
-119
lines changed

‎_data/cache_bust_css.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
ff0a6e91ea3d23b64142c0d4d49e4b1b ../all_static/css/main.css
1+
77c14d82285744015875e752ccfc8d6e ../all_static/css/main.css
22
a5765df8bc2358dd61c19edcc0cbef7d ../all_static/css/normalize.css

‎_includes/helpbox.html

Lines changed: 13 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,15 @@
11
<section class="--help-box">
2-
<div class="--wrap">
3-
<header class="--title">Still need help?</header>
4-
<div class="--body">
5-
<h5>Contact Us</h5>
6-
<ul class="--help-contact">
7-
<li><a href="http://community.plot.ly/">
8-
<div class="icon">
9-
<svg style="width:24px;height:24px" viewbox="0 0 24 24">
10-
<path fill="#000000"
11-
d="M17,12V3A1,1 0 0,0 16,2H3A1,1 0 0,0 2,3V17L6,13H16A1,1 0 0,0 17,12M21,6H19V15H6V17A1,1 0 0,0 7,18H18L22,22V7A1,1 0 0,0 21,6Z"></path>
12-
</svg>
13-
</div>
14-
community.plot.ly</a></li>
15-
<li><a href="https://support.plot.ly">
16-
<div class="icon">
17-
<svg style="width:24px;height:24px" viewbox="0 0 24 24">
18-
<path fill="#000000"
19-
d="M14.9,6.707c-0.804-2.497-3.649-4.351-7.035-4.351c-4.008,0-7.27,2.594-7.27,5.782
20-
c0,2.163,1.516,4.133,3.903,5.122v3.091c0,0.251,0.144,0.478,0.372,0.586c0.087,0.042,0.182,0.062,0.276,0.062
21-
c0.148,0,0.295-0.051,0.412-0.15l3.678-3.038c0.14-0.022,0.275-0.057,0.413-0.084c0.655,0.666,1.544,1.185,2.607,1.46
22-
c0.198,0.051,0.401,0.094,0.608,0.125l2.641,2.182c0.118,0.099,0.264,0.15,0.413,0.15c0.094,0,0.188-0.02,0.276-0.062
23-
c0.228-0.108,0.372-0.335,0.372-0.586v-2.135c1.74-0.761,2.84-2.231,2.84-3.846C19.405,8.862,17.456,7.073,14.9,6.707z
24-
M8.885,12.552c-0.019,0.003-0.032,0.018-0.051,0.022c-0.101,0.022-0.2,0.056-0.281,0.123l-2.76,2.28v-2.161
25-
c0-0.275-0.175-0.521-0.434-0.612C3.253,11.467,1.89,9.871,1.89,8.138c0-2.474,2.68-4.487,5.975-4.487
26-
c2.604,0,4.801,1.265,5.617,3.014c0.187,0.401,0.302,0.823,0.33,1.268c0.005,0.069,0.028,0.134,0.028,0.205
27-
c0,1.819-1.481,3.438-3.706,4.129c-0.115,0.037-0.224,0.08-0.343,0.111C9.497,12.455,9.196,12.513,8.885,12.552z M15.703,13.809
28-
c-0.259,0.091-0.434,0.336-0.434,0.612v1.199l-1.723-1.422c-0.095-0.079-0.211-0.129-0.333-0.144
29-
c-0.219-0.028-0.431-0.068-0.636-0.121c-0.545-0.14-1.023-0.364-1.433-0.64c2.423-0.969,3.99-2.942,3.99-5.155
30-
c0-0.024-0.004-0.047-0.005-0.071c1.718,0.385,2.98,1.553,2.98,2.948C18.11,12.202,17.165,13.299,15.703,13.809z"></path>
31-
<path fill="none" d="M4.68,7.591h6.167c0.358,0,0.648-0.29,0.648-0.648s-0.29-0.648-0.648-0.648H4.68
32-
c-0.358,0-0.648,0.29-0.648,0.648S4.323,7.591,4.68,7.591z"></path>
33-
<path fill="none" d="M8.709,8.636H4.68c-0.358,0-0.648,0.29-0.648,0.648c0,0.358,0.29,0.648,0.648,0.648h4.028
34-
c0.358,0,0.648-0.29,0.648-0.648C9.356,8.926,9.067,8.636,8.709,8.636z"></path>
35-
</svg>
36-
</div>
37-
support.plot.ly</a></li>
38-
<li><a href="https://github.com/plotly">
39-
<div class="icon">
40-
<svg style="width:24px;height:24px" viewbox="0 0 24 24">
41-
<path fill="#000000"
42-
d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z"></path>
43-
</svg>
44-
</div>
45-
github.com/plotly</a></li>
46-
</ul>
47-
<div class="--cta">
48-
<p>For guaranteed 24 hour response turnarounds, upgrade to a <a href="https://support.plot.ly/plans" style="color: #555;">Developer Support Plan.</a></p>
49-
</div>
50-
</div>
2+
<a
3+
href="https://dash.plot.ly/getting-started
4+
"
5+
><div class="--wrap">
6+
<div class="--body">
7+
<img
8+
height="50%"
9+
width="50%"
10+
src="https://s3-us-west-1.amazonaws.com/plotly-tutorials/assets/dash-ad.png"
11+
/>
12+
</div>
5113
</div>
52-
</section>
14+
</a>
15+
</section>

‎all_static/css/main.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1865,7 +1865,7 @@ ul.\--ref {
18651865
opacity: 1; }
18661866

18671867
.\--help-box {
1868-
background: #447bdc;
1868+
background: #000749;
18691869
padding: 40px 20px;
18701870
-webkit-box-flex: 1;
18711871
-webkit-flex: auto;
@@ -1964,7 +1964,7 @@ ul.\--ref {
19641964
margin-bottom: 20px;
19651965
position: relative; }
19661966
.\--help-box .\--wrap h5::before {
1967-
content: '';
1967+
content: "";
19681968
position: absolute;
19691969
width: 40px;
19701970
background: #6693e2;

‎all_static/images/dash-ad.png

389 KB
Loading

‎scss/_components/_helpbox.scss

Lines changed: 63 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,132 +1,129 @@
1-
2-
.\--help-box{
3-
background: $blue;
4-
padding:$unit*4 $unit*2;
5-
flex:auto;
1+
.\--help-box {
2+
background: #000749;
3+
padding: $unit * 4 $unit * 2;
4+
flex: auto;
65
width: 100%;
76
position: relative;
8-
z-index:99;
9-
min-width:100%;
10-
.\--wrap{
7+
z-index: 99;
8+
min-width: 100%;
9+
.\--wrap {
1110
//display: flex;
1211
//flex-direction: column;
1312
text-align: center;
14-
.\--title{
13+
.\--title {
1514
color: white;
1615
font-size: 2rem;
1716
}
18-
ul{
17+
ul {
1918
display: flex;
20-
color:white;
21-
width:100%;
22-
justify-content:center;
19+
color: white;
20+
width: 100%;
21+
justify-content: center;
2322
//ta
2423
//border-bottom:$border;
2524
//padding:$unit*2 0;
2625
@include handheld {
27-
flex-wrap: wrap;
28-
li{
26+
flex-wrap: wrap;
27+
li {
2928
flex: 1 1 100%;
3029
text-align: center;
31-
a{
30+
a {
3231
justify-content: center;
3332
align-items: center;
34-
border-right:0;
33+
border-right: 0;
3534
flex-direction: column;
36-
margin-top:$unit;
37-
border-bottom:1px solid lighten($blue, 12%);
38-
padding:$unit*2;
39-
35+
margin-top: $unit;
36+
border-bottom: 1px solid lighten($blue, 12%);
37+
padding: $unit * 2;
4038
}
4139
}
4240
}
43-
padding-bottom:$unit*2;
44-
li{
45-
&:nth-of-type(1){
46-
a::before{
41+
padding-bottom: $unit * 2;
42+
li {
43+
&:nth-of-type(1) {
44+
a::before {
4745
transform-origin: right;
4846
}
4947
}
50-
&:nth-of-type(2){
51-
a::before{
48+
&:nth-of-type(2) {
49+
a::before {
5250
transform-origin: 50% !important;
5351
}
5452
}
5553

56-
div.icon{
57-
margin-right:$unit/2;
58-
margin-top:-3px;
59-
svg{
60-
path{
54+
div.icon {
55+
margin-right: $unit/2;
56+
margin-top: -3px;
57+
svg {
58+
path {
6159
//fill: lighten($blue, 25%);
6260
fill: currentColor;
6361
}
64-
6562
}
6663
}
67-
&:last-of-type{
68-
a{
69-
border-right:0;
64+
&:last-of-type {
65+
a {
66+
border-right: 0;
7067
}
7168
}
72-
span{
69+
span {
7370
display: inline-block;
74-
padding-right:$unit;
71+
padding-right: $unit;
7572
display: none;
7673
}
7774
}
78-
a{
75+
a {
7976
padding: $unit/2 $unit;
80-
padding-top:$unit*1.2;
81-
border-right:1px solid lighten($blue, 12%);
77+
padding-top: $unit * 1.2;
78+
border-right: 1px solid lighten($blue, 12%);
8279

8380
//margin:$unit/2;
84-
display:flex;
85-
&:hover{
81+
display: flex;
82+
&:hover {
8683
background: darken($blue, 5%);
8784
}
8885

89-
color:white;
90-
&:hover{
86+
color: white;
87+
&:hover {
9188
color: white !important;
92-
opacity:1 !important;
89+
opacity: 1 !important;
9390
}
9491
}
9592
}
96-
h5{
97-
font-weight:bold;
98-
color:lighten($bblue, 25%);
99-
opacity:0.8;
93+
h5 {
94+
font-weight: bold;
95+
color: lighten($bblue, 25%);
96+
opacity: 0.8;
10097
font-size: 1.5rem;
101-
padding-bottom:$unit*2;
102-
margin-bottom:$unit*2;
98+
padding-bottom: $unit * 2;
99+
margin-bottom: $unit * 2;
103100
position: relative;
104-
&::before{
105-
content: '';
101+
&::before {
102+
content: "";
106103
position: absolute;
107-
width: $unit*4;
104+
width: $unit * 4;
108105
background: lighten($blue, 8%);
109-
height:6px;
106+
height: 6px;
110107
left: 50%;
111-
margin-left:-$unit*2;
112-
top:100%;
108+
margin-left: -$unit * 2;
109+
top: 100%;
113110
}
114111
}
115112
color: lighten($blue, 25%);
116-
.\--cta{
113+
.\--cta {
117114
background: darken($blue, 5%);
118-
padding:$unit;
115+
padding: $unit;
119116
display: flex;
120117
align-items: center;
121-
justify-content:center;
118+
justify-content: center;
122119
display: inline-block;
123-
max-width:300px;
124-
p{
125-
margin:0;
126-
padding:0;
120+
max-width: 300px;
121+
p {
122+
margin: 0;
123+
padding: 0;
127124
}
128125

129-
a{
126+
a {
130127
text-decoration: underline;
131128
color: #ffffff !important;
132129
}

0 commit comments

Comments
 (0)