Nice reversible cards in a IBM Verse style

In an application I am displaying objects with cards. Because the type of objects may differ in type and amount of data (text, images, tables, dates) the cards to display them differ.

Some cards have interaction (popup, dialogs, reversible) and some are just static. In this post I will discuss the reversible card type.

The reversible card has as features:

  • a front card with a folded corner, if you move over the fold an info icon appears which you can click to see the card’s back.
  • when you flip over to the back or front it is all nicely animated.
  • on the back of the card there is another icon to switch back to the card’s front.

The purpose of this reversible card is to save space in my UI, and to provide layout for secondary information, which is more important if you want to look at more detailed information.

It could also be a placeholder for data that, when placed in the front of the card, ask for too much landscape (e.g. a chart).

Things become much clearer with images so here are a few:

card-default

Image: Default presentation.

card-mouse-over-fold

Image: Expand folding (animation) when mouse-over.

card-flipped

Image: animation when flipping over a card.

card-back

Image: the back of the card.

I use the cards within a repeat control and with Bootstrap they align nicely and are responsive:

cards

I have no idea when Bootstrap 4 will be released with it’s card component but according to my experience cards are … less useful without interaction.

I made a small video to demonstrate the reversible cards feature:

If you want to implement the card yourself here is the code:

card-code

Most of the chemistry is performed with CSS so you also want that:

body{
padding:20px;
}

.flip {
-webkit-perspective: 800;
perspective: 800;
position: relative;
text-align: left;
min-height:200px;
margin-bottom:20px;
}

.flipped {
height: 100%;
background-color:#efefef;
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}

.card {
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
transform-style: preserve-3d;
transition: 0.5s;
}

.card .face {
-webkit-backface-visibility: hidden ;
backface-visibility: hidden ;
z-index: 2;
}

.front {
/*position: relative;*/
background-color: #FFF;

height:200px;
position: absolute;
width: 100%;
z-index: 1;
border: 1px solid #e3e3e3;
box-shadow: 5px 7px rgba(0, 0, 0, 0.15);
transition: background 0.4s ease;
}

