Page History

HTML
<script type="text/javascript" src="https://gsvlabs-confluence-files.s3-us-west-2.amazonaws.com/js/eit/events/eventsDashboardScript_EIT.js"></script>

HTML

<link rel="stylesheet" type="text/css" href="https://gsvlabs-confluence-files.s3-us-west-2.amazonaws.com/stylesheets/Pittsburgh/eventsDashboardStylesheet_Pittsburgh.css" />

<style>
.event-banner {
    background-image: url(https://gsvlabs-confluence-files.s3-us-west-2.amazonaws.com/images/EIT/eit-banner.jpeg);
    height: 368px;
    background-size: cover;
    background-position: center left;
    display: flex;
    align-items: center;
}

.event-banner-text {
    margin-left: 40px;
    color: var(--secondary-font-color);
    font-size: 50px;
    font-weight: 400;
}

.eventCategories p {
    font-size: 12px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    color: var(--primary-font-color);
}
.eventcard .heading {
    background: var(--primary-color);
    color: var(--secondary-font-color);
    font-family: Karla;
    font-size: 14px;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 1.5px;
    display:flex;
    justify-content: center;
    padding: 8px 0;
}
.eventcard .top .dates {
    display: none;
}

.eventcard .dates {display: none;}

.dateInputContainer img {
    filter: invert(0%) sepia(0%) saturate(7462%) hue-rotate(122deg) brightness(94%) contrast(101%) !important;
}
a#resetFilter {
	color: var(--primary-color) !important;
}
.eventcard .title {
    color: var(--primary-font-color) !important;
}
.countryFilterContainer ul#countryFilter li:hover {
  background: var(--primary-color);
  color: var(--secondary-font-color) !important;
  opacity: 0.8;
}
div#no-upcoming-yet-message {
    width: max-content !important;
    text-align: center;
    font-size: 16px;
    line-height: 1.8;
    margin: 0 auto;
    margin-top: 20px;
    padding: 20px 25px;
    background-color: #ffffff14;
    /* color: white; */
}

div#no-private-yet-message {
    width: max-content !important;
    text-align: center;
    font-size: 16px;
    line-height: 1.8;
    margin: 0 auto;
    margin-top: 20px;
    padding: 20px 25px;
}

div#no-private-yet-message p {
    font-size: 16px;
}

div#no-events-yet-message {
    width: max-content !important;
    text-align: center;
    font-size: 16px;
    line-height: 1.8;
    margin: 0 auto;
    margin-top: 20px;
    padding: 20px 25px;
}

div#no-events-yet-message p {
    font-size: 16px;
}

div#no-watchlist-yet-message p {
    color: var(--primary-font-color);
}

#ui-datepicker-div .ui-datepicker-today a {
    background-color: var(--primary-color-2) !important;
}
.events-search-main #events-search-container img {
    filter: invert(0%) sepia(0%) saturate(7462%) hue-rotate(
122deg
) brightness(94%) contrast(101%);
}
.program
:after {
  content  : "";
  position : absolute;
  z-index  : 1;
  bottom   : 35px;
  left     : 0;
  pointer-events   : none;
  background-image : linear-gradient(to bottom, 
                    rgba(255,255,255, 0), 
                    rgba(255,255,255, .9) 100%);
  width    : 100%;
  height   : 1em;
}
div#rw_theme_header {
    background: #ffffff !important;
}
#location-clear-button {
	display: flex;
    position: absolute;
    right: 0px;
    cursor: pointer;
    height: 12px;
    width: 12px;
    margin: 12px 10px;
}
/* Page Title */
.general-text-container {
    display: flex;
    flex-direction: column;
    width: 40%;
    padding: 100px 0px 0px 31px !important;
}

/* My Events Container */
#my-events-container {
	display: none;
}

/* Event Date */
.bigTimeContainer {
    height: auto;
    width: 54px;
    background: white;
    box-shadow: 1px 2px 11px 0 rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    /* justify-content: space-evenly; */
    align-items: center;
    padding-bottom: 5px;
    border: solid 1px #979797;
}

.bigTimeDate {
    color: var(--primary-font-color);
    font-size: 25px;
}

.bigTimeMonth {
    font-size: 14px;
    width: 100%;
    display: flex;
    justify-content: center;
    background: var(--secondary-color);
    color: var(--secondary-font-color) !important;
}

/* Event Program Card Styling */
.program span {
    background: transparent !important;
    color: var(--primary-font-color) !important;
	font-weight: 100;
	font-size: 14px !important;
}
.program {
    color: var(--primary-font-color) !important;
    font-family: unset !important;
    font-size: 14px !important;
    text-align: start;
    margin-left: 13px;
    margin-right: 13px;
	margin-top: 10px;
	overflow-y: auto;
    height: auto;
	font-weight: normal;
	padding-bottom: 14px;
}
br {
    display: none;
}
.program h1 {
    margin: 0;
    color: var(--primary-font-color) !important;
    font-size: 14px;
}
.program .p1 {
    font-size: 14px !important;
}
.program div {
    font-size: 14px !important;
    font-weight: normal !important;
}
/ * Location search bar */
.wiki-content #events-search-container {
    min-width: 280px;
    width: 25%;
    max-width: 320px;
}

#location-search-container img {
    position: relative !important;
    left: 0px !important;
    height: 12px !important;
    width: 12px !important;
    opacity: 0.7;
	cursor: pointer;
}

#location-search-container img:hover {
	filter: invert(0%) sepia(80%) saturate(588%) hue-rotate(349deg) brightness(98%) contrast(94%);
}

.wiki-content #location-searchbar {
	background: var(--secondary-color);
    color: var(--secondary-font-color);
  	box-shadow: none;
	font-size: 13px;
	width: calc(100% - 40px);	
	height: 15px;
	padding: 15px 20px;
	border: none;
}

/* Create Event Button */
a.createEventButton {
    display: none;
    box-sizing: border-box;
    transition: background-color .1s ease-out;
    border-radius: 3.01px;
    border-style: solid;
    border-width: 1px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-variant: normal;
    font-weight: 700;
    background-image: none;
    background-color: var(--primary-color-2);
    border-color: transparent;
    color: #344563;
    text-decoration: none;
    height: 2.14285714em;
    line-height: 1.42857143em;
    margin: 0;
    padding: 4px 10px;
    vertical-align: baseline;
    white-space: nowrap;
    color: black !IMPORTANT;
    border-radius: 0;
}
.createEventContainer {
    display: flex;
    justify-content: flex-end;
    margin: 10px 26px 0 0;
}

/* Dashboard Banner */
img.events-dashboard-banner {
    width: 100%;
    height: 368px;
	margin-bottom: -20px;
}
.events-dashboard-banner-container {
    margin: 0 0 -5px 0;
	width: 100%
}
.countryFilterContainer #cc-placeholder {
    height: 45px;
    min-height: 45px;
    margin: 0px;
    text-align: left;
    width: calc(100% - 40px);
    justify-content: space-between;
    padding: 0px 20px;
    cursor: text;
    position: relative;
    align-items: center;
    background: var(--primary-color);
  	border: 1px solid #ddd;
  	box-shadow: none;
}
.wiki-content .ev-cards-section .ev-cards-section-title {
	color: #000000 !important;
}
.wiki-content .ev-cards-outer-container {background-image: unset !important;}
.countryFilterContainer {
	justify-content: center !important;
}
.custom-section-container{
 flex-direction: column !important;
}
.countryFilterContainer #country-clear-button {
    position: absolute;
    right: 0px;
}

@media screen and (max-width: 640px) {
.filtersContainer {
	justify-content: center;
}
}
</style>

HTML

<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;
	align-self: center;
	padding-top: 70px;
  }
  .wiki-content .ev-search-container {
    padding-bottom: 45px;
  }
  .countryFilterContainer {
	height: 49px !important;
	min-height: 49px;
  }
  .countryFilterContainer #cc-placeholder {
	font-size: 14px;
  }
  .program {
	flex-shrink: 7;
  }
}
</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 y = d.getFullYear();
  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 monthNames[d.getMonth()] + " " + d.getDate() + ", " + d.getFullYear() + " at " + strTime;
  // return dayNames[d.getDay()] + ", " + monthNames[d.getMonth()] + " " + d.getDate() + " " + d.getFullYear() + ", " + strTime;
}
</script>

<script>
/* Allow Admins to Create Events */
var isAdmin = false;
var userGroups = [];
if (AJS.params.remoteUser) {
    // Group Data
    jQuery.ajax({
      url: "/rest/api/user/memberof?username=" + AJS.params.remoteUser,
      type: "get",
      dataType: 'json',
      async: false,
      success: function (data) {
        var res = data.results;
        for (var i = 0; i < res.length; i++) {
          var groupName = res[i].name;
          userGroups.push(groupName);
          if (groupName === 'confluence-administrators') {
            isAdmin = true;
          }
		  if (groupName === 'eit-admins' || groupName === 'eit-bilbao-admins') {
            isContentAdmin = true;
          }
          
        }
      }
    });
}
if(isAdmin || isContentAdmin) {
	console.log("Showing Create Event Button");
	$('.createEventButton').waitUntilExists(() => {
 		$('.createEventButton').show();
	});
}
</script>

Custom section

Class	ev-banner-container

HTML
<div class="events-dashboard-banner-container fullSite"> <div class="event-banner"> <div class="event-banner-text"> Bilbao Events </div> </div> </div>

HTML
<div id="ev-main-content">

Custom section

Class	ev-search-container

HTML

<div class="filtersContainer events-search-main">
    <div id="events-search-container">
		<img src="/download/attachments/50558989/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='cc-placeholder' autocomplete="off" placeholder='Categories' onkeyup='handleCountrySearch(this, event)' />
        <ul id="countryFilter">
        </ul>
		<div id='category-clear-button' style="display:none;"><img src="/download/attachments/50558989/closeicon.png?api=v2" onclick="event.stopPropagation();clearFilter('countryFilter')" /></div>
    </div>
	<div class="dateFilterContainer">
        <div class="dateFilter">
			<p class="dateInputContainer"><input type="text" placeholder="Start Date" id="startdate"></p>      <span><img src="/download/attachments/50558989/shuffleicon.png?api=v2" /></span>      <p class="dateInputContainer"><input type="text" placeholder="End Date" id="enddate"></p>
		</div>
    </div>

	<div class="resetFilterContainer">
    	<a id="resetFilter">Clear All Filters</a>
	</div>
</div>

<div id="additional-filters-button" style="display: none;">
	<img src="/download/attachments/50558989/addfilters.png?api=v2" />
	<span>Additional Filters</span>
</div>

HTML
<div class="createEventContainer"> <a class="createEventButton" href="/display/EBBEV/Create+Event">Create Event</a> </div>

HTML
<script> /window.addEventListener('load', () => { document.getElementById("cc-placeholder").disabled = false; });/ </script>

Custom section

CustomCSS	flex-direction: column;
ContainerID	event-search-result-cards
Class	ev-cards-section

HTML
<h2 class="ev-cards-section-title">Search Results</h2>

Custom section

Class	events-container

HTML
<div class="ev-cards-outer-container"> <div id="ev-cards-main-view">

HTML
<span class="conf-macro output-inline" data-hasbody="true" data-macro-name="custom-section">

Custom section

ContainerID	upcoming-events-container
Class	ev-cards-section ev-cards-section-scrollable

HTML
<h2 class="ev-cards-section-title">Upcoming Events</h2>

HTML
<span class="conf-macro output-inline" data-hasbody="true" data-macro-name="custom-section">

Custom section

Class	scrolling-ev-cards-wrapper

HTML
<div class="conf-macro output-block fullSite" data-hasbody="true" data-macro-name="confiform-cleanview"> </div>

HTML
</span>

HTML
</span>

HTML
<script> getUpcomingEvents().then(() => showOrHideScrollButtons(0)); </script>

HTML
<span class="conf-macro output-inline" data-hasbody="true" data-macro-name="custom-section">

Custom section

ContainerID	my-watchlist-container
Class	ev-cards-section ev-cards-section-scrollable

