lechindianer/mihainator
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Style components

Browse Source
This commit is contained in:
Pascal Schmid
2024-11-02 00:33:58 +01:00
parent fe6a884c69
commit f38813419b
7 changed files with 90 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
assets/css/app.css
View File

@@ -13,51 +13,11 @@
} }
/* Taken from https://codepen.io/alvarotrigo/pen/xxYVrmK */ /* Taken from https://codepen.io/alvarotrigo/pen/xxYVrmK */
.calendar { .days>span {
display: inline-grid;
justify-content: center;
align-items: center;
background: #fff;
padding: 20px;
margin: 40px;
border-radius: 5px;
box-shadow: 0px 40px 30px -20px rgba(0, 0, 0, 0.3);
.month {
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
margin-bottom: 20px;
font-weight: 300;
.year {
font-weight: 600;
margin-left: 10px;
}
}
.days {
display: grid;
justify-content: center;
align-items: center;
grid-template-columns: repeat(7, 1fr);
color: #999;
font-weight: 600;
margin-bottom: 15px;
span {
width: 50px; width: 50px;
justify-self: center; }
align-self: center;
text-align: center;
}
}
.dates {
display: grid;
grid-template-columns: repeat(7, 1fr);
.dates {
button { button {
cursor: pointer; cursor: pointer;
outline: 0; outline: 0;
@@ -82,12 +42,5 @@
&:hover { &:hover {
background: #eee; background: #eee;
} }
&:focus {
background: #0a3d62;
color: #fff;
font-weight: 600;
}
}
} }
} }

19
lib/mihainator_web/components/layouts/app.html.heex
View File

@@ -1,8 +1,23 @@
<header class="px-2 sm:px-2 lg:px-2"> <header class="px-2 sm:px-2 lg:px-2">
<div class="flex items-center justify-end py-3 text-sm"> <div class="flex items-center justify-between py-3 text-sm">
<div class="flex items-center gap-4">
<a href="/">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-8 text-slate-700 dark:text-slate-300"
>
<path d="M11.47 3.841a.75.75 0 0 1 1.06 0l8.69 8.69a.75.75 0 1 0 1.06-1.061l-8.689-8.69a2.25 2.25 0 0 0-3.182 0l-8.69 8.69a.75.75 0 1 0 1.061 1.06l8.69-8.689Z" />
<path d="m12 5.432 8.159 8.159c.03.03.06.058.091.086v6.198c0 1.035-.84 1.875-1.875 1.875H15a.75.75 0 0 1-.75-.75v-4.5a.75.75 0 0 0-.75-.75h-3a.75.75 0 0 0-.75.75V21a.75.75 0 0 1-.75.75H5.625a1.875 1.875 0 0 1-1.875-1.875v-6.198a2.29 2.29 0 0 0 .091-.086L12 5.432Z" />
</svg>
</a>
</div>
<a <a
href="https://github.com/Lechindianer/threema-history-checker" href="https://github.com/Lechindianer/threema-history-checker"
class="hover:text-zinc-700 bg-slate-200 flex rounded p-2 items-center gap-x-3 shadow-md" class="hover:text-zinc-700 bg-slate-200 dark:bg-slate-500 dark:ring-2 dark:ring-slate-400 dark:hover:text-zinc-700 dark:text-slate-50 flex rounded p-2 opacity-80 items-center gap-x-3 shadow-md"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"

4
lib/mihainator_web/components/layouts/root.html.heex
View File

@@ -5,13 +5,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="csrf-token" content={get_csrf_token()} /> <meta name="csrf-token" content={get_csrf_token()} />
<.live_title suffix=" · Phoenix Framework"> <.live_title suffix=" · Phoenix Framework">
<%= assigns[:page_title] || "Mihainator" %> <%= assigns[:page_title] || "Threema history checker" %>
</.live_title> </.live_title>
<link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} /> <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
<script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}> <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
</script> </script>
</head> </head>
<body class="bg-white"> <body class="bg-white dark:bg-slate-800">
<%= @inner_content %> <%= @inner_content %>
</body> </body>
</html> </html>

32
lib/mihainator_web/live/components/file_input_component.html.heex
View File

