|
|
|
<style>
.wiki-content .ev-cards-outer-container {
background-image: url("https://gsvlabs-confluence-files.s3-us-west-2.amazonaws.com/images/EWC+2020/gradient-vertical.jpg");
background-size: cover;
background-repeat: no-repeat;
}
#announcements-wrapper > span.conf-macro {
height: 100%;
}
#additional-filters-button {
width: 280px;
}
.zran-event {
display: none;
}
@media only screen and (max-width: 480px) {
.events-search-main {
flex-direction: column;
align-items: center;
height: 75px;
flex-wrap: nowrap;
justify-content: flex-start;
padding-bottom: 0px;
overflow: hidden;
}
.wiki-content .ev-search-container {
padding-bottom: 45px;
}
}
</style>
<script>
// New Version of Format Date (Asynchronous)
async function formatDate2(d) {
const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var hh = d.getHours();
var m = d.getMinutes();
var s = d.getSeconds();
var dd = "am";
var h = hh;
if (h >= 12) {
h = hh-12;
dd = "pm";
}
if (h == 0) {
h = 12;
}
m = m<10?"0"+m:m;
s = s<10?"0"+s:s;
var strTime = h+":"+m+" "+dd
return strTime + " on " + monthNames[d.getMonth()] + " " + d.getDate();
// return dayNames[d.getDay()] + ", " + monthNames[d.getMonth()] + " " + d.getDate() + " " + d.getFullYear() + ", " + strTime;
}
</script> |
|
|
|
<div class="ev-cards-outer-container"> <div id="ev-cards-main-view"> |
|
|
|
</div> |
|
|
|
</div> </div> |
<style>
#unpublished-events .conf-macro.output-block[data-macro-name=confiform-cleanview] {
padding: 0px 35px;
display: grid;
grid-template-columns: repeat(auto-fill, 280px);
grid-gap: 20px;
height: auto !important;
justify-content: space-evenly;
}
</style> |
<script>
const getMinutesUntilEventStart = (startDate) => {
let nowDate = new Date();
let eventStartDate = new Date(startDate);
let diffMilliseconds = eventStartDate.getTime() - nowDate.getTime();
let diffMinutes = (diffMilliseconds / 60000);
return diffMinutes;
}
const getMinutesUntilEventEnd = (endDate) => {
let nowDate = new Date();
let eventEndDate = new Date(endDate);
let diffMilliseconds = eventEndDate.getTime() - nowDate.getTime();
let diffMinutes = (diffMilliseconds / 60000);
return diffMinutes;
}
const showPastWatchIndicators = () => {
let pastEvents = document.getElementById('scroll-section-3');
let pastCards = Array.from(pastEvents.getElementsByClassName('eventcard'));
for (let i = 0; i < pastCards.length; i++) {
let currCard = pastCards[i];
// Check if event was offline
if (currCard.dataset.offline == "true") {
continue
}
let liveEl = document.createElement("div");
liveEl.classList.add('watch-indicator');
liveEl.innerHTML = "<img class='watch-indicator-icon' src='/download/attachments/81517767/playicon.png?api=v2' /> RECORDED";
currCard.insertAdjacentElement('afterbegin', liveEl);
}
let allEvents = document.getElementById('all-events');
let allCards = Array.from(allEvents.getElementsByClassName('eventcard'));
for (let i = 0; i < allCards.length; i++) {
let currCard = allCards[i];
let currCardEnd = currCard.dataset.enddate;
let minsTilEnd = getMinutesUntilEventEnd(currCardEnd);
if (minsTilEnd < 0) {
// Check if event was offline
if (currCard.dataset.offline == "true") {
continue
}
let liveEl = document.createElement("div");
liveEl.classList.add('watch-indicator');
liveEl.innerHTML = "<img class='watch-indicator-icon' src='/download/attachments/81517767/playicon.png?api=v2' /> RECORDED";
currCard.insertAdjacentElement('afterbegin', liveEl);
} else {
// Live now or upcoming (show live indicator if minsTilStart <= 0)
let currCardStart = currCard.dataset.startdate;
let minsTilStart = getMinutesUntilEventStart(currCardStart);
if (minsTilStart <= 0) {
// Check if event is offline
if (currCard.dataset.offline == "true") {
continue;
}
let liveEl = document.createElement("div");
liveEl.classList.add('live-circle');
liveEl.innerText = "LIVE";
currCard.insertAdjacentElement('afterbegin', liveEl);
}
}
}
}
window.addEventListener('load', () => {
let upcomingEvents = document.getElementById('scroll-section-1');
let upcomingCards = Array.from(upcomingEvents.getElementsByClassName('eventcard'));
for (let i = 0; i < upcomingCards.length; i++) {
let currCard = upcomingCards[i];
let currCardStart = currCard.dataset.startdate;
let minsTilStart = getMinutesUntilEventStart(currCardStart);
if (minsTilStart <= 0) {
// Check if event is offline
if (currCard.dataset.offline == "true") {
continue;
}
let liveEl = document.createElement("div");
liveEl.classList.add('live-circle');
liveEl.innerText = "LIVE";
currCard.insertAdjacentElement('afterbegin', liveEl);
}
}
//if (AJS.params.remoteUser == "alex@gsvlabs.com") {
showPastWatchIndicators()
//}
});
</script>
<style>
.live-circle {
font-size: 13px;
padding: 3px 18px;
text-transform: uppercase;
font-weight: bold;
background-color: #cc1f1f;
color: white;
position: absolute;
z-index: 2;
margin: 8px 8px;
box-shadow: 1px 1px 5px #00000054;
}
</style>
<style>
.watch-indicator {
font-size: 12px;
padding: 3px 10px;
text-transform: uppercase;
font-weight: bold;
background-color: #036bc4;
color: white;
position: absolute;
z-index: 2;
margin: 8px 8px;
box-shadow: 1px 1px 5px #00000054;
border-radius: 3px;
display: flex;
justify-content: center;
align-items: center;
}
.watch-indicator-icon {
display: block;
width: 14px !important;
height: 14px !important;
margin-right: 6px;
padding-bottom: 2px;
}
</style> |