karton/templates/pasta.html

96 lines
2.4 KiB
HTML
Raw Normal View History

2022-04-10 22:21:45 +00:00
{% include "header.html" %}
<div style="float: left">
<a style="margin-right: 0.5rem" href="{{ args.public_path }}/raw/{{pasta.id_as_animals()}}">Raw Text Content</a>
{% if pasta.file.is_some() %}
<a style="margin-right: 0.5rem; margin-left: 0.5rem"
href="{{ args.public_path }}/file/{{pasta.id_as_animals()}}/{{pasta.file.as_ref().unwrap().name()}}">
2022-07-31 20:31:35 +00:00
Attached file'{{pasta.file.as_ref().unwrap().name()}}' [{{pasta.file.as_ref().unwrap().size}}]
</a>
{%- endif %}
{% if pasta.editable %}
<a style="margin-right: 0.5rem; margin-left: 0.5rem"
href="{{ args.public_path }}/edit/{{pasta.id_as_animals()}}">Edit</a>
{%- endif %}
<a style="margin-right: 0.5rem; margin-left: 0.5rem"
href="{{ args.public_path }}/remove/{{pasta.id_as_animals()}}">Remove</a>
</div>
<div style="float: right">
<a href="{{ args.public_path }}/pasta/{{pasta.id_as_animals()}}"><i>{{pasta.id_as_animals()}}</i></a>
<button id="copy-button" class="copy-button">
Copy
</button>
</div>
<br>
2022-10-01 05:37:26 +00:00
<div class="code-container">
<div style="clear: both;">
{% if args.highlightsyntax %}
<pre><code id="code">{{pasta.content_syntax_highlighted()}}</code></pre>
{%- else %}
<pre><code id="code">{{pasta.content_not_highlighted()}}</code></pre>
{%- endif %}
</div>
</div>
2022-10-01 05:37:26 +00:00
<script>
2022-10-22 18:12:15 +00:00
const btn = document.getElementById("copy-button")
2022-10-02 04:50:05 +00:00
const content = `{{ pasta.content_escaped() }}`
2022-10-01 05:37:26 +00:00
btn.addEventListener("click", () => {
navigator.clipboard.writeText(content)
2022-10-22 18:12:15 +00:00
btn.innerHTML = "Copied"
setTimeout(() => {
btn.innerHTML = "Copy"
}, 1000)
2022-10-01 05:37:26 +00:00
})
</script>
<style>
code-line {
counter-increment: listing;
text-align: right;
float: left;
clear: left;
}
code-line::before {
content: counter(listing);
display: inline-block;
float: left;
padding-left: auto;
margin-left: auto;
text-align: left;
width: 1.6rem;
border-right: 1px solid lightgrey;
color: grey;
margin-right: 0.4rem;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#code {
min-height: 2rem;
}
2022-10-01 05:37:26 +00:00
.code-container {
position: relative;
}
2022-10-02 04:50:05 +00:00
.hidden {
display: none;
}
2022-10-01 05:37:26 +00:00
.copy-button {
font-size: small;
background-color: var(--links);
color: var(--background-body);
margin-right: 0.5rem;
margin-left: 0.5rem;
padding: 4px;
width: 4rem;
}
</style>
{% include "footer.html" %}