Expand Cards - to light up your confluence page

[#1]

Expand-cards is a user macro which is an enhancement version of expand macro.  Expand-cards change styles of a default expand so that user can manage page length while contrasting the content.

Expand macro to hide extra content from the first appearance of the page. Expand-cards macro allow users to hide their content while providing a hint about the hidden context to the readers.

In case users’ need to avoid lengthy content from confluence pages; while providing readers a sense about the content that is hidden expand-cards macro would be the handiest tool available.

Key features

• Change colors of a expand note
• Add icons to expand card
• Add summary of the content invisible

How to use

1. Insert expand card and use macro options to add your preference
2. Add content inside macro body 
3. Save changes 

Code 

always welcome to make the code more efficient. I am not a developer ;) ...

## Developed by: Alana Fernando
## Date created: 27/07/2017 
##Shared with love...

## @param Status:title=Style type|type=enum|required=true|enumValues=Default,Success,Primary,Danger,Info,Warning|desc=Choose a status.

## @param title:title=Note title|type=string|desc=Title to display|required=true|option-showValueInPlaceholder=true

## @param exptitle:title=Expand title|type=string|desc=Title to display in expand|required=true

## @param summary:title=Note summary|type=string|desc=Summary to display|required=true

## @param icon:title=Note icon|type=enum|desc=Choose note icon. |enumValues=editor-task,workflow,quote,version,workbox,like,group,email,edit,comment,add,editor-mention,devtools-file


#if ( $paramStatus == "Success" )
#if ($paramtitle.length() > 120)//additional code to limit title length
<div class="aui-message aui-message-error">
 <p class="title">
 <strong>Error</strong>
 </p>
 <p>Macro parameter "input" must be 10 characters or less!</p>
</div>
#else
<div class="notice notice-success">
<h1 style="color:#80D651;"><span class="aui-icon aui-icon-small aui-iconfont-$paramicon"> </span> $paramtitle</h1>
 <ac:macro ac:name="expand">
 <ac:parameter ac:name="title">${paramexptitle}</ac:parameter>
 <ac:rich-text-body> 
 <ac:default-parameter>${body}</ac:default-parameter> 
 </ac:rich-text-body>
</ac:macro>
 
#if (!$paramsummary.isEmpty()) 
<div style="color:#90A4AE;">$paramsummary</div>
#else
<div style="color:#90A4AE;"></div>
#end
#end
 </div>


#elseif ( $paramStatus == "Danger" )
 <div class="notice notice-danger">
 <h1 style="color:#d73814;"><span class="aui-icon aui-icon-small aui-iconfont-$paramicon"> </span> $paramtitle</h1>
#if (!$paramsummary.isEmpty()) 
<div style="color:#90A4AE;">$paramsummary</div>
#else
<div style="color:#90A4AE;"></div>
#end
 <ac:macro ac:name="expand">
 <ac:parameter ac:name="title">${paramexptitle}</ac:parameter>
 <ac:rich-text-body> 
 <ac:default-parameter>${body}</ac:default-parameter> 
 </ac:rich-text-body>
</ac:macro>
 </div>

#elseif ( $paramStatus == "Info" )
 <div class="notice notice-info">
 <h1 style="color: #45ABCD;"><span class="aui-icon aui-icon-small aui-iconfont-$paramicon"> </span> $paramtitle</h1>
#if (!$paramsummary.isEmpty()) 
<div style="color:#90A4AE;">$paramsummary</div>
#else
<div style="color:#90A4AE;"></div>
#end
<ac:macro ac:name="expand">
 <ac:parameter ac:name="title">${paramexptitle}</ac:parameter>
 <ac:rich-text-body> 
 <ac:default-parameter>${body}</ac:default-parameter> 
 </ac:rich-text-body>
</ac:macro>
 </div>

#elseif ( $paramStatus == "Warning" )
 <div class="notice notice-warning">
 <h1 style="color:#FEAF20;"><span class="aui-icon aui-icon-small aui-iconfont-$paramicon"> </span> $paramtitle</h1>
#if (!$paramsummary.isEmpty()) 
<div style="color:#90A4AE;">$paramsummary</div>
#else
<div style="color:#90A4AE;"></div>
#end
<ac:macro ac:name="expand">
 <ac:parameter ac:name="title">${paramexptitle}</ac:parameter>
 <ac:rich-text-body> 
 <ac:default-parameter>${body}</ac:default-parameter> 
 </ac:rich-text-body>
</ac:macro>
 </div>

#elseif ( $paramStatus == "Primary" )
 <div class="notice notice-primary">
 <h1 style="color:#428bca;"><span class="aui-icon aui-icon-small aui-iconfont-$paramicon"> </span> $paramtitle</h1>
#if (!$paramsummary.isEmpty()) 
<div style="color:#90A4AE;">$paramsummary</div>
#else
<div style="color:#90A4AE;"></div>
#end
<ac:macro ac:name="expand">
 <ac:parameter ac:name="title">${paramexptitle}</ac:parameter>
 <ac:rich-text-body> 
 <ac:default-parameter>${body}</ac:default-parameter> 
 </ac:rich-text-body>
</ac:macro>
 </div>

#elseif ( $paramStatus == "Default" )
 <div class="notice notice-default">
 <h1 style="color:#546E7A;"><span class="aui-icon aui-icon-small aui-iconfont-$paramicon"> </span> $paramtitle</h1>
#if (!$paramsummary.isEmpty()) 
<div style="color:#90A4AE;">$paramsummary</div>
#else
<div style="color:#90A4AE;"></div>
#end
<ac:macro ac:name="expand">
 <ac:parameter ac:name="title">${paramexptitle}</ac:parameter>
 <ac:rich-text-body> 
 <ac:default-parameter>${body}</ac:default-parameter> 
 </ac:rich-text-body>
</ac:macro>
 </div>

#else
<div>$body</div> 
#end


<style>
.notice {
 padding: 15px;
 background-color: #fafafa;
 border-left: 6px solid #7f7f84;
 margin-bottom: 10px;
 -webkit-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
 -moz-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
 box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
}

.notice-lg {
 padding: 35px;
 font-size: large;
}
.notice-success {
 border-color: #80D651;
}

.notice-info {
 border-color: #45ABCD;
}

.notice-warning {
 border-color: #FEAF20;
}

.notice-danger {
 border-color: #d73814;
}
.notice-primary {
 border-color: #428bca;
}
.notice-default {
 border-color: #546E7A;
}
</style>

Adding user macro 

Remember to select Rendered as macro body processing. 

DIVE DEEP...

Gain

• Simple usage
• Compatible with multiple other macros/plugins
• Direct cost of development = Zero
• Since this is an user macro it is free for lifetime
• Cross browse compatibility

Macro testing 

Notes and texts are use in almost everywhere in confluence. Considering usage; below test scenarios executed.

• Macro functional testing
• Macro combination testing
• Macro stability testing
• Cross browser compatibility and stability testing

Macro deployment 

Expand cards macro is deployed as a user macro. It required no system down time and you just have to add macro code to confluence as a user macro. 

Make it grow and glow ...

Expand cards macro currently supports only few styles and changes. It would be nice to have  an option to change styles of a note according to user’s choice with color picker.

Love to hear your comments , suggestions on this. 

[Minh Tran]

Nice work! Thanks for sharing @Alana Fernando.

Can we extract color of summary and title as parameters? So anyone can use their preference colors 

[Davin Studer]

Nice! Looks great!

You could cut out a bunch of the code in your original if instead of repeating the structure of the card for each possible status you set variables for the parts that change between types and then just plug those into your one card layout.

[Hunter Morgan]

@Alana Fernando I am sorry if this is a silly question but how do I use the code you've shared? I love the look of the expanding box and I've tried copy and pasting but to no avail.

Could you please help this poor noob?

[Angela Carlson]

@Davin Studer How would you implement this? (not a developer, but I want to use this!)