diff options
Diffstat (limited to 'views/newevent.handlebars')
| -rwxr-xr-x | views/newevent.handlebars | 33 |
1 files changed, 17 insertions, 16 deletions
diff --git a/views/newevent.handlebars b/views/newevent.handlebars index 9df69db..d6d7024 100755 --- a/views/newevent.handlebars +++ b/views/newevent.handlebars @@ -1,14 +1,15 @@ -<main class="page"> -<div class="container mb-4"> +<main class="page" x-data="{currentTab: null}"> +<h2 class="mb-3 pb-2 text-center border-bottom">What would you like to do?</h2> +<div class="container-fluid mb-4"> <div class="row"> - <div class="col-sm-4 p-2"> - <button type="button" id="showNewEventFormButton" class="btn btn-secondary w-100"><i class="fas fa-calendar-day"></i> Create a new event</button> + <div class="col-lg-4 p-2"> + <button type="button" id="showNewEventFormButton" class="button w-100" x-bind:class="currentTab === 'event' ? 'button--primary' : 'button--secondary'" x-on:click="currentTab = 'event'"><i class="fas fa-calendar-day"></i> Create a new event</button> </div> - <div class="col-sm-4 p-2"> - <button type="button" id="showImportEventFormButton" class="btn btn-secondary w-100"><i class="fas fa-file-import"></i> Import an existing event</button> + <div class="col-lg-4 p-2"> + <button type="button" id="showImportEventFormButton" class="button w-100" x-bind:class="currentTab === 'importEvent' ? 'button--primary' : 'button--secondary'" x-on:click="currentTab = 'importEvent'"><i class="fas fa-file-import"></i> Import an existing event</button> </div> - <div class="col-sm-4 p-2"> - <button type="button" id="showNewEventGroupFormButton" class="btn btn-secondary w-100"><i class="fas fa-calendar-alt"></i> Create a new event group </button> + <div class="col-lg-4 p-2"> + <button type="button" id="showNewEventGroupFormButton" class="button w-100" x-bind:class="currentTab === 'group' ? 'button--primary' : 'button--secondary'" x-on:click="currentTab = 'group'"><i class="fas fa-calendar-alt"></i> Create a new event group </button> </div> </div> </div> @@ -17,7 +18,7 @@ <i class="fas fa-exclamation-circle"></i> Events are visible to anyone who knows the link. </div> -<div id="newEventFormContainer"> +<div id="newEventFormContainer" x-show="currentTab === 'event'" style="display: none"> <h4 class="mb-2">Create an event</h4> <form id="newEventForm" @@ -34,9 +35,9 @@ <button id="newEventFormSubmit" type="submit" - class="btn btn-primary w-50" + class="button button--primary w-50" x-bind:disabled="submitting" - x-bind:class="submitting ? 'btn--loading' : ''" + x-bind:class="submitting ? 'button--loading' : ''" x-text="submitting ? 'Creating...' : 'Create'" ></button> </div> @@ -44,11 +45,11 @@ </form> </div> -<div id="importEventFormContainer"> +<div id="importEventFormContainer" x-show="currentTab === 'importEvent'" style="display: none"> {{>importeventform}} </div> -<div id="newEventGroupFormContainer"> +<div id="newEventGroupFormContainer" x-show="currentTab === 'group'" style="display: none"> <h4 class="mb-2">Create an event group</h4> <p class="text-muted">An event group is a holding area for a set of linked events, like a recurring game night, a festival, or a band tour. You can share a public link to your event group just like an individual event link, and people who know the secret editing code will be able to add future events to the group.</p> <p class="text-muted">Event groups do not get automatically removed like events do, but events which have been removed from {{siteName}} will of course not show up in an event group.</p> @@ -58,9 +59,9 @@ <div class="col-sm-12 pt-3 pb-3 text-center"> <button type="submit" - class="btn btn-primary w-50" + class="button button--primary w-50" x-bind:disabled="submitting" - x-bind:class="submitting ? 'btn--loading' : ''" + x-bind:class="submitting ? 'button--loading' : ''" x-text="submitting ? 'Creating...' : 'Create'" ></button> </div> @@ -72,4 +73,4 @@ <script src="/js/generate-timezones.js"></script> <script src="/js/modules/new.js"></script> -<script src="/js/modules/group-linker.js"></script>
\ No newline at end of file +<script src="/js/modules/group-linker.js"></script> |