Fix mobile layout ordering for product and content pages
- **Mobile Layout Fix**: Restructured product/content templates to use direct grid children - **Grid Areas**: Added proper grid-template-areas for desktop layout - **Mobile Ordering**: Purchase/download buttons now appear after images on mobile - **Template Structure**: Split sections into product-images, product-right, product-description, product-comments - **CSS Grid**: Unified layout system using order properties for mobile and grid areas for desktop - **UX Improvement**: Logical mobile flow - images, purchase, description, comments
This commit is contained in:
parent
6745824fc3
commit
c218ec7073
3 changed files with 108 additions and 84 deletions
|
|
@ -735,16 +735,24 @@ textarea.markup-editor-textarea {
|
|||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* On mobile, show price section before description */
|
||||
section.product-left {
|
||||
order: 2;
|
||||
/* On mobile, reorder to put purchase section after images */
|
||||
.product-images {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
section.product-right {
|
||||
order: 1;
|
||||
order: 2;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.product-description {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.product-comments {
|
||||
order: 4;
|
||||
}
|
||||
|
||||
/* Ensure buttons get full width on mobile */
|
||||
section.product-right .mps-button {
|
||||
width: 100%;
|
||||
|
|
@ -787,6 +795,10 @@ textarea.markup-editor-textarea {
|
|||
section.two-column {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
grid-template-areas:
|
||||
"images purchase"
|
||||
"description purchase"
|
||||
"comments purchase";
|
||||
gap: 40px;
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
|
|
@ -795,6 +807,22 @@ textarea.markup-editor-textarea {
|
|||
padding-right: 40px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.product-images {
|
||||
grid-area: images;
|
||||
}
|
||||
|
||||
section.product-right {
|
||||
grid-area: purchase;
|
||||
}
|
||||
|
||||
.product-description {
|
||||
grid-area: description;
|
||||
}
|
||||
|
||||
.product-comments {
|
||||
grid-area: comments;
|
||||
}
|
||||
|
||||
/* if we have room, break markup-editor into 2 columns */
|
||||
div.markup-editor {
|
||||
|
|
|
|||
|
|
@ -32,14 +32,12 @@
|
|||
|
||||
<section class="two-column">
|
||||
|
||||
<section class="product-left">
|
||||
|
||||
<div class="product-images">
|
||||
{% if "thumbnail1" in product.extensions %}
|
||||
{% if product.extensions["product"] in ["mp3", "mp4", "wav", "flac", "aac", "ogg", "wma", "m4a", "avi", "mov", "wmv", "flv", "mkv", "webm", "m4v"] %}
|
||||
<div>
|
||||
<a target="_blank" href="{{ request.app["bucket.secure_uploads.get_endpoint"] }}/{{ product.s3_path }}/product?ts={{ product.updated_timestamp }}">
|
||||
<br>
|
||||
</div>
|
||||
<img src="{{ request.app["bucket.secure_uploads.get_endpoint"] }}/{{ product.s3_path }}/thumbnail1?ts={{ product.updated_timestamp }}" class="product-main" />
|
||||
<div class="play-button">click ▶ to play!</div>
|
||||
</a>
|
||||
|
|
@ -50,49 +48,45 @@
|
|||
<br/>
|
||||
{% endif %}
|
||||
|
||||
<h1>{{ product.title }}</h1>
|
||||
<h3>
|
||||
uploaded to <a href="{{ product.shop.absolute_about_url(request) }}" rel="nofollow" class="shop-theme-link-color">{{ product.shop.name }}</a>
|
||||
</h3>
|
||||
|
||||
<br/>
|
||||
|
||||
<b>Description</b>
|
||||
<section>{{ product.description_html | safe }}</section>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
{% if product.has_product_file %}
|
||||
<b>File Type</b>
|
||||
<br/>
|
||||
{{ product.get_content_type("product") }} {{ product_size }}
|
||||
<br/>
|
||||
{% endif %}
|
||||
|
||||
</section>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<section class="product-right">
|
||||
|
||||
{% if product.has_product_file %}
|
||||
<div class="well">
|
||||
{% if signed_get_object_url is not none %}
|
||||
<a href="{{ signed_get_object_url }}" class="product-download-button mps-button" target="_blank" download>⭳ Download</a>
|
||||
{% if product.has_product_file %}
|
||||
<div class="well">
|
||||
{% if signed_get_object_url is not none %}
|
||||
<a href="{{ signed_get_object_url }}" class="product-download-button mps-button" target="_blank" download>⭳ Download</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div>
|
||||
{% endif %}
|
||||
|
||||
</section>
|
||||
|
||||
</section>
|
||||
<div class="product-description">
|
||||
<br/>
|
||||
|
||||
<section class="one-column" style="max-width: 960px;">
|
||||
|
||||
<br/>
|
||||
|
||||
<!-- Comments Section -->
|
||||
{% include 'snippets/comments.j2' %}
|
||||
<b>Description</b>
|
||||
<section>{{ product.description_html | safe }}</section>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
{% if product.has_product_file %}
|
||||
<b>File Type</b>
|
||||
<br/>
|
||||
{{ product.get_content_type("product") }} {{ product_size }}
|
||||
<br/>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="product-comments">
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<!-- Comments Section -->
|
||||
{% include 'snippets/comments.j2' %}
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
{%- endblock -%}
|
||||
|
|
|
|||
|
|
@ -30,8 +30,7 @@
|
|||
|
||||
<section class="two-column">
|
||||
|
||||
<section class="product-left">
|
||||
|
||||
<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>
|
||||
|
||||
{% if "thumbnail1" in product.extensions %}
|
||||
|
|
@ -45,45 +44,7 @@
|
|||
<a href="{{ get_endpoint }}" target="_blank"><img src="{{ get_endpoint }}?ts={{ product.updated_timestamp }}" class="product-thumbnail" /></a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<b>Description</b>
|
||||
<section>{{ product.description_html | safe }}</section>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
{% if product.is_bundle %}
|
||||
{% if product.products_in_this_bundle %}
|
||||
<b>Bundle Contents</b>
|
||||
<ul>
|
||||
{% for p in product.products_in_this_bundle %}
|
||||
<li>
|
||||
{{p.title}}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
{% elif product.has_product_file %}
|
||||
<b>File Type</b>
|
||||
<br/>
|
||||
{{ product.get_content_type("product") }} {{ product_size }}
|
||||
<br/>
|
||||
Please make sure you have an application to open this file type.
|
||||
{% endif %}
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<!-- Comments Section -->
|
||||
{% include 'snippets/comments.j2' %}
|
||||
|
||||
<br/>
|
||||
<a href="/" class="product-edit-button mps-button">Back to shop</a>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section class="product-right">
|
||||
|
||||
|
|
@ -150,6 +111,47 @@
|
|||
|
||||
</section>
|
||||
|
||||
<div class="product-description">
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<b>Description</b>
|
||||
<section>{{ product.description_html | safe }}</section>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
{% if product.is_bundle %}
|
||||
{% if product.products_in_this_bundle %}
|
||||
<b>Bundle Contents</b>
|
||||
<ul>
|
||||
{% for p in product.products_in_this_bundle %}
|
||||
<li>
|
||||
{{p.title}}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
{% elif product.has_product_file %}
|
||||
<b>File Type</b>
|
||||
<br/>
|
||||
{{ product.get_content_type("product") }} {{ product_size }}
|
||||
<br/>
|
||||
Please make sure you have an application to open this file type.
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="product-comments">
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<!-- Comments Section -->
|
||||
{% include 'snippets/comments.j2' %}
|
||||
|
||||
<br/>
|
||||
<a href="/" class="product-edit-button mps-button">Back to shop</a>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue