currency symbol image in ionic - css

i am trying to get the value of Total redemption to be on the same line with the word "Total Redemption" like the way Total Accrued Points looks, i am using an image for my currency symbol and the code for this display is
<div class="item item-body " >
<div class="container">
<div class="right">
Total Accrued Points : {{reportData.accruedpoints}}<br/>
<p>Total Redemption:<img src='img/naira.gif' alt="Naira" height='20' width='20' align='bottom'> {{reportData.redeemableamt | currency : ""}}
</p>
</div>
<a <a href="#/app/transactionsBreakDown/{{reportData.submerchantId}}" class="button button-full button-assertive ink" >View {{reportData.submerchantId}} Details</a>
</div>
</div>

Related

cumulative layout shift (CLS) in html

I am getting CLS ON this piece of HTML can anyone tell the reason for why iam getting a layout shift. iam trying hard to get the CLS below 0.1 but failed to do so .. i guess bootstrap classes may causing the issue but how can i fix it
<section class="page-banner Games" style="height:400px;">
<div class="new-banner-collection-page" style="padding-bottom:1rem;">
<div class="row" style="height:100%">
<div class="col-md-7" style="height:100%; float:left">
<div id="tags-new-banner" class="" style="padding-left: 32px;padding-top:17px;">
<span class="playabe-breadcrum" max-width="100%">
<a class="playabe-breadcrum js-track-ga" href="/" data-action="{"to Page":"/"}" data-category="clicked bread crumb" style="display: inline;">Home</a> >
</span>
<span class="playabe-breadcrum" max-width="100%">
<a class="playabe-breadcrum js-track-ga" href="/search_contents/preview/games" data-action="{"to Page":"/search_contents/preview/games"}" data-category="clicked bread crumb" style="display: inline;">Games</a> >
</span>
<span class="playabe-breadcrum" max-width="100%">
<a class="playabe-breadcrum js-track-ga" href="/search_contents/preview/math-games" data-action="{"to Page":"/search_contents/preview/math-games"}" data-category="clicked bread crumb" style="display: inline;">Math Games</a> >
</span>
<span class="playabe-breadcrum">Counting Games</span>
</div>
<div class="title-new-collection-page" style="">
<h1 style="font-weight:700;">
Counting Games for Kids
</h1>
</div>
<p class="less-banner-content">
<span>The first step to embracing math is learning to count. Children learn to identify, group and classify objects by counting. SplashLearn’s cool online counting games provide respite from the monotony of practice worksheets through colorful virtual manipulatives. Children develop a bond </span>
<span id="js-read-more-banner-btn" onclick="readMoreFunc()" style="color:blue;">... Read more</span>
<span id="js-read-more-banner-content" style="display:none">with numbers that will see them through advanced math in the upcoming years.</span>
</p>
<div class="signup-ctas-new-banner">
<a class="new-banner-signup-link-parent" href="/parents/register#!/parent/creation">
<button class="new-banner-signup-btn-parent">Parents, Sign Up for Free</button>
</a>
<a class="new-banner-signup-link-teacher" href="/teachers/register">
<button class="new-banner-signup-btn-teacher">Teachers, Use for Free</button>
</a>
</div>
</div>
<div class="new-banner-images col-md-5" style="float:right">
<img alt="Imge" class="" style="max-width: 100%; width: 100%;height: 100%;object-fit: contain;" src="http://localhost:8300/cms_assets/images/Common-page.jpg">
</div>
</div>
</div>
</section>

How to extract Amazon Reviews?

I want to extract amazon reviews and all its related data like: Name of reviewer, rating, content, and (if possible) comments in response to that review.
I am using python 3.7.
You can achieve that by two methods:
API (reliable fast)
Ask for API from Amazon
Tools like Headless chrome or Selenium
check this post
Find DOM element in the page like
<div id="R1IZDPP09RA69A" data-hook="review" class="a-section review">
<div id="customer_review-R1IZDPP09RA69A" class="a-section celwidget" data-cel-widget="customer_review-R1IZDPP09RA69A">
<div class="a-row a-spacing-mini">
<a href="/gp/profile/amzn1.account.AGFB356ZQJQAHWZZABTTNIFGYMDA/ref=cm_cr_dp_d_gw_tr?ie=UTF8" class="a-profile" data-a-size="small">
<div aria-hidden="true" class="a-profile-avatar-wrapper">
<div class="a-profile-avatar">
<img src="https://images-eu.ssl-images-amazon.com/images/S/amazon-avatars/f0d86e6d-45d4-4cc7-a4b8-a062450c2c75._CR0,0,335,335_SX48_.jpg" class="" data-src="https://images-eu.ssl-images-amazon.com/images/S/amazon-avatars/f0d86e6d-45d4-4cc7-a4b8-a062450c2c75._CR0,0,335,335_SX48_.jpg">
<noscript><img src="https://images-eu.ssl-images-amazon.com/images/S/amazon-avatars/f0d86e6d-45d4-4cc7-a4b8-a062450c2c75._CR0,0,335,335_SX48_.jpg"></noscript>
</div>
</div>
<div class="a-profile-content"><span class="a-profile-name">Sana Khanam</span></div>
</a>
</div>
<div class="a-row"><a class="a-link-normal" title="4.0 out of 5 stars" href="/gp/customer-reviews/R1IZDPP09RA69A/ref=cm_cr_dp_d_rvw_ttl?ie=UTF8&ASIN=B079Q9VNWQ"><i data-hook="review-star-rating" class="a-icon a-icon-star a-star-4 review-rating"><span class="a-icon-alt">4.0 out of 5 stars</span></i></a><span class="a-letter-space"></span><a data-hook="review-title" class="a-size-base a-link-normal review-title a-color-base a-text-bold" href="/gp/customer-reviews/R1IZDPP09RA69A/ref=cm_cr_dp_d_rvw_ttl?ie=UTF8&ASIN=B079Q9VNWQ">Amazing service by VOLTAS !!Appreciated 🖒</a></div>
<span data-hook="review-date" class="a-size-base a-color-secondary review-date">17 May 2018</span>
<div class="a-row a-spacing-mini review-data review-format-strip"><span data-hook="avp-badge-linkless" class="a-size-mini a-color-state a-text-bold">Verified Purchase</span></div>
<div class="a-row a-spacing-small review-data">
<span data-hook="review-body" class="a-size-base review-text">
<div aria-live="polite" data-a-expander-name="review_text_read_more" data-a-expander-collapsed-height="300" class="a-expander-collapsed-height a-row a-expander-container a-expander-partial-collapse-container" style="max-height: none; height: 300px;">
<div data-hook="review-collapsed" aria-expanded="false" class="a-expander-content a-expander-partial-collapse-content" style="padding-bottom: 19px;">5 th day after having AC installed.<br>PROS:<br><br>-Cooling nice<br>-Looks good<br>-Good one in this price range<br>-Fast Installation within 24h<br>- Customer support response appriciated<br><br>CONS<br>-Started making weird little noises while decreasing temperature.<br><br>-I don't understand but some unpleasant smell being diffused after starting it at the 5th day of installation.<br><br>-Contacted seller, issue resolved!<br><br>Overall would RECOMMEND!! Go for it.</div>
<div class="a-expander-header a-expander-partial-collapse-header" style="opacity: 1; display: block;">
<div class="a-expander-content-fade"></div>
<i class="a-icon a-icon-extender-expand"></i><span class="a-expander-prompt">Read more</span>
</div>
</div>
</span>
</div>
<div data-hook="review-comments" class="a-row review-comments">
<span class="cr-vote" data-hook="review-voting-widget">
<div class="a-row a-spacing-small"><span data-hook="helpful-vote-statement" class="a-size-base a-color-tertiary cr-vote-text">5 people found this helpful</span></div>
<div class="cr-helpful-button aok-float-left">
<span class="a-button a-button-base" id="a-autoid-14">
<span class="a-button-inner">
<a href="https://www.amazon.in/ap/signin?openid.return_to=https%3A%2F%2Fwww.amazon.in%2Fdp%2FB079Q9VNWQ%2Fref%3Dcm_cr_dp_d_vote_lft%3Fie%3DUTF8%26voteInstanceId%3DR1IZDPP09RA69A%26voteValue%3D1%26csrfT%3DgiYnW3e%252Fv7p8y07m5Je2hA3LGXQ2gVKHQWzD%252F40AAAAJAAAAAFuvcotyYXcAAAAAFVfwLBerPie4v1Ep%252F%252F%252F%252F%23R1IZDPP09RA69A&openid.identity=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0%2Fidentifier_select&openid.claimed_id=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0%2Fidentifier_select&openid.assoc_handle=inflex&openid.mode=checkid_setup&openid.ns=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0" data-hook="vote-helpful-button" class="a-button-text" role="button" id="a-autoid-14-announce">
<div class="cr-helpful-text">
Helpful
</div>
</a>
</span>
</span>
</div>
</span>
<i class="a-icon a-icon-text-separator" role="img" aria-label="|"></i><a data-hook="review-comment" class="a-size-base a-link-normal a-color-secondary a-text-normal" href="/gp/customer-reviews/R1IZDPP09RA69A/ref=cm_cr_dp_d_rvw_btm?ie=UTF8&ASIN=B079Q9VNWQ#wasThisHelpful">Comment</a><span class="cr-footer-line-height">
<span><i class="a-icon a-icon-text-separator" role="img" aria-label="|"></i><span class="a-declarative" data-action="cr-popup" data-cr-popup="{"width":"580","title":"ReportAbuse","url":"/hz/reviews-render/report-abuse?ie=UTF8&voteDomain=Reviews&ref=cm_cr_dp_d_rvw_hlp&csrfT=giYnW3e%2Fv7p8y07m5Je2hA3LGXQ2gVKHQWzD%2F40AAAAJAAAAAFuvcotyYXcAAAAAFVfwLBerPie4v1Ep%2F%2F%2F%2F&entityId=R1IZDPP09RA69A&sessionId=257-1905223-9805712","height":"380"}"><a class="a-size-base a-link-normal a-color-secondary report-abuse-link a-text-normal" href="/hz/reviews-render/report-abuse?ie=UTF8&voteDomain=Reviews&ref=cm_cr_dp_d_rvw_hlp&csrfT=giYnW3e%2Fv7p8y07m5Je2hA3LGXQ2gVKHQWzD%2F40AAAAJAAAAAFuvcotyYXcAAAAAFVfwLBerPie4v1Ep%2F%2F%2F%2F&entityId=R1IZDPP09RA69A&sessionId=257-1905223-9805712">Report abuse</a></span></span></span>
</div>
</div>
</div>
here you can find reviewer name rating and review under each div having attribute data-hook="review".
Name under <span class="a-profile-name">Sana Khanam</span>
Rating <span class="a-icon-alt">4.0 out of 5 stars</span>
Review <div data-hook="review-collapsed" aria-expanded="false" class="a-expander-content a-expander-partial-collapse-content" style="padding-bottom: 19px;">5 th day after...</div>

Angular Material Design - flex wrap when going small screen

I am trying to make the latitude and longitude to go below datakey in a column format when going smaller screen. I Played around with material design xs and and is not working for me. Below i have the code,right now i am hiding the lat and long since they are cutting off when going to like an iPhone-5 screen size
div layout layout-align="space-between center">
<div class="md-inline-edit-input " class="dkey-inline">
<strong id="dkey-label">Data Key:</strong>
<inline-edit identifier="'asset-name'" value="$ctrl.asset" display="$ctrl.asset.dataKey" value-name="'data key'" on-update="$ctrl.updateDataKey"></inline-edit>
</div>
<div ng-if="$ctrl.asset.latitude && $ctrl.asset.longitude" class="ng-animate-disabled" layout layout-align="space-between center">
<div style="padding-right:15px;"><strong class="lat-long-label">{{'LABELS.LAT'|translate}}:</strong><span>{{$ctrl.asset.latitude}}</span></div>
<div><strong class="lat-long-label">{{'LABELS.LONG'|translate}}:</strong><span>{{$ctrl.asset.longitude}}</span></div>
</div>
<div layout layout-xs="column" layout-align='space-between center' layout-align-xs='center start'>
<div class="md-inline-edit-input " class="dkey-inline">
<strong id="dkey-label">Data Key</strong>
<inline-edit identifier="'asset-name'" value="$ctrl.asset" display="$ctrl.asset.dataKey" value-name="'data key'" on-update="$ctrl.updateDataKey"></inline-edit>
</div>
<div>
<div ng-if="$ctrl.asset.latitude && $ctrl.asset.longitude" class="ng-animate-disabled" layout>
<span layout layout-padding>
<strong translate="LABELS.LAT"></strong>
<label>{{$ctrl.asset.latitude | number: 2}}</label>
</span>
<span layout layout-padding>
<strong translate="LABELS.LONG"></strong>
<label>{{$ctrl.asset.longitude | number: 2}}</label>
</span>
</div>
<div ng-if="!$ctrl.asset.latitude || !$ctrl.asset.longitude" class="ng-animate-disabled">
<label>No Location Information Available</label>
</div>
</div>
</div>
had to rewrite the whole section using material breaks.

