first vue
This commit is contained in:
Rodolphe Marbot
parent
978de52a09
commit
c6c3d20cac
10 changed files with 65 additions and 64 deletions
6
lib/reaproche_web/live/page_view_live.ex
Normal file
6
lib/reaproche_web/live/page_view_live.ex
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
defmodule ReaprocheWeb.PageViewLive do
|
||||
use ReaprocheWeb, :live_view
|
||||
def mount(_params, _, socket) do
|
||||
{:ok, socket}
|
||||
end
|
||||
end
|
||||
43
lib/reaproche_web/live/page_view_live.html.heex
Normal file
43
lib/reaproche_web/live/page_view_live.html.heex
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<section class="phx-hero">
|
||||
<h1>Reaproche</h1>
|
||||
<p>Agissons ensemble pour se faire entendre</p>
|
||||
<p>La visite est une étape à part entière des soins</p>
|
||||
<p>Soutenons le droit des visites même en ce contexte sanitaire</p>
|
||||
</section>
|
||||
|
||||
<section class="row">
|
||||
<article class="column">
|
||||
<h2>Resources</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://hexdocs.pm/phoenix/overview.html">Guides & Docs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/phoenixframework/phoenix">Source</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/phoenixframework/phoenix/blob/v1.6/CHANGELOG.md">v1.6 Changelog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article class="column">
|
||||
<h2>Help</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://elixirforum.com/c/phoenix-forum">Forum</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://web.libera.chat/#elixir">#elixir on Libera Chat (IRC)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://twitter.com/elixirphoenix">Twitter @elixirphoenix</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://elixir-slackin.herokuapp.com/">Elixir on Slack</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://discord.gg/elixir">Elixir on Discord</a>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
</section>
|
||||
|
|
@ -17,7 +17,9 @@ defmodule ReaprocheWeb.Router do
|
|||
scope "/", ReaprocheWeb do
|
||||
pipe_through :browser
|
||||
|
||||
get "/", PageController, :index
|
||||
live_session :default do
|
||||
live "/", PageViewLive
|
||||
end
|
||||
end
|
||||
|
||||
# Other scopes may use custom stacks.
|
||||
|
|
|
|||
|
|
@ -13,15 +13,12 @@
|
|||
<header>
|
||||
<section class="container">
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="https://hexdocs.pm/phoenix/overview.html">Get Started</a></li>
|
||||
<%= if function_exported?(Routes, :live_dashboard_path, 2) do %>
|
||||
<li><%= link "LiveDashboard", to: Routes.live_dashboard_path(@conn, :home) %></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
<div>
|
||||
</div>
|
||||
<%= link "L'association", to: "/association" %>
|
||||
</nav>
|
||||
<a href="https://reaproche.fr/" class="phx-logo">
|
||||
<img src={Routes.static_path(@conn, "/images/phoenix.png")} alt="Phoenix Framework Logo"/>
|
||||
<a href="https://reaproche.fr/" class="reaproche-logo">
|
||||
<img src={Routes.static_path(@conn, "/images/Logo Orange.png")} alt="Reaproche Logo"/>
|
||||
</a>
|
||||
</section>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<section class="phx-hero">
|
||||
<h1><%= gettext "Reaproche" %></h1>
|
||||
<h1>Reaproche</h1>
|
||||
<p>Agissons ensemble pour se faire entendre</p>
|
||||
<p>La visite est une étape à part entière des soins</p>
|
||||
<p>Soutenons le droit des visites même en ce contexte sanitaire</p>
|
||||
|
|
@ -40,53 +40,4 @@
|
|||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
defmodule ReaprocheWeb.PageView do
|
||||
use ReaprocheWeb, :view
|
||||
end
|
||||
Loading…
Add table
Add a link
Reference in a new issue