Skip to content

Commit be40a5a

Browse files
Flo0807Flo0807
authored
Merge pull request #209 from Flo0807/improve-appearance
Improve appearance
2 parents 5e7dbdf + 1218020 commit be40a5a

File tree

7 files changed

+91
-79
lines changed

7 files changed

+91
-79
lines changed

‎assets/css/app.css

+11-8
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,24 @@
22
@import "tailwindcss/components";
33
@import "tailwindcss/utilities";
44

5-
/* This file is for your main application CSS */
6-
7-
@layer utilities {
8-
:root {
9-
--app-height: 100%;
10-
}
5+
@layer base {
116

127
html,
138
body,
14-
.main-container {
9+
[data-phx-main] {
1510
padding: 0;
1611
margin: 0;
17-
overflow: hidden;
1812
width: 100vw;
1913
height: 100vh;
2014
height: var(--app-height);
2115
}
16+
17+
body>[data-phx-main]>footer {
18+
position: sticky;
19+
top: 100dvh;
20+
}
21+
22+
:root {
23+
--app-height: 100%;
24+
}
2225
}

‎assets/js/dynamicTextArea.js

+11-6
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,24 @@
11
const DynamicTextArea = {
22
mounted() {
3-
setHeight(this.el);
3+
const defaultHeight = this.el.dataset.defaultHeight;
4+
5+
setHeight(this.el, defaultHeight);
46

57
this.el.addEventListener('input', () => {
6-
setHeight(this.el);
8+
setHeight(this.el, defaultHeight);
79
});
810
}
911
}
1012

11-
const setHeight = (textArea) => {
12-
textArea.style.height = "0px";
13+
const setHeight = (textArea, defaultHeight) => {
14+
textArea.style.height = `${defaultHeight}px`;
15+
1316
const contentHeight = textArea.scrollHeight;
1417

15-
// we need to add 2px to the height to avoid the scrollbar
16-
textArea.style.height = `${contentHeight + 2}px`;
18+
if (contentHeight > defaultHeight) {
19+
// we need to add 2px to the height to avoid the scrollbar
20+
textArea.style.height = `${contentHeight + 2}px`;
21+
}
1722
}
1823

1924
export default DynamicTextArea;

‎assets/tailwind.config.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,15 @@ module.exports = {
1818
...require("daisyui/src/theming/themes")["light"],
1919
primary: "#2563eb",
2020
warning: "#fbbf24",
21-
info: "#38bdf8"
21+
info: "#38bdf8",
22+
'primary-content': 'white'
2223
},
2324
dark: {
2425
...require("daisyui/src/theming/themes")["dark"],
2526
primary: "#2563eb",
2627
warning: "#fbbf24",
27-
info: "#38bdf8"
28+
info: "#38bdf8",
29+
'primary-content': 'white'
2830
}
2931
},
3032
],

‎lib/share_secret_web/components/core_components.ex

+48-45
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,8 @@ defmodule ShareSecretWeb.CoreComponents do
159159
id={@id}
160160
phx-hook="DynamicTextArea"
161161
name={@name}
162-
class={["textarea textarea-bordered h-0", @class]}
162+
class={["textarea textarea-bordered h-[100px]", @class]}
163+
data-default-height={100}
163164
{@rest}
164165
><%= Phoenix.HTML.Form.normalize_value("textarea", @value) %></textarea>
165166
</div>
@@ -384,53 +385,55 @@ defmodule ShareSecretWeb.CoreComponents do
384385

385386
def navbar(assigns) do
386387
~H"""
387-
<nav class="navbar border-base-200 border-b px-2 py-2 shadow-sm">
388-
<div class="flex-1">
389-
<.link href={~p"/"} aria-label={gettext("Homepage")}>
390-
<span class="btn btn-ghost flex items-center space-x-1 normal-case">
391-
<.logo_icon class="inline-block h-6 w-auto fill-current" />
392-
<p class="hidden text-xl sm:block">Share a Secret</p>
393-
</span>
394-
</.link>
395-
</div>
396-
397-
<div class="flex-none">
398-
<div class="menu menu-horizontal items-center">
399-
<div class="dropdown dropdown-end">
400-
<label tabindex="0" class="btn btn-ghost text-sm normal-case">
401-
<%= gettext("Theme") %> <.icon name="hero-chevron-down" class="h-4 w-4" />
402-
</label>
403-
<div
404-
tabindex="0"
405-
class="dropdown-content z-[1] menu bg-base-200 rounded-box w-32 p-2 shadow"
406-
>
407-
<button class="btn btn-sm mb-1 text-sm normal-case" data-set-theme="light">
408-
<.icon name="hero-sun" class="mr-1 inline-block h-4 w-4" /> <%= gettext("Light") %>
409-
</button>
410-
411-
<button class="btn btn-sm text-sm normal-case" data-set-theme="dark">
412-
<.icon name="hero-moon" class="mr-1 inline-block h-4 w-4" /> <%= gettext("Dark") %>
413-
</button>
414-
</div>
415-
</div>
416-
417-
<.link
418-
href="https://github.com/Flo0807/share-a-secret"
419-
target="_blank"
420-
aria-label={gettext("GitHub")}
421-
>
422-
<span class="btn btn-ghost">
423-
<.github_icon class="inline-block h-6 w-6 fill-current" />
388+
<nav class="navbar border-base-200/50 border-b ">
389+
<div class="mx-auto flex w-full max-w-7xl justify-between px-2">
390+
<div class="">
391+
<.link href={~p"/"} aria-label={gettext("Homepage")}>
392+
<span class="btn btn-ghost flex items-center space-x-1 normal-case">
393+
<.logo_icon class="inline-block h-6 w-auto fill-current" />
394+
<p class="hidden text-xl sm:block">Share a Secret</p>
424395
</span>
425396
</.link>
397+
</div>
398+
399+
<div class="flex-none">
400+
<div class="menu menu-horizontal items-center">
401+
<div class="dropdown dropdown-end">
402+
<label tabindex="0" class="btn btn-ghost text-sm normal-case">
403+
<%= gettext("Theme") %> <.icon name="hero-chevron-down" class="h-4 w-4" />
404+
</label>
405+
<div
406+
tabindex="0"
407+
class="dropdown-content z-[1] menu bg-base-200 rounded-box w-32 p-2 shadow"
408+
>
409+
<button class="btn btn-sm mb-1 text-sm normal-case" data-set-theme="light">
410+
<.icon name="hero-sun" class="mr-1 inline-block h-4 w-4" /> <%= gettext("Light") %>
411+
</button>
412+
413+
<button class="btn btn-sm text-sm normal-case" data-set-theme="dark">
414+
<.icon name="hero-moon" class="mr-1 inline-block h-4 w-4" /> <%= gettext("Dark") %>
415+
</button>
416+
</div>
417+
</div>
426418
427-
<button
428-
class="btn btn-ghost"
429-
aria-label={gettext("More information")}
430-
onclick="information_modal.showModal()"
431-
>
432-
<.icon name="hero-information-circle" class="h-6 w-6" />
433-
</button>
419+
<.link
420+
href="https://github.com/Flo0807/share-a-secret"
421+
target="_blank"
422+
aria-label={gettext("GitHub")}
423+
>
424+
<span class="btn btn-ghost">
425+
<.github_icon class="inline-block h-6 w-6 fill-current" />
426+
</span>
427+
</.link>
428+
429+
<button
430+
class="btn btn-ghost"
431+
aria-label={gettext("More information")}
432+
onclick="information_modal.showModal()"
433+
>
434+
<.icon name="hero-information-circle" class="h-6 w-6" />
435+
</button>
436+
</div>
434437
</div>
435438
</div>
436439
</nav>

‎lib/share_secret_web/components/layouts/app.html.heex

+14-16
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,16 @@
11
<.information_modal />
2-
<div class="flex h-full flex-col justify-between overflow-auto">
3-
<div>
4-
<header class="bg-base-100 text-base-content">
5-
<.navbar />
6-
</header>
7-
<main class="px-6 py-8">
8-
<%= @inner_content %>
9-
</main>
2+
<header>
3+
<.navbar />
4+
</header>
5+
<main class="mx-auto max-w-7xl">
6+
<div class="px-6 py-8">
7+
<%= @inner_content %>
108
</div>
11-
<footer class="self-center pb-4 text-sm">
12-
<%= gettext("powered by") %> <.github_icon class="inline w-4 fill-current" />
13-
<.link href="https://github.com/Flo0807/share-a-secret" target="_blank" class="link">
14-
share-a-secret
15-
</.link>
16-
v<%= Application.spec(:share_secret)[:vsn] %>
17-
</footer>
18-
</div>
9+
</main>
10+
<footer class="mx-auto max-w-7xl pb-4 text-center">
11+
<%= gettext("powered by") %> <.github_icon class="inline w-4 fill-current" />
12+
<.link href="https://github.com/Flo0807/share-a-secret" target="_blank" class="link">
13+
share-a-secret
14+
</.link>
15+
v<%= Application.spec(:share_secret)[:vsn] %>
16+
</footer>

‎lib/share_secret_web/components/layouts/root.html.heex

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
1212
</script>
1313
</head>
14-
<body>
14+
<body class="antialiased">
1515
<%= @inner_content %>
1616
<.analytics current_url={@current_url} />
1717
</body>

‎lib/share_secret_web/live/home_live/show.html.heex

+2-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@
1919
:if={@secret}
2020
id="secret-text"
2121
phx-hook="DynamicTextArea"
22-
class="textarea textarea-bordered h-0 w-full"
22+
class="textarea textarea-bordered h-[100px] w-full"
23+
data-default-height={100}
2324
readonly
2425
><%= @secret %></textarea>
2526
<.copy_to_clipboard

0 commit comments

Comments
 (0)