From: Damyan Ivanov Date: Thu, 10 Feb 2022 20:50:45 +0000 (+0000) Subject: first ugly attempts at the web app X-Git-Url: https://git.ktnx.net/?p=lsl.git;a=commitdiff_plain;h=0ddba2456ee68202f1086a8f5db82ac5e2403b6c first ugly attempts at the web app --- diff --git a/public/css/jquery-ui b/public/css/jquery-ui new file mode 120000 index 0000000..450af20 --- /dev/null +++ b/public/css/jquery-ui @@ -0,0 +1 @@ +/usr/share/javascript/jquery-ui/css \ No newline at end of file diff --git a/public/css/style.css b/public/css/style.css index 80f94eb..80f1435 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -4,17 +4,17 @@ margin: 0; 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; } @@ -47,106 +47,25 @@ float: right; 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; @@ -187,3 +106,54 @@ padding-right: 160px; 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; +} + diff --git a/public/javascripts/jquery-ui.min.js b/public/javascripts/jquery-ui.min.js new file mode 120000 index 0000000..5c053ba --- /dev/null +++ b/public/javascripts/jquery-ui.min.js @@ -0,0 +1 @@ +/usr/share/javascript/jquery-ui/jquery-ui.min.js \ No newline at end of file diff --git a/public/javascripts/lsl.js b/public/javascripts/lsl.js new file mode 100644 index 0000000..8ecf08e --- /dev/null +++ b/public/javascripts/lsl.js @@ -0,0 +1,54 @@ +"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(); +}); +})(); diff --git a/views/index.tt b/views/index.tt index 7b8eb8e..6f32f0c 100644 --- a/views/index.tt +++ b/views/index.tt @@ -1,151 +1,45 @@ - - - -
- + +
+ -
-

Getting started

-

Here’s how to get dancing:

- -

About your application's environment

- - - - - - -
    -
  1. -

    Tune your application

    - -

    - Your application is configured via a global configuration file, - config.yml and an "environment" configuration file, - environments/development.yml. Edit those files if you - want to change the settings of your application. -

    -
    2. - -
  2. -

    Add your own routes

    - -

    - 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 - views/index.tt. - You can add some routes to lib/App/REST/LazyShoppingList.pm lib/App/REST/LazyShoppingList.pm. -

    -
    3. - -
  3. -

    Enjoy web development again

    - -

    - Once you've made your changes, restart your standalone server - (bin/app.psgi) and you're ready - to test your web application. -

    -
    4. -
-
+
+
    +
+
+ +
+
+
+ diff --git a/views/layouts/main.tt b/views/layouts/main.tt index 0f3de6f..74c055f 100644 --- a/views/layouts/main.tt +++ b/views/layouts/main.tt @@ -4,17 +4,15 @@ <% title %> + - - - - + + + +
Working…
<% content %>