Home Explore Help
Sign In
gildas
/
movies
Watch 1
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Add List page

Gildas Chabot 4 years ago
parent
c994c23215
commit
5ec7c57484
3 changed files with 85 additions and 0 deletions
Split View Show Diff Stats
  1. 2 0
      cmd/movies/main.go
  2. 21 0
      pages/pages.go
  3. 62 0
      templates/list.html

+ 2 - 0
cmd/movies/main.go
View File 

@@ -9,6 +9,7 @@ import (
9 9
10 10 
 	"gogs.gildas.ch/gildas/movies"
11 11 
 	"gogs.gildas.ch/gildas/movies/api"
12 
+	"gogs.gildas.ch/gildas/movies/pages"
12 13 
 )
13 14
14 15 
 const (
 
@@ -27,6 +28,7 @@ func main() {
27 28 
 		collection = &movies.Collection{}
28 29 
 	}
29 30
31 
+	http.Handle("/", pages.List(collection))
30 32 
 	http.Handle("/add-movie", api.AddMovieHandler(collection))
31 33
32 34 
 	port := "8080"

+ 21 - 0
pages/pages.go
View File 

@@ -0,0 +1,21 @@
1 
+package pages
2 
+
3 
+import (
4 
+	"fmt"
5 
+	"html/template"
6 
+	"net/http"
7 
+
8 
+	"gogs.gildas.ch/gildas/movies"
9 
+)
10 
+
11 
+func List(c *movies.Collection) http.HandlerFunc {
12 
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
13 
+		t, err := template.ParseFiles("templates/list.html")
14 
+		if err != nil {
15 
+			fmt.Println(err)
16 
+			return
17 
+		}
18 
+
19 
+		t.Execute(w, c)
20 
+	})
21 
+}

+ 62 - 0
templates/list.html
View File 

@@ -0,0 +1,62 @@
1 
+<html>
2 
+    <head>
3 
+        <title>gildas.ch</title>
4 
+
5 
+        <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
6 
+        <style>
7 
+         body {
8 
+             font-family: 'Roboto', sans-serif;
9 
+         }
10 
+         h2 {
11 
+             font-size: 1.2em;
12 
+             color: #757575;
13 
+         }
14 
+         ul {
15 
+             list-style-type: none;
16 
+             display: flex;
17 
+             flex-wrap: wrap;
18 
+             padding: 0;
19 
+         }
20 
+         li {
21 
+             width: 240px;
22 
+             height: 400px;
23 
+             display: grid;
24 
+             grid-template-rows: 320px 80px;
25 
+             box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
26 
+             margin: 10px;
27 
+         }
28 
+         li .poster {
29 
+             justify-self: center;
30 
+             align-self: center;
31 
+         }
32 
+         li .metadata {
33 
+             padding: 10px;
34 
+         }
35 
+         li img {
36 
+             max-width: 240px;
37 
+             max-height: 320px;
38 
+         }
39 
+         h3 {
40 
+             margin-bottom: 5px;
41 
+             margin-top: 5px;
42 
+         }
43 
+        </style>
44 
+    </head>
45 
+    <body>
46 
+        <h2>Movies</h2>
47 
+
48 
+        <ul>
49 
+            {{ range $m := .Movies }}
50 
+            <li>
51 
+                <div class="poster">
52 
+                    <img src="{{ $m.Poster }}" title="{{ $m.Title }}" alt="{{ $m.Title }}" />
53 
+                </div>
54 
+                <div class="metadata">
55 
+                    <h3>{{ $m.Title }}</h3>
56 
+                    <div>{{ $m.Director }}</div>
57 
+                </div>
58 
+            </li>
59 
+            {{ end }}
60 
+        </ul>
61 
+    </body>
62 
+</html>