diff --git a/.gitignore b/.gitignore index 7ab4c729..f0a1e888 100644 --- a/.gitignore +++ b/.gitignore @@ -40,3 +40,4 @@ npm-debug.log .env .DS_Store scratchpad.md +/scratchpad/ diff --git a/assets/css/app.css b/assets/css/app.css index 5dccbd42..e499401e 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -2,4 +2,30 @@ @import 'tailwindcss/components'; @import 'tailwindcss/utilities'; +@import './satoshi'; + /* This file is for your main application CSS */ +[x-cloak] { + display: none !important; +} + +@layer base { + body { + @apply relative z-1 bg-whiten font-satoshi text-base font-normal text-body; + } +} + +@layer components { +} + +@layer utilities { + /* Chrome, Safari and Opera */ + .no-scrollbar::-webkit-scrollbar { + display: none; + } + + .no-scrollbar { + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ + } +} diff --git a/assets/css/satoshi.css b/assets/css/satoshi.css new file mode 100644 index 00000000..272640a4 --- /dev/null +++ b/assets/css/satoshi.css @@ -0,0 +1,102 @@ +/** + * @license + * + * Font Family: Satoshi + * Designed by: Deni Anggara + * URL: https://www.fontshare.com/fonts/satoshi + * © 2023 Indian Type Foundry + * + * Font Styles: + * Satoshi Light + * Satoshi Light Italic + * Satoshi Regular + * Satoshi Italic + * Satoshi Medium + * Satoshi Medium Italic + * Satoshi Bold + * Satoshi Bold Italic + * Satoshi Black + * Satoshi Black Italic + * +*/ + +@font-face { + font-family: 'Satoshi'; + src: url('/fonts/satoshi/Satoshi-Light.woff2'), url('/fonts/satoshi/Satoshi-Light.woff'), + url('/fonts/satoshi/Satoshi-Light.ttf'); + font-weight: 300; + font-display: swap; + font-style: normal; +} + +@font-face { + font-family: 'Satoshi'; + src: url('/fonts/satoshi/Satoshi-LightItalic.woff2'), + url('/fonts/satoshi/Satoshi-LightItalic.woff'), url('/fonts/satoshi/Satoshi-LightItalic.ttf'); + font-weight: 300; + font-display: swap; + font-style: italic; +} + +@font-face { + font-family: 'Satoshi'; + src: url('/fonts/satoshi/Satoshi-Regular.woff2'), url('/fonts/satoshi/Satoshi-Regular.woff'), + url('/fonts/satoshi/Satoshi-Regular.ttf'); + font-weight: 400; + font-display: swap; + font-style: normal; +} + +@font-face { + font-family: 'Satoshi'; + src: url('/fonts/satoshi/Satoshi-Italic.woff2'), url('/fonts/satoshi/Satoshi-Italic.woff'), + url('/fonts/satoshi/Satoshi-Italic.ttf'); + font-weight: 400; + font-display: swap; + font-style: italic; +} + +@font-face { + font-family: 'Satoshi'; + src: url('/fonts/satoshi/Satoshi-Medium.woff2'), url('/fonts/satoshi/Satoshi-Medium.woff'), + url('/fonts/satoshi/Satoshi-Medium.ttf'); + font-weight: 500; + font-display: swap; + font-style: normal; +} + +@font-face { + font-family: 'Satoshi'; + src: url('/fonts/satoshi/Satoshi-MediumItalic.woff2'), + url('/fonts/satoshi/Satoshi-MediumItalic.woff'), url('/fonts/satoshi/Satoshi-MediumItalic.ttf'); + font-weight: 500; + font-display: swap; + font-style: italic; +} + +@font-face { + font-family: 'Satoshi'; + src: url('/fonts/satoshi/Satoshi-Bold.woff2'), url('/fonts/satoshi/Satoshi-Bold.woff'), + url('/fonts/satoshi/Satoshi-Bold.ttf'); + font-weight: 700; + font-display: swap; + font-style: normal; +} + +@font-face { + font-family: 'Satoshi'; + src: url('/fonts/satoshi/Satoshi-BoldItalic.woff2'), url('/fonts/satoshi/Satoshi-BoldItalic.woff'), + url('/fonts/satoshi/Satoshi-BoldItalic.ttf'); + font-weight: 700; + font-display: swap; + font-style: italic; +} + +@font-face { + font-family: 'Satoshi'; + src: url('/fonts/satoshi/Satoshi-BlackItalic.woff2'), + url('/fonts/satoshi/Satoshi-BlackItalic.woff'), url('/fonts/satoshi/Satoshi-BlackItalic.ttf'); + font-weight: 900; + font-display: swap; + font-style: italic; +} diff --git a/assets/js/app.js b/assets/js/app.js index 4208c6d7..cc1f5fc6 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -21,10 +21,21 @@ import 'phoenix_html' import { Socket } from 'phoenix' import { LiveSocket } from 'phoenix_live_view' import topbar from '../vendor/topbar' +import Alpine from 'alpinejs' + +window.Alpine = Alpine +Alpine.start() let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute('content') let liveSocket = new LiveSocket('/live', Socket, { - params: { _csrf_token: csrfToken } + params: { _csrf_token: csrfToken }, + dom: { + onBeforeElUpdated(from, to) { + if (from._x_dataStack) { + window.Alpine.clone(from, to) + } + } + } }) // Show progress bar on live navigation and form submits diff --git a/assets/package.json b/assets/package.json index 9cd9d2b0..46118dd7 100644 --- a/assets/package.json +++ b/assets/package.json @@ -1,3 +1,6 @@ { - "description": "Use this one for actual JS deps used in-app" + "description": "Use this one for actual JS deps used in-app", + "dependencies": { + "alpinejs": "^3.13.5" + } } diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js index a360ecc8..08f407f7 100644 --- a/assets/tailwind.config.js +++ b/assets/tailwind.config.js @@ -2,15 +2,288 @@ // https://tailwindcss.com/docs/configuration const plugin = require('tailwindcss/plugin') +const defaultTheme = require('tailwindcss/defaultTheme') const fs = require('fs') const path = require('path') module.exports = { content: ['./js/**/*.js', '../lib/pinchflat_web.ex', '../lib/pinchflat_web/**/*.*ex'], + darkMode: 'class', theme: { + fontFamily: { + satoshi: ['Satoshi', 'sans-serif'] + }, + screens: { + '2xsm': '375px', + xsm: '425px', + '3xl': '2000px', + ...defaultTheme.screens + }, extend: { colors: { - brand: '#FD4F00' + current: 'currentColor', + transparent: 'transparent', + white: '#FFFFFF', + black: '#1C2434', + 'black-2': '#010101', + body: '#64748B', + bodydark: '#AEB7C0', + bodydark1: '#DEE4EE', + bodydark2: '#8A99AF', + primary: '#3C50E0', + secondary: '#80CAEE', + stroke: '#E2E8F0', + gray: '#EFF4FB', + graydark: '#333A48', + 'gray-2': '#F7F9FC', + 'gray-3': '#FAFAFA', + whiten: '#F1F5F9', + whiter: '#F5F7FD', + boxdark: '#24303F', + 'boxdark-2': '#1A222C', + strokedark: '#2E3A47', + 'form-strokedark': '#3d4d60', + 'form-input': '#1d2a39', + 'meta-1': '#DC3545', + 'meta-2': '#EFF2F7', + 'meta-3': '#10B981', + 'meta-4': '#313D4A', + 'meta-5': '#259AE6', + 'meta-6': '#FFBA00', + 'meta-7': '#FF6766', + 'meta-8': '#F0950C', + 'meta-9': '#E5E7EB', + success: '#219653', + danger: '#D34053', + warning: '#FFA70B' + }, + fontSize: { + 'title-xxl': ['44px', '55px'], + 'title-xl': ['36px', '45px'], + 'title-xl2': ['33px', '45px'], + 'title-lg': ['28px', '35px'], + 'title-md': ['24px', '30px'], + 'title-md2': ['26px', '30px'], + 'title-sm': ['20px', '26px'], + 'title-xsm': ['18px', '24px'] + }, + spacing: { + 4.5: '1.125rem', + 5.5: '1.375rem', + 6.5: '1.625rem', + 7.5: '1.875rem', + 8.5: '2.125rem', + 9.5: '2.375rem', + 10.5: '2.625rem', + 11: '2.75rem', + 11.5: '2.875rem', + 12.5: '3.125rem', + 13: '3.25rem', + 13.5: '3.375rem', + 14: '3.5rem', + 14.5: '3.625rem', + 15: '3.75rem', + 15.5: '3.875rem', + 16: '4rem', + 16.5: '4.125rem', + 17: '4.25rem', + 17.5: '4.375rem', + 18: '4.5rem', + 18.5: '4.625rem', + 19: '4.75rem', + 19.5: '4.875rem', + 21: '5.25rem', + 21.5: '5.375rem', + 22: '5.5rem', + 22.5: '5.625rem', + 24.5: '6.125rem', + 25: '6.25rem', + 25.5: '6.375rem', + 26: '6.5rem', + 27: '6.75rem', + 27.5: '6.875rem', + 29: '7.25rem', + 29.5: '7.375rem', + 30: '7.5rem', + 31: '7.75rem', + 32.5: '8.125rem', + 34: '8.5rem', + 34.5: '8.625rem', + 35: '8.75rem', + 36.5: '9.125rem', + 37.5: '9.375rem', + 39: '9.75rem', + 39.5: '9.875rem', + 40: '10rem', + 42.5: '10.625rem', + 44: '11rem', + 45: '11.25rem', + 46: '11.5rem', + 47.5: '11.875rem', + 49: '12.25rem', + 50: '12.5rem', + 52: '13rem', + 52.5: '13.125rem', + 54: '13.5rem', + 54.5: '13.625rem', + 55: '13.75rem', + 55.5: '13.875rem', + 59: '14.75rem', + 60: '15rem', + 62.5: '15.625rem', + 65: '16.25rem', + 67: '16.75rem', + 67.5: '16.875rem', + 70: '17.5rem', + 72.5: '18.125rem', + 73: '18.25rem', + 75: '18.75rem', + 90: '22.5rem', + 94: '23.5rem', + 95: '23.75rem', + 100: '25rem', + 115: '28.75rem', + 125: '31.25rem', + 132.5: '33.125rem', + 150: '37.5rem', + 171.5: '42.875rem', + 180: '45rem', + 187.5: '46.875rem', + 203: '50.75rem', + 230: '57.5rem', + 242.5: '60.625rem' + }, + maxWidth: { + 2.5: '0.625rem', + 3: '0.75rem', + 4: '1rem', + 11: '2.75rem', + 13: '3.25rem', + 14: '3.5rem', + 15: '3.75rem', + 22.5: '5.625rem', + 25: '6.25rem', + 30: '7.5rem', + 34: '8.5rem', + 35: '8.75rem', + 40: '10rem', + 42.5: '10.625rem', + 44: '11rem', + 45: '11.25rem', + 60: '15rem', + 70: '17.5rem', + 90: '22.5rem', + 94: '23.5rem', + 125: '31.25rem', + 132.5: '33.125rem', + 142.5: '35.625rem', + 150: '37.5rem', + 180: '45rem', + 203: '50.75rem', + 230: '57.5rem', + 242.5: '60.625rem', + 270: '67.5rem', + 280: '70rem', + 292.5: '73.125rem' + }, + maxHeight: { + 35: '8.75rem', + 70: '17.5rem', + 90: '22.5rem', + 550: '34.375rem', + 300: '18.75rem' + }, + minWidth: { + 22.5: '5.625rem', + 42.5: '10.625rem', + 47.5: '11.875rem', + 75: '18.75rem' + }, + zIndex: { + 999999: '999999', + 99999: '99999', + 9999: '9999', + 999: '999', + 99: '99', + 9: '9', + 1: '1' + }, + opacity: { + 65: '.65' + }, + transitionProperty: { width: 'width', stroke: 'stroke' }, + borderWidth: { + 6: '6px' + }, + boxShadow: { + default: '0px 8px 13px -3px rgba(0, 0, 0, 0.07)', + card: '0px 1px 3px rgba(0, 0, 0, 0.12)', + 'card-2': '0px 1px 2px rgba(0, 0, 0, 0.05)', + switcher: + '0px 2px 4px rgba(0, 0, 0, 0.2), inset 0px 2px 2px #FFFFFF, inset 0px -1px 1px rgba(0, 0, 0, 0.1)', + 'switch-1': '0px 0px 5px rgba(0, 0, 0, 0.15)', + 1: '0px 1px 3px rgba(0, 0, 0, 0.08)', + 2: '0px 1px 4px rgba(0, 0, 0, 0.12)', + 3: '0px 1px 5px rgba(0, 0, 0, 0.14)', + 4: '0px 4px 10px rgba(0, 0, 0, 0.12)', + 5: '0px 1px 1px rgba(0, 0, 0, 0.15)', + 6: '0px 3px 15px rgba(0, 0, 0, 0.1)', + 7: '-5px 0 0 #313D4A, 5px 0 0 #313D4A', + 8: '1px 0 0 #313D4A, -1px 0 0 #313D4A, 0 1px 0 #313D4A, 0 -1px 0 #313D4A, 0 3px 13px rgb(0 0 0 / 8%)' + }, + dropShadow: { + 1: '0px 1px 0px #E2E8F0', + 2: '0px 1px 4px rgba(0, 0, 0, 0.12)' + }, + keyframes: { + linspin: { + '100%': { transform: 'rotate(360deg)' } + }, + easespin: { + '12.5%': { transform: 'rotate(135deg)' }, + '25%': { transform: 'rotate(270deg)' }, + '37.5%': { transform: 'rotate(405deg)' }, + '50%': { transform: 'rotate(540deg)' }, + '62.5%': { transform: 'rotate(675deg)' }, + '75%': { transform: 'rotate(810deg)' }, + '87.5%': { transform: 'rotate(945deg)' }, + '100%': { transform: 'rotate(1080deg)' } + }, + 'left-spin': { + '0%': { transform: 'rotate(130deg)' }, + '50%': { transform: 'rotate(-5deg)' }, + '100%': { transform: 'rotate(130deg)' } + }, + 'right-spin': { + '0%': { transform: 'rotate(-130deg)' }, + '50%': { transform: 'rotate(5deg)' }, + '100%': { transform: 'rotate(-130deg)' } + }, + rotating: { + '0%, 100%': { transform: 'rotate(360deg)' }, + '50%': { transform: 'rotate(0deg)' } + }, + topbottom: { + '0%, 100%': { transform: 'translate3d(0, -100%, 0)' }, + '50%': { transform: 'translate3d(0, 0, 0)' } + }, + bottomtop: { + '0%, 100%': { transform: 'translate3d(0, 0, 0)' }, + '50%': { transform: 'translate3d(0, -100%, 0)' } + } + }, + animation: { + linspin: 'linspin 1568.2353ms linear infinite', + easespin: 'easespin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both', + 'left-spin': 'left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both', + 'right-spin': 'right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both', + 'ping-once': 'ping 5s cubic-bezier(0, 0, 0.2, 1)', + rotating: 'rotating 30s linear infinite', + topbottom: 'topbottom 60s infinite alternate linear', + bottomtop: 'bottomtop 60s infinite alternate linear', + 'spin-1.5': 'spin 1.5s linear infinite', + 'spin-2': 'spin 2s linear infinite', + 'spin-3': 'spin 3s linear infinite' } } }, diff --git a/assets/yarn.lock b/assets/yarn.lock index fb57ccd1..5d8ae6d9 100644 --- a/assets/yarn.lock +++ b/assets/yarn.lock @@ -2,3 +2,21 @@ # yarn lockfile v1 +"@vue/reactivity@~3.1.1": + version "3.1.5" + resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.1.5.tgz#dbec4d9557f7c8f25c2635db1e23a78a729eb991" + integrity sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg== + dependencies: + "@vue/shared" "3.1.5" + +"@vue/shared@3.1.5": + version "3.1.5" + resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.1.5.tgz#74ee3aad995d0a3996a6bb9533d4d280514ede03" + integrity sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA== + +alpinejs@^3.13.5: + version "3.13.5" + resolved "https://registry.yarnpkg.com/alpinejs/-/alpinejs-3.13.5.tgz#c06f067e847a295085b4c6f76c42a6a35499d953" + integrity sha512-1d2XeNGN+Zn7j4mUAKXtAgdc4/rLeadyTMWeJGXF5DzwawPBxwTiBhFFm6w/Ei8eJxUZeyNWWSD9zknfdz1kEw== + dependencies: + "@vue/reactivity" "~3.1.1" diff --git a/lib/pinchflat/profiles/media_profile.ex b/lib/pinchflat/profiles/media_profile.ex index 5e4a3747..0d7fad9d 100644 --- a/lib/pinchflat/profiles/media_profile.ex +++ b/lib/pinchflat/profiles/media_profile.ex @@ -27,7 +27,8 @@ defmodule Pinchflat.Profiles.MediaProfile do schema "media_profiles" do field :name, :string - field :output_path_template, :string + + field :output_path_template, :string, default: "/{{ uploader }}/{{ title }}.{{ ext }}" field :download_subs, :boolean, default: true field :download_auto_subs, :boolean, default: true diff --git a/lib/pinchflat_web.ex b/lib/pinchflat_web.ex index 036a9b15..05187a18 100644 --- a/lib/pinchflat_web.ex +++ b/lib/pinchflat_web.ex @@ -84,8 +84,10 @@ defmodule PinchflatWeb do # HTML escaping functionality import Phoenix.HTML # Core UI components and translation - import PinchflatWeb.CoreComponents import PinchflatWeb.Gettext + import PinchflatWeb.CoreComponents + import PinchflatWeb.CustomComponents.TableComponents + import PinchflatWeb.CustomComponents.ButtonComponents # Shortcut for generating JS commands alias Phoenix.LiveView.JS diff --git a/lib/pinchflat_web/components/core_components.ex b/lib/pinchflat_web/components/core_components.ex index c20f3ca1..cc655403 100644 --- a/lib/pinchflat_web/components/core_components.ex +++ b/lib/pinchflat_web/components/core_components.ex @@ -201,46 +201,14 @@ defmodule PinchflatWeb.CoreComponents do def simple_form(assigns) do ~H""" <.form :let={f} for={@for} as={@as} {@rest}> -
- <%= render_slot(@inner_block, f) %> -
- <%= render_slot(action, f) %> -
+ <%= render_slot(@inner_block, f) %> +
+ <%= render_slot(action, f) %>
""" end - @doc """ - Renders a button. - - ## Examples - - <.button>Send! - <.button phx-click="go" class="ml-2">Send! - """ - attr :type, :string, default: nil - attr :class, :string, default: nil - attr :rest, :global, include: ~w(disabled form name value) - - slot :inner_block, required: true - - def button(assigns) do - ~H""" - - """ - end - @doc """ Renders an input with label and error messages. @@ -270,11 +238,12 @@ defmodule PinchflatWeb.CoreComponents do attr :name, :any attr :label, :string, default: nil attr :value, :any + attr :help, :string, default: nil attr :type, :string, default: "text", values: ~w(checkbox color date datetime-local email file hidden month number password - range radio search select tel text textarea time url week) + toggle range radio search select tel text textarea time url week) attr :field, Phoenix.HTML.FormField, doc: "a form field struct retrieved from the form, for example: @form[:email]" @@ -308,7 +277,7 @@ defmodule PinchflatWeb.CoreComponents do ~H"""
-
""" end + def input(%{type: "toggle"} = assigns) do + assigns = + assign_new(assigns, :checked, fn -> + Phoenix.HTML.Form.normalize_value("checkbox", assigns[:value]) + end) + + ~H""" +
+ <.label for={@id}><%= @label %> +
+ + +
+
+
+
+
+
+ <.help :if={@help}><%= @help %> + <.error :for={msg <- @errors}><%= msg %> +
+
+ """ + end + def input(%{type: "select"} = assigns) do ~H"""
@@ -333,13 +340,17 @@ defmodule PinchflatWeb.CoreComponents do + <.help :if={@help}><%= @help %> <.error :for={msg <- @errors}><%= msg %>
""" @@ -360,6 +371,7 @@ defmodule PinchflatWeb.CoreComponents do ]} {@rest} ><%= Phoenix.HTML.Form.normalize_value("textarea", @value) %> + <.help :if={@help}><%= @help %> <.error :for={msg <- @errors}><%= msg %>
""" @@ -376,18 +388,32 @@ defmodule PinchflatWeb.CoreComponents do id={@id} value={Phoenix.HTML.Form.normalize_value(@type, @value)} class={[ - "mt-2 block w-full rounded-lg text-zinc-900 focus:ring-0 sm:text-sm sm:leading-6", - "phx-no-feedback:border-zinc-300 phx-no-feedback:focus:border-zinc-400", - @errors == [] && "border-zinc-300 focus:border-zinc-400", + "w-full rounded-lg border-[1.5px] border-stroke bg-transparent px-5 py-3 font-normal text-black", + "outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-whiter", + "dark:border-form-strokedark dark:bg-form-input dark:text-white dark:focus:border-primary", @errors != [] && "border-rose-400 focus:border-rose-400" ]} {@rest} /> + <.help :if={@help}><%= @help %> <.error :for={msg <- @errors}><%= msg %> """ end + @doc """ + Renders help text. + """ + slot :inner_block, required: true + + def help(assigns) do + ~H""" +

+ <%= render_slot(@inner_block) %> +

+ """ + end + @doc """ Renders a label. """ @@ -396,7 +422,7 @@ defmodule PinchflatWeb.CoreComponents do def label(assigns) do ~H""" -