]> gitweb.hhaalo.de Git - speisekarten-editor.git/commitdiff
add: style for food
authorBastian Dehn <hhaalo@arcor.de>
Fri, 10 Jun 2022 20:11:28 +0000 (22:11 +0200)
committerBastian Dehn <hhaalo@arcor.de>
Fri, 10 Jun 2022 20:11:28 +0000 (22:11 +0200)
src/app/html-export.service.ts

index 995e89d50ea073987709d7be70fdac8522c18cac..6f801c2da5d5833c0a9b8f4b4dcdeccb156699d2 100644 (file)
@@ -27,7 +27,10 @@ export class HtmlExportService
                        html += '</style>';
                        html += '</head>';
                        html += '<body>';
+                       html += '<div class="foodcard">';
                        html += this.createHtmlTitles(foodcard.Titles);
+                       html += '<p>Fragen zu Allergenen beantwortet Ihnen gerne unser Servicepersonal</p>';
+                       html += '</div>';
                        html += '</body>'
                        html += '</html>';
                        let result = this.sanitizer.bypassSecurityTrustUrl("data:text/html;charset=UTF-8," + html);
@@ -44,8 +47,13 @@ export class HtmlExportService
                stylestring += '@import url("https://fonts.googleapis.com/css?family=Tangerine");';
                stylestring += '@font-face { font-family: "Tangerine"; }';
 
-               // Body
-               stylestring += 'body { max-width: 60em; margin: 0 auto; }';
+               // foodcard
+               stylestring += '.foodcard { max-width: 60em; margin: 0 auto; }';
+               stylestring += 'p { font-style: italic; text-align: center; }';
+
+               // Grid
+               stylestring += '.grid { display: grid;';
+               stylestring += 'grid-template-column: repeat(12, 1fr) }';
 
                // Title
                stylestring += 'h1 { font-family: "Tangerine", serif;';
@@ -56,10 +64,46 @@ export class HtmlExportService
                stylestring += 'h2 { font-family: "Tangerine", serif;';
                stylestring += 'text-align: center; font-size: 2em; }';
 
+               // FoodMenu
+               stylestring += '.foodmenu { text-align: center; }';
+
+               // Food
+               stylestring += '.food { grid-row: 1; grid-column: 1/13;';
+               stylestring += 'font-size: 1.2em; font-weight: bold; }';
+
+               // SideDish
+               stylestring += '.sideDish { grid-row: 2; grid-column: 1/13;';
+               stylestring += 'fond-style: italic; }';
+
+               // Price
+               stylestring += '.price { grid-row: 3; grid-column: 1/13;';
+               stylestring += 'margin-top: 0.5em; }';
+
                // Bigger Media
                stylestring += '@media only screen and (min-width: 46.875em) {';
+
+               // Title
                stylestring += 'h1 { text-align: left; }';
+
+               // Subtitle
                stylestring += 'h2 { text-align: left; }';
+
+               // FoodMenu
+               stylestring += '.foodmenu { padding: 0.5em 0;';
+               stylestring += 'border-bottom: 0.125em solid gray;';
+               stylestring += 'text-align: left; }';
+
+               // Food
+               stylestring += '.food { grid-row: 1; grid-column: 1/9;';
+               stylestring += 'font-size: 1.5em; }';
+
+               // SideDish
+               stylestring += '.sideDish { grid-row: 2; grid-column: 1/13; }';
+
+               // Price
+               stylestring += '.price { grid-row: 1; grid-column: 9/13;';
+               stylestring += 'text-align: right; font-size: 1.1em; }';
+
                stylestring += '}';
 
                return stylestring;