Skip to content

Commit

Permalink
feat: Adding Tutorial about Account Creation in Pro platform (#8577)
Browse files Browse the repository at this point in the history
  • Loading branch information
@MonalikaPatnaik
MonalikaPatnaik authored Jul 25, 2023
1 parent 18f22f7 commit 7c6e53d
Show file tree
Hide file tree
Showing 2 changed files with 63 additions and 35 deletions.
15 changes: 15 additions & 0 deletions scss/_off.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1450,4 +1450,19 @@ a.panel_title {
.button:focus, .button:hover, button:focus, button:hover {
background-color: scale-color($button-bg-color, $lightness: -$button-function-factor / 2);
color: #fff;
}

// Tuto video beside user form
.form-wrapper {
display: flex;
align-items: center;
flex-direction: row;
gap: 1rem;
margin: 0 auto;
max-width: 100rem;
@media #{$small-only} {
flex-direction: column;
gap: 0;
margin-top: -2rem;
}
}
83 changes: 48 additions & 35 deletions templates/web/pages/user_form/user_form_page.tt.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,44 +60,57 @@
[% IF section.note %]
<p >[% section.note %]</p>
[% END %]
<div class="form-wrapper">
<div class="form-container" style="width: 80%;margin-right: 20px;">
[% FOREACH field IN section.fields %]
[% IF field.field == 'userid' %]
[% IF type == 'edit' %]
<label for="[% field.field %]"> [% field.label %]</label>
<p id="userid"><a href="/editor/[% field.value %]">[% field.value %]</a></p>
[% ELSE %]
<label for="[% field.field %]"> [% lang(field.label) %] [% lang('username_info') %]</label>
<input type="text" id="[% field.field %]" name="[% field.field %]" value="[% field.value %]" autocomplete="username" onkeyup="normalize_string_value(this)" />
[% END %]
[% ELSIF field.type == 'text' %]
<div [% IF section.id == "professional" %] class="pro_org_display" [% END %]>
<label for="[% field.field %]">[% field.label %]</label>
<input type="text" id="[% field.field %]" name="[% field.field %]" value="[% field.value %]" [% IF section.id == "teams" %] onkeyup="normalize_string_value(this)" [% END %]/>
</div>
[% ELSIF field.type == 'password' %]
<label for="[% field.field %]">[% lang(field.label) %]</label>
<input type="password" id="[% field.field %]" name="[% field.field %]" value="[% field.value %]" autocomplete="new-password"/>
[% ELSIF field.type == 'email' %]
<label for="[% field.field %]"> [% field.label %]</label>
<input type="email" id="[% field.field %]" name="[% field.field %]" value = "[% field.value %]" autocomplete="email"/>
[% ELSIF field.type == 'checkbox' %]
[% IF accepted_organization && section.id == "professional" %]
<p>[% f_lang('f_this_is_a_pro_account_for_org', {'org' => accepted_organization}) %]</p>
[% ELSE %]
<label for="[% field.field %]">
<input type="checkbox" id="[% field.field %]" name="[% field.field %]" [% IF field.value == 'on' %]checked="checked"[% END %] />
[% field.label %]
</label>
[% END %]
[% ELSIF field.type == 'hidden' %]
<label for="pro">
<input type="hidden" name="[% field.field %]" value="[% field.value %]">
</label>
[% END %]

[% FOREACH field IN section.fields %]
[% IF field.field == 'userid' %]
[% IF type == 'edit' %]
<label for="[% field.field %]"> [% field.label %]</label>
<p id="userid"><a href="/editor/[% field.value %]">[% field.value %]</a></p>
[% ELSE %]
<label for="[% field.field %]"> [% lang(field.label) %] [% lang('username_info') %]</label>
<input type="text" id="[% field.field %]" name="[% field.field %]" value="[% field.value %]" autocomplete="username" onkeyup="normalize_string_value(this)" />
[% END %]
[% ELSIF field.type == 'text' %]
<div [% IF section.id == "professional" %] class="pro_org_display" [% END %]>
<label for="[% field.field %]">[% field.label %]</label>
<input type="text" id="[% field.field %]" name="[% field.field %]" value="[% field.value %]" [% IF section.id == "teams" %] onkeyup="normalize_string_value(this)" [% END %]/>
</div>
[% ELSIF field.type == 'password' %]
<label for="[% field.field %]">[% lang(field.label) %]</label>
<input type="password" id="[% field.field %]" name="[% field.field %]" value="[% field.value %]" autocomplete="new-password"/>
[% ELSIF field.type == 'email' %]
<label for="[% field.field %]"> [% field.label %]</label>
<input type="email" id="[% field.field %]" name="[% field.field %]" value = "[% field.value %]" autocomplete="email"/>
[% ELSIF field.type == 'checkbox' %]
[% IF accepted_organization && section.id == "professional" %]
<p>[% f_lang('f_this_is_a_pro_account_for_org', {'org' => accepted_organization}) %]</p>
[% ELSE %]
<label for="[% field.field %]">
<input type="checkbox" id="[% field.field %]" name="[% field.field %]" [% IF field.value == 'on' %]checked="checked"[% END %] />
[% field.label %]
</label>
[% END %]
[% ELSIF field.type == 'hidden' %]
<label for="pro">
<input type="hidden" name="[% field.field %]" value="[% field.value %]">
</label>
</div>
<!-- show video about account creation beside user form section-->
[% IF server_options_producers_platform AND section.id == "user" AND type != "edit" %]
<div class="video-container" style="width:70%">

<iframe width="560" height="315" src="https://www.youtube.com/embed/RXKxDuuKYV0"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen style="margin-top: 20px;max-width: 100%;"></iframe>

</div>
[% END %]

[% END %]

</div>
[% IF section.id == "professional" %]
<div class="pro_org_display">
[% IF requested_org_ref.defined %]
Expand Down

0 comments on commit 7c6e53d

Please sign in to comment.