restructure

1 files changed, 41 insertions, 0 deletions

diff --git a/templates/apps/room/widget.html b/templates/apps/room/widget.html
new file mode 100644
index 0000000..a658a17
--- /dev/null
+++ b/templates/apps/room/widget.html
@@ -0,0 +1,41 @@
+{% extends "base.html" %}
+{% block content %}
+<div class="page-header">
+    <h1>{{title}}</h1>
+</div>
+
+<div class="alert">
+		<i class="icon-info-sign"></i>
+		The meetingtools jquery widget allows you to easily embed lists of meetings in your own
+		web page using the popular <a href="http://jquery.com">jQuery javascript library</a>.
+</div>
+
+<p>Copy the sample html below in order to list rooms tagged with <em>{{tags}}</em>.</p>
+
+<pre class="pre-scrollable prettyprint linenums language-xml">
+&lt;html&gt;
+   &lt;head&gt;
+      &lt;script type="text/javascript"
+                 src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
+      &lt;script type="text/javascript"
+                 src="{% baseurl %}/site-media/js/jquery.meetingtools.js"&gt;&lt;/script&gt;
+      &lt;link href="{% baseurl %}/site-media/css/jquery.meetingtools.css"
+               rel="stylesheet" type="text/css" /&gt;
+      &lt;script type="text/javascript"&gt;
+         $(function() {
+            $("#meetings").meetingtools({tags: '{{tags}}',url: '{% baseurl %}'});
+         });
+      &lt;/script&gt;
+   &lt;/head&gt;
+   &lt;body&gt;
+      &lt;h1&gt;Meetings...&lt;/h1&gt;
+      &lt;div id="meetings"&gt;&lt;img src="{% baseurl %}/site-media/img/ajax-loader.gif"/&gt;&lt;/div&gt;
+   &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>
+	Change the tags option in the call to 'meetingtools' in order to list other rooms. Override 
+	the CSS elements in jquery.meetingtools.css in order to apply your own skin to the generated html. 
+</p>
+{% endblock %}
\ No newline at end of file