feat(frontend): smaller list display instead of bigger one

6 files changed, 95 insertions, 20 deletions

diff --git a/backend/data.go b/backend/data.go
index 4f9bab1..9fd6aea 100644
--- a/backend/data.go
+++ b/backend/data.go
@@ -92,9 +92,11 @@ func (d *data) handleGeneric(w http.ResponseWriter, r *http.Request, name string
 		"asset": func(path string) *assetData {
 			return getAsset(r.Context(), path)
 		},
-		"next":   func(i int) int { return i + 1 },
-		"before": func(i int) int { return i - 1 },
-		"first":  templateFirst,
+		"next":      func(i int) int { return i + 1 },
+		"before":    func(i int) int { return i - 1 },
+		"first":     templateFirst,
+		"firstData": templateFirstData,
+		"restData":  templateRestData,
 	}).ParseFS(templates, "templates/components.html", fmt.Sprintf("templates/%s.html", name), "templates/base.html")
 	if err != nil {
 		panic(err)
@@ -215,3 +217,17 @@ func templateFirst(a []*Section) *Section {
 	}
 	return a[0]
 }
+
+func templateFirstData(a []*sectionData) *sectionData {
+	if len(a) == 0 {
+		return nil
+	}
+	return a[0]
+}
+
+func templateRestData(a []*sectionData) []*sectionData {
+	if len(a) < 2 {
+		return nil
+	}
+	return a[1:]
+}
diff --git a/backend/home.go b/backend/home.go
index f824a69..0fae11a 100644
--- a/backend/home.go
+++ b/backend/home.go
@@ -27,7 +27,7 @@ func (h *homeData) SetData(d *data) {
 func HandleHome(r *chi.Mux) {
 	r.Get("/", func(w http.ResponseWriter, r *http.Request) {
 		cfg := r.Context().Value(configKey).(*Config)
-		d := handleGenericSectionDisplay(w, r, cfg.Sections, 3)
+		d := handleGenericSectionDisplay(w, r, cfg.Sections, 4)
 		if d == nil {
 			return
 		}
diff --git a/backend/section.go b/backend/section.go
index 9d49ea2..376f562 100644
--- a/backend/section.go
+++ b/backend/section.go
@@ -43,6 +43,7 @@ type sectionData struct {
 	DataTitle string
 	Content   template.HTML
 	Slug      string
+	URI       string
 }
 
 func (d *sectionData) SetData(dt *data) {
@@ -163,7 +164,7 @@ func (s *Section) Handle(r *chi.Mux) {
 }
 
 func (s *Section) handleList(w http.ResponseWriter, r *http.Request) {
-	p := s.handlePagination(w, r, 5)
+	p := s.handlePagination(w, r, 7)
 	if p == nil {
 		return
 	}
@@ -214,6 +215,7 @@ func (s *Section) parse(d *sectionData, mu *sync.Mutex, path, slug string) bool
 	d.Article = true
 	d.DataTitle = slug
 	d.Slug = slug
+	d.URI = s.URI
 	b, err := os.ReadFile(path + ".md")
 	if err != nil {
 		if os.IsNotExist(err) {
diff --git a/backend/templates/components.html b/backend/templates/components.html
index e49a8c4..bf555f0 100644
--- a/backend/templates/components.html
+++ b/backend/templates/components.html
@@ -13,27 +13,51 @@
     {{ end }}
   </nav>
 {{ end }}
-{{ define "section_display" }}
-  <article>
-    {{ $uri := .URI }}
-    {{ range .Data }}
-      <article>
-        <h3><a href="/{{ $uri }}/{{ .Slug }}">{{ .DataTitle }}</a></h3>
-        <figure>
-          <a href="/{{ $uri }}/{{ .Slug }}"><img src="{{ static .Img.Src }}" alt="{{ .Img.Alt }}" /></a>
-          <figcaption>{{ .Img.Legend }}</figcaption>
-        </figure>
-        <p>{{ .Description }}</p>
-      </article>
-    {{ end }}
+{{ define "data_display" }}
+  <article class="large">
+    <figure>
+        <a href="/{{ .URI }}/{{ .Slug }}"><img src="{{ static .Img.Src }}" alt="{{ .Img.Alt }}" /></a>
+      <figcaption>{{ .Img.Legend }}</figcaption>
+    </figure>
+    <div>
+      <h3><a href="/{{ .URI }}/{{ .Slug }}">{{ .DataTitle }}</a></h3>
+      <p>{{ .Description }}</p>
+    </div>
+  </article>
+{{ end }}
+{{ define "section_pagination" }}
     <div class="pagination">
       {{ if .Paginate }}
         {{ template "pagination" . }}
       {{ else }}
         {{ if eq (len .Data) .LenMax }}
-          <a href="/{{ $uri }}/">Voir plus</a>
+          <a href="/{{ .URI }}/">Voir plus</a>
         {{ end }}
       {{ end }}
     </div>
+{{ end }}
+{{ define "section_display--no-first" }}
+  <article class="article__list">
+    {{ range .Data }}
+      {{ template "data_display" . }}
+    {{ end }}
+    {{ template "section_pagination" . }}
+  </article>
+{{ end }}
+{{ define "section_display" }}
+  <article class="article__list">
+    {{ $first := firstData .Data }}
+    <article>
+      <h3>{{ $first.DataTitle }}</h3>
+      <figure>
+        <a href="/{{ .URI }}/{{ $first.Slug }}"><img src="{{ static $first.Img.Src }}" alt="{{ $first.Img.Alt }}" /></a>
+        <figcaption>{{ $first.Img.Legend }}</figcaption>
+      </figure>
+      <p>{{ $first.Description }}</p>
+    </article>
+    {{ range restData .Data }}
+      {{ template "data_display" . }}
+    {{ end }}
+    {{ template "section_pagination" . }}
   </article>
 {{ end }}
diff --git a/backend/templates/home_section.html b/backend/templates/home_section.html
index 1101843..6f31fc0 100644
--- a/backend/templates/home_section.html
+++ b/backend/templates/home_section.html
@@ -5,7 +5,7 @@
         <h1>{{ .Name }}</h1>
         <p>{{ .Description }}</p>
       </div>
-      {{ template "section_display" . }}
+      {{ template "section_display--no-first" . }}
     {{ end }}
   </main>
 {{ end }}
diff --git a/frontend/scss/general.scss b/frontend/scss/general.scss
index 28c1c81..13d2053 100644
--- a/frontend/scss/general.scss
+++ b/frontend/scss/general.scss
@@ -215,3 +215,36 @@ th {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
+
+.article__list {
+  display: flex;
+  flex-direction: column;
+  gap: calc(2 * var(--margin-base));
+}
+
+article.large {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  align-items: center;
+  gap: 2rem;
+
+  @media only screen and (max-width: 800px) {
+    grid-template-columns: 1fr;
+  }
+
+  & h3 {
+    margin-top: 0;
+  }
+
+  & p {
+    margin-bottom: 0;
+  }
+
+  & figure {
+    margin-bottom: 0;
+  }
+
+  & > div {
+    margin-bottom: 2rem;
+  }
+}