Skip to content

Commit

Permalink
feat: introduce a general print styling, e.g. to nicely print to PDF (#…
Browse files Browse the repository at this point in the history
…1376)

* general print style sheet with special attention to the following pages
- order detail page
- checkout receipt page
- basket page
- product detail page
  • Loading branch information
DilaraGueler authored and shauke committed Apr 6, 2023
1 parent c839353 commit 94be193
Show file tree
Hide file tree
Showing 7 changed files with 129 additions and 8 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -115,13 +115,13 @@ <h3>{{ 'checkout.order_summary.heading' | translate }}</h3>
></ish-requisition-reject-dialog>

<div class="section d-flex d-flex justify-content-between">
<a [routerLink]="['../../' + view, { status: requisition.approval.statusCode }]">
<a [routerLink]="['../../' + view, { status: requisition.approval.statusCode }]" class="no-print">
<ng-container *ngIf="view === 'buyer'; else backToApprovals">
{{ 'approval.detailspage.links.return_to_requisitions' | translate }}
</ng-container>
<ng-template #backToApprovals>{{ 'approval.detailspage.links.return_to_approvals' | translate }}</ng-template>
</a>
<a routerLink="/home" data-testing-id="home-link">{{
<a routerLink="/home" class="no-print" data-testing-id="home-link">{{
'account.orderdetails.links.continue_shopping' | translate
}}</a>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,5 +25,7 @@ <h3>{{ 'shopping_cart.direct_order.heading' | translate }}</h3>
</div>
</form>

<a rel="quick-order" routerLink="/quick-order">{{ 'shopping_cart.direct_order.link.multipleItems' | translate }}</a>
<a rel="quick-order" routerLink="/quick-order" class="no-print">{{
'shopping_cart.direct_order.link.multipleItems' | translate
}}</a>
</div>
Original file line number Diff line number Diff line change
Expand Up @@ -104,8 +104,10 @@ <h3>{{ 'checkout.order_summary.heading' | translate }}</h3>

<!-- Links -->
<div class="section d-flex justify-content-between">
<a routerLink="/account/orders" data-testing-id="orders-link">{{
<a routerLink="/account/orders" class="no-print" data-testing-id="orders-link">{{
'account.orderdetails.links.return_to_orders' | translate
}}</a>
<a routerLink="/home" data-testing-id="home-link">{{ 'account.orderdetails.links.continue_shopping' | translate }}</a>
<a routerLink="/home" class="no-print" data-testing-id="home-link">{{
'account.orderdetails.links.continue_shopping' | translate
}}</a>
</div>
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ <h1 class="d-flex flex-wrap align-items-baseline">
<ish-lazy-direct-order></ish-lazy-direct-order>

<p>
<a routerLink="/home" class="text-nowrap">{{
<a routerLink="/home" class="text-nowrap no-print">{{
'shopping_cart.detailed.continue_shopping.link' | translate
}}</a>
</p>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,9 @@ <h3>{{ 'checkout.account.email.registered.heading' | translate }}</h3>
}}</a
>.
</div>
<a routerLink="/home" data-testing-id="home-link">{{ 'checkout.receipt.continue.shopping' | translate }}</a>
<a routerLink="/home" class="no-print" data-testing-id="home-link">{{
'checkout.receipt.continue.shopping' | translate
}}</a>
</div>
</div>
</div>
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="container">
<div class="container line-item-list">
<!-- Line Items Overview -->
<div class="row list-header d-none d-md-flex">
<div class="col-md-8 col-xl-6 list-header-item list-header-item-descr">
Expand Down
115 changes: 115 additions & 0 deletions src/styles/global/print.scss
Original file line number Diff line number Diff line change
@@ -1,8 +1,123 @@
///////////////////////////////////////////////////////////////////////////////
//
// CUSTOMIZED PRINT STYLES
//
// Apply general print styles for PDF creation and pages with a print icon.
//
///////////////////////////////////////////////////////////////////////////////

@import 'variables';

@mixin border($color) {
border: 1px solid $color;
}

@media print {
@page {
margin-top: 100px;
}

a[href]::after {
content: none !important;
}

aside,
footer,
header::before,
iframe,
ish-account-navigation,
ish-back-to-top,
ish-category-navigation,
ish-checkout-progress-bar,
ish-filter-navigation,
ish-lazy-product-add-to-order-template,
ish-lazy-product-compare-status,
ish-lazy-quickorder-link,
ish-lazy-search-box,
ish-product-detail-actions,
ish-product-list-toolbar,
ish-recently-viewed,
nav,
.account-nav-box,
.all-variations-link,
.details-link,
.fa-ban,
.fa-cart-shopping,
.fa-pencil,
.fa-print,
.fa-trash-can,
.header-utility,
.marketing-area,
.navbar-toggler,
.no-print,
.product-img-thumbs,
.product-tile-actions,
.share-label,
.swiper-button-next,
.swiper-button-prev,
.toast-container,
.user-links {
display: none !important;
}

.swiper-slide {
display: none;
}

.swiper-slide-active {
display: inline-block !important;
}

.budget-bar-used {
background-color: transparent;

&.bg-danger {
@include border($danger);
}

&.bg-warning {
@include border($warning);
}

&.bg-success {
@include border($success);
}
}

button {
color: $button-default-color !important;
background-color: $button-default-bg !important;
border-color: $button-default-border !important;
}

button,
.budget-bar,
.cost-summary,
.infobox {
background-color: transparent !important;
border: 1px solid $border-color-light !important;
}

.cost-summary {
margin-top: 20px;
}

.line-item-list {
.list-header,
.list-item-row {
margin-right: 2.5%;
}
}

.logo {
-webkit-print-color-adjust: exact !important; /* Chrome, Safari 6 – 15.3, Edge */
color-adjust: exact !important; /* Firefox 48 – 96 */
print-color-adjust: exact !important; /* Firefox 97+, Safari 15.4+ */
}

@supports (-moz-appearance: none) {
.logo {
margin-left: 25px !important;
}
}
}

0 comments on commit 94be193

Please sign in to comment.