Only portrait mode is currently supported - please rotate your device.
Page History
HTML |
---|
<link rel="stylesheet" type="text/css" href="https://gsvlabs-confluence-files.s3-us-west-2.amazonaws.com/stylesheets/ESG/eventsDashboardStylesheet.css" /> <script type="text/javascript" src="https://gsvlabs-confluence-files.s3-us-west-2.amazonaws.com/js/esg/eventsDashboardScript.js?v=1"></script> <style> .wiki-content .ev-banner-container .ev-banner-title .card-title { background-image: unset !important; -webkit-background-clip: unset !important; background-clip: unset !important; <!-- REBRAND STYLING --> <style> .wiki-content #announcementcontainer { background-color: #d7b8f7 !important; } .wiki-content #announcementcontainer .announcementcard .card-subtitle { color: black !important; } .wiki-content #announcementcontainer .announcementcard .card-description { color: black !important; } .countryFilterContainer #country-placeholderwiki-content .ev-cards-section .ev-cards-section-title { color: height: 45px; min-height: 45px; margin: 0px; text-align: left; width: calc(100% - 40px); justify-content: space-between; color: rgba(255, 255, 255, 0.69); padding: 0px 20px; cursor: text; position: relative; align-items: center; background: #1f1f1f; border: none; } .countryFilterContainer { justify-content: center !important; } .countryFilterContainer #country-clear-button { position: absolute; right: 0px; } .attendees { display: none; } @media screen and (max-width: 640px) { .filtersContainer { justify-content: center; } } </style>black !important; } .wiki-content #announcementcontainer .announcementcard a { color: black !important; border: 1px solid black !important; } .change-slide-button { border: none !important; } div#my-watchlist-container { background: #f2b006 !important; } div#all-events { background: #006920 !important; } h2#CopyofDashboardRebrand-AllEvents { color: white !important; } .active, .cdot:hover { background-color: #1c662e !important; } .wiki-content .ev-search-container { background-color: #6797f3 !important; } .wiki-content #events-searchbar { background: #113867 !important; border: 1px solid #113867 !important; } .countryFilterContainer { border: 1px solid #113867 !important; } .countryFilterContainer #country-placeholder { background: #113867 !important; } #startdate, #enddate { background: #113867 !important; border: 1px solid #113867 !important; } .dateFilter { color: #113867 !important; } .wiki-content .ev-cards-outer-container { padding: 0px !important; } .eventcard { border: 1px solid #113867 !important; } div#my-watchlist-container { background: #f2b006 !important; } div#all-events { background: #006920 !important; } h2#CopyofDashboardRebrand-AllEvents { color: white !important; } #my-watchlist-container #no-watchlist-yet-message { background-color: #113867 !important; } </style> |
HTML |
---|
<link rel="stylesheet" type="text/css" href="https://gsvlabs-confluence-files.s3-us-west-2.amazonaws.com/stylesheets/ESG/eventsDashboardStylesheet.css" />
<script type="text/javascript" src="https://gsvlabs-confluence-files.s3-us-west-2.amazonaws.com/js/esg/eventsDashboardScript.js?v=1"></script>
<style>
|
HTML |
<style> .wiki-content .ev-cards-outer-container { background-image: none; background-size: cover; background-repeat: no-repeat; background-color: #f3f1eb; } #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-searchbanner-container { padding-bottom: 45px; } .countryFilterContainer { height: 49px.ev-banner-title .card-title { background-image: unset !important; -webkit-background-clip: unset !important; background-clip: unset !important; min-heightcolor: 49pxblack !important; } .countryFilterContainer #country-placeholder { font-size height: 14px45px; } } </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> min-height: 45px; margin: 0px; text-align: left; width: calc(100% - 40px); justify-content: space-between; color: rgba(255, 255, 255, 0.69); padding: 0px 20px; cursor: text; position: relative; align-items: center; background: #1f1f1f; border: none; } .countryFilterContainer { justify-content: center !important; } .countryFilterContainer #country-clear-button { position: absolute; right: 0px; } .attendees { display: none; } @media screen and (max-width: 640px) { .filtersContainer { justify-content: center; } } </style> |
HTML |
---|
<style>
.wiki-content .ev-cards-outer-container {
background-image: none;
background-size: cover;
background-repeat: no-repeat;
background-color: #f3f1eb;
}
#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;
}
.countryFilterContainer {
height: 49px !important;
min-height: 49px;
}
.countryFilterContainer #country-placeholder {
font-size: 14px;
}
}
</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> |
Custom section | ||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||
Custom section | ||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||
Show If | ||||||||||||||||||||||||||||||||||||||
|
Custom section | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
|
CustomCSS | flex-direction: column; width: 100%; max-width: 100%; |
---|---|
ContainerID | announcements-wrapper |
Class | ev-banner |
ConfiForms PlainView | ||||||
---|---|---|---|---|---|---|
| ||||||
<div class="announcementcard fade">
<div class="imgalign">
<img class="announcement-image" src="/download/attachments/95587037/[entry.image.asAttachment]"></img>
</div>
<div class="text-encompasser">
<div class="change-slide-buttons-container">
<div class="change-slide-button" onclick="plusSlides(-1)"><img src="/download/attachments/81517767/chev-left.png?api=v2" /></div>
<div class="change-slide-button" onclick="plusSlides(1)"><img src="/download/attachments/81517767/chev-right.png?api=v2" /></div>
</div>
<div class="text-container ev-banner-title">
<p class="card-title">[entry.title] </p>
</div>
<div class="text-container">
<font class="card-subtitle">[entry.subtitle] </font>
</div>
<div class="text-container">
<font class="card-description">[entry.description] </font>
</div>
<div class="announcement-links-container">
<a class="buttonHref" href="[entry.cardLink]" rel="nofollow" target="_blank" onclick="handleEventCardClick(this);" data-cardtype="announcement" data-cardurl="[entry.cardLink]" data-entryid="[entry.id]" data-cardtitle="[entry.title]">
[entry.cardButtonText]
</a>
</div>
</div>
</div> |
Carousel |
---|
Class | ev-search-container |
---|
HTML | |||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
<div class="filtersContainer events-search-main">
<div id="events-search-container">
<img src="/download/attachments/81517767/searchicon.png?api=v2" />
<input id="events-searchbar" type="text" autocomplete="off" placeholder="SEARCH FOR A SPECIFIC EVENT" />
</div>
<div class="countryFilterContainer">
<input type='text' id='country-placeholder' placeholder='Country' onkeyup='handleCountrySearch(this, event)' />
<ul id="countryFilter">
</ul>
<div id='country-clear-button' style="display:none;
|
CustomCSS | flex-direction: column; |
---|---|
ContainerID | event-search-result-cards |
Class | ev-cards-section |
HTML |
---|
<h2 class="ev-cards-section-title">Search Results</h2> |
Class | events-container |
---|
HTML |
---|
<div class="ev-cards-outer-container">
<div id="ev-cards-main-view"> |
|
Custom section | ||
---|---|---|
| ||
|
Custom section | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
Custom section | ||||||||
|
HTML |
---|
<h2 class="ev-cards-section-title">My Events</h2> |
Class | scrolling-ev-cards-wrapper |
---|
filter | ownedBy:[entry._user] |
---|---|
pageTitle | Create Event |
formName | createEvent |
sort | startDate asc |
ContainerID | upcoming-events-section |
---|---|
Class | ev-cards-section ev-cards-section-scrollable |
HTML |
---|
<h2 class="ev-cards-section-title">Upcoming Events</h2> |
Class | scrolling-ev-cards-wrapper |
---|
filter | endDate:>=[now] AND publish:true |
---|---|
pageTitle | Create Event |
formName | createEvent |
sort | startDate asc |
ContainerID | my-watchlist-container |
---|---|
Class | ev-cards-section ev-cards-section-scrollable |
HTML |
---|
<h2 class="ev-cards-section-title">My>Search Watchlist<Results</h2> |
Custom section | ||
---|---|---|
| ||
HTML |
---|
<div class=" conf-macro output-block fullSite" data-hasbody="true" data-macro-name="confiform-cleanview"></div> |
HTML |
</div>ev-cards-outer-container"> <div id="ev-cards-main-view"> |
Custom section | ||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||
|
Custom section | |||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||
|
showcustom-ifsection | |||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||||||
|
HTML |
---|
</div>
</div> |
HTML |
---|
<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> |
|
HTML |
---|
</div> |
Custom section | ||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||
|
Custom section | |||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||
|
Show If | ||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||
|
HTML |
---|
</div>
</div> |
HTML |
---|
<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> |
HTML |
---|
<script>
const getMinutesUntilEventStart = (startDate) => {
let nowDate = new Date( |
HTML |
<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 pastCardseventStartDate = new Array.from(pastEvents.getElementsByClassName('eventcard'))Date(startDate); for (let idiffMilliseconds = 0; i < pastCards.length; i++) { let currCard = pastCards[i]; // Check if event was offline if (currCard.dataset.offline == "true") { continue } eventStartDate.getTime() - nowDate.getTime(); let diffMinutes = (diffMilliseconds / 60000); return diffMinutes; } const getMinutesUntilEventEnd = (endDate) => { let nowDate = new Date(); let liveEleventEndDate = document.createElement("div"new Date(endDate); let diffMilliseconds = eventEndDate.getTime() - liveElnowDate.classList.add('watch-indicator'getTime(); let diffMinutes liveEl.innerHTML = "<img class='watch-indicator-icon' src='/download/attachments/81517767/playicon.png?api=v2' /> RECORDED"; (diffMilliseconds / 60000); currCard.insertAdjacentElement('afterbegin', liveEl); } let allEventsreturn diffMinutes; } const showPastWatchIndicators = () => { let pastEvents = document.getElementById('allscroll-section-events3'); let allCardspastCards = Array.from(allEventspastEvents.getElementsByClassName('eventcard')); for (let i = 0; i < allCards.length; i++) { let currCard = allCards[i]; let currCardEnd = currCard.dataset.enddate; (let i = 0; i < pastCards.length; i++) { let minsTilEndcurrCard = getMinutesUntilEventEnd(currCardEnd); if (minsTilEnd < 0) { pastCards[i]; // Check if event was offline if (currCard.dataset.offline == "true") { continue 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} let allEvents = currCard.dataset.startdatedocument.getElementById('all-events'); let minsTilStartallCards = getMinutesUntilEventStart(currCardStart Array.from(allEvents.getElementsByClassName('eventcard')); iffor (minsTilStartlet i <= 0) { // Check if event is offline if (currCard.dataset.offline == "true") { continue; } let liveEl = document.createElement("div"); i < allCards.length; i++) { let currCard = allCards[i]; let currCardEnd liveEl.classList.add('live-circle')= currCard.dataset.enddate; let minsTilEnd liveEl.innerText = "LIVE"getMinutesUntilEventEnd(currCardEnd); if (minsTilEnd currCard.insertAdjacentElement('afterbegin', liveEl); } } } } window.addEventListener('load', () => { let upcomingEvents = document.getElementById('upcoming-events-section'); let upcomingCards = Array.from(upcomingEvents.getElementsByClassName('eventcard')); for (let i = 0; i < upcomingCards.length; i++) { let currCard = upcomingCards[i]; < 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); } } //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> |
HTML |
<!-- REBRAND STYLING --> <style> .wiki-content #announcementcontainer { background-color: #d7b8f7; } .wiki-content #announcementcontainer .announcementcard .card-subtitle { color: black; } .wiki-content #announcementcontainer .announcementcard .card-description { color: black; } .wiki-content .ev-cards-section .ev-cards-section-title { color: black; } .wiki-content #announcementcontainer .announcementcard a { color: black !important; border: 1px solid black; } .change-slide-button { border: none; } div#my-watchlist-container { background: #f2b006; } div#all-events { background: #006920; } h2#CopyofDashboardRebrand-AllEvents { color: white; } .active, .cdot:hover { background-color: #1c662e; } .wiki-content .ev-search-container { background-color: #6797f3 } .wiki-content #events-searchbar { background: #113867; border: 1px solid #113867; } .countryFilterContainer { border: 1px solid #113867; } .countryFilterContainer #country-placeholder { background: #113867; } #startdate, #enddate { background: #113867; border: 1px solid #113867; } .dateFilter { color: #113867; } .wiki-content .ev-cards-outer-container { padding: 0px; } .eventcard { border: 1px solid #113867; } div#my-watchlist-container { background: #f2b006; } div#all-events { background: #006920; } h2#CopyofDashboardRebrand-AllEvents { color: white; } #my-watchlist-container #no-watchlist-yet-message { background-color: #113867; currCard.insertAdjacentElement('afterbegin', liveEl); } } } } window.addEventListener('load', () => { let upcomingEvents = document.getElementById('upcoming-events-section'); 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> |