sphericalkat/katbin
1
0
Fork 0
Code Issues 5 Pull Requests 12 Actions Packages Projects Releases Wiki Activity

feat(shorten): improve ux by showing users what the shortened url is

Browse Source 
Signed-off-by: Amogh Lele <amogh@dyte.io>
This commit is contained in:
Amogh Lele 2022-05-21 16:21:02 +05:30
parent 20a0b45954
commit dbe75a5065
No known key found for this signature in database
GPG Key ID: 56429BFA4A7B86B6
4 changed files with 95 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
assets/css/app.css
View File

@ -6,107 +6,123 @@
@import "./markdown.css"; @import "./markdown.css";
@font-face { @font-face {
font-family: "JetBrains Mono"; font-family: "JetBrains Mono";
src: url(/fonts/jetbrains_mono_variable.ttf); src: url(/fonts/jetbrains_mono_variable.ttf);
font-weight: 100 1000; font-weight: 100 1000;
font-stretch: 25% 151%; font-stretch: 25% 151%;
} }
* { * {
font-family: "JetBrains Mono", monospace; font-family: "JetBrains Mono", monospace;
color: white; color: white;
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
} }
@layer base { @layer base {
h1 { h1 {
font-size: 2em; font-size: 2em;
font-weight: bold; font-weight: bold;
} }
h2 {
font-size: 1.5em; h2 {
font-weight: bold; font-size: 1.5em;
} font-weight: bold;
h3 { }
font-size: 1.17em;
font-weight: bold; h3 {
} font-size: 1.17em;
h4 { font-weight: bold;
font-weight: bold; }
}
h5 { h4 {
font-size: 0.83em; font-weight: bold;
font-weight: bold; }
}
h6 { h5 {
font-size: 0.67em; font-size: 0.83em;
font-weight: bold; font-weight: bold;
} }
h1, h2, h3 {
margin-top: 20px; h6 {
margin-bottom:10px font-size: 0.67em;
} font-weight: bold;
img { }
display: inline;
} h1,
h2,
h3 {
margin-top: 20px;
margin-bottom: 10px
}
img {
display: inline;
}
} }
html, html,
body { body {
width: 100%; width: 100%;
height: 100%; height: 100%;
}
a {
color: #ff9800;
} }
a:hover { a:hover {
color: #ff9800; color: #ff9800;
text-decoration: underline;
} }
header { header {
background-color: #1a1a1a; background-color: #1a1a1a;
} }
code { code {
font-family: "JetBrains Mono", monospace; font-family: "JetBrains Mono", monospace;
} }
code { code {
white-space: pre; white-space: pre;
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
} }
textarea { textarea {
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 8px; width: 8px;
height: 8px; height: 8px;
} }
::-webkit-scrollbar-corner, ::-webkit-scrollbar-corner,
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: transparent; background: transparent;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
border-radius: 8px; border-radius: 8px;
@apply bg-amber; @apply bg-amber;
} }
.alert { .alert {
width: 100%; width: 100%;
text-align: center; text-align: center;
} }
.alert-info { .alert-info {
background-color: #1ed98e; background-color: #1ed98e;
color: black; color: black;
font-weight: bold; font-weight: bold;
} }
.alert-danger { .alert-danger {
background-color: #ff9800; background-color: #ff9800;
color: black; color: black;
font-weight: bold; font-weight: bold;
} }

1
lib/ketbin_web/controllers/api/paste_controller.ex
View File

@ -2,7 +2,6 @@ defmodule KetbinWeb.Api.PasteController do
use KetbinWeb, :controller use KetbinWeb, :controller
alias Ketbin.Pastes alias Ketbin.Pastes
alias Ketbin.Pastes.Paste
alias Ketbin.Pastes.Utils alias Ketbin.Pastes.Utils
def show(conn, %{"id" => id}) do def show(conn, %{"id" => id}) do

2
lib/ketbin_web/controllers/page_controller.ex
View File

@ -37,7 +37,7 @@ defmodule KetbinWeb.PageController do
[head | tail] = String.split(id, ".") [head | tail] = String.split(id, ".")
paste = Pastes.get_paste!(head) paste = Pastes.get_paste!(head)
render(conn, "show.html", render(conn, "shorten.html",
paste: paste, paste: paste,
show_edit: show_edit, show_edit: show_edit,
extension: if(tail == [], do: "", else: tail) extension: if(tail == [], do: "", else: tail)

16
lib/ketbin_web/templates/page/shorten.html.heex Normal file
View 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>