Skip to content

Adding Dash Ad #1239

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jan 17, 2019
Merged

Adding Dash Ad #1239

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3ac6a26
styling ad
Jan 17, 2019
cd607e0
running gulp build
Jan 17, 2019
f0e5e79
updating cache
Jan 17, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion _data/cache_bust_css.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
ff0a6e91ea3d23b64142c0d4d49e4b1b ../all_static/css/main.css
77c14d82285744015875e752ccfc8d6e ../all_static/css/main.css
a5765df8bc2358dd61c19edcc0cbef7d ../all_static/css/normalize.css
63 changes: 13 additions & 50 deletions _includes/helpbox.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,52 +1,15 @@
<section class="--help-box">
<div class="--wrap">
<header class="--title">Still need help?</header>
<div class="--body">
<h5>Contact Us</h5>
<ul class="--help-contact">
<li><a href="http://community.plot.ly/">
<div class="icon">
<svg style="width:24px;height:24px" viewbox="0 0 24 24">
<path fill="#000000"
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>
</svg>
</div>
community.plot.ly</a></li>
<li><a href="https://support.plot.ly">
<div class="icon">
<svg style="width:24px;height:24px" viewbox="0 0 24 24">
<path fill="#000000"
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
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
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
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
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
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
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
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
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
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
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
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>
<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
c-0.358,0-0.648,0.29-0.648,0.648S4.323,7.591,4.68,7.591z"></path>
<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
c0.358,0,0.648-0.29,0.648-0.648C9.356,8.926,9.067,8.636,8.709,8.636z"></path>
</svg>
</div>
support.plot.ly</a></li>
<li><a href="https://github.com/plotly">
<div class="icon">
<svg style="width:24px;height:24px" viewbox="0 0 24 24">
<path fill="#000000"
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>
</svg>
</div>
github.com/plotly</a></li>
</ul>
<div class="--cta">
<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>
</div>
</div>
<a
href="https://dash.plot.ly/getting-started
"
><div class="--wrap">
<div class="--body">
<img
height="50%"
width="50%"
src="https://s3-us-west-1.amazonaws.com/plotly-tutorials/assets/dash-ad.png"
/>
</div>
</div>
</section>
</a>
</section>
4 changes: 2 additions & 2 deletions all_static/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1865,7 +1865,7 @@ ul.\--ref {
opacity: 1; }

.\--help-box {
background: #447bdc;
background: #000749;
padding: 40px 20px;
-webkit-box-flex: 1;
-webkit-flex: auto;
Expand Down Expand Up @@ -1964,7 +1964,7 @@ ul.\--ref {
margin-bottom: 20px;
position: relative; }
.\--help-box .\--wrap h5::before {
content: '';
content: "";
position: absolute;
width: 40px;
background: #6693e2;
Expand Down
Binary file added all_static/images/dash-ad.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
129 changes: 63 additions & 66 deletions scss/_components/_helpbox.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,132 +1,129 @@

.\--help-box{
background: $blue;
padding:$unit*4 $unit*2;
flex:auto;
.\--help-box {
background: #000749;
padding: $unit * 4 $unit * 2;
flex: auto;
width: 100%;
position: relative;
z-index:99;
min-width:100%;
.\--wrap{
z-index: 99;
min-width: 100%;
.\--wrap {
//display: flex;
//flex-direction: column;
text-align: center;
.\--title{
.\--title {
color: white;
font-size: 2rem;
}
ul{
ul {
display: flex;
color:white;
width:100%;
justify-content:center;
color: white;
width: 100%;
justify-content: center;
//ta
//border-bottom:$border;
//padding:$unit*2 0;
@include handheld {
flex-wrap: wrap;
li{
flex-wrap: wrap;
li {
flex: 1 1 100%;
text-align: center;
a{
a {
justify-content: center;
align-items: center;
border-right:0;
border-right: 0;
flex-direction: column;
margin-top:$unit;
border-bottom:1px solid lighten($blue, 12%);
padding:$unit*2;

margin-top: $unit;
border-bottom: 1px solid lighten($blue, 12%);
padding: $unit * 2;
}
}
}
padding-bottom:$unit*2;
li{
&:nth-of-type(1){
a::before{
padding-bottom: $unit * 2;
li {
&:nth-of-type(1) {
a::before {
transform-origin: right;
}
}
&:nth-of-type(2){
a::before{
&:nth-of-type(2) {
a::before {
transform-origin: 50% !important;
}
}

div.icon{
margin-right:$unit/2;
margin-top:-3px;
svg{
path{
div.icon {
margin-right: $unit/2;
margin-top: -3px;
svg {
path {
//fill: lighten($blue, 25%);
fill: currentColor;
}

}
}
&:last-of-type{
a{
border-right:0;
&:last-of-type {
a {
border-right: 0;
}
}
span{
span {
display: inline-block;
padding-right:$unit;
padding-right: $unit;
display: none;
}
}
a{
a {
padding: $unit/2 $unit;
padding-top:$unit*1.2;
border-right:1px solid lighten($blue, 12%);
padding-top: $unit * 1.2;
border-right: 1px solid lighten($blue, 12%);

//margin:$unit/2;
display:flex;
&:hover{
display: flex;
&:hover {
background: darken($blue, 5%);
}

color:white;
&:hover{
color: white;
&:hover {
color: white !important;
opacity:1 !important;
opacity: 1 !important;
}
}
}
h5{
font-weight:bold;
color:lighten($bblue, 25%);
opacity:0.8;
h5 {
font-weight: bold;
color: lighten($bblue, 25%);
opacity: 0.8;
font-size: 1.5rem;
padding-bottom:$unit*2;
margin-bottom:$unit*2;
padding-bottom: $unit * 2;
margin-bottom: $unit * 2;
position: relative;
&::before{
content: '';
&::before {
content: "";
position: absolute;
width: $unit*4;
width: $unit * 4;
background: lighten($blue, 8%);
height:6px;
height: 6px;
left: 50%;
margin-left:-$unit*2;
top:100%;
margin-left: -$unit * 2;
top: 100%;
}
}
color: lighten($blue, 25%);
.\--cta{
.\--cta {
background: darken($blue, 5%);
padding:$unit;
padding: $unit;
display: flex;
align-items: center;
justify-content:center;
justify-content: center;
display: inline-block;
max-width:300px;
p{
margin:0;
padding:0;
max-width: 300px;
p {
margin: 0;
padding: 0;
}

a{
a {
text-decoration: underline;
color: #ffffff !important;
}
Expand Down