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

first vue

Browse source
This commit is contained in:
Rodolphe Marbot 2022-07-05 20:49:49 +02:00
parent 978de52a09
commit c6c3d20cac
10 changed files with 65 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

13
lib/reaproche_web/templates/layout/root.html.heex
View file

@ -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>

51
lib/reaproche_web/templates/page/index.html.heex
View file

@ -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>