sheet: improved feed address output (w/ c/c)

master
pictuga 2020-04-25 15:21:47 +02:00
parent f6bc23927f
commit 5847e18e42
1 changed files with 98 additions and 6 deletions

View File

@ -24,13 +24,87 @@
font-family: sans; font-family: sans;
} }
#url { input {
background-color: rgba(255, 165, 0, 0.25); font-family: inherit;
padding: 1% 5%; font-size: inherit;
display: inline-block; text-align: inherit;
max-width: 100%;
} }
.input-combo {
display: flex;
flex-flow: row;
align-items: stretch;
width: 800px;
max-width: 100%;
margin: auto;
border: 1px solid grey;
padding: .5em .5em;
background-color: #FFFAF4;
}
.input-combo * {
display: inline-block;
line-height: 2em;
border: 0;
background: transparent;
}
.input-combo > :not(.button) {
max-width: 100%;
flex-grow: 1;
flex-shrink 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.input-combo .button {
flex-grow: 0;
flex-shrink 1;
cursor: pointer;
min-width: 2em;
text-align: center;
border-left: 1px solid silver;
color: #06f;
}
[onclick_title] {
cursor: pointer;
position: relative;
}
[onclick_title]::before {
opacity: 0;
content: attr(onclick_title);
font-weight: normal;
position: absolute;
left: -300%;
z-index: 1;
background: grey;
color: white;
border-radius: 0.5em;
padding: 0 1em;
}
[onclick_title]:not(:active)::before {
transition: opacity 1s ease-in-out;
}
[onclick_title]:active::before {
opacity: 1;
}
.item { .item {
background-color: #FFFAF4; background-color: #FFFAF4;
border: 1px solid silver; border: 1px solid silver;
@ -65,7 +139,15 @@
<p>Your RSS feed is <strong style="color: green">ready</strong>. You <p>Your RSS feed is <strong style="color: green">ready</strong>. You
can enter the following url in your newsreader:</p> can enter the following url in your newsreader:</p>
<div id="url"></div> <div class="input-combo">
<input id="url" readonly="readonly"/>
<span class="button" onclick="copy_link()" title="Copy" onclick_title="Copied">
<svg width="16px" height="16px" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4 1.5H3a2 2 0 00-2 2V14a2 2 0 002 2h10a2 2 0 002-2V3.5a2 2 0 00-2-2h-1v1h1a1 1 0 011 1V14a1 1 0 01-1 1H3a1 1 0 01-1-1V3.5a1 1 0 011-1h1v-1z" clip-rule="evenodd"/>
<path fill-rule="evenodd" d="M9.5 1h-3a.5.5 0 00-.5.5v1a.5.5 0 00.5.5h3a.5.5 0 00.5-.5v-1a.5.5 0 00-.5-.5zm-3-1A1.5 1.5 0 005 1.5v1A1.5 1.5 0 006.5 4h3A1.5 1.5 0 0011 2.5v-1A1.5 1.5 0 009.5 0h-3z" clip-rule="evenodd"/>
</svg>
</span>
</div>
<hr/> <hr/>
@ -103,6 +185,16 @@
if (!/:html/.test(window.location.href)) if (!/:html/.test(window.location.href))
for (var content of document.querySelectorAll(".desc,.content")) for (var content of document.querySelectorAll(".desc,.content"))
content.innerHTML = content.children.children ? content.innerHTML : content.innerText content.innerHTML = content.children.children ? content.innerHTML : content.innerText
function copy_content(input) {
input.focus()
input.select()
document.execCommand('copy')
}
function copy_link() {
copy_content(document.getElementById("url"))
}
</script> </script>
</body> </body>
</html> </html>