Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Default Handlebars template that can be used (and customized) when surfacing Microsoft Graph user results in WordPress using the WPO365 (WordPress + Office 365) plugin (see https://www.wpo365.com/working-with-handlebars-templates/ for details).
<content>
<script id="jshelpers">
</script>
<header id="header" type="x-handlebars-template">
<style>
.pintraItemCell {
position: relative;
outline: transparent;
min-height: 54px;
padding: 10px;
box-sizing: border-box;
display: flex;
}
.pintraItemCell:hover {
background: #eee;
}
.pintraItemCell::selection {
background-color: #bfdcea;
}
.pintraItemIconWrapper {
width: 50px;
height: 50px;
flex-shrink: 0;
}
.pintraItemIcon {
display: block;
width: inherit;
height: inherit;
text-align: center;
}
.pintraItemIcon>img {
display: inline-block;
width: inherit;
height: auto;
}
.pintraItemContent {
margin-left: 10px;
overflow: hidden;
flex-grow: 1;
}
.pintraItemPrimaryText {
font-size: 21px;
font-weight: 100;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pintraItemSecondaryText {
width: 95%;
font-size: 80%;
font-weight: 200;
}
.pintraTertiaryText {
font-size: 60%;
}
.pintraItemMeta {
font-size: 50%;
font-weight: 100;
color: #d3d3d3;
box-sizing: border-box;
width: calc(100% - 50px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pintraItemLink,
.pintraItemLink:hover,
.pintraItemLink:visited {
font-size: inherit;
color: inherit;
text-decoration: underline;
}
.pintraItemPath {
font-size: 60%;
font-weight: 200;
box-sizing: border-box;
width: calc(100% - 50px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pintraActionButtonGroup {
display: flex;
display: -webkit-flex;
/* Safari */
flex-direction: column;
-webkit-flex-direction: column;
/* Safari 6.1+ */
}
.pintraActionButtonWrapper {
-webkit-flex-wrap: wrap;
/* Safari 6.1+ */
flex-wrap: wrap;
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-flex-shrink: 0;
flex-shrink: 0;
font-size: 12px;
line-height: 24px;
height: 24px;
display: -webkit-flex;
/* Safari */
display: flex;
cursor: pointer;
}
.pintraActionButtonIcon {
font-size: 12px;
line-height: 24px;
height: 24px;
width: 24px;
margin: 0;
padding: 0;
}
.pintraActionButtonLabel {
font-size: 12px;
line-height: 24px;
height: 24px;
}
</style>
</header>
<main id="item" type="x-handlebars-template">
<div id="pintraItemCell" class="pintraItemCell">
<div class="pintraItemIconWrapper">
<div class="pintraItemIcon">
{{avatar dataUrl}}
</div>
</div>
<div class="pintraItemContent">
<div class="pintraItemPrimaryText">
{{displayName}}
</div>
<div class="pintraItemSecondaryText">
{{jobTitle}}
</div>
<div class="pintraTertiaryText">
{{department}}
</div>
<div class="pintraItemMeta">
</div>
<div class="pintraActionButtonGroup">
<div class="pintraActionButtonWrapper" onclick="window.open('mailto:{{../WorkEmail}}', '_blank')">
<div class="pintraActionButtonIcon">
{{fabricIcon 'Mail'}}
</div>
<div class="pintraActionButtonLabel">
{{mail}}
</div>
</div>
<div class="pintraActionButtonWrapper" onclick="window.open('sip:{{../UserName}}', '_blank')">
<div class="pintraActionButtonIcon">
{{fabricIcon 'SkypeForBusinessLogo'}}
</div>
<div class="pintraActionButtonLabel">
{{imAddresses}}
</div>
</div>
<div class="pintraActionButtonWrapper" onclick="window.open('tel:{{../MobilePhone}}', '_blank')">
<div class="pintraActionButtonIcon">
{{fabricIcon 'CellPhone'}}
</div>
<div class="pintraActionButtonLabel">
{{mobilePhone}}
</div>
</div>
<div class="pintraActionButtonWrapper" onclick="window.open('tel:{{../WorkPhone}}', '_blank')">
<div class="pintraActionButtonIcon">
{{fabricIcon 'Phone'}}
</div>
<div class="pintraActionButtonLabel">
{{businessPhones}}
</div>
</div>
</div>
</div>
</div>
</main>
<footer id="footer" type="x-handlebars-template">
<div></div>
</footer>
</content>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.