beta test

agenda.json → agendaTest.json

@@ -10,14 +10,14 @@
         "name": "Elena",
         "lastname": "Aralla",
         "title": "SW dev",
-        "curriculum": "text",
+        "curriculum": "curriculum di elena",
         "image": "url"
       },
       {
         "name": "Elena2",
         "lastname": "Aralla",
         "title": "SW dev",
-        "curriculum": "text",
+        "curriculum": "curriculum di elena2",
         "image": "url"
       }
     ]
@@ -32,14 +32,14 @@
         "name": "Elena",
         "lastname": "Aralla",
         "title": "SW dev",
-        "curriculum": "text",
+        "curriculum": "curriculum di elena",
         "image": "url"
       },
       {
         "name": "Elena2",
         "lastname": "Aralla",
         "title": "SW dev",
-        "curriculum": "text",
+        "curriculum": "curriculum di elena2",
         "image": "url"
       }
     ]

css/index.css

@@ -1,11 +1,86 @@
 .dayInAgenda
 {
-	width: 8.5rem;
     float: left;
 }
 
+.agendaTitle
+{
+	white-space: pre-wrap;
+}
+
+.shortDesc
+{
+	white-space: normal;
+	font-size: small;
+	font-weight: normal;
+	font-style: italic;
+}
+
+.agendaTitle span
+{
+	font-weight: normal;
+}
+
 .left
 {
 	text-align: left;
-	margin-left: 0.2rem;
+	padding-left: 0.2rem;
+}
+
+.agendaDetail
+{
+	padding-right:2rem;
+}
+
+.icon
+{
+	float:right;
+	padding-right:0.5rem;
+}
+
+.highlight
+{
+	background-color: #ffcc00;
+	box-shadow: 5px 5px 5px #a7a7a7;
 }
+
+#header
+{
+ 	background-image: url(../img/AOFBanner70px.png);
+    background-repeat: no-repeat;
+    background-color: black;
+    background-position-y: -5px;	
+}
+
+#h1
+{
+	color: #ffcc00;
+    font-weight: normal;
+    font-size: 24px;
+    padding-top: 24px;
+    padding-bottom: 0px;
+    font-family: Roboto, Helvetica, Arial, sans-serif;	
+}
+
+#h3
+{
+	background-image: url(../img/achab-footer-logo.svg);
+    background-repeat: no-repeat;
+    background-position-y: 0.5rem;
+    background-position-x: 50%;
+}
+
+#speakerContent
+{
+	/*padding-left: 1.5rem;*/
+}
+
+.eventTitle
+{
+	font-weight: bold;
+}
+
+#eventContent
+{
+	/*padding-left: 1.5rem;*/
+}

css/jquery.mobile.theme.css

