x
x
x
x
Only portrait mode is currently supported - please rotate your device.
...
HTML |
---|
<link rel="stylesheet" type="text/css" href="https://gsvlabs-confluence-files.s3-us-west-2.amazonaws.com/stylesheets/All+Stars+Helping+Kids/eventsDashboardStylesheet_ASHK.css" /> <style> .eventCategories p program :after { content font-size: 12px""; position font-weight: 500absolute; z-index font-stretch: normal1; bottom font-style : normal0; line-height: 1.33; left color: var(--secondary-font-color)0; } .eventcard .heading { pointer-events background: var(--primary-color)none; background-image color: var(--secondary-color); font-family: Karla; : linear-gradient(to bottom, font-size: 14px; font-stretch: normal; font-style: normal; line-height: normal;rgba(255,255,255, 0), letter-spacing: 1.5px; display:flex; justify-content: center; padding: 8px 0; } .eventcard .top .dates { display: none; } .eventcard .dates {display: none;} .dateInputContainer img { rgba(255,255,255, .9) 100%); width : 100%; height : 2em; } div#rw_theme_header { background: #ffffff !important; } #location-clear-button { display: flex; filterposition: invert(0%) sepia(0%) saturate(7462%) hue-rotate(122deg) brightness(94%) contrast(101%) !important; } a#resetFilter { color: var(--primary-color) !important; } .eventcard .title {absolute; right: 0px; cursor: pointer; height: 12px; colorwidth: var(--secondary-font-color) !important; } div#no-upcoming-yet-message { width: max-content !important; text-align: center;12px; margin: 12px 10px; } /* Page Title */ .general-text-container { font-sizedisplay: 16pxflex; lineflex-heightdirection: 1.8column; marginwidth: 0 auto40%; margin-toppadding: 20px; 100px 0px 0px padding: 20px 25px; background-color: #ffffff14; /* color: white; */ } div#no-private-yet-message31px !important; } /* My Events Container */ #my-events-container { display: none; } /* Event Date */ .bigTimeContainer { widthheight: max-content !importantauto; text-alignwidth: center54px; font-sizebackground: 16pxwhite; linebox-heightshadow: 1.8; 1px 2px 11px margin:0 rgba(0, 0, auto; margin-top: 20px0, 0.12); paddingdisplay: 20px 25pxflex; } div#no-private-yet-message p { fontflex-sizedirection: 16pxcolumn; } div#no-events-yet-message { /* widthjustify-content: maxspace-content !important;evenly; */ textalign-alignitems: center; fontpadding-sizebottom: 16px5px; line-heightborder: 1.8solid 1px #979797; margin: 0 auto;} .bigTimeDate { margin-topcolor: 20pxvar(--primary-font-color); paddingfont-size: 20px 25px; } div#no-events-yet-message p.bigTimeMonth { font-size: 16px14px; } div#no-watchlist-yet-message p { width: 100%; colordisplay: var(--primary-font-color); } #ui-datepicker-div .ui-datepicker-today a { flex; justify-content: center; background: var(--secondary-color); background-color: var(--secondary-primaryfont-color) !important; } .events-search-main #events-search-container img /* Event Program Card Styling */ .program span { filterbackground: invert(0%) sepia(0%) saturate(7462%) hue-rotate( 122deg ) brightness(94%) contrast(101%)transparent !important; color: var(--primary-font-color) !important; font-weight: 100; font-size: 14px !important; } .program :after { content color: ""var(--primary-font-color) !important; position font-family: unset absolute!important; z-index : 1 font-size: 14px !important; bottom text-align: 35pxstart; margin-left: 13px; margin-right: 013px; margin-top: 10px; overflow-y: auto; pointer-events height: noneauto; background-image : linear-gradient(to bottom, font-weight: normal; padding-bottom: 14px; } br { display: none; } .program h1 { margin: 0; color: rgba(255,255,255, 0), var(--primary-font-color) !important; font-size: 14px; } .program .p1 { font-size: 14px !important; } .program div { rgba(255,255,255, .9) 100%);font-size: 14px !important; width font-weight: 100%; height : 1emnormal !important; } div#rw_theme_header { background: #ffffff !important; } #location-clear-button { display: flex; position: absolute/ * Location search bar */ .wiki-content #events-search-container { min-width: 280px; rightwidth: 0px25%; cursormax-width: pointer320px; height: 12px;} #location-search-container img { widthposition: 12pxrelative !important; marginleft: 12px0px 10px; } /* Page Title */ .general-text-container {!important; displayheight: flex12px !important; flex-directionwidth: column12px !important; widthopacity: 40%0.7; padding: 100px 0px 0px 31px !important; } /* My Events Container */ #my-events-container { display: none; } /* Event Date */ .bigTimeContainer { height: auto 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: var(--secondary-color); widthcolor: 54pxvar(--secondary-font-color); background box-shadow: whitenone; box-shadow: 1px 2px 11px 0 rgba(0, 0, 0, 0.12); display: flex; flex-direction: column; /* justify-content: space-evenly; */ font-size: 13px; width: calc(100% - 40px); height: 15px; padding: 15px 20px; border: none; } /* Create Event Button */ a.createEventButton { display: none; alignbox-itemssizing: centerborder-box; padding-bottom: 5pxtransition: background-color .1s ease-out; border-radius: solid 1px #9797973.01px; } .bigTimeDate { color: var(--primary-font-color)border-style: solid; border-width: 1px; cursor: pointer; font-sizefamily: 25px; } .bigTimeMonth {inherit; font-size: 14px; widthfont-variant: 100%normal; displayfont-weight: flex400; justifybackground-contentimage: centernone; background-color: var(--secondary-colorrgba(9,30,66,0.08); border-color: var(--secondary-font-color) !important; } /* Event Program Card Styling */ .program span {transparent; color: #344563; text-decoration: none; height: 2.14285714em; backgroundline-height: transparent !important1.42857143em; colormargin: var(--primary-font-color) !important; font-weight: 100; font-size: 14px !important; } .program { color: var(--primary-font-color) !important0; padding: 4px 10px; vertical-align: baseline; white-space: nowrap; font-familycolor: unsetblack !importantIMPORTANT; fontborder-sizeradius: 14px !important;6px; } .createEventContainer { text-aligndisplay: startflex; marginjustify-leftcontent: 13pxflex-end; margin-right: 13px; margin-top: 10px; overflow-y: auto 10px 26px 0 0; } /* Dashboard Banner */ img.events-dashboard-banner { width: 100%; height: auto; fontmargin-weightbottom: normal; padding-bottom: 14px-20px; } br.events-dashboard-banner-container { displaymargin: none0 0 -5px 0; } .programcountryFilterContainer h1#cc-placeholder { marginheight: 045px; colormin-height: var(--primary-font-color) !important45px; font-sizemargin: 14px0px; } .program .p1 { fonttext-sizealign: 14px !important; } .program div { font-size: 14px !importantleft; width: calc(100% - 40px); fontjustify-weightcontent: normal !importantspace-between; } / * Location searchpadding: bar */ .wiki-content #events-search-container {0px 20px; min-widthcursor: 280pxtext; widthposition: 25%relative; maxalign-widthitems: 320pxcenter; } #location-search-container img { position: relative !importantbackground: var(--secondary-color); border: 1px left: 0px !importantsolid #ddd; height box-shadow: 12px !important; width: 12pxnone; } .wiki-content .ev-cards-section .ev-cards-section-title { color: #000000 !important; } .wiki-content .ev-cards-outer-container {background-image: opacity: 0.7; cursor: pointerunset !important;} .countryFilterContainer { justify-content: center !important; } #location.custom-searchsection-container img:hover { filter flex-direction: invert(0%) sepia(80%) saturate(588%) hue-rotate(349deg) brightness(98%) contrast(94%)column !important; } .wiki-content #location-searchbarcountryFilterContainer #country-clear-button { background: var(--secondary-color) position: absolute; colorright: var(--secondary-font-color)0px; } @media box-shadow: none; font-size: 13px; width: calc(100% - 40px); height: 15px; padding: 15px 20px; border: nonescreen and (max-width: 640px) { .filtersContainer { justify-content: center; } } /* Create Event Button */ a.createEventButton { display: none; box-sizing: border-box; transition: background-color .1s ease-out</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"); borderbackground-radiussize: 3.01pxcover; borderbackground-stylerepeat: solidno-repeat; } #announcements-wrapper > border-span.conf-macro { height: 100%; } #additional-filters-button { width: 1px280px; cursor: pointer; font-family: inherit;} .zran-event { display: none; } @media only screen and (max-width: 480px) { .events-search-main { fontflex-sizedirection: 14pxcolumn; fontalign-variantitems: normalcenter; font-weightheight: 40075px; backgroundflex-imagewrap: nonenowrap; backgroundjustify-colorcontent: rgba(9,30,66,0.08)flex-start; borderpadding-colorbottom: transparent0px; coloroverflow: #344563hidden; text-decoration align-self: nonecenter; height padding-top: 2.14285714em70px; } line.wiki-height:content 1.42857143em;.ev-search-container { marginpadding-bottom: 045px; } padding.countryFilterContainer { height: 4px49px 10px!important; vertical-align min-height: baseline49px; } white-space: nowrap.countryFilterContainer #cc-placeholder { font-size: 14px; } color: black !IMPORTANT.program { flex-shrink: 7; border-radius: 6px;} } .createEventContainer { display: flex; justify-content: flex-end; margin: 10px 26px 0 0; } /* Dashboard Banner */ img.events-dashboard-banner { width: 100%; height: auto; margin-bottom: -20px; } .events-dashboard-banner-container { margin: 0 0 -5px 0; } .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(--secondary-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>
div#main {
background-image: linear-gradient(top, #67bac0, #67bac0 420px, transparent 420px, transparent 100%) !important;
background-image: -webkit-linear-gradient(top, #67bac0, #67bac0 420px, transparent 420px, transparent 100%) !important;
/* padding-top: 50px; */
}
.back-btn-container {
width: 90%;
margin: auto;
}
.back-btn-container .back-btn {
color: black;
font-family: var(--main-font-family);
font-size: 14px;
font-weight: bold;
line-height: 1.07;
}
.page-banner {
width: 90%;
margin: auto;
background-image: url(https://passport.theonevalley.com/download/attachments/50559836/banner.jpg);
display: flex;
height: 450px;
background-repeat: no-repeat;
background-size: cover;
margin-top: 20px;
}
.banner-content {
display: flex;
flex-direction: column;
margin: auto;
}
.tabs {
display: flex;
}
.tabs p {
margin: unset;
}
.banner-content .title p {
font-family: Arimo;
font-size: 57px;
font-weight: bold;
font-stretch: normal;
color: #dbecf1;
font-style: normal;
line-height: 0.7;
letter-spacing: 0.32px;
text-align: center;
text-transform: uppercase;
}
div#maincontainer .page-banner .overlay {
display: unset;
width: 100%;
display: flex;
background: black;
opacity: 0.8;
}
.banner-content {
align-items: center;
}
.banner-content .tabs .tab {
font-family: Poppins;
font-size: 14px;
font-weight: bold;
color: #fbbd28;
border-bottom-width: 3px;
border-radius: 5%;
border-bottom-style: solid;
line-height: 1.71;
letter-spacing: 1.39px;
text-align: center;
}
.tabs {
justify-content: space-between;
width: 120%;
margin-top: 50px;
}
div.filter-row {
width: 90%;
margin: auto;
margin-top: 50px;
}
div.filter-row .left {
opacity: 0.5;
font-family: Arimo;
font-size: 15.3px;
line-height: 1.57;
letter-spacing: 0.5px;
color: #555555;
width: 8%;
}
.filter-row .right label {
background: rgba(251, 189, 40, 0.2);
border-radius: 2px;
border: solid 1px #fbbd28;
margin-right: 10px;
padding: 0 25px;
font-family: Arimo;
font-size: 15.3px;
line-height: 1.57;
letter-spacing: 0.5px;
cursor: pointer;
}
.filter-row .right input[type="radio"]:checked+label{
background: #fbbd28;
}
.filter-row .right input {
display: none;
}
div.filter-row .right button:focus {
outline: none;
}
/* ====================================== FILTERS ====================================== */
input {
outline: none;
}
.filtersContainer {
display: flex;
flex-wrap: wrap;
}
::-webkit-scrollbar-thumb {
background: var(--primary-color) !important;
}
.filtersContainer div {
margin: 10px;
position: relative;
display: flex;
justify-content: center;
height: max-content;
}
.countryFilterContainer {
/* display: none !important; */
}
.dateFilterContainer {
display: flex;
}
.dateFilterContainer .dateFilter {
align-items: center;
}
#startdate, #enddate {
background: var(--secondary-color);
border: 1px solid #ddd;
box-shadow: none;
color: var(--secondary-font-color);
font-size: 13px;
width: 200px;
height: 15px;
padding: 15px 20px;
}
#startdate::placeholder, #enddate::placeholder {
color: var(--secondary-font-color);
}
.hasDatepicker {
background: #f6f6f6;
border: 1px solid #ddd;
box-shadow: none;
color: var(--primary-font-color);
font-size: 13px;
width: 200px;
height: 15px;
padding: 15px 20px;
}
#enddate {
margin-right: 0px;
}
.dateFilterContainer {
margin: 0px;
}
.dateFilter {
color: var(--primary-font-color);
font-family: var(--main-font-family);
font-size: 16px;
}
#countryFilter {
background: #f6f6f6;
border: 1px solid #ddd;
box-shadow: none;
color: var(--primary-font-color);
font-size: 13px;
width: 300px;
padding: 15px 20px;
}
#resetFilter {
font-family: var(--main-font-family);
font-size: 16px;
}
#resetFilter:hover {
cursor: pointer;
}
</style> |
</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 === 'smith-administrators') {
isContentAdmin = true;
}
}
}
});
}
if(isAdmin || isContentAdmin) {
console.log("Showing Create Event Button");
$('.createEventButton').waitUntilExists(() => {
$('.createEventButton').show();
});
}
</script> |
Custom section | ||
---|---|---|
| ||
|
HTML |
---|
<div id="ev-main-content"> |
Custom section | ||||||
---|---|---|---|---|---|---|
| ||||||
Custom section | ||||||
| ||||||
HTML |
---|
<div style="width: 90%; margin: auto;">
<img src="https://gsvlabs-confluence-files.s3-us-west-2.amazonaws.com/images/All+Stars/horizontal-white-blue-1-x%403x.png" style="width: 140px;"/>
</div>
<div class="back-btn-container">
<a class="back-btn"> < Back</a>
</div>
<div class="page-banner">
<div class="overlay">
<div class="banner-content">
<div class="title">
<p> Events</p>
</div>
</div>
</div>
</div>
|
HTML |
---|
<div class="filtersContainer events-search-main">
<div id="events-search-container">
<img src="/download/attachments/ 5055898946334146/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>onkeyup='handleCountrySearch(this, event)' /> <ul id="countryFilter"> </ul> </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>↔</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 46334146/addfilters.png?api=v2" /> <span>Additional Filters</span> </div> |
HTML |
---|
<div class="createEventContainer">
<a class="createEventButton" href="/display/ MSEVSDEV/Create+Event">Create Event</a> </div> |
HTML |
---|
<script>
/*window.addEventListener('load', () => {
document.getElementById("cc-placeholder").disabled = false;
});*/
</script> |
Custom section | |||||||
---|---|---|---|---|---|---|---|
| |||||||
|
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 | |||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||
|
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 | |||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||
|
HTML |
---|
</span> |
HTML |
---|
</div> |
HTML |
---|
<style>
.eventcard .dates {
color: white;
}
.eventcard .attendees {
color: #3ddeed;
}
</style> |
Show If | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| morganstanley
| admins
| |||||||||||||
|
Show If | |||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| , morganstanley-admins|||||||||||||||||||
|
HTML |
---|
<span class="conf-macro output-inline" data-hasbody="true" data-macro-name="custom-section"> |
Custom section | ||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||
|
Custom section | ||||||
---|---|---|---|---|---|---|
| ||||||
|
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> |
OneValley