harmacist/healthchecks
1
0
Fork 0
forked from GithubBackups/healthchecks
Code Issues Pull Requests Projects Releases Wiki Activity

Use ripple effect instead of arrows in setup instruction screenshots

Browse Source
This commit is contained in:
Pēteris Caune 2019-04-20 23:01:13 +03:00
parent 1cf08e0048
commit 76479714a4
No known key found for this signature in database
GPG Key ID: E28D7679E9A9EDE2
2 changed files with 48 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
static/css/channels.css
View File

@ -203,6 +203,38 @@ table.channels-table > tbody > tr > th {
font-weight: 300;
}
.ai-step .marker-wrap {
position: relative;
clear: both;
}
.ai-step .marker {
width: 20px;
height: 20px;
margin-left: -10px;
margin-top: -10px;
background: #2abb66;
position: absolute;
border-radius: 10px;
opacity: 0;
animation: marker-ripple 1.2s ease-out infinite;
}
@keyframes marker-ripple {
0%, 35% {
transform: scale(0);
opacity: 0.5;
}
50% {
transform: scale(1.5);
opacity: 0.3;
}
100% {
opacity: 0;
transform: scale(4);
}
}
.ai-guide-screenshot {
max-width: 100%;
border: 6px solid #EEE;

11
templates/integrations/add_pagertree.html
View File

@ -24,10 +24,13 @@
</p>
</div>
<div class="col-sm-6">
<div class="marker-wrap">
<span style="left: 89%; top: 19%;" class="marker"></span>
<img
class="ai-guide-screenshot"
alt="Click create integration button"
src="{% static 'img/integrations/setup_pagertree_1.png' %}">
src="{% static 'img/integrations/setup_pagertree_1.png' %}" />
</div>
</div>
</div>
@ -50,18 +53,22 @@
<div class="col-sm-6">
<span class="step-no">3</span>
<p>
Copy the <strong>Endpoint URL</strong> and paste it
Copy the <strong>Endpoint address</strong> and paste it
in the form below.
Save the integration, and you are done!
</p>
</div>
<div class="col-sm-6">
<div class="marker-wrap">
<span style="left: 32%; top: 59%;" class="marker"></span>
<img
class="ai-guide-screenshot"
alt="Copy the Webhook URL"
src="{% static 'img/integrations/setup_pagertree_3.png' %}">
</div>
</div>
</div>
<h2>Integration Settings</h2>