Phase 1: Convert static inline styles to CSS classes (40% of remaining styles)
Added CSS classes for static styling patterns: - .no-bottom-margin, .no-top-margin - Standard margin controls - .bold-text - Font weight styling - .inline-label - Display inline for labels (reusing existing class) - .hidden-form - Display none for forms - .subtitle-text - Product/content subtitle styling - .stripe-* classes - Stripe component styling - .comment-* classes - Comment system styling - .coupon-* classes - Coupon display styling - .original-comment-box - Comment editing box styling - .table-* classes - Table layout controls - .sold-out-button - Disabled button styling Updated 16 template files to use CSS classes instead of inline styles: - snippets/search.j2, snippets/stripe.j2, snippets/comments.j2 - product.j2, content.j2, product_edit.j2 - user_settings.j2, shop_location_form.j2 - coupons.j2, coupon.j2, update-card.j2 - base.j2, shop_products.j2 - comments/reply_comment.j2, comments/edit_comment.j2 Converted approximately 40% of remaining inline styles targeting: - Static margins and spacing - Font weights and sizing - Display properties - Form visibility - Button states - Table layouts Remaining inline styles are dynamic/functional and require Phase 2 implementation.
This commit is contained in:
parent
10e0e83adf
commit
252d2d056d
16 changed files with 115 additions and 33 deletions
|
|
@ -1318,3 +1318,86 @@ div.message-ribbon {
|
|||
.cart-public-link {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
/* Phase 1: Static inline style replacements */
|
||||
.no-bottom-margin {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.no-top-margin {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.bold-text {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.stripe-card-logo {
|
||||
width: 92px;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.stripe-negative-margin {
|
||||
margin-top: -12px;
|
||||
}
|
||||
|
||||
.stripe-initial-width {
|
||||
width: initial;
|
||||
}
|
||||
|
||||
.stripe-save-button {
|
||||
margin-bottom: 0px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.comment-pending {
|
||||
color: orange;
|
||||
}
|
||||
|
||||
.hidden-form {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.coupon-disabled {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.vertical-coupon-text {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.remove-button-small {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.subtitle-text {
|
||||
font-size: 0.6em;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.original-comment-box {
|
||||
background-color: #f5f5f5;
|
||||
padding: 15px;
|
||||
border-left: 4px solid #007cba;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.start-button-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.table-full-width {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.table-fixed-layout {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.sold-out-button {
|
||||
background-color: red !important;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -94,7 +94,7 @@
|
|||
|
||||
<section class="windows-95-start-button">
|
||||
{% if request.is_saas_domain or request.user.can_edit_shop(request.shop) %}
|
||||
<a href="/actions/view" class="windows-95-start-button mps-button mps-button-blue"><span style="font-size: 20px;">☰   </span> {{ request.shop.name }}</a>
|
||||
<a href="/actions/view" class="windows-95-start-button mps-button mps-button-blue"><span class="start-button-icon">☰   </span> {{ request.shop.name }}</a>
|
||||
{% endif %}
|
||||
</section>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<div class="container">
|
||||
<h2>Edit Comment</h2>
|
||||
|
||||
<div class="original-comment" style="background-color: #f5f5f5; padding: 15px; border-left: 4px solid #007cba; margin-bottom: 20px;">
|
||||
<div class="original-comment original-comment-box">
|
||||
<div class="comment-header">
|
||||
<strong>{{ comment.user.name if comment.user else "Anonymous" }}</strong>
|
||||
<span class="comment-date">{{ comment.ago_string }}</span>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<div class="container">
|
||||
<h2>Reply to Comment</h2>
|
||||
|
||||
<div class="original-comment" style="background-color: #f5f5f5; padding: 15px; border-left: 4px solid #007cba; margin-bottom: 20px;">
|
||||
<div class="original-comment original-comment-box">
|
||||
<div class="comment-header">
|
||||
<strong>{{ parent_comment.user.name if parent_comment.user else "Anonymous" }}</strong>
|
||||
<span class="comment-date">{{ parent_comment.ago_string }}</span>
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@
|
|||
<br/>
|
||||
{% endif %}
|
||||
|
||||
<h1>{{ product.title }} <span style="font-size: 0.6em; font-weight: normal;">uploaded to <a href="{{ product.shop.absolute_about_url(request) }}" rel="nofollow" class="shop-theme-link-color">{{ product.shop.name }}</a></span></h1>
|
||||
<h1>{{ product.title }} <span class="subtitle-text">uploaded to <a href="{{ product.shop.absolute_about_url(request) }}" rel="nofollow" class="shop-theme-link-color">{{ product.shop.name }}</a></span></h1>
|
||||
</div>
|
||||
|
||||
<section class="product-right">
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@
|
|||
<section class="coupon two-column">
|
||||
|
||||
|
||||
<h3 class="vertical-text shown-on-desktop" style="margin: 0px;"><br><br>Coupon:<br><br>{{ request.shop.name }}</h3>
|
||||
<b class="not-shown-on-desktop" style="margin: 0px;">Coupon: {{ request.shop.name }}</b>
|
||||
<h3 class="vertical-text shown-on-desktop vertical-coupon-text"><br><br>Coupon:<br><br>{{ request.shop.name }}</h3>
|
||||
<b class="not-shown-on-desktop vertical-coupon-text">Coupon: {{ request.shop.name }}</b>
|
||||
|
||||
<div>
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ Coupons in the shop named "{{ request.shop.name }}".
|
|||
{% for coupon in coupons %}
|
||||
|
||||
<a href="coupon/{{ coupon.id }}/{{ coupon.code }}"
|
||||
</span {% if coupon.is_not_valid %}style="opacity: .7;"{% endif %}>
|
||||
</span{% if coupon.is_not_valid %} class="coupon-disabled"{% endif %}>
|
||||
<b>
|
||||
{{ coupon.code }}
|
||||
—
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
<section class="two-column">
|
||||
|
||||
<div class="product-images">
|
||||
<h1>{{ product.title }} <span style="font-size: 0.6em; font-weight: normal;">sold by <a href="{{ product.shop.absolute_about_url(request) }}" rel="nofollow" class="shop-theme-link-color">{{ product.shop.name }}</a></span></h1>
|
||||
<h1>{{ product.title }} <span class="subtitle-text">sold by <a href="{{ product.shop.absolute_about_url(request) }}" rel="nofollow" class="shop-theme-link-color">{{ product.shop.name }}</a></span></h1>
|
||||
|
||||
{% if "thumbnail1" in product.extensions %}
|
||||
<img src="{{ request.app["bucket.secure_uploads.get_endpoint"] }}/{{ product.s3_path }}/thumbnail1?ts={{ product.updated_timestamp }}" class="product-main" />
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
<button type="submit" class="product-download-button mps-button">Add To Cart</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<button class="product-download-button mps-button" style="background-color: red; cursor: not-allowed;" disabled>Sold Out</button>
|
||||
<button class="product-download-button mps-button sold-out-button" disabled>Sold Out</button>
|
||||
{% if request.shop.shop_locations.all()|length > 1 %}
|
||||
<p>This item is sold out at this location.
|
||||
<br> You can <a href="{{ request.route_url('shop_locations', shop_id=request.shop.id, _query={'next': request.url}) }}">switch shop locations</a> to check availability.</p>
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ permanent link: <a href="{{ product.absolute_url(request) }}">{{ product.absolut
|
|||
<li>
|
||||
<form method="post" action="/p/{{ product.id }}/bundle/remove/{{ p.id }}" onsubmit="submit.disabled = true; return true;">
|
||||
{{p.title}}
|
||||
<input type="submit" name="submit" class="mps-submit" value="remove" style="width: 80px;"/>
|
||||
<input type="submit" name="submit" class="mps-submit remove-button-small" value="remove"/>
|
||||
</form>
|
||||
</li>
|
||||
<br>
|
||||
|
|
@ -82,7 +82,7 @@ permanent link: <a href="{{ product.absolute_url(request) }}">{{ product.absolut
|
|||
<br>
|
||||
<br>
|
||||
|
||||
{% if "product" in product.originals %}<p style="font-weight: bold">Current File: {{ product.originals["product"] }}</p>{% endif %}
|
||||
{% if "product" in product.originals %}<p class="bold-text">Current File: {{ product.originals["product"] }}</p>{% endif %}
|
||||
|
||||
{% set signed_post = signed_posts["product"] %}
|
||||
<form method="post" action="{{ signed_post["url"] }}" enctype="multipart/form-data" onsubmit="submit.disabled = true; return true;">
|
||||
|
|
@ -105,7 +105,7 @@ permanent link: <a href="{{ product.absolute_url(request) }}">{{ product.absolut
|
|||
<br />
|
||||
<br />
|
||||
|
||||
{% if "preview" in product.originals %}<p style="font-weight: bold">Current File: {{ product.originals["preview"] }}</p>{% endif %}
|
||||
{% if "preview" in product.originals %}<p class="bold-text">Current File: {{ product.originals["preview"] }}</p>{% endif %}
|
||||
|
||||
{% set signed_post = signed_posts["preview"] %}
|
||||
<form method="post" action="{{ signed_post["url"] }}" enctype="multipart/form-data" onsubmit="submit.disabled = true; return true;">
|
||||
|
|
|
|||
|
|
@ -128,7 +128,7 @@
|
|||
id = "local_pickup_input"
|
||||
class = "mps-local-pickup"
|
||||
{% if local_pickup %}checked{% endif %} />
|
||||
<label for="local_pickup_input" style="display: inline;">Local Pickup</label>
|
||||
<label for="local_pickup_input" class="inline-label">Local Pickup</label>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
|
@ -139,7 +139,7 @@
|
|||
id = "local_delivery_input"
|
||||
class = "mps-local-delivery"
|
||||
{% if local_delivery %}checked{% endif %} />
|
||||
<label for="local_delivery_input" style="display: inline;">Local Delivery</label>
|
||||
<label for="local_delivery_input" class="inline-label">Local Delivery</label>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
|
@ -162,7 +162,7 @@
|
|||
id = "local_shipping_input"
|
||||
class = "mps-local-shipping"
|
||||
{% if local_shipping %}checked{% endif %} />
|
||||
<label for="local_shipping_input" style="display: inline;">Shipping</label>
|
||||
<label for="local_shipping_input" class="inline-label">Shipping</label>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
|
@ -185,7 +185,7 @@
|
|||
id = "international_shipping_input"
|
||||
class = "mps-international-shipping"
|
||||
{% if international_shipping %}checked{% endif %} />
|
||||
<label for="international_shipping_input" style="display: inline;">International Shipping</label>
|
||||
<label for="international_shipping_input" class="inline-label">International Shipping</label>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
|
|
|||
|
|
@ -8,10 +8,10 @@ tr { text-align: left;}
|
|||
|
||||
{% if products %}
|
||||
|
||||
<table style="width=100%; max-width: 100%; table-layout : fixed;">
|
||||
<table class="table-full-width table-fixed-layout">
|
||||
<thead>
|
||||
<tr> <th> Sellable <th> Price <th> Visibility <th> Bundle <th> Physical <th> Ready <th> Title <th> Size
|
||||
<tbody style="width=100%; max-width: 100%;">
|
||||
<tbody class="table-full-width">
|
||||
|
||||
{% for product in products %}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<span class="comment-title">{{ comment.title }}</span>
|
||||
{% endif %}
|
||||
{% if not comment.approved %}
|
||||
<span class="comment-status" style="color: orange;">[Pending Approval]</span>
|
||||
<span class="comment-status comment-pending">[Pending Approval]</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
|
|
@ -19,16 +19,16 @@
|
|||
<div class="comment-actions">
|
||||
{% if request.user.authenticated and (request.user.id == comment.user_id or comment.can_user_moderate(request.user, shop)) %}
|
||||
<input type="submit" value="Delete" class="delete-link" onclick="return confirm('Are you sure you want to delete this comment?')" form="delete-{{ comment.id }}" />
|
||||
<form id="delete-{{ comment.id }}" method="post" action="/comments/{{ comment.id }}/delete" style="display: none;"></form>
|
||||
<form id="delete-{{ comment.id }}" method="post" action="/comments/{{ comment.id }}/delete" class="hidden-form"></form>
|
||||
{% endif %}
|
||||
|
||||
{% if request.user.authenticated and comment.can_user_moderate(request.user, shop) %}
|
||||
{% if comment.approved %}
|
||||
<input type="submit" value="Unapprove" class="moderate-link" form="unapprove-{{ comment.id }}" />
|
||||
<form id="unapprove-{{ comment.id }}" method="post" action="/comments/{{ comment.id }}/unapprove" style="display: none;"></form>
|
||||
<form id="unapprove-{{ comment.id }}" method="post" action="/comments/{{ comment.id }}/unapprove" class="hidden-form"></form>
|
||||
{% else %}
|
||||
<input type="submit" value="Approve" class="moderate-link" form="approve-{{ comment.id }}" />
|
||||
<form id="approve-{{ comment.id }}" method="post" action="/comments/{{ comment.id }}/approve" style="display: none;"></form>
|
||||
<form id="approve-{{ comment.id }}" method="post" action="/comments/{{ comment.id }}/approve" class="hidden-form"></form>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{% if request.shop and not search_disabled %}
|
||||
<form action="/search" id="search" name="search" style="margin-bottom: 0px;">
|
||||
<form action="/search" id="search" name="search" class="no-bottom-margin">
|
||||
|
||||
{% include 'csrf.j2' %}
|
||||
{%- if request.shop -%}
|
||||
|
|
@ -9,10 +9,9 @@
|
|||
<input type="text"
|
||||
name="keywords"
|
||||
id="keywords"
|
||||
class="mps-keywords"
|
||||
class="mps-keywords no-bottom-margin"
|
||||
placeholder="Keyword search on {{ request.shop.name }}"
|
||||
{% if keywords %}value="{{ keywords }}"{% endif %}
|
||||
style="margin-bottom: 0px;"
|
||||
required/>
|
||||
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<section class="payment-card">
|
||||
|
||||
<div class="card-details">
|
||||
<img src="{{ brand_logos[card.card.brand] }}" style="width: 92px; float: left; margin-right: 10px; margin-top: 10px;">
|
||||
<img src="{{ brand_logos[card.card.brand] }}" class="stripe-card-logo">
|
||||
<br/>
|
||||
<b>{{ card.card.brand }}</b>
|
||||
<br/>
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
</div>
|
||||
|
||||
<br/>
|
||||
<div style="margin-top: -12px;">
|
||||
<div class="stripe-negative-margin">
|
||||
{% if actions %}
|
||||
<center>
|
||||
<a href="/billing/confirm-update-card/delete-card/{{ card.id }}"><button type="button">delete</button></a>
|
||||
|
|
@ -54,13 +54,13 @@
|
|||
|
||||
<!--
|
||||
-->
|
||||
<a href="https://stripe.com/docs/security/stripe" target="_blank"><img style="width: initial;" src="https://stripe.com/img/about/logos/badge/outline-dark.svg"></a>
|
||||
<a href="https://stripe.com/docs/security/stripe" target="_blank"><img class="stripe-initial-width" src="https://stripe.com/img/about/logos/badge/outline-dark.svg"></a>
|
||||
|
||||
<button class="green-button button-max-width" style="margin-bottom: 0px; margin-top: 8px;">🔒 Save Card</button>
|
||||
<button class="green-button button-max-width stripe-save-button">🔒 Save Card</button>
|
||||
|
||||
|
||||
<!-- Used to display Element errors. -->
|
||||
<div id="error-message" role="alert" style="font-weight: bold;"></div>
|
||||
<div id="error-message" role="alert" class="bold-text"></div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<input type="hidden" name="card_id" value="{{ card_id }}">
|
||||
<center>
|
||||
<a href="/billing"><button type="button">Cancel</button></a>
|
||||
<button type="submit" style="font-weight: bold;">Yes, {{ action_human }}</button>
|
||||
<button type="submit" class="bold-text">Yes, {{ action_human }}</button>
|
||||
</center>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -41,10 +41,10 @@
|
|||
<legend>User Theme</legend>
|
||||
|
||||
<input type="radio" name="user_theme" id="light_mode" value="1" {% if user_theme == 1 %}checked{% endif %} />
|
||||
<label for="user_theme" style="display: inline">Light mode</label>
|
||||
<label for="user_theme" class="inline-label">Light mode</label>
|
||||
|
||||
<input type="radio" name="user_theme" id="visibility_unlisted" value="0" {% if user_theme == 0 %}checked{% endif %} />
|
||||
<label for="user_theme" style="display: inline;">Dark mode</label>
|
||||
<label for="user_theme" class="inline-label">Dark mode</label>
|
||||
|
||||
</fieldset>
|
||||
-->
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue