made UI more consistent, fixed a bug
This commit is contained in:
Hacki
parent
505806a647
commit
8451c26af5
6 changed files with 78 additions and 81 deletions
2
.env
2
.env
|
|
@ -1,4 +1,4 @@
|
|||
PLAKKEN_LISTEN=:3000
|
||||
PLAKKEN_LISTEN=:5000
|
||||
PLAKKEN_REDIS_ADDRESS=localhost:6379
|
||||
PLAKKEN_REDIS_USER=
|
||||
PLAKKEN_REDIS_PASSWORD=
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
$accent: #d30f45;
|
||||
$background: #09090b;
|
||||
$background: #0f0f0f;
|
||||
$border: #363636;
|
||||
$text: #f2f2f7;
|
||||
$text: #e5e5e7;
|
||||
$placeholder: #888;
|
||||
|
|
@ -21,7 +21,7 @@ body {
|
|||
|
||||
#line-numbers,
|
||||
#content {
|
||||
font: 400 15px/1.6 "JetBrains Mono", monospace;
|
||||
font: 400 14px/1.6 "JetBrains Mono", monospace;
|
||||
}
|
||||
|
||||
#line-numbers {
|
||||
|
|
@ -83,6 +83,7 @@ select {
|
|||
|
||||
select {
|
||||
padding: 8px 10px;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
select:focus {
|
||||
|
|
@ -108,4 +109,3 @@ textarea {
|
|||
outline: none;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ function updateLn() {
|
|||
}
|
||||
|
||||
function updateTitle() {
|
||||
document.title = filenameSelector.value == '' ? 'New paste' : ` *${filenameSelector.value} - Plakken`;
|
||||
document.title = filenameSelector.value == '' ? 'New paste' : ` ${filenameSelector.value} (Unsaved) - Plakken`;
|
||||
}
|
||||
|
||||
function getRecentPlaksFromStorage() {
|
||||
|
|
|
|||
|
|
@ -1,49 +1,40 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta content="Plakken, paste, pastebin" name="keywords">
|
||||
<meta content="Plakken is a simple open-source paste service where you can store store text for a set period of time."
|
||||
<meta content="Plakken is a simple open-source paste service where you can store text for a set period of time."
|
||||
name="description">
|
||||
<meta content="Plakken" name="author">
|
||||
<meta content="Gnous EU" name="author">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<title>New plak • Plakken</title><script async src="/static/app.js"></script>
|
||||
<link href="/static/favicon.svg" rel="icon">
|
||||
<title>New plak • Plakken</title>
|
||||
<link href="/static/style.css" rel="stylesheet">
|
||||
<script async src="/static/app.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<form action="/create/" method="post">
|
||||
<div>
|
||||
<label for="lines"></label>
|
||||
<textarea id="lines" readonly wrap="hard">1</textarea>
|
||||
</div>
|
||||
<div>
|
||||
<label for="content"></label>
|
||||
<textarea autofocus id="content" name="content" placeholder="Type your paste here"></textarea>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<label for="password">
|
||||
<input id="password" placeholder="Password" type="text">
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="exp">
|
||||
<input id="exp" name="exp" placeholder="Expiration (1d1h1m1s)" type="text">
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<form class="fr" action="/create/" method="post">
|
||||
<div id="line-numbers">1</div>
|
||||
<label for="content"><textarea autofocus id="content" name="content"
|
||||
placeholder="Type your paste here"></textarea></label>
|
||||
</form>
|
||||
<div class="menu fr">
|
||||
<label for="filename"><input id="filename" name="filename" placeholder="Filename" type="text"></label>
|
||||
<!--<label for="password"><input id="password" placeholder="Password" type="password"></label>-->
|
||||
<label for="exp"><input id="exp" name="exp" placeholder="Expiration (1d1h1m1s)" type="text"></label>
|
||||
<label for="type">
|
||||
<select id="type" name="type">
|
||||
<option value="c">C</option>
|
||||
<option value="cpp">C++</option>
|
||||
<select id="type" name="type">zz
|
||||
<option value="c">C/C++</option>
|
||||
<option value="csharp">C#</option>
|
||||
<option value="css">CSS</option>
|
||||
<option value="go">Go</option>
|
||||
<option value="java">Java</option>
|
||||
<option value="js">Javascript</option>
|
||||
<option value="html">HTML</option>
|
||||
<option selected value="plain">Plaintext</option>
|
||||
<option value="python">Python</option>
|
||||
<option selected value="pt">Plaintext</option>
|
||||
<option value="py">Python</option>
|
||||
<option value="rb">Ruby</option>
|
||||
<option value="rs">Rust</option>
|
||||
<option value="sh">Shell</option>
|
||||
|
|
@ -53,15 +44,20 @@
|
|||
<option value="yml">YAML</option>
|
||||
</select>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
<button title="Save plak" type="submit">
|
||||
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
<section id="recent-plaks">
|
||||
<div class="title fr">
|
||||
<h3>Recent plaks</h3>
|
||||
<svg viewBox="0 0 24 24" width="32" height="32" stroke="currentColor" stroke-width="2.5">
|
||||
<polyline points="6 9 12 15 18 9"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -36,7 +36,7 @@ section#recent-plaks .recent-plak svg {
|
|||
cursor: pointer;
|
||||
height: 22px;
|
||||
padding: 5px;
|
||||
stroke: #f2f2f7;
|
||||
stroke: #e5e5e7;
|
||||
stroke-width: 2.25;
|
||||
width: 22px;
|
||||
transition: 0.1s ease-in-out;
|
||||
|
|
@ -58,7 +58,7 @@ h3 {
|
|||
|
||||
::selection {
|
||||
background-color: #d30f45;
|
||||
color: #f2f2f7;
|
||||
color: #e5e5e7;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
|
|
@ -66,7 +66,7 @@ h3 {
|
|||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: #09090b;
|
||||
background-color: #0f0f0f;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
|
|
@ -75,12 +75,12 @@ h3 {
|
|||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #f2f2f7;
|
||||
background-color: #e5e5e7;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #09090b;
|
||||
color: #f2f2f7;
|
||||
background-color: #0f0f0f;
|
||||
color: #e5e5e7;
|
||||
font: 400 16px/2 "Inter", "system-ui", sans-serif;
|
||||
margin: 0;
|
||||
overflow-x: hidden;
|
||||
|
|
@ -93,7 +93,7 @@ body {
|
|||
|
||||
#line-numbers,
|
||||
#content {
|
||||
font: 400 15px/1.6 "JetBrains Mono", monospace;
|
||||
font: 400 14px/1.6 "JetBrains Mono", monospace;
|
||||
}
|
||||
|
||||
#line-numbers {
|
||||
|
|
@ -105,7 +105,7 @@ body {
|
|||
}
|
||||
|
||||
#content {
|
||||
color: #f2f2f7;
|
||||
color: #e5e5e7;
|
||||
height: 100%;
|
||||
min-height: 90vh;
|
||||
padding: 16px 16px 0 16px;
|
||||
|
|
@ -123,16 +123,16 @@ body {
|
|||
height: 24px;
|
||||
fill: none;
|
||||
margin-bottom: -6px;
|
||||
stroke: #f2f2f7;
|
||||
stroke: #e5e5e7;
|
||||
stroke-width: 2;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
background-color: #09090b;
|
||||
background-color: #0f0f0f;
|
||||
border: 2px solid #363636;
|
||||
color: #f2f2f7;
|
||||
color: #e5e5e7;
|
||||
font: 500 14px/2 "Inter", "system-ui", sans-serif;
|
||||
outline: none;
|
||||
padding: 3px 10px;
|
||||
|
|
@ -154,20 +154,21 @@ select:focus-visible {
|
|||
|
||||
select {
|
||||
padding: 8px 10px;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
select:focus {
|
||||
background-color: #09090b;
|
||||
background-color: #0f0f0f;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
option {
|
||||
background-color: #09090b;
|
||||
color: #f2f2f7;
|
||||
background-color: #0f0f0f;
|
||||
color: #e5e5e7;
|
||||
}
|
||||
option:focus {
|
||||
background-color: #d30f45;
|
||||
color: #09090b;
|
||||
color: #0f0f0f;
|
||||
}
|
||||
|
||||
button,
|
||||
|
|
|
|||
Loading…
Reference in a new issue