mirror of
https://github.com/skidoodle/pastebin
synced 2025-10-14 09:44:48 +02:00
v2
This commit is contained in:
@@ -13,4 +13,4 @@ templ base(title string) {
|
||||
{ children... }
|
||||
</body>
|
||||
</html>
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
// Code generated by templ - DO NOT EDIT.
|
||||
|
||||
// templ: version: v0.3.924
|
||||
// templ: version: v0.3.943
|
||||
package view
|
||||
|
||||
//lint:file-ignore SA4006 This context is only used if a nested component is present.
|
||||
|
||||
@@ -9,28 +9,26 @@ templ BinPreviewPage(id, content string) {
|
||||
templ BinEditorPage() {
|
||||
@base("bin") {
|
||||
<form action="/" method="post">
|
||||
<label for="content-editor" class="sr-only">Paste Content</label>
|
||||
<textarea
|
||||
id="content-editor"
|
||||
name="content"
|
||||
placeholder="bin something"
|
||||
autofocus
|
||||
autocomplete="off"
|
||||
autocorrent="off"
|
||||
autocorrect="off"
|
||||
autocapitalize="off"
|
||||
spellcheck="false"
|
||||
></textarea>
|
||||
<button type="submit"></button>
|
||||
<button type="submit">Save</button>
|
||||
</form>
|
||||
<script>
|
||||
const form = document.querySelector('form');
|
||||
const input = document.querySelector('textarea');
|
||||
const button = document.querySelector('button[type="submit"]');
|
||||
|
||||
document.body.addEventListener('keydown', (e) => {
|
||||
if (e.which === 83 && e.ctrlKey) { // ctrl + s
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.ctrlKey && e.key === 's') {
|
||||
e.preventDefault();
|
||||
form.submit();
|
||||
document.querySelector('form').submit();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
// Code generated by templ - DO NOT EDIT.
|
||||
|
||||
// templ: version: v0.3.924
|
||||
// templ: version: v0.3.943
|
||||
package view
|
||||
|
||||
//lint:file-ignore SA4006 This context is only used if a nested component is present.
|
||||
@@ -88,7 +88,7 @@ func BinEditorPage() templ.Component {
|
||||
}()
|
||||
}
|
||||
ctx = templ.InitializeContext(ctx)
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<form action=\"/\" method=\"post\"><textarea name=\"content\" placeholder=\"bin something\" autofocus autocomplete=\"off\" autocorrent=\"off\" autocapitalize=\"off\" spellcheck=\"false\"></textarea> <button type=\"submit\"></button></form><script>\n const form = document.querySelector('form');\n const input = document.querySelector('textarea');\n const button = document.querySelector('button[type=\"submit\"]');\n\n document.body.addEventListener('keydown', (e) => {\n if (e.which === 83 && e.ctrlKey) { // ctrl + s\n e.preventDefault();\n form.submit();\n }\n });\n </script>")
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<form action=\"/\" method=\"post\"><label for=\"content-editor\" class=\"sr-only\">Paste Content</label> <textarea id=\"content-editor\" name=\"content\" placeholder=\"bin something\" autofocus autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\"></textarea> <button type=\"submit\">Save</button></form><script>\n document.addEventListener('keydown', (e) => {\n if (e.ctrlKey && e.key === 's') {\n e.preventDefault();\n document.querySelector('form').submit();\n }\n });\n </script>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
|
||||
107
view/style.css
107
view/style.css
@@ -1,3 +1,12 @@
|
||||
:root {
|
||||
--background-color: #212121;
|
||||
--text-color: #b0bec5;
|
||||
--scrollbar-track-color: #2c2c2c;
|
||||
--scrollbar-thumb-color: #555;
|
||||
--scrollbar-thumb-hover-color: #888;
|
||||
--spacing: 2rem;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -5,90 +14,106 @@
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
font-family: monospace;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
padding: 2rem;
|
||||
background: #212121;
|
||||
color: #b0bec5;
|
||||
line-height: 1.5;
|
||||
background: var(--background-color);
|
||||
color: var(--text-color);
|
||||
display: flex;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
body,
|
||||
code,
|
||||
textarea {
|
||||
font-family: monospace;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
form {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
textarea,
|
||||
pre {
|
||||
flex-grow: 1;
|
||||
margin: 0;
|
||||
padding: var(--spacing);
|
||||
background: none;
|
||||
border: none;
|
||||
outline: 0;
|
||||
padding: 0;
|
||||
outline: none;
|
||||
resize: none;
|
||||
overflow: auto;
|
||||
color: inherit;
|
||||
font-size: 1rem;
|
||||
line-height: inherit;
|
||||
line-height: 1.6;
|
||||
font-family: inherit;
|
||||
overflow: auto;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: transparent !important;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
font-size: 1rem;
|
||||
line-height: inherit;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
code {
|
||||
display: block;
|
||||
}
|
||||
|
||||
button[type="submit"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
span {
|
||||
min-width: 4em;
|
||||
}
|
||||
|
||||
textarea::-webkit-scrollbar,
|
||||
pre::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
textarea::-webkit-scrollbar-track,
|
||||
pre::-webkit-scrollbar-track {
|
||||
background: #2c2c2c;
|
||||
background: var(--scrollbar-track-color);
|
||||
}
|
||||
|
||||
textarea::-webkit-scrollbar-thumb,
|
||||
pre::-webkit-scrollbar-thumb {
|
||||
background-color: #555;
|
||||
background-color: var(--scrollbar-thumb-color);
|
||||
border-radius: 6px;
|
||||
border: 2px solid #2c2c2c;
|
||||
border: 3px solid var(--scrollbar-track-color);
|
||||
}
|
||||
|
||||
textarea::-webkit-scrollbar-thumb:hover,
|
||||
pre::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #888;
|
||||
background-color: var(--scrollbar-thumb-hover-color);
|
||||
}
|
||||
|
||||
textarea,
|
||||
pre {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #555 #2c2c2c;
|
||||
scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
|
||||
}
|
||||
|
||||
pre > code > span > span:first-child {
|
||||
display: inline-block;
|
||||
width: 4em;
|
||||
color: #555;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
:root {
|
||||
--spacing: 1rem;
|
||||
}
|
||||
html {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user