Loading libfnord/webui/components/fn-card-demo.html +36 −0 Original line number Diff line number Diff line Loading @@ -27,4 +27,40 @@ </fn-card-extra-content> </fn-card> </section> <section> <h1><i>Example 2 »</i> Group of Cards</h1> <fn-cards> <fn-card> <fn-card-image> <img src='http://us.cdn001.fansshare.com/photos/zoekazan/zoe-kazan-at-event-of-happythankyoumoreplease-1130593817.jpg' /> </fn-card-image> <fn-card-content> <fn-card-content-header>Sara</fn-card-content-header> <fn-card-meta>Joined in 2014</fn-card-meta> <fn-card-content-description> Sara is a hairdresser from London </fn-card-content-description> </fn-card-content> <fn-card-extra-content> <i class="fa fa-user"></i> 22 Friends </fn-card-extra-content> </fn-card> <fn-card> <fn-card-image> <img src='http://us.cdn001.fansshare.com/photos/zoekazan/zoe-kazan-at-event-of-happythankyoumoreplease-1130593817.jpg' /> </fn-card-image> <fn-card-content> <fn-card-content-header>Sara</fn-card-content-header> <fn-card-meta>Joined in 2014</fn-card-meta> <fn-card-content-description> Sara is a hairdresser from London </fn-card-content-description> </fn-card-content> <fn-card-extra-content> <i class="fa fa-user"></i> 22 Friends </fn-card-extra-content> </fn-card> </fn-cards> </section> </template> libfnord/webui/components/fn-card.css +21 −8 Original line number Diff line number Diff line Loading @@ -6,28 +6,35 @@ /******************************* Standard *******************************/ ui.cards { fn-cards, .fn-cards { display:block; margin: 1em -0.5em 0em; } fn-card, .fn-card { display: block; margin: 0em 0.5em 1.5em; } .ui.cards:first-child, .ui.card:first-child { fn-cards:first-child, fn-card:first-child, .fn-cards:first-child, .fn-card:first-child { margin-top: 0em; } .ui.cards:last-child, .ui.card:last-child { fn-cards:last-child, fn-card:last-child, .fn-cards:last-child, .fn-card:last-child { margin-bottom: 0em; } /* Clearing */ .ui.cards:after, .ui.card:after { fn-cards:after, fn-card:after, .fn-cards:after, .fn-card:after { display: block; content: ' '; height: 0px; Loading @@ -36,6 +43,12 @@ fn-card, visibility: hidden; } fn-cards > fn-card, .fn-cards > .fn-card { float:left; margin: 0 .5em 1.5em; } /*-------------- Card ---------------*/ Loading Loading
libfnord/webui/components/fn-card-demo.html +36 −0 Original line number Diff line number Diff line Loading @@ -27,4 +27,40 @@ </fn-card-extra-content> </fn-card> </section> <section> <h1><i>Example 2 »</i> Group of Cards</h1> <fn-cards> <fn-card> <fn-card-image> <img src='http://us.cdn001.fansshare.com/photos/zoekazan/zoe-kazan-at-event-of-happythankyoumoreplease-1130593817.jpg' /> </fn-card-image> <fn-card-content> <fn-card-content-header>Sara</fn-card-content-header> <fn-card-meta>Joined in 2014</fn-card-meta> <fn-card-content-description> Sara is a hairdresser from London </fn-card-content-description> </fn-card-content> <fn-card-extra-content> <i class="fa fa-user"></i> 22 Friends </fn-card-extra-content> </fn-card> <fn-card> <fn-card-image> <img src='http://us.cdn001.fansshare.com/photos/zoekazan/zoe-kazan-at-event-of-happythankyoumoreplease-1130593817.jpg' /> </fn-card-image> <fn-card-content> <fn-card-content-header>Sara</fn-card-content-header> <fn-card-meta>Joined in 2014</fn-card-meta> <fn-card-content-description> Sara is a hairdresser from London </fn-card-content-description> </fn-card-content> <fn-card-extra-content> <i class="fa fa-user"></i> 22 Friends </fn-card-extra-content> </fn-card> </fn-cards> </section> </template>
libfnord/webui/components/fn-card.css +21 −8 Original line number Diff line number Diff line Loading @@ -6,28 +6,35 @@ /******************************* Standard *******************************/ ui.cards { fn-cards, .fn-cards { display:block; margin: 1em -0.5em 0em; } fn-card, .fn-card { display: block; margin: 0em 0.5em 1.5em; } .ui.cards:first-child, .ui.card:first-child { fn-cards:first-child, fn-card:first-child, .fn-cards:first-child, .fn-card:first-child { margin-top: 0em; } .ui.cards:last-child, .ui.card:last-child { fn-cards:last-child, fn-card:last-child, .fn-cards:last-child, .fn-card:last-child { margin-bottom: 0em; } /* Clearing */ .ui.cards:after, .ui.card:after { fn-cards:after, fn-card:after, .fn-cards:after, .fn-card:after { display: block; content: ' '; height: 0px; Loading @@ -36,6 +43,12 @@ fn-card, visibility: hidden; } fn-cards > fn-card, .fn-cards > .fn-card { float:left; margin: 0 .5em 1.5em; } /*-------------- Card ---------------*/ Loading
