Fix HTML markup - Githubissues

genesis23rd commented 7 years ago

majin22 commented 7 years ago

related to #59

majin22 commented 7 years ago

@genesis23rd can you give me the needed html for this task

here is the html code for the first image

<div class="nf-serving">
    <div>
        <div class="nf-arrows">
            <div class="nf-unitQuantityUp nf-arrow-up" rel="nofollow"></div>
            <div class="nf-unitQuantityDown nf-arrow-down" rel="nofollow"></div>
        </div><!-- closing class="nf-arrows" -->
        <input type="text" value="1" class="nf-unitQuantityBox nf-modifier-field" data-role="none">
        <input type="hidden" value="1" id="nf-nixLabelBeforeQuantity">
        <div class="nf-item-name inline">
            Bleu Cheese Dressing
        </div>
    </div>
</div>

and here's the one for the second image

<div class="nf-line">
    <div class="nf-per-container">1 Servings Per Container</div>
    <span class="nf-serving">Serving Size:</span>
    <div class="">
        <div class="nf-arrows">
            <div class="nf-unitQuantityUp nf-arrow-up" rel="nofollow"></div>
            <div class="nf-unitQuantityDown nf-arrow-down" rel="nofollow"></div>
        </div><!-- closing class="nf-arrows" -->
        <input type="text" value="6" class="nf-unitQuantityBox">
        <input type="hidden" value="6" id="nf-nixLabelBeforeQuantity">
    </div><!-- closing class="nf-servingSizeField" -->
    <div class="nf-servingUnit nf-fl nf-unitHasTextbox">
        DONUTS
    </div>
</div>

please take note that serving size should be in the same line see the legacy counterpart /nutrition-label/demo/legacy-version/demo.html#test3

message me if you think we need to discuss this via chat

thanks

majin22 commented 7 years ago

@genesis23rd i just want to bump this request. thanks

genesis23rd commented 7 years ago

@majin22 You can use the HTML code of the first image. The new label width is quite narrow to have the arrows, modifier and item name to be on the same line, it makes more sense to have these elements in a new line.

majin22 commented 7 years ago

left @genesis23rd a message via chat for a request. thanks

genesis23rd commented 7 years ago

@majin22

Replace this markup

<div class="nf-line">
    <span class="nf-serving">Serving Size:</span>
    <div class="">
        <div class="nf-arrows">
            <div class="nf-unitQuantityUp nf-arrow-up" rel="nofollow"></div>
            <div class="nf-unitQuantityDown nf-arrow-down" rel="nofollow"></div>
        </div>
        <!-- closing class="nf-arrows" -->
        <input type="text" value="6" class="nf-unitQuantityBox">
        <input type="hidden" value="6" id="nf-nixLabelBeforeQuantity">
    </div>
    <!-- closing class="nf-servingSizeField" -->
    <div class="nf-servingUnit nf-fl nf-unitHasTextbox">DONUTS</div>
</div>

With this

<div class="nf-line">
    <span class="nf-serving">Serving Size:</span>
    <div class="nf-serving">
        <div>
            <div class="nf-arrows">
                <div class="nf-unitQuantityUp nf-arrow-up" rel="nofollow"></div>
                <div class="nf-unitQuantityDown nf-arrow-down" rel="nofollow"></div>
            </div>
            <!-- closing class="nf-arrows" -->
            <input type="text" value="1" class="nf-unitQuantityBox nf-modifier-field" data-role="none">
            <input type="hidden" value="1" id="nf-nixLabelBeforeQuantity">
            <div class="nf-item-name undefinedinline"> DONUTS </div>
        </div>
    </div>
</div>

majin22 commented 7 years ago

@genesis23rd please pull he latest code and check the demo file /nutrition-label/demo/2018-version/demo.html as we might need to make more html changes to cater to cases like:

/nutrition-label/demo/2018-version/demo-texbox-case1-a.html#test1
/nutrition-label/demo/2018-version/demo-texbox-case1-a.html#test5

thanks

genesis23rd commented 7 years ago

@majin Please use this page for reference: http://dev2.nutritionix.com/html/label/v3/nutrition-label.html Let me know if you have questions.

majin22 commented 7 years ago

@genesis23rd when the item name has space between them, the style is broken http://dev2.nutritionix.com/html/label/v3/nutrition-label.html

I changed Item/Ingedient Name to Item / Ingedient Name

thanks

majin22 commented 7 years ago

@genesis23rd this isn't a high priority task but I just want to put this back to your radar. thanks

genesis23rd commented 7 years ago

@majin22 Done: http://dev2.nutritionix.com/html/label/v3/nutrition-label.html

majin22 commented 7 years ago

@genesis23rd please correct me if I am wrong but you have removed the inline class on the latest version of the label? thanks

majin22 commented 7 years ago

note: verified it with @genesis23rd via chat the the inline class is now removed on the latest version of the label.

majin22 commented 7 years ago

@genesis23rd I believe I have fixed the html codes but I need you to work on the css codes.

I didn't merge the css files from the v3 label to the current one as I am not sure which codes to remove or change or retain. Can you check this and fix all that needs to be fixed

please open the file nutrition-label/demo/demo.html on your local (eg. on my local, the link is http://localhost/mattsilv/nutrition-label/demo/demo.html) and check the 2018 Demo Pages and make sure all of the labels on those different pages are designed properly.

Please let me know if I need to make more html changes (eg. adding classes or ids or adding <div></div> to html elements)

Message me if we need to discuss this task.

Thanks

genesis23rd commented 7 years ago

@majin22 /nutrition-label/demo/2018-version/demo.html Example 3 and 4: item name should be wrap by div.nf-item-name

<div class="nf-item-name">
   <div>DONUTS</div>
</div>

genesis23rd commented 7 years ago

@majin22 /nutrition-label/demo/2018-version/demo-texbox-case1-a.html /nutrition-label/demo/2018-version/demo-texbox-case1-b.html /nutrition-label/demo/2018-version/demo-texbox-computation-1.html The first example should not have a "no-indent" class.

majin22 commented 7 years ago

@genesis23rd can you pull the latest code and let me know if I need to make further changes. Hopefully I have fixed the no-indent issue on call applicable cases. thanks

genesis23rd commented 7 years ago

@majin22 Looks good.

majin22 commented 7 years ago

@genesis23rd can you check the labels on /demo/2018-version/demo.html:

the textbox seems to be a bit close to the elements on top of it
the down arrow seems to be a bit close to the elements below it

for /demo/2018-version/demo-texbox-case1-a.htmll#test5 (similar cases are /demo/2018-version/demo-texbox-case1-b.html#test5 and /demo/2018-version/demo-texbox-computation-1.html#test4)

the space between DONUTS (2.6g) and Item / Ingredient Name seems to be smaller compared the space between Serving Size: 6 and DONUTS (2.6g)

when you open these pages on a desktop web browser /demo/legacy-version/demo-mobile.html and compared it to /demo/2018-version/demo-mobile.html, for some reason, the legacy version spans the whole page but it's not the same on the 2018 version. what can we do to make the 2018 version be like the legacy version

please let me know if you have any questions.

thanks

genesis23rd commented 7 years ago

@majin I made some styles changes, can you try to check again? Thanks

majin22 commented 7 years ago

@genesis23rd everything looks great. thanks.

nutritionix / nutrition-label

Fix HTML markup #65