From: Bastian Dehn Date: Mon, 13 Jun 2022 16:57:16 +0000 (+0200) Subject: add: print css style X-Git-Tag: v1.0.1^2~1 X-Git-Url: https://gitweb.hhaalo.de/?a=commitdiff_plain;h=1a3fa333b279db9dd74bc6cec5a22156d9c2a764;p=speisekarten-editor.git add: print css style --- diff --git a/src/app/html-export.service.ts b/src/app/html-export.service.ts index 68a13de..4ff8452 100644 --- a/src/app/html-export.service.ts +++ b/src/app/html-export.service.ts @@ -14,6 +14,7 @@ import { IFood } from './ifood'; export class HtmlExportService { private cssExportContent: string = ""; + private cssPrintExportContent: string = ""; constructor(private sanitizer: DomSanitizer, private httpclient: HttpClient) @@ -21,6 +22,9 @@ export class HtmlExportService let loadcss = this.loadCssFile("assets/htmlexport.css"); loadcss.subscribe((content: any) => { this.cssExportContent = content as string; }); + loadcss = this.loadCssFile("assets/htmlprintexport.css"); + loadcss.subscribe((content: any) => { + this.cssPrintExportContent = content as string; }); } public exportHtml(foodcard: IFoodCard): Observable @@ -34,6 +38,9 @@ export class HtmlExportService html += ''; + html += ''; html += ''; html += ''; html += '
'; diff --git a/src/assets/htmlprintexport.css b/src/assets/htmlprintexport.css new file mode 100644 index 0000000..be769b9 --- /dev/null +++ b/src/assets/htmlprintexport.css @@ -0,0 +1,83 @@ +@import url("https://fonts.googleapis.com/css?family=Tangerine"); +@font-face { + font-family: "Tangerine"; +} + +p { + font-style: italic; + text-align: center; +} + +.grid { + display: grid; + grid-template-columns: repeat(12, 1fr); +} + +h1 { + font-family: "Tangerine", serif; + margin: 0; + text-align: center; + font-size: 22pt; +} + +h2 { + font-family: "Tangerine", serif; + margin: 0; + text-align: center; + font-size: 22pt; +} + +.foodmenu { + text-align: center; + margin-bottom: 2mm; +} + +.food { + grid-row: 1; + grid-column: 1/13; + font-size: 12pt; + font-weight: bold; +} + +.sideDish { + grid-row: 2; + grid-column: 1/13; + font-size: 8pt; + font-style: italic; +} + +.price { + grid-row: 3; + grid-column: 1/13; + font-size: 10pt; +} + +@media (min-width: 180mm) { + h1 { + text-align: left; + } + + h2 { + text-align: left; + } + + .foodmenu { + text-align: left; + } + + .food { + grid-row: 1; + grid-column: 1/9; + } + + .sideDish { + grid-row: 2; + grid-column: 1/13; + } + + .price { + grid-row: 1; + grid-column: 9/13; + text-align: right; + } +}