Body
Component Location
The block used for this component can be found on the site’s “Block layout” page, under the “Content” region.
https://www.nccu.edu/admin/structure/block
By default, the block's settings are as follows:
- Title: Popout
- Pages:
- /admin/*
- Hide for the listed pages
- Roles:
- Anonymous Users
- News Editor CM
Editing the Block Markup/HTML
To edit the block, head over to the Custom block library and search for "Popout." The markup for the block looks like this:
<div class="popout" id="popoutContainer">
<a class="popout-btn" href="https://www.nccu.edu/admissions"><svg fill="#e8eaed" height="24px" viewBox="0 -960 960 960" width="24px" xmlns="http://www.w3.org/2000/svg"><path d="M840-280v-276L480-360 40-600l440-240 440 240v320h-80ZM480-120 200-272v-200l280 152 280-152v200L480-120Z"></path></svg>Apply Now</a>
<a class="popout-btn" href="https://www.nccu.edu/institutional-advancement/giving-online"><svg fill="#e8eaed" height="24px" viewBox="0 -960 960 960" width="24px" xmlns="http://www.w3.org/2000/svg"><path d="M280-159v-361h64q7 0 14 1.5t14 3.5l277 103q14 5 22.5 18t8.5 27q0 21-14.5 34T632-320H527q-5 0-7.5-.5T513-323l-64-25-13 39 77 27q2 1 6 1.5t7 .5h274q32 0 56 23t24 57L561-80l-281-79ZM40-80v-440h160v440H40Zm600-360L474-602q-31-30-52.5-66.5T400-748q0-55 38.5-93.5T532-880q32 0 60 13.5t48 36.5q20-23 48-36.5t60-13.5q55 0 93.5 38.5T880-748q0 43-21 79.5T807-602L640-440Z"></path></svg>Give Now</a>
<a class="popout-btn" href="https://engage.nccu.edu/campus-tours"><svg fill="#e8eaed" height="24px" viewBox="0 -960 960 960" width="24px" xmlns="http://www.w3.org/2000/svg"><path d="M480-480q33 0 56.5-23.5T560-560q0-33-23.5-56.5T480-640q-33 0-56.5 23.5T400-560q0 33 23.5 56.5T480-480Zm0 400Q319-217 239.5-334.5T160-552q0-150 96.5-239T480-880q127 0 223.5 89T800-552q0 100-79.5 217.5T480-80Z"></path></svg>Visit Campus</a>
</div>
All three buttons are wrapped in a container with the class “popout” and the id=”popoutContainer”.
Each button is denoted by an anchor tag ("a tag"). Within each a tag, it has a class of “popout-btn” and an href attribute that links the button to a URL.
There’s also an svg tag within each anchor tag. The svg is the icon for the button.
Styling the Block
The styles for the block are located in the following file:
/home/ide/project/docroot/themes/custom/nccu/style/css/style.css
Included below are comments that explain the purpose of the styles.
@media screen and (min-width: 1024px) {
- when the screen’s width is over 1024px, the popout will appear and the
Menu items will be hidden
ul.menu.m--menu.m--utility li:nth-last-child(-n+3) {
display: none;
}
- the popout will be fixed to the right side of the screen
.popout {
position: fixed;
top: 42%;
right: 0;
z-index: 200;
text-align: left;
transition: 0.25s ease-in;
}
- the button popout styles
.popout-btn {
display: flex;
padding: 1rem;
background: #5B6770;
color: #ffffff;
font-weight: 500;
margin-bottom: .5rem;
margin-right: -8rem;
transition: 0.25s ease-in;
}
- popout button icon styles
.popout-btn svg {
fill: #fff;
width: 24px;
height: 24px;
margin-right: 1rem;
}
- when user hovers over popout button
.popout:hover .popout-btn {
transition: 0.2s ease-out;
margin-right: 0;
}
.popout.active .popout-btn {
transition: 0.2s ease-out;
margin-right: 0;
}
.popout-btn {
text-decoration: none;
}
.popout-btn:hover {
color: #ffffff !important;
background: #3e474e;
}
}
Editing the JavaScript Code
The JavaScript code is currently located in the “General Scripts” Asset Injector. This code will slide the popouts out for 2 seconds and then slide them back in.
document.addEventListener('DOMContentLoaded', () => {
const popoutContainer = document.getElementById('popoutContainer');
// Add the "active" class to slide in on load
popoutContainer.classList.add('active');
// After 2 seconds, remove the "active" class to return to normal behavior
setTimeout(() => {
popoutContainer.classList.remove('active');
}, 2000);
})aa
Menu Change
Since the popout will disappear when the screen’s width is 1024px, the popout links will then appear in the dropdown mobile menu.