Easy-copy dropdown dialog for badge

This commit is contained in:
Herman Schaaf
2016-02-07 23:04:43 +08:00
parent 690132312c
commit f390c002e8

View File

@@ -68,9 +68,11 @@
}
.results-text .badge-col {
text-align: right;
position: relative;
}
.results-text .badge-col img {
.results-text .badge-col .badge {
margin-top: 10px;
cursor: pointer;
}
.menu-block.is-active {
font-weight: bold;
@@ -103,6 +105,26 @@
margin-top: 1em;
font-weight: 600;
}
#badge_dropdown {
position: absolute;
top: 32px;
right: 0;
width: 100%;
max-width: 400px;
padding: 10px;
border: 3px solid #dddddd;
background: white;
}
#badge_dropdown label {
clear: left;
float: left;
font-size: 0.8em;
}
#badge_dropdown input {
float: left;
font-size: 0.8em;
width: 100%;
}
nav.results.stickytop {
position:fixed;
top:0;
@@ -264,7 +286,7 @@
<h1 class="title">Report for <strong>{{repo}}</strong></h1>
<p><span class="huge">{{grade}}</span> &nbsp;&nbsp; {{gradeMessage grade}} &emsp;&emsp; Found <strong>{{issues}}</strong> issues across <strong>{{files}}</strong> files</p>
</div>
<div class="column is-quarter badge-col"><img src="http://goreportcard.com/badge/{{repo}}"/></div>
<div class="column is-quarter badge-col"><img class="badge" tag="{{repo}}" src="/badge/{{repo}}"/></div>
</script>
<script id="template-check" type="text/x-handlebars-template">
<a class="menu-block" href="#{{{name}}}">
@@ -272,6 +294,16 @@
<span class="percentage {{color percentage}}">{{percentage}}%</span>
</a>
</script>
<script id="template-badgedropdown" type="text/x-handlebars-template">
<div id="badge_dropdown" class="hidden">
<div>
<label>Image URL</label><input value="{{{image_url}}}">
</div>
<div>
<label>Markdown</label><input value="[![Go Report Card]({{{image_url}}})]({{{url}}})">
</div>
</div>
</script>
<script id="template-details" type="text/x-handlebars-template">
<div class="wrapper">
<a name="{{{name}}}"></a><h1 class="tool-title">{{{name}}}<span class="percentage {{color percentage}}">{{percentage}}%</span></h1>
@@ -380,6 +412,19 @@
$(this).addClass('is-loading');
return false;
});
var badgeData = {
url: "https://goreportcard.com/report/" + data.repo,
image_url: "https://goreportcard.com/badge/" + data.repo,
}
var $badgeDropdown = $(templates.badgedropdown(badgeData));
$badgeDropdown.find("input").on("click", function(){
$(this).select();
});
$(".badge-col").append($badgeDropdown);
$(".badge-col .badge").on("click", function(){
$(this).closest(".badge-col").find("#badge_dropdown").toggleClass("hidden");
});
};
function alertMessage(msg){