Mittwoch, 19. April 2017

How to make a Custom Card Template with Oracle APEX

1- Go to Shared Components -> Templates -> Card and Copy the Card Template

2- Customize this Template. In my Case i have the below Code in Row Template 2


<li class="t-Cards-item #CARD_MODIFIERS#">
  <div class="t-Card">
      <span class="badge badge--new">#BADGE#</span>//I have add a Badge
      <span class="rating rating--new">#RATING#</span>// I have add the Rating
    <div class="t-Card-wrap">
      <div class="t-Card-icon u-color #CARD_COLOR#"><span class="t-Icon fa #CARD_ICON#"><span class="t-Card-initials" role="presentation">#CARD_INITIALS#</span></span></div>
      <div class="t-Card-titleWrap"><h3 class="t-Card-title">#CARD_TITLE#</h3></div>
      <div class="t-Card-body">
        <div class="t-Card-desc">#CARD_TEXT#</div>
          <div>
             
          <span class="t-Card-info">#CARD_SUBTEXT#</span>
              <span class="t-Card-info1">#CARD_SUBTEXT1#</span>// I have add this Span for the Price
         
          </div>
      </div>
      <span class="t-Card-colorFill u-color #CARD_COLOR#"></span>
    </div>
  </div>
</li>


3- Create your Report

select '<img src="#APP_IMAGES#imagep.png">' card_title,
'Alli Pierre' CARD_TEXT,
'GERMANY' CARD_SUBTEXT,
'143 €' CARD_SUBTEXT1,
 '<span class="STEA fa fa fa-star"></span> <paul>2,6/5</paul>' RATING,
 'neu' BADGE
               

from dual

union
select '<img src="#APP_IMAGES#imagep1.png">' card_title,
'Frank N' CARD_TEXT,
'USA' CARD_SUBTEXT,
'153 €' CARD_SUBTEXT1,
 '<span class="STEA fa fa fa-star"></span> <paul>4,6/5</paul>' RATING,
  'top' BADGE

from dual

union
select '<img src="#APP_IMAGES#imagep2.png">' card_title,
'Tom E' CARD_TEXT,
'PARIS' CARD_SUBTEXT,
'123 €' CARD_SUBTEXT1,
 '<span class="STEA fa fa fa-star"></span> <paul>4,6/5</paul>' RATING,
  'neu' BADGE

from dual

union
select '<img src="#APP_IMAGES#imagep3.png">' card_title,
'Alli P' CARD_TEXT,
'ITALIEN' CARD_SUBTEXT,
'123 €' CARD_SUBTEXT1,
 '<span class="STEA fa fa fa-star"></span> <paul>3,6/5</paul>' RATING,
  'neu' BADGE
             

from dual


union
select '<img src="#APP_IMAGES#imagep4.png">' card_title,
'Judith M' CARD_TEXT,
'ITALIEN' CARD_SUBTEXT,
'163 €' CARD_SUBTEXT1,
 '<span class="STEA fa fa fa-star"></span> <paul>4,3/5</paul>' RATING,
  'top' BADGE

from dual


4- Add Custom Css for the Look and Feel

.t-Card-info1 {
    float: right;
    background: rgb(60, 175, 133);
    color: rgb(255, 255, 255);
    font-weight: bold;
    padding-left: 5px;
    padding-right: 5px;
    -webkit-transform: rotate(-20deg);
    font-size: 2rem;
    padding-top: 5px;
    padding-bottom: 5px;
}


.t-Card-info1{
    float:right;
}

.fa-star{
    padding-top: 16px;
    color:rgb(254, 209, 65) !important;
}

img {
    border: 0;
    width: 200px;
    height: 200px;
    border-radius: 50%;
}



a {
    color: rgb(223, 189, 106);
    text-decoration: underline;
}




.pl .badge {
    width: 38px;
    height: 38px;
    font-size: 12px;
    line-height: 37px;
}

.badge--new {
    color: rgb(255, 255, 255);
    background-color: rgb(73, 169, 225);
}

.badge {
    position: absolute;
    z-index: 10;
    top: 3px;
    left: 3px;
    width: 50px;
    height: 50px;
    font-size: 13px;
    font-weight: bold;
    line-height: 50px;
    border-radius: 50%;
    /* padding-left: 9px; */
    text-align: center;
}

.rating {
    position: absolute;
    z-index: 10;
    top: 3px;
    right: 3px;
    width: 50px;
    height: 50px;
    font-size: 13px;
    font-weight: bold;
    line-height: 50px;
    border-radius: 50%;
    /* padding-left: 9px; */
    text-align: center;
}


@media only screen and (max-width: 1250px) {
   
    img {
   
    width: 100px !important;
    height: 100px !important;
 
}
   
}


Demo
https://apex.oracle.com/pls/apex/f?p=123868:16:15585191075860:::::


Keine Kommentare:

Kommentar veröffentlichen