From 28eb34878f42131f5ac40cca937ea8ae10dfec05 Mon Sep 17 00:00:00 2001
From: Marijana Glavica <mglavica@ffzg.hr>
Date: Mon, 8 Nov 2010 11:56:36 +0100
Subject: [PATCH] design

---
 templates/conference/Registration.html.ep | 251 ++++++++++++++--------
 1 file changed, 164 insertions(+), 87 deletions(-)

diff --git a/templates/conference/Registration.html.ep b/templates/conference/Registration.html.ep
index 041b144..cbac84f 100644
--- a/templates/conference/Registration.html.ep
+++ b/templates/conference/Registration.html.ep
@@ -121,27 +121,58 @@ a {
 	font-size: 80%;
 }
 
-.symposium, .work {
-	width: 615px;
-}
-
 label {
 	color: #374E5A;
 }
 
-.authors-label .name, .authors-label .surname, .authors-label .inst, .authors-label .email {
+.fl {
+	color: #afafaf;
+	float: left;
+	margin: 2px;
+	padding: 0 6px;
+}
+
+.fl1 {
+	width: 40.8em;
+}
+
+.fl2 {
+	width: 8em;
+}
+
+.fl3 {
+	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;
 }
 
-.name, .surname, .email {
-	width: 18%;
+.pname, .name, .surname, .email {
+	width: 10em;
+}
+
+.pinst {
+	width: 21.4em;
+}
+
+.address {
+	width: 14.1em;
 }
 
-.inst {
-	width: 30%;
+.city {
+	width: 9em;
+}
+
+.contact {
+	width: 10em;
 }
 
 .title, .summary {
@@ -153,9 +184,6 @@ label {
 	margin-bottom: 6px;
 }
 
-.authors-label {
-	clear: right;
-}
 
 
 
@@ -218,6 +246,13 @@ input.ng-validation-error {
 	clear: left;
 	margin-top: 50px;
 }
+.saved {
+	color: #D74F25; 
+	margin-top: 20px;
+}
+#buttons {
+	margin-top: 20px;
+}
 </style>
 
 
@@ -226,99 +261,141 @@ input.ng-validation-error {
 
 <div ng:controller="Registration" ng:init="$window.$root = this;">
 
-<div id="registration">
-
-<input class="name" name="registration.person.name" ng:required>
-<input class="name" name="registration.person.surname" ng:required>
-
-<input name="registration.person.inst">
-<input name="registration.person.email" ng:validate="email">
-
+<div id="choose" ng:show="! registration.category && ! registration.symposium.$id">
+	<h2>Please choose:</h2>
+	<input type="radio" name="registration.category" value="participant">Just attending the conference<br/>
+	<input type="radio" name="registration.category" value="submission">I want to submit a work<br/>
 </div>
 
-<div id="submission">
-
-<h2>Type of conference submission:</h2>
-
-<input type="radio" name="registration.type" value="">Just attending conference<br/>
-<input type="radio" name="registration.type" value="symposium">Symposia<br/>
-<input type="radio" name="registration.type" value="lecture">Oral presentation<br/>
-<input type="radio" name="registration.type" value="poster">Poster presentation<br/>
-<input type="radio" name="registration.type" value="round">Round table discussion<br/>
-
-<div id="submit_work" ng:show="registration.type">
-
-<div ng:show="registration.type == 'symposium'" style="background:#f0f0f0">
-
-<label>Topic of symposium: <input name="registration.symposium.title" size="60" ng:required></label><br/>
-   
-<label>Summary: <br/>
-<textarea name="registration.symposium.abstract" cols="50" rows="5"></textarea>
-</label>
-<br/>
-
-Organizer:
-<div ng:repeat="organizer in registration.symposium.organizers">
-[<a href="" ng:click="registration.symposium.organizers.$remove(author)">X</a>]
-<input name="organizer.name" ng:required>
-<input name="organizer.surname" ng:required>
-<input name="organizer.inst" >
-<input name="organizer.email" ng:required>
+<div id="submission" ng:show="registration.category == 'submission'">
+	<div ng:show="! registration.symposium.$id">
+		<h2>Choose submittion type:</h2>
+		<input type="radio" name="registration.type" value="symposium" ng:required>Symposia<br/>
+		<input type="radio" name="registration.type" value="lecture" ng:required>Oral presentation<br/>
+		<input type="radio" name="registration.type" value="poster" ng:required>Poster presentation<br/>
+		<input type="radio" name="registration.type" value="round" ng:required>Round table discussion<br/>
+	</div>
 </div>
-[<a href="" ng:click="registration.symposium.organizers.$add()">Add another organizer</a>]
-
+<div id="participant" ng:show="registration.category">
+	<h2>Participant Registration</h2>
+	<div class="labelTop">
+		<div class="pname">First name</div>
+		<div class="pname">Surname</div>
+	</div>
+	<div style="clear: both">
+		<input class="pname" name="registration.person.name" ng:required>
+		<input class="pname" name="registration.person.surname">
+	</div>
+	<div class="labelTop">
+		<div class="pinst">Institution</div>
+	</div>  
+	<div style="clear: both">
+		<input class="pinst" name="registration.person.inst">
+	</div>
+	<div class="labelTop">
+		<div class="address">Address</div>
+	</div>  
+	<div style="clear: both">
+		<input class="address" name="registration.person.address1">
+		<input class="address" name="registration.person.address2">
+	</div>
+	<div class="labelTop">
+		<div class="city">City</div>
+		<div class="city">ZIP</div>
+		<div class="city">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">
+	</div>
+	<div class="labelTop">
+		<div class="contact">E-mail</div>
+		<div class="contact">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">
+	</div>
 </div>
-<hr>
 
-<div ng:show="symposium">
-Works which are part of this symposium:
-<ol>
-<li ng:repeat="w in symposium.works">
-<a ng:show="registration.$id != w.$id" href="#{{w.$id}}" >{{w.title}}</a>
-<b ng:show="registration.$id == w.$id">{{w.title}}</b>
-</li>
-</ol>
 
-</div>
-
-<h2>Autors<span ng:show="registration.type == 'symposium'"> of {{registration.symposium.work_nr}}. work </span></h2>
 
-<div ng:repeat="author in registration.work.authors">
-[<a href="" ng:click="registration.work.authors.$remove(author)">X</a>]
-<input name="author.name" ng:required>
-<input name="author.surname" ng:required>
-<input name="author.inst" >
-<input name="author.email" ng:required>
+<div id="work" ng:show="registration.type">
+	<div ng:show="registration.type == 'symposium'">
+
+		<h2>Symposia Submission</h2>
+		<label>Topic:</label>
+			<input class="fl1" 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>
+		<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>
+			<a href="" ng:click="registration.symposium.organizers.$remove(organizer)">X</a>
+		</div>
+		<a href="" ng:click="registration.symposium.organizers.$add()">Add another organizer</a>
+		<label>Summary:</label>
+			<textarea class="fl1" name="registration.symposium.abstract" rows="5" ></textarea>
+		<div ng:show="symposium">
+			<label>List of already submitted works</label>
+			<ol>
+			<li ng:repeat="w in symposium.works">
+			<a ng:show="registration.$id != w.$id" href="#{{w.$id}}" >{{w.title}}</a>
+			<b ng:show="registration.$id == w.$id">{{w.title}}</b>
+			</li>
+			</ol>
+		</div>
+	</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 == '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>
+
+	<label>Title:</label>
+		<input class="fl1" 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>
+	<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>
+		[<a href="" ng:click="registration.work.authors.$remove(author)">X</a>]
+	</div>
+	[<a href="" ng:click="registration.work.authors.$add()">Add another author</a>]
+
+
+	<label>Summary:</label>
+		<textarea class="fl1" name="registration.work.abstract" rows="5"></textarea>
 </div>
-[<a href="" ng:click="registration.work.authors.$add()">Add another author</a>]
-
-<hr>    
-
-<label>Title: <input name="registration.work.title" size="60" ng:required></label><br/>
-
-<label>Summary:<br>
-<textarea name="registration.work.abstract" cols="50" rows="5"></textarea>
-</label>
-<br/>
 
+<div ng:show="registration.$id" class="saved">
+Registration has been sumbited. Your registration ID is {{registration.$id}}.
 </div>
 
-<div id="buttons">
-
-<span ng:show="$invalidWidgets.visible() == 0">
-<input type="submit" value="Save" ng:click="save();" ng:show="! last_saved.$equals(registration)">
-<input type="reset" value="Add another work" ng:click="reset()" ng:show="registration && registration.$id">
-</span>
+<div id="buttons" ng:show="registration.category || registration.symposium.$id">
+	<span ng:show="$invalidWidgets.visible() == 0">
+	<input type="submit" value="Save" ng:click="save();" ng:show="! last_saved.$equals(registration)">
+	<input type="reset" value="Add another work" ng:click="reset()" ng:show="registration.work && registration.work.$id">
+	</span>
 
-<b ng:show="$invalidWidgets.visible() &gt; 0" style="color:#800">{{$invalidWidgets.visible()}} errors to fix in submission form</b>
+	<div ng:show="$invalidWidgets.visible() &gt; 0" style="color:red; margin-top: 20px">Please fill all required fields ({{$invalidWidgets.visible()}} fields left).</div>
 </div>
 
 
+
+<!--
 <div ng:show="registration.$id">
 Permalink to <a href="#{{registration.$id}}">DRZB2011 registration</a> which you can bookmark
 </div>
-
-</div><!-- registration.type == just attending -->
+-->
 
 <hr>
 Debug Information:
-- 
2.20.1