Reaproche
/
server
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

petal init

This commit is contained in:
Rodolphe Marbot 2022-06-03 14:50:06 +02:00
parent 81a9f68a22
commit 978de52a09
11 changed files with 103 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -33,3 +33,4 @@ npm-debug.log
/assets/node_modules/
/.idea/
reaproche.iml
assets/pnpm-lock.yaml

11
assets/css/app.css
View File

@ -1,4 +1,13 @@
/* This file is for your main application CSS */
/* Import tailwind - with postcss-import installed */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
/* custom styles - put after base imports! */
@import "./custom-styles.css";
/* import custom components */
@import "./components/buttons.css";
/* default phoenix styles - eventually remove */
@import "./phoenix.css";
/* Alerts and form errors used by phx.new */

8
assets/css/components/buttons.css Normal file
View File

@ -0,0 +1,8 @@
@layer components {
.btn-redish {
@apply bg-red-300 hover:bg-red-600 text-blue-800 font-bold py-2 px-4 rounded;
}
.btn-greenish {
@apply bg-green-300 hover:bg-green-600 text-blue-800 font-bold py-2 px-4 rounded;
}
}

0
assets/css/custom-styles.css Normal file
View File

2
assets/js/app.js
View File

@ -1,6 +1,6 @@
// We import the CSS which is extracted to its own file by esbuild.
// Remove this line if you add a your own CSS build pipeline (e.g postcss).
import "../css/app.css"
// import "../css/app.css"
import Alpine from "alpinejs"
// If you want to use Phoenix channels, run `mix help phx.gen.channel`

7
assets/package.json
View File

@ -10,6 +10,11 @@
"author": "",
"license": "ISC",
"dependencies": {
"alpinejs": "^3.10.2"
"alpinejs": "^3.10.2",
"autoprefixer": "^10.4.7",
"postcss": "^8.4.14",
"postcss-cli": "^9.1.0",
"postcss-import": "^14.1.0",
"tailwindcss": "^3.0.24"
}
}

25
assets/pnpm-lock.yaml
View File

@ -1,25 +0,0 @@
lockfileVersion: 5.4
specifiers:
alpinejs: ^3.10.2
dependencies:
alpinejs: 3.10.2
packages:
/@vue/reactivity/3.1.5:
resolution: {integrity: sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==}
dependencies:
'@vue/shared': 3.1.5
dev: false
/@vue/shared/3.1.5:
resolution: {integrity: sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==}
dev: false
/alpinejs/3.10.2:
resolution: {integrity: sha512-P6DTX78J94FgsskS3eS23s26hfb0NWQZUidBnkUK7fId1x64/kLm5E79lL3HNItUmHDCKOHvfP8EAcuCVab89w==}
dependencies:
'@vue/reactivity': 3.1.5
dev: false

7
assets/postcss.config.js Normal file
View File

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

14
assets/tailwind.config.js Normal file
View File

@ -0,0 +1,14 @@
module.exports = {
mode: "jit",
purge: [
"./js/**/*.js",
"../lib/*_web/**/*.*ex"
],
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};

10
config/dev.exs
View File

@ -16,7 +16,15 @@ config :reaproche, ReaprocheWeb.Endpoint,
secret_key_base: "zETM0Rou9bkIcitBw/xgVMcpO6TIz+vu0rgaj3TtYoba3zS97DklUIQl2nnf1ELf",
watchers: [
# 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)]},
npx: [
"tailwindcss",
"--input=css/app.css",
"--output=../priv/static/assets/app.css",
"--postcss",
"--watch",
cd: Path.expand("../assets", __DIR__)
]
]
# ## SSL Support

53
lib/reaproche_web/templates/page/index.html.heex
View File

@ -40,12 +40,53 @@
</li>
</ul>
</article>
<section>
<h2>Alpine JS Installed</h2>
<div x-data="{name:''}">
<label for="name">Name:</label>
<input id="name" type="text" x-model="name" />
<p><br><b><em>Output:</em></b> <span x-text="name"/></p>
<section class="grid grid-cols-1 gap-4">
<!-- tailwind text -->
<div>
<h2 class="text-red-500 text-5xl font-bold text-center">Tailwind CSS with Alpine JS Dropdown</h2>
</div>
<!-- alpinejs dropdown test -->
<div x-data="{ open: false }" class="relative text-left">
<button
@click="open = !open"
@keydown.escape.window="open = false"
@click.away="open = false"
class="flex items-center h-8 pl-3 pr-2 border border-black focus:outline-none">
<span class="text-sm leading-none">
Options
</span>
<svg class="w-4 h-4 mt-px ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<div
x-cloak
x-show="open"
x-transition:enter="transition ease-out duration-100"
x-transition:enter-start="transform opacity-0 scale-95"
x-transition:enter-end="transform opacity-100 scale-100"
x-transition:leave="transition ease-in duration-75"
x-transition:leave-start="transform opacity-100 scale-100"
x-transition:leave-end="transform opacity-0 scale-95"
class="absolute flex flex-col w-40 mt-1 border border-black shadow-xs">
<a class="flex items-center h-8 px-3 text-sm hover:bg-gray-200" href="#">Settings</a>
<a class="flex items-center h-8 px-3 text-sm hover:bg-gray-200" href="#">Support</a>
<a class="flex items-center h-8 px-3 text-sm hover:bg-gray-200" href="#">Sign Out</a>
</div>
</div>
<!-- alpinejs counter test -->
<div>
<p class="mt-5 font-bold text-center">Counter with Component Buttons</p>
</div>
<!--
If you want a box around the counter use:
<div class="flex items-center justify-center h-screen bg-gray-200">
-->
<div class="mt-10 flex justify-center" x-data="{ count: 0 }">
<button class="btn-redish" x-on:click="count--">Decrement</button>
<code>count: </code><code x-text="count"></code>
<button class="btn-greenish" x-on:click="count++">Increment</button>
</div>
</section>
</section>