@@ -145,7 +145,7 @@ label.ui-btn {
 .ui-btn-icon-top:after,
 .ui-btn-icon-bottom:after,
 .ui-btn-icon-notext:after {
-	background-color: 					#666 /*{global-icon-color}*/;
+	background-color: 					##207ab9 /*{global-icon-color}*/;
 	background-color: 					rgba(0,0,0,.3) /*{global-icon-disc}*/;
 	background-position: center center;
 	background-repeat: no-repeat;
@@ -159,7 +159,7 @@ html .ui-alt-icon.ui-checkbox-off:after,
 html .ui-alt-icon.ui-radio-off:after,
 html .ui-alt-icon .ui-checkbox-off:after,
 html .ui-alt-icon .ui-radio-off:after {
-	background-color: 					#666 /*{global-icon-color}*/;
+	background-color: 					#207ab9 /*{global-icon-color}*/;
 	background-color: 					rgba(0,0,0,.15) /*{global-icon-disc}*/;
 }
 /* No disc */
@@ -224,7 +224,7 @@ html .ui-alt-icon .ui-radio-off:after {
 html .ui-bar-a .ui-bar-inherit,
 html .ui-body-a .ui-bar-inherit,
 html body .ui-group-theme-a .ui-bar-inherit {
-	background-color: 			#e9e9e9 /*{a-bar-background-color}*/;
+	background-color: 			#2e3c49 /*{a-bar-background-color}*/;
 	border-color:	 		#ddd /*{a-bar-border}*/;
 	color: 					#333 /*{a-bar-color}*/;
 	text-shadow: 0 /*{a-bar-shadow-x}*/ 1px /*{a-bar-shadow-y}*/ 0 /*{a-bar-shadow-radius}*/ 	#eee /*{a-bar-shadow-color}*/;
@@ -348,7 +348,7 @@ html .ui-bar-a .ui-slider-track .ui-btn-active,
 html .ui-body-a .ui-slider-track .ui-btn-active,
 html body .ui-group-theme-a .ui-slider-track .ui-btn-active,
 html body div.ui-slider-track.ui-body-a .ui-btn-active {
-	background-color: 		#3388cc /*{a-active-background-color}*/;
+	background-color: 		#3296dc /*{a-active-background-color}*/;
 	border-color:	 		#3388cc /*{a-active-border}*/;
 	color: 					#fff /*{a-active-color}*/;
 	text-shadow: 0 /*{a-active-shadow-x}*/ 1px /*{a-active-shadow-y}*/ 0 /*{a-active-shadow-radius}*/ #005599 /*{a-active-shadow-color}*/;

index.html

@@ -30,50 +30,88 @@
     <script id="titleListTemplate" type="text/template">
         {{#titlesGroup}}
         <li data-corners="false" data-shadow="false" data-wrapperels="div" data-theme="c" class="titleInAgenda" id="title-{{startDate | titleId}}">
-            <div class="agendaTitle" id="{{startDate}}{{endDate}}">{{startDate | time}} - {{endDate | time}} {{title}}</div>
-            <div class="agendaDetail" id="details-{{startDate}}{{endDate}}">
+            <div class="agendaTitle" id="{{startDate}}-{{endDate}}">{{startDate | time}} - {{endDate | time}}<br><span>{{title}}</span></div>
+            <div class="agendaDetail" id="details-{{startDate}}-{{endDate}}">
+                <a id="link-{{startDate}}-{{endDate}}" class="itemDescription icon ui-btn-icon-right ui-icon-carat-r"></a>
+                <div id="shortDesc-{{startDate}}-{{endDate}}" class="shortDesc">{{description | lpad | leftN}}</div>
+                {{#speakers}}
                 <p>
-                    <em>
-                        {{#speakers}}
-                        <a href="#">{{name}} {{lastname}}</a>, {{title}} <br>
-                        {{/speakers}}  
-                    </em>
+                    <a id="{{name | lowercase}}-{{lastname | lowercase}}" class="speaker">{{name}} {{lastname}}</a>,
+                    <em id="speakerTitle">{{title}}</em>
                 </p>
-                <div>
-                    {{description}}
-                <div>                          
-            </div>            
+                {{/speakers}}
+            </div> 
         </li>      
         {{/titlesGroup}}  
     </script>
+    <!-- template for event details -->
+    <script id="eventTemplate" type="text/template">
+        <div class="eventTitle">{{title}}</div>
+        <div class="eventDescription">
+            {{{description}}}                  
+        </div>    
+    </script>    
+    <!-- template for speaker details -->
+    <script id="speakerTemplate" type="text/template">
+        <img src="{{image}}">
+        <div class="speakerTitle"><strong>{{name}} {{lastname}}</strong><br><em>{{title}}</em></div>
+        <div class="speakerCurriculum">
+            <br>{{{curriculum}}}                      
+        </div>  
+    </script>  
     <body>
         <div class="app">
-            <div data-role="page">
-                <header data-role="header">
-                    <h1>AOF15 - Agenda</h1>
+            <div data-role="page" id="home">
+                <header data-role="header" id="header">
+                    <h1 id="h1">Agenda</h1>
                 </header>
-
                 <div data-role="content">
                     <nav data-role="navbar">
                         <ul class="daysInAgenda">
                             <li class="emptyLi"></li> <!-- non eliminare altrimenti si ha un errore js (https://github.com/jquery/jquery-mobile/issues/5141) -->
                         </ul>
                     </nav>
-                    <br>
                     <ul data-role="listview" class="itemsInAgenda ui-listview">
                         <li class="emptyLi"></li><!-- non eliminare altrimenti si ha un errore js (https://github.com/jquery/jquery-mobile/issues/5141) -->
                     </ul>  
                 </div>
                 <br>                  
-                <footer data-role="footer">
-                    <h3>Copyright &copy; 2015</h3>
+                <footer data-role="footer" data-position="fixed">
+                    <h3 id="h3"></h3>
                 </footer>
             </div>
+            <div data-role="page" id="selectedEventPage">
+                <header data-role="header" id="header">
+                    <h1 id="h1">Agenda</h1>
+                </header>
+                <div data-role="content">
+                    <a href="#home" data-role="button" data-icon="arrow-l" data-iconpos="notext">Back</a>
+                    <div  id="eventContent"></div>
+                </div>
+                <br>                  
+                <footer data-role="footer" data-position="fixed">
+                    <h3 id="h3"></h3>
+                </footer>
+            </div>        
+            <div data-role="page" id="selectedSpeakerPage">
+                <header data-role="header" id="header">
+                    <h1 id="h1">Agenda</h1>
+                </header>
+                <div data-role="content">
+                    <a href="#home" data-role="button" data-icon="arrow-l" data-iconpos="notext">Back</a>
+                    <div  id="speakerContent"></div>
+                </div>
+                <br>                  
+                <footer data-role="footer" data-position="fixed">
+                    <h3 id="h3"></h3>
+                </footer>
+            </div> 
         </div>
         <script type="text/javascript" src="cordova.js"></script>
         <script type="text/javascript" src="js/jquery.js"></script>
         <script type="text/javascript" src="js/jquery.mobile.js"></script>
         <script type="text/javascript" src="js/index.js"></script>
         <script type="text/javascript" src="js/moment.min.js"></script>
+        <script type="text/javascript" src="js/moment-timezone.js"></script>
     </body>
 </html>