dev/wild
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

half-responsive design

Browse source
This commit is contained in:
Daniel Yrovas 2025-01-11 14:23:39 +11:00
parent a2afd8737d
commit 0e05c15555
Signed by: danielyrovas
SSH key fingerprint: SHA256:1avlGZQpGW038lBkNI5lOS7f0hIPM7ecJen2/P1MCCU
3 changed files with 11 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

2
lib/wild_web/components/layouts/app.html.heex
View file

@ -1,5 +1,5 @@
<main class="px-4 py-20 sm:px-6 lg:px-8"> <main class="px-4 py-20 sm:px-6 lg:px-8">
<div class="mx-auto max-w-6xl"> <div class="mx-auto max-w-5xl">
<.flash_group flash={@flash} /> <.flash_group flash={@flash} />
{@inner_content} {@inner_content}
</div> </div>

8
lib/wild_web/components/layouts/root.html.heex
View file

@ -12,7 +12,13 @@
</head> </head>
<body class="bg-white"> <body class="bg-white">
<nav class="py-2"> <nav class="py-2">
<ul class="relative flex items-center gap-4 px-4 sm:px-6 lg:px-8 justify-end font-semibold text-sm text-zinc-900"> <ul class="w-full flex items-center gap-4 px-4 sm:px-6 lg:px-8 justify-end font-semibold text-sm text-zinc-900">
<li class="">
<.link href={~p"/"} class="hover:text-zinc-600">
Home
</.link>
</li>
<li class="grow"></li>
<%= if @current_user do %> <%= if @current_user do %>
<li class=""> <li class="">
{@current_user.email} {@current_user.email}

6
lib/wild_web/live/index.html.heex
View file

@ -1,10 +1,10 @@
<h1>Hello World</h1> <h1>Hello World</h1>
<div class="flex gap-10"> <div class="flex gap-10 flex-col sm:flex-row">
<div class="flex-1"> <div class="flex-1">
<div class="shadow-md rounded-xl pt-4 bg-pink-100"> <div class="shadow-md rounded-xl pt-4 bg-pink-100">
<h2 class="text-center font-bold pb-2">BOOKS</h2> <h2 class="text-center font-bold pb-2">BOOKS</h2>
<.link patch={~p"/books"}> <.link patch={~p"/books"} class="flex flex-col items-center">
<img src={~p"/images/book-card-homepage.jpg"} class="rounded-xl" /> <img src={~p"/images/book-card-homepage.jpg"} class="rounded-xl w-1/2 sm:w-auto" />
</.link> </.link>
</div> </div>