x x x
x
Only portrait mode is currently supported - please rotate your device.

Versions Compared

Old Version 20

changes.mady.by.user Zuhair Bhatti

Saved on

compared with

New Version Current

changes.mady.by.user Zuhair Bhatti

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: giving smith admins access to see private events

...

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

<style>
div#rw_theme_header
.program
:after {
  content  background: #ffffff !important;
}
#location-clear-button {
	display: flex"";
  position : absolute;
  z-index  position: absolute1;
  bottom   right: 0px0;
  left    cursor : pointer0;
  pointer-events  height : 12pxnone;
  background-image  width: 12px;: linear-gradient(to bottom, 
    margin:   12px 10px;
}
/* Page Title */
.general-text-container {
    display: flex;
    flex-direction: column;rgba(255,255,255, 0), 
    width:  40%;
    padding: 100px 0px 0px 31px !important;
}

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

/* Event Date */
.bigTimeContainer {
 rgba(255,255,255, .9) 100%);
  width    height: auto100%;
  height  width : 54px;2em;
}
div#rw_theme_header {
    background: #ffffff white!important;
}
#location-clear-button {
	display: flex;
  box-shadow: 1px 2px 11px 0 rgba(0, 0, 0, 0.12)position: absolute;
    right: 0px;
    displaycursor: flexpointer;
    flex-directionheight: column12px;
    /* justify-contentwidth: space-evenly; */12px;
    align-itemsmargin: center12px 10px;
}
/* Page   padding-bottom: 5px;Title */
.general-text-container {
    borderdisplay: solid 1px #979797;
}

.bigTimeDate {flex;
    colorflex-direction: var(--primary-font-color)column;
    font-sizewidth: 25px40%;
}

.bigTimeMonth {
    font-sizepadding: 14px;
100px 0px 0px  width: 100%31px !important;
}

/* My Events  display: flex;
    justify-content: center;
    background: #1f2833;
    color: var(--secondary-font-color) !important;
Container */
#my-events-container {
	display: none;
}

/* Event Program Card StylingDate */
.program spanbigTimeContainer {
    backgroundheight: transparent !importantauto;
    colorwidth: var(--primary-font-color) !important54px;
	font-weight: 100;
	font-size: 14px !important;
}
.program {    background: white;
    colorbox-shadow: var(--primary-font-color) !important;
    font-family: unset !important1px 2px 11px 0 rgba(0, 0, 0, 0.12);
    font-sizedisplay: 14px !importantflex;
    textflex-aligndirection: startcolumn;
    margin-left/* justify-content: 16px;
	margin-top: 10px;
	overflow-y: autospace-evenly; */
    align-items: center;
    heightpadding-bottom: auto5px;
	font-weight: normal;
}
br {
  border: solid display:1px none#979797;
}

.programbigTimeDate h1 {
    margin: 0;
    color: var(--primary-font-color) !important;
    font-size: 14px25px;
}

.program .p1bigTimeMonth {
    font-size: 14px !important;
}
.program div {
    font-sizewidth: 14px !important100%;
    font-weightdisplay: normal !importantflex;
}
/ * Location search bar */
.wiki justify-content #events-search-container {: center;
    min-widthbackground: 280pxvar(--secondary-color);
    widthcolor: 25%;
    max-width: 320px;
}

#location-search-container imgvar(--secondary-font-color) !important;
}

/* Event Program Card Styling */
.program span {
    positionbackground: relativetransparent !important;
    leftcolor: 0pxvar(--primary-font-color) !important;
    height: 12px	font-weight: 100;
	font-size: 14px !important;
    width: 12px}
.program {
    color: var(--primary-font-color) !important;
    opacityfont-family: 0.7;
	cursor: pointer;
}

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

.wiki-content #location-searchbar {
	background: #1f2833unset !important;
    font-size: 14px !important;
    text-align: start;
    margin-left: 13px;
    margin-right: 13px;
	margin-top: 10px;
	overflow-y: auto;
    colorheight: var(--secondary-font-color)auto;
  	boxfont-shadowweight: nonenormal;
	fontpadding-sizebottom: 13px14px;
	width: calc(100% - 40px);	
	height: 15px;
	padding: 15px 20px;
	border}
