port project banner to lit (#1364)

frontend/admin/src/project-banner/project-banner.ts

@@ -1,7 +1,8 @@
-import { LitElement, html } from 'lit';
+import { LitElement, html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js'
 import { when } from 'lit/directives/when.js';
 import { ConfigurationService } from '../service/configuration';
+import { retroCompat, textColors, row } from '../styles'
 
 @customElement('alfio-project-banner')
 export class ProjectBanner extends LitElement {
@@ -12,32 +13,43 @@ export class ProjectBanner extends LitElement {
     @property({ type: String, attribute: 'data-alfio-version' })
     alfioVersion?: string;
 
+    static styles = [
+        retroCompat,
+        textColors,
+        row,
+        css` :host { --alfio-row-cols: 3 }`
+    ];
+
     render() {
         const notFullBanner = () => html`
             <div>
                 <h5 class="text-muted">Powered by <a href="https://alf.io" target="_blank">Alf.io</a> v.${this.alfioVersion}</h5>
                 <small><a href="https://github.com/alfio-event/alf.io/issues" target="_blank" rel="noopener">report an issue</a> or <a href="https://github.com/alfio-event/alf.io/discussions" target="_blank" rel="nofollow noopener noreferrer">ask for help</a></small>
                 <div class="wMarginTop10px">
-                    <a class="btn btn-xs btn-success" href="https://alf.io/usage-form/" target="_blank" rel="noopener">Tell us about you!</a>
+                    <sl-button variant="success" size="small" href="https://alf.io/usage-form/" target="_blank" rel="noopener">Tell us about you!</sl-button>
                 </div>
             </div>
         `;
 
         const fullBanner = () => html`
-            <div class="alert">
+            <div>
                 <h3 class="text-center">Thank you for using Alf.io!</h3>
                 <h4> We don't track usage in any way, because we respect your privacy<br>
                 ...but we're very happy that you've decided to use Alf.io and we'd love to hear your story! </h4>
-                <div class="mb-3">&nbsp;</div>
+                <div>&nbsp;</div>
                 <div class="row">
-                    <div class="col-xs-12 col-lg-2 col-lg-offset-3">
-                        <a class="btn btn-primary" href="https://alf.io/usage-form/" target="_blank" rel="noopener"><i class="fa fa-bullhorn"></i> Tell us about you!</a>
+                    <div>
+                        <sl-button variant="primary" href="https://alf.io/usage-form/" target="_blank" rel="noopener">
+                            Tell us about you!
+                        </sl-button>
                     </div>
-                    <div class="col-xs-12 col-lg-2">
-                        <a class="btn btn-success ml-2" href="https://opencollective.com/alfio/contribute" target="_blank" rel="noopener"><i class="fa fa-handshake-o"></i> Contribute on OpenCollective</a>
+                    <div>
+                        <sl-button variant="success" href="https://opencollective.com/alfio/contribute" target="_blank" rel="noopener">
+                            Contribute on OpenCollective
+                        </sl-button>
                     </div>
-                    <div class="col-xs-12 col-lg-2">
-                        <button type="button" class="btn btn-default ml-3" @click=${this.dismiss} ng-click="$ctrl.dismiss()">Dismiss</button>
+                    <div>
+                        <sl-button type="button" class="btn btn-default ml-3" @click=${this.dismiss} ng-click="$ctrl.dismiss()">Dismiss</sl-button>
                     </div>
                 </div>
             </div>

frontend/admin/src/styles.ts

@@ -81,3 +81,42 @@ export const form = css`
         display: inline-block;
     }
 `;
+
+
+// imported minimal common css part from bootstrap
+export const retroCompat = css`
+
+h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
+    font-family: inherit;
+    font-weight: 500;
+    line-height: 1.1;
+    color: inherit
+}
+
+h1,.h1,h2,.h2,h3,.h3 {
+    margin-top: 22px;
+    margin-bottom: 11px
+}
+
+
+h4,.h4,h5,.h5,h6,.h6 {
+    margin-top: 11px;
+    margin-bottom: 11px
+}
+
+h1,.h1 { font-size: 41px }
+h2,.h2 { font-size: 34px }
+h3,.h3 { font-size: 28px }
+h4,.h4 { font-size: 20px }
+h5,.h5 { font-size: 16px }
+h6,.h6 { font-size: 14px }
+
+small,.small { font-size: 87% }
+
+a { color: #337ab7; text-decoration: none }
+a:hover,a:focus { color: #23527c; text-decoration: underline }
+a:focus { outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px }
+
+.wMarginTop10px { margin-top: 10px; }
+
+`;

src/main/resources/alfio/web-templates/admin-index.ms

@@ -115,7 +115,6 @@
     <script nonce="{{nonce}}" src="{{contextPath}}/resources/js/admin/feature/internationalization-editor/internationalization-editor.js"></script>
     <script nonce="{{nonce}}" src="{{contextPath}}/resources/js/admin/feature/copy-event/copy-event.js"></script>
     <script nonce="{{nonce}}" src="{{contextPath}}/resources/js/admin/feature/metadata-editor/metadata-editor.js"></script>
-    <script nonce="{{nonce}}" src="{{contextPath}}/resources/js/admin/feature/project-banner/project-banner.js"></script>
     <script nonce="{{nonce}}" src="{{contextPath}}/resources/js/admin/feature/polls/polls.js"></script>
     <script nonce="{{nonce}}" src="{{contextPath}}/resources/js/admin/feature/export-reservations/export-reservations.js"></script>
     <script nonce="{{nonce}}" src="{{contextPath}}/resources/js/admin/feature/open-generated-link/open-generated-link.js"></script>
@@ -246,8 +245,7 @@
                 </div>
             </div>
             <footer class="text-center" ng-if="!ctrl.displaySidebar">
-                <project-banner data-full-banner="{{displayProjectBanner}}" data-alfio-version="'{{alfioVersion}}'"></project-banner>
-                <!-- <alfio-project-banner data-full-banner="{{displayProjectBanner}}" data-alfio-version="{{alfioVersion}}"></alfio-project-banner> -->
+                <alfio-project-banner data-full-banner="{{displayProjectBanner}}" data-alfio-version="{{alfioVersion}}" class="container alert" style="display:block"></alfio-project-banner>
             </footer>
         </div>
     </div>