Merge pull request 'feature/film-timeline' (#11) from feature/film-timeline into main

Reviewed-on: 0x2620/aab21#11

app/static/css/partials/_film.scss

@@ -1,5 +1,3 @@
-
-
 .films {
   margin: var(--spacing-2);
   box-sizing: border-box;
@@ -33,24 +31,25 @@
   }
 }
 
-
 main > .film {
-  max-width: 1080px;
+  
   margin: auto;
   .info {
-    margin: var(--spacing) var(--spacing-2);
     margin-bottom: 32px;
     text-overflow: ellipsis;
     overflow: hidden;
+    text-align: center;
 
     h1 {
-      font-size: 24px;
+      font-size: 20px;
-      margin: 24px 0;
+      margin: 0 0 24px 0;
     }
     h2 {
+      font-size: 18px;
       margin: 24px 0;
     }
     .details {
+      font-size: 18px;
       margin-top: var(--spacing-2);
     }
     .bio {
@@ -60,14 +59,12 @@ main > .film {
       }
     }
   }
-  video {
+
-    width: 100%;
-  }
   .play {
     text-align: center;
-    margin: var(--spacing);
     margin-top: var(--spacing-2);
     margin-bottom: var(--spacing-2);
+    max-width: 250px;
 
     .texts {
       padding-top: var(--spacing-2);
@@ -85,3 +82,88 @@ main > .film {
     }
   }
 }
+
+.info-meta {
+  display: inline-block;
+  margin: 0 auto;
+  position: absolute;
+  max-width: 600px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%); 
+  animation: fade_in 1s linear 0.4s forwards;
+  opacity: 0;
+}
+
+.info-meta, .bio-block, .play, .summary-block {
+  background: rgba(0, 0, 0, 0.55);
+  border-radius: 2px;
+  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.6);
+  margin-left: auto;
+  margin-right: auto;
+  padding: 20px;
+  font-size: 18px;
+
+  a {
+    color: var(--color-link);
+    text-decoration: none;
+    font-weight: 700;
+  }
+}
+
+.summary-block {
+  max-width: 1080px;
+  margin-top: 350px;  
+}
+
+.bio-block {
+  max-width: 1080px;
+  margin-top: 30px;
+  margin-bottom: 30px;  
+}
+
+.video-block {
+  height: 100vh;
+  padding-bottom: 50px;
+  padding-top: 50px;
+
+  video {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: -9999;
+    height: 100vh;
+    width: 100vw;
+    object-fit: fill;
+    //height: 100vh;
+    //width: auto;
+    margin: 0 auto;
+  }
+}
+
+.icon-play {
+  color: #fff;
+  border: 3px solid var(--color-link);
+  border-radius: 50%;
+  font-size: 32px;
+  text-decoration: none;
+  width: 50px;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: auto;
+}
+
+.film-play-block {
+  text-align: center;
+  font-size: 18px;
+}
+
+.film-play-spacer {
+  padding: var(--spacing);
+  margin-top: 4px;
+  font-size: 12px;
+  font-weight: 700;
+}

app/static/css/partials/_layout.scss

@@ -4,6 +4,8 @@
 	--bg-color-3: #ffff00;
 	--bg-color-4: #ff3399;
 
+    --color-link: #ee0;
+
     --spacing: 8px;
     --spacing-2: calc(var(--spacing) * 2);
 }
@@ -11,20 +13,33 @@
 @keyframes background_animation {
     0%,100% {
         background-position: 0 0;
-        color: #ddd;
     }
 
     50% {
         background-position: 100% 0;
+    }
+}
+
+@keyframes text_animation {
+    0%,100% {
+        color: #ddd;
+    }
+
+    50% {
         color: #000;
     }
 }
+
 body.animated {
     background: linear-gradient(to right, var(--bg-color-1), var(--bg-color-2) , var(--bg-color-3), var(--bg-color-4));
     animation: background_animation 60s ease-in-out infinite;
     background-size: 400% 100%;
 }
 
+body.animated-text {
+    animation: text_animation 60s ease-in-out infinite;
+}
+
 body {
     color: #ddd;
     font-family: "noto_sans", sans-serif;
@@ -48,3 +63,14 @@ nav {
     display: none;
   }
 }
+
+// Animations: Fade In
+@keyframes fade_in {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}

app/templates/film.html

