food-widget.html

<div class="widget food">
    <div class="title">Food</div>
    <div class="content clearfix">
        <div class="info" ng-hide="data.calories.consumed === 0">
            <div class="wd-row clearfix">
                <div class="wd-label left col-xs-6">
                    <div class="desc">Required</div>
                    <div class="value">{{data.calories.required}}</div>
                </div>
                <div class="wd-label right col-xs-6">
                    <div class="desc">Consumed</div>
                    <div class="value">{{data.calories.consumed}}</div>
                </div>
            </div>
            <div class="wd-centered col-xs-12">
                <div class="wd-label">
                    <div class="value">{{data.calories.message}}</div>
                </div>
            </div>
        </div>
        <div class="under-construction text-center" ng-show="data.calories.consumed === 0">
            <div class="wait">
                <i class="fa fa-hourglass-start" aria-hidden="true"></i>
            </div>
            <p class="message text-uppercase">No food info available</p>
        </div>
    </div>
</div>