"Clickable bar" macro

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

"Clickable bar" macro

Roman Muntyanu
Hello,

  If I wanted to create a clickable bar layout on my wiki similar to
    http://spring.io/projects
  Which would be the best set of macros to use?
 
  Regards,
Roman
Reply | Threaded
Open this post in threaded view
|

Re: "Clickable bar" macro

Hamster
Do you mean the navigation on the top of that website? ==> Menu Application

Or do you mean the "grid" on the page?

HTML (with a div with all text aligned center)
ICON Macro

I have created a "quote" macro for our company:

{{velocity}}
#set($name=$xcontext.macro.params.Name)
#set($quote=$xcontext.macro.params.Quote)
{{html wiki="true"}}
<div style="
display: inline-block;
width: 50%;
max-width: 640px;
min-width: 320px;
padding-left: 5px;
background-color: rgb(255,255,204);
border-radius: 5px;
border-width: 2px;
border-style: solid;
">
**$name**<br>
{{icon name="quote-left" size="2x" title="Quote"}}{{/icon}}//$quote//<br>{{icon name="quote-right" size="2x" title="Quote"}}{{/icon}}
</div><br>
{{/html}}
{{/velocity}}

You could put multiple "quotes" in a Column Macro. I hope this gives you a start!
Reply | Threaded
Open this post in threaded view
|

Re: "Clickable bar" macro

Hamster
A quick mock-up:



{{section}}
{{column}}

{{macro_grid Title="SPRING BOOT" Description="Takes an opionated view of building Spring applications and gets you up and running as quickly as possible." Icon="quote-left"/}}

{{macro_grid Title="SPRING DATA" Description="Blah blah blah blah" Icon="gear"/}}

{{/column}}

{{column}}

{{macro_grid Title="SPRING FRAMEWORK" Description="Provides core support for dependency injection, transaction management, web apps, data access, messaging and more." Icon="book"/}}

{{/column}}
{{/section}}
Reply | Threaded
Open this post in threaded view
|

Re: "Clickable bar" macro

Roman Muntyanu
This quick mock-up is exactly what I meant :)

Thanks!
Reply | Threaded
Open this post in threaded view
|

Re: "Clickable bar" macro

Hamster
This is the code I'm using to create those "blocks":

{{velocity}}
#set($title=$xcontext.macro.params.Title)
#set($description=$xcontext.macro.params.Description)
#set($icon=$xcontext.macro.params.Icon)
#set($link=$xcontext.macro.params.Link)
{{html wiki="true"}}
<div style="
width: 240px;
height: 240px;
display: inline-block;
padding-left: 5px;
background-color: rgb(255,255,255);
border-radius: 2px;
border-width: 2px;
border-style: solid;
text-align: center;
">
<br>
{{icon name=$icon size="4x" title=$titel}}{{/icon}}<br>
<br>
**$title**<br>
<br>
//$description//<br>
<br>
</div>
<br>
{{/html}}
{{/velocity}}

One thing missing...the ability to open a link when you click on the DIV.