UI changes for better dsiplay on small screen size (#43)

* Update nutrition_labels_creator.py

table adjustments for mobile screen

* Update header.html

remove overlap of Previous and Next page arrows on mobile screen

* Update extra.css

remove extra padding in table column width.

* Update colors.html

changed few colours which were too dark for dark mode.

Author: pubmania

docs/assets/stylesheets/extra.css

@@ -267,4 +267,8 @@
 .md-typeset table:not([class]) th {
     background-color: var(--md-table-header-bg-color);
     color: var(--md-table-header-font-color);
-}
+    font-weight: 700;
+    padding: .9375em 1.25em;
+    vertical-align: top;
+    min-width: 0;
+}}

overrides/partials/colors.html

@@ -5,10 +5,10 @@
     "#ff006e",
     "#fb5607",
     "#ffbe0b",
-    "#9d0208",
+    "#029d14",
     "#90be6d",
-    "#9a031e",
-    "#390099",
+    "#f30731",
+    "#448aff",
     "#8ecae6",
     "#ffc971",
     "#392f5a"

overrides/partials/header.html

@@ -26,39 +26,39 @@
             {% endif %}
           </span>
         </div>
-        {% if page.previous_page or page.next_page %}
-            <style>
-                .md-header__nav {
-                    float: right;
-                }
-                .md-header__nav__inner:not([hidden]) {
-                    display: flex;
-                }
-            </style>
-            <div class="md-header__nav">
-                {% set hidden = "hidden" if "footer" in page.meta.hide %}
-                <nav class="md-header__nav__inner"{{ hidden }}>
-                    {% if page.previous_page %}
-                        {% set direction = lang.t("footer.previous") %}
-                        <a href="{{ page.previous_page.url | url }}" aria-label="{{ direction }}: {{ page.previous_page.title | e }}" rel="prev">
-                            <div class="md-footer__button md-icon">
-                                {% include ".icons/material/arrow-left.svg" %}
-                            </div>
-                        </a>
-                    {% endif %}
-                    {% if page.next_page %}
-                        {% set direction = lang.t("footer.next") %}
-                        <a href="{{ page.next_page.url | url }}" aria-label="{{ direction }}: {{ page.next_page.title | e }}" rel="next">
-                            <div class="md-footer__button md-icon">
-                                {% include ".icons/material/arrow-right.svg" %}
-                            </div>
-                        </a>
-                    {% endif %}
-                </nav>
-            </div>
-        {% endif %}
     </div>
     </div>
+    {% if page.previous_page or page.next_page %}
+    <style>
+        .md-header__nav {
+            float: right;
+        }
+        .md-header__nav__inner:not([hidden]) {
+            display: flex;
+        }
+    </style>
+    <div class="md-header__nav">
+      {% set hidden = "hidden" if "footer" in page.meta.hide %}
+      <nav class="md-header__nav__inner"{{ hidden }}>
+        {% if page.previous_page %}
+        {% set direction = lang.t("footer.previous") %}
+        <a href="{{ page.previous_page.url | url }}" aria-label="{{ direction }}: {{ page.previous_page.title | e }}" rel="prev">
+        <div class="md-footer__button md-icon">
+          {% include ".icons/material/arrow-left.svg" %}
+        </div>
+        </a>
+        {% endif %}
+        {% if page.next_page %}
+        {% set direction = lang.t("footer.next") %}
+        <a href="{{ page.next_page.url | url }}" aria-label="{{ direction }}: {{ page.next_page.title | e }}" rel="next">
+        <div class="md-footer__button md-icon">
+          {% include ".icons/material/arrow-right.svg" %}
+        </div>
+        </a>
+        {% endif %}
+      </nav>
+    </div>
+    {% endif %}
     {% if not config.theme.palette is mapping %}
       <form class="md-header__option" data-md-component="palette">
         {% for option in config.theme.palette %}

parser/nutrition_labels_creator.py

@@ -177,5 +177,5 @@ def fn_total_df_weight(input_string) -> tuple[dict, str, int]:
     }, inplace=True)
     #net_carbs_table_found_ingredients = found_entries[['Ingredient', 'Quantity', 'Unit', 'Qty in gms', 'Source', 'Net Carbs (gms)']].round(2).to_markdown(index=False)
     #nutrient_labels = f"## Nutrition Label\n\n{get_label_string(total_weight_df,missing_ingredients_string,serving_size)}"
-    net_carbs_table_found_ingredients = found_entries[['Ingredient', 'Qty in recipe', 'Qty in gms', 'Net Carbs (gms)', 'Source']].round(2).to_markdown(index=False)
+    net_carbs_table_found_ingredients = found_entries[['Ingredient', 'Qty in recipe', 'Net Carbs (gms)', 'Qty in gms', 'Source']].round(2).to_markdown(index=False)
     return total_weight_df.to_dict(), missing_ingredients_string, serving_size, net_carbs_table_found_ingredients