lorenzhohermuth
/
portfolio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

carousel html css finished

This commit is contained in:
Lorenz Hohermuth 2024-04-02 22:35:15 +02:00
parent 39cfe0f827
commit bfdb2f6f70
7 changed files with 76 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/flower.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

BIN
assets/paris.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

8
internal/handler/handler.go
View File

@ -2,11 +2,17 @@ package handler
import ( import (
"github.com/labstack/echo/v4" "github.com/labstack/echo/v4"
"github.com/lorenzhohermuth/portfolio/view/component"
"github.com/lorenzhohermuth/portfolio/view/page" "github.com/lorenzhohermuth/portfolio/view/page"
) )
type Homehandler struct {} type Homehandler struct {}
func(h Homehandler) HandleUserShow(ctx echo.Context) error { func(h Homehandler) HandleUserShow(ctx echo.Context) error {
return render(ctx, page.ShowHome()) entrys := []component.CarouselEntry{
{"/static/test.jpg", "This is a Tree" , "I like Trees"},
{"/static/flower.jpeg", "This is a Tree" , "I like Trees"},
{"/static/paris.jpg", "This is a Tree" , "I like Trees"},
}
return render(ctx, page.ShowHome(entrys))
} }

34
view/component/carousel.templ
View File

@ -6,17 +6,33 @@ type CarouselEntry struct {
Text string Text string
} }
templ Carousel(elm CarouselEntry) { func add(a int, b int) int {
return a + b
}
templ Carousel(elm []CarouselEntry , index int) {
<div> <div>
<div class="flex items-center gap-x-4"> <div class="flex items-center gap-x-13">
<button type="button" class="h-32 w-8 font-black rounded bg-black/20 border-none"> &lt; </button>
<div class="relative text-center"> <div class="relative z-10">
<img src={elm.ImgPath} class="h-36 w-64 rounded object-cover"/> <button class="top-1/2 left-0 border-none bg-transparent p-0 absolute -translate-y-1/2 bg-black ">
<div class="bg-gradient-to-t from-black/80 absolute bottom-0 left-0 h-36 w-64 rounded"></div> <img src={elm[index - 1].ImgPath} class="h-28 w-52 rounded object-cover"/>
<p class="absolute text-neutral-300 bottom-0.5 left-5">{elm.Title}</p> </button>
</div> </div>
<button type="button" class="h-32 w-8 font-black rounded bg-black/20 border-none"> &gt; </button>
<div class="relative text-center z-20">
<img src={elm[index].ImgPath} class="h-36 w-64 rounded object-cover"/>
<div class="bg-gradient-to-t from-black/30 absolute bottom-0 left-0 h-36 w-64 rounded"></div>
<p class="absolute text-neutral-300 bottom-0.5 left-5">{elm[index].Title}</p>
</div>
<div class="relative z-0">
<button class="top-1/2 right-0 border-none bg-transparent p-0 absolute -translate-y-1/2 ">
<img src={elm[index + 1].ImgPath} class="h-28 w-52 rounded object-cover"/>
</button>
</div>
</div> </div>
<p class="text-center font-thin">{elm.Text}</p> <p class="text-center font-thin">{elm[index].Text}</p>
</div> </div>
} }

50
view/component/carousel_templ.go
View File

