Skip to content

Commit 5481240

Browse files
muratcakirmuratcakir
committed
Theming: further work on better styling for sub action items
1 parent 1245456 commit 5481240

File tree

8 files changed

+48
-40
lines changed

8 files changed

+48
-40
lines changed

‎src/Libraries/SmartStore.Data/Migrations/MigrationsConfiguration.cs‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,9 @@ public void MigrateLocaleResources(LocaleResourcesBuilder builder)
6060
"Abweichende Emailadresse für Tell A Friend zulassen",
6161
"Specifies whether customers are allowed to enter a email address different from the one they've registered their account with.",
6262
"Bestimmt ob Kunden gestattet ist eine Emailadresse anzugeben, welche von der abweicht mit der sie sich im Shop registriert haben.");
63-
}
63+
64+
builder.AddOrUpdate("ShoppingCart.AddToWishlist.Short", "Add to List", "Merken");
65+
builder.AddOrUpdate("Products.AskQuestion.Short", "Questions?", "Fragen?");
66+
}
6467
}
6568
}

‎src/Presentation/SmartStore.Web/Controllers/CatalogHelper.cs‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -266,7 +266,7 @@ public ProductDetailsModel PrepareProductDetailsPageModel(
266266
model.ActionItems["wishlist"] = new ProductDetailsModel.ActionItemModel
267267
{
268268
Key = "wishlist",
269-
Title = T("Wishlist"), // TODO
269+
Title = T("ShoppingCart.AddToWishlist.Short"),
270270
Tooltip = T("ShoppingCart.AddToWishlist"),
271271
CssClass = "ajax-cart-link action-add-to-wishlist",
272272
IconCssClass = "icm icm-heart",
@@ -279,7 +279,7 @@ public ProductDetailsModel PrepareProductDetailsPageModel(
279279
model.ActionItems["compare"] = new ProductDetailsModel.ActionItemModel
280280
{
281281
Key = "compare",
282-
Title = T("Common.Shopbar.Compare"), // TODO
282+
Title = T("Common.Shopbar.Compare"),
283283
Tooltip = T("Products.Compare.AddToCompareList"),
284284
CssClass = "action-compare ajax-cart-link",
285285
IconCssClass = "icm icm-repeat",
@@ -292,7 +292,7 @@ public ProductDetailsModel PrepareProductDetailsPageModel(
292292
model.ActionItems["ask"] = new ProductDetailsModel.ActionItemModel
293293
{
294294
Key = "ask",
295-
Title = "Fragen?", // TODO
295+
Title = T("Products.AskQuestion.Short"),
296296
Tooltip = T("Products.AskQuestion"),
297297
CssClass = "action-ask-question",
298298
IconCssClass = "icm icm-envelope",
@@ -307,7 +307,7 @@ public ProductDetailsModel PrepareProductDetailsPageModel(
307307
Key = "tell",
308308
Title = T("Products.EmailAFriend"),
309309
CssClass = "action-bullhorn",
310-
IconCssClass = "icm icm-envelope",
310+
IconCssClass = "icm icm-bullhorn",
311311
Href = _urlHelper.Action("EmailAFriend", new { id = model.Id })
312312
};
313313
}

‎src/Presentation/SmartStore.Web/Themes/Flex/Content/_product.scss‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -437,19 +437,20 @@ $pd-offer-spacing: $grid-gutter-width-base / 2;
437437
> *:not(:last-child) { margin-bottom: $pd-offer-spacing / 2; }
438438
}
439439

440-
.pd-actions {
441-
overflow: hidden;
440+
.pd-actions {
441+
overflow-x: auto;
442442
flex-wrap: nowrap;
443443

444444
.pd-action-item {
445445
text-align: center;
446446
border-right: 1px solid rgba(#000, 0.15);
447+
padding-top: 6px; // for the transform
447448
&:last-child { border-color: transparent; }
448449

449-
&.col .pd-action-label {
450-
// When more than 4 action items are available,
451-
// .col is used instead of .col-(x). These need special care
452-
// concerning responsiveness.
450+
// When more than 4 action items are available,
451+
// .col is used instead of .col-(x). These need special care
452+
// concerning responsiveness.
453+
&.col .pd-action-label, &.col-2 .pd-action-label {
453454
display: none !important;
454455
@include media-breakpoint-only(sm) { display: block !important; }
455456
@include media-breakpoint-up(xl) { display: block !important; }
@@ -462,25 +463,27 @@ $pd-offer-spacing: $grid-gutter-width-base / 2;
462463
text-decoration: none;
463464
color: inherit;
464465
height: 100%;
465-
&.pd-action-link-special { font-weight: 600 }
466466

467467
.pd-action-icon {
468468
display: block;
469469
height: 20px;
470470
line-height: 20px;
471471
vertical-align: middle;
472472
color: $pd-offer-muted-color;
473+
transition: all 0.125s ease-out;
474+
transform-origin: bottom;
473475
}
474476

475477
.pd-action-label {
476-
padding-top: 0.3rem;
478+
padding-top: 0.375rem;
477479
display: block;
478480
overflow: hidden;
479481
text-overflow: ellipsis;
480482
}
481483

482-
&:hover .pd-action-label {
483-
text-decoration: underline;
484+
&:hover .pd-action-icon {
485+
color: inherit;
486+
transform: scale(1.14);
484487
}
485488
}
486489
}

‎src/Presentation/SmartStore.Web/Themes/Flex/Content/shared/_typo.scss‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,10 @@
1919
.fs-display-3 { font-size: $display3-size !important; }
2020
.fs-display-4 { font-size: $display4-size !important; }
2121

22-
.fs-small { font-size: 0.85rem !important; }
23-
24-
.text-smaller,
25-
.text-smaller a {
26-
font-size: $font-size-sm;
27-
}
22+
.fs-sm,
23+
.fs-sm a { font-size: $font-size-sm !important; }
24+
.fs-xs,
25+
.fs-xs a { font-size: $font-size-xs !important; }
2826

2927

3028
// Font weight Helpers

‎src/Presentation/SmartStore.Web/Views/Product/Partials/Product.Offer.Actions.Misc.cshtml‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -32,38 +32,40 @@
3232
<div class="row sm-gutters pd-actions">
3333
@{
3434
var colClass = "col";
35-
if (actions.Count < 5)
35+
if (actions.Count < 5 || actions.Count == 6)
3636
{
3737
colClass += "-" + 12 / actions.Count;
3838
}
39-
40-
int i = 0;
4139
}
4240
@foreach (var action in actions)
4341
{
44-
i++;
4542
var key = action.Key;
4643
var isSpecial = key == "wishlist" || key == "compare";
47-
<div class="@colClass pd-action-item">
44+
<div class="@colClass pd-action-item" @Html.Attr("style", "width: 20%; min-width: 20%", actions.Count == 5)>
4845
@if (isSpecial)
4946
{
5047
<a data-href='@action.Href' @Html.Attr("data-form-selector", "#pd-form", key == "wishlist")
5148
title="@action.Tooltip"
5249
href="#"
5350
class="pd-action-link@(isSpecial ? " pd-action-link-special" : "") @action.CssClass"
5451
rel="nofollow"
55-
data-toggle="tooltip"
5652
data-type="@key"
5753
data-action="add">
5854
<i class="pd-action-icon @action.IconCssClass"></i>
59-
<span class="pd-action-label">@action.Title</span>
55+
@if (actions.Count < 7)
56+
{
57+
<span class="pd-action-label@(actions.Count > 4 ? " fs-sm" : "")">@action.Title</span>
58+
}
6059
</a>
6160
}
6261
else
6362
{
64-
<a class="pd-action-link@(isSpecial ? " pd-action-link-special" : "") @(action.CssClass)" href="@action.Href" rel="nofollow" title="@action.Tooltip" data-toggle="tooltip">
63+
<a class="pd-action-link@(isSpecial ? " pd-action-link-special" : "") @(action.CssClass)" href="@action.Href" rel="nofollow" title="@action.Tooltip">
6564
<i class="pd-action-icon @action.IconCssClass"></i>
66-
<span class="pd-action-label">@action.Title</span>
65+
@if (actions.Count < 7)
66+
{
67+
<span class="pd-action-label@(actions.Count > 4 ? " fs-sm" : "")">@action.Title</span>
68+
}
6769
</a>
6870
}
6971
</div>

‎src/Presentation/SmartStore.Web/Views/Product/Partials/Product.Offer.Actions.cshtml‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,8 @@
4444
</div>
4545
}
4646

47-
Html.RenderPartial("Product.Offer.Actions.Misc", Model);
47+
<div class="col-12">
48+
@{ Html.RenderPartial("Product.Offer.Actions.Misc", Model); }
49+
</div>
4850
}
4951
</div>

‎src/Presentation/SmartStore.Web/Views/ShoppingCart/Partials/CartItems.cshtml‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,19 +20,19 @@
2020

2121
@if (Model.DisplayShortDesc && !String.IsNullOrEmpty(item.ShortDesc))
2222
{
23-
<div class="cart-item-desc text-smaller">
23+
<div class="cart-item-desc fs-sm">
2424
@Html.Raw(item.ShortDesc.Truncate(250, "..."))
2525
</div>
2626
}
2727

2828
@if (Model.DisplayBasePrice && !String.IsNullOrEmpty(item.BasePrice))
2929
{
30-
<div class="cart-item-base-price text-muted text-smaller">
30+
<div class="cart-item-base-price text-muted fs-sm">
3131
@item.BasePrice
3232
</div>
3333
}
3434

35-
<div class="cart-item-attrs text-smaller my-2">
35+
<div class="cart-item-attrs fs-sm my-2">
3636
@if (Model.DisplayDeliveryTime && item.IsShipEnabled && (!String.IsNullOrEmpty(item.DeliveryTimeName) && !String.IsNullOrEmpty(item.DeliveryTimeHexValue)))
3737
{
3838
<div class="row cart-item-attr deliverytime-group">
@@ -65,7 +65,7 @@
6565

6666
@if (!String.IsNullOrEmpty(item.AttributeInfo))
6767
{
68-
<div class="attributes text-muted text-smaller mb-2">
68+
<div class="attributes text-muted fs-sm mb-2">
6969
@Html.Raw(item.AttributeInfo)
7070
</div>
7171
}
@@ -162,7 +162,7 @@
162162
<span class="price">@item.SubTotal</span>
163163
@if (!String.IsNullOrEmpty(item.Discount))
164164
{
165-
<div class="discount text-smaller text-muted pt-1">
165+
<div class="discount fs-sm text-muted pt-1">
166166
<div>@T("ShoppingCart.ItemYouSave"):</div>
167167
<div>@item.Discount</div>
168168
</div>

‎src/Presentation/SmartStore.Web/Views/ShoppingCart/Partials/WishlistItems.cshtml‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,12 @@
2727

2828
@if (Model.DisplayShortDesc && !String.IsNullOrEmpty(item.ShortDesc))
2929
{
30-
<div class="cart-item-desc text-smaller text-muted">
30+
<div class="cart-item-desc fs-sm text-muted">
3131
@Html.Raw(item.ShortDesc.Truncate(180, "..."))
3232
</div>
3333
}
3434

35-
<div class="cart-item-attributes text-smaller my-2">
35+
<div class="cart-item-attributes fs-sm my-2">
3636
<div class="text-nowrap row cart-item-attr d-none d-md-flex d-lg-none">
3737
<span class="col-3">@T("Order.Product(s).Price"):</span>
3838
<span class="col-9">@item.UnitPrice</span>
@@ -49,7 +49,7 @@
4949

5050
@if (!String.IsNullOrEmpty(item.AttributeInfo))
5151
{
52-
<div class="attributes text-muted text-smaller mb-2">
52+
<div class="attributes text-muted fs-sm mb-2">
5353
@Html.Raw(item.AttributeInfo)
5454
</div>
5555
}
@@ -161,7 +161,7 @@
161161
</div>
162162
@if (Model.DisplayShortDesc && !String.IsNullOrWhiteSpace(item.ShortDesc))
163163
{
164-
<div class="bundle-item-description cart-item-desc text-smaller text-muted">
164+
<div class="bundle-item-description cart-item-desc fs-sm text-muted">
165165
@Html.Raw(item.ShortDesc.Truncate(210, "..."))
166166
</div>
167167
}

0 commit comments

Comments
 (0)