]> git.ktnx.net Git - lsl.git/blobdiff - views/index.tt
pop a "Check all" / "Clear all" button when multiple items are checked/cleared in...
[lsl.git] / views / index.tt
index 7b8eb8e0df6b20de433e1a18d0a66e2f81dee877..cacb56f511252e1d51e550793455b33e3632ff4e 100644 (file)
-
-<!--
-    Credit goes to the Ruby on Rails team for this page
-    has been heavily based on the default Rails page that is
-    built with a scaffolded application.
-
-    Thanks a lot to them for their work.
-
-    See Ruby on Rails if you want a kickass framework in Ruby:
-    http://www.rubyonrails.org/
--->
-
-<div id="page">
-      <div id="sidebar">
-        <ul id="sidebar-items">
-          <li>
-            <h3>Join the community</h3>
-            <ul class="links">
-
-              <li><a href="https://perldancer.org/">PerlDancer Website</a></li>
-              <li><a href="https://twitter.com/PerlDancer/">Official Twitter</a></li>
-              <li><a href="https://github.com/PerlDancer/Dancer2/">GitHub Community</a></li>
-              <li><a href="https://lists.perldancer.org/mailman/listinfo/dancer-users">Mailing List</a></li>
-              <li><a href="irc://irc.perl.org/dancer">IRC</a></li>
-            </ul>
-          </li>
-
-          <li>
-            <h3>Browse the documentation</h3>
-
-            <ul class="links">
-              <li><a
-              href="https://metacpan.org/pod/Dancer2::Manual">Introduction</a></li>
-              <li><a href="https://metacpan.org/pod/Dancer2::Cookbook">Cookbook</a></li>
-              <li><a
-              href="https://metacpan.org/pod/Dancer2::Tutorial"
-              title="a tutorial to build a small blog engine with Dancer">Tutorial</a></li>
-              <li><a href="https://metacpan.org/pod/Dancer2::Manual::Deployment">Deployment</a></li>
-            </ul>
-          </li>
-
-          <li>
-            <h3>Your application's environment</h3>
-
-            <ul>
-                <li>Location: <span class="filepath">/btrfs/home/dam/w/lsl/tmp/App::REST::LazyShoppingList</span></li>
-                <li>Template engine: <span class="app-info"><% settings.template %></span></li>
-                <li>Logger: <span class="app-info"><% settings.logger %></span></li>
-                <li>Environment: <span class="app-info"><% settings.environment %></span></li>
-            </ul>
-
-          </li>
-        </ul>
-
+<div id="splash">
+  <p>Loading…</p>
+</div>
+<div id="page" class="loading-lists" lsl-uri-base="<% request.uri_base %>" lsl-environment="<% settings.environment %>" >
+  <div id="content">
+    <div id="header">
+      <div id="head-list-name" class="needs-lists">
+        <span id="selected-list-name"></span>
+        <span id="list-edit-trigger">
+          <span class="ui-icon ui-icon-pencil"></span>
+        </span>
       </div>
-
-      <div id="content">
-        <div id="header">
-          <h1>Perl is dancing</h1>
-          <h2>You&rsquo;ve joined the dance floor!</h2>
+      <div class="have-no-lists">
+        <div class="table-2-col">
+          <h1>First create a shopping list</h1><div class="arrow">→</div>
         </div>
+      </div>
+    </div>
 
-        <div id="getting-started">
-          <h1>Getting started</h1>
-          <h2>Here&rsquo;s how to get dancing:</h2>
-
-          <h3><a href="#" id="about_env_link">About your application's environment</a></h3>
-
-          <div id="about-content" style="display: none;">
-            <table>
-                <tbody>
-                <tr>
-                    <td>Perl version</td>
-                    <td><span class="app-info"><% perl_version %></span></td>
-                </tr>
-                <tr>
-                    <td>Dancer2 version</td>
-                    <td><span class="app-info"><% dancer_version %></span></td>
-                </tr>
-                <tr>
-                    <td>Backend</td>
-                    <td><span class="app-info"><% settings.apphandler %></span></td>
-                </tr>
-                <tr>
-                    <td>Appdir</td>
-                    <td><span class="filepath">/btrfs/home/dam/w/lsl/tmp/App::REST::LazyShoppingList</span></td>
-                </tr>
-                <tr>
-                    <td>Template engine</td>
-                    <td><span class="app-info"><% settings.template %></span></td>
-                </tr>
-                <tr>
-                    <td>Logger engine</td>
-                    <td><span class="app-info"><% settings.logger %></span></td>
-                </tr>
-                <tr>
-                    <td>Running environment</td>
-                    <td><span class="app-info"><% settings.environment %></span></td>
-                </tr>
-                </tbody>
-            </table>
-          </div>
-
-    <script type="text/javascript">
-    $('#about_env_link').click(function() {
-        $('#about-content').slideToggle('fast', function() {
-            // ok
-        });
-        return false;
-    });
-    </script>
-
-
-          <ol>
-            <li>
-              <h2>Tune your application</h2>
-
-              <p>
-              Your application is configured via a global configuration file,
-              <span class="filepath">config.yml</span> and an "environment" configuration file,
-              <span class="filepath">environments/development.yml</span>. Edit those files if you
-              want to change the settings of your application.
-              </p>
-            </li>
-
-            <li>
-              <h2>Add your own routes</h2>
-
-              <p>
-              The default route that displays this page can be removed,
-              it's just here to help you get started. The template used to
-              generate this content is located in
-              <span class="filepath">views/index.tt</span>.
-              You can add some routes to <span class="filepath">lib/App/REST/LazyShoppingList.pm lib/App/REST/LazyShoppingList.pm</span>.
-              </p>
-            </li>
+    <div id="list-contents" class="needs-lists">
+      <ul id="list-items" class="have-list-items">
+      </ul>
+      <div id="list-is-empty">
+        The list has no items
+      </div>
+      <div id="new-list-item" class="input-with-button">
+        <input type="text" size="10" axlength="80" name="new_list_item" />
+        <button id="add-list-item" class="ui-icon-plusthick">Add</button>
+      </div>
+    </div>
+    <div id="item-multi-action">
+      <button id="btn-check-all">Check all</button>
+      <button id="btn-clear-all">Clear all</button>
+    </div>
+  </div>
 
-            <li>
-              <h2>Enjoy web development again</h2>
+  <div id="sidebar">
+    <ul id="sidebar-items">
+      <li id="lists-sidebar-item">
+        <h3>Shopping lists</h3>
+        <ul id="lists">
+        </ul>
+      </li>
 
-              <p>
-              Once you've made your changes, restart your standalone server
-              <span class="filepath">(bin/app.psgi)</span> and you're ready
-              to test your web application.
-              </p>
-            </li>
+      <li id="no-lists-sidebar-item" class="have-no-lists">
+        <h3>No shopping lists</h3>
+      </li>
 
-          </ol>
+      <li id="new-list-sidebar-item">
+        <h5>New shopping list</h5>
+        <div class="input-with-button">
+          <input name="list_name" size="10" maxlength="60" />
+          <button class="ui-icon-plusthick"></button>
         </div>
-      </div>
-    </div>
+      </li>
+    </ul>
+  </div>
+</div>
+
+<!-- vim: set ft=html sw=2 :-->