diff --git a/data/uploads/news_02.json b/data/uploads/news_02.json
index cbd2690f569b1913a71b790861ea547be9dd1edc..3dcee668da5b603575e8728d08ce8d45071cc6f1 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 8730a51b7b30a084bd10a23b9a96fe61a5d8cd19..17b3aacf7858edefe2a8a8ee93ff82843ee19cd6 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 c53723d61df1426c116539339e2cafe0207f3e63..0fb75c8631bed01498a16d1d3a84538791b4c632 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 3ae6056629fe6c53e33f97fa14f8eb6e2be4c6d0..868b04596eb2619844c4803fecb6c20672aac2c5 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 9d67992f00980218df464386fcf2bc12b8a8b931..273d2be48c0c74fa9c37a4e5bd5f27ce3ac3dd4b 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 8fdace0216502452a1ed69b1de4932e3c2a635bc..e4c033ef299aa60f69926f513cf5b6873e7c3d8c 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 e6074b35d8349cad30d7566bb24b76cf2cf0ad09..e0cf171827b722f39b5390c7cff87b64aa5d8579 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 {