IEEE.org     |     IEEE Xplore Digital Library     |     IEEE Standards     |     IEEE Spectrum     |     More Sites

Commit cf8bdf2f authored by Amy Rose's avatar Amy Rose
Browse files

use base layout for project pages, prettify embeds

parent 51cd8647
Pipeline #784 passed with stage
in 3 minutes and 19 seconds
......@@ -50,7 +50,7 @@ layout: default
<!-- Banner & Title -->
<div
id="banner"
style="background-image: url({{ page.banner | relative_url }})" >
style="background-image: url({{ page.banner | default: layout.banner | relative_url }})" >
{% assign newline = "%0A" | url_decode %}
<h1> {{ title | replace: newline, "<br/>" }} </h1>
</div>
......
---
layout: default
layout: base
banner: /assets/images/banners/our-work.webp
load_scripts:
- /assets/js/project.js
---
<main>
<div id="project-content" style="display: none;">
{% comment %}
Divs to be filled in by the project.js script
{% endcomment %}
<h2>About</h2>
<div id="project-about"></div>
<div id="project-owner"></div> <!-- TODO: include for this? -->
<div id="project-services">
{{ content }}
</div>
{% comment %}
More divs to be filled in by project.js
{% endcomment %}
<h2>Metrics</h2>
<div id="project-metrics"></div>
<!-- TODO: include for this?
<h2>Team Members</h2>
<div id="project-members"></div>
-->
<div id="project-content" style="display: none;">
{% comment %}
Divs to be filled in by the project.js script
{% endcomment %}
<h2>About</h2>
<div id="project-about"></div>
<div id="project-owner"></div> <!-- TODO: include for this? -->
<div id="project-services">
{{ content }}
</div>
<noscript>
<p class="error">
Sorry, project information requires JavaScript enabled in order to
be loaded. Please enable JavaScript to see project information.
</p>
</noscript>
<div id="loading-error" style="display: none;">
<p class="error">
Sorry, there was a problem loading the information for this project.
Please try again later. <br/>
If this problem persists, please contact Michael Nolan using the
contact information below.
</p>
</div>
</main>
{% comment %}
More divs to be filled in by project.js
{% endcomment %}
<h2>Metrics</h2>
<div id="project-metrics"></div>
<!-- TODO: include for this?
<h2>Team Members</h2>
<div id="project-members"></div>
-->
</div>
<!-- <Errors> -->
<noscript>
<p class="error">
Sorry, project information requires JavaScript enabled in order to
be loaded. Please enable JavaScript to see project information.
</p>
</noscript>
<div id="loading-error" style="display: none;">
<p class="error">
Sorry, there was a problem loading the information for this project.
Please try again later. <br/>
If this problem persists, please contact Michael Nolan using the
contact information below.
</p>
</div>
<!-- </Errors> -->
<script>
const MYSTIC_PID = "{{ page.mystic-pid }}";
fetch_data();
......
---
layout: project
name: Foo6
tldr: A Foo6 for your Bar6
owner: Asdf
mystic-pid: h
---
## List of Services
- Lorem Ipsum
- Dolor Sit Amet
- Foo Bar
## Result
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
......@@ -24,3 +24,4 @@
/* Special and/or one-off styles */
@import "special/event";
@import "special/project";
/* Styles for project information pages */
/* TODO */
#project-metrics {
display: flex;
flex-direction: row;
flex-wrap: wrap;
.embed-container {
width: 45%;
margin: 0.5em;
padding: 0.5em;
box-shadow: 0px 5px 10px #666;
border-radius: 0.5em;
iframe {
width: 100%;
aspect-ratio: 1 / 1;
border: none;
}
}
}
......@@ -28,7 +28,8 @@ function fetch_data() {
});
}
})
.catch(() => {
.catch(error => {
console.log(error);
unhide_div("loading-error");
});
}
......@@ -46,12 +47,27 @@ function populate(data) {
const project_metrics_div = document.getElementById("project-metrics");
data["embeds"].forEach(embed_data => {
const embed = document.createElement("iframe");
embed.setAttribute("src", new URL(embed_data["url"], MYSTIC_URL));
embed.setAttribute("title", embed_data["title"]);
const embed = create_embed(embed_data);
project_metrics_div.appendChild(embed);
});
/* Content ready to show */
unhide_div("project-content");
}
function create_embed(embed_data) {
/* Create the container */
const embed_container = document.createElement("div");
embed_container.classList.add("embed-container");
/* Create the embed */
const embed = document.createElement("iframe");
embed.setAttribute("src", new URL(embed_data["url"], MYSTIC_URL));
embed.setAttribute("title", embed_data["title"]);
embed.setAttribute("scrolling", "no");
if (embed_data["tall"]) {
embed.classList.add("tall");
}
/* Put the embed in the container and return it */
embed_container.appendChild(embed);
return embed_container;
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment