azpect/Potion
1
1
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases Wiki Activity

(UI): Small UI tweaks.

Browse Source
This commit is contained in:
Hayden Hargreaves 2025-07-14 18:07:58 -07:00
parent 4a94b1a08c
commit acbb07cb34
9 changed files with 65 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
internal/templates/pages/favorites.templ
View File

@ -7,7 +7,7 @@ templ FavoritesPage() {
<div class="w-full h-screen flex justify-center">
<div class="mx-2 md:mx-0 w-full md:w-1/2 md:pt-14 h-full border-l border-r border-gray-300 bg-white">
<div class="flex flex-col items-center justify-center h-full gap-y-2">
<h1 class="text-4xl text-gray-800 font-semibold">Page Under Construction </h1>
<h1 class="text-4xl text-gray-800 font-semibold text-center">Page Under Construction </h1>
<p class="text-gray-700">Sit tight, this page is coming soon!</p>
</div>
</div>

2
internal/templates/pages/favorites_templ.go
View File

@ -35,7 +35,7 @@ func FavoritesPage() templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"w-full h-screen flex justify-center\"><div class=\"mx-2 md:mx-0 w-full md:w-1/2 md:pt-14 h-full border-l border-r border-gray-300 bg-white\"><div class=\"flex flex-col items-center justify-center h-full gap-y-2\"><h1 class=\"text-4xl text-gray-800 font-semibold\">Page Under Construction </h1><p class=\"text-gray-700\">Sit tight, this page is coming soon!</p></div></div></div>")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"w-full h-screen flex justify-center\"><div class=\"mx-2 md:mx-0 w-full md:w-1/2 md:pt-14 h-full border-l border-r border-gray-300 bg-white\"><div class=\"flex flex-col items-center justify-center h-full gap-y-2\"><h1 class=\"text-4xl text-gray-800 font-semibold text-center\">Page Under Construction </h1><p class=\"text-gray-700\">Sit tight, this page is coming soon!</p></div></div></div>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}

6
internal/templates/pages/home.templ
View File

@ -29,8 +29,10 @@ templ introSection() {
templ searchSection() {
<section class="w-full flex flex-col items-center justify-center my-8 py-4">
@components.BannerText("Craving Something Specific?")
@components.SearchBar(domainRecipe.SearchFilters{}, true, false)
<div class="hidden" id="result-list"></div>
<div class="w-full md:w-3/4">
@components.SearchBar(domainRecipe.SearchFilters{}, true, false)
</div>
<div class="hidden" id="result-list"></div>
</section>
}

28
internal/templates/pages/home_templ.go
View File

@ -70,11 +70,15 @@ func searchSection() templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<div class=\"w-full md:w-3/4\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = components.SearchBar(domainRecipe.SearchFilters{}, true, false).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<div class=\"hidden\" id=\"result-list\"></div></section>")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "</div><div class=\"hidden\" id=\"result-list\"></div></section>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -103,7 +107,7 @@ func highlightSection(liked bool) templ.Component {
templ_7745c5c3_Var3 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "<section class=\"w-full flex flex-col items-center justify-center my-8 py-4\">")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "<section class=\"w-full flex flex-col items-center justify-center my-8 py-4\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -111,7 +115,7 @@ func highlightSection(liked bool) templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "<p class=\"leading-relaxed p-4 my-8\">Our 'Recipe of the Week' is the cream of the crop! We handpick it by looking at what recipes our community loves most. This isn't just about how many people view a recipe; it's also about how many times it's been made, liked, reviewed, and its average rating, all combined to find the true fan favorite of the week. It's our way of highlighting the best recipes that truly resonate with our users!</p><div class=\"flex items-center justify-center w-full\">")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "<p class=\"leading-relaxed p-4 my-8\">Our 'Recipe of the Week' is the cream of the crop! We handpick it by looking at what recipes our community loves most. This isn't just about how many people view a recipe; it's also about how many times it's been made, liked, reviewed, and its average rating, all combined to find the true fan favorite of the week. It's our way of highlighting the best recipes that truly resonate with our users!</p><div class=\"flex items-center justify-center w-full\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -119,7 +123,7 @@ func highlightSection(liked bool) templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "</div></section>")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "</div></section>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -148,7 +152,7 @@ func listsSection() templ.Component {
templ_7745c5c3_Var4 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "<section class=\"w-full flex flex-col items-center justify-center my-8 py-4\">")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "<section class=\"w-full flex flex-col items-center justify-center my-8 py-4\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -156,7 +160,7 @@ func listsSection() templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "<div class=\"w-full\"><h3 class=\"text-lg mt-8 mx-4\">Recently viewed</h3><div class=\"flex overflow-x-auto gap-x-4 mx-4 my-4\">")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "<div class=\"w-full\"><h3 class=\"text-lg mt-8 mx-4\">Recently viewed</h3><div class=\"flex overflow-x-auto gap-x-4 mx-4 my-4\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -184,7 +188,7 @@ func listsSection() templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "</div><h3 class=\"text-lg mt-8 mx-4\">Make again</h3><div class=\"flex overflow-x-auto gap-x-4 mx-4 my-4\">")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "</div><h3 class=\"text-lg mt-8 mx-4\">Make again</h3><div class=\"flex overflow-x-auto gap-x-4 mx-4 my-4\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -212,7 +216,7 @@ func listsSection() templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "</div></div></section>")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "</div></div></section>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -241,7 +245,7 @@ func ctaSection() templ.Component {
templ_7745c5c3_Var5 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "<section class=\"w-full flex flex-col items-center justify-center mt-16 py-8 md:py-12 bg-gradient-to-br from-blue-100 to-purple-100 text-center\"><h2 class=\"text-2xl md:text-3xl font-extrabold text-gray-800 mb-6 px-4\">Unleash Your Inner Chef!</h2><p class=\"text-md md:text-lg text-gray-700 max-w-2xl mb-10 px-4 leading-relaxed\">Have a unique recipe idea? Want to share your culinary masterpiece with the world? It's time to bring your creations to life!</p><a href=\"")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "<section class=\"w-full flex flex-col items-center justify-center mt-16 py-8 md:py-12 bg-gradient-to-br from-blue-100 to-purple-100 text-center\"><h2 class=\"text-2xl md:text-3xl font-extrabold text-gray-800 mb-6 px-4\">Unleash Your Inner Chef!</h2><p class=\"text-md md:text-lg text-gray-700 max-w-2xl mb-10 px-4 leading-relaxed\">Have a unique recipe idea? Want to share your culinary masterpiece with the world? It's time to bring your creations to life!</p><a href=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -250,7 +254,7 @@ func ctaSection() templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "\" class=\"flex items-center justify-center\n bg-gradient-to-r from-blue-400 to-blue-600 text-white\n px-12 py-5 rounded-full shadow-sm hover:shadow-md\n transition-all duration-300 ease-in-out shadow-blue-700\n text-lg md:text-2xl font-bold uppercase tracking-wide\">Create Your Recipe!</a></section>")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "\" class=\"flex items-center justify-center\n bg-gradient-to-r from-blue-400 to-blue-600 text-white\n px-12 py-5 rounded-full shadow-sm hover:shadow-md\n transition-all duration-300 ease-in-out shadow-blue-700\n text-lg md:text-2xl font-bold uppercase tracking-wide\">Create Your Recipe!</a></section>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -283,7 +287,7 @@ func HomePage() templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "<div class=\"w-full h-fit flex justify-center\"><div class=\"mx-2 md:mx-0 w-full md:w-1/2 md:pt-14 h-full border-l border-r border-gray-300 bg-white\">")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "<div class=\"w-full h-fit flex justify-center\"><div class=\"mx-2 md:mx-0 w-full md:w-1/2 md:pt-14 h-full border-l border-r border-gray-300 bg-white\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -307,7 +311,7 @@ func HomePage() templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "</div></div>")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "</div></div>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}

2
internal/templates/pages/list.templ
View File

@ -7,7 +7,7 @@ templ ListPage() {
<div class="w-full h-screen flex justify-center">
<div class="mx-2 md:mx-0 w-full md:w-1/2 md:pt-14 h-full border-l border-r border-gray-300 bg-white">
<div class="flex flex-col items-center justify-center h-full gap-y-2">
<h1 class="text-4xl text-gray-800 font-semibold">Page Under Construction </h1>
<h1 class="text-4xl text-gray-800 font-semibold text-center">Page Under Construction </h1>
<p class="text-gray-700">Sit tight, this page is coming soon!</p>
</div>
</div>

2
internal/templates/pages/list_templ.go
View File

@ -35,7 +35,7 @@ func ListPage() templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"w-full h-screen flex justify-center\"><div class=\"mx-2 md:mx-0 w-full md:w-1/2 md:pt-14 h-full border-l border-r border-gray-300 bg-white\"><div class=\"flex flex-col items-center justify-center h-full gap-y-2\"><h1 class=\"text-4xl text-gray-800 font-semibold\">Page Under Construction </h1><p class=\"text-gray-700\">Sit tight, this page is coming soon!</p></div></div></div>")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"w-full h-screen flex justify-center\"><div class=\"mx-2 md:mx-0 w-full md:w-1/2 md:pt-14 h-full border-l border-r border-gray-300 bg-white\"><div class=\"flex flex-col items-center justify-center h-full gap-y-2\"><h1 class=\"text-4xl text-gray-800 font-semibold text-center\">Page Under Construction </h1><p class=\"text-gray-700\">Sit tight, this page is coming soon!</p></div></div></div>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}

2
internal/templates/pages/search.templ
View File

@ -48,7 +48,7 @@ templ searchResult(recipe domain.Recipe, odd bool) {
<img class="bg-gray-50 size-56 md:size-40 rounded-md border-0" src=""/>
<div class="text-gray-700 p-4 flex flex-col items-center md:items-start">
<h3 class="text-xl font-semibold text-black pb-1">
{ recipe.Title } <span class="text-sm font-normal">{ recipe.Category }</span>
{ recipe.Title } <span class="text-sm font-normal hidden md:inline">{ recipe.Category }</span>
</h3>
<div class="text-sm flex gap-x-3 gap-y-1 items-center flex-wrap">
<span class="flex gap-x-1 align-center">

4
internal/templates/pages/search_templ.go
View File

@ -177,14 +177,14 @@ func searchResult(recipe domain.Recipe, odd bool) templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, " <span class=\"text-sm font-normal\">")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, " <span class=\"text-sm font-normal hidden md:inline\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var6 string
templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(recipe.Category)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/search.templ`, Line: 51, Col: 72}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/search.templ`, Line: 51, Col: 89}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
if templ_7745c5c3_Err != nil {

42
web/static/css/tailwind.css
View File

@ -28,7 +28,6 @@
--color-gray-600: oklch(44.6% 0.03 256.802);
--color-gray-700: oklch(37.3% 0.034 259.733);
--color-gray-800: oklch(27.8% 0.033 256.848);
--color-gray-900: oklch(21% 0.034 264.665);
--color-black: #000;
--color-white: #fff;
--spacing: 0.25rem;
@ -423,6 +422,9 @@
.w-1 {
width: calc(var(--spacing) * 1);
}
.w-1\/2 {
width: calc(1/2 * 100%);
}
.w-1\/3 {
width: calc(1/3 * 100%);
}
@ -462,9 +464,21 @@
.w-full {
width: 100%;
}
.max-w-1 {
max-width: calc(var(--spacing) * 1);
}
.max-w-1\/2 {
max-width: calc(1/2 * 100%);
}
.max-w-2xl {
max-width: var(--container-2xl);
}
.max-w-4 {
max-width: calc(var(--spacing) * 4);
}
.max-w-4\/5 {
max-width: calc(4/5 * 100%);
}
.flex-shrink {
flex-shrink: 1;
}
@ -477,6 +491,9 @@
.flex-grow {
flex-grow: 1;
}
.flex-grow-0 {
flex-grow: 0;
}
.border-collapse {
border-collapse: collapse;
}
@ -701,9 +718,6 @@
--tw-gradient-position: to right in oklab;
background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-none {
background-image: none;
}
.from-blue-100 {
--tw-gradient-from: var(--color-blue-100);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@ -1219,6 +1233,11 @@
animation: var(--animate-bounce);
}
}
.sm\:hidden {
@media (width >= 40rem) {
display: none;
}
}
.sm\:w-3\/4 {
@media (width >= 40rem) {
width: calc(3/4 * 100%);
@ -1274,6 +1293,16 @@
display: none;
}
}
.md\:inline {
@media (width >= 48rem) {
display: inline;
}
}
.md\:inline-block {
@media (width >= 48rem) {
display: inline-block;
}
}
.md\:size-12 {
@media (width >= 48rem) {
width: calc(var(--spacing) * 12);
@ -1323,6 +1352,11 @@
width: calc(2/5 * 100%);
}
}
.md\:w-3\/4 {
@media (width >= 48rem) {
width: calc(3/4 * 100%);
}
}
.md\:w-32 {
@media (width >= 48rem) {
width: calc(var(--spacing) * 32);