Mirrors/Claper
1
0
Fork 0
mirror of https://github.com/ClaperCo/Claper.git synced 2025-12-16 11:57:58 +01:00
Code Issues Packages Projects Releases Wiki Activity

deps: upgrade to tailwind 4+

Browse Source 
commit e5905358dc20cea2fcc41b3580c4985e8ac53217
Author: Alex Lion <dev@alexandrelion.com>
Date:   Mon Jul 7 22:56:14 2025 +0200

    chore: update changelog

commit 2696a29ffdc6deb930b8ffb6f92cae21b176e853
Author: Alex Lion <dev@alexandrelion.com>
Date:   Mon Jul 7 22:52:11 2025 +0200

    Change js file to css and migrate css classes

commit 19093360ed2404f956d799c0a9ec1656c9fa1a74
Author: Alex Lion <dev@alexandrelion.com>
Date:   Sat Jul 5 19:28:34 2025 +0200

    chore: upgrade to tailwind 4+

commit 75312e8b3d3c9fd25137189e7020994640a0f901
Author: Alex Lion <dev@alexandrelion.com>
Date:   Thu Jul 3 16:59:58 2025 +0200

    chore: remove useless files
This commit is contained in:
Alex Lion
2025-07-07 23:00:30 +02:00
parent 3a54ecfe74
commit 9c1c3d01c1
43 changed files with 1376 additions and 1628 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@@ -4,6 +4,7 @@
- Upgrade JS dependencies - Upgrade JS dependencies
- Upgrade Elixir dependencies, including Phoenix Live View to 1.0.17 - Upgrade Elixir dependencies, including Phoenix Live View to 1.0.17
- Upgrade to Tailwind 4+
- Refactor view templates to use {} instead of <%= %> - Refactor view templates to use {} instead of <%= %>
### v.2.3.2 ### v.2.3.2

1
CNAME
View File

@@ -1 +0,0 @@
docs.claper.co

74
assets/css/app.css
View File

@@ -1,12 +1,21 @@
@import url('air-datepicker/air-datepicker.css'); @import 'air-datepicker/air-datepicker.css';
@import url("animate.css/animate.min.css"); @import 'animate.css/animate.min.css';
@tailwind base; @import 'tailwindcss';
@tailwind components; @import './theme.css';
@tailwind utilities;
@layer base {
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentcolor);
}
}
* { * {
font-family: 'Roboto', sans-serif; font-family: var(--font-family-sans);
} }
[x-cloak] { display: none !important; } [x-cloak] { display: none !important; }
@@ -19,19 +28,19 @@
border-radius: 4px; border-radius: 4px;
} }
.alert-info { .alert-info {
color: #31708f; color: var(--color-primary-700);
background-color: #d9edf7; background-color: var(--color-primary-100);
border-color: #bce8f1; border-color: var(--color-primary-200);
} }
.alert-warning { .alert-warning {
color: #8a6d3b; color: var(--color-supporting-yellow-700);
background-color: #fcf8e3; background-color: var(--color-supporting-yellow-50);
border-color: #faebcc; border-color: var(--color-supporting-yellow-100);
} }
.alert-danger { .alert-danger {
color: #a94442; color: var(--color-supporting-red-700);
background-color: #f2dede; background-color: var(--color-supporting-red-100);
border-color: #ebccd1; border-color: var(--color-supporting-red-200);
} }
.alert p { .alert p {
margin-bottom: 0; margin-bottom: 0;
@@ -40,7 +49,7 @@
display: none; display: none;
} }
.invalid-feedback { .invalid-feedback {
color: #a94442; color: var(--color-supporting-red-700);
display: block; display: block;
margin-top: 2px; margin-top: 2px;
} }
@@ -80,12 +89,13 @@
background-color: #fefefe; background-color: #fefefe;
margin: 15vh auto; margin: 15vh auto;
padding: 20px; padding: 20px;
border: 1px solid #888; border: 1px solid var(--color-neutral-300);
width: 80%; width: 80%;
box-shadow: var(--shadow-lg);
} }
.phx-modal-close { .phx-modal-close {
color: #aaa; color: var(--color-neutral-400);
float: right; float: right;
font-size: 28px; font-size: 28px;
font-weight: bold; font-weight: bold;
@@ -93,7 +103,7 @@
.phx-modal-close:hover, .phx-modal-close:hover,
.phx-modal-close:focus { .phx-modal-close:focus {
color: black; color: var(--color-neutral-900);
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
} }
@@ -104,13 +114,21 @@
.input:focus~.label, .input:focus~.label,
.input:active~.label, .input:active~.label,
.input.filled~.label { .input.filled~.label {
@apply text-sm transition-all duration-100 -top-1.5 text-primary-500; font-size: 0.875rem;
transition-property: all;
transition-duration: 100ms;
top: -0.375rem;
color: var(--color-primary-500);
} }
.input:focus~.icon, .input:focus~.icon,
.input:active~.icon, .input:active~.icon,
.input.filled~.icon { .input.filled~.icon {
@apply transition-all duration-100 left-3 top-6 h-5; transition-property: all;
transition-duration: 100ms;
left: 0.75rem;
top: 1.5rem;
height: 1.25rem;
} }
.date-placeholder-hidden::-webkit-datetime-edit { .date-placeholder-hidden::-webkit-datetime-edit {
@@ -285,7 +303,7 @@
} }
.bg-gradient-animate { .bg-gradient-animate {
background: linear-gradient(-45deg, #b80fef, #8611ed, #14bfdb, #14bfdb); background: linear-gradient(-45deg, var(--color-secondary-500), var(--color-secondary-600), var(--color-primary-400), var(--color-primary-400));
background-size: 400% 400%; background-size: 400% 400%;
animation: gradient 15s ease infinite; animation: gradient 15s ease infinite;
} }
@@ -305,7 +323,7 @@
.arrow_box { .arrow_box {
position: relative; position: relative;
background: #fff; background: #fff;
border: 2px solid #e1e1e1; border: 2px solid var(--color-neutral-100);
} }
.arrow_box.arrow_right:after, .arrow_box.arrow_right:before { .arrow_box.arrow_right:after, .arrow_box.arrow_right:before {
left: 100%; left: 100%;
@@ -419,8 +437,7 @@
left: 0; left: 0;
top: 50%; top: 50%;
right: 0; right: 0;
border-top: 3px solid; border-top: var(--color-supporting-red-600) 3px solid;
@apply border-supporting-red-600;
-webkit-transform:rotate(-20deg); -webkit-transform:rotate(-20deg);
-moz-transform:rotate(-20deg); -moz-transform:rotate(-20deg);
@@ -431,15 +448,16 @@
/* Air datepicker */ /* Air datepicker */
.air-datepicker-body--day-name { .air-datepicker-body--day-name {
@apply text-primary-600; color: var(--color-primary-600);
} }
.air-datepicker-cell.-selected-, .air-datepicker-cell.-selected-.-current- { .air-datepicker-cell.-selected-, .air-datepicker-cell.-selected-.-current- {
@apply bg-primary-500 text-white hover:bg-primary-600; background-color: var(--color-primary-500);
color: var(--color-white);
} }
.air-datepicker-cell.-current- { .air-datepicker-cell.-current- {
@apply text-secondary-500; color: var(--color-secondary-500);
} }
.animate__slow_slow { .animate__slow_slow {

86
assets/css/theme.css Normal file
View File

@@ -0,0 +1,86 @@
/* Theme variables based on tailwind.config.js */
@theme {
/* Primary Colors (water-blue) */
--color-primary-50: #E3F2FD;
--color-primary-100: #C2E3FA;
--color-primary-200: #84C8F6;
--color-primary-300: #3DA7F0;
--color-primary-400: #1395EC;
--color-primary-500: #1186D5;
--color-primary-600: #0D65A1;
--color-primary-700: #0A5689;
--color-primary-800: #0A4B76;
--color-primary-900: #073250;
/* Secondary Colors (electric-purple) */
--color-secondary-50: #F2E0FF;
--color-secondary-100: #E3BDFF;
--color-secondary-200: #C77AFF;
--color-secondary-300: #A62EFF;
--color-secondary-400: #9200FF;
--color-secondary-500: #A327FF;
--color-secondary-600: #6400AD;
--color-secondary-700: #550094;
--color-secondary-800: #490080;
--color-secondary-900: #320057;
/* Neutral Colors (wedgewood) */
--color-neutral-50: #F0F4F8;
--color-neutral-100: #D9E3ED;
--color-neutral-200: #B9CCDF;
--color-neutral-300: #97B3CE;
--color-neutral-400: #7499BE;
--color-neutral-500: #507DAA;
--color-neutral-600: #3F6388;
--color-neutral-700: #314D68;
--color-neutral-800: #253B50;
--color-neutral-900: #1A2938;
/* Supporting Red Colors (rose-madder) */
--color-supporting-red-50: #FCEDEE;
--color-supporting-red-100: #F9D5D7;
--color-supporting-red-200: #F3ABB0;
--color-supporting-red-300: #ED8188;
--color-supporting-red-400: #E75761;
--color-supporting-red-500: #E12D39;
--color-supporting-red-600: #B4242E;
--color-supporting-red-700: #871B22;
--color-supporting-red-800: #5A1217;
--color-supporting-red-900: #2D090B;
/* Supporting Yellow Colors (school-bus-yellow) */
--color-supporting-yellow-50: #FFFBEB;
--color-supporting-yellow-100: #FEF3C7;
--color-supporting-yellow-200: #FDE68A;
--color-supporting-yellow-300: #FCD34D;
--color-supporting-yellow-400: #FBBF24;
--color-supporting-yellow-500: #F59E0B;
--color-supporting-yellow-600: #D97706;
--color-supporting-yellow-700: #B45309;
--color-supporting-yellow-800: #92400E;
--color-supporting-yellow-900: #78350F;
/* Supporting Green Colors (green-teal) */
--color-supporting-green-50: #ECFDF5;
--color-supporting-green-100: #D1FAE5;
--color-supporting-green-200: #A7F3D0;
--color-supporting-green-300: #6EE7B7;
--color-supporting-green-400: #34D399;
--color-supporting-green-500: #10B981;
--color-supporting-green-600: #059669;
--color-supporting-green-700: #047857;
--color-supporting-green-800: #065F46;
--color-supporting-green-900: #064E3B;
/* Font Family */
--font-family-sans: 'Roboto', sans-serif;
--font-family-serif: 'Merriweather', serif;
/* Box Shadows */
--shadow-base: 0px 1px 3px 0px rgba(0,0,0,0.1), 0px 1px 2px 0px rgba(0,0,0,0.06);
--shadow-md: 0px 4px 6px 0px rgba(0,0,0,0.1), 0px 2px 4px 0px rgba(0,0,0,0.06);
--shadow-lg: 0px 4px 6px 0px rgba(0,0,0,0.05), 0px 10px 15px 0px rgba(0,0,0,0.1);
--shadow-xl: 0px 10px 10px 0px rgba(0,0,0,0.04), 0px 20px 25px 0px rgba(0,0,0,0.1);
--shadow-2xl: 0px 25px 50px 0px rgba(0,0,0,0.25);
--shadow-inner: inset 0px 2px 4px 0px rgba(0,0,0,0.06);
}

2341
assets/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
assets/package.json
View File

@@ -3,12 +3,11 @@
"deploy": "NODE_ENV=production tailwindcss --postcss --minify --input=css/app.css --output=../priv/static/assets/app.css" "deploy": "NODE_ENV=production tailwindcss --postcss --minify --input=css/app.css --output=../priv/static/assets/app.css"
}, },
"devDependencies": { "devDependencies": {
"@tailwindcss/postcss": "^4.1.11",
"alpinejs": "^3.13.8", "alpinejs": "^3.13.8",
"autoprefixer": "^10.4.19",
"esbuild": "^0.25.5", "esbuild": "^0.25.5",
"postcss": "^8.4.38", "postcss": "^8.4.38",
"postcss-import": "^15.1.0", "tailwindcss": "^4.1.11"
"tailwindcss": "^3.3.3"
}, },
"dependencies": { "dependencies": {
"@sjmc11/tourguidejs": "^0.0.16", "@sjmc11/tourguidejs": "^0.0.16",

4
assets/postcss.config.js
View File

@@ -1,7 +1,5 @@
module.exports = { module.exports = {
plugins: { plugins: {
"postcss-import": {}, '@tailwindcss/postcss': {},
tailwindcss: {},
autoprefixer: {},
} }
} }

134
assets/tailwind.config.js
View File

@@ -1,134 +0,0 @@
const { colors: defaultColors } = require("tailwindcss/defaultTheme");
const colors = {
...defaultColors,
...{
"water-blue": {
50: "#E3F2FD",
100: "#C2E3FA",
200: "#84C8F6",
300: "#3DA7F0",
400: "#1395EC",
500: "#1186D5",
600: "#0D65A1",
700: "#0A5689",
800: "#0A4B76",
900: "#073250",
},
"electric-purple": {
50: "#F2E0FF",
100: "#E3BDFF",
200: "#C77AFF",
300: "#A62EFF",
400: "#9200FF",
500: "#A327FF",
600: "#6400AD",
700: "#550094",
800: "#490080",
900: "#320057",
},
wedgewood: {
50: "#F0F4F8",
100: "#D9E3ED",
200: "#B9CCDF",
300: "#97B3CE",
400: "#7499BE",
500: "#507DAA",
600: "#3F6388",
700: "#314D68",
800: "#253B50",
900: "#1A2938",
},
"rose-madder": {
50: "#FCEDEE",
100: "#F9D5D7",
200: "#F3ABB0",
300: "#ED8188",
400: "#E75761",
500: "#E12D39",
600: "#B4242E",
700: "#871B22",
800: "#5A1217",
900: "#2D090B",
},
"school-bus-yellow": {
50: "#FFFBEB",
100: "#FEF3C7",
200: "#FDE68A",
300: "#FCD34D",
400: "#FBBF24",
500: "#F59E0B",
600: "#D97706",
700: "#B45309",
800: "#92400E",
900: "#78350F",
},
"green-teal": {
50: "#ECFDF5",
100: "#D1FAE5",
200: "#A7F3D0",
300: "#6EE7B7",
400: "#34D399",
500: "#10B981",
600: "#059669",
700: "#047857",
800: "#065F46",
900: "#064E3B",
},
},
};
module.exports = {
mode: "jit",
content: ["./js/**/*.js", "../lib/*_web/**/*.*ex"],
safelist: [
"-top-1.5",
"top-1",
"left-3",
"top-6",
"h-5",
"left-2.5",
"top-3",
"h-7",
"bg-secondary-600",
"text-white",
"bg-white",
"text-gray-600",
],
darkMode: "media",
theme: {
extend: {
backgroundSize: {
"size-200": "200% 200%",
},
backgroundPosition: {
"pos-0": "0% 0%",
"pos-100": "100% 100%",
},
colors: {
primary: colors["water-blue"],
secondary: colors["electric-purple"],
neutral: colors["wedgewood"],
"supporting-red": colors["rose-madder"],
"supporting-yellow": colors["school-bus-yellow"],
"supporting-green": colors["green-teal"],
},
},
fontFamily: {
sans: ["Roboto", "sans-serif"],
serif: ["Merriweather", "serif"],
},
boxShadow: {
base: "0px 1px 3px 0px rgba(0,0,0,0.1), 0px 1px 2px 0px rgba(0,0,0,0.06)",
lg: "0px 4px 6px 0px rgba(0,0,0,0.05), 0px 10px 15px 0px rgba(0,0,0,0.1)",
md: "0px 4px 6px 0px rgba(0,0,0,0.1), 0px 2px 4px 0px rgba(0,0,0,0.06)",
xl: "0px 10px 10px 0px rgba(0,0,0,0.04), 0px 20px 25px 0px rgba(0,0,0,0.1)",
"2xl": "0px 25px 50px 0px rgba(0,0,0,0.25)",
inner: "inset 0px 2px 4px 0px rgba(0,0,0,0.06)",
},
},
variants: {
extend: {},
},
plugins: [require("@tailwindcss/container-queries")],
};

10
config/config.exs
View File

@@ -36,6 +36,16 @@ config :dart_sass,
cd: Path.expand("../assets", __DIR__) cd: Path.expand("../assets", __DIR__)
] ]
config :tailwind,
version: "4.1.10",
default: [
args: ~w(
--input=assets/css/app.css
--output=priv/static/assets/app.css
),
cd: Path.expand("..", __DIR__)
]
# Configure esbuild (the version is required) # Configure esbuild (the version is required)
config :esbuild, config :esbuild,
version: "0.25.5", version: "0.25.5",

11
config/dev.exs
View File

@@ -13,19 +13,12 @@ config :claper, ClaperWeb.Endpoint,
watchers: [ watchers: [
# Start the esbuild watcher by calling Esbuild.install_and_run(:default, args) # Start the esbuild watcher by calling Esbuild.install_and_run(:default, args)
esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]}, esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]},
sass: { sass: {
DartSass, DartSass,
:install_and_run, :install_and_run,
[:default, ~w(--embed-source-map --source-map-urls=absolute --watch)] [:default, ~w(--embed-source-map --source-map-urls=absolute --watch)]
}, }
npx: [
"tailwindcss",
"--input=css/app.css",
"--output=../priv/static/assets/app.css",
"--postcss",
"--watch",
cd: Path.expand("../assets", __DIR__)
]
] ]
# Watch static and templates for browser reloading. # Watch static and templates for browser reloading.

2
elixir_buildpack.config
View File

@@ -1,2 +0,0 @@
elixir_version=1.13.2
erlang_version=24.0

10
lib/claper_web/live/embed_live/form_component.html.heex
View File

@@ -12,8 +12,6 @@
form={f} form={f}
key={:title} key={:title}
name={gettext("Title")} name={gettext("Title")}
labelClass={if @dark, do: "text-white"}
fieldClass={if @dark, do: "bg-gray-700 text-white"}
autofocus="true" autofocus="true"
required="true" required="true"
/> />
@@ -24,8 +22,6 @@
key={:provider} key={:provider}
name={gettext("Provider")} name={gettext("Provider")}
array={@providers} array={@providers}
labelClass={if @dark, do: "text-white"}
fieldClass={if @dark, do: "bg-gray-700 text-white h-full"}
required="true" required="true"
/> />
<div class="flex-1"> <div class="flex-1">
@@ -38,8 +34,6 @@
do: gettext("Iframe code"), do: gettext("Iframe code"),
else: gettext("Link to the content") else: gettext("Link to the content")
} }
labelClass={if @dark, do: "text-white"}
fieldClass={if @dark, do: "bg-gray-700 text-white"}
autofocus="true" autofocus="true"
required="true" required="true"
/> />
@@ -63,7 +57,7 @@
<button <button
type="submit" type="submit"
phx_disable_with="Loading..." phx_disable_with="Loading..."
class="w-full lg:w-auto px-6 text-white py-2 rounded-md tracking-wide font-bold focus:outline-none focus:shadow-outline bg-gradient-to-tl from-primary-500 to-secondary-500 bg-size-200 bg-pos-0 hover:bg-pos-100 transition-all duration-500" class="w-full lg:w-auto px-6 text-white py-2 rounded-md tracking-wide font-bold focus:outline-hidden focus:shadow-outline bg-linear-to-tl from-primary-500 to-secondary-500 bg-size-[200%] bg-position-[0%_0%] hover:bg-position-[100%_100%] transition-all duration-500"
> >
{case @live_action do {case @live_action do
:new -> gettext("Create") :new -> gettext("Create")
@@ -80,7 +74,7 @@
confirm: gettext("This will delete the web content, are you sure?") confirm: gettext("This will delete the web content, are you sure?")
], ],
class: class:
"w-full lg:w-auto px-6 text-center text-white py-2 rounded-md tracking-wide font-bold focus:outline-none focus:shadow-outline bg-gradient-to-tl from-supporting-red-600 to-supporting-red-400 bg-size-200 bg-pos-0 hover:bg-pos-100 transition-all duration-500" "w-full lg:w-auto px-6 text-center text-white py-2 rounded-md tracking-wide font-bold focus:outline-hidden focus:shadow-outline bg-linear-to-tl from-supporting-red-600 to-supporting-red-400 bg-size-[200%_200%] bg-position-[0%_0%] hover:bg-position-[100%_100%] transition-all duration-500"
)} )}
<% end %> <% end %>
</div> </div>

36
lib/claper_web/live/event_live/event_card_component.ex
View File

@@ -42,7 +42,7 @@ defmodule ClaperWeb.EventLive.EventCardComponent do
<span>LTI</span> <span>LTI</span>
</p> </p>
</div> </div>
<div class="ml-2 flex-shrink-0 flex"> <div class="ml-2 shrink-0 flex">
<%= if Event.started?(@event) && !Event.finished?(@event) do %> <%= if Event.started?(@event) && !Event.finished?(@event) do %>
<div class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-500 text-white items-center gap-x-1"> <div class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-500 text-white items-center gap-x-1">
<span class="h-2 w-2 bg-white rounded-full animate__animated animate__flash animate__infinite animate__slow_slow"> <span class="h-2 w-2 bg-white rounded-full animate__animated animate__flash animate__infinite animate__slow_slow">
@@ -106,7 +106,7 @@ defmodule ClaperWeb.EventLive.EventCardComponent do
phx-click-away={JS.hide(to: "#dropdown-#{@event.uuid}")} phx-click-away={JS.hide(to: "#dropdown-#{@event.uuid}")}
phx-click={JS.toggle(to: "#dropdown-#{@event.uuid}")} phx-click={JS.toggle(to: "#dropdown-#{@event.uuid}")}
phx-target={@myself} phx-target={@myself}
class="flex w-full lg:w-auto pl-3 pr-4 text-white items-center justify-between py-2 rounded-md tracking-wide font-bold focus:outline-none focus:shadow-outline hover:bg-primary-600 bg-primary-500" class="flex w-full lg:w-auto pl-3 pr-4 text-white items-center justify-between py-2 rounded-md tracking-wide font-bold focus:outline-hidden focus:shadow-outline hover:bg-primary-600 bg-primary-500"
> >
<span class="mr-2">{gettext("Join")}</span> <span class="mr-2">{gettext("Join")}</span>
<svg <svg
@@ -127,14 +127,14 @@ defmodule ClaperWeb.EventLive.EventCardComponent do
<div <div
phx-hook="Dropdown" phx-hook="Dropdown"
id={"dropdown-#{@event.uuid}"} id={"dropdown-#{@event.uuid}"}
class="hidden rounded shadow-lg bg-white border px-1 py-1 absolute -left-1 top-9 w-max z-30" class="hidden rounded-sm shadow-lg bg-white border px-1 py-1 absolute -left-1 top-9 w-max z-30"
> >
<ul> <ul>
<li> <li>
<a <a
data-phx-link="patch" data-phx-link="patch"
data-phx-link-state="push" data-phx-link-state="push"
class="py-2 px-2 rounded text-gray-600 hover:bg-gray-100 flex items-center gap-x-2" class="py-2 px-2 rounded-sm text-gray-600 hover:bg-gray-100 flex items-center gap-x-2"
href={~p"/e/#{@event.code}/manage"} href={~p"/e/#{@event.code}/manage"}
> >
<svg <svg
@@ -156,7 +156,7 @@ defmodule ClaperWeb.EventLive.EventCardComponent do
<a <a
data-phx-link="patch" data-phx-link="patch"
data-phx-link-state="push" data-phx-link-state="push"
class="py-2 px-2 rounded text-gray-600 hover:bg-gray-100 flex items-center gap-x-2" class="py-2 px-2 rounded-sm text-gray-600 hover:bg-gray-100 flex items-center gap-x-2"
href={~p"/e/#{@event.code}"} href={~p"/e/#{@event.code}"}
> >
<svg <svg
@@ -186,7 +186,7 @@ defmodule ClaperWeb.EventLive.EventCardComponent do
} }
phx-value-id={@event.uuid} phx-value-id={@event.uuid}
phx-click="terminate" phx-click="terminate"
class="flex w-full lg:w-auto pl-3 pr-4 text-white items-center justify-between py-2 rounded-md tracking-wide font-bold focus:outline-none focus:shadow-outline bg-red-500 hover:bg-red-600 transition" class="flex w-full lg:w-auto pl-3 pr-4 text-white items-center justify-between py-2 rounded-md tracking-wide font-bold focus:outline-hidden focus:shadow-outline bg-red-500 hover:bg-red-600 transition"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -207,7 +207,7 @@ defmodule ClaperWeb.EventLive.EventCardComponent do
phx-click-away={JS.hide(to: "#dropdown-action-#{@event.uuid}")} phx-click-away={JS.hide(to: "#dropdown-action-#{@event.uuid}")}
phx-click={JS.toggle(to: "#dropdown-action-#{@event.uuid}")} phx-click={JS.toggle(to: "#dropdown-action-#{@event.uuid}")}
phx-target={@myself} phx-target={@myself}
class="flex w-full lg:w-auto pl-3 pr-4 text-gray-700 items-center justify-between py-2 rounded-md tracking-wide font-bold focus:outline-none focus:shadow-outline hover:bg-gray-300 bg-gray-200" class="flex w-full lg:w-auto pl-3 pr-4 text-gray-700 items-center justify-between py-2 rounded-md tracking-wide font-bold focus:outline-hidden focus:shadow-outline hover:bg-gray-300 bg-gray-200"
> >
<span class="mr-2">{gettext("More options")}</span> <span class="mr-2">{gettext("More options")}</span>
<svg <svg
@@ -228,12 +228,12 @@ defmodule ClaperWeb.EventLive.EventCardComponent do
<div <div
phx-hook="Dropdown" phx-hook="Dropdown"
id={"dropdown-action-#{@event.uuid}"} id={"dropdown-action-#{@event.uuid}"}
class="hidden rounded shadow-lg bg-white border px-1 py-1 absolute -left-1 top-9 w-max font-medium text-sm z-30" class="hidden rounded-sm shadow-lg bg-white border px-1 py-1 absolute -left-1 top-9 w-max font-medium text-sm z-30"
> >
<ul> <ul>
<li> <li>
<a <a
class="py-2 px-2 rounded text-gray-600 hover:bg-gray-100 flex items-center gap-x-2" class="py-2 px-2 rounded-sm text-gray-600 hover:bg-gray-100 flex items-center gap-x-2"
href={~p"/events/#{@event.uuid}/edit"} href={~p"/events/#{@event.uuid}/edit"}
data-phx-link="patch" data-phx-link="patch"
data-phx-link-state="push" data-phx-link-state="push"
@@ -254,7 +254,7 @@ defmodule ClaperWeb.EventLive.EventCardComponent do
<button <button
phx-value-id={@event.uuid} phx-value-id={@event.uuid}
phx-click="duplicate" phx-click="duplicate"
class="py-2 px-2 rounded text-gray-600 hover:bg-gray-100 flex items-center gap-x-2" class="py-2 px-2 rounded-sm text-gray-600 hover:bg-gray-100 flex items-center gap-x-2"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -287,7 +287,7 @@ defmodule ClaperWeb.EventLive.EventCardComponent do
phx-click-away={JS.hide(to: "#dropdown-action-#{@event.uuid}")} phx-click-away={JS.hide(to: "#dropdown-action-#{@event.uuid}")}
phx-click={JS.toggle(to: "#dropdown-action-#{@event.uuid}")} phx-click={JS.toggle(to: "#dropdown-action-#{@event.uuid}")}
phx-target={@myself} phx-target={@myself}
class="flex w-full lg:w-auto pl-3 pr-4 text-gray-700 items-center justify-between py-2 rounded-md tracking-wide font-bold focus:outline-none focus:shadow-outline hover:bg-gray-300 bg-gray-200" class="flex w-full lg:w-auto pl-3 pr-4 text-gray-700 items-center justify-between py-2 rounded-md tracking-wide font-bold focus:outline-hidden focus:shadow-outline hover:bg-gray-300 bg-gray-200"
> >
<span class="mr-2">{gettext("More options")}</span> <span class="mr-2">{gettext("More options")}</span>
<svg <svg
@@ -308,12 +308,12 @@ defmodule ClaperWeb.EventLive.EventCardComponent do
<div <div
phx-hook="Dropdown" phx-hook="Dropdown"
id={"dropdown-action-#{@event.uuid}"} id={"dropdown-action-#{@event.uuid}"}
class="hidden rounded shadow-lg bg-white border px-1 py-1 absolute -left-1 top-9 w-max font-medium text-sm" class="hidden rounded-sm shadow-lg bg-white border px-1 py-1 absolute -left-1 top-9 w-max font-medium text-sm"
> >
<ul> <ul>
<li> <li>
<a <a
class="py-2 px-2 rounded text-gray-600 hover:bg-gray-100 flex items-center gap-x-2" class="py-2 px-2 rounded-sm text-gray-600 hover:bg-gray-100 flex items-center gap-x-2"
href={~p"/events/#{@event.uuid}/edit"} href={~p"/events/#{@event.uuid}/edit"}
data-phx-link="patch" data-phx-link="patch"
data-phx-link-state="push" data-phx-link-state="push"
@@ -356,7 +356,7 @@ defmodule ClaperWeb.EventLive.EventCardComponent do
> >
<a <a
href={~p"/events/#{@event.uuid}/stats"} href={~p"/events/#{@event.uuid}/stats"}
class="flex w-full lg:w-auto px-3 text-white py-2 justify-center rounded-md tracking-wide font-bold focus:outline-none focus:shadow-outline hover:bg-primary-600 bg-primary-500 space-x-2" class="flex w-full lg:w-auto px-3 text-white py-2 justify-center rounded-md tracking-wide font-bold focus:outline-hidden focus:shadow-outline hover:bg-primary-600 bg-primary-500 space-x-2"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -376,7 +376,7 @@ defmodule ClaperWeb.EventLive.EventCardComponent do
phx-click-away={JS.hide(to: "#dropdown-action-#{@event.uuid}")} phx-click-away={JS.hide(to: "#dropdown-action-#{@event.uuid}")}
phx-click={JS.toggle(to: "#dropdown-action-#{@event.uuid}")} phx-click={JS.toggle(to: "#dropdown-action-#{@event.uuid}")}
phx-target={@myself} phx-target={@myself}
class="flex w-full lg:w-auto pl-3 pr-4 text-gray-700 items-center justify-between py-2 rounded-md tracking-wide font-bold focus:outline-none focus:shadow-outline hover:bg-gray-300 bg-gray-200" class="flex w-full lg:w-auto pl-3 pr-4 text-gray-700 items-center justify-between py-2 rounded-md tracking-wide font-bold focus:outline-hidden focus:shadow-outline hover:bg-gray-300 bg-gray-200"
> >
<span class="mr-2">{gettext("More options")}</span> <span class="mr-2">{gettext("More options")}</span>
<svg <svg
@@ -397,14 +397,14 @@ defmodule ClaperWeb.EventLive.EventCardComponent do
<div <div
phx-hook="Dropdown" phx-hook="Dropdown"
id={"dropdown-action-#{@event.uuid}"} id={"dropdown-action-#{@event.uuid}"}
class="hidden rounded shadow-lg bg-white border px-1 py-1 absolute -left-1 top-9 w-max font-medium text-sm z-30" class="hidden rounded-sm shadow-lg bg-white border px-1 py-1 absolute -left-1 top-9 w-max font-medium text-sm z-30"
> >
<ul> <ul>
<li> <li>
<button <button
phx-value-id={@event.uuid} phx-value-id={@event.uuid}
phx-click="duplicate" phx-click="duplicate"
class="py-2 px-2 rounded text-gray-600 hover:bg-gray-100 flex items-center gap-x-2" class="py-2 px-2 rounded-sm text-gray-600 hover:bg-gray-100 flex items-center gap-x-2"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -427,7 +427,7 @@ defmodule ClaperWeb.EventLive.EventCardComponent do
"This will delete all data related to your event, this cannot be undone. Confirm ?" "This will delete all data related to your event, this cannot be undone. Confirm ?"
) )
} }
class="py-2 px-2 rounded text-red-500 hover:bg-gray-100 flex items-center gap-x-2 flex items-center gap-x-2 cursor-pointer" class="py-2 px-2 rounded-sm text-red-500 hover:bg-gray-100 flex items-center gap-x-2 flex items-center gap-x-2 cursor-pointer"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"

