liquid_feedback_frontend

view app/main/_layout/default.html @ 1045:701a5cf6b067

Imported LiquidFeedback Frontend 3.0 branch
author bsw
date Thu Jul 10 01:19:48 2014 +0200 (2014-07-10)
parents b865f87ea810
children 58d703bb06e4
line source
1 <html>
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
4 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
5 <title><!-- WEBMCP SLOTNODIV html_title --></title>
6 <link rel="stylesheet" type="text/css" media="screen" href="__BASEURL__/static/gregor.js/gregor.css" />
7 <link rel="stylesheet" type="text/less" href="__BASEURL__/static/lf3.less" />
8 <!-- WEBMCP SLOTNODIV html_head -->
9 <script type="text/javascript" src="__BASEURL__/static/js/less-1.4.1.min.js"></script>
10 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
11 <script type="text/javascript">jsFail = true;</script>
12 <![if !IE]>
13 <script type="text/javascript">jsFail = false;</script>
14 <![endif]>
15 <script type="text/javascript" src="__BASEURL__/static/js/jsprotect.js"></script>
16 <script type="text/javascript" src="__BASEURL__/static/js/partialload.js"></script>
17 <script type="text/javascript">var ui_tabs_active = {};</script>
18 </head>
19 <body style="">
20 <div class="head_outer">
21 <div class="head">
22 <div class="nav">
23 <!--WEBMCP SLOTNODIV navigation -->
24 <!--WEBMCP SLOTNODIV navigation_right -->
25 <!--WEBMCP SLOTNODIV notification -->
26 </div>
28 <a class="logo" href="__BASEURL__/">
29 <span class="liquid">Liquid</span><span class="feedback">Feedback</span>
30 <span class="instanceName"><!-- WEBMCP SLOTNODIV instance_name --></span>
31 </a>
34 </div>
35 </div>
37 <div class="page">
38 <div class="layout_notice" id="layout_notice" onclick="document.getElementById('layout_notice').style.display='none';">
39 <!-- WEBMCP SLOT notice -->
40 </div>
42 <div class="layout_warning" id="layout_warning" onclick="document.getElementById('layout_warning').style.display='none';">
43 <!-- WEBMCP SLOT warning -->
44 </div>
46 <div class="layout_error" id="layout_error" onclick="document.getElementById('layout_error').style.display='none';">
47 <!-- WEBMCP SLOT error -->
48 </div>
50 <div class="layout_motd" id="layout_motd" onclick="document.getElementById('layout_motd').style.display='none';">
51 <!-- WEBMCP SLOT motd -->
52 </div>
54 <div class="title_outer">
55 <!-- WEBMCP SLOT title -->
56 </div>
58 <!-- WEBMCP SLOT tabs -->
60 <!-- WEBMCP SLOTNODIV actions -->
62 <div id="swiper_tabs" class="swiper_tabs" style="display: none;">
63 <!-- <div><a id="tab-0" href="#" onclick="slider.to(0); return false;"><img src="__BASEURL__/static/icons/16/chart_organisation.png" /></a></div>-->
64 <div><a id="tab-0" href="#" onclick="slider.to(0); return false;"><img src="__BASEURL__/static/icons/16/text_list_bullets.png" width="32" height="32" /></a></div>
65 <div><a id="tab-1" href="#" onclick="slider.to(1); return false;"><img src="__BASEURL__/static/icons/48/info.png" width="32" height="32" /></a></div>
66 <div><a id="tab-2" href="#" onclick="slider.to(2); return false;"><img src="__BASEURL__/static/icons/16/group.png" width="32" height="32" /></a></div>
67 </div>
69 <div id="swiper_info"><!-- WEBMCP SLOTNODIV swiper_info --></div>
70 <div id="swiper" class="swiper" style="position: absolute; width: 100%;">
71 <div id="swiper_wrap" class="swiper_wrap">
72 </div>
73 </div>
75 <div class="content">
76 <div class="sidebar">
77 <!-- WEBMCP SLOTNODIV sidebar -->
78 </div>
80 <div class="main_outer">
81 <!-- WEBMCP SLOTNODIV slideshow -->
82 <div class="main">
83 <!-- WEBMCP SLOTNODIV default -->
84 <!-- WEBMCP SLOTNODIV extra -->
85 </div>
86 </div>
87 </div>
88 <br style="clear: both;" />
89 <div class="footer">
90 <!-- WEBMCP SLOTNODIV footer -->
91 </div>
92 </div>
94 <div id="trace">
95 <!-- WEBMCP SLOTNODIV trace_button -->
96 <div id="trace_content" style="display: none;">
97 <tt id="system_error"><!-- WEBMCP SLOT system_error --></tt>
98 <h1>System trace (for computer programmers purposes)</h1>
99 <br />
100 <!-- WEBMCP SLOT trace -->
101 <div class="trace_close" onclick="document.getElementById('trace_show').style.display='block';document.getElementById('trace_content').style.display='none';">
102 close
103 </div>
104 </div>
105 </div>
106 <script>
107 $(".trace_view > .trace_list").hide();
108 $(".trace_head").click(function() {
109 var el = this.nextSibling
110 if (el) $(el).toggle();
111 });
112 </script>
114 <!-- WEBMCP SLOTNODIV script -->
116 <script>
118 var slider;
120 function initSlider () {
122 var els = [
123 $( '.main, .extra' ),
124 $( '.tab-notification, .tab-whatcanido' ),
125 $( '.tab-members' )
126 ];
128 var sidebarFound = false;
129 for ( i = 1; i < els.length; i++) {
130 if (els[i].length > 0) sidebarFound = true;
131 }
133 if (sidebarFound) $("#swiper_tabs").show();
135 var elsCount = 3;
137 var slidePos;
139 function slideTo ( pos ) {
140 if ( typeof ( slidePos ) != "undefined" ) {
141 els[ slidePos ].hide();
142 $ ( "#tab-" + slidePos ).removeClass ( "active" );
143 }
144 slidePos = pos;
145 els[ slidePos ].show();
146 $ ( "#tab-" + slidePos ).addClass ( "active" );
147 if (pos == 1) {
148 $("#swiper_info").hide();
149 }
150 }
152 function slideNext () {
153 var pos = slidePos + 1;
154 if ( pos > elsCount - 1 ) {
155 pos = elsCount - 1;
156 } else {
157 $( "#swiper").css("left", "400px");
158 $( "#swiper").animate({ "left": "0px" }, 200);
159 }
160 slideTo ( pos );
161 }
163 function slidePrev () {
164 var pos = slidePos - 1;
165 if ( pos < 0 ) {
166 pos = 0;
167 } else {
168 $( "#swiper").css("left", "-400px");
169 $( "#swiper").animate({ "left": "0px" }, 200);
170 }
171 slideTo ( pos );
172 }
174 function exit() {
175 for ( i = 0; i < els.length; i++) {
176 els[i].show();
177 }
178 $( ".main_outer" ).append ( $( ".main" ).detach() );
179 $( ".extra_outer" ).append ( $( ".extra" ).detach() );
180 $( ".sidebar" ).append ( $(els[1]).detach() );
181 $( ".sidebar" ).append ( $(els[2]).detach() );
182 $( ".page" ).append ( $('.footer') );
183 $( "body" ).append ( $('#trace') );
185 }
187 var touchStartX;
188 var touchStartY;
189 var isScrolling;
191 function touchDown ( e ) {
192 touchStartX = e.originalEvent.touches[0].pageX;
193 touchStartY = e.originalEvent.touches[0].pageY;
194 isScrolling = undefined;
195 }
197 function touchMove ( e ) {
198 var diffX = touchStartX - e.originalEvent.changedTouches[0].pageX;
199 var diffY = touchStartY - e.originalEvent.changedTouches[0].pageY;
200 if ( typeof( isScrolling ) == 'undefined' ) {
201 isScrolling = Math.abs ( diffY ) > Math.abs ( diffX );
202 }
203 if ( ! isScrolling ) {
204 $( "#swiper").css("left", -diffX + "px");
205 e.preventDefault();
206 }
207 }
209 function touchUp ( e ) {
210 var diffX = touchStartX - e.originalEvent.changedTouches[0].pageX;
211 var diffY = touchStartY - e.originalEvent.changedTouches[0].pageY;
213 if ( isScrolling ) {
214 // vertical scrolling
215 return;
216 }
218 if ( Math.abs ( diffX ) < 100 ) {
219 // go back not enough
220 $( "#swiper").animate({
221 "left": "0px",
222 }, 200);
223 return;
224 }
225 var direction = diffX < 0 ? "right" : "left";
227 if ( direction == "left" ) {
228 slideNext();
229 } else {
230 slidePrev();
231 }
232 }
234 for ( i = 0; i < els.length; i++) {
235 var el = els[i].detach();
236 el.hide();
237 $('#swiper_wrap').append ( el ) ;
238 }
240 $('#swiper_wrap').append ( $('.footer') );
241 $('#swiper_wrap').append ( $('#trace') );
242 slideTo ( 0 );
244 if ( 'ontouchstart' in document.documentElement ) {
245 $( "body" ).on( "touchstart", touchDown );
246 $( "body" ).on( "touchmove", touchMove );
247 $( "body" ).on( "touchend", touchUp );
248 }
250 return {
251 to: slideTo,
252 exit: exit
253 }
255 }
257 function resizeHandler() {
258 if ( $(window).width() < 768 ) {
259 if ( typeof ( slider ) == "undefined" ) {
260 slider = initSlider();
261 }
262 } else {
263 if ( typeof ( slider ) != "undefined" ) {
264 slider.exit();
265 slider = undefined;
266 }
267 }
269 }
271 $( window ).resize( resizeHandler );
272 resizeHandler();
274 </script>
276 </body>
277 </html>

Impressum / About Us