Issue #000 task: Card components

vinodkumar45 · Aug 19, 2019 · dfe86f9 · dfe86f9
1 parent 443a2a9
commit dfe86f9
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 19 deletions.
diff --git a/demo/src/app/components/card/demos/basic/card-basic.html b/demo/src/app/components/card/demos/basic/card-basic.html
@@ -1,5 +1,14 @@
-<p>
-  <sb-card [dismissible]="false">
-    <strong>Warning!</strong> Better check yourself, you're not looking too good.
-  </sb-card>
-</p>
+<sb-card type="course" dir="rtl" lang="ur" img="https://cdn.sunbirded.org/player/assets/images/book.png">
+  <ng-template sbCardTitle>Card title</ng-template>
+  <ng-template sbCardTopic1>Card topic 1</ng-template>
+  <ng-template sbCardTopic2>Card topic 2</ng-template>
+  <ng-template sbCardOrg>Card org</ng-template>
+</sb-card>
+
+<sb-card type="resource" dir="ltr" lang="en" img="https://cdn.sunbirded.org/player/assets/images/book.png">
+  <ng-template sbCardTitle>Card title</ng-template>
+  <ng-template sbCardLabel>Card label</ng-template>
+  <ng-template sbCardSubject>Card subject</ng-template>
+  <ng-template sbCardMedium>Card medium</ng-template>
+  <ng-template sbCardClass>Card class</ng-template>
+</sb-card>
diff --git a/src/card/card.module.ts b/src/card/card.module.ts
@@ -7,5 +7,5 @@ export {SbCard} from './card';
 export {SbCardConfig} from './card-config';
 
 @NgModule({declarations: [SbCard], exports: [SbCard], imports: [CommonModule], entryComponents: [SbCard]})
-export class SbCardModule {
+  export class SbCardModule {
 }
diff --git a/src/card/card.scss b/src/card/card.scss
@@ -1,3 +1,7 @@
-ngb-alert {
-  display: block;
+sb-card {
+  display: inline-block;
 }
+
+:root{--font-stack-en: 'Noto Sans','Noto Sans Devanagari','Noto Sans Tamil','Noto Sans Bengali','Noto Sans Malayalam','Noto Sans Gurmukhi','Noto Sans Gujarati','Noto Sans Telugu','Noto Sans Kannada','Noto Sans Oriya','Noto Nastaliq Urdu',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;--font-stack-hi: 'Noto Sans Devanagari','Noto Sans','Noto Sans Tamil','Noto Sans Bengali','Noto Sans Malayalam','Noto Sans Gurmukhi','Noto Sans Gujarati','Noto Sans Telugu','Noto Sans Kannada','Noto Sans Oriya','Noto Nastaliq Urdu',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;--font-stack-ur: 'Noto Sans','Noto Nastaliq Urdu','Noto Sans Devanagari','Noto Sans Tamil','Noto Sans Bengali','Noto Sans Malayalam','Noto Sans Gurmukhi','Noto Sans Gujarati','Noto Sans Telugu','Noto Sans Kannada','Noto Sans Oriya',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;--blue: #024f9d;--black: #000000;--green: #008840;--orange: #e55a28;--red: #ff4558;--white: #ffffff;--indigo: #6610f2;--purple: #6f42c1;--pink: #e83e8c;--yellow: #ffc107;--teal: #20c997;--cyan: #17a2b8;--gray-hs: 0,0%;--gray: hsl(var(--gray-hs),20%);--gray-0: hsl(var(--gray-hs),95%);--gray-100: hsl(var(--gray-hs),80%);--gray-200: hsl(var(--gray-hs),60%);--gray-300: hsl(var(--gray-hs),59%);--gray-400: hsl(var(--gray-hs),40%);--gray-800: var(--gray);--primary-color: var(--blue);--secondary-color: var(--green);--tertiary-color: var(--orange);--primary-0: #F3F7FA;--primary-100: #EDF4F9;--primary-200: #80A7CE;--primary-250:#D3E7F4;--primary-300: #7AB4EE;--primary-400: var(--primary-color);--primary-600: #005391;--primary-800: #002E50;--secondary-0: #E1FFDF;--secondary-100: #00C786;--secondary-200: #07bc81;--secondary-400: var(--secondary-color);--tertiary-0: #FEEDD7;--tertiary-100: #FFA11D;--tertiary-400: var(--tertiary-color);--red-0: #FBCCD1;--red-100: #FF6979;--red-400: var(--red)}
+
+.sb-card{width:292px;background-color:var(--white);border:0.5px solid #dedede;border-radius:4px;cursor:pointer;overflow:hidden;margin-top:3px;transition:box-shadow .3s ease-out, transform .3s ease-out, opacity .2s ease-out;transition-delay:.1s}.sb-card:hover{transform:translate(0, -3px);box-shadow:0 2px 7px 0 rgba(0,0,0,0.16)}.sb-card .sb-card-body{height:204px;padding:16px 16px 8px 16px;overflow:hidden}.sb-card .sb-card-metas{display:flex;align-items:flex-end}.sb-card .sb-card-image{width:70px;height:92px;border:0.5px solid var(--gray-100);background-color:var(--gray-0);border-radius:2px;box-sizing:border-box;overflow:hidden}.sb-card .sb-card-image img{width:70px;height:92px;object-fit:cover}.sb-card .sb-card-meta{height:92px;width:172px;display:flex;flex-wrap:wrap;flex-direction:column;overflow:hidden}.sb-card .sb-card-label{color:var(--primary-color);font-size:10.9994px;border:1px solid var(--primary-color);border-radius:2px;padding:4px 8px;height:24px}.sb-card .sb-card-badge{height:30px;width:30px;object-fit:contain}.sb-card .sb-card-meta-item{font-size:11.9994px;color:var(--gray-400);width:172px;line-height:17px}.sb-card .sb-card-title{color:var(--primary-color);font-size:14px;line-height:17.5px;font-weight:700;height:35px;margin:16px 0 8px 0;overflow:hidden}.sb-card .sb-card-org{font-size:14px;color:var(--gray-400)}.sb-card .sb-card-progressbar{height:4px}.sb-card .sb-card-progressbar .ui.progress .bar{border-radius:0 4px 4px 4px}.sb-card .sb-card-hover{position:absolute;top:0;max-width:292px;width:100%;height:100%;background-color:rgba(2,79,157,0.85);display:none}.sb-card .sb-card-hover .sb-card-hover-content{display:flex;align-items:center;height:100%;justify-content:center}.sb-card .sb-card-hover.sb-card-hover-gray{background:rgba(153,153,153,0.95)}.sb-card .sb-card-hover.sb-card-hover-gray .sb-exclamation-icon,.sb-card .sb-card-hover.sb-card-hover-gray p{color:white}.sb-card:hover{box-shadow:0 2px 7px 0 rgba(0,0,0,0.16)}.sb-card:hover .sb-card-hover{display:block}app-card[lang="ta"] .sb-card .sb-card-label{font-size:9px}app-card[lang="ta"] .sb-card .sb-card-meta-item{font-size:10px}app-card[lang="ta"] .sb-card .sb-card-title{font-size:11.9994px}app-card[lang="ta"] .sb-card .sb-card-org{font-size:11.9994px}app-card[lang="ur"] .sb-card .sb-card-label{font-size:9px}app-card[lang="ur"] .sb-card .sb-card-meta-item{font-size:10px}app-card[lang="ur"] .sb-card .sb-card-title{font-size:11.9994px}app-card[lang="ur"] .sb-card .sb-card-org{font-size:11.9994px}.sb-wspace-card{height:128px;max-width:292px;border:.5px solid var(--gray-0);border-left:4px solid var(--white);border-radius:4px;background:var(--white);padding:16px 24px;margin:0px 24px 24px 0}.sb-wspace-card .sb-wspace-title{margin-bottom:8px;font-size:16.002px;font-weight:700}.sb-wspace-card .sb-wspace-description{font-size:11.9994px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}.sb-wspace-card:hover,.sb-wspace-card.active{border-left:4px solid var(--secondary-200);cursor:pointer;box-shadow:2px 5px 7px 0 rgba(0,0,0,0.2)}.sb-wspace-card:hover .sb-wspace-title,.sb-wspace-card.active .sb-wspace-title{color:var(--blue)}.sb-card-qr .sb-btn{border-radius:0;width:100%}.sb-card-qr:hover .sb-btn{background:var(--secondary-400)}.ui.card.sb-batch-card{border:1px solid var(--primary-200);box-shadow:none}.ui.card.sb-batch-card .item{padding:10px 0}.ui.card.sb-batch-card .item .content>.header{padding-bottom:5px}.ui.card.sb-batch-card>.sb-batch-card-content{padding:0 1rem;border-top:1px solid rgba(34,36,38,0.1)}.sb-batch-card .sb-batch-card-title{font-weight:600;font-size:1.18em}.sb-batch-card .item i.icon{font-size:16.002px}.sb-batch-card .sb-no-batch-found{background-color:var(--tertiary-0);border:1px solid var(--tertiary-100);padding:8px 16px;border-radius:4px;font-size:11.9994px}
diff --git a/src/card/card.ts b/src/card/card.ts
@@ -1,5 +1,6 @@
 import {
   Component,
+  Directive,
   Input,
   Output,
   EventEmitter,
@@ -9,32 +10,63 @@ import {
   OnChanges,
   OnInit,
   SimpleChanges,
-  ViewEncapsulation
+  ViewEncapsulation,
+  TemplateRef
 } from '@angular/core';
 
 import {SbCardConfig} from './card-config';
 
-/**
- * Alert is a component to provide contextual feedback messages for user.
- *
- * It supports several alert types and can be dismissed.
- */
+@Directive({selector: 'ng-template[sbCardTitle]'})
+export class SbCardTitle {
+  constructor(public templateRef: TemplateRef<any>) {}
+}
+@Directive({selector: 'ng-template[sbCardTopic1]'})
+export class SbCardTopic1 {
+  constructor(public templateRef: TemplateRef<any>) {}
+}
+@Directive({selector: 'ng-template[sbCardTopic2]'})
+export class SbCardTopic2 {
+  constructor(public templateRef: TemplateRef<any>) {}
+}
+@Directive({selector: 'ng-template[sbCardOrg]'})
+export class SbCardOrg {
+  constructor(public templateRef: TemplateRef<any>) {}
+}
+@Directive({selector: 'ng-template[sbCardLabel]'})
+export class SbCardLabel {
+  constructor(public templateRef: TemplateRef<any>) {}
+}
+@Directive({selector: 'ng-template[sbCardSubject]'})
+export class SbCardSubject {
+  constructor(public templateRef: TemplateRef<any>) {}
+}
+@Directive({selector: 'ng-template[sbCardMedium'})
+export class SbCardMedium {
+  constructor(public templateRef: TemplateRef<any>) {}
+}
+@Directive({selector: 'ng-template[sbCardClass'})
+export class SbCardClass {
+  constructor(public templateRef: TemplateRef<any>) {}
+}
+
+
 @Component({
   selector: 'sb-card',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   host: {'role': 'alert', 'class': 'alert', '[class.alert-dismissible]': 'dismissible'},
   template: `
     <ng-content></ng-content>
-    <button *ngIf="dismissible" type="button" class="close" aria-label="Close" i18n-aria-label="@@ngb.alert.close"
-      (click)="closeHandler()">
-      <span aria-hidden="true">&times;</span>
+    <button class="btn btn-link" [ngbPanelToggle]="panel">
+      {{panel.title}}<ng-template [ngTemplateOutlet]="panel.titleTpl?.templateRef"></ng-template>
     </button>
     `,
   styleUrls: ['./card.scss']
 })
-export class SbCard implements OnInit,
-    OnChanges {
+
+
+
+export class SbCard implements OnInit, OnChanges {
   /**
    * If `true`, alert can be dismissed by the user.
    *