From 101162c72e215525c5145ba4e51fd43453343c5b Mon Sep 17 00:00:00 2001 From: Pascal Schmid Date: Sat, 12 Oct 2024 21:34:53 +0200 Subject: [PATCH] Prototype CSS only calendar result --- assets/css/app.css | 105 ++ lib/mihainator_web/live/result_live.ex | 8 + lib/mihainator_web/live/result_live.html.heex | 1350 +++++++++++++++++ lib/mihainator_web/live/upload_live.ex | 6 +- lib/mihainator_web/router.ex | 1 + 5 files changed, 1468 insertions(+), 2 deletions(-) create mode 100644 lib/mihainator_web/live/result_live.ex create mode 100644 lib/mihainator_web/live/result_live.html.heex diff --git a/assets/css/app.css b/assets/css/app.css index 378c8f9..9e074be 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -3,3 +3,108 @@ @import "tailwindcss/utilities"; /* This file is for your main application CSS */ +.calendar-wrapper { + display: flex; + position: absolute; + width: 80vw; + flex-wrap: wrap; + left: 10%; + top: 200px; +} + +.calendar { + 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: space-between; + align-items: center; + font-size: 20px; + margin-bottom: 20px; + font-weight: 300; + + .year { + font-weight: 600; + margin-left: 10px; + } + + .nav { + display: flex; + justify-content: center; + align-items: center; + text-decoration: none; + color: #0a3d62; + width: 40px; + height: 40px; + border-radius: 40px; + transition-duration: .2s; + position: relative; + + &:hover { + background: #eee; + } + } + } + + .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; + justify-self: center; + align-self: center; + text-align: center; + } + } + + .dates { + display: grid; + grid-template-columns: repeat(7, 1fr); + + button { + cursor: pointer; + outline: 0; + border: 0; + background: transparent; + font-size: 16px; + justify-self: center; + align-self: center; + width: 50px; + height: 50px; + border-radius: 50px; + margin: 2px; + transition-duration: .2s; + + &.today { + box-shadow: inset 0px 0px 0px 2px #0a3d62; + } + + &:first-child { + grid-column: 3; + } + + &:hover { + background: #eee; + } + + &:focus { + background: #0a3d62; + color: #fff; + font-weight: 600; + } + } + } +} \ No newline at end of file diff --git a/lib/mihainator_web/live/result_live.ex b/lib/mihainator_web/live/result_live.ex new file mode 100644 index 0000000..d3d805a --- /dev/null +++ b/lib/mihainator_web/live/result_live.ex @@ -0,0 +1,8 @@ +defmodule MihainatorWeb.ResultLive do + use MihainatorWeb, :live_view + + @impl Phoenix.LiveView + def mount(_params, _session, socket) do + {:ok, socket} + end +end diff --git a/lib/mihainator_web/live/result_live.html.heex b/lib/mihainator_web/live/result_live.html.heex new file mode 100644 index 0000000..48c7be1 --- /dev/null +++ b/lib/mihainator_web/live/result_live.html.heex @@ -0,0 +1,1350 @@ +
+

Threema history checker

+ +

This is the result of your history:

+ +
+
+
+ +
January 2023
+ +
+
+ Mon + Tue + Wed + Thu + Fri + Sat + Sun +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+
+ +
February 2023
+ +
+
+ Mon + Tue + Wed + Thu + Fri + Sat + Sun +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+
+ +
March 🌱2023
+ +
+
+ Mon + Tue + Wed + Thu + Fri + Sat + Sun +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+
+ +
April 2023
+ +
+
+ Mon + Tue + Wed + Thu + Fri + Sat + Sun +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+
+ +
May 2023
+ +
+
+ Mon + Tue + Wed + Thu + Fri + Sat + Sun +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+
+ +
June 🌞2023
+ +
+
+ Mon + Tue + Wed + Thu + Fri + Sat + Sun +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+ +
July 2023
+ +
+
+ Mon + Tue + Wed + Thu + Fri + Sat + Sun +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+
+ +
August 2023
+ +
+
+ Mon + Tue + Wed + Thu + Fri + Sat + Sun +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+
+ +
September 🍁2023
+ +
+
+ Mon + Tue + Wed + Thu + Fri + Sat + Sun +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+
+ +
October 🎃2023
+ +
+
+ Mon + Tue + Wed + Thu + Fri + Sat + Sun +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+
+ +
November 2023
+ +
+
+ Mon + Tue + Wed + Thu + Fri + Sat + Sun +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+
+ +
December ❄️2023
+ +
+
+ Mon + Tue + Wed + Thu + Fri + Sat + Sun +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
diff --git a/lib/mihainator_web/live/upload_live.ex b/lib/mihainator_web/live/upload_live.ex index 035d0a7..9906c84 100644 --- a/lib/mihainator_web/live/upload_live.ex +++ b/lib/mihainator_web/live/upload_live.ex @@ -29,10 +29,12 @@ defmodule MihainatorWeb.UploadLive do @impl Phoenix.LiveView @spec handle_info({reference(), any()}, any()) :: {:noreply, any()} - def handle_info({ref, _result}, socket) do + def handle_info({ref, result}, socket) do Process.demonitor(ref, [:flush]) - {:noreply, socket} + socket = assign(socket, :calendar_dates, result) + + {:noreply, push_navigate(socket, to: ~p"/result")} end defp error_to_string(:too_large), do: "Too large" diff --git a/lib/mihainator_web/router.ex b/lib/mihainator_web/router.ex index 4e4b5ef..18ab83a 100644 --- a/lib/mihainator_web/router.ex +++ b/lib/mihainator_web/router.ex @@ -19,6 +19,7 @@ defmodule MihainatorWeb.Router do get "/", PageController, :home live "/upload", UploadLive + live "/result", ResultLive end # Other scopes may use custom stacks.