@@ -9,51 +9,63 @@
 	--bg-color-4: {{ film.color_4 }};
 }
 
+body {
+	background-attachment: fixed;
+}
+
 </style>
 
 <div class="film">
 	<div class="info">
-		<h1>
+		<div class="info-meta">
-			<span>{{ film.data.title | safe }}</span>
+			<h1>
-			<span>{{ film.data.title_zh | safe }}</span>
+				<span class="font-bold">{{ film.data.title | safe }}</span>
-		</h1>
+				<span>{{ film.data.title_zh | safe }}</span>
-		<h2>
+			</h1>
-			{% for director in film.data.director %}
+			<h2>
-			{{ director|safe }}<br>
+				{% for director in film.data.director %}
-			{% endfor %}
+				{{ director|safe }}<br>
-		</h2>
+				{% endfor %}
-		<div class="details">
+			</h2>
-			{{ film.data.date }}, {{ film.duration }}
+			<div class="details">
+				{{ film.data.date}}, {{ film.duration }}
+            </div>
+				
+		</div>	
+		<div class="video-block">			
+			<video src="{{ settings.TIMELINE_PREFIX }}{{ film.padma_id }}/loop.mp4" autoplay loop muted playsinline></video>
 		</div>
-		<video src="{{ settings.TIMELINE_PREFIX }}{{ film.padma_id }}/loop.mp4" autoplay loop muted playsinline></video>
+		<div class="summary-block">
-		<p>{{ film.data.summary|safe }}</p>
+			<p>{{ film.data.summary|safe }}</p>
-		<br>
+                <br>
-		<p>{{ film.data.summary_zh|safe }}</p>
+            <p>{{ film.data.summary_zh|safe }}</p>
-		<div class="bio">
+        </div>
-			<div class="en">
+		<div class="bio-block">
-				{{film.data.director.0}}: {{ film.data.bio|safe }}
+			<div class="bio">
-			</div>
+				<div class="en">
-			<div class="zh">
+					{{film.data.director.0}}: {{ film.data.bio|safe }}
-				{{film.data.director.1}}: {{ film.data.bio_zh|safe }}
+				</div>
+				<div class="zh">
+					{{film.data.director.1}}: {{ film.data.bio_zh|safe }}
+				</div>
 			</div>
 		</div>
-	</div>
+		<div class="play">
-	<div class="play">
+			<div class="texts">
-		<div>
+				{% for text in film.related_texts %}
-			<a href="" id="play-fullscreen">Play</a>
+				<div class="text">
-		</div>
+					<a href="{{ text.get_absolute_url }}">
-		<div class="texts">
+						{{ text.title }}<br>
-			{% for text in film.related_texts %}
+						{{ text.byline }}
-			<div class="text">
+					</a>
-				<a href="{{ text.get_absolute_url }}">
+				</div>
-					{{ text.title }}<br>
+				{% endfor %}
-					{{ text.byline }}
+			</div>
-				</a>
+			<div class="film-play-block">
+				<div><a href="" id="play-fullscreen" class="icon-play"><span>&#x25b6;</span></a></div>
+				<div class="film-play-spacer">OR</div>
+				<div><a href="https://pad.ma/{{ film.padma_id }}/info" target="_blank">watch on pad.ma</a></div>
 			</div>
-			{% endfor %}
-		</div>
-		<div>
-			<a href="https://pad.ma/{{ film.padma_id }}/info" target="_blank">Open on pad.ma</a>
 		</div>
 	</div>
 </div>

app/templates/films.html

@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% block body_class%}animated{% endblock %}
+{% block body_class%}animated animated-text{% endblock %}
 {% block main %}
 <div class="films">
 {% for film in films %}

app/templates/index.html

@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% block body_class%}animated{% endblock %}
+{% block body_class%}animated animated-text{% endblock %}
 {% block main %}
 <div class="index">
 	Phantasmapolis<br>

app/templates/page.html

@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 {% block title %}{{ page.title }}– Phantas.ma/polis{% endblock title %}
-{% block body_class%}animated{% endblock %}
+{% block body_class%}animated animated-text{% endblock %}
 {% block main %}
 <div class="page {{ page.slug }}">
 	{{ page.body | safe }}

app/templates/texts.html

@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% block body_class%}animated{% endblock %}
+{% block body_class%}animated animated-text{% endblock %}
 {% block main %}
 
 <div class="texts">