@@ -1,4 +1,26 @@
<div> <div class="flex flex-col space-y-8 pt-4 text-slate-700 dark:text-slate-300">
<p class="text-lg">
Threema history checker allows you to find out who is more communicative from the existing
communication between you and your conversation partner.
</p>
<section class="p-4 bg-slate-200 dark:bg-slate-700 rounded-md dark:ring-2 dark:ring-blue-500">
<p class="font-bold mb-3">How to create backup files</p>
<ul class="list-disc p-4">
<li>Press ... in the right upper corner</li>
<li>Enter "backups"</li>
<li>Change to tab "data backup"</li>
<li>Follow the steps over there</li>
</ul>
<ul class="list-disc p-4">
<li>Use a file explorer app to unzip the backup</li>
<li>Inside the contents of the backup file you'll see several CSV files</li>
<li>Select one and upload here</li>
</ul>
</section>
<p class="text-lg">Upload a Threema chat history file (.csv) and see who's more interactive!</p> <p class="text-lg">Upload a Threema chat history file (.csv) and see who's more interactive!</p>
<form <form
@@ -9,20 +31,20 @@
class="flex flex-col space-y-4" class="flex flex-col space-y-4"
> >
<div> <div>
<label class="block mb-2 text-sm font-bold text-gray-900" for={@uploads.history.ref}> <label class="block mb-2 text-sm font-bold text-slate-900" for={@uploads.history.ref}>
CSV file CSV file
</label> </label>
<.live_file_input <.live_file_input
upload={@uploads.history} upload={@uploads.history}
class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" class="block w-full text-sm text-slate-900 border border-slate-300 rounded-lg cursor-pointer bg-slate-50 focus:outline-none dark:bg-slate-700 dark:border-slate-600 dark:placeholder-slate-400"
/> />
</div> </div>
<button <button
:if={@submit_disabled?} :if={@submit_disabled?}
disabled={@submit_disabled?} disabled={@submit_disabled?}
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-1/2 place-self-end disabled:opacity-75" class="bg-blue-500 hover:bg-blue-700 text-white dark:text-slate-50 font-bold py-2 px-4 rounded w-1/2 place-self-end disabled:opacity-75"
type="submit" type="submit"
> >
Upload Upload
@@ -30,7 +52,7 @@
<button <button
:if={not @submit_disabled?} :if={not @submit_disabled?}
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-1/2 place-self-end" class="bg-blue-500 hover:bg-blue-700 text-white dark:text-slate-50 font-bold py-2 px-4 rounded w-1/2 place-self-end"
type="submit" type="submit"
> >
Upload Upload

8
lib/mihainator_web/live/components/result_component.ex
View File

@@ -25,8 +25,8 @@ defmodule MihainatorWeb.ResultComponent do
state = state =
cond do cond do
length_in < length_out -> "bg-green-300" length_in < length_out -> "bg-green-300 dark:text-slate-600"
length_in > length_out -> "bg-red-300" length_in > length_out -> "bg-red-300 dark:text-slate-600"
true -> "" true -> ""
end end
@@ -47,10 +47,10 @@ defmodule MihainatorWeb.ResultComponent do
assigns = assign(assigns, formatted_month: formatted_month, year: day.year) assigns = assign(assigns, formatted_month: formatted_month, year: day.year)
~H""" ~H"""
<div class="month"> <div class="text-center border-b pb-2 text-slate-700 dark:text-slate-300">
<div> <div>
<%= @formatted_month %> <%= @formatted_month %>
<span class="year"><%= @year %></span> <span class="font-extrabold"><%= @year %></span>
</div> </div>
</div> </div>
""" """

31
lib/mihainator_web/live/components/result_component.html.heex
View File

@@ -1,5 +1,7 @@
<div class="flex flex-col space-y-8"> <div class="flex flex-col space-y-8 pt-4 text-slate-700 dark:text-slate-300">
<p class="text-lg">We've taken a close look at your communication and found out who's more talkative of you both</p> <p class="text-lg">
We've taken a close look at your communication and recognized the following pattern
</p>
<div class="grid grid-cols-6 gap-2"> <div class="grid grid-cols-6 gap-2">
<div class="col-span-1 bg-green-300 rounded"></div> <div class="col-span-1 bg-green-300 rounded"></div>
@@ -7,25 +9,26 @@
<div class="col-span-1 bg-red-300 rounded"></div> <div class="col-span-1 bg-red-300 rounded"></div>
<div class="col-span-5">Your communication partner</div> <div class="col-span-5">Your communication partner</div>
</div>
<p class="text-lg">This is the result:</p> <div class="col-span-1 rounded border"></div>
<div class="col-span-5">No communication on this day</div>
</div>
<div class="calendar-wrapper"> <div class="calendar-wrapper">
<%= for first_of_month <- @months do %> <%= for first_of_month <- @months do %>
<div class="calendar"> <div class="p-5 m-10 inline-grid items-center justify-center shadow-xl border-blue-50 dark:border-blue-200 border rounded-xl dark:bg-slate-600 dark:shadow-slate-500">
<.month day={first_of_month}></.month> <.month day={first_of_month}></.month>
<div class="days"> <div class="days grid-cols-7 my-2 grid">
<span>Mon</span> <span class="text-center">Mon</span>
<span>Tue</span> <span class="text-center">Tue</span>
<span>Wed</span> <span class="text-center">Wed</span>
<span>Thu</span> <span class="text-center">Thu</span>
<span>Fri</span> <span class="text-center">Fri</span>
<span>Sat</span> <span class="text-center">Sat</span>
<span>Sun</span> <span class="text-center">Sun</span>
</div> </div>
<div class="dates"> <div class="dates grid grid-cols-7">
<%= for day <- get_days_of_month(assigns, first_of_month) do %> <%= for day <- get_days_of_month(assigns, first_of_month) do %>
<.time_button day={day}></.time_button> <.time_button day={day}></.time_button>
<% end %> <% end %>

2
lib/mihainator_web/live/upload_live.html.heex
View File

@@ -1,5 +1,5 @@
<div class="flex flex-col space-y-8"> <div class="flex flex-col space-y-8">
<h1 class="text-5xl">Threema history checker</h1> <h1 class="text-5xl text-slate-700 dark:text-slate-300">Threema history checker</h1>
<%!-- <.live_component module={MihainatorWeb.UserComponent} id="user" /> --%> <%!-- <.live_component module={MihainatorWeb.UserComponent} id="user" /> --%>
<%= if @has_result == false do %> <%= if @has_result == false do %>