.front-content, .back-content {
padding: 20px;
}
.front-content:before {
content:””;
width: 80px;
height: 80px;
float: right;
}
.corner-tip:before, .corner-tip:after {
background-color: #FFF;
position: absolute;
display: block;
z-index: 2;
border-top-right-radius: 60%;
width: 50%;
height: 50%;
content: “”;
}
.corner-tip:before {
right: 100%;
top: 0%;
background: -webkit-radial-gradient(-180% 200%, circle, rgba(255,255,255,0) 80%, rgba(0,0,0,.2) 100%);
}
.front:hover .corner-tip:before {
border-right: solid 1px #fff;
}
.front div.corner:hover .corner-tip:before {
border-right: solid 2px #fff;
}
.corner-tip:after {
top: 100%;
right: 0%;
background: -webkit-radial-gradient(-250% 320%, circle, rgba(255,255,255,0) 80%, rgba(0,0,0,.2) 100%);
}
.front:hover .corner-tip:after {
border-top: solid 1px #fff;
}
.front div.corner:hover .corner-tip:after {
border-top: solid 2px #fff;
}
.corner { /* edit these sizes for the default revealing corner size */
height: 20px;
width: 20px;
right: 0;
top: 0;
position: absolute;
overflow: visible;
}
.front:hover .corner { /* edit corner size (First animation, when the whole page is rollovered) */
height: 30px;
width: 30px;
}
.front div.corner:hover { /* edit corner size (Second animation, when the corner itself is rollovered) */
height: 50px;
width: 50px;
}
.corner:before {
position: absolute;
top: 0;
right: 0;
content: “”;
display: block;
width: 133%;
height: 133%;
}
.corner-contents:after {
position: absolute;
top: 0;
right: 0;
content: “”;
background: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0) 37%, #DDD 62%, rgba(230, 230, 230, 0.1) 64%, rgba(255, 255, 255, 0) 67%), -webkit-radial-gradient(-50% 150%, circle, transparent 74%, rgba(0, 0, 0, 0.2) 74%, transparent 81%);
display: block;
width: 133%;
height: 133%;
}
.corner-tip {
position: absolute;
top: 0;
right: 0;
content: “”;
background: -webkit-linear-gradient(45deg, #ddd 17%, #dfdfdf 18%, #f5f5f5 30%, #f8f8f8 34%, #eee 39%, rgba(200,200,200,0) 41%);
display: block;
width: 100%;
height: 100%;
}
.corner-button {
position: absolute;
top: 0;
right: 0;
color: #fff;
text-align: center;
padding:5px;
display: inline-block;
font-size: 1.6em;
color:black;
}
.corner-contents {
width: 125%;
position: absolute;
display: block;
overflow: hidden;
-webkit-mask: -webkit-linear-gradient(45deg, transparent 49%, #000 53%);
top: 0;
right: 0;
height: 125%;
}
._corner-contents:before {
content: “”;
position: absolute;
top: 0;
right: 0;
content: “”;
display: block;
width: 100%;
height: 100%;
background-color: #eeeef4; /* Match this background color to #fpc_effect-back */
}
.corner, .corner-contents, .corner-tip {
-webkit-transition-property: all;
-webkit-transition-duration: .3s;
-webkit-transition-timing-function: cubic-bezier(0, 0.35, .5, 1.7);
}

.back {
height:200px;
width: 100%;

-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
border: 1px solid #e3e3e3;
box-shadow: 5px 7px rgba(0, 0, 0, 0.15);
transition: background 0.4s ease;
}

.imgThumb{
width:66px;
height:66px;
}

.card blockquote {
border-left: none;
margin: 0;
}

.card blockquote img {
margin-bottom: 10px;
}

.card blockquote p:before {
content: “\f10d”;
font-family: ‘Fontawesome’;
float: left;
margin-right: 10px;
}

Okay, you are now all powered to impress your customers. Happy development 🙂

I Like Bubble Commenting

Strange subject title isn’t?

I have created a repository of my bubble/social speech layout, so if you want to have a closer look and implement it yourself then you are free to go.

I updated the @mention implementation so you get a nice icon in front of the name:

mention20

In order to have icons I updated my LotusScript agent to add a URL to an image in the PhotoURL field of the Person form in the FakeNames.nsf. For now I stored the icons in the NSF but in case you have a directory you use the reference to images from there.

I have also added an updated version to Like/Unlike comments, in stead of SSJS now most of the logic resides in the LikeController class. When you hover over the icon you get a list presented with people who have liked the comment.

likes_hover_icon

Ofcourse nothing is stress-tested but I have not seen major issues so far. I hope you like it and get inspired to modernize your IBM Notes applications !

Add 20 years of experience to your workforce

You can 20 years of experience within IBM Notes and Web development to your workforce by hiring me.

Interested? Read my curriculum vitae on LinkedIn: http://www.linkedin.com/in/patrickkwinten and get in contact.

I am happy to work WITH you !

FlipSwitch style for your checkboxes

A flip switch is an alternative look for a checkbox or the two-option select menu. It can be toggled by a click or a swipe.

flipswitchoff

I am not sure if it’s originated from mobile interfaces, at least it is there where they are most common. So if you modernize an application and optimize it for mobile access you might consider adding flip switch behaviour to these form elements.

Here is an example how to do this with XPages:

htmlswith

 

Ofcourse you have to provide the CSS. The CSS depends on your theme. There are handy sites that might help you with it.

Here is my CSS:

.onoffswitch {
position: relative; width: 90px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: “ON”;
padding-left: 10px;
background-color: #34A7C1; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: “OFF”;
padding-right: 10px;
background-color: #EEEEEE; color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 18px; margin: 6px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 56px;
border: 2px solid #999999; border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}

I hope you find this tip useful…

flipswitch

 

Add 20 years of experience to your workforce

 

You can 20 years of experience within IBM Notes and Web development to your workforce by hiring me.

Interested? Read my curriculum vitae on LinkedIn: http://www.linkedin.com/in/patrickkwinten and get in contact.

I am happy to work WITH you !

Draggable modal

For a project a request was to make a Bootstrap modal (a Dialog control in the Extension Library) as draggable. By default, the modal does not have that feature. So can you make it draggable again?

In xsp-mixin stylesheet the class xsp-responsive-modal is using !important for the left and top properties which prevents that the modal is draggable. A work-around can be achieved by replacing these class properties with your own that does not use !important.

To replace the default class add for the onShow event of the dialog:

<xe:this.onShow>
<![CDATA[
x$(“#{id:dialog1}”).removeClass(“xsp-responsive-modal”).addClass(“draggable-responsive-modal”);
]]>
</xe:this.onShow>

Your custom class could look as followed:

.draggable-responsive-modal {
display: block;
width: auto;
left: 0;
top: 0;
z-index: 1050 !important;
}

The x$() function is the infamous utility function from Mark Roden to work with JQuery.

I added the code to GitHub Gist: https://gist.github.com/PatrickKwinten/1d442e28ff0d59f8e01728bffab13e4f

Add 20 years of experience to your workforce

 

You can 20 years of experience within IBM Notes and Web development to your workforce by hiring me.

Interested? Read my curriculum vitae on LinkedIn: http://www.linkedin.com/in/patrickkwinten and get in contact.

I am happy to work WITH you !

Styling the Pager control for Bootstrap UI

Many of us are acquainted with  Bootstrap in our XPages application. However if you place a Pager control on your XPage it does not render according bootstrap style.

So what can you do?

If you have the option to install the Extension Library with Bootstrap in it: DO IT.

If you don’t have that option you can place the Bootstrap resources in your NSF or use a CDN.

If you are using these last two options you will notice the Pager control is still non-Bootstrap styled. You can either:

  • Apply CSS yourself (link, link)
  • Apply your renderer (link)

I noticed in the first approach the … display for page numbering will not be proper styled:

Screen Shot 2016-03-01 at 10.46.13.png

If you are a CSS-wizard you probably can fix this (I can’t).

The second approach renders the Pager perfectly with Bootstrap style applied and hopefully the strange behaviours Frank van der Linden refers to do not appear.

Happy development =)

 

 

Applying some golden ratio to my XPages app

Introduction

A Friday XPages and beer tonight and I decided to tackle a beauty-contest problem I was confronted with earlier this week.

In an XPages application I am mixing material design principles and bootstrap together, more specific I am using the CSS grid system in Bootstrap to display collections of data in a tiled display format (better known as cards).

Golden ratio

Bootsrap enables me to make the tiled display responsive so for xs devices I display max 1 card per row, sm devices max 2 cards, md or lg max 4 cards. This works well for the width of a card BUT to make the cards look more aesthetic/ecstatic I want to apply some golden ratio or divine proportions.

Gold Bootstrap

First I thought to look if there is something available out there and I came along Gold Bootstrap, since I am already using Bootstrap, but this did not help me.

DIY

So I decided to pop open a beer and do it myself. This turned out to be rather simple… with the help of the responsive bootstrap toolkit.

The code below will check the viewport and depending on which viewport change the height style property of a card. Since I do not want large cards for xs and sm devices I set a width of 90 pixels then. For md and lg devices the cards may grow in size (width & height) but respect this golden ratio:

(function($, document, window, viewport){
$(document).ready(function() {
console.log(‘Current breakpoint:’, viewport.current());

if( viewport.is(“<md”) ) {
$( ‘.card-holder .list-item’ ).css( ‘height’, ’90px’);
}

if (viewport.is(‘>sm’)){
var firstCard = $( “.card-holder” ).first();
var firstCardWidth = firstCard.width();
$( ‘.card-holder .list-item’ ).css( ‘height’, (firstCardWidth/1.618) + ‘px’);
}
});

$(window).resize(function(){
console.log(‘Current breakpoint:’, viewport.current());
if( viewport.is(“<md”) ) {
$( ‘.card-holder .list-item’ ).css( ‘height’, ’90px’);
}
if (viewport.is(‘>sm’)){
var firstCard = $( “.card-holder” ).first();
var firstCardWidth = firstCard.width();
$( ‘.card-holder .list-item’ ).css( ‘height’, (firstCardWidth/1.618) + ‘px’);
}
});

})(jQuery, document, window, ResponsiveBootstrapToolkit);

As a result I get smaller cards in xs and sm devices:

gold-sm

and bigger cards in a 4 column layout on md and lg devices which resize really nice:

gold-lg

Now I just need to fill up this additional landscape on a card with some usefull information…

fix for down caret icon in dijit.TitlePane when using Bootstrap from ExtLib

For unknown reason the dijit.TitlePane is not part of the Dojo controls in the ExtLib. You can implement your own version and Mark Roden posted a nice description how to achieve this. HOWEVER in case you are using the Bootstrap theme in the Extension Library you will notice when opening a pane the down caret icon can not be displayed.

Here is the build up for 2 TitlePanes dijits:

<xp:div id=”titlePaneGemCars” dojoType=”dijit.TitlePane” title=”German Cars”>
Audi
BMW
Mercedes
<xp:this.attrs>
<xp:attr name=”open” value=”false”></xp:attr>
<xp:attr name=”toggleable” value=”true”></xp:attr>
</xp:this.attrs>
</xp:div>
<xp:div id=”titlePaneJapBikes” dojoType=”dijit.TitlePane”
title=”Japanese Bikes”>
<xp:this.attrs>
<xp:attr name=”open” value=”false”></xp:attr>
<xp:attr name=”toggleable” value=”true”></xp:attr>
</xp:this.attrs>
Honda
Suzuki
Yamaha
</xp:div>

Here is how it looks like in the browser:

titlepane_error

In case you choose another theme e.g. oneUI (*cough*) the panes are displayed as followed:

titlepane_oneUI

Note the display of carets is different (no carets for closed panes).

So how are we going to fix this? Via your friend CSS! Include the following CSS snippet at your page/stylesheet/theme:

.xsp.dbootstrap .dijitTitlePane .dijitArrowNode::before {
color: #428bca;
font-family: “Glyphicons Halflings”;
content: “\e114”;
font-size: 12px;
padding-left: 10px;
position: relative;
top: -1px;
}

The definition is similar for a closed dijit but the content is set here to specific Glyphicon (the chevron down icon). The content is set to a hexidecimal value for an icon? On the glyphicons site you can search for halflings and it will tell for the chevron-down icon the value is UTF+e114.

As a result your opened titlepane wil have the correct icon displayed:

titlepane_fixed

Happy coding!

Ps I assume there is someone smart here to register this break as a request at IBM?

context.getProperty(‘xsp.resources.aggregate’).equals(‘…’) working for resource and not resources definition

In a previous post I described a problem when implementing Font Awesome in conjunction with the Use runtime optimized JavaScript and CSS resources XSP property. The solution can be summarized as followed:

  • – Move the @font-face part in the font-awesome.min.css into 2 new CSS e.g.

./font-awesome-4.2.0/css/font-awesome-fontFamily.css
./font-awesome-4.2.0/css/font-awesome-fontFamily.min.css

  • adapt for minified version the paths to the fonts e.g.

url(‘../fonts/fontawesome-webfont.eot’)
url(../../../fonts/fontawesome-webfont.eot)

  • load in a Theme design element the correct version based upon your XSP property setting:

context.getProperty(‘xsp.resources.aggregate’).equals(‘…’)   //true or false

This works for a resource definition but apparently not for a resourceS definition.

The following code

<resources rendered=”#{javascript:context.getProperty(‘xsp.resources.aggregate’).equals(‘false’)}”>
<styleSheet
href=”style.css”>
</styleSheet>
</resources>
<resources rendered=”#{javascript:context.getProperty(‘xsp.resources.aggregate’).equals(‘true’)}”>
<styleSheet
href=”style.min.css”>
</styleSheet>
</resources>

will load both files in optimized / non optimized runtime. Perhaps IBM can fix this?

Lotusphere 2011 – Day X

So many Xpages sessions throughout LS2011 so I guess you  can call each day day X…

XPages 101 How to build a simple XPages application

Very ambitious of the presenters to ram through a large number of slides (which they failed). Although the application was simple I learned some tips.

Rated: 6

 

BP206 Working with Feeds

I must say that this was one of the best presentations I have seen on LS2011. Although the XPages factor was not touched in this session Julian Robichaux had interesting content in his presentation. Also they way he presented was more professional that the average speaker.

Rated: 9

 

AD113 How your Xpages in Style

Maybe I made a mistake but I had the idea that good design principles (hopefully related to oneUI) were gonna be explained but the session was about CSS for beginners. One of the rare sessions I walked away from.

Rated: 0

 

 

AD116 XPages extension library – Making development even easier

I had no idea why the presenters were presenting but they obviously were non at all interested in their audience. It was more mumbling and making jokes to each other that actually holding a presentation.

Rated: 3

 

 

INV107 Application Development Strategy

It was great to hear that IBM positions Notes/Domino as the RADD platform for developing collaborative workflow solutions. Where Domino stood in IBM’s software portfolio has been unclear for a while but this presentation took that away.

Philippe Riand also entered the stage and things were good. The social collaboration toolkit was explained and what that would mean for all IBM’s development platforms.

On the audience question when Domino Designer (applause from the crowd) is gonna be available for the script kiddies on Mac he did not dare to answer…

Rated: 9

 

 

BP211 XPages blast

1 hour – 30 tips on XPages development, some good, some too simple. At least enjoyable and well presented.

Rated: 9