margin-bottom: 25px;
padding: 0;
background-color: #ddd;
-background-image: url("/images/perldancer-bg.jpg");
-background-repeat: no-repeat;
-background-position: top left;
-
-font-family: "Lucida Grande", "Bitstream Vera Sans", "Verdana";
-font-size: 13px;
+font-family: "Bitstream Vera Sans", sans-serif;
+font-size: 12pt;
color: #333;
}
+input {
+ font-size: 12pt;
+}
+
h1 {
-font-size: 28px;
+font-size: 200%;
color: #000;
}
width: 175px;
}
-#header, #about, #getting-started {
+#about, #getting-started {
padding-left: 75px;
padding-right: 30px;
}
-#header {
-background-image: url("/images/perldancer.jpg");
-background-repeat: no-repeat;
-background-position: top left;
-height: 64px;
-}
#header h1, #header h2 {margin: 0}
+#header { font-weight: bold; }
#header h2 {
color: #888;
font-weight: normal;
-font-size: 16px;
+font-size: 133%;
}
#about h3 {
margin: 0;
margin-bottom: 10px;
-font-size: 14px;
-}
-
-#about-content {
-background-color: #ffd;
-border: 1px solid #fc0;
-margin-left: -11px;
-}
-#about-content table {
-margin-top: 10px;
-margin-bottom: 10px;
-font-size: 11px;
-border-collapse: collapse;
-}
-#about-content td {
-padding: 10px;
-padding-top: 3px;
-padding-bottom: 3px;
-}
-#about-content td.name {color: #555}
-#about-content td.value {color: #000}
-
-#about-content.failure {
-background-color: #fcc;
-border: 1px solid #f00;
-}
-#about-content.failure p {
-margin: 0;
-padding: 10px;
-}
-
-#getting-started {
-border-top: 1px solid #ccc;
-margin-top: 25px;
-padding-top: 15px;
-}
-#getting-started h1 {
-margin: 0;
-font-size: 20px;
-}
-#getting-started h2 {
-margin: 0;
-font-size: 14px;
-font-weight: normal;
-color: #333;
-margin-bottom: 25px;
-}
-#getting-started ol {
-margin-left: 0;
-padding-left: 0;
-}
-#getting-started li {
-font-size: 18px;
-color: #888;
-margin-bottom: 25px;
-}
-#getting-started li h2 {
-margin: 0;
-font-weight: normal;
-font-size: 18px;
-color: #333;
-}
-#getting-started li p {
-color: #555;
-font-size: 13px;
-}
-
-#search {
-margin: 0;
-padding-top: 10px;
-padding-bottom: 10px;
-font-size: 11px;
+font-size: 120%;
}
-#search input {
-font-size: 11px;
-margin: 2px;
-}
-#search-text {width: 170px}
#sidebar ul {
margin-left: 0;
font-family: sans-serif;
font-size: 10px;
}
+
+#lists-sidebar-item, .have-lists #no-lists-sidebar-item {
+ display: none;
+}
+.have-lists #lists-sidebar-item { display: block; }
+.table-2-col {
+ display: grid;
+ grid-template-columns: auto auto;
+ column-gap: 1em;
+}
+.table-2-col > .arrow {
+ align-self: center;
+}
+#list-contents { display: none; }
+.have-list #list-contents {
+ display: block;
+}
+#new-list-sidebar-item > div {
+ display: grid;
+ grid-template-columns: auto auto;
+ column-gap: 1ex;
+}
+
+#busy-screen {
+ display: none;
+ opacity: 0;
+ transition: 1s;
+ width: 100%;
+ height: 100%;
+ position: fixed;
+ top: 0;
+ left: 0;
+ background: hsla(0, 0%, 50%, 50%);
+ z-index: 800;
+}
+.blocked #busy-screen {
+ display: block;
+}
+.busy #busy-screen {
+ opacity: 1;
+}
+#busy-screen > div {
+ position: fixed;
+ top: 1ex;
+ right: 1ex;
+ padding: 1em;
+ display: inline-block;
+ background: hsla(0, 0%, 100%, 75%);
+ border-radius: 1ex;
+}
+
--- /dev/null
+"use strict";
+(function(){
+var ui_icon_class_re = new RegExp('\\bui-icon-\\S+\\b');
+var uri_base;
+var lists_version;
+var lists = [];
+var current_list;
+
+function load_lists() {
+ console.log('TODO');
+}
+function handle_new_list_submission(){
+ $.post(uri_base + '/api/v1/list',
+ JSON.stringify({name:$('input[name="list_name"]').val()}))
+ .done(load_lists);
+ return false;
+}
+$(function(){
+ uri_base = $('#page').attr('lsl-uri-base');
+ $(document).ajaxStart(function(){
+ $(document).addClass('blocked');
+ window.setTimeout(
+ function() {
+ $(document).addClass('busy');
+ }
+ );
+ });
+ $(document).ajaxStop(function(){
+ $(document).removeClass('busy');
+ window.setTimeout(
+ function() {
+ $(document).removeClass('blocked');
+ },
+ 1000 );
+ });
+ $.ajaxSetup({contentType: 'application/json'});
+ $('button, input[type="submit"], input[type="reset"]').each(function(){
+ var class_prop = $(this).prop('class');
+ var icon_classes = class_prop.match(ui_icon_class_re);
+ $(this).button({icon: icon_classes?icon_classes[0]:null});
+ });
+
+ $('#new-list-sidebar-item button').on('click', handle_new_list_submission);
+ $('#new-list-sidebar-item input').on('keypress', function(ev) {
+ if (13 == ev.keyCode) {
+ handle_new_list_submission();
+ return false;
+ }
+
+ return true;
+ });
+ load_lists();
+});
+})();
-
-<!--
- 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>
+<div id="page" class="loading-lists" lsl-uri-base="<% request.uri_base %>">
+ <div id="sidebar">
+ <ul id="sidebar-items">
+ <li id="lists-sidebar-item">
+ <h3>Shopping lists</h3>
+ <ul class="lists">
</ul>
+ </li>
- </div>
+ <li id="no-lists-sidebar-item">
+ <h3>No shopping lists</h3>
+ </li>
- <div id="content">
- <div id="header">
- <h1>Perl is dancing</h1>
- <h2>You’ve joined the dance floor!</h2>
+ <li id="new-list-sidebar-item">
+ <h3>New shopping list</h3>
+ <div>
+ <input name="list_name" size="20" maxlength="60" />
+ <button class="ui-icon-plusthick"></button>
</div>
+ </li>
+ </ul>
+ </div>
+
+ <div id="content">
+ <div id="header">
+ <h1 id="selected-list-name" class="have-lists"></h1>
+ <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’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>
-
- <li>
- <h2>Enjoy web development again</h2>
-
- <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>
- </ol>
- </div>
+ <div id="list-contents" class="have-lists">
+ <ul id="list-items" class="have-list-items">
+ </ul>
+ <div id="new-list-item">
+ <input type="text" size="15" maxlength="80" name="new_list_item" />
+ <button id="add-list-item" class="ui-icon-plusthick">Add</button>
</div>
</div>
+ </div>
+</div>
+<!-- vim: set ft=html sw=2 :-->
<meta charset="<% settings.charset %>">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title><% title %></title>
+ <link rel="stylesheet" href="<% request.uri_base %>/css/jquery-ui/smoothness/jquery-ui.min.css">
<link rel="stylesheet" href="<% request.uri_base %>/css/style.css">
-<!-- Grab jQuery from a CDN, fall back to local if necessary -->
-<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"
- integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="></script>
-<script type="text/javascript">/* <![CDATA[ */
- !window.jQuery && document.write('<script type="text/javascript" src="<% request.uri_base %>/javascripts/jquery.js"><\/script>')
-/* ]]> */</script>
-
+ <script type="text/javascript" src="<% request.uri_base %>/javascripts/jquery.js"></script>
+ <script type="text/javascript" src="<% request.uri_base %>/javascripts/jquery-ui.min.js"></script>
+ <script type="text/javascript" src="<% request.uri_base %>/javascripts/lsl.js"></script>
</head>
<body>
+ <div id="busy-screen"><div><span>Working…</span></div></div>
<% content %>
<div id="footer">
Powered by <a href="http://perldancer.org/">Dancer2</a> <% dancer_version %>
projects / lsl.git / commitdiff