6
lib/claper_web/live/event_live/event_form_component.html.heex
View File

@@ -48,7 +48,7 @@
type="submit" type="submit"
form="event-form" form="event-form"
phx_disable_with="Loading..." phx_disable_with="Loading..."
class="w-full lg:w-auto px-6 text-white py-2 rounded-md tracking-wide font-bold focus:outline-none focus:shadow-outline bg-gradient-to-tl from-primary-500 to-secondary-500 bg-size-200 bg-pos-0 hover:bg-pos-100 transition-all duration-500" class="w-full lg:w-auto px-6 text-white py-2 rounded-md tracking-wide font-bold focus:outline-hidden focus:shadow-outline bg-linear-to-tl from-primary-500 to-secondary-500 bg-size-[200%_200%] bg-position-[0%_0%] hover:bg-position-[100%_100%] transition-all duration-500"
> >
{case @action do {case @action do
:edit -> gettext("Save") :edit -> gettext("Save")
@@ -56,7 +56,7 @@
end} end}
</button> </button>
<% else %> <% else %>
<div class="opacity-25 cursor-default w-full lg:w-auto px-6 text-white py-2 rounded-md tracking-wide font-bold focus:outline-none focus:shadow-outline bg-gradient-to-tl from-primary-500 to-secondary-500 bg-size-200 bg-pos-0"> <div class="opacity-25 cursor-default w-full lg:w-auto px-6 text-white py-2 rounded-md tracking-wide font-bold focus:outline-hidden focus:shadow-outline bg-linear-to-tl from-primary-500 to-secondary-500 bg-size-[200%_200%] bg-position-[0%_0%]">
{case @action do {case @action do
:edit -> gettext("Save") :edit -> gettext("Save")
:new -> gettext("Create") :new -> gettext("Create")
@@ -70,7 +70,7 @@
phx_value_id: @event.uuid, phx_value_id: @event.uuid,
data: [confirm: gettext("Are you sure?")], data: [confirm: gettext("Are you sure?")],
class: class:
"w-full lg:w-auto px-6 text-center text-white py-2 rounded-md tracking-wide font-bold focus:outline-none focus:shadow-outline bg-gradient-to-tl from-supporting-red-600 to-supporting-red-400 bg-size-200 bg-pos-0 hover:bg-pos-100 transition-all duration-500" "w-full lg:w-auto px-6 text-center text-white py-2 rounded-md tracking-wide font-bold focus:outline-hidden focus:shadow-outline bg-linear-to-tl from-supporting-red-600 to-supporting-red-400 bg-size-[200%_200%] bg-position-[0%_0%] hover:bg-position-[100%_100%] transition-all duration-500"
)} )}
<% end %> <% end %>
</div> </div>

15
lib/claper_web/live/event_live/index.html.heex
View File

@@ -48,11 +48,11 @@
> >
<div <div
phx-click="toggle-quick-create" phx-click="toggle-quick-create"
class="fixed inset-0 bg-gray-800 bg-opacity-75 transition-opacity w-full h-full" class="fixed inset-0 bg-gray-800/75 transition-opacity w-full h-full -z-10"
aria-hidden="true" aria-hidden="true"
> >
</div> </div>
<div class="mx-auto max-w-xl transform divide-y divide-gray-100 overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all"> <div class="mx-auto max-w-xl transform divide-y divide-gray-100 overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black/5 transition-all relative">
<button phx-click="toggle-quick-create" class="absolute right-0 top-0"> <button phx-click="toggle-quick-create" class="absolute right-0 top-0">
<svg <svg
class="text-gray-500 h-9 transform rotate-45" class="text-gray-500 h-9 transform rotate-45"
@@ -80,15 +80,16 @@
<ClaperWeb.Component.Input.text <ClaperWeb.Component.Input.text
form={f} form={f}
key={:name} key={:name}
name="" name={gettext("Name of your event")}
readonly={false} readonly={false}
minlength="5"
maxlength="50"
class="h-12" class="h-12"
placeholder={gettext("Name of your event")}
/> />
<button <button
type="submit" type="submit"
phx_disable_with="Loading..." phx_disable_with="Loading..."
class="mt-5 w-full lg:w-auto px-6 text-white py-2 rounded-md tracking-wide font-bold focus:outline-none focus:shadow-outline bg-gradient-to-tl from-primary-500 to-secondary-500 bg-size-200 bg-pos-0 hover:bg-pos-100 transition-all duration-500" class="mt-5 w-full lg:w-auto px-6 text-white py-2 rounded-md tracking-wide font-bold focus:outline-hidden focus:shadow-outline bg-linear-to-tl from-primary-500 to-secondary-500 bg-size-[200%_200%] bg-position-[0px_0px] hover:bg-position-[100%_100%] transition-all duration-500"
> >
{gettext("Create")} {gettext("Create")}
</button> </button>
@@ -147,7 +148,7 @@
data-tg-tour={gettext("Welcome to Claper! You can create a new event here.")} data-tg-tour={gettext("Welcome to Claper! You can create a new event here.")}
data-tg-title={"#{gettext("Your first steps with Claper")} 👋"} data-tg-title={"#{gettext("Your first steps with Claper")} 👋"}
href={~p"/events/new"} href={~p"/events/new"}
class="relative w-full sm:w-auto inline-flex justify-center items-center px-5 py-2 text-lg font-medium rounded-md text-white bg-gradient-to-tl from-primary-500 to-secondary-500 bg-size-200 bg-pos-0 hover:bg-pos-100 transition-all duration-500" class="relative w-full sm:w-auto inline-flex justify-center items-center px-5 py-2 text-lg font-medium rounded-md text-white bg-linear-to-tl from-primary-500 to-secondary-500 bg-size-[200%_200%] bg-position-[0%_0%] hover:bg-position-[100%_100%] transition-all duration-500"
> >
<svg <svg
class="-ml-1 mr-1 h-5 w-5" class="-ml-1 mr-1 h-5 w-5"
@@ -212,7 +213,7 @@
<div class="flex justify-center my-4"> <div class="flex justify-center my-4">
<button <button
phx-click="load-more" phx-click="load-more"
class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-primary-700 bg-primary-100 hover:bg-primary-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-primary-700 bg-primary-100 hover:bg-primary-200 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
> >
{gettext("Load more")} {gettext("Load more")}
</button> </button>

14
lib/claper_web/live/event_live/join.html.heex
View File

@@ -26,14 +26,14 @@
<%= if @current_user do %> <%= if @current_user do %>
<.link <.link
href={~p"/events"} href={~p"/events"}
class="relative inline-flex items-center px-4 py-1 text-base font-sm rounded-md text-white bg-gradient-to-tl from-primary-500 to-secondary-500 bg-size-200 bg-pos-0 hover:bg-pos-100 transition-all duration-500" class="relative inline-flex items-center px-4 py-1 text-base font-sm rounded-md text-white bg-linear-to-tl from-primary-500 to-secondary-500 bg-size-[200%_200%] bg-position-[0%_0%] hover:bg-position-[100%_100%] transition-all duration-500"
> >
{gettext("Dashboard")} {gettext("Dashboard")}
</.link> </.link>
<% else %> <% else %>
<.link <.link
href={~p"/users/log_in"} href={~p"/users/log_in"}
class="relative inline-flex items-center px-4 py-1 text-base font-sm rounded-md text-white bg-gradient-to-tl from-primary-500 to-secondary-500 bg-size-200 bg-pos-0 hover:bg-pos-100 transition-all duration-500" class="relative inline-flex items-center px-4 py-1 text-base font-sm rounded-md text-white bg-linear-to-tl from-primary-500 to-secondary-500 bg-size-[200%_200%] bg-position-[0%_0%] hover:bg-position-[100%_100%] transition-all duration-500"
> >
{gettext("Login")} {gettext("Login")}
</.link> </.link>
@@ -49,14 +49,14 @@
<%= if @current_user do %> <%= if @current_user do %>
<.link <.link
href={~p"/events"} href={~p"/events"}
class="relative inline-flex items-center px-4 py-1 text-base font-sm rounded-md text-white bg-gradient-to-tl from-primary-500 to-secondary-500 bg-size-200 bg-pos-0 hover:bg-pos-100 transition-all duration-500" class="relative inline-flex items-center px-4 py-1 text-base font-sm rounded-md text-white bg-linear-to-tl from-primary-500 to-secondary-500 bg-size-[200%_200%] bg-position-[0%_0%] hover:bg-position-[100%_100%] transition-all duration-500"
> >
{gettext("Dashboard")} {gettext("Dashboard")}
</.link> </.link>
<% else %> <% else %>
<.link <.link
href={~p"/users/log_in"} href={~p"/users/log_in"}
class="relative inline-flex items-center px-4 py-1 text-base font-sm rounded-md text-white bg-gradient-to-tl from-primary-500 to-secondary-500 bg-size-200 bg-pos-0 hover:bg-pos-100 transition-all duration-500" class="relative inline-flex items-center px-4 py-1 text-base font-sm rounded-md text-white bg-linear-to-tl from-primary-500 to-secondary-500 bg-size-[200%_200%] bg-position-[0%_0%] hover:bg-position-[100%_100%] transition-all duration-500"
> >
{gettext("Login")} {gettext("Login")}
</.link> </.link>
@@ -76,7 +76,7 @@
autofocus: true, autofocus: true,
id: "input", id: "input",
class: class:
"transition-all bg-transparent tracking-widest w-full uppercase text-white text-2xl px-3 border-b border-gray-200 focus:border-b-2 pt-5 pl-12 pb-3 outline-none" "transition-all bg-transparent tracking-widest w-full uppercase text-white text-2xl px-3 border-b border-gray-200 focus:border-b-2 pt-5 pl-12 pb-3 outline-hidden"
)} )}
<img <img
class="icon absolute top-5 left-2 transition-all duration-100" class="icon absolute top-5 left-2 transition-all duration-100"
@@ -89,7 +89,7 @@
<button <button
type="submit" type="submit"
id="submit" id="submit"
class="w-full flex justify-center text-white p-4 rounded-full tracking-wide font-bold outline-none focus:shadow-outline shadow-lg bg-gradient-to-tl from-primary-500 to-secondary-500 bg-size-200 bg-pos-0 hover:bg-pos-100 transition-all duration-500" class="w-full flex justify-center text-white p-4 rounded-full tracking-wide font-bold outline-hidden focus:shadow-outline shadow-lg bg-linear-to-tl from-primary-500 to-secondary-500 bg-size-[200%_200%] bg-position-[0%_0%] hover:bg-position-[100%_100%] transition-all duration-500"
> >
{gettext("Join")} {gettext("Join")}
</button> </button>
@@ -98,7 +98,7 @@
<%= if @last_event do %> <%= if @last_event do %>
<.link href={~p"/e/#{@last_event.code}"}> <.link href={~p"/e/#{@last_event.code}"}>
<div class="rounded-md bg-gray-600 bg-opacity-50 p-4 mt-8"> <div class="rounded-md bg-gray-600/50 p-4 mt-8">
<div class="flex justify-center items-center"> <div class="flex justify-center items-center">
<p class="text-sm text-white"> <p class="text-sm text-white">
{gettext("Return to your last event")} ({@last_event.name}) {gettext("Return to your last event")} ({@last_event.name})

33
lib/claper_web/live/event_live/manage.ex
View File

