changes after first testing
[angular-mojolicious.git] / templates / conference / Registration.html.ep
index 8da54b9..e70a527 100644 (file)
@@ -4,11 +4,10 @@ if (typeof (console) === 'undefined') console = { debug: function() {} }; // moc
 
 function Registration($resource){
        this.master = {
-//             category: null,
                person: {
                        name: '', surname: '', inst: '', email: '',
                },
-               type: '', // just attending
+               type: 'participant',
                work: {
                        title: '',
                        abstract: '',
@@ -51,7 +50,6 @@ console.debug( 'load symposium ', s_id );
                }
                this.registration = new this.Registration( this.master );
                if ( last ) {
-                       this.registration.category  = last.category;
                        this.registration.type      = last.type;
                        this.registration.person    = last.person;
 
@@ -127,59 +125,39 @@ label {
        color: #374E5A;
 }
 
-.fl {
+.input {
        color: #afafaf;
        float: left;
        margin: 2px;
        padding: 0 6px;
 }
 
-.fl1 {
+.input1 {
        width: 40.8em;
 }
 
-.fl2 {
+.input2 {
        width: 8em;
 }
 
-.fl3 {
+.input3 {
        width: 13em;
 }
-
-.flClear {
-       clear: both;
-}
-
-.labelTop .pname, .labelTop .name, .labelTop .surname, .labelTop .pinst, .labelTop .email, .labelTop .city, .labelTop .address, .labelTop .contact {
-       color: #afafaf;
-       float: left;
-       margin: 2px;
-       padding: 0 6px;
-}
-
-.pname, .name, .surname, .email {
+.input4 {
        width: 10em;
 }
 
-.pinst {
+.input5 {
        width: 21.4em;
 }
-
-.address {
-       width: 14.1em;
+.input6 {
+       width: 6.3em;
 }
 
-.city {
-       width: 9em;
-}
-
-.contact {
-       width: 10em;
+.clear {
+       clear: both;
 }
 
-.title, .summary {
-       width: 93%;
-}
 
 .authors {
        clear: both;
@@ -193,7 +171,7 @@ label {
        font-size: 90%;
 }
 
-input, textarea
+input, textarea, .gohome
 {
        font: 14px arial;
        color: #000000;
@@ -211,7 +189,7 @@ input:focus, textarea:focus
        border: 1px solid #46d0fe;
 }
 
-input.ng-validation-error {
+.ng-validation-error {
        border: 1px solid #D74F25;
        border: 1px solid #FF6666;
        border: 1px solid #EDC8BC;
@@ -219,20 +197,23 @@ input.ng-validation-error {
        border: 1px solid #EAB3A2;
 }
 
-.warrning {
-       color: #FF6666;
+#work, #submission {
+       margin-bottom: 20px;
 }
 
-.sworks {
-       margin-top: 20px;
+.button input {
+       float: left;
+       color: #ffffff;
+       display: block;
+       text-decoration: none;
+       background: #d74f25;
 }
 
-.save {
-       margin-top: 10px;
+.button input:hover, .gohome:hover {
+       background: #dc6844;
 }
 
-.save input 
-{
+.gohome  {
        float: left;
        color: #ffffff;
        display: block;
@@ -240,11 +221,21 @@ input.ng-validation-error {
        background: #d74f25;
 }
 
-.save input:hover
-{
-       background: #dc6844;
+.gohome a {
+       color: #fff;
+       text-decoration: none;
+}
+
+
+.warrning {
+       color: #FF6666;
 }
 
+.sworks {
+       margin-top: 20px;
+}
+
+
 .newWork {
        clear: left;
        margin-top: 50px;
@@ -252,9 +243,7 @@ input.ng-validation-error {
 .saved {
        color: #D74F25; 
        margin-top: 20px;
-}
-#buttons {
-       margin-top: 20px;
+       margin-bottom: 20px;
 }
 </style>
 
@@ -265,61 +254,54 @@ input.ng-validation-error {
 <div ng:controller="Registration" ng:init="$window.$root = this;">
 
 
-<div id="choose"> <!-- ng:show="! registration.symposium.$id"> -->
-       <h2>Please choose:</h2>
-       <label><input type="radio" name="registration.category" value="participant" ng:required>Just attending the conference</label>
-       <label><input type="radio" name="registration.category" value="submission">I want to submit a work</label>
-</div>
-
-
-<div id="participant" ng:show="registration.category">
+<div id="participant">
        <h2>Contact Information</h2>
        <div class="labelTop">
-               <div class="pname">First name</div>
-               <div class="pname">Surname</div>
+               <div class="input input4">First name</div>
+               <div class="input input4">Surname</div>
        </div>
        <div style="clear: both">
-               <input class="pname" name="registration.person.name" ng:required>
-               <input class="pname" name="registration.person.surname">
+               <input class="input4" name="registration.person.name" ng:required>
+               <input class="input4" name="registration.person.surname" ng:required>
        </div>
        <div class="labelTop">
-               <div class="pinst">Institution</div>
+               <div class="input input5">Institution</div>
        </div>  
        <div style="clear: both">
-               <input class="pinst" name="registration.person.inst">
+               <input class="input5" name="registration.person.inst">
        </div>
        <div class="labelTop">
-               <div class="address">Address</div>
+               <div class="input input5">Address</div>
        </div>  
        <div style="clear: both">
-               <input class="address" name="registration.person.address1">
-               <input class="address" name="registration.person.address2">
+               <input class="input5" name="registration.person.address1" ng:required>
        </div>
        <div class="labelTop">
-               <div class="city">City</div>
-               <div class="city">ZIP</div>
-               <div class="city">Country</div>
+               <div class="input input6">City</div>
+               <div class="input input6">ZIP</div>
+               <div class="input input6">Country</div>
        </div>
        <div style="clear: both">
-               <input class="city" name="registration.person.city">
-               <input class="city" name="registration.person.zip">
-               <input class="city" name="registration.person.country">
+               <input class="input6" name="registration.person.city" ng:required>
+               <input class="input6" name="registration.person.zip">
+               <input class="input6" name="registration.person.country">
        </div>
        <div class="labelTop">
-               <div class="contact">E-mail</div>
-               <div class="contact">Phone number</div>
+               <div class="input input4">E-mail</div>
+               <div class="input input4">Phone number</div>
        </div>
        <div style="clear: both">
-               <input class="contact" name="registration.person.email" ng:validate="email" ng:required>
-               <input class="contact" name="registration.person.phone">
+               <input class="input4" name="registration.person.email" ng:validate="email" ng:required>
+               <input class="input4" name="registration.person.phone">
        </div>
 </div>
 
 
-<div id="submission" ng:show="registration.category == 'submission'">
+<div id="submission">
        <div>
-               <h2>Choose submittion type:</h2>
-               <label><input type="radio" name="registration.type" value="symposium" ng:required>Symposia</label>
+               <h2>Please choose:</h2>
+               <label><input type="radio" name="registration.type" value="participant" ng:required>Just attending or my work was submitted by another person</label>
+               <label><input type="radio" name="registration.type" value="symposium" ng:required>Symposia paper</label>
                <label><input type="radio" name="registration.type" value="lecture" ng:required>Oral presentation</label>
                <label><input type="radio" name="registration.type" value="poster" ng:required>Poster presentation</label>
                <label><input type="radio" name="registration.type" value="round" ng:required>Round table discussion</label>
@@ -329,26 +311,26 @@ input.ng-validation-error {
 
 
 
-<div id="work" ng:show="registration.category == 'submission'">
+<div id="work" ng:show="registration.type != 'participant'">
        <div ng:show="registration.type == 'symposium'">
 
-               <h2>Symposia Submission</h2>
+               <h2>Symposia</h2>
                <label>Topic:</label>
-                       <input class="fl1" name="registration.symposium.title" ng:required>
+                       <input class="input1" name="registration.symposium.title" ng:required>
                <label>Organizer:</label>
                <div>
-                       <div class="fl fl2">First name</div><div class="fl fl2">Surname</div><div class="fl fl3">Institution</div><div class="fl fl2">E-mail</div>
+                       <div class="input input2">First name</div><div class="input input2">Surname</div><div class="input input3">Institution</div><div class="input input2">E-mail</div>
                </div>
-               <div class="flClear" ng:repeat="organizer in registration.symposium.organizers">
-                       <input class="fl2" name="organizer.name" ng:required>
-                       <input class="fl2" name="organizer.surname" ng:required>
-                       <input class="fl3" name="organizer.inst" >
-                       <input class="fl2" name="organizer.email" ng:required>
+               <div class="clear" ng:repeat="organizer in registration.symposium.organizers">
+                       <input class="input2" name="organizer.name" ng:required>
+                       <input class="input2" name="organizer.surname" ng:required>
+                       <input class="input3" name="organizer.inst" >
+                       <input class="input2" name="organizer.email" ng:required ng:validate="email">
                        <a href="" ng:click="registration.symposium.organizers.$remove(organizer)">X</a>
                </div>
                <a class="addPerson" href="" ng:click="registration.symposium.organizers.$add()">Add another organizer</a>
-               <label>Summary:</label>
-                       <textarea class="fl1" name="registration.symposium.abstract" rows="5" ng:validate="max_length:2000"></textarea>
+               <label>Summary (2000 characters max.)</label>
+                       <textarea class="input1" name="registration.symposium.abstract" rows="5" ng:validate="max_length:2000" ng:required></textarea>
                <div ng:show="symposium">
                        <label>List of already submitted works</label>
                        <ol>
@@ -361,7 +343,7 @@ input.ng-validation-error {
        </div>
 
 
-       <h2 ng:show="registration.type == 'symposium'">Work no. {{registration.symposium.work_nr}}.  in <i>{{registration.symposium.title}}</i> </h2>
+       <h2 ng:show="registration.type == 'symposium'">Symposia paper ({{registration.symposium.work_nr}})</h2>
        <h2 ng:show="registration.type == 'lecture'">Oral Presentation Sumbission</h2>
        <h2 ng:show="registration.type == 'poster'">Poster Presentation Sumbission</h2>
        <h2 ng:show="registration.type == 'round'">Round Table Disscussion Sumbission</h2>
@@ -370,29 +352,31 @@ input.ng-validation-error {
   <div ng:show="registration.type">
 
        <label>Title:</label>
-               <input class="fl1" name="registration.work.title" ng:required>
+               <input class="input1" name="registration.work.title" ng:required>
        <label>Authors</label>
        <div>
-               <div class="fl fl2">First name</div><div class="fl fl2">Surname</div><div class="fl fl3">Institution</div><div class="fl fl2">E-mail</div>
+               <div class="input input2">First name</div><div class="input input2">Surname</div><div class="input input3">Institution</div><div class="input input2">E-mail</div>
        </div>
-       <div class="flClear" ng:repeat="author in registration.work.authors">
-               <input class="fl2" name="author.name" ng:required>
-               <input class="fl2" name="author.surname" ng:required>
-               <input class="fl3" name="author.inst" >
-               <input class="fl2" name="author.email" ng:required>
+       <div class="clear" ng:repeat="author in registration.work.authors">
+               <input class="input2" name="author.name" ng:required>
+               <input class="input2" name="author.surname" ng:required>
+               <input class="input3" name="author.inst" >
+               <input class="input2" name="author.email" ng:required ng:validate="email">
                <a href="" ng:click="registration.work.authors.$remove(author)">X</a>
        </div>
        <a class="addPerson" href="" ng:click="registration.work.authors.$add()">Add another author</a>
 
 
-       <label>Summary:</label>
-               <textarea class="fl1" name="registration.work.abstract" rows="5" ng:validate="max_length:2000"></textarea>
+       <label>Abstract (2000 characters max.):</label>
+               <textarea class="input1" name="registration.work.abstract" rows="5" ng:validate="max_length:2000" ng:required></textarea>
 
 
   </div> <!-- ng:show="registration.type" -->
 </div>
 
+<div class="button">
 <input type="submit" value="Save" ng:click="save();" ng:show="! last_saved.$equals(registration) && $invalidWidgets.visible() == 0">
+</div>
 
 <div ng:show="$invalidWidgets.visible() &gt; 0" style="color:red; margin-top: 20px">Please fill all required fields ({{$invalidWidgets.visible()}} fields left).
 </div>
@@ -401,23 +385,27 @@ input.ng-validation-error {
 
 
 <div style="margin-bottom: 40px" ng:show="registration.$id && last_saved.$equals(registration)">
-       <div class="saved" ng:show="registration.category == 'participant'">
+       <div class="saved" ng:show="registration.type == 'participant'">
                Your registration has been submitted successfully.
        </div>
 
-       <div class="saved" ng:show="registration.category == 'submission'" class="saved">
-               <i>{{registration.work.title}}</i> has been submited successfully.<br>
+       <div class="saved" ng:show="registration.type != 'participant'" class="saved">
+               <i>{{registration.work.title}}</i> submitted successfully.
        </div>
-
-       Please review your data, correct and save if needed or <a href="http://psihologija.ffzg.hr/drzb2011/">go to conference home page</a>.
-
+<!--
+       Please review your data, correct and save if needed (just start typing and Save button will show automatically).
+-->
+<!--   
        <div>
-       Registration ID: <a href="#{{registration.$id}}">{{registration.$id}}</a>.<br>You can bookmark this page and review it later.
+       Registration ID: {{registration.$id}}. You can bookmark this page and review it later.
        </div>
+-->
 </div>
 
-
-<input type="reset" value="Another work proposal to submit?" ng:click="reset()" ng:show="registration.$id && registration.category == 'submission' && last_saved.$equals(registration)">
+<div class="button" ng:show="registration.$id && registration.type != 'participant' && last_saved.$equals(registration)">
+       <input type="reset" value="Submit another paper" ng:click="reset()">
+       <div class="gohome"><a href="http://psihologija.ffzg.hr/drzb2011/">Finish and go to the conference home page</a></div>
+</div>
 
 <!--
 <div ng:show="registration.$id">
@@ -425,9 +413,8 @@ Permalink to <a href="#{{registration.$id}}">DRZB2011 registration</a> which you
 </div>
 -->
 
-<hr>
 
-<input type=checkbox name=debug>
+<input type=checkbox name=debug style="float: right; clear: both">
 <pre ng:show="debug">
 
 dirty={{! last_saved.$equals(registration)}} invalid={{$invalidWidgets.visible()}}