diff --git a/frontend/admin/src/project-banner/project-banner.ts b/frontend/admin/src/project-banner/project-banner.ts index e8d8392d52..f2d7512b7e 100644 --- a/frontend/admin/src/project-banner/project-banner.ts +++ b/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"> </div> + <div> </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> diff --git a/frontend/admin/src/styles.ts b/frontend/admin/src/styles.ts index 70a7f064ec..7b4c1d2a63 100644 --- a/frontend/admin/src/styles.ts +++ b/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; } + +`; \ No newline at end of file diff --git a/src/main/resources/alfio/web-templates/admin-index.ms b/src/main/resources/alfio/web-templates/admin-index.ms index b198caa844..f6050f5bf8 100644 --- a/src/main/resources/alfio/web-templates/admin-index.ms +++ b/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> diff --git a/src/main/webapp/alfio-admin-v1/js/admin/feature/project-banner/project-banner.html b/src/main/webapp/alfio-admin-v1/js/admin/feature/project-banner/project-banner.html deleted file mode 100644 index 8bc3f9bc13..0000000000 --- a/src/main/webapp/alfio-admin-v1/js/admin/feature/project-banner/project-banner.html +++ /dev/null @@ -1,25 +0,0 @@ -<div ng-if="!$ctrl.fullBanner"> - <h5 class="text-muted">Powered by <a href="https://alf.io" target="_blank">Alf.io</a> v.{{$ctrl.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> - </div> -</div> - -<div class="alert" ng-if="$ctrl.fullBanner"> - <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"> </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> - <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> - <div class="col-xs-12 col-lg-2"> - <button type="button" class="btn btn-default ml-3" ng-click="$ctrl.dismiss()">Dismiss</button> - </div> - </div> -</div> \ No newline at end of file diff --git a/src/main/webapp/alfio-admin-v1/js/admin/feature/project-banner/project-banner.js b/src/main/webapp/alfio-admin-v1/js/admin/feature/project-banner/project-banner.js deleted file mode 100644 index d1011a46e7..0000000000 --- a/src/main/webapp/alfio-admin-v1/js/admin/feature/project-banner/project-banner.js +++ /dev/null @@ -1,28 +0,0 @@ -(function () { - "use strict"; - - angular.module('adminApplication') - .component('projectBanner', { - bindings: { - fullBanner: '<', - alfioVersion: '<' - }, - controller: ['ConfigurationService', '$window', ProjectBannerController], - templateUrl: window.ALFIO_CONTEXT_PATH + '/resources/js/admin/feature/project-banner/project-banner.html' - }); - - function ProjectBannerController(ConfigurationService, $window) { - var ctrl = this; - ctrl.$onInit = function() { - ctrl.dismiss = function() { - ConfigurationService.update({ - key: 'SHOW_PROJECT_BANNER', - value: 'false' - }).then(function() { - ctrl.fullBanner = false; - $window.location.reload(); - }) - }; - }; - } -})(); \ No newline at end of file