@ -16,7 +16,11 @@ type CarouselEntry struct {
Text string Text string
} }
func Carousel(elm CarouselEntry) templ.Component { func add(a int, b int) int {
return a + b
}
func Carousel(elm []CarouselEntry, index int) templ.Component {
return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) { return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer) templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
if !templ_7745c5c3_IsBuffer { if !templ_7745c5c3_IsBuffer {
@ -29,45 +33,71 @@ func Carousel(elm CarouselEntry) templ.Component {
templ_7745c5c3_Var1 = templ.NopComponent templ_7745c5c3_Var1 = templ.NopComponent
} }
ctx = templ.ClearChildren(ctx) ctx = templ.ClearChildren(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div><div class=\"flex items-center gap-x-4\"><button type=\"button\" class=\"h-32 w-8 font-black rounded bg-black/20 border-none\">&lt; </button><div class=\"relative text-center\"><img src=\"") _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div><div class=\"flex items-center gap-x-13\"><div class=\"relative z-10\"><button class=\"top-1/2 left-0 border-none bg-transparent p-0 absolute -translate-y-1/2 bg-black \"><img src=\"")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var2 string var templ_7745c5c3_Var2 string
templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(elm.ImgPath) templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(elm[index-1].ImgPath)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `view/component/carousel.templ`, Line: 14, Col: 25} return templ.Error{Err: templ_7745c5c3_Err, FileName: `view/component/carousel.templ`, Line: 19, Col: 37}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"h-36 w-64 rounded object-cover\"><div class=\"bg-gradient-to-t from-black/80 absolute bottom-0 left-0 h-36 w-64 rounded\"></div><p class=\"absolute text-neutral-300 bottom-0.5 left-5\">") _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"h-28 w-52 rounded object-cover\"></button></div><div class=\"relative text-center z-20\"><img src=\"")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var3 string var templ_7745c5c3_Var3 string
templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(elm.Title) templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(elm[index].ImgPath)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `view/component/carousel.templ`, Line: 16, Col: 69} return templ.Error{Err: templ_7745c5c3_Err, FileName: `view/component/carousel.templ`, Line: 24, Col: 32}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</p></div><button type=\"button\" class=\"h-32 w-8 font-black rounded bg-black/20 border-none\">&gt; </button></div><p class=\"text-center font-thin\">") _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"h-36 w-64 rounded object-cover\"><div class=\"bg-gradient-to-t from-black/30 absolute bottom-0 left-0 h-36 w-64 rounded\"></div><p class=\"absolute text-neutral-300 bottom-0.5 left-5\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var4 string var templ_7745c5c3_Var4 string
templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(elm.Text) templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(elm[index].Title)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `view/component/carousel.templ`, Line: 20, Col: 44} return templ.Error{Err: templ_7745c5c3_Err, FileName: `view/component/carousel.templ`, Line: 26, Col: 76}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</p></div><div class=\"relative z-0\"><button class=\"top-1/2 right-0 border-none bg-transparent p-0 absolute -translate-y-1/2 \"><img src=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var5 string
templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(elm[index+1].ImgPath)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `view/component/carousel.templ`, Line: 31, Col: 37}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"h-28 w-52 rounded object-cover\"></button></div></div><p class=\"text-center font-thin\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var6 string
templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(elm[index].Text)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `view/component/carousel.templ`, Line: 36, Col: 51}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</p></div>") _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</p></div>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err

4
view/page/home.templ
View File

@ -3,14 +3,14 @@ package page
import "github.com/lorenzhohermuth/portfolio/view/layout" import "github.com/lorenzhohermuth/portfolio/view/layout"
import "github.com/lorenzhohermuth/portfolio/view/component" import "github.com/lorenzhohermuth/portfolio/view/component"
templ ShowHome() { templ ShowHome(arr []component.CarouselEntry) {
@layout.Base(){ @layout.Base(){
<div class="h-80 bg-[#cdb4f6] flex justify-center items-center"> <div class="h-80 bg-[#cdb4f6] flex justify-center items-center">
Intro Intro
</div> </div>
<div class="h-80 bg-[#ff5cdb] flex justify-center items-center"> <div class="h-80 bg-[#ff5cdb] flex justify-center items-center">
@component.Carousel(component.CarouselEntry{"/static/test.jpg", "This is a Tree" , "I like Trees"}) @component.Carousel(arr, 1)
</div> </div>
<div class="h-80 bg-[#1733d2] flex justify-center items-center"> <div class="h-80 bg-[#1733d2] flex justify-center items-center">

4
view/page/home_templ.go
View File

@ -13,7 +13,7 @@ import "bytes"
import "github.com/lorenzhohermuth/portfolio/view/layout" import "github.com/lorenzhohermuth/portfolio/view/layout"
import "github.com/lorenzhohermuth/portfolio/view/component" import "github.com/lorenzhohermuth/portfolio/view/component"
func ShowHome() templ.Component { func ShowHome(arr []component.CarouselEntry) templ.Component {
return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) { return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer) templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
if !templ_7745c5c3_IsBuffer { if !templ_7745c5c3_IsBuffer {
@ -36,7 +36,7 @@ func ShowHome() templ.Component {
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = component.Carousel(component.CarouselEntry{"/static/test.jpg", "This is a Tree", "I like Trees"}).Render(ctx, templ_7745c5c3_Buffer) templ_7745c5c3_Err = component.Carousel(arr, 1).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }