(FIX/UI): Only displaying 3 lines in search results.

This commit is contained in:
Hayden Hargreaves 2025-07-27 18:41:10 -07:00
parent 5aaca4234a
commit 2dc99c30c8
6 changed files with 93 additions and 9 deletions

View File

@ -136,7 +136,7 @@ func (s *RecipeService) GetRecipe(id int, userId *int) (*domain.Recipe, error) {
recipe, err := s.recipeRepository.GetRecipe(id, userId)
if recipe == nil {
return nil, fmt.Errorf("Failed to get recipe from database. Nil result.")
return nil, fmt.Errorf("Recipe does not exist or has been relocated. Please try again.")
}
return recipe, err

View File

@ -60,7 +60,12 @@ templ favoriteResult(recipe domain.Recipe) {
</svg>
</div>
</div>
<p class="text-sm py-2 text-center md:text-left">{ recipe.Description }</p>
<p
class="text-sm my-2 text-center md:text-left overflow-hidden text-ellipsis"
style="display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;"
>
{ recipe.Description }
</p>
</div>
</div>
}

View File

@ -177,14 +177,14 @@ func favoriteResult(recipe domain.Recipe) templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</span></div></div><div class=\"mb-2 mt-4 md:my-0 hidden md:block\"><svg class=\"h-6 text-red-500\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2 9.1371C2 14 6.01943 16.5914 8.96173 18.9109C10 19.7294 11 20.5 12 20.5C13 20.5 14 19.7294 15.0383 18.9109C17.9806 16.5914 22 14 22 9.1371C22 4.27416 16.4998 0.825464 12 5.50063C7.50016 0.825464 2 4.27416 2 9.1371Z\" fill=\"currentColor\"></path></svg></div></div><p class=\"text-sm py-2 text-center md:text-left\">")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</span></div></div><div class=\"mb-2 mt-4 md:my-0 hidden md:block\"><svg class=\"h-6 text-red-500\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2 9.1371C2 14 6.01943 16.5914 8.96173 18.9109C10 19.7294 11 20.5 12 20.5C13 20.5 14 19.7294 15.0383 18.9109C17.9806 16.5914 22 14 22 9.1371C22 4.27416 16.4998 0.825464 12 5.50063C7.50016 0.825464 2 4.27416 2 9.1371Z\" fill=\"currentColor\"></path></svg></div></div><p class=\"text-sm my-2 text-center md:text-left overflow-hidden text-ellipsis\" style=\"display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var8 string
templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(recipe.Description)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/favorites.templ`, Line: 63, Col: 72}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/favorites.templ`, Line: 67, Col: 24}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
if templ_7745c5c3_Err != nil {

View File

@ -84,7 +84,12 @@ templ searchResult(recipe domain.Recipe) {
}
</div>
</div>
<p class="text-sm py-2 text-center md:text-left">{ recipe.Description }</p>
<p
class="text-sm my-2 text-center md:text-left overflow-hidden text-ellipsis"
style="display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;"
>
{ recipe.Description }
</p>
</div>
</div>
}

View File

@ -243,14 +243,14 @@ func searchResult(recipe domain.Recipe) templ.Component {
return templ_7745c5c3_Err
}
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "</div></div><p class=\"text-sm py-2 text-center md:text-left\">")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "</div></div><p class=\"text-sm my-2 text-center md:text-left overflow-hidden text-ellipsis\" style=\"display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var9 string
templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(recipe.Description)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/search.templ`, Line: 87, Col: 72}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/templates/pages/search.templ`, Line: 91, Col: 24}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
if templ_7745c5c3_Err != nil {

View File

@ -238,6 +238,9 @@
.static {
position: static;
}
.top-1 {
top: calc(var(--spacing) * 1);
}
.top-1\/2 {
top: calc(1/2 * 100%);
}
@ -247,6 +250,9 @@
.left-0 {
left: calc(var(--spacing) * 0);
}
.left-1 {
left: calc(var(--spacing) * 1);
}
.left-1\/2 {
left: calc(1/2 * 100%);
}
@ -397,6 +403,12 @@
.h-20 {
height: calc(var(--spacing) * 20);
}
.h-56 {
height: calc(var(--spacing) * 56);
}
.h-72 {
height: calc(var(--spacing) * 72);
}
.h-96 {
height: calc(var(--spacing) * 96);
}
@ -412,18 +424,24 @@
.h-screen {
height: 100vh;
}
.min-h-72 {
min-height: calc(var(--spacing) * 72);
.max-h-72 {
max-height: calc(var(--spacing) * 72);
}
.min-h-screen {
min-height: 100vh;
}
.w-1 {
width: calc(var(--spacing) * 1);
}
.w-1\/3 {
width: calc(1/3 * 100%);
}
.w-1\/4 {
width: calc(1/4 * 100%);
}
.w-3 {
width: calc(var(--spacing) * 3);
}
.w-3\/4 {
width: calc(3/4 * 100%);
}
@ -436,6 +454,9 @@
.w-5 {
width: calc(var(--spacing) * 5);
}
.w-9 {
width: calc(var(--spacing) * 9);
}
.w-9\/10 {
width: calc(9/10 * 100%);
}
@ -457,6 +478,9 @@
.max-w-2xl {
max-width: var(--container-2xl);
}
.flex-shrink {
flex-shrink: 1;
}
.flex-shrink-0 {
flex-shrink: 0;
}
@ -466,10 +490,21 @@
.flex-grow {
flex-grow: 1;
}
.border-collapse {
border-collapse: collapse;
}
.-translate-x-1 {
--tw-translate-x: calc(var(--spacing) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.-translate-x-1\/2 {
--tw-translate-x: calc(calc(1/2 * 100%) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.-translate-y-1 {
--tw-translate-y: calc(var(--spacing) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.-translate-y-1\/2 {
--tw-translate-y: calc(calc(1/2 * 100%) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
@ -482,9 +517,15 @@
--tw-scale-y: 50%;
scale: var(--tw-scale-x) var(--tw-scale-y);
}
.transform {
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
}
.cursor-pointer {
cursor: pointer;
}
.resize {
resize: both;
}
.resize-none {
resize: none;
}
@ -839,6 +880,9 @@
.text-ellipsis {
text-overflow: ellipsis;
}
.whitespace-normal {
white-space: normal;
}
.whitespace-nowrap {
white-space: nowrap;
}
@ -1308,6 +1352,11 @@
height: calc(var(--spacing) * 24);
}
}
.md\:h-40 {
@media (width >= 48rem) {
height: calc(var(--spacing) * 40);
}
}
.md\:w-1\/2 {
@media (width >= 48rem) {
width: calc(1/2 * 100%);
@ -1494,6 +1543,26 @@
inherits: false;
initial-value: 1;
}
@property --tw-rotate-x {
syntax: "*";
inherits: false;
}
@property --tw-rotate-y {
syntax: "*";
inherits: false;
}
@property --tw-rotate-z {
syntax: "*";
inherits: false;
}
@property --tw-skew-x {
syntax: "*";
inherits: false;
}
@property --tw-skew-y {
syntax: "*";
inherits: false;
}
@property --tw-border-style {
syntax: "*";
inherits: false;
@ -1703,6 +1772,11 @@
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-scale-z: 1;
--tw-rotate-x: initial;
--tw-rotate-y: initial;
--tw-rotate-z: initial;
--tw-skew-x: initial;
--tw-skew-y: initial;
--tw-border-style: solid;
--tw-gradient-position: initial;
--tw-gradient-from: #0000;