Resolve longstanding style issues.

Author: toddbirchard

flask_blueprint_tutorial/__init__.py

@@ -14,13 +14,13 @@ def create_app():
         # Import parts of our application
         from .assets import compile_static_assets
         from .home import home
-        from .products import products
+        from .product import product
         from .profile import profile
 
         # Register Blueprints
         app.register_blueprint(profile.profile_blueprint)
         app.register_blueprint(home.home_blueprint)
-        app.register_blueprint(products.product_bp)
+        app.register_blueprint(product.product_blueprint)
 
         # Compile static assets
         compile_static_assets(assets)

flask_blueprint_tutorial/assets.py

@@ -32,9 +32,9 @@ def compile_static_assets(assets: Bundle) -> Bundle:
         extra={"rel": "stylesheet/less"},
     )
     product_style_bundle = Bundle(
-        "products_blueprint/less/products.less",
+        "product_blueprint/less/product.less",
         filters="less,cssmin",
-        output="dist/css/products.css",
+        output="dist/css/product.css",
         extra={"rel": "stylesheet/less"},
     )
     assets.register("common_style_bundle", common_style_bundle)

flask_blueprint_tutorial/products/products.py renamed to flask_blueprint_tutorial/product/product.py

@@ -6,10 +6,10 @@
 from flask_blueprint_tutorial.api import fetch_products
 
 # Blueprint Configuration
-product_bp = Blueprint("products_blueprint", __name__, template_folder="templates", static_folder="static")
+product_blueprint = Blueprint("product_blueprint", __name__, template_folder="templates", static_folder="static")
 
 
-@product_bp.route("/products/<int:product_id>/", methods=["GET"])
+@product_blueprint.route("/products/<int:product_id>/", methods=["GET"])
 def product_page(product_id: int) -> str:
     """
     Product detail page for a given product ID.
@@ -20,8 +20,8 @@ def product_page(product_id: int) -> str:
     """
     product = fetch_products(app)[product_id]
     return render_template(
-        "products.jinja2",
+        "product.jinja2",
         title=product["name"],
         product=product,
-        template="profile-template",
+        template="product-template",
     )

flask_blueprint_tutorial/products/static/less/products.less renamed to flask_blueprint_tutorial/product/static/less/product.less

@@ -1,6 +1,6 @@
 @import 'vars.less';
 
-.profile-template {
+.product-template {
   .product-name {
     font-size: 1.9em;
     margin-bottom: 30px !important;
@@ -9,13 +9,20 @@
 
   .product-image {
     height: 250px;
+    max-width: 30vw;
     margin-right: 40px;
     border-radius: 3px;
   }
 
-  .product-flex {
-    display: flex;
-    justify-content: space-between;
+  .product-details {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+
+    .product-info {
+      display: flex;
+      justify-content: space-between;
+      flex-direction: column;
+    }
   }
 
   .meta {
@@ -41,8 +48,10 @@
     font-weight: 400;
     border: 1px solid @theme-color;
     transition: @transition;
-    padding: 8px 14px;
+    padding: 10px;
     font-size: 1em;
+    font-weight: bold;
+    max-width: 283px;
 
     &:hover {
       cursor: pointer;

flask_blueprint_tutorial/products/static/less/vars.less renamed to flask_blueprint_tutorial/product/static/less/vars.less

@@ -1,7 +1,7 @@
 {% extends "layout.jinja2" %}
 
 {% block pagestyles %}
-  {% assets "product_less_bundle" %}
+  {% assets "product_style_bundle" %}
     <link href="{{ ASSET_URL }}" rel="stylesheet" type="text/css">
   {% endassets %}
 {% endblock %}
@@ -11,9 +11,9 @@
 
   <div class="container">
     <h1 class="product-name">{{ product.name }}</h1>
-    <div class="product-flex">
-      <img class="product-image" src="{{ product.image }}" alt="profile">
-      <div class="product-details">
+    <div class="product-details">
+      <img class="product-image" src="{{ product.image }}" alt="{{ product.name }}">
+      <div class="product-info">
         <div class="product-price meta"><span class="meta-name">Price:</span> <span>${{ product.salePrice }}</span></div>
         <div class="product-review-average meta"><span class="meta-name">Rating:</span> <span>{{ product.customerReviewAverage }}/5</span></div>
         <div class="product-review-count meta"><span class="meta-name"># Reviews:</span> <span>{{ product.customerReviewCount }}</span></div>

flask_blueprint_tutorial/products/templates/products.jinja2 renamed to flask_blueprint_tutorial/product/templates/product.jinja2

@@ -1,7 +1,7 @@
 {% extends "layout.jinja2" %}
 
 {% block pagestyles %}
-  {% assets "profile_less_bundle" %}
+  {% assets "profile_style_bundle" %}
     <link href="{{ ASSET_URL }}" rel="stylesheet" type="text/css">
   {% endassets %}
 {% endblock %}

flask_blueprint_tutorial/profile/templates/profile.jinja2

@@ -2,18 +2,17 @@
 
 nav {
   background: #fff;
-  padding: 30px;
-  width: auto;
+  padding: 20px 0;
   margin-bottom: 40px;
   box-shadow: 0 0 5px #bec6cf;
 
   .nav-wrapper {
-    max-width: 1014px !important;
+    width: 985px !important;
+    max-width: 88% !important;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    width: auto;
-    margin: 0 auto;
+    margin: 0 !important;
 
     .left-nav {
       display: flex;

flask_blueprint_tutorial/static/dist/css/product.css

@@ -25,7 +25,7 @@ html {
     }
 
     h1 {
-      line-height: 1;
+      line-height: 1.5;
       margin: 0 0 5px;
     }