Skip to content

Commit

Permalink
Merge pull request Sunbird-Ed#16 from sri-pusuluri/release-2.4.0
Browse files Browse the repository at this point in the history 
card and modal component html css updates
  • Loading branch information
@sri-pusuluri
sri-pusuluri authored Aug 29, 2019
2 parents 788d0cc + 9e3e568 commit 5a737ea
Show file tree
Hide file tree
Showing 13 changed files with 3,711 additions and 2,675 deletions.
5,151 changes: 2,573 additions & 2,578 deletions sb-ui-components-app/package-lock.json
View file

Large diffs are not rendered by default.

51 changes: 25 additions & 26 deletions sb-ui-components-app/projects/sb-ui-components/src/lib/card/card.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,30 @@
<div class="sb-card" tabindex="0">
<div class="sb-card-body">
<div class="sb-card-metas">
<div class="sb-card-image mr-16">
<img src={{img}} />
</div>
<div class="sb-card-meta course">
<div class="sb-card-meta-item mb-16">
Topic : {{topic}}
</div>
<div class="sb-card-meta-item">
Subtopic : {{subtopic}}
</div>
</div>
</div>
<h4 class="sb-card-title">
{{title}}
</h4>
<div class="sb-card-org ellipsis">
{{org}}
<!-- card component -->


<div class="sbcard sbcard--resource sbcard--course">

<div class="sbcard__main_area">
<div class="sbcard__img"><img src={{img}} alt="{{title}}" title="{{title}}"></div>

<div class="sbcard__info">
<h4 class="sbcard__title sb__ellipsis sb__ellipsis--two">{{title}}</h4>
<div class="sbcard__meta1"><span>{{subject}}</span><span class="dot-divider"></span><span>{{class}}</span></div>
</div>
</div>
<div class="sb-card-progressbar">
<div class="ui progress success">
<div class="bar" style="width: 100%;">
<div class="progress">100%</div>
<!-- content for only desktop -->
<div class="sbcard__moreinfo sb__DesktopOnly">
<div class="sbcard__meta2">
<div class="sbcard__medium"><span class="medium">{{medium}}</span></div>
<div class="sbcard__org sb__ellipsis">{{org}}</div>
</div>

<div class="sbcard__tags">
<span class="sbcard__badge"><img src="assets/images/badge.svg" alt="" title="" /></span>
<span class="sbcard__type">{{category}}</span>
</div>
<div class="label"></div>
</div>
<div class="sbcard__progressbar sbcard__progressbar--green">
<span style="width:50%"></span>
</div>
</div>
</div>

236 changes: 235 additions & 1 deletion sb-ui-components-app/projects/sb-ui-components/src/lib/card/card.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1 +1,235 @@
.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}
/* sb card component css */

.sb__DesktopOnly {
display: none;
@media screen and (min-width: 768px) {
display: block;
}
}


.sbcard {
width: 100%;
border-radius: 2px;
background-color: #ffffff;
box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.16);
display: flex;
flex-direction: column;
cursor:pointer;
&--resource {
}
&--course {
}
&__main_area {
display: flex;
flex-direction: row;
align-items: center;
padding: 8px;
height: 80px;
}
&__img {
height: 64px;
width: 64px;
overflow: hidden;
margin-right: 8px;
flex: 1 0 64px;
img {
width: 100%;
}
}
&__info {
}
&__title {
color: #333333;
font-size: 14px;
margin-bottom: 0px;
line-height: normal;
}
&__meta1 {
color: #979797;
font-size: 12px;
display: inline-flex;
align-items: center;
}
.dot-divider {
width: 4px;
height: 4px;
border-radius: 100%;
background-color: #d8d8d8;
display: inline-block;
margin: 0px 8px;
}
&__moreinfo {
border-top: 1px solid #e9e5e5;
border-radius: 0 0 2px 2px;
background-color: #fafafa;
display: flex;
flex-direction: row;
align-items: stretch;
justify-content: space-between;
padding: 8px;
max-height: 56px;
}

