]> gitweb.hhaalo.de Git - speisekarten-editor.git/commitdiff
projects / speisekarten-editor.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: d972798)
add: print css style
authorBastian Dehn <hhaalo@arcor.de>
Mon, 13 Jun 2022 16:57:16 +0000 (18:57 +0200)
committerBastian Dehn <hhaalo@arcor.de>
Mon, 13 Jun 2022 17:06:55 +0000 (19:06 +0200)
src/app/html-export.service.ts patch | blob | history
src/assets/htmlprintexport.css [new file with mode: 0644] patch | blob

diff --git a/src/app/html-export.service.ts b/src/app/html-export.service.ts
index 68a13de71c540190e2d5f15be902dbc6e7ae6f5d..4ff84524332787a28f3ff430b2703d92e805f6ee 100644 (file)
--- 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<SafeUrl>
@@ -34,6 +38,9 @@ export class HtmlExportService
                        html += '<style type="text/css" media="screen">';
                        html += this.cssExportContent;
                        html += '</style>';
+                       html += '<style type="text/css" media="print">';
+                       html += this.cssPrintExportContent;
+                       html += '</style>';
                        html += '</head>';
                        html += '<body>';
                        html += '<div class="foodcard">';
diff --git a/src/assets/htmlprintexport.css b/src/assets/htmlprintexport.css
new file mode 100644 (file)
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;
+       }
+}
Speisekarten Editor