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 🙂

Advertisements

Cards

Yesterday I received an email from Socialbiz UserGroup (I highly recommended to join this UG) with some updates regarding Bootstrap. Among one of the updates is the pre-announcement of Bootstrap 4. One of the main new features in BS4 turns out to be Cards.

Cards

Cards? What’s new about that? In my current development project I am using cards to display content in a container:

cards_design01

cards_design02

Components not Cards

And in a long ago blast (year 2002) we were already using cards:

philips_design

Material Design

Excuse me, by that time we called cards ‘components’. Heck we were even using Material Design principles with layered information:

philips_material_design

 

If you want to take a look at web design early 2000’s or you want to get inspiration how to set up a guide for your application developers  here is a link to a style guide.

Meanwhile I will be looking forward to the upcoming updates in Bootstrap 4. Nevertheless I welcome the ability to work with standardized definitions of cards =)

grouped cards

Links of interest

https://scotch.io/bar-talk/whats-new-in-bootstrap-4

http://iamkevinrhodes.com/top-5-bootstrap-4-features-coming-2015/

Adding search to an application with XPages interface (quickly)

For a project I was asked to deliver a new user interface for the web browser with the help of XPages. This included a search functionality.

First step: Look on OpenNTF

OpenNTF is a great resource to check if someone has done development before and has made the code available for public.

Here are some results that offer some form of search out of the box:

  • Advanced Search XPage Control (link)
  • Xpages Multi Database Search Custom Control (link)
  • Xpage Search And Tagcloud control (link)
  • XPages Basic Search (link)

I decided to go for the Advanced Search control. In case I have missed a great project on OpenNTF that provides a good search please drop a line in the comments.

Step 2: Modification

The Advanced Search control did not use any fancy from the extension library. So instead of the viewPanel control I decided to use the dataView control, plus the tooltip control to reduce the initial amount of text on the screen. Then I added some pagers from the extension library control again and voila here is the result:

Screenshot_4

So my search is ready in a couple of hours. Who says XPages is not rapid application development?

Thank you

A big thank you to all those who contributed their work to OpenNTF!

Download: Twitter Bootstrap in Domino Blog

Have you sometimes the feeling that in case you know too much it may be used against you?

Recently I posted how to include Twitter Bootstrap in the IBM Domino Blog template.  Some time ago I blogged frequently about administrating that same Blog application.

From my Twitter Bootstrap post I received some questions from people for help so the easiest way to assist would be to make an example application available for downloading. The NSF contains all the documents that are needed to utilize (or get started with) Twitter Bootstrap within a Domino blog.

I also added some sample blog posts and link documents that refer to websites for education and resources (themes).

Download

Here you can download the example:  link.

Instructions

  • Extract the file.
  • Sign the application with proper ID.
  • Apply proper ACL settings.
  • Open the Configuration document and apply correct settings.
  • Launch the application in browser.
    • In case the HTML layout is rendered properly I suggest to save ALL documents under HTML Templates section.

Good luck!

Screenshots

Homepage
Document
A document list (~ Notes view)
Mobile display

Application connections

Yesterday I broadcasted a presentation I wrote that describe all the Notes applications we have that guide developers in their development projects. Think about applications in the following categories:

  • Standards / Guidelines
  • Templates
  • Components
  • Resources
  • Tools
  • Knowledge
  • IBM resources
  • Project
  • Registries
I was pointed by a colleague of the existence of an application that was not listed.
The database contain documents that describe the relationship from 1 design element in an application with another design element in another Notes application. At the moment the registration is a manual process so we had a discussion how much business value it would have to have all connections for all applications in our domain registered?
Another question that rose:
How to get those connections? A connection can be in @Formula, LotusScript, JavaScript, Java, Text (as in HTML) etcetera. Would there be scripts available (free, commercial) who can do this job? Are there products/services who deliver the same information?
Is there a common desire in your organisation for these kind of information and how did you solve it?

The Woork Handbook

One of the Blogs I like to follow is Woork by Antonio Lupetti. Antonio writes about web design and web development. His articles contain appealing tutorials and great, practical example code.

A must read for Domino developers.

Last month he has bundled his articles bout CSS, HTML, Ajax, web programming, JavaScript frameworks and other topics about web design in The Woork Handbook, which you can download for free:

 

The Woork Handbook
The Woork Handbook

Can we see this as a trend ‘bundled blog-articles’?

Great UI examples for LN applications (recap)

Some time ago I was asking for some examples of great UI’s for Lotus Notes applications. All this promote the upcoming roll-out of the Notes 8 client in our organization.

Too bad I did not receive so many examples but the ones I received were very helpful and food for thought.

Criteria I would like to set for a great UI is that it should look:

  • similar in both Notes 8 standard (Java) and basic configuration
  • familiar to the PIM applications
  • like a Notes 8 application

One great help was the document ‘User experience guidelines for IBM® Lotus® rich client applications and plug-ins‘ written by Mary Beth Raven. On Inside Lotus you can also download a example discussion template so you can see yourself how the new templates will look like (in your Notes 7 client).

Also Martin Vereecken wrote a usefull tip about mimicing the action buttons from Java views.

Well here is my so far so good result:

UI example
UI example

Nothing ‘spectaculair’ but going to the guidelines document and applying the rules in an application brings a lot of ‘logic’ and consistence among other applicatons to the end-user.

One guideline had my special attention:
Put actions in the Actions menu and action bar. Do not put actions in the outline unless the action is directly related to one of the views or folders.
Normally I use an outline for actions that are so general that I want to have it everywhere available (like opening a configuration profile). Therefor I added a header with tabs. One is called ‘Menu options’ where I provide a dialogs with actions that are related to certain userroles (admin, editor, reader).
I also added a ‘Using’ and ‘About’ tab in the header to push our developers to provide instructions and general information about the application. Something that is often lacking.
For the ‘menu’ or ‘outline’ I would like to use collapsible tables like in the OpenTV project on OpenNTF but that is still bugging me
Your contribution is still welcome =)