Skip to content
This repository has been archived by the owner on Jan 24, 2019. It is now read-only.

Commit

Permalink
Merge pull request #79 from gesa/dawnstar
Browse files Browse the repository at this point in the history 
Bug 1068392 - Wizard beta build
  • Loading branch information
Aki committed Sep 18, 2014
2 parents 754b090 + 98a88e4 commit fa1a51f
Show file tree
Hide file tree
Showing 4 changed files with 172 additions and 29 deletions.
1 change: 1 addition & 0 deletions site/less/base/fa-shim.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
// -------------

@fa-calendar: "\f073";
@fa-sort: "\f0dc";

// Mixins
// ------
Expand Down
65 changes: 50 additions & 15 deletions site/less/campaigns/start.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,20 @@
text-transform: uppercase;
}

select {
background: fadeout(@white, 60%);
border: 0.2rem solid transparent;
border-radius: 0;
height: 6rem;
padding: 1.6rem;
position: relative;
width: 50%;
&:focus, &:active {
outline: none;
border: 0.2rem solid @darkgreen;
}
}

input {
border: 0.2rem solid transparent;
line-height: 2.9;
Expand Down Expand Up @@ -52,6 +66,23 @@
}
}

.error {
border-color: @brand-danger;
&:focus, &:active {
border-color: @brand-danger;
}
}

.form-error {
color: @brand-danger;
background-color: fadeout(@white, 60%);
border: 0.2rem solid transparent;
margin: 0 auto;
padding: 1.6rem;
width: 50%;
.error;
}

a[href="/auth/login"] {
border: 0.2rem solid transparent;
font-size: 2.2rem;
Expand Down Expand Up @@ -79,27 +110,30 @@
width: 100%;
}

.datepicker, .duration {
.datepicker {
position: relative;
&::after {
bottom: 2.8rem;
.icon(@fa-calendar);
color: black;
font-size: 1.5em;
position: absolute;
right: 28%;
z-index: -1;
}
}

.datepicker {
&::after {
.icon(@fa-calendar);
}
}

.duration {
&::after {
content: 'hours';
bottom: 2rem;
right: 25%;
@media screen and (min-width: @screen-xs-min) {
right: 28%;
}
@media screen and (min-width: @screen-sm-min) {
bottom: 2.7rem;
right: 27.5%;
}
@media screen and (min-width: @screen-md-min) {
bottom: 3.1rem;
right: 27%;
}
@media screen and (min-width: @screen-lg-min) {
bottom: 3.6rem;
}
}
}

Expand Down Expand Up @@ -206,6 +240,7 @@
a {
&::after {
.icon(@fa-var-chevron-right);
padding-left: 1rem;
}
}
}
49 changes: 41 additions & 8 deletions site/resources/js/start.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,24 +61,34 @@
event.preventDefault();

var
$estimatedAttendees = $('#attendees'),
$estimatedAttendees = $('select[name="estimatedAttendees"]'),
$address = $('#address'),
webmakerLogin = JSON.parse(localStorage['webmaker-login']),
webmakerLogin = function safeGetWebmakerLogin() {
try {
return JSON.parse(localStorage['webmaker-login']);
} catch (e) {
return null;
}
},
$context = $(this),
formFields = {};

$('#submit-event').prop('disabled', true);

$('input[name="beginDate"]').val(moment($('#datepicker').val(), 'MM/DD/YYYY h:mm A'));

if ($address.val() === '') {
handleErrors();
return false;
}

if ($estimatedAttendees.val() === '') {
if ($estimatedAttendees.find('option:selected').val() === '0') {
handleErrors();
return false;
}

$context.append('<input type="hidden" name="organizer" value="' + webmakerLogin.email + '" />');
$context.append('<input type="hidden" name="organizerID" value="' + webmakerLogin.username + '" />');
$context.append('<input type="hidden" name="organizer" value="' + webmakerLogin().email + '" />');
$context.append('<input type="hidden" name="organizerID" value="' + webmakerLogin().username + '" />');

function compileInputs() {
formFields[$(this).prop('name')] = $(this).val();
Expand All @@ -89,12 +99,35 @@
$('input[type="number"]').each(compileInputs);

formFields.isEventPublic = false;
formFields.estimatedAttendees = $estimatedAttendees.find('option:selected').val();

deployPayload(JSON.stringify(formFields));
}

function handleErrors() {
var
$estimatedAttendees = $('select[name="estimatedAttendees"]'),
$address = $('#address');

if ($address.val() === '') {
$address.addClass('error');
}

if ($estimatedAttendees.find('option:selected').val() === '0') {
$estimatedAttendees.addClass('error');
}
$('#submit-event').prop('disabled', false);
}

function deployPayload(payload) {
$.ajax(eventsAPI[environment], {
data: JSON.stringify(formFields),
data: payload,
contentType: 'application/json',
error: function (xhr, textStatus, error) {
console.error('error: ' + textStatus);
error: function () {
$('#start-event-submission').prepend(
'<p class="form-error">Something went wrong with the form submission. Please wait a moment and try again.</p>'
);
$('#submit-event').prop('disabled', false);
},
type: 'POST',
xhrFields: {
Expand Down
86 changes: 80 additions & 6 deletions site/src/event/start.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,7 @@ <h3>Hack Your High School</h3>

<fieldset class="hidden meme">
<input type="hidden" name="title" value="Hack Your High School"/>
<input type="hidden" na
me="description" value="<p>Remix your school’s web site with our Xray Goggles tool. It’s as easy as going to your school’s website and changing some text to announce summer’s coming early, or adding an image making Justin Bieber the new school mascot.</p><p><a class='btn btn-primary btn-lg' href='https://blog.webmaker.org/hack-your-school'>Begin!</a></p>"/>
<input type="hidden" name="description" value="<p>Remix your school’s web site with our Xray Goggles tool. It’s as easy as going to your school’s website and changing some text to announce summer’s coming early, or adding an image making Justin Bieber the new school mascot.</p><p><a class='btn btn-primary btn-lg' href='https://blog.webmaker.org/hack-your-school'>Begin!</a></p>"/>
<input type="hidden" name="tags" value=""/>
</fieldset>
<button type="submit" id="meme" class="btn btn-primary">
Expand Down Expand Up @@ -89,7 +88,7 @@ <h3>Private Eye</h3>
</fieldset>
</form>

<form action="http://localhost:1989/events" method="post" id="start-event-submission">
<form action="#" method="post" id="start-event-submission">
<fieldset role="textbox" class="datepicker">
<label for="datepicker">Event Date</label>
<input id="datepicker">
Expand All @@ -102,12 +101,20 @@ <h3>Private Eye</h3>

<fieldset role="textbox">
<label for="estimatedAttendees"># of Attendees</label>
<input type="number" id="estimatedAttendees" name="estimatedAttendees" min="1" max="1000" placeholder="e.g. 10">
<select name="estimatedAttendees" id="estimatedAttendees">
<option value="0" selected disabled>Select…</option>
<option value="5">Under 10</option>
<option value="15">10-20</option>
<option value="35">20-50</option>
<option value="75">50-100</option>
<option value="150">100-200</option>
<option value="350">200-500</option>
<option value="500">500+</option>
</select>
</fieldset>
<fieldset role="textbox">
<input type="submit" value="Create Event" disabled class="btn btn-primary"/>
<input type="submit" value="Create Event" disabled class="btn btn-primary" id="submit-event"/>
</fieldset>

<input type="hidden" name="beginDate"/>
</form>
</li>
Expand All @@ -116,3 +123,70 @@ <h3>Private Eye</h3>
</ol>
</div>
</div>


<div
class="modal fade"
id="webmaker-login-new-user"
tabindex="-1"
role="dialog"
aria-labelledby="createNewWebmakerUser"
aria-hidden="true">

<div class="modal-backdrop"></div>

<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h3 class="modal-title">Welcome to Webmaker!</h3>
</div>
<div class="modal-body">
<form class="form">
<div class="form-group username-group">
<div class="row">
<div class="col-sm-6">
<label for="username">Choose a username</label>
</div>
<div class="col-sm-6">
<input id="username" name="username" class="form-control" required>
<span class="help-block username-taken-error hidden">That
username is taken</span>
<span class="help-block username-required-error hidden">You must
choose a username</span>
<span class="help-block username-invalid-error hidden">Invalid
username. All usernames must be between 1-20 characters, and
only include &ldquo;-&rdquo; and alphanumeric characters</span>
</div>
</div>
</div>
<div class="checkbox">
<label>
<input name="mailingList" type="checkbox"> Send me email updates
about Mozilla Webmaker and other projects
</label>
</div>
<div class="checkbox form-group agree-group">
<label>
<input name="agreeToTerms" type="checkbox"> I agree to your
<a href="https://webmaker.org/en-US/terms">terms</a> and
<a href="https://webmaker.org/en-US/privacy">conditions</a>
</label>
<span class="help-block agree-error hidden">
You must agree to our terms and conditions.
</span>
</div>
<input type="hidden" name="supportedLocales" value="en-US"/>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Cancel
</button>
<button class="create-user btn btn-primary" type="button">Create
Account
</button>
</div>
</div>
</div>
</div>

0 comments on commit fa1a51f

Please sign in to comment.