From 032d080f86aa0434bc71c17b20d2885ae13f7514 Mon Sep 17 00:00:00 2001
From: Silas Meister <silas.meister@stud.h-da.de>
Date: Wed, 20 Sep 2023 15:40:00 +0200
Subject: [PATCH] Finish task 2
---
data/uploads/news_02.json | 2 +-
functions.js | 28 ++++++++++++++++++++++++++--
index.html | 12 ++++++++++--
php/Index.php | 8 +++++---
php/Page.php | 1 +
php/constants.php | 2 +-
styles.css | 5 +++--
7 files changed, 47 insertions(+), 11 deletions(-)
diff --git a/data/uploads/news_02.json b/data/uploads/news_02.json
index cbd2690..3dcee66 100644
--- a/data/uploads/news_02.json
+++ b/data/uploads/news_02.json
@@ -2,7 +2,7 @@
"news":[
{
"title":"NASA Events",
- "imgurl":"../img/astronaut.jpg",
+ "imgurl":"",
"content":"Wednesday, Sept. 7: OSIRIS-REx Science and Engineering Talk (12 p.m. EDT), Asteroid Panel Discussion (1 p.m. EDT), NASA TV"
},
{
diff --git a/functions.js b/functions.js
index 8730a51..17b3aac 100644
--- a/functions.js
+++ b/functions.js
@@ -1,15 +1,19 @@
let slideNumber = 0;
-const newsImageSources = ['img/nasa_news_1.jpg', 'img/nasa_news_2.jpg', 'img/nasa_news_3.jpg'];
+const newsImageSources = ['../img/nasa_news_1.jpg', '../img/nasa_news_2.jpg', '../img/nasa_news_3.jpg'];
const newsTitles = ['Space Station', 'Earth', 'NASA Goddard'];
const newsSubtitles = ['Expedition 48 Crew Lands Safely on Earth', 'NASA Announces Summer 2023 Hottest on Record', 'NASA\'s Webb Snaps Supersonic Outflow of Young Star'];
-window.onload = onload();
+document.addEventListener("DOMContentLoaded", function() {
+ onload();
+});
function onload() {
console.log("Page loaded");
setInterval(slideImage, 30000);
+
+ setHoverForOverlay();
}
function slideImage() {
@@ -28,4 +32,24 @@ function slideImage() {
slideImage.src = newsImageSource;
slideTitle.textContent = newsTitle;
slideSubtitle.textContent = newsSubtitle;
+}
+
+function setHoverForOverlay() {
+ let overlayDescription = document.querySelector('.overlay > .overlay-description');
+
+ overlayDescription.addEventListener("mouseover", function() { hover(true); })
+ overlayDescription.addEventListener("mouseout", function() { hover(false); })
+}
+
+function hover(hoverActivated) {
+ let height = "";
+
+ if (hoverActivated)
+ height = "100%";
+ else
+ height = "auto";
+
+ document.querySelectorAll(".overlay").forEach(function(element) {
+ element.style.height = height;
+ });
}
\ No newline at end of file
diff --git a/index.html b/index.html
index c53723d..0fb75c8 100644
--- a/index.html
+++ b/index.html
@@ -66,6 +66,8 @@
<article class="content-small">
<div>
<div class="article-content-container">
+ <div class="article-background"></div>
+
<a class="article-link" href="#"></a>
<div class="article-content nasa-events-container">
@@ -101,8 +103,10 @@
<img class="article-image" src="img/astronaut.jpg" alt="" />
<div class="article-content overlay">
- <h4 class="overlay-title">Expedition 48</h4>
- <h4 class="overlay-description">NASA's Record-braking Astronaut Crewmates Safely Return to Earth. Here is some additional information to the article where you can read more!</h4>
+ <div class="overlay">
+ <h4 class="overlay-title">Expedition 48</h4>
+ <h4 class="overlay-description">NASA's Record-braking Astronaut Crewmates Safely Return to Earth. Here is some additional information to the article where you can read more!</h4>
+ </div>
</div>
</div>
</div>
@@ -136,6 +140,8 @@
<article class="content-small">
<div>
<div class="article-content-container">
+ <div class="article-background"></div>
+
<a class="article-link" href="#"></a>
<div class="article-content">
@@ -147,6 +153,8 @@
<article class="content-medium">
<div>
<div class="article-content-container">
+ <div class="article-background"></div>
+
<a class="article-link" href="#"></a>
<img class="article-image" src="img/ocean_worlds.jpg" alt="" />
diff --git a/php/Index.php b/php/Index.php
index 3ae6056..868b045 100644
--- a/php/Index.php
+++ b/php/Index.php
@@ -169,9 +169,11 @@ EOT;
<img class="article-image" src="$imgurl" alt="" />
- <div class="article-content overlay">
- <h4 class="overlay-title">$title</h4>
- <h4 class="overlay-description">$content</h4>
+ <div class="article-content">
+ <div class="overlay">
+ <h4 class="overlay-title">$title</h4>
+ <h4 class="overlay-description">$content</h4>
+ </div>
</div>
</div>
</div>
diff --git a/php/Page.php b/php/Page.php
index 9d67992..273d2be 100644
--- a/php/Page.php
+++ b/php/Page.php
@@ -48,6 +48,7 @@ abstract class Page {
<title>$title</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
+ <script src="../functions.js"></script>
<link rel="stylesheet" style="text/css" href="../styles.css" />
</head>
EOT;
diff --git a/php/constants.php b/php/constants.php
index 8fdace0..e4c033e 100644
--- a/php/constants.php
+++ b/php/constants.php
@@ -1,5 +1,5 @@
<?php
define('NEWS_FILE', 'news_file');
- define('DEFAULT_NEWS_FILE', '../data/upload/news_01.json');
+ define('DEFAULT_NEWS_FILE', '../data/uploads/news_01.json');
define('EXPIRES', 'EXPIRES')
?>
\ No newline at end of file
diff --git a/styles.css b/styles.css
index e6074b3..e0cf171 100644
--- a/styles.css
+++ b/styles.css
@@ -358,11 +358,10 @@ main {
font-size: 0.8rem;
}
-
.overlay {
display: flex;
flex-direction: column;
- justify-content: flex-end;
+ justify-content: flex-start;
align-items: flex-start;
position: absolute;
bottom: 0;
@@ -375,6 +374,7 @@ main {
background-color: #39719e;
opacity: 0.85;
font-size: 0.9rem;
+ flex: 0 0 auto;
}
.overlay > .overlay-description {
@@ -388,6 +388,7 @@ main {
overflow: hidden;
color: #111111;
font-size: 0.9rem;
+ flex: 1 1 auto;
}
.overlay > .overlay-description:hover {
--
GitLab