Skip to content
Snippets Groups Projects
Commit 032d080f authored by Silas Meister's avatar Silas Meister
Browse files

Finish task 2

parent b9237a4c
No related branches found
No related tags found
No related merge requests found
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
"news":[ "news":[
{ {
"title":"NASA Events", "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" "content":"Wednesday, Sept. 7: OSIRIS-REx Science and Engineering Talk (12 p.m. EDT), Asteroid Panel Discussion (1 p.m. EDT), NASA TV"
}, },
{ {
......
let slideNumber = 0; 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 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']; 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() { function onload() {
console.log("Page loaded"); console.log("Page loaded");
setInterval(slideImage, 30000); setInterval(slideImage, 30000);
setHoverForOverlay();
} }
function slideImage() { function slideImage() {
...@@ -28,4 +32,24 @@ function slideImage() { ...@@ -28,4 +32,24 @@ function slideImage() {
slideImage.src = newsImageSource; slideImage.src = newsImageSource;
slideTitle.textContent = newsTitle; slideTitle.textContent = newsTitle;
slideSubtitle.textContent = newsSubtitle; 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
...@@ -66,6 +66,8 @@ ...@@ -66,6 +66,8 @@
<article class="content-small"> <article class="content-small">
<div> <div>
<div class="article-content-container"> <div class="article-content-container">
<div class="article-background"></div>
<a class="article-link" href="#"></a> <a class="article-link" href="#"></a>
<div class="article-content nasa-events-container"> <div class="article-content nasa-events-container">
...@@ -101,8 +103,10 @@ ...@@ -101,8 +103,10 @@
<img class="article-image" src="img/astronaut.jpg" alt="" /> <img class="article-image" src="img/astronaut.jpg" alt="" />
<div class="article-content overlay"> <div class="article-content overlay">
<h4 class="overlay-title">Expedition 48</h4> <div class="overlay">
<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> <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> </div>
</div> </div>
...@@ -136,6 +140,8 @@ ...@@ -136,6 +140,8 @@
<article class="content-small"> <article class="content-small">
<div> <div>
<div class="article-content-container"> <div class="article-content-container">
<div class="article-background"></div>
<a class="article-link" href="#"></a> <a class="article-link" href="#"></a>
<div class="article-content"> <div class="article-content">
...@@ -147,6 +153,8 @@ ...@@ -147,6 +153,8 @@
<article class="content-medium"> <article class="content-medium">
<div> <div>
<div class="article-content-container"> <div class="article-content-container">
<div class="article-background"></div>
<a class="article-link" href="#"></a> <a class="article-link" href="#"></a>
<img class="article-image" src="img/ocean_worlds.jpg" alt="" /> <img class="article-image" src="img/ocean_worlds.jpg" alt="" />
......
...@@ -169,9 +169,11 @@ EOT; ...@@ -169,9 +169,11 @@ EOT;
<img class="article-image" src="$imgurl" alt="" /> <img class="article-image" src="$imgurl" alt="" />
<div class="article-content overlay"> <div class="article-content">
<h4 class="overlay-title">$title</h4> <div class="overlay">
<h4 class="overlay-description">$content</h4> <h4 class="overlay-title">$title</h4>
<h4 class="overlay-description">$content</h4>
</div>
</div> </div>
</div> </div>
</div> </div>
......
...@@ -48,6 +48,7 @@ abstract class Page { ...@@ -48,6 +48,7 @@ abstract class Page {
<title>$title</title> <title>$title</title>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<script src="../functions.js"></script>
<link rel="stylesheet" style="text/css" href="../styles.css" /> <link rel="stylesheet" style="text/css" href="../styles.css" />
</head> </head>
EOT; EOT;
......
<?php <?php
define('NEWS_FILE', 'news_file'); 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') define('EXPIRES', 'EXPIRES')
?> ?>
\ No newline at end of file
...@@ -358,11 +358,10 @@ main { ...@@ -358,11 +358,10 @@ main {
font-size: 0.8rem; font-size: 0.8rem;
} }
.overlay { .overlay {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
...@@ -375,6 +374,7 @@ main { ...@@ -375,6 +374,7 @@ main {
background-color: #39719e; background-color: #39719e;
opacity: 0.85; opacity: 0.85;
font-size: 0.9rem; font-size: 0.9rem;
flex: 0 0 auto;
} }
.overlay > .overlay-description { .overlay > .overlay-description {
...@@ -388,6 +388,7 @@ main { ...@@ -388,6 +388,7 @@ main {
overflow: hidden; overflow: hidden;
color: #111111; color: #111111;
font-size: 0.9rem; font-size: 0.9rem;
flex: 1 1 auto;
} }
.overlay > .overlay-description:hover { .overlay > .overlay-description:hover {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment