Pageheader.svelte 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. <!-- Folgende Attribute werden unterstützt:
  2. art: z.B. Zeugnis, Abgangszeugnis etc. Sollte auf eine vorhandene Datei zeigen
  3. wird unten links platziert im Header
  4. logo: z.B Schullogo. Wird oben recht splatziert
  5. untertitel: Wird unterhalb des Logos platziert.
  6. hr: Wenn eine rote Linie unter das Logo soll. Standard an -->
  7. <div class="header">
  8. {#if traeger && untertitel}
  9. <div style="height: 157px">
  10. <div class="traeger">
  11. <img class="" style="margin-bottom: 7mm; display: block;" src="{traeger}" alt="logo"/>
  12. <img class="" style="margin-bottom: 1mm; block;" src="{logo}" alt="logo"/>
  13. <img class="" style="display: block;" src="{untertitel}" alt="logo_untertitel"/>
  14. </div>
  15. {#if art}
  16. <img class="art" src="{art}" alt="logo_art"/>
  17. {/if}
  18. </div>
  19. {/if}
  20. {#if logo && !traeger && untertitel}
  21. <div style="height: 75px">
  22. <div class="traeger">
  23. <img class="" style="margin-bottom: 1mm; block;" src="{logo}" alt="logo"/>
  24. <img class="" style="display: block;" src="{untertitel}" alt="logo_untertitel"/>
  25. </div>
  26. {#if art}
  27. <img class="art" src="{art}" alt="logo_art"/>
  28. {/if}
  29. </div>
  30. {/if}
  31. {#if logo && !untertitel}
  32. <div class="traeger">
  33. <img class="" style="margin-bottom: 1mm; block;" src="{logo}" alt="logo"/>
  34. </div>
  35. {/if}
  36. {#if hr}
  37. <hr class="hr-rot"/>
  38. {/if}
  39. </div>
  40. <script>
  41. export let art = undefined
  42. export let logo
  43. export let untertitel
  44. export let traeger
  45. export let hr = false
  46. </script>
  47. <style>
  48. .header {
  49. position: relative;
  50. margin-bottom: 2rem;
  51. }
  52. .art {
  53. position: absolute;
  54. bottom: 0px;
  55. }
  56. .traeger {
  57. position: absolute;
  58. right: 0px;
  59. }
  60. .logo {
  61. position: absolute;
  62. right: 0px;
  63. }
  64. .untertitel {
  65. position: absolute;
  66. right: 0px;
  67. bottom: 12px;
  68. }
  69. .hr-rot {
  70. border-color: #ff2700;
  71. margin: 8px 0;
  72. position: absolute;
  73. bottom: 0px;
  74. width: -webkit-fill-available;
  75. }
  76. </style>