feat(shorten): improve ux by showing users what the shortened url is
Signed-off-by: Amogh Lele <amogh@dyte.io>
This commit is contained in:
Amogh Lele
parent
20a0b45954
commit
dbe75a5065
@ -6,107 +6,123 @@
|
||||
@import "./markdown.css";
|
||||
|
||||
@font-face {
|
||||
font-family: "JetBrains Mono";
|
||||
src: url(/fonts/jetbrains_mono_variable.ttf);
|
||||
font-weight: 100 1000;
|
||||
font-stretch: 25% 151%;
|
||||
font-family: "JetBrains Mono";
|
||||
src: url(/fonts/jetbrains_mono_variable.ttf);
|
||||
font-weight: 100 1000;
|
||||
font-stretch: 25% 151%;
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.17em;
|
||||
font-weight: bold;
|
||||
}
|
||||
h4 {
|
||||
font-weight: bold;
|
||||
}
|
||||
h5 {
|
||||
font-size: 0.83em;
|
||||
font-weight: bold;
|
||||
}
|
||||
h6 {
|
||||
font-size: 0.67em;
|
||||
font-weight: bold;
|
||||
}
|
||||
h1, h2, h3 {
|
||||
margin-top: 20px;
|
||||
margin-bottom:10px
|
||||
}
|
||||
img {
|
||||
display: inline;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.17em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 0.83em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 0.67em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px
|
||||
}
|
||||
|
||||
img {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #ff9800;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #ff9800;
|
||||
color: #ff9800;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: #1a1a1a;
|
||||
background-color: #1a1a1a;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
}
|
||||
|
||||
code {
|
||||
white-space: pre;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
white-space: pre;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
textarea {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner,
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 8px;
|
||||
@apply bg-amber;
|
||||
border-radius: 8px;
|
||||
@apply bg-amber;
|
||||
}
|
||||
|
||||
.alert {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
background-color: #1ed98e;
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
background-color: #1ed98e;
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
background-color: #ff9800;
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
background-color: #ff9800;
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
}
|
||||
@ -2,7 +2,6 @@ defmodule KetbinWeb.Api.PasteController do
|
||||
use KetbinWeb, :controller
|
||||
|
||||
alias Ketbin.Pastes
|
||||
alias Ketbin.Pastes.Paste
|
||||
alias Ketbin.Pastes.Utils
|
||||
|
||||
def show(conn, %{"id" => id}) do
|
||||
|
||||
@ -37,7 +37,7 @@ defmodule KetbinWeb.PageController do
|
||||
[head | tail] = String.split(id, ".")
|
||||
paste = Pastes.get_paste!(head)
|
||||
|
||||
render(conn, "show.html",
|
||||
render(conn, "shorten.html",
|
||||
paste: paste,
|
||||
show_edit: show_edit,
|
||||
extension: if(tail == [], do: "", else: tail)
|
||||
|
||||
16
lib/ketbin_web/templates/page/shorten.html.heex
Normal file
16
lib/ketbin_web/templates/page/shorten.html.heex
Normal file
@ -0,0 +1,16 @@
|
||||
<div class="flex relative flex-col w-full h-full">
|
||||
<div class="flex absolute top-0 right-0 p-4">
|
||||
<%= if @show_edit do%>
|
||||
<a href={ Routes.page_path(@conn, :edit, @paste.id) } class="text-white hover:text-amber">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="h-6 w-6 cursor-pointer fill-current">
|
||||
<path d="M3 17.46v3.04c0 .28.22.5.5.5h3.04c.13 0 .26-.05.35-.15L17.81 9.94l-3.75-3.75L3.15 17.1c-.1.1-.15.22-.15.36zM20.71 7.04a.996.996 0 0 0 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="break-word px-6 py-4 h-full w-full overflow-y-auto">
|
||||
<span>
|
||||
Your shortened url is: <a href={Routes.page_path(@conn, :show, @paste.id) }>https://katb.in/<%= @paste.id %></a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user