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

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>
<form
@@ -9,20 +31,20 @@
class="flex flex-col space-y-4"
>
<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
</label>
<.live_file_input
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>
<button
:if={@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"
>
Upload
@@ -30,7 +52,7 @@
<button
: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"
>
Upload

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

@@ -25,8 +25,8 @@ defmodule MihainatorWeb.ResultComponent do
state =
cond do
length_in < length_out -> "bg-green-300"
length_in > length_out -> "bg-red-300"
length_in < length_out -> "bg-green-300 dark:text-slate-600"
length_in > length_out -> "bg-red-300 dark:text-slate-600"
true -> ""
end
@@ -47,10 +47,10 @@ defmodule MihainatorWeb.ResultComponent do
assigns = assign(assigns, formatted_month: formatted_month, year: day.year)
~H"""
<div class="month">
<div class="text-center border-b pb-2 text-slate-700 dark:text-slate-300">
<div>
<%= @formatted_month %>
<span class="year"><%= @year %></span>
<span class="font-extrabold"><%= @year %></span>
</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">
<p class="text-lg">We've taken a close look at your communication and found out who's more talkative of you both</p>
<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 recognized the following pattern
</p>
<div class="grid grid-cols-6 gap-2">
<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-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">
<%= 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>
<div class="days">
<span>Mon</span>
<span>Tue</span>
<span>Wed</span>
<span>Thu</span>
<span>Fri</span>
<span>Sat</span>
<span>Sun</span>
<div class="days grid-cols-7 my-2 grid">
<span class="text-center">Mon</span>
<span class="text-center">Tue</span>
<span class="text-center">Wed</span>
<span class="text-center">Thu</span>
<span class="text-center">Fri</span>
<span class="text-center">Sat</span>
<span class="text-center">Sun</span>
</div>
<div class="dates">
<div class="dates grid grid-cols-7">
<%= for day <- get_days_of_month(assigns, first_of_month) do %>
<.time_button day={day}></.time_button>
<% end %>