empayre/fleet
14
0
Fork 0
mirror of https://github.com/empayre/fleet.git synced 2024-11-06 08:55:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Chris mcgillicuddy register message v2 (#7512)

Browse Source 
* Update register.ejs

Updated register message with the second of three versions to test.

* Update sandbox-login.ejs

Updated login message with second of three versions.

* Add video modal to sandbox signup and login pages

Co-authored-by: Eric <eashaw@sailsjs.com>
Co-authored-by: Mike Thomas <78363703+mike-j-thomas@users.noreply.github.com>
This commit is contained in:
Chris McGillicuddy 2022-09-01 17:14:59 -05:00 committed by GitHub
parent 3e310ba150
commit 5c5add2979
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 115 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
website/assets/js/pages/try-fleet/register.page.js vendored
View File

@ -17,6 +17,8 @@ parasails.registerPage('register', {
syncing: false,
// Server error state
cloudError: '',
// Modal
modal: '',
},
// ╦ ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦ ╔═╗
@ -50,6 +52,14 @@ parasails.registerPage('register', {
submittedRegisterForm: async function() {
this.syncing = true;
window.location = '/try-fleet/sandbox';
}
},
clickOpenVideoModal: function() {
this.modal = 'video';
},
closeModal: function() {
this.modal = '';
},
}
});

13
website/assets/js/pages/try-fleet/sandbox-login.page.js vendored
View File

@ -22,6 +22,9 @@ parasails.registerPage('sandbox-login', {
// Server error state for the form
cloudError: '',
// Modal
modal: '',
},
// ╦ ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦ ╔═╗
@ -42,6 +45,14 @@ parasails.registerPage('sandbox-login', {
submittedLoginForm: async function() {
this.syncing = true;
window.location = '/try-fleet/sandbox';
}
},
clickOpenVideoModal: function() {
this.modal = 'video';
},
closeModal: function() {
this.modal = '';
},
}
});

36
website/assets/styles/pages/try-fleet/register.less vendored
View File

@ -41,6 +41,42 @@
padding-top: 17.5px;
padding-bottom: 17.5px;
}
[parasails-component='modal'] {
[purpose='modal-content'] {
margin-top: 0px;
max-width: 100vw;
height: 100vh;
width: 100vw;
background-color: #192147;
border: 0;
padding: 120px;
box-shadow: none;
overflow: hidden;
[purpose='modal-close-button'] {
margin-top: 40px;
margin-right: 40px;
color: #FFF;
opacity: 1;
}
}
[purpose='modal-dialog'] {
max-width: 100%;
margin: 0;
}
[purpose='embedded-content'] {
position: relative;
padding-bottom: 54.5%;
padding-top: 25px;
width: 100%;
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
}
@media (max-width: 768px) {
padding-top: 0px;
[purpose='sandbox-image'] {

36
website/assets/styles/pages/try-fleet/sandbox-login.less vendored
View File

@ -41,6 +41,42 @@
padding-top: 17.5px;
padding-bottom: 17.5px;
}
[parasails-component='modal'] {
[purpose='modal-content'] {
margin-top: 0px;
max-width: 100vw;
height: 100vh;
width: 100vw;
background-color: #192147;
border: 0;
padding: 120px;
box-shadow: none;
overflow: hidden;
[purpose='modal-close-button'] {
margin-top: 40px;
margin-right: 40px;
color: #FFF;
opacity: 1;
}
}
[purpose='modal-dialog'] {
max-width: 100%;
margin: 0;
}
[purpose='embedded-content'] {
position: relative;
padding-bottom: 54.5%;
padding-top: 25px;
width: 100%;
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
}
@media (max-width: 768px) {
padding-top: 0px;
[purpose='sandbox-image'] {

12
website/views/pages/try-fleet/register.ejs vendored
View File

@ -6,8 +6,7 @@
<div style="max-width: 400px;" class="flex-column d-flex">
<h2>Play in Fleet Sandbox</h2>
<p>
Fleet Sandbox is designed for testing Fleet features only.<br>
<a href="/deploy">Click here</a> for production-ready deployments.
Sandbox lets you test Fleet’s features on your device. Watch our <a @click="clickOpenVideoModal()">Sandbox setup video</a> for instructions. Create your account to get started.
</p>
<div class="pt-4">
<ajax-form :handle-submitting="handleSubmittingRegisterForm" :syncing.sync="syncing" :cloud-error.sync="cloudError" :form-errors.sync="formErrors" :form-data="formData" :form-rules="formRules" @submitted="submittedRegisterForm()">
@ -37,5 +36,14 @@
</div>
</div>
</div>
<modal v-if="modal === 'video'" @close="closeModal()" v-cloak>
<div style="height: 100%;" class="d-flex flex-column align-items-center justify-content-center">
<div purpose="embedded-content" class="container-lg">
<iframe id="ytplayer" type="text/html"
src="https://www.youtube.com/embed/iQtdpZYxiqI?autoplay=1&controls=1&modestbranding=1&playsinline=1&color=white"
frameborder="0" allowfullscreen autoplay></iframe>
</div>
</div>
</modal>
</div>
<%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>

12
website/views/pages/try-fleet/sandbox-login.ejs vendored
View File

@ -6,8 +6,7 @@
<div style="max-width: 400px;" class="flex-column d-flex">
<h2>Play in Fleet Sandbox</h2>
<p>
Fleet Sandbox is designed for testing Fleet features only.<br>
<a href="/deploy">Click here</a> for production-ready deployments.
Sandbox lets you test Fleet’s features on your device. Watch our <a @click="clickOpenVideoModal()">Sandbox setup video</a> for instructions. Create your account to get started.
</p>
<div class="pt-4">
<ajax-form action="login" :syncing.sync="syncing" :cloud-error.sync="cloudError" :form-errors.sync="formErrors" :form-data="formData" :form-rules="formRules" @submitted="submittedLoginForm()" >
@ -37,6 +36,15 @@
</div>
</div>
</div>
<modal v-if="modal === 'video'" @close="closeModal()" v-cloak>
<div style="height: 100%;" class="d-flex flex-column align-items-center justify-content-center">
<div purpose="embedded-content" class="container-lg">
<iframe id="ytplayer" type="text/html"
src="https://www.youtube.com/embed/iQtdpZYxiqI?autoplay=1&controls=1&modestbranding=1&playsinline=1&color=white"
frameborder="0" allowfullscreen autoplay></iframe>
</div>
</div>
</modal>
</div>
<%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>