&__meta2 {
color: #666666;
font-size: 12px;
line-height: 14px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-around;
}
&__medium {
span {
}
}
&__org {
}
&__tags {
display: flex;
flex-direction: row;
align-items: center;
}
&__badge {
display: flex;
img {
width: 16px;
}
}
&__type {
margin-left: 24px;
background: #999;
position: relative;
height: 20px;
padding: 0 8px 0px 4px;
color: #fff;
margin-right: -8px;
font-size: 11px;
display: flex;
align-items: center;
&:before {
content: "";
width: 0;
height: 0;
border-width: 10px 5px;
border-style: solid;
border-color: #999 #999 #999 transparent;
position: absolute;
left: -10px;
}
}
}





.sbcard__progressbar {
height: 4px;
position: relative;
margin: 0px 0 0px;
background: #999;
border-radius: 0px;
box-shadow: inset 0 -1px 1px rgba(255,255,255,.3)
}
.sbcard__progressbar > span {
display: block;
height: 100%;
background-color: rgb(43, 194, 83);
background-image: -webkit-gradient(
center bottom,
rgb(43, 194, 83) 37%,
rgb(84, 240, 84) 69%
);
box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3),
inset 0 -2px 6px rgba(0, 0, 0, 0.4);
position: relative;
overflow: hidden;
}
.sbcard__progressbar > span:after,
.animate > span > span {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-image: -webkit-gradient(
linear,
0 0,
100% 100%,
color-stop(0.25, rgba(255, 255, 255, 0.2)),
color-stop(0.25, transparent),
color-stop(0.5, transparent),
color-stop(0.5, rgba(255, 255, 255, 0.2)),
color-stop(0.75, rgba(255, 255, 255, 0.2)),
color-stop(0.75, transparent),
to(transparent)
);
z-index: 1;
background-size: 50px 50px;
-webkit-animation: move 2s linear infinite;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
overflow: hidden;
}

.animate > span:after {
display: none;
}

@-webkit-keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}

.orange > span {
background-color: #f1a165;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #f1a165),
color-stop(1, #f36d0a)
);
background-image: -webkit-linear-gradient(#f1a165, #f36d0a);
}

.red > span {
background-color: #f0a3a3;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #f0a3a3),
color-stop(1, #f42323)
);
background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
}

.nostripes > span > span,
.nostripes > span:after {
-webkit-animation: none;
-moz-animation: none;
background-image: none;
}


.sb__ellipsis {
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
&--two {
-webkit-line-clamp: 2;
}
}
5 changes: 5 additions & 0 deletions sb-ui-components-app/projects/sb-ui-components/src/lib/card/card.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,11 @@ import { Component, OnInit, Input } from '@angular/core';
styleUrls: ['./card.component.scss']
})
export class CardComponent implements OnInit {

@Input() subject: string;
@Input() class: string;
@Input() medium: string;
@Input() category: string;
@Input() title: string;
@Input() topic: string;
@Input() subtopic: string;
Expand Down
25 changes: 22 additions & 3 deletions sb-ui-components-app/projects/sb-ui-components/src/lib/modal/modal.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,22 @@
<p>
modal works!
</p>

<!-- modal component -->
<div class="sbmodal--overlay"></div>
<div class="sbmodal sbmodal--md sbmodal--primary ">
<!-- modal header area -->
<div class="sbmodal__header">
<h4>Modal Heading</h4>
<div class="close"><i class="close icon"></i></div>
</div>
<!-- modal body area -->
<div class="sbmodal__content sbmodal__content-scroll">
<p>Amazon Textract is a service that automatically extracts text and data from scanned documents. Amazon Textract goes beyond simple optical character recognition (OCR) to also identify the contents of fields in forms and information stored in tables.</p>
<p>Many companies today extract data from documents and forms through manual data entry that’s slow and expensive or through simple optical character recognition (OCR) software that requires manual customization or configuration. Rules and workflows for each document and form often need to be hard-coded and updated with each change to the form or when dealing with multiple forms. If the form deviates from the rules, the output is often scrambled and unusable.</p>
</div>
<!-- modal actions area -->
<div class="sbmodal__actions">
<button type="button" class="sbbtn sbbtn--sm">Yes</button>
<button type="button" class="sbbtn sbbtn--sm">No</button>

<button type="button" class="sbbtn sbbtn--sm">Maybe</button>
</div>
</div>
Loading

0 comments on commit 5a737ea

Please sign in to comment.