HTML
<h2 class="ev-cards-section-title">My Events</h2>

HTML
<span class="conf-macro output-inline" data-hasbody="true" data-macro-name="custom-section">

Custom section

Class	scrolling-ev-cards-wrapper

HTML
<div class="conf-macro output-block fullSite" data-hasbody="true" data-macro-name="confiform-cleanview"> </div>

HTML
</span>

HTML
</span>

HTML
</div>

HTML
<style> .eventcard .dates { color: white; } .eventcard .attendees { color: #3ddeed; } </style>

Show If

group	confluence-administrators, pittsburgh-administrators

Custom section

CustomCSS	flex-direction: column;
ContainerID	unpublished-events
Class	ev-cards-section

HTML
<h2 class="ev-cards-section-title" style="margin-bottom: 60px;">Unpublished Events</h2>

HTML
<div class="conf-macro output-block fullSite" data-hasbody="true" data-macro-name="confiform-cleanview"> </div>

HTML
<script> getUnpublishedEvents(); </script>

Show If

group	confluence-administrators, pittsburgh-administrators

HTML
<span class="conf-macro output-inline" data-hasbody="true" data-macro-name="custom-section">

Custom section

CustomCSS	flex-direction: column;
ContainerID	private-events
Class	ev-cards-section

HTML
<h2 class="ev-cards-section-title" style="margin-bottom: 60px;">Private Events</h2>

HTML
<div class="conf-macro output-block fullSite" data-hasbody="true" data-macro-name="confiform-cleanview"> </div>

HTML
</span>

HTML
<script> getPrivateEvents(); </script>

HTML
<span class="conf-macro output-inline" data-hasbody="true" data-macro-name="custom-section">

Custom section

ContainerID	my-events-container
Class	ev-cards-section ev-cards-section-scrollable

HTML
<h2 class="ev-cards-section-title">My Created Events</h2>

HTML
<span class="conf-macro output-inline" data-hasbody="true" data-macro-name="custom-section">

Custom section

Class	scrolling-ev-cards-wrapper

HTML
<div class="conf-macro output-block fullSite" data-hasbody="true" data-macro-name="confiform-cleanview"> </div>

HTML
</span>

Show If

special	@authenticated

HTML
<script> getMyEvents().then(() => showOrHideScrollButtons(2)); </script>

Custom section

CustomCSS	flex-direction: column;
ContainerID	all-events
Class	ev-cards-section

HTML
<h2 class="ev-cards-section-title" style="margin-bottom: 60px;">Past Events</h2>

HTML
<div class="conf-macro output-block fullSite" data-hasbody="true" data-macro-name="confiform-cleanview"> </div>

HTML
<script> getAllEvents(); </script>

HTML
</span>

HTML
</div> </div> </div> </div>

HTML
<script> $('#ev-cards-sidebar ul').on('click', function(){ $("#ev-cards-sidebar ul").removeClass("ev-cards-active-sidebar"); $(this).addClass("ev-cards-active-sidebar"); }); </script>

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: 40px;
    height: auto !important;
    justify-content: left;
}
</style>

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;
  }

  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);
      }  
    }
	
  });
</script>

<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>

Tip

title	Welcome to your new space!

Confluence spaces are great for sharing content and news with your team. This is your home page. Right now it shows recent space activity, but you can customize this page in any way you like.

Complete these tasks to get started

Edit this home page - Click Edit in the top right of this screen to customize your Space home page
Create your first page - Click the Create button in the header to get started
Brand your Space - Click Configure Sidebar in the left panel to update space details and logo
Set permissions - Click Space Tools in the left sidebar to update permissions and give others access

Recent space activity

Space contributors

Contributors

mode	list
scope	descendants
limit	5
showLastTime	true
order	update

...

Content

Space Tools

Versions Compared

Old Version 1

New Version Current

Key

Complete these tasks to get started

Recent space activity

Space contributors

Content

Space Tools

Breadcrumbs

Page History

Versions Compared

Old Version 1

New Version Current

Key

Complete these tasks to get started

Recent space activity

Space contributors