@@ -39,6 +39,7 @@ defmodule ClaperWeb.EventLive.Manage do
socket = socket =
socket socket
|> assign(:interaction_modal, false)
|> assign(:settings_modal, false) |> assign(:settings_modal, false)
|> assign(:attendees_nb, 1) |> assign(:attendees_nb, 1)
|> assign(:event, event) |> assign(:event, event)
@@ -762,18 +763,26 @@ defmodule ClaperWeb.EventLive.Manage do
end end
@impl true @impl true
def handle_params(params, _url, socket) do def handle_event(
{:noreply, apply_action(socket, socket.assigns.live_action, params)} "toggle-interaction-modal",
_params,
%{assigns: %{interaction_modal: interaction_modal = true}} = socket
) do
{:noreply, socket |> push_navigate(to: ~p"/e/#{socket.assigns.event.code}/manage")}
end end
def toggle_add_modal(js \\ %JS{}) do @impl true
js def handle_event(
|> JS.toggle( "toggle-interaction-modal",
to: "#add-modal", _params,
out: "animate__animated animate__fadeOut", %{assigns: %{interaction_modal: interaction_modal = false}} = socket
in: "animate__animated animate__fadeIn" ) do
) {:noreply, socket |> assign(:interaction_modal, true)}
|> JS.push("maybe-redirect", target: "#add-modal") end
@impl true
def handle_params(params, _url, socket) do
{:noreply, apply_action(socket, socket.assigns.live_action, params)}
end end
def toggle_settings_modal(js \\ %JS{}) do def toggle_settings_modal(js \\ %JS{}) do
@@ -802,6 +811,7 @@ defmodule ClaperWeb.EventLive.Manage do
socket socket
|> assign(:create, "poll") |> assign(:create, "poll")
|> assign(:interaction_modal, true)
|> assign(:create_action, :edit) |> assign(:create_action, :edit)
|> assign(:poll, poll) |> assign(:poll, poll)
end end
@@ -834,6 +844,7 @@ defmodule ClaperWeb.EventLive.Manage do
socket socket
|> assign(:create, "form") |> assign(:create, "form")
|> assign(:interaction_modal, true)
|> assign(:create_action, :edit) |> assign(:create_action, :edit)
|> assign(:form, form) |> assign(:form, form)
end end
@@ -843,6 +854,7 @@ defmodule ClaperWeb.EventLive.Manage do
socket socket
|> assign(:create, "embed") |> assign(:create, "embed")
|> assign(:interaction_modal, true)
|> assign(:create_action, :edit) |> assign(:create_action, :edit)
|> assign(:embed, embed) |> assign(:embed, embed)
end end
@@ -873,6 +885,7 @@ defmodule ClaperWeb.EventLive.Manage do
socket socket
|> assign(:create, "quiz") |> assign(:create, "quiz")
|> assign(:interaction_modal, true)
|> assign(:create_action, :edit) |> assign(:create_action, :edit)
|> assign(:quiz, quiz) |> assign(:quiz, quiz)
end end

71
lib/claper_web/live/event_live/manage.html.heex
View File

@@ -67,11 +67,11 @@
> >
<div <div
phx-click={toggle_settings_modal()} phx-click={toggle_settings_modal()}
class="fixed inset-0 bg-gray-800 bg-opacity-75 transition-opacity w-full h-full" class="fixed inset-0 bg-gray-800/75 transition-opacity w-full h-full -z-10"
aria-hidden="true" aria-hidden="true"
> >
</div> </div>
<div class="mx-auto max-w-xl transform divide-y divide-gray-100 overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all"> <div class="mx-auto max-w-xl transform divide-y divide-gray-100 overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black/5 transition-all relative">
<button phx-click={toggle_settings_modal()} class="absolute right-0 top-0"> <button phx-click={toggle_settings_modal()} class="absolute right-0 top-0">
<svg <svg
class="text-gray-500 h-9 transform rotate-45" class="text-gray-500 h-9 transform rotate-45"
@@ -134,22 +134,21 @@
</div> </div>
</div> </div>
</div> </div>
<div <div
id="add-modal" :if={@interaction_modal}
class={"#{if !@create, do: "hidden" } fixed z-30 inset-0 overflow-y-auto p-4 sm:p-6 md:p-24 id="interaction-modal"
transform transition-all duration-150"} class="fixed z-30 inset-0 overflow-y-auto p-4 sm:p-6 md:p-24 transform transition-all duration-150"
role="dialog" role="dialog"
aria-modal="true" aria-modal="true"
> >
<div <div
phx-click={toggle_add_modal()} phx-click="toggle-interaction-modal"
class="fixed inset-0 bg-gray-800 bg-opacity-75 transition-opacity w-full h-full" class="fixed inset-0 bg-gray-800/75 transition-opacity w-full h-full -z-10"
aria-hidden="true" aria-hidden="true"
> >
</div> </div>
<div class="mx-auto max-w-xl transform divide-y divide-gray-100 overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all"> <div class="mx-auto max-w-xl transform divide-y divide-gray-100 overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black/5 transition-all relative">
<button phx-click={toggle_add_modal()} class="absolute right-0 top-0"> <button phx-click="toggle-interaction-modal" class="absolute right-0 top-0">
<svg <svg
class="text-gray-500 h-9 transform rotate-45" class="text-gray-500 h-9 transform rotate-45"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -174,7 +173,7 @@
href={~p"/e/#{@event.code}/manage/add/poll"} href={~p"/e/#{@event.code}/manage/add/poll"}
class="group flex select-none rounded-xl p-3 w-full hover:bg-gray-200 cursor-pointer" class="group flex select-none rounded-xl p-3 w-full hover:bg-gray-200 cursor-pointer"
> >
<div class="flex h-12 w-12 flex-none text-white items-center justify-center rounded-lg bg-gradient-to-br from-primary-500 to-secondary-500"> <div class="flex h-12 w-12 flex-none text-white items-center justify-center rounded-lg bg-linear-to-br from-primary-500 to-secondary-500">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="h-7 w-7" class="h-7 w-7"
@@ -207,7 +206,7 @@
href={~p"/e/#{@event.code}/manage/add/form"} href={~p"/e/#{@event.code}/manage/add/form"}
class="group flex select-none rounded-xl p-3 w-full hover:bg-gray-200 cursor-pointer" class="group flex select-none rounded-xl p-3 w-full hover:bg-gray-200 cursor-pointer"
> >
<div class="flex h-12 w-12 flex-none text-white items-center justify-center rounded-lg bg-gradient-to-br from-primary-500 to-secondary-500"> <div class="flex h-12 w-12 flex-none text-white items-center justify-center rounded-lg bg-linear-to-br from-primary-500 to-secondary-500">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="h-7 w-7" class="h-7 w-7"
@@ -240,7 +239,7 @@
href={~p"/e/#{@event.code}/manage/add/embed"} href={~p"/e/#{@event.code}/manage/add/embed"}
class="group flex select-none rounded-xl p-3 w-full hover:bg-gray-200 cursor-pointer" class="group flex select-none rounded-xl p-3 w-full hover:bg-gray-200 cursor-pointer"
> >
<div class="flex h-12 w-12 flex-none text-white items-center justify-center rounded-lg bg-gradient-to-br from-primary-500 to-secondary-500"> <div class="flex h-12 w-12 flex-none text-white items-center justify-center rounded-lg bg-linear-to-br from-primary-500 to-secondary-500">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
@@ -271,7 +270,7 @@
href={~p"/e/#{@event.code}/manage/add/quiz"} href={~p"/e/#{@event.code}/manage/add/quiz"}
class="group flex select-none rounded-xl p-3 w-full hover:bg-gray-200 cursor-pointer" class="group flex select-none rounded-xl p-3 w-full hover:bg-gray-200 cursor-pointer"
> >
<div class="flex h-12 w-12 flex-none text-white items-center justify-center rounded-lg bg-gradient-to-br from-primary-500 to-secondary-500"> <div class="flex h-12 w-12 flex-none text-white items-center justify-center rounded-lg bg-linear-to-br from-primary-500 to-secondary-500">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
@@ -459,7 +458,7 @@
<div class="flex items-center text-sm text-gray-500 gap-x-1"> <div class="flex items-center text-sm text-gray-500 gap-x-1">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="flex-shrink-0 h-5 w-5 text-gray-400" class="shrink-0 h-5 w-5 text-gray-400"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke="currentColor" stroke="currentColor"
@@ -476,7 +475,7 @@
<div class="flex items-center text-sm text-gray-500 gap-x-1"> <div class="flex items-center text-sm text-gray-500 gap-x-1">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="flex-shrink-0 h-5 w-5 text-gray-400" class="shrink-0 h-5 w-5 text-gray-400"
viewBox="0 0 20 20" viewBox="0 0 20 20"
fill="currentColor" fill="currentColor"
> >
@@ -547,7 +546,7 @@
data-tg-order="4" data-tg-order="4"
data-tg-tour={"<p>#{gettext("Click here to open the presentation window. Press <strong>F</strong> in the presentation window to enable fullscreen.")}</p>"} data-tg-tour={"<p>#{gettext("Click here to open the presentation window. Press <strong>F</strong> in the presentation window to enable fullscreen.")}</p>"}
data-tg-group="manage" data-tg-group="manage"
class="hidden lg:inline-flex items-center py-1 px-5 rounded-r-sm text-base font-medium text-white bg-gradient-to-tl from-primary-500 to-secondary-500 bg-size-200 bg-pos-0 hover:bg-pos-100 transition-all duration-500" class="hidden lg:inline-flex items-center py-1 px-5 rounded-r-sm text-base font-medium text-white bg-linear-to-tl from-primary-500 to-secondary-500 bg-size-[200%_200%] bg-position-[0%_0%] hover:bg-position-[100%_100%] transition-all duration-500"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -697,7 +696,7 @@
</div> </div>
<div <div
:if={@event.presentation_file.length > 0} :if={@event.presentation_file.length > 0}
class="hidden md:block gutter col-span-full cursor-row-resize z-20 row-[2] bg-gray-50 text-center text-gray-300 text-sm leading-3" class="hidden md:block gutter col-span-full cursor-row-resize z-20 row-2 bg-gray-50 text-center text-gray-300 text-sm leading-3"
> >
••• •••
</div> </div>
@@ -746,7 +745,7 @@
<button <button
class="flex items-center justify-center gap-x-2 px-3 py-2 text-white bg-primary-500 hover:bg-primary-600 rounded-md" class="flex items-center justify-center gap-x-2 px-3 py-2 text-white bg-primary-500 hover:bg-primary-600 rounded-md"
phx-click={toggle_add_modal()} phx-click="toggle-interaction-modal"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -767,7 +766,7 @@
<% %Claper.Polls.Poll{} -> %> <% %Claper.Polls.Poll{} -> %>
<div class="flex items-center justify-between mb-2"> <div class="flex items-center justify-between mb-2">
<div class="flex items-center w-full"> <div class="flex items-center w-full">
<div class="flex h-8 w-8 flex-none text-white items-center justify-center rounded-lg bg-gradient-to-br from-primary-500 to-secondary-500 mr-2"> <div class="flex h-8 w-8 flex-none text-white items-center justify-center rounded-lg bg-linear-to-br from-primary-500 to-secondary-500 mr-2">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5" class="h-5 w-5"
@@ -787,7 +786,7 @@
</div> </div>
<a <a
class="p-2 rounded text-xs font-medium text-center text-primary-500" class="p-2 rounded-sm text-xs font-medium text-center text-primary-500"
data-phx-link="patch" data-phx-link="patch"
data-phx-link-state="push" data-phx-link-state="push"
href={~p"/e/#{@event.code}/manage/edit/poll/#{interaction.id}"} href={~p"/e/#{@event.code}/manage/edit/poll/#{interaction.id}"}
@@ -811,7 +810,7 @@
<% %Claper.Forms.Form{} -> %> <% %Claper.Forms.Form{} -> %>
<div class="flex items-center justify-between mb-2"> <div class="flex items-center justify-between mb-2">
<div class="flex items-center w-full"> <div class="flex items-center w-full">
<div class="flex h-8 w-8 flex-none text-white items-center justify-center rounded-lg bg-gradient-to-br from-primary-500 to-secondary-500 mr-2"> <div class="flex h-8 w-8 flex-none text-white items-center justify-center rounded-lg bg-linear-to-br from-primary-500 to-secondary-500 mr-2">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5" class="h-5 w-5"
@@ -829,11 +828,9 @@
</div> </div>
<span class="font-semibold">{gettext("Form")}</span> <span class="font-semibold">{gettext("Form")}</span>
</div> </div>
<a <.link
class="p-2 rounded text-xs font-medium text-center text-primary-500" class="p-2 rounded-sm text-xs font-medium text-center text-primary-500"
data-phx-link="patch" patch={~p"/e/#{@event.code}/manage/edit/form/#{interaction.id}"}
data-phx-link-state="push"
href={~p"/e/#{@event.code}/manage/edit/form/#{interaction.id}"}
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -849,12 +846,12 @@
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
/> />
</svg> </svg>
</a> </.link>
</div> </div>
<% %Claper.Embeds.Embed{} -> %> <% %Claper.Embeds.Embed{} -> %>
<div class="flex items-center justify-between mb-2"> <div class="flex items-center justify-between mb-2">
<div class="flex items-center w-full"> <div class="flex items-center w-full">
<div class="flex h-8 w-8 flex-none text-white items-center justify-center rounded-lg bg-gradient-to-br from-primary-500 to-secondary-500 mr-2"> <div class="flex h-8 w-8 flex-none text-white items-center justify-center rounded-lg bg-linear-to-br from-primary-500 to-secondary-500 mr-2">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
@@ -875,7 +872,7 @@
</span> </span>
</div> </div>
<a <a
class="p-2 rounded text-xs font-medium text-center text-primary-500" class="p-2 rounded-sm text-xs font-medium text-center text-primary-500"
data-phx-link="patch" data-phx-link="patch"
data-phx-link-state="push" data-phx-link-state="push"
href={~p"/e/#{@event.code}/manage/edit/embed/#{interaction.id}"} href={~p"/e/#{@event.code}/manage/edit/embed/#{interaction.id}"}
@@ -899,7 +896,7 @@
<% %Claper.Quizzes.Quiz{} -> %> <% %Claper.Quizzes.Quiz{} -> %>
<div class="flex items-center justify-between mb-2"> <div class="flex items-center justify-between mb-2">
<div class="flex items-center w-full"> <div class="flex items-center w-full">
<div class="flex h-8 w-8 flex-none text-white items-center justify-center rounded-lg bg-gradient-to-br from-primary-500 to-secondary-500 mr-2"> <div class="flex h-8 w-8 flex-none text-white items-center justify-center rounded-lg bg-linear-to-br from-primary-500 to-secondary-500 mr-2">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
@@ -940,7 +937,7 @@
</p> </p>
</div> </div>
<a <a
class="p-2 rounded text-xs font-medium text-center text-primary-500" class="p-2 rounded-sm text-xs font-medium text-center text-primary-500"
data-phx-link="patch" data-phx-link="patch"
data-phx-link-state="push" data-phx-link-state="push"
href={~p"/e/#{@event.code}/manage/edit/quiz/#{interaction.id}"} href={~p"/e/#{@event.code}/manage/edit/quiz/#{interaction.id}"}
@@ -1096,7 +1093,7 @@
end end
} }
phx-value-id={interaction.id} phx-value-id={interaction.id}
class="bg-supporting-red-100 text-supporting-red-800 px-2 py-2 rounded text-sm font-medium w-full" class="bg-supporting-red-100 text-supporting-red-800 px-2 py-2 rounded-sm text-sm font-medium w-full cursor-pointer"
> >
{gettext("Disable")} {gettext("Disable")}
</button> </button>
@@ -1113,7 +1110,7 @@
end end
} }
phx-value-id={interaction.id} phx-value-id={interaction.id}
class="bg-primary-100 text-primary-800 px-2 py-2 rounded text-sm font-medium w-full" class="bg-primary-100 text-primary-800 px-2 py-2 rounded-sm text-sm font-medium w-full cursor-pointer"
> >
{gettext("Enable")} {gettext("Enable")}
</button> </button>
@@ -1123,7 +1120,7 @@
<% end %> <% end %>
<button <button
:if={length(@interactions) > 0} :if={length(@interactions) > 0}
phx-click={toggle_add_modal()} phx-click="toggle-interaction-modal"
class=" class="
bg-white @container rounded-lg p-3 shadow-base transition-all flex flex-col justify-center items-center transform hover:scale-105" bg-white @container rounded-lg p-3 shadow-base transition-all flex flex-col justify-center items-center transform hover:scale-105"
> >
@@ -1137,7 +1134,7 @@
</div> </div>
<div <div
class="hidden md:block gutter-1 row-span-full cursor-col-resize col-[2] bg-gray-50 text-center text-gray-300 text-sm leading-3" class="hidden md:block gutter-1 row-span-full cursor-col-resize col-2 bg-gray-50 text-center text-gray-300 text-sm leading-3"
style="writing-mode: vertical-rl" style="writing-mode: vertical-rl"
> >
••• •••
@@ -1448,7 +1445,7 @@
<% end %> <% end %>
</div> </div>
<div class="hidden lg:block gutter-2 col-span-full cursor-row-resize z-20 row-[2] bg-gray-50 text-center text-gray-300 text-sm leading-3"> <div class="hidden lg:block gutter-2 col-span-full cursor-row-resize z-20 row-2 bg-gray-50 text-center text-gray-300 text-sm leading-3">
••• •••
</div> </div>

