iEat2/web/js/templates/nutritionLabel.html

<!-- Nutrition Label -->
<div>
  <style type="text/css">
    #nutritionfacts { 
        background-color:white; 
        border:1px solid black; 
        padding:3px;
        padding-right:5px;
        width:244px; 
    }
    #nutritionfacts td { 
        color:black; 
        font-family:'Arial Black','Helvetica Bold',sans-serif; 
        font-size:8pt; 
        padding:0; 
    }
    #nutritionfacts td.header { 
        font-family:'Arial Black','Helvetica Bold',sans-serif; 
        font-size:28px; 
        white-space:nowrap; 
    }        
    #nutritionfacts div.nutrLabel { 
        float:left; 
        font-family:'Arial Black','Helvetica Bold',sans-serif; 
    }
    #nutritionfacts div.serving { 
        font-family:Arial,Helvetica,sans-serif; 
        font-size:8pt; 
        text-align:center; 
    }
    #nutritionfacts div.weight { 
        display:inline; 
        font-family:Arial,Helvetica,sans-serif; 
        padding-left:1px; 
    }
    #nutritionfacts div.dv { 
        display:inline; 
        float:right; 
        font-family:'Arial Black','Helvetica Bold',sans-serif; 
    }
    #nutritionfacts table.vitamins td {  
        font-family:Arial,Helvetica,sans-serif; 
        white-space:nowrap; 
        width:33%; 
    }
    #nutritionfacts div.line { 
        border-top:1px solid black; 
    }
    #nutritionfacts div.nutrLabellight { 
        float:left; 
        font-family:Arial,Helvetica,sans-serif; 
    }
    #nutritionfacts .highlighted {
        border:1px dotted grey;
        padding:2px;
    }
  </style>
  <div id="nutritionfacts">
    <table style="width: 100%; border-spacing: 0;" cellpadding="0">
      <tbody>
        <tr>
          <td style="text-align: center;" class="header">Nutrition Facts</td>
        </tr>
        <tr>
          <td>
            <div class="serving">
              Per <span class="highlighted">100.0g</span> Serving Size
            </div>
          </td>
        </tr>
        <tr style="height: 7px">
          <td style="background-color: #000000;"></td>
        </tr>
        <tr>
          <td style="font-size: 7pt">
            <div class="line">Amount Per Serving</div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="line">
              <div class="nutrLabel">
                Calories
                <div class="weight">{{food.calories_p_100}}</div>
              </div>
              <div style="padding-top: 1px; float: right;" class="nutrLabellight">
                Calories from Fat
                <div class="weight">
                  {{food.nutrients[204]*calories_in_fat | number : 0}}
                </div>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="line">
              <div class="dvnutrLabel">% Daily Value<sup>*</sup></div>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="line">
              <div class="nutrLabel">Total Fat
                <div class="weight">{{food.nutrients[204]}}g</div>
              </div>
              <div class="dv">
                {{food.nutrients[204]/daily[204] * 100 | number : 0}}%
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="indent">
            <div class="line">
              <div class="nutrLabellight">
                Saturated Fat 
                <div class="weight">{{food.nutrients[606]}}g</div>
              </div>
              <div class="dv">
                {{food.nutrients[606]/daily[606] * 100 | number : 0}}%
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="indent">
            <div class="line">
              <div class="nutrLabellight">
                <i>Trans</i> Fat
                <div class="weight">{{food.nutrients[605]}}g</div>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="line">
              <div class="nutrLabel">
                Cholesterol
                <div class="weight">{{food.nutrients[601]}}mg</div>
              </div>
              <div class="dv">
                {{food.nutrients[601]/daily[601] * 100 | number : 0}}%
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="line">
              <div class="nutrLabel">
                Sodium <div class="weight">{{food.nutrients[307]}}mg</div>
              </div>
              <div class="dv">
                {{food.nutrients[307]/daily[307] * 100 | number : 0}}%
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="line">
              <div class="nutrLabel">
                Total Carbohydrates
                <div class="weight">{{food.nutrients[205]}}g</div>
              </div>
              <div class="dv">
                {{food.nutrients[205]/daily[205] * 100 | number : 0}}%
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="indent">
            <div class="line">
              <div class="nutrLabellight">
                Dietary Fiber
                <div class="weight">{{food.nutrients[291]}}g</div>
              </div>
              <div class="dv">
                {{food.nutrients[291]/daily[291] * 100 | number : 0}}%
              </div>
          </div></td>
        </tr>
        <tr>
          <td class="indent">
            <div class="line">
              <div class="nutrLabellight">
                Sugars
                <div class="weight">{{food.nutrients[269]}}g</div>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="line">
              <div class="nutrLabel">Protein
                <div class="weight">{{food.nutrients[203]}}g</div>
              </div>
          </div></td>
        </tr>
        <tr style="height: 7px">
          <td style="background-color: #000000;"></td>
        </tr>
        <tr>
          <td>
            <table style="border-style: none; border-spacing: 0;" cellpadding="0"
                   class="vitamins">
              <tbody>
                <tr>
                  <td>
                    Vitamin A &nbsp;&nbsp;
                    {{food.nutrients[320]/daily[320] * 100 | number : 0}}%
                  </td>
                  <td style="text-align: center;">•</td>
                  <td style="text-align: right;">
                    Calcium &nbsp;&nbsp;
                    {{food.nutrients[301]/daily[301] * 100 | number : 0}}%
                  </td>
                </tr>
                <tr>
                  <td>
                    Vitamin B &nbsp;&nbsp;
                    {{food.nutrients[415]/daily[415] * 100 | number : 0}}%
                  </td>
                  <td style="text-align: center;">•</td>
                  <td style="text-align: right;">
                    Iron &nbsp;&nbsp;
                    {{food.nutrients[303]/daily[303] * 100 | number : 0}}%
                  </td>
                </tr>
                <tr>
                  <td>
                    Vitamin C &nbsp;&nbsp;
                    {{food.nutrients[401]/daily[401] * 100 | number : 0}}%
                  </td>
                  <td style="text-align: center;">•</td>
                  <td style="text-align: right;">
                    Potassium &nbsp;&nbsp;
                    {{food.nutrients[306]/daily[306] * 100 | number : 0}}%
                  </td>
                </tr>
                <tr>
                  <td>
                    Vitamin D &nbsp;&nbsp;
                    {{food.nutrients[324]/daily[324] * 100 | number : 0}}%
                  </td>
                  <td style="text-align: center;">•</td>
                  <td style="text-align: right;">
                    Folate &nbsp;&nbsp;
                    {{food.nutrients[432]/daily[432] * 100 | number : 0}}%
                  </td>
                </tr>                        
            </tbody></table>
          </td>
        </tr>
        <tr>
          <td>
            <div class="line">
              <div class="nutrLabellight">
                * Based on a regular 2000 calorie diet<br />
                <br />
                <i>Nutritional details are an estimate and should only be used as a
                  guide for approximation.</i>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>