DomCrawler complex div nesting

I'm having trouble trying to get to some data using the dom crawler.
I want to get the name 'Avocado' and '£1.50' I though I'd be able to do something like
$message = $crawler->filterXPath('h3')->text();
<div class="product">
<div class="productInner">
<div class="productInfoWrapper">
<div class="productInfo">
<h3>
<a href="http://website.com" >
Avocado
<img src="pic.jpg" alt="" />
</a>
</h3>
</div>
</div>
<div class="pricingAndTrolleyOptions">
<div class="pricing">
<p class="pricePerUnit">
£1.50<abbr title="per">/</abbr><abbr title="unit"><span class="pricePerUnitUnit">unit</span></abbr>
</p>
<p class="pricePerMeasure">£1.50<abbr
title="per">/</abbr><abbr
title="each"><span class="pricePerMeasureMeasure">ea</span></abbr>
</p>
</div>
</div>
</div>
To get h3 text:
$message = $crawler->filterXPath('//div[#class="productInfo"]/h3')->text();
To get price (i.e. for class pricePerMeasure):
$price= $crawler->filterXPath('//p[#class="pricePerMeasure"]')->text();

How to decrease the slider speed

I want to decrease the slider speed in Bootstrap, while changing one slide to another slide. And I want to decrease the time of animation while changing slide.
<section id="slide-show" style='display: <%= SiteMap.RootNode.Url!=SiteMap.CurrentNode.Url?"none":"block" %>'>
<div id="slider" class="sl-slider-wrapper">
<!--Slider Items-->
<div class="sl-slider">
<!--Slider Item1-->
<div class="sl-slide item1" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
<div class="sl-slide-inner">
<div class="container">
<img class="pull-right" src="themes/images/bdev.png" alt="" />
<h2>Time-to-fill</h2>
<h3 class="gap">Benefit from our services include short recruitment cycle for a
quicker "Time-to-fill". </h3>
<%-- <a class="btn btn-large btn-transparent" href="#">Learn More</a>--%>
</div>
</div>
</div>
Add the following script in your HTML. 1000 equal to 1 second.
<script>
$('.sl-slider').carousel({
interval: 10000
});
</script>
Refer http://getbootstrap.com/javascript/#carousel for more information.

Resources