br {
    display: none;
}

/* Create Event Button */
a.createEventButton {
	display: none.program h1 {
    margin: 0;
    box-sizingcolor: border-boxvar(--primary-font-color) !important;
    transitionfont-size: background-color14px;
}
.program .1s ease-out;p1 {
    borderfont-radiussize: 3.01px 14px !important;
}
.program    border-style: solid;div {
    borderfont-widthsize: 1px;
    cursor: pointer14px !important;
    font-familyweight: inheritnormal !important;
}
/ * Location  font-size: 14px;search bar */
.wiki-content #events-search-container {
    fontmin-variantwidth: normal280px;
    font-weightwidth: 40025%;
    backgroundmax-imagewidth: none320px;
}

#location-search-container img {
   background-color: rgba(9,30,66,0.08) position: relative !important;
    border-colorleft: transparent0px !important;
    colorheight: #34456312px !important;
    text-decorationwidth: 12px none!important;
    heightopacity: 20.14285714em7;
    line-height	cursor: 1.42857143empointer;
}
    margin: 0;
    padding: 4px 10px;
    vertical-align: baseline;
    white-space: nowrap
#location-search-container img:hover {
	filter: invert(62%) sepia(80%) saturate(588%) hue-rotate(349deg) brightness(98%) contrast(94%);
}

.wiki-content #location-searchbar {
	background: var(--secondary-color);
    color: black !IMPORTANTvar(--secondary-font-color);
    border-radius	box-shadow: 6pxnone;
}
.createEventContainer {
    display: flex;
    justify-content: flex-end;
    margin: 10px 26px 0 0	font-size: 13px;
	width: calc(100% - 40px);	
	height: 15px;
	padding: 15px 20px;
	border: none;
}

/* DashboardCreate Event BannerButton */
img.events-dashboard-banner {a.createEventButton {
	display: none;
    widthbox-sizing: 100%border-box;
    heighttransition: auto;
	margin-bottom: -20px;
}
.events-dashboard-banner-container {background-color .1s ease-out;
    marginborder-radius: 03.01px;
 0 -5px 0;
}
.countryFilterContainer #cc-placeholder { border-style: solid;
    heightborder-width: 45px1px;
    min-heightcursor: 45pxpointer;
    marginfont-family: 0pxinherit;
    textfont-alignsize: left14px;
    widthfont-variant: calc(100% - 40px)normal;
    justifyfont-contentweight: space-between400;
    paddingbackground-image: 0px 20pxnone;
    cursorbackground-color: textrgba(9,30,66,0.08);
    positionborder-color: relativetransparent;
    align-itemscolor: center#344563;
    backgroundtext-decoration: #1f2833none;
  	border: 1px solid #dddheight: 2.14285714em;
  	box-shadow  line-height: none1.42857143em;
}
.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 {    margin: 0;
    padding: 4px 10px;
    vertical-align: baseline;
    white-space: nowrap;
    positioncolor: absoluteblack !IMPORTANT;
    rightborder-radius: 0px6px;
}
.createEventContainer {
@media  screen and (max-width: 640px) {
.filtersContainer {
	display: flex;
    justify-content: centerflex-end;
    margin: 10px 26px 0 0;
}
}
</style>
HTML
<style>
.wiki-content .ev-cards-outer-container
/* Dashboard Banner */
img.events-dashboard-banner {
    background-image: url("https://gsvlabs-confluence-files.s3-us-west-2.amazonaws.com/images/EWC+2020/gradient-vertical.jpg");width: 100%;
    height: auto;
	margin-bottom: -20px;
}
.events-dashboard-banner-container {
    background-sizemargin: cover;
0 0   background-repeat: no-repeat5px 0;
}
#announcements-wrapper > span.conf-macro.countryFilterContainer #cc-placeholder {
	    height: 100%45px;
}

#additional-filters-button {
	width: 280px;
}

.zran-event {
	display: none;
}

@media only screen and (max-width: 480px) {
  .events-search-main {
    flex-direction: column    min-height: 45px;
    margin: 0px;
    text-align: left;
    width: calc(100% - 40px);
    alignjustify-itemscontent: centerspace-between;
    heightpadding: 75px0px 20px;
    flex-wrapcursor: nowraptext;
    justify-contentposition: flex-startrelative;
    paddingalign-bottomitems: 0pxcenter;
    overflowbackground: hiddenvar(--secondary-color);
  	align-selfborder: center1px solid #ddd;
  	paddingbox-topshadow: 70pxnone;
  }
  .wiki-content .ev-search-containercards-section .ev-cards-section-title {
	color:    padding-bottom: 45px#000000 !important;
  }
.wiki-content  .countryFilterContainer {
	height: 49px !important;
	min-height: 49px;
  }
  .countryFilterContainer #cc-placeholder.ev-cards-outer-container {background-image: unset !important;}
.countryFilterContainer {
	fontjustify-sizecontent: 14pxcenter !important;
  }
  .program .custom-section-container{
	 flex-shrinkdirection: 7column !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", "  }
}
</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>

<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 === 'gsvlabssmith-adminsadministrators') {
            isContentAdmin = true;
          }
          
        }
      }
    });
}
if(isAdmin || isContentAdmin) {
	console.log("Showing Create Event Button");
	$('.createEventButton').waitUntilExists(() => {
 		$('.createEventButton').show();
	});
}
</script>

...

Custom section
Classev-search-container


HTML
<div class="filtersContainer events-search-main">
    <div id="events-search-container">
		<img src="/download/attachments/46334146/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>

	<div id="location-search-container">
		<input id="location-searchbar" type="text" autocomplete="false" placeholder="Location" </>
	ul>
    </div>

	<div class="dateFilterContainer">
        <div class="dateFilter">
			<p class="dateInputContainer"><input type="text" placeholder="Start Date" id="startdate"></p>      <span>↔</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/46334146/addfilters.png?api=v2" />
	<span>Additional Filters</span>
</div>


...

Custom section
ContainerIDmy-watchlist-container
Classev-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
Classscrolling-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

 HTML
</div>


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

</div>all
 Show If
groupconfluence-administrators, smith-administrators

 Custom section
CustomCSSflex-direction: column; 
ContainerID
unpublished-events
Classev-cards-section

 HTML
<h2 class="ev-cards-section-title" style="margin-bottom: 60px;"
>Past
>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
groupconfluence-administrators, smith-administrators

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

getAllEvents();

</script>
 HTML
<style>
.eventcard .dates {
    color: white;
}
.eventcard .attendees {
	color: #3ddeed;
}
</style>
gsvlabs-admins
 Show If
group
custom-section">

 Custom section
CustomCSSflex-direction: column; 
ContainerIDunpublishedprivate-events
Classev-cards-section

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

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


 HTML
</span>

 HTML
<script>

getUnpublishedEventsgetPrivateEvents();

</script>


 HTML
<span class="conf-macro output-inline" data-hasbody="true" data-macro-name="custom-section">
...
 Custom section
ContainerIDmy-events-container
Classev-cards-section ev-cards-section-scrollable

 HTML
<h2 class="ev-cards-section-title">My Created Events</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
Classscrolling-ev-cards-wrapper

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


 HTML
</span>

 Show If
special@authenticated

 HTML
<script>

getMyEvents().then(() => showOrHideScrollButtons(2));

</script>




 Custom section
CustomCSSflex-direction: column; 
ContainerIDall-events
Classev-cards-section

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

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


show-if
<script>


getMyEvents().then(() => showOrHideScrollButtons(2)
getAllEvents();

</script>
 HTML
</span>
special@authenticated
 HTML

 HTML
</span>

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