Page History

<style>
.carousel-container > div{
	width: 100%!important;
}

.announcementcard .imgalign{
    height: unset!important;
}


.announcementcard{
    padding: 0!important;
    border-radius: 0!important;
    height: 250px!important;
	width: 100%!important;
}

div.text-encompasser{
    box-sizing: border-box!important;
    padding: 25px!important;
    border: none!important;
}



th p{
	font-weight: bold!important;
	color: white!important;
}

tr a{
	color: var(--primary-color)!important;
	font-weight: bold!important;
}

.header{
	font-size: 35px;
	font-weight: bold!important;
}
div#admin-panel{
	display: flex;
	flex-direction: row;
}
div#admin-panel * {
    font-weight: bold!important;
}

.applicationBannerNotStarted, .applicationBannerStarted, .applicationBannerSubmitted{
	display: none;
}

.dash-banner{
	height: fit-content!important;
}

.dash-banner .banner-segment:nth-child(1){
	padding: 40px 0!important;
	height: fit-content!important;
}

.dash-banner .banner-segment:nth-child(2){
	height: unset!important;
}

.rw_page_left_section{
	background: unset!important;
	border: unset!important;
	padding: unset!important;
	margin: unset!important;
}
.announcementsTable{
	display: none;
}
</style>
<script>
window.addEventListener('load', ()=>{
showSlides(0)
})



const searchJiraApplicationsForUser = async (issueType) => {
  let jiraRes = await jQuery.ajax({
    url: "/rest/scriptrunner/latest/custom/searchJiraTickets",
    headers: {
      'X-Atlassian-Token' : 'nocheck',
      'Content-type' : 'application/json'
    },
    type: "POST",
    processData: false,
    contentType: false,
    data: JSON.stringify({
      jql: `issuetype = "${issueType}" AND ('Confluence User Key' ~ '${AJS.params.remoteUserKey}') ORDER BY updated DESC`
    }),
	success: W=>{
		console.log(W)
	},
	error: L=>{
		console.log(L)
	}
  }).then(res => res);
  return jiraRes;
}

const showDynamicApplicationBanner = async (pageTitle, issueType, applicationDeadlinePassed = false) => {
  var bannerApplicationSubmitted = false;
  var bannerApplicationComplete = false;
  var bannerApplicationStarted = false;

  if (applicationDeadlinePassed) {
    $(".applicationBannerDeadlinePassed").waitUntilExists(() => {
      $('.applicationBannerLoading').remove();
      $(".applicationBannerDeadlinePassed").show();
    });

    return;
  }

  await searchJiraApplicationsForUser(issueType).then((appsCheck) => {
    if (appsCheck.issues.length !== 0) {
      bannerApplicationStarted = true;
      if (appsCheck.issues[0].fields.customfield_10631) {
        bannerApplicationSubmitted = true;
      }
    }

    if (bannerApplicationSubmitted) {
      // show submitted banner
      $(".applicationBannerSubmitted").waitUntilExists(() => {
        $('.applicationBannerLoading').remove();
        $(".applicationBannerSubmitted").show();
      });
    } else if (bannerApplicationStarted) {
      // show started banner
      $(".applicationBannerStarted").waitUntilExists(() => {
        $('.applicationBannerLoading').remove();
        $(".applicationBannerStarted").show();
      });
    } else {
      // show get started banner
      $(".applicationBannerNotStarted").waitUntilExists(() => {
        $('.applicationBannerLoading').remove();
        $(".applicationBannerNotStarted").show();
      });
    }
  })
}

</script>

<style>
div.banner-segment.second-segment{
	background: url('https://gsvlabs-confluence-files.s3.us-west-2.amazonaws.com/images/MSIA/application_banner.jpg')!important;
	background-size: cover!important;
	position: relative!important;
}

div.banner-segment.second-segment::after{
	position: absolute;
	bottom: 20px;
	left: 20px;
	content: "July 15, 2022  5 PM ET";
 	font-size: 18px;
	color: white;
	font-family: var(--main-font-family);
 	z-index: 100;
}

div.banner-segment.second-segment::before{
	position: absolute;
	bottom: 40px;
	left: 20px;
	content: "Application Deadline:";
	font-size: 22px;
	font-weight: bold!;
	color: white;
	font-family: var(--main-font-family);
	z-index: 100;
}

div div#announcements-wrapper{
	margin-top: 20px!important;
}
 p.header{
	margin-bottom: 30px!important
}
.announcementcard .confirmationButton, .dash-banner .bottom-content a {
	text-transform: uppercase;
	font-weight: bold !important;
}
#key-dates-list {
    font-size: 16px;
    padding-left: 15px;
    margin-top: 5px;
}
#key-dates-headertext {
	height: max-content !important;
}
</style>

<link rel="stylesheet" href="https://gsvlabs-confluence-files.s3.us-west-2.amazonaws.com/stylesheets/MS+SBA/home.css?v=1">

<!-- Redirect msia judges/admins -->

<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&&display=swap" rel="stylesheet">

<script>
window.addEventListener("load", showDynamicApplicationBanner(AJS.params.pageTitle.toLowerCase(), 'LBNL Issue Type'), false);
</script>

<div class="dash-banner">
  <div class='banner-segment' style="display: flex; flex-direction: column; justify-content: center;">
    <div class="top-content">
      <p class="content-head">Thank you for submitting your application for the Innovation Awards.</p>
      <p class="content-text">We will update you as to the status of your application by January 2023.</p>
    </div>
    <div class="bottom-content">
      <a href="/display/MSIAP">View your Application</a>    
    </div>
  </div>
  <div class='banner-segment second-segment dash-banner-image'> </div>
</div>

<div class="dash-banner">
	<div class='banner-segment' style="display: flex; flex-direction: column; justify-content: center;">
      <div class="top-content">
        <p class="content-head">You're almost there!</p>
        <p class="content-text">Continue your application for the Morgan Stanley Innovation Awards.</p>
      </div>
      <div class="bottom-content">
        <a href="/display/MSIAP">Continue your Application</a>    
      </div>
	</div>
    <div class='banner-segment second-segment dash-banner-image'> </div>
</div>

<div class="dash-banner">
<div class='banner-segment' style="display: flex; flex-direction: column; justify-content: center;">
  <div class="top-content">
    <p class="content-head">The Innovation Awards Application is Now Open</p>
    <p class="content-text">Click below get started.</p>
  </div>
  <div class="bottom-content">
    <a href="/display/MSIAP">Apply Now</a>
  </div>
</div><div class='banner-segment second-segment dash-banner-image'> </div>
</div>

<!-- Start id=announcementcontainer section -->

<!-- Start admin section -->

<!-- Start id=announcements-wrapper section -->

<p class="header">About the Innovation Awards</p>
<div class="carousel-container"> 
<span class="carousel-arrow carousel-previous">◀</span>

<span class="carousel-arrow carousel-next">▶</span>
</div>
<script>
let anouncementNo = document.getElementsByClassName("announcementcard").length
if(anouncementNo < 2){
	$('.carousel-next').hide()
	$('.carousel-previous').hide()
}

$('.carousel-previous').click(function() {
if(slideIndex -1 === 0){
        currentSlide(anouncementNo)
    }
    else{
    currentSlide(slideIndex - 1)    
}  

});

$('.carousel-next').click(function() {
  if(slideIndex + 1 > anouncementNo){
        currentSlide(1)
    }
    else{
    currentSlide(slideIndex + 1)    
}
});
let div = document.getElementsByClassName('carousel-container')[0]
div.addEventListener('touchstart', handleTouchStart, false); 
div.addEventListener('touchmove', handleTouchMove, false);

var xDown = null; 
var yDown = null;

function getTouches(evt) {
return evt.touches || // browser API
evt.originalEvent.touches; // jQuery
} 