4
lib/claper_web/live/event_live/manageable_quiz_component.ex
View File

@@ -12,7 +12,7 @@ defmodule ClaperWeb.EventLive.ManageableQuizComponent do
~H""" ~H"""
<div <div
id={"#{@id}"} id={"#{@id}"}
class={"#{if @quiz.show_results, do: "opacity-100", else: "opacity-0"} h-full w-full flex flex-col justify-center bg-black bg-opacity-90 absolute z-30 left-1/2 top-1/2 transform -translate-y-1/2 -translate-x-1/2 p-10 transition-opacity"} class={"#{if @quiz.show_results, do: "opacity-100", else: "opacity-0"} h-full w-full flex flex-col justify-center bg-black/90 absolute z-30 left-1/2 top-1/2 transform -translate-y-1/2 -translate-x-1/2 p-10 transition-opacity"}
> >
<div class="w-full md:w-1/2 mx-auto h-full"> <div class="w-full md:w-1/2 mx-auto h-full">
<p class={"#{if @iframe, do: "text-xl mb-12", else: "text-5xl mb-24"} text-white font-bold text-center"}> <p class={"#{if @iframe, do: "text-xl mb-12", else: "text-5xl mb-24"} text-white font-bold text-center"}>
@@ -38,7 +38,7 @@ defmodule ClaperWeb.EventLive.ManageableQuizComponent do
> >
<%= for {opt, _idx} <- Enum.with_index(Enum.at(@quiz.quiz_questions, @current_question_idx).quiz_question_opts) do %> <%= for {opt, _idx} <- Enum.with_index(Enum.at(@quiz.quiz_questions, @current_question_idx).quiz_question_opts) do %>
<div class={"bg-gray-500 px-5 py-5 rounded-xl flex justify-between items-center relative text-white #{if opt.is_correct, do: "bg-green-600"} #{if not opt.is_correct, do: ""}"}> <div class={"bg-gray-500 px-5 py-5 rounded-xl flex justify-between items-center relative text-white #{if opt.is_correct, do: "bg-green-600"} #{if not opt.is_correct, do: ""}"}>
<div class="bg-gradient-to-r from-primary-500 to-secondary-500 h-full absolute left-0 transition-all rounded-l-3xl"> <div class="bg-linear-to-r from-primary-500 to-secondary-500 h-full absolute left-0 transition-all rounded-l-3xl">
</div> </div>
<div class="flex space-x-3 justify-between w-full items-center z-10 text-left"> <div class="flex space-x-3 justify-between w-full items-center z-10 text-left">
<span class="flex-1 pr-2 text-3xl">{opt.content}</span> <span class="flex-1 pr-2 text-3xl">{opt.content}</span>

4
lib/claper_web/live/event_live/poll_component.ex
View File

@@ -60,7 +60,7 @@ defmodule ClaperWeb.EventLive.PollComponent do
<button class="bg-gray-500 px-3 py-2 rounded-lg flex justify-between items-center relative text-white"> <button class="bg-gray-500 px-3 py-2 rounded-lg flex justify-between items-center relative text-white">
<div <div
style={"width: #{if @show_results, do: opt.percentage, else: 0}%;"} style={"width: #{if @show_results, do: opt.percentage, else: 0}%;"}
class={"bg-gradient-to-r from-primary-500 to-secondary-500 h-full absolute left-0 transition-all rounded-l-lg #{if opt.percentage == "100", do: "rounded-r-lg"}"} class={"bg-linear-to-r from-primary-500 to-secondary-500 h-full absolute left-0 transition-all rounded-l-lg #{if opt.percentage == "100", do: "rounded-r-lg"}"}
> >
</div> </div>
<div class="flex space-x-3 items-center z-10 text-left"> <div class="flex space-x-3 items-center z-10 text-left">
@@ -93,7 +93,7 @@ defmodule ClaperWeb.EventLive.PollComponent do
> >
<div <div
style={"width: #{if @show_results, do: opt.percentage, else: 0}%;"} style={"width: #{if @show_results, do: opt.percentage, else: 0}%;"}
class={"bg-gradient-to-r from-primary-500 to-secondary-500 h-full absolute left-0 transition-all rounded-l-lg #{if opt.percentage == "100", do: "rounded-r-lg"}"} class={"bg-linear-to-r from-primary-500 to-secondary-500 h-full absolute left-0 transition-all rounded-l-lg #{if opt.percentage == "100", do: "rounded-r-lg"}"}
> >
</div> </div>
<div class="flex space-x-3 items-center z-10 text-left"> <div class="flex space-x-3 items-center z-10 text-left">

10
lib/claper_web/live/event_live/presenter.html.heex
View File

@@ -46,7 +46,7 @@
<%= if @current_poll do %> <%= if @current_poll do %>
<div <div
id="poll" id="poll"
class={"#{if @state.poll_visible, do: "opacity-100", else: "opacity-0"} h-full w-full flex flex-col justify-center bg-black bg-opacity-90 absolute z-30 left-1/2 top-1/2 transform -translate-y-1/2 -translate-x-1/2 p-10 transition-opacity"} class={"#{if @state.poll_visible, do: "opacity-100", else: "opacity-0"} h-full w-full flex flex-col justify-center bg-black/90 absolute z-30 left-1/2 top-1/2 transform -translate-y-1/2 -translate-x-1/2 p-10 transition-opacity"}
> >
<div class="w-full md:w-1/2 mx-auto h-full"> <div class="w-full md:w-1/2 mx-auto h-full">
<p class={"#{if @iframe, do: "text-xl mb-12", else: "text-5xl mb-24"} text-white font-bold text-center"}> <p class={"#{if @iframe, do: "text-xl mb-12", else: "text-5xl mb-24"} text-white font-bold text-center"}>
@@ -59,7 +59,7 @@
<div class={"#{if @iframe, do: "py-1", else: "py-4"} bg-gray-500 px-6 rounded-3xl flex justify-between items-center relative text-white"}> <div class={"#{if @iframe, do: "py-1", else: "py-4"} bg-gray-500 px-6 rounded-3xl flex justify-between items-center relative text-white"}>
<div <div
style={"width: #{opt.percentage}%;"} style={"width: #{opt.percentage}%;"}
class="bg-gradient-to-r from-primary-500 to-secondary-500 rounded-3xl h-full absolute left-0 transition-all" class="bg-linear-to-r from-primary-500 to-secondary-500 rounded-3xl h-full absolute left-0 transition-all"
> >
</div> </div>
<div class="flex space-x-3 z-10 text-left"> <div class="flex space-x-3 z-10 text-left">
@@ -197,7 +197,7 @@
<% end %> <% end %>
</div> </div>
<div <div
class={"gutter-1 row-span-full cursor-col-resize col-[2] text-center text-sm leading-3 text-white #{if (!@state.chat_visible && @event.presentation_file.length > 0) || (!@current_embed && @event.presentation_file.length == 0), do: "hidden"}"} class={"gutter-1 row-span-full cursor-col-resize col-2 text-center text-sm leading-3 text-white #{if (!@state.chat_visible && @event.presentation_file.length > 0) || (!@current_embed && @event.presentation_file.length == 0), do: "hidden"}"}
style="writing-mode: vertical-rl" style="writing-mode: vertical-rl"
> >
••• •••
@@ -220,12 +220,12 @@
<%= if @event.presentation_file.length > 0 do %> <%= if @event.presentation_file.length > 0 do %>
<%= if Application.get_env(:claper, :presentations) |> Keyword.get(:storage) == "local" do %> <%= if Application.get_env(:claper, :presentations) |> Keyword.get(:storage) == "local" do %>
<img <img
class="max-h-screen !w-auto" class="max-h-screen w-auto!"
src={"/uploads/#{@event.presentation_file.hash}/#{index}.jpg"} src={"/uploads/#{@event.presentation_file.hash}/#{index}.jpg"}
/> />
<% else %> <% else %>
<img <img
class=" max-h-screen !w-auto" class=" max-h-screen w-auto!"
src={"https://#{Application.get_env(:claper, :presentations) |> Keyword.get(:aws_bucket)}.s3.#{Application.get_env(:ex_aws, :region)}.amazonaws.com/presentations/#{@event.presentation_file.hash}/#{index}.jpg"} src={"https://#{Application.get_env(:claper, :presentations) |> Keyword.get(:aws_bucket)}.s3.#{Application.get_env(:ex_aws, :region)}.amazonaws.com/presentations/#{@event.presentation_file.hash}/#{index}.jpg"}
/> />
<% end %> <% end %>

2
lib/claper_web/live/event_live/quiz_component.ex
View File

@@ -93,7 +93,7 @@ defmodule ClaperWeb.EventLive.QuizComponent do
phx-value-opt={opt.id} phx-value-opt={opt.id}
class="bg-gray-500 px-3 py-2 rounded-lg flex justify-between items-center relative text-white" class="bg-gray-500 px-3 py-2 rounded-lg flex justify-between items-center relative text-white"
> >
<div class="bg-gradient-to-r from-primary-500 to-secondary-500 h-full absolute left-0 transition-all rounded-l-3xl"> <div class="bg-linear-to-r from-primary-500 to-secondary-500 h-full absolute left-0 transition-all rounded-l-3xl">
</div> </div>
<div class="flex space-x-3 items-center z-10 text-left"> <div class="flex space-x-3 items-center z-10 text-left">
<%= if Enum.member?(@selected_quiz_question_opts, opt) do %> <%= if Enum.member?(@selected_quiz_question_opts, opt) do %>

14
lib/claper_web/live/event_live/show.html.heex
View File

@@ -1,10 +1,10 @@
<%= if @started || @is_leader do %> <%= if @started || @is_leader do %>
<div class="relative min-h-screen lg:flex lg:flex-col lg:items-center lg:w-full bg-black lg:bg-gradient-to-tl from-primary-500 to-secondary-500"> <div class="relative min-h-screen lg:flex lg:flex-col lg:items-center lg:w-full bg-black lg:bg-linear-to-tl from-primary-500 to-secondary-500">
<div class="relative w-full"> <div class="relative w-full">
<div <div
id="side-menu-shadow" id="side-menu-shadow"
phx-click={toggle_side_menu()} phx-click={toggle_side_menu()}
class="hidden fixed z-20 h-screen bg-black bg-opacity-70 w-full" class="hidden fixed z-20 h-screen bg-black/70 w-full"
> >
</div> </div>
@@ -42,7 +42,7 @@
<div class="flex justify-between items-center px-5 py-3"> <div class="flex justify-between items-center px-5 py-3">
<button <button
phx-click={toggle_side_menu()} phx-click={toggle_side_menu()}
class="bg-black rounded-full text-sm px-3 py-1 bg-gradient-to-tl from-primary-500 to-secondary-500 bg-size-200 bg-pos-0 text-white uppercase flex items-center" class="bg-black rounded-full text-sm px-3 py-1 bg-linear-to-tl from-primary-500 to-secondary-500 bg-size-[200%_200%] bg-position-[0%_0%] text-white uppercase flex items-center"
> >
<img src="/images/icons/menu-outline.svg" class="h-6" /> <img src="/images/icons/menu-outline.svg" class="h-6" />
<span class="ml-1">#{@event.code}</span> <span class="ml-1">#{@event.code}</span>
@@ -277,7 +277,7 @@
> >
{text_input(f, :name, {text_input(f, :name,
class: class:
"bg-transparent outline-none w-full text-white h-10 placeholder-white resize-none pr-20 leading-4 overflow-y-hidden focus:overflow-y-auto", "bg-transparent outline-hidden w-full text-white h-10 placeholder-white resize-none pr-20 leading-4 overflow-y-hidden focus:overflow-y-auto",
placeholder: gettext("Enter your name") placeholder: gettext("Enter your name")
)} )}
<p class="font-semibold text-sm"> <p class="font-semibold text-sm">
@@ -341,7 +341,7 @@
{textarea(f, :body, {textarea(f, :body,
id: "postFormTA", id: "postFormTA",
class: class:
"bg-transparent outline-none w-full text-white h-10 placeholder-white pt-3 resize-none pr-20 leading-4 overflow-y-hidden focus:overflow-y-auto", "bg-transparent outline-hidden w-full text-white h-10 placeholder-white pt-3 resize-none pr-20 leading-4 overflow-y-hidden focus:overflow-y-auto",
placeholder: gettext("Ask, comment...") placeholder: gettext("Ask, comment...")
)} )}
</div> </div>
@@ -361,7 +361,7 @@
-webkit-backdrop-filter: blur(11.5px);" -webkit-backdrop-filter: blur(11.5px);"
> >
<div class="flex space-x-2 items-center"> <div class="flex space-x-2 items-center">
<div class="opacity-50 bg-transparent outline-none w-full text-white h-10 placeholder-white pt-3 resize-none pr-20 leading-4 overflow-y-hidden focus:overflow-y-auto"> <div class="opacity-50 bg-transparent outline-hidden w-full text-white h-10 placeholder-white pt-3 resize-none pr-20 leading-4 overflow-y-hidden focus:overflow-y-auto">
{gettext("Messages deactivated")} {gettext("Messages deactivated")}
</div> </div>
</div> </div>
@@ -459,7 +459,7 @@
</div> </div>
<div class="hidden lg:block lg:w-1/2"> <div class="hidden lg:block lg:w-1/2">
<div class="h-full object-cover bg-gradient-animate"> <div class="h-full object-cover bg-gradient-animate">
<div class="h-full bg-black text-white bg-opacity-50 text-center flex flex-col items-center justify-center"> <div class="h-full bg-black/50 text-white text-center flex flex-col items-center justify-center">
<span class="text-4xl font-semibold mb-10"> <span class="text-4xl font-semibold mb-10">
{gettext("Scan to interact in real-time")} {gettext("Scan to interact in real-time")}
</span> </span>

10
lib/claper_web/live/form_live/form_component.html.heex
View File

@@ -12,8 +12,6 @@
form={f} form={f}
key={:title} key={:title}
name={gettext("Title of your form")} name={gettext("Title of your form")}
labelClass={if @dark, do: "text-white"}
fieldClass={if @dark, do: "bg-gray-700 text-white"}
autofocus="true" autofocus="true"
required="true" required="true"
/> />
@@ -24,8 +22,6 @@
<div class="flex items-center gap-x-2"> <div class="flex items-center gap-x-2">
<ClaperWeb.Component.Input.text <ClaperWeb.Component.Input.text
form={i} form={i}
labelClass={if @dark, do: "text-white"}
fieldClass={if @dark, do: "bg-gray-700 text-white"}
key={:name} key={:name}
name={ngettext("Field %{count}", "Field %{count}", i.index + 1)} name={ngettext("Field %{count}", "Field %{count}", i.index + 1)}
autofocus="true" autofocus="true"
@@ -33,9 +29,7 @@
/> />
<ClaperWeb.Component.Input.select <ClaperWeb.Component.Input.select
form={i} form={i}
labelClass={if @dark, do: "text-white"}
array={[{:"#{gettext("Text")}", "text"}, {:"#{gettext("Email")}", "email"}]} array={[{:"#{gettext("Text")}", "text"}, {:"#{gettext("Email")}", "email"}]}
fieldClass={if @dark, do: "bg-gray-700 text-white"}
key={:type} key={:type}
name={gettext("Type")} name={gettext("Type")}
required="true" required="true"
@@ -92,7 +86,7 @@
<button <button
type="submit" type="submit"
phx_disable_with="Loading..." phx_disable_with="Loading..."
class="w-full lg:w-auto px-6 text-white py-2 rounded-md tracking-wide font-bold focus:outline-none focus:shadow-outline bg-gradient-to-tl from-primary-500 to-secondary-500 bg-size-200 bg-pos-0 hover:bg-pos-100 transition-all duration-500" class="w-full lg:w-auto px-6 text-white py-2 rounded-md tracking-wide font-bold focus:outline-hidden focus:shadow-outline bg-linear-to-tl from-primary-500 to-secondary-500 bg-size-[200%_200%] bg-position-[0%_0%] hover:bg-position-[100%_100%] transition-all duration-500"
> >
{case @live_action do {case @live_action do
:new -> gettext("Create") :new -> gettext("Create")
@@ -112,7 +106,7 @@
) )
], ],
class: class:
"w-full lg:w-auto px-6 text-center text-white py-2 rounded-md tracking-wide font-bold focus:outline-none focus:shadow-outline bg-gradient-to-tl from-supporting-red-600 to-supporting-red-400 bg-size-200 bg-pos-0 hover:bg-pos-100 transition-all duration-500" "w-full lg:w-auto px-6 text-center text-white py-2 rounded-md tracking-wide font-bold focus:outline-hidden focus:shadow-outline bg-linear-to-tl from-supporting-red-600 to-supporting-red-400 bg-size-[200%_200%] bg-position-[0%_0%] hover:bg-position-[100%_100%] transition-all duration-500"
)} )}
<% end %> <% end %>
</div> </div>

6
lib/claper_web/live/modal_component.ex
View File

@@ -18,16 +18,16 @@ defmodule ClaperWeb.ModalComponent do
> >
<div class="flex items-center justify-center pt-4 px-4 pb-20 text-center sm:block sm:p-4"> <div class="flex items-center justify-center pt-4 px-4 pb-20 text-center sm:block sm:p-4">
<div <div
class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" class="fixed inset-0 bg-gray-500/75 transition-opacity -z-10"
phx-click={hide_modal()} phx-click={hide_modal()}
phx-target={@myself} phx-target={@myself}
aria-hidden="true" aria-hidden="true"
> >
</div> </div>
<div class="inline-block align-middle bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all"> <div class="inline-block align-middle bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all relative">
<div <div
class="text-2xl text-gray-400 absolute right-5 top-3" class="text-2xl text-gray-400 absolute right-5 top-3 cursor-pointer"
phx-click={hide_modal()} phx-click={hide_modal()}
phx-target={@myself} phx-target={@myself}
> >

8
lib/claper_web/live/poll_live/form_component.html.heex
View File

@@ -12,8 +12,6 @@
form={f} form={f}
key={:title} key={:title}
name={gettext("Title of your poll")} name={gettext("Title of your poll")}
labelClass={if @dark, do: "text-white"}
fieldClass={if @dark, do: "bg-gray-700 text-white"}
autofocus="true" autofocus="true"
required="true" required="true"
/> />
@@ -24,8 +22,6 @@
<div class="flex-1"> <div class="flex-1">
<ClaperWeb.Component.Input.text <ClaperWeb.Component.Input.text
form={i} form={i}
labelClass={if @dark, do: "text-white"}
fieldClass={if @dark, do: "bg-gray-700 text-white"}
key={:content} key={:content}
name={ngettext("Choice %{count}", "Choice %{count}", i.index + 1)} name={ngettext("Choice %{count}", "Choice %{count}", i.index + 1)}
autofocus="true" autofocus="true"
@@ -100,7 +96,7 @@
<button <button
type="submit" type="submit"
phx_disable_with="Loading..." phx_disable_with="Loading..."
class="w-full lg:w-auto px-6 text-white py-2 rounded-md tracking-wide font-bold focus:outline-none focus:shadow-outline bg-gradient-to-tl from-primary-500 to-secondary-500 bg-size-200 bg-pos-0 hover:bg-pos-100 transition-all duration-500" class="w-full lg:w-auto px-6 text-white py-2 rounded-md tracking-wide font-bold focus:outline-hidden focus:shadow-outline bg-linear-to-tl from-primary-500 to-secondary-500 bg-size-[200%_200%] bg-position-[0%_0%] hover:bg-position-[100%_100%] transition-all duration-500"
> >
{case @live_action do {case @live_action do
:new -> gettext("Create") :new -> gettext("Create")
@@ -120,7 +116,7 @@
) )
], ],
class: class:
"w-full lg:w-auto px-6 text-center text-white py-2 rounded-md tracking-wide font-bold focus:outline-none focus:shadow-outline bg-gradient-to-tl from-supporting-red-600 to-supporting-red-400 bg-size-200 bg-pos-0 hover:bg-pos-100 transition-all duration-500" "w-full lg:w-auto px-6 text-center text-white py-2 rounded-md tracking-wide font-bold focus:outline-hidden focus:shadow-outline bg-linear-to-tl from-supporting-red-600 to-supporting-red-400 bg-size-[200%_200%] bg-position-[0%_0%] hover:bg-position-[100%_100%] transition-all duration-500"
)} )}
<% end %> <% end %>
</div> </div>

12
lib/claper_web/live/quiz_live/quiz_component.html.heex
View File

@@ -12,8 +12,6 @@
form={f} form={f}
key={:title} key={:title}
name={gettext("Title")} name={gettext("Title")}
labelClass={if @dark, do: "text-white"}
fieldClass={if @dark, do: "bg-gray-700 text-white"}
autofocus="true" autofocus="true"
required="true" required="true"
/> />
@@ -56,8 +54,6 @@
<div class="flex gap-x-3 mt-3 items-center justify-start"> <div class="flex gap-x-3 mt-3 items-center justify-start">
<ClaperWeb.Component.Input.text <ClaperWeb.Component.Input.text
form={q} form={q}
labelClass={if @dark, do: "text-white"}
fieldClass={if @dark, do: "bg-gray-700 text-white"}
key={:content} key={:content}
name={gettext("Your question")} name={gettext("Your question")}
autofocus="true" autofocus="true"
@@ -78,8 +74,6 @@
<div class="flex-1"> <div class="flex-1">
<ClaperWeb.Component.Input.text <ClaperWeb.Component.Input.text
form={o} form={o}
labelClass={if @dark, do: "text-white"}
fieldClass={if @dark, do: "bg-gray-700 text-white"}
key={:content} key={:content}
name={gettext("Answer %{index}", index: o.index + 1)} name={gettext("Answer %{index}", index: o.index + 1)}
required="true" required="true"
@@ -154,7 +148,7 @@
<%= if Ecto.Changeset.get_field(@changeset, :quiz_questions) |> length() > 1 do %> <%= if Ecto.Changeset.get_field(@changeset, :quiz_questions) |> length() > 1 do %>
<label phx-click="remove_quiz_question" phx-target={@myself}> <label phx-click="remove_quiz_question" phx-target={@myself}>
<div class="cursor-pointer mt-4 w-full lg:w-auto px-6 text-center text-white py-2 rounded-md tracking-wide font-bold focus:outline-none focus:shadow-outline bg-gradient-to-tl from-supporting-red-600 to-supporting-red-400 bg-size-200 bg-pos-0 hover:bg-pos-100 transition-all duration-500"> <div class="cursor-pointer mt-4 w-full lg:w-auto px-6 text-center text-white py-2 rounded-md tracking-wide font-bold focus:outline-hidden focus:shadow-outline bg-linear-to-tl from-supporting-red-600 to-supporting-red-400 bg-size-[200%_200%] bg-position-[0%_0%] hover:bg-position-[100%_100%] transition-all duration-500">
{gettext("Remove question")} {gettext("Remove question")}
</div> </div>
<input <input
@@ -187,7 +181,7 @@
type="submit" type="submit"
phx_disable_with="Loading..." phx_disable_with="Loading..."
disabled={!@changeset.valid?} disabled={!@changeset.valid?}
class="w-full lg:w-auto px-6 text-white py-2 rounded-md tracking-wide font-bold focus:outline-none focus:shadow-outline bg-gradient-to-tl from-primary-500 to-secondary-500 bg-size-200 bg-pos-0 hover:bg-pos-100 transition-all duration-500 disabled:opacity-50 disabled:cursor-not-allowed" class="w-full lg:w-auto px-6 text-white py-2 rounded-md tracking-wide font-bold focus:outline-hidden focus:shadow-outline bg-linear-to-tl from-primary-500 to-secondary-500 bg-size-[200%_200%] bg-position-[0%_0%] hover:bg-position-[100%_100%] transition-all duration-500 disabled:opacity-50 disabled:cursor-not-allowed"
> >
{case @live_action do {case @live_action do
:new -> gettext("Create") :new -> gettext("Create")
@@ -208,7 +202,7 @@
) )
], ],
class: class:
"w-full lg:w-auto px-6 text-center text-white py-2 rounded-md tracking-wide font-bold focus:outline-none focus:shadow-outline bg-gradient-to-tl from-supporting-red-600 to-supporting-red-400 bg-size-200 bg-pos-0 hover:bg-pos-100 transition-all duration-500" "w-full lg:w-auto px-6 text-center text-white py-2 rounded-md tracking-wide font-bold focus:outline-hidden focus:shadow-outline bg-linear-to-tl from-supporting-red-600 to-supporting-red-400 bg-size-[200%_200%] bg-position-[0%_0%] hover:bg-position-[100%_100%] transition-all duration-500"
)} )}
<% end %> <% end %>
</div> </div>

2
lib/claper_web/live/stat_live/index.html.heex
View File

@@ -252,7 +252,7 @@
> >
<div <div
style={"width: #{percentage}%;"} style={"width: #{percentage}%;"}
class={"bg-gradient-to-r from-primary-500 to-secondary-500 h-full absolute left-0 transition-all rounded-l-lg #{if percentage == "100", do: "rounded-r-lg"}"} class={"bg-linear-to-r from-primary-500 to-secondary-500 h-full absolute left-0 transition-all rounded-l-lg #{if percentage == "100", do: "rounded-r-lg"}"}
> >
</div> </div>
<div class="flex space-x-3 items-center z-10 text-left"> <div class="flex space-x-3 items-center z-10 text-left">

18
lib/claper_web/live/user_settings_live/show.html.heex
View File

@@ -146,8 +146,8 @@
{gettext("Email address")} {gettext("Email address")}
</dt> </dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"> <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
<span class="flex-grow">{@current_user.email}</span> <span class="grow">{@current_user.email}</span>
<span :if={!@is_external_user} class="ml-4 flex-shrink-0"> <span :if={!@is_external_user} class="ml-4 shrink-0">
<.link <.link
patch={~p"/users/settings/edit/email"} patch={~p"/users/settings/edit/email"}
class="rounded-md font-medium text-purple-600 hover:text-purple-500" class="rounded-md font-medium text-purple-600 hover:text-purple-500"
@@ -161,8 +161,8 @@
{gettext("Password")} {gettext("Password")}
</dt> </dt>
<dd :if={!@is_external_user} class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"> <dd :if={!@is_external_user} class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
<span class="flex-grow">********</span> <span class="grow">********</span>
<span class="ml-4 flex-shrink-0"> <span class="ml-4 shrink-0">
<.link <.link
patch={~p"/users/settings/edit/password"} patch={~p"/users/settings/edit/password"}
class="rounded-md font-medium text-purple-600 hover:text-purple-500" class="rounded-md font-medium text-purple-600 hover:text-purple-500"
@@ -179,7 +179,7 @@
<%= for account <- @oidc_accounts do %> <%= for account <- @oidc_accounts do %>
<div class="text-sm text-gray-900 bg-white rounded-md py-2 px-4 shadow-base flex gap-x-2 items-center justify-start mt-2 sm:mt-0 mb-2"> <div class="text-sm text-gray-900 bg-white rounded-md py-2 px-4 shadow-base flex gap-x-2 items-center justify-start mt-2 sm:mt-0 mb-2">
<img src="/images/icons/openid.png" class="w-5" /> <img src="/images/icons/openid.png" class="w-5" />
<span class="flex-grow flex items-center gap-x-2"> <span class="grow flex items-center gap-x-2">
<span>{account.provider}</span> <span>{account.provider}</span>
<div <div
:if={account.organization} :if={account.organization}
@@ -216,10 +216,10 @@
<%= for account <- @lti_accounts do %> <%= for account <- @lti_accounts do %>
<div class="text-sm text-gray-900 bg-white rounded-md py-2 px-4 shadow-base flex gap-x-2 items-center justify-start mb-2"> <div class="text-sm text-gray-900 bg-white rounded-md py-2 px-4 shadow-base flex gap-x-2 items-center justify-start mb-2">
<img src="/images/icons/lms.png" class="w-8" /> <img src="/images/icons/lms.png" class="w-8" />
<span class="flex-grow"> <span class="grow">
LMS <span class="text-gray-500 text-xs">#{account.registration_id}</span> LMS <span class="text-gray-500 text-xs">#{account.registration_id}</span>
</span> </span>
<span :if={@allow_unlink_external_provider} class="ml-4 flex-shrink-0"> <span :if={@allow_unlink_external_provider} class="ml-4 shrink-0">
<button <button
phx-click="unlink" phx-click="unlink"
phx-value-registration_id={account.registration_id} phx-value-registration_id={account.registration_id}
@@ -251,7 +251,7 @@
{hidden_input(f, :action, name: "action", value: "update_preferences")} {hidden_input(f, :action, name: "action", value: "update_preferences")}
<ClaperWeb.Component.Input.select <ClaperWeb.Component.Input.select
form={f} form={f}
fieldClass="!w-auto" fieldClass="w-auto!"
labelClass="text-sm font-medium text-gray-500" labelClass="text-sm font-medium text-gray-500"
array={[ array={[
{"Deutsch", "de"}, {"Deutsch", "de"},
@@ -287,7 +287,7 @@
"data-confirm": "data-confirm":
gettext("All your events and files will be permanently deleted, are you sure?"), gettext("All your events and files will be permanently deleted, are you sure?"),
class: class:
"w-full lg:w-auto px-6 text-center text-white py-2 rounded-md tracking-wide font-bold focus:outline-none focus:shadow-outline bg-gradient-to-tl from-supporting-red-600 to-supporting-red-400 bg-size-200 bg-pos-0 hover:bg-pos-100 transition-all duration-500" "w-full lg:w-auto px-6 text-center text-white py-2 rounded-md tracking-wide font-bold focus:outline-hidden focus:shadow-outline bg-linear-to-tl from-supporting-red-600 to-supporting-red-400 bg-size-[200%_200%] bg-position-[0%_0%] hover:bg-position-[100%_100%] transition-all duration-500"
)} )}
</div> </div>
</dl> </dl>

2
lib/claper_web/templates/layout/_profile_dropdown.html.heex
View File

@@ -38,7 +38,7 @@
<div <div
id="profile-dropdown" id="profile-dropdown"
class="hidden origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-200 focus:outline-none" class="hidden origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black/5 divide-y divide-gray-200 focus:outline-hidden"
role="menu" role="menu"
aria-orientation="vertical" aria-orientation="vertical"
aria-labelledby="user-menu-button" aria-labelledby="user-menu-button"

2
lib/claper_web/templates/lti/launch/error.html.heex
View File

@@ -11,7 +11,7 @@
<pre class="text-gray-200 my-4 text-sm bg-gray-800 p-2 rounded-lg"><%= @msg %></pre> <pre class="text-gray-200 my-4 text-sm bg-gray-800 p-2 rounded-lg"><%= @msg %></pre>
</div> </div>
<button <button
class="mx-auto mt-8 flex justify-center text-white p-4 rounded-md tracking-wide font-bold focus:outline-none focus:shadow-outline shadow-lg bg-gradient-to-tl from-primary-500 to-secondary-500 bg-size-200 bg-pos-0 hover:bg-pos-100 transition-all duration-500" class="mx-auto mt-8 flex justify-center text-white p-4 rounded-md tracking-wide font-bold focus:outline-hidden focus:shadow-outline shadow-lg bg-linear-to-tl from-primary-500 to-secondary-500 bg-size-[200%_200%] bg-position-[0%_0%] hover:bg-position-[100%_100%] transition-all duration-500"
onclick="window.close()" onclick="window.close()"
> >
{gettext("Close")} {gettext("Close")}

2
lib/claper_web/templates/lti/registration/new.html.heex
View File

@@ -35,7 +35,7 @@
<button <button
:if={@current_user} :if={@current_user}
type="submit" type="submit"
class="flex justify-center text-white p-4 rounded-md tracking-wide font-bold focus:outline-none focus:shadow-outline shadow-lg bg-gradient-to-tl from-primary-500 to-secondary-500 bg-size-200 bg-pos-0 hover:bg-pos-100 transition-all duration-500" class="flex justify-center text-white p-4 rounded-md tracking-wide font-bold focus:outline-hidden focus:shadow-outline shadow-lg bg-linear-to-tl from-primary-500 to-secondary-500 bg-size-[200%_200%] bg-position-[0%_0%] hover:bg-position-[100%_100%] transition-all duration-500"
> >
{gettext("Add Claper")} {gettext("Add Claper")}
</button> </button>

2
lib/claper_web/templates/lti/registration/success.html.heex
View File

@@ -20,7 +20,7 @@
</div> </div>
</div> </div>
<button <button
class="mx-auto mt-8 flex justify-center text-white p-4 rounded-md tracking-wide font-bold focus:outline-none focus:shadow-outline shadow-lg bg-gradient-to-tl from-primary-500 to-secondary-500 bg-size-200 bg-pos-0 hover:bg-pos-100 transition-all duration-500" class="mx-auto mt-8 flex justify-center text-white p-4 rounded-md tracking-wide font-bold focus:outline-hidden focus:shadow-outline shadow-lg bg-linear-to-tl from-primary-500 to-secondary-500 bg-size-[200%_200%] bg-position-[0%_0%] hover:bg-position-[100%_100%] transition-all duration-500"
onclick="(window.opener || window.parent).postMessage({subject:'org.imsglobal.lti.close'}, '*');" onclick="(window.opener || window.parent).postMessage({subject:'org.imsglobal.lti.close'}, '*');"
> >
{gettext("Finish")} {gettext("Finish")}

2
lib/claper_web/templates/user_registration/new.html.heex
View File

@@ -41,7 +41,7 @@
<div> <div>
<button <button
type="submit" type="submit"
class="w-full flex justify-center text-white p-4 rounded-full tracking-wide font-bold focus:outline-none focus:shadow-outline shadow-lg bg-gradient-to-tl from-primary-500 to-secondary-500 bg-size-200 bg-pos-0 hover:bg-pos-100 transition-all duration-500" class="w-full flex justify-center text-white p-4 rounded-full tracking-wide font-bold focus:outline-hidden focus:shadow-outline shadow-lg bg-linear-to-tl from-primary-500 to-secondary-500 bg-size-[200%_200%] bg-position-[0%_0%] hover:bg-position-[100%_100%] transition-all duration-500"
> >
{gettext("Create account")} {gettext("Create account")}
</button> </button>

2
lib/claper_web/templates/user_reset_password/edit.html.heex
View File

@@ -46,7 +46,7 @@
<div> <div>
<button <button
type="submit" type="submit"
class="w-full flex justify-center text-white p-4 rounded-full tracking-wide font-bold focus:outline-none focus:shadow-outline shadow-lg bg-gradient-to-tl from-primary-500 to-secondary-500 bg-size-200 bg-pos-0 hover:bg-pos-100 transition-all duration-500" class="w-full flex justify-center text-white p-4 rounded-full tracking-wide font-bold focus:outline-hidden focus:shadow-outline shadow-lg bg-linear-to-tl from-primary-500 to-secondary-500 bg-size-[200%_200%] bg-position-[0%_0%] hover:bg-position-[100%_100%] transition-all duration-500"
> >
{gettext("Confirm new password")} {gettext("Confirm new password")}
</button> </button>

2
lib/claper_web/templates/user_reset_password/new.html.heex
View File

@@ -31,7 +31,7 @@
<div> <div>
<button <button
type="submit" type="submit"
class="w-full flex justify-center text-white p-4 rounded-full tracking-wide font-bold focus:outline-none focus:shadow-outline shadow-lg bg-gradient-to-tl from-primary-500 to-secondary-500 bg-size-200 bg-pos-0 hover:bg-pos-100 transition-all duration-500" class="w-full flex justify-center text-white p-4 rounded-full tracking-wide font-bold focus:outline-hidden focus:shadow-outline shadow-lg bg-linear-to-tl from-primary-500 to-secondary-500 bg-size-[200%_200%] bg-position-[0%_0%] hover:bg-position-[100%_100%] transition-all duration-500"
> >
{gettext("Send link to reset password")} {gettext("Send link to reset password")}
</button> </button>

4
lib/claper_web/templates/user_session/new.html.heex
View File

@@ -57,7 +57,7 @@
<div class="pt-5"> <div class="pt-5">
<button <button
type="submit" type="submit"
class="w-full flex justify-center text-white p-4 rounded-md tracking-wide font-bold focus:outline-none focus:shadow-outline shadow-lg bg-gradient-to-tl from-primary-500 to-secondary-500 bg-size-200 bg-pos-0 hover:bg-pos-100 transition-all duration-500" class="w-full flex justify-center text-white p-4 rounded-md tracking-wide font-bold focus:outline-hidden focus:shadow-outline shadow-lg bg-linear-to-tl from-primary-500 to-secondary-500 bg-size-[200%_200%] bg-position-[0%_0%] hover:bg-position-[100%_100%] transition-all duration-500"
> >
{gettext("Login")} {gettext("Login")}
</button> </button>
@@ -68,7 +68,7 @@
<%= link( <%= link(
to: ~p"/users/oidc", to: ~p"/users/oidc",
class: class:
"w-full flex justify-center items-center gap-x-2 py-2 px-4 rounded-md shadow-sm text-sm font-medium text-white border-2 border-secondary-500 hover:bg-secondary-500 hover:bg-opacity-40" "w-full flex justify-center items-center gap-x-2 py-2 px-4 rounded-md shadow-sm text-sm font-medium text-white border-2 border-secondary-500 hover:bg-secondary-500/40"
) do %> ) do %>
<img width="24" src={@oidc_logo_url} /> <img width="24" src={@oidc_logo_url} />
<span>{gettext("Login with %{provider}", provider: @oidc_provider_name)}</span> <span>{gettext("Login with %{provider}", provider: @oidc_provider_name)}</span>

4
lib/claper_web/views/components/alert_component.ex
View File

@@ -15,7 +15,7 @@ defmodule ClaperWeb.Component.Alert do
x-transition x-transition
> >
<div class="flex"> <div class="flex">
<div class="flex-shrink-0"> <div class="shrink-0">
<svg <svg
class="h-5 w-5 text-green-400" class="h-5 w-5 text-green-400"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -54,7 +54,7 @@ defmodule ClaperWeb.Component.Alert do
x-transition x-transition
> >
<div class="flex"> <div class="flex">
<div class="flex-shrink-0"> <div class="shrink-0">
<!-- Heroicon name: solid/exclamation --> <!-- Heroicon name: solid/exclamation -->
<svg <svg
class="h-5 w-5 text-supporting-red-400" class="h-5 w-5 text-supporting-red-400"

26
lib/claper_web/views/components/input_component.ex
View File

@@ -31,7 +31,7 @@ defmodule ClaperWeb.Component.Input do
minlength: @minlength, minlength: @minlength,
maxlength: @maxlength, maxlength: @maxlength,
class: class:
"#{@fieldClass} read-only:opacity-50 outline-none shadow-base focus:ring-primary-500 focus:border-primary-500 focus:ring-2 block w-full text-lg border-gray-300 rounded-md py-2 px-3" "#{@fieldClass} read-only:opacity-50 outline-hidden shadow-base focus:ring-primary-500 focus:border-primary-500 focus:ring-2 block w-full text-lg border-gray-300 rounded-md py-2 px-3"
)} )}
</div> </div>
<%= if Keyword.has_key?(@form.errors, @key) do %> <%= if Keyword.has_key?(@form.errors, @key) do %>
@@ -64,7 +64,7 @@ defmodule ClaperWeb.Component.Input do
autocomplete: @key, autocomplete: @key,
value: @value, value: @value,
class: class:
"#{@fieldClass} read-only:opacity-50 outline-none shadow-base focus:ring-primary-500 focus:border-primary-500 focus:ring-2 block w-full text-lg border-gray-300 rounded-md py-2 px-3" "#{@fieldClass} read-only:opacity-50 outline-hidden shadow-base focus:ring-primary-500 focus:border-primary-500 focus:ring-2 block w-full text-lg border-gray-300 rounded-md py-2 px-3"
)} )}
</div> </div>
<%= if Keyword.has_key?(@form.errors, @key) do %> <%= if Keyword.has_key?(@form.errors, @key) do %>
@@ -93,7 +93,7 @@ defmodule ClaperWeb.Component.Input do
placeholder: @placeholder, placeholder: @placeholder,
autocomplete: @key, autocomplete: @key,
class: class:
"#{@fieldClass} outline-none shadow-base focus:ring-primary-500 focus:border-primary-500 block w-full text-lg border-gray-300 rounded-md py-2 px-3" "#{@fieldClass} outline-hidden shadow-base focus:ring-primary-500 focus:border-primary-500 block w-full text-lg border-gray-300 rounded-md py-2 px-3"
)} )}
</div> </div>
<%= if Keyword.has_key?(@form.errors, @key) do %> <%= if Keyword.has_key?(@form.errors, @key) do %>
@@ -115,7 +115,7 @@ defmodule ClaperWeb.Component.Input do
disabled={@disabled} disabled={@disabled}
phx-value-key={@key} phx-value-key={@key}
type="button" type="button"
class="group relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center rounded-full" class="group relative inline-flex h-5 w-10 shrink-0 cursor-pointer items-center justify-center rounded-full"
role="switch" role="switch"
aria-checked="false" aria-checked="false"
phx-key={@shortcut} phx-key={@shortcut}
@@ -150,7 +150,7 @@ defmodule ClaperWeb.Component.Input do
disabled={@disabled} disabled={@disabled}
phx-value-key={@key} phx-value-key={@key}
type="button" type="button"
class={"py-2 px-2 rounded #{if @checked, do: "bg-primary-500 hover:bg-primary-600 text-white", else: "bg-gray-200 hover:bg-gray-300 text-gray-600"} flex justify-between items-center w-full gap-x-2 disabled:opacity-50 disabled:cursor-not-allowed transition ease-in-out duration-300"} class={"py-2 px-2 rounded-sm #{if @checked, do: "bg-primary-500 hover:bg-primary-600 text-white", else: "bg-gray-200 hover:bg-gray-300 text-gray-600"} flex justify-between items-center w-full gap-x-2 disabled:opacity-50 disabled:cursor-not-allowed transition ease-in-out duration-300"}
role="switch" role="switch"
aria-checked="false" aria-checked="false"
phx-key={@shortcut} phx-key={@shortcut}
@@ -198,10 +198,12 @@ defmodule ClaperWeb.Component.Input do
|> assign_new(:autofocus, fn -> false end) |> assign_new(:autofocus, fn -> false end)
|> assign_new(:placeholder, fn -> false end) |> assign_new(:placeholder, fn -> false end)
|> assign_new(:readonly, fn -> false end) |> assign_new(:readonly, fn -> false end)
|> assign_new(:labelClass, fn -> "text-gray-700" end)
|> assign_new(:fieldClass, fn -> "bg-white" end)
~H""" ~H"""
<div class="relative"> <div class="relative">
{label(@form, @key, @name, class: "block text-sm font-medium text-gray-700")} {label(@form, @key, @name, class: "block text-sm font-medium #{@labelClass}")}
<div class="mt-1 relative"> <div class="mt-1 relative">
<img <img
class="icon absolute transition-all top-2.5 left-2 duration-100 h-6" class="icon absolute transition-all top-2.5 left-2 duration-100 h-6"
@@ -217,7 +219,7 @@ defmodule ClaperWeb.Component.Input do
minlength: 5, minlength: 5,
maxlength: 10, maxlength: 10,
class: class:
"read-only:opacity-50 outline-none shadow-base focus:ring-primary-500 focus:border-primary-500 block w-full text-lg border-gray-300 rounded-md py-2 pr-3 pl-9 uppercase" "#{@fieldClass} read-only:opacity-50 outline-hidden shadow-base focus:ring-primary-500 focus:border-primary-500 block w-full text-lg border-gray-300 rounded-md py-2 pr-3 pl-9 uppercase"
)} )}
</div> </div>
<%= if Keyword.has_key?(@form.errors, @key) do %> <%= if Keyword.has_key?(@form.errors, @key) do %>
@@ -234,11 +236,13 @@ defmodule ClaperWeb.Component.Input do
|> assign_new(:autofocus, fn -> false end) |> assign_new(:autofocus, fn -> false end)
|> assign_new(:placeholder, fn -> false end) |> assign_new(:placeholder, fn -> false end)
|> assign_new(:readonly, fn -> false end) |> assign_new(:readonly, fn -> false end)
|> assign_new(:labelClass, fn -> "text-gray-700" end)
|> assign_new(:fieldClass, fn -> "bg-white" end)
~H""" ~H"""
<div> <div>
<div class="relative" id="date" phx-hook="Pickr"> <div class="relative" id="date" phx-hook="Pickr">
{label(@form, @key, @name, class: "block text-sm font-medium text-gray-700")} {label(@form, @key, @name, class: "block text-sm font-medium #{@labelClass}")}
<div class="mt-1 relative"> <div class="mt-1 relative">
{hidden_input(@form, @key)} {hidden_input(@form, @key)}
{text_input(@form, :local_date, {text_input(@form, :local_date,
@@ -246,7 +250,7 @@ defmodule ClaperWeb.Component.Input do
placeholder: @placeholder, placeholder: @placeholder,
autocomplete: false, autocomplete: false,
class: class:
"outline-none shadow-base focus:ring-primary-500 focus:border-primary-500 block w-full text-lg border-gray-300 rounded-md py-2 px-3 read-only:opacity-50" "#{@fieldClass} outline-hidden shadow-base focus:ring-primary-500 focus:border-primary-500 block w-full text-lg border-gray-300 rounded-md py-2 px-3 read-only:opacity-50"
)} )}
</div> </div>
@@ -281,7 +285,7 @@ defmodule ClaperWeb.Component.Input do
autocomplete: @key, autocomplete: @key,
value: @value, value: @value,
class: class:
"#{@fieldClass} read-only:opacity-50 shadow-base block w-full text-lg focus:ring-primary-500 focus:ring-2 outline-none rounded-md py-2 px-3", "#{@fieldClass} read-only:opacity-50 shadow-base block w-full text-lg focus:ring-primary-500 focus:ring-2 outline-hidden rounded-md py-2 px-3",
"x-model": "input", "x-model": "input",
"x-ref": "input" "x-ref": "input"
)} )}
@@ -312,7 +316,7 @@ defmodule ClaperWeb.Component.Input do
autofocus: @autofocus, autofocus: @autofocus,
placeholder: @placeholder, placeholder: @placeholder,
class: class:
"#{@fieldClass} shadow-base block w-full text-lg focus:ring-primary-500 focus:ring-2 outline-none rounded-md py-2 px-3", "#{@fieldClass} shadow-base block w-full text-lg focus:ring-primary-500 focus:ring-2 outline-hidden rounded-md py-2 px-3",
"x-model": "input", "x-model": "input",
"x-ref": "input" "x-ref": "input"
)} )}

4
mix.exs
View File

@@ -116,7 +116,8 @@ defmodule Claper.MixProject do
{:oidcc, "~> 3.5"}, {:oidcc, "~> 3.5"},
{:oban, "~> 2.19"}, {:oban, "~> 2.19"},
{:mua, "~> 0.2"}, {:mua, "~> 0.2"},
{:mail, "~> 0.5"} {:mail, "~> 0.5"},
{:tailwind, "~> 0.3", runtime: Mix.env() == :dev}
] ]
end end
@@ -134,6 +135,7 @@ defmodule Claper.MixProject do
test: ["ecto.create --quiet", "ecto.migrate --quiet", "test"], test: ["ecto.create --quiet", "ecto.migrate --quiet", "test"],
"assets.deploy": [ "assets.deploy": [
"cmd --cd assets npm install && npm run deploy", "cmd --cd assets npm install && npm run deploy",
"tailwind default --minify",
"esbuild default --minify", "esbuild default --minify",
"sass default --no-source-map --style=compressed", "sass default --no-source-map --style=compressed",
"phx.digest" "phx.digest"

1
mix.lock
View File

@@ -79,6 +79,7 @@
"stripity_stripe": {:hex, :stripity_stripe, "2.13.0", "b9ea806fcf46e85232b75f2145c34770b17faa44c59cdd13ff493aaa6e84b4a9", [:mix], [{:hackney, "~> 1.15", [hex: :hackney, repo: "hexpm", optional: false]}, {:jason, "~> 1.1", [hex: :jason, repo: "hexpm", optional: false]}, {:plug, "~> 1.0", [hex: :plug, repo: "hexpm", optional: true]}, {:uri_query, "~> 0.1.2", [hex: :uri_query, repo: "hexpm", optional: false]}], "hexpm", "d6931ed9816552320f95428fd997edf15e99a913ca78fc4342d5516b98f42476"}, "stripity_stripe": {:hex, :stripity_stripe, "2.13.0", "b9ea806fcf46e85232b75f2145c34770b17faa44c59cdd13ff493aaa6e84b4a9", [:mix], [{:hackney, "~> 1.15", [hex: :hackney, repo: "hexpm", optional: false]}, {:jason, "~> 1.1", [hex: :jason, repo: "hexpm", optional: false]}, {:plug, "~> 1.0", [hex: :plug, repo: "hexpm", optional: true]}, {:uri_query, "~> 0.1.2", [hex: :uri_query, repo: "hexpm", optional: false]}], "hexpm", "d6931ed9816552320f95428fd997edf15e99a913ca78fc4342d5516b98f42476"},
"sweet_xml": {:hex, :sweet_xml, "0.7.5", "803a563113981aaac202a1dbd39771562d0ad31004ddbfc9b5090bdcd5605277", [:mix], [], "hexpm", "193b28a9b12891cae351d81a0cead165ffe67df1b73fe5866d10629f4faefb12"}, "sweet_xml": {:hex, :sweet_xml, "0.7.5", "803a563113981aaac202a1dbd39771562d0ad31004ddbfc9b5090bdcd5605277", [:mix], [], "hexpm", "193b28a9b12891cae351d81a0cead165ffe67df1b73fe5866d10629f4faefb12"},
"swoosh": {:hex, :swoosh, "1.19.3", "02ad4455939f502386e4e1443d4de94c514995fd0e51b3cafffd6bd270ffe81c", [:mix], [{:bandit, ">= 1.0.0", [hex: :bandit, repo: "hexpm", optional: true]}, {:cowboy, "~> 1.1 or ~> 2.4", [hex: :cowboy, repo: "hexpm", optional: true]}, {:ex_aws, "~> 2.1", [hex: :ex_aws, repo: "hexpm", optional: true]}, {:finch, "~> 0.6", [hex: :finch, repo: "hexpm", optional: true]}, {:gen_smtp, "~> 0.13 or ~> 1.0", [hex: :gen_smtp, repo: "hexpm", optional: true]}, {:hackney, "~> 1.9", [hex: :hackney, repo: "hexpm", optional: true]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}, {:mail, "~> 0.2", [hex: :mail, repo: "hexpm", optional: true]}, {:mime, "~> 1.1 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:mua, "~> 0.2.3", [hex: :mua, repo: "hexpm", optional: true]}, {:multipart, "~> 0.4", [hex: :multipart, repo: "hexpm", optional: true]}, {:plug, "~> 1.9", [hex: :plug, repo: "hexpm", optional: true]}, {:plug_cowboy, ">= 1.0.0", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:req, "~> 0.5.10 or ~> 0.6 or ~> 1.0", [hex: :req, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "04a10f8496786b744b84130e3510eb53ca51e769c39511b65023bdf4136b732f"}, "swoosh": {:hex, :swoosh, "1.19.3", "02ad4455939f502386e4e1443d4de94c514995fd0e51b3cafffd6bd270ffe81c", [:mix], [{:bandit, ">= 1.0.0", [hex: :bandit, repo: "hexpm", optional: true]}, {:cowboy, "~> 1.1 or ~> 2.4", [hex: :cowboy, repo: "hexpm", optional: true]}, {:ex_aws, "~> 2.1", [hex: :ex_aws, repo: "hexpm", optional: true]}, {:finch, "~> 0.6", [hex: :finch, repo: "hexpm", optional: true]}, {:gen_smtp, "~> 0.13 or ~> 1.0", [hex: :gen_smtp, repo: "hexpm", optional: true]}, {:hackney, "~> 1.9", [hex: :hackney, repo: "hexpm", optional: true]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}, {:mail, "~> 0.2", [hex: :mail, repo: "hexpm", optional: true]}, {:mime, "~> 1.1 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:mua, "~> 0.2.3", [hex: :mua, repo: "hexpm", optional: true]}, {:multipart, "~> 0.4", [hex: :multipart, repo: "hexpm", optional: true]}, {:plug, "~> 1.9", [hex: :plug, repo: "hexpm", optional: true]}, {:plug_cowboy, ">= 1.0.0", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:req, "~> 0.5.10 or ~> 0.6 or ~> 1.0", [hex: :req, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "04a10f8496786b744b84130e3510eb53ca51e769c39511b65023bdf4136b732f"},
"tailwind": {:hex, :tailwind, "0.3.1", "a89d2835c580748c7a975ad7dd3f2ea5e63216dc16d44f9df492fbd12c094bed", [:mix], [], "hexpm", "98a45febdf4a87bc26682e1171acdedd6317d0919953c353fcd1b4f9f4b676a2"},
"telemetry": {:hex, :telemetry, "1.3.0", "fedebbae410d715cf8e7062c96a1ef32ec22e764197f70cda73d82778d61e7a2", [:rebar3], [], "hexpm", "7015fc8919dbe63764f4b4b87a95b7c0996bd539e0d499be6ec9d7f3875b79e6"}, "telemetry": {:hex, :telemetry, "1.3.0", "fedebbae410d715cf8e7062c96a1ef32ec22e764197f70cda73d82778d61e7a2", [:rebar3], [], "hexpm", "7015fc8919dbe63764f4b4b87a95b7c0996bd539e0d499be6ec9d7f3875b79e6"},
"telemetry_metrics": {:hex, :telemetry_metrics, "1.1.0", "5bd5f3b5637e0abea0426b947e3ce5dd304f8b3bc6617039e2b5a008adc02f8f", [:mix], [{:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "e7b79e8ddfde70adb6db8a6623d1778ec66401f366e9a8f5dd0955c56bc8ce67"}, "telemetry_metrics": {:hex, :telemetry_metrics, "1.1.0", "5bd5f3b5637e0abea0426b947e3ce5dd304f8b3bc6617039e2b5a008adc02f8f", [:mix], [{:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "e7b79e8ddfde70adb6db8a6623d1778ec66401f366e9a8f5dd0955c56bc8ce67"},
"telemetry_poller": {:hex, :telemetry_poller, "1.2.0", "ba82e333215aed9dd2096f93bd1d13ae89d249f82760fcada0850ba33bac154b", [:rebar3], [{:telemetry, "~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "7216e21a6c326eb9aa44328028c34e9fd348fb53667ca837be59d0aa2a0156e8"}, "telemetry_poller": {:hex, :telemetry_poller, "1.2.0", "ba82e333215aed9dd2096f93bd1d13ae89d249f82760fcada0850ba33bac154b", [:rebar3], [{:telemetry, "~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "7216e21a6c326eb9aa44328028c34e9fd348fb53667ca837be59d0aa2a0156e8"},

1
phoenix_static_buildpack.config
View File

@@ -1 +0,0 @@
node_version=14.19.0

6
reset-db.sh
View File

@@ -1,6 +0,0 @@
docker stop claper-db
docker rm claper-db
docker run -p 5432:5432 -e POSTGRES_PASSWORD=claper -e POSTGRES_USER=claper -e POSTGRES_DB=claper --name claper-db -d postgres:15
sleep 5
mix ecto.migrate
mix run priv/repo/seeds.exs