function handleTouchStart(evt) {
console.log('touched')
const firstTouch = getTouches(evt)[0]; 
xDown = firstTouch.clientX; 
yDown = firstTouch.clientY; 
}; 

function handleTouchMove(evt) {
if ( ! xDown || ! yDown ) {
return;
}

var xUp = evt.touches[0].clientX; 
var yUp = evt.touches[0].clientY;

var xDiff = xDown - xUp;
var yDiff = yDown - yUp;

if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
if ( xDiff > 0 ) {
/* left swipe */ 
console.log('swiped left')
if(slideIndex + 1 > anouncementNo){
currentSlide(1)
}
else{
currentSlide(slideIndex + 1) 
}
} else {
/* right swipe */
console.log('swiped right')
if(slideIndex -1 === 0){
currentSlide(anouncementNo)
}
else{
currentSlide(slideIndex - 1) 
} 
} 
} else {
if ( yDiff > 0 ) {
/* up swipe */ 
console.log('swiped up')
} else { 
/* down swipe */
console.log('swiped down')
} 
}
/* reset values */
xDown = null;
yDown = null; 
};</script>

<style>
/* styling for cards in the carousel*/
.announcementcard {
    display: flex;
    padding: 10px;
    background-color: var(---main-background);
    border-radius: 16px;
    width: 750px;
    height: auto;
    box-shadow: -2.9px 4px 2.4px 0.2px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    margin: auto;
    margin-bottom: 20px;
    justify-content: center;
}
/*styling the dot*/
#dot-container{
	margin-bottom: 30px;
}

.ewc-card-title {
    font-size: 15px;
    letter-spacing: 1px;
    font-weight: 150;
    color: var(--primary-color);
    padding: 15px 0px 5px;
    font-family: var(--header-font-family);
}

.card-date {
    font-size: 15px;
    font-weight: 100;
    padding: 0px;
    color: var(--primary-color);
    letter-spacing: 1px;
    font-family: var(--header-font);
}

.card-description {
    letter-spacing: 1.5px;
    color: var(--s-label-font);
    padding: 5px 5px 5px 0px;
    font-family: var(--main-font-family);
    font-size: 12px;
}

.card-specifics {
  font-size: 12px;
  font-weight: 200;
  font-family: var(--main-font-family);
  color: var(--s-label-font);
  letter-spacing: 1.5px;
  padding: 0px;
}

.announcementcard img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    margin-top: 14px;
    border-radius: 74px;
    border: var(--primary-color) 4px solid;
}

div.text-container {
    display: flex;
    flex-direction: column;
    font-family: var(--main-font-family);
    font-size: 13px;
    letter-spacing: 1px;
}

div.link-container {
  display: flex;
  flex-direction: column;
  padding: 0px;
}

div.text-encompasser {
    display: flex;
    width: 70%;
    flex-direction: column;
    padding: 0px 0px 0px 30px;
    border-top: dotted 2px var(--primary-color);
}

.imgalign {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: unset;
    height: 130px;
}

.date-container {
    width: 141%;
    left: 0px;
    padding: 10px;
    text-align: center;
}

/*This styles the container for all the cards in the carousel*/
#announcements-wrapper {
  max-width: 1000px;
  position: relative;
  margin: auto;
  opacity: 0;
}

/* Hide the images by default */
/*.announcementcard {
  display: none;
} */

/* Next previous buttons */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 30%;
    width: auto;
    margin-top: 0px;
    padding: 8px;
    color: var(--primary-color) !important;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 3px;
    user-select: none;
}

/*Styling on hover*/
.prev:hover, .next:hover {
    color: var(--main-background)!important;
}

/* Position the "next button" to the right */
.next {
  right: 0;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
    background-color: var(--mobile-menu-background);
    text-decoration: none !important;
}

/* The dots/bullets/indicators */
.cdot {
    text-align: center;
    cursor: pointer;
    height: 5px;
    width: 5px;
    margin: 0 2px;
    background-color: var(--primary-color);
    opacity: .5;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active, .cdot:hover {
    background-color: var(--primary-color);
    opacity: 1;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* MOBILE STYLING */ 
@media only screen and (max-width: 480px) and (min-width: 320px){
.cdot {
	top: 0px;
}
/* 
#announcements-wrapper {
	padding-bottom: 50px;
}*/

/*Changes the cards properties for mobile */
.announcementcard {
    display: flex;
    flex-direction: column;
    width: 75%;
}
/*Aligns the image for mobile */
.imgalign {
	width: 50px;
    height: 50px;
}
/* changes the image for card for mobile*/
.announcementcard img {
    width: 50px;
    height: 50px;
}
.date-container {
    width: 50%;
}
div.text-encompasser {
	width: 100%;
    margin-left: 40px;
    padding-left: 0px;
}
.button-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
}

#cf_messages {
  height: 200px;
  width: 632px;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}

.button-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
}
}
</style>



<div style="text-align:center" id="dot-container" > </div>
<script>
// add dots and links to the corresponding card to dot
var dotParents = document.getElementsByClassName("announcementcard");
for(var i = 0; i < dotParents.length; i++){
	var index = i+1;
    document.getElementById("dot-container").innerHTML += "<span class='cdot' onclick='currentSlide("+ index +")'> </span>";
}
//Checks if being viewed on mobile or not
window.mobilecheck = function() {
  var check = false;
  (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
  return check;
};
var onMobile = mobilecheck();
/* carousel */
var slideIndex = 1;
// Gets and sets the max height of the cards
getHeight();
// Runs the main carousel function, which toggles which card is displayed and is not
showSlides(slideIndex);
var myvar;

if(!onMobile){
  myvar = window.setInterval(function(){slideIndex += 1; showSlides(slideIndex);}, 6000);
}

// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}

// Stop interval
$( ".announcementcard" )
  .mouseenter(function() {
    
    window.clearInterval(myvar);
  })
  .mouseleave(function(){
    if(!onMobile){
      myvar = window.setInterval(function(){slideIndex += 1; showSlides(slideIndex);}, 6000);
    }
  })

//Gets and sets the largest card height to encompassing container
function getHeight(){
    let cards = document.getElementsByClassName("announcementcard");
    
    let tallest = 0;
    let tallestCard;

	for (var i = 0; i < cards.length; i++) {
		
  	  if (cards[i].clientHeight > tallest) {
       	  tallest = cards[i].clientHeight;
      }
	}
	

    document.getElementById("announcements-wrapper").style.height = tallest + "px";
	document.getElementById("announcements-wrapper").style.opacity = "1.0";
}

// Toggles the slides that are shown, and it moves the card not shown off screen in order to get the height property from the card for getHeight()
function showSlides(n) {
      
  var i;
  var slides = document.getElementsByClassName("announcementcard");
  var dots = document.getElementsByClassName("cdot");
  if (n > slides.length) {slideIndex = 1} 
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
	      
      slides[i].style.display = "flex";
	  slides[i].style.position = "absolute";
	  slides[i].style.top = "-9999px";
	  slides[i].style.left = "-9999px";
	  //slides[i].style.opacity = "1.0";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "flex"; 
  slides[slideIndex-1].style.position = "relative";
  slides[slideIndex-1].style.top = "0px";
  slides[slideIndex-1].style.left = "0px";
  //slides[slideIndex-1].style.opacity = "1.0";
  

  dots[slideIndex-1].className += " active";
} 
</script>

<script>
// Select the carousel you'll need to manipulate and the buttons you'll add events to
const carousel = document.getElementsByClassName("cf_announcements_list")[0];
const card = document.querySelector("[data-target='card']");
const leftButton = document.querySelector("[data-action='slideLeft']");
const rightButton = document.querySelector("[data-action='slideRight']");

// Prepare to limit the direction in which the carousel can slide, 
// and to control how much the carousel advances by each time.
// In order to slide the carousel so that only three cards are perfectly visible each time,
// you need to know the carousel width, and the margin placed on a given card in the carousel
const carouselWidth = carousel.offsetWidth;
const cardStyle = card.currentStyle || window.getComputedStyle(card)
const cardMarginRight = Number(cardStyle.marginRight.match(/\d+/g)[0]);

// Count the number of total cards you have
const cardCount = carousel.querySelectorAll("[data-target='card']").length;

// Define an offset property to dynamically update by clicking the button controls
// as well as a maxX property so the carousel knows when to stop at the upper limit
let offset = 0;
const maxX = -((cardCount / 3) * carouselWidth + 
               (cardMarginRight * (cardCount / 3)) - 
               carouselWidth - cardMarginRight);


// Add the click events
leftButton.addEventListener("click", function() {
  if (offset !== 0) {
    offset += carouselWidth + cardMarginRight;
    carousel.style.transform = `translateX(${offset}px)`;
    }
})
  
rightButton.addEventListener("click", function() {
  if (offset !== maxX) {
    offset -= carouselWidth + cardMarginRight;
    carousel.style.transform = `translateX(${offset}px)`;
  }
})
</script>


<script>
function goToLink(cardLink){
	if(cardLink){
		window.open(cardLink, '_blank')
	}
}		 

</script>

<!-- End id=announcements-wrapper section -->

<!-- End id=announcementcontainer section -->

<div>
<p class="header">About the Alliance for Children’s Mental Health</p>
</div>

<div style="width: 100%; height: 400px; display: flex; background: white;  box-shadow: 0 4px 10px 5px rgba(0, 0, 0, 0.1);">
	<div style="box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; width: 100%; padding: 40px;">
		<p style="margin-bottom: 20px; color: #187aba; font-size: 20px;">The Morgan Stanley Alliance for Children’s Mental Health combines the resources and reach of Morgan Stanley with the knowledge and experience of our distinguished nonprofit member organizations to help deliver positive, tangible impact on the critical challenges of stress, anxiety and depression in children, adolescents and young people.</p>
		<button class="aui-button aui-button-primary" style="width: 280px; height: 50px; font-size: 16px; border-radius: 5px; font-weight: normal;" onclick="window.open('https://www.morganstanley.com/about-us/giving-back/alliance-childrens-mental-health')">LEARN MORE ABOUT THE ALLIANCE</button>
	</div>
 	<img style="box-sizing: border-box; width: 50%; object-fit: contain; padding: 0 5%;" src="https://gsvlabs-confluence-files.s3.us-west-2.amazonaws.com/images/MSIA/childrens_health_announcement.png"/>
</div>

</div>

<script>
var checkExist = setInterval(function() {
   if ($('.topic-select-group label').length) {  
$('.topic-select-group label')[0].innerHTML =`Topic:<sup data-v-62c157d1="" class="fullSite">*</sup>`
      clearInterval(checkExist);
   }
}, 100);

/*
window.onload = function(){
	$('.editor')[0].append($('.microblog-header-container')[0]);
};
*/

</script>

<script>
$( ".announcementcard a" ).each(function( index ) {
  console.log( index + ": " + $( this ).attr("href") );
  if($( this ).attr("href").includes("//h")){
    $( this ).attr("href", $( this ).attr("href").replace("//http", "http"))
  }
});
</script>

<style>
.benefits-container a {
	text-decoration: unset;
	margin: 0px;
    background: none;
    color: var(--primary-color) !important;
    padding: 0px;
}
.benefits-container a:hover {
	text-decoration: underline;
}
</style>

<style>
@media only screen and (max-width: 580px) {
	div.dates-container {
		width: 100% !important;
	}
	#key-dates-headertext {
		text-align: left;
	}
}
</style><div ov-include-files="{{PLATFORM_JS_ASSET_PATH}}/User+Dashboard/html/mainStructure.html"> </div>
<script>
includeFiles().then(() => {
	includeJSFiles().then();
});
</script>