From 14cdffdeb4818af4024198989c1d820e054d8c35 Mon Sep 17 00:00:00 2001 From: yflory Date: Mon, 9 Nov 2020 18:23:30 +0100 Subject: [PATCH] PCS small screens --- .../src/less2/include/creation.less | 107 +++++++----------- www/common/common-interface.js | 9 +- www/common/common-ui-elements.js | 31 ++++- 3 files changed, 79 insertions(+), 68 deletions(-) diff --git a/customize.dist/src/less2/include/creation.less b/customize.dist/src/less2/include/creation.less index 77c421c7d..ed701890e 100644 --- a/customize.dist/src/less2/include/creation.less +++ b/customize.dist/src/less2/include/creation.less @@ -96,7 +96,7 @@ a { position: absolute; top: 7px; - margin-left: 10px; + margin-left: 30px; font-size: 16px; color: inherit; } @@ -290,6 +290,7 @@ width: 100%; //flex: 1 0 auto; flex-wrap: nowrap; + justify-content: space-between; .cp-creation-template-more { font-size: 30px; cursor: pointer; @@ -311,21 +312,22 @@ } .cp-creation-template-container { width: 100%; + max-width: ~"calc(100% - 60px)"; flex: 1; display: flex; - flex-wrap: wrap; - justify-content: center; + flex-flow: column wrap; //overflow-y: auto; + max-height: 156px; align-items: center; .cp-creation-template-element { box-shadow: 2px 2px 7px @colortheme_form-border; - width: 135px; + width: 300px; + max-width: calc(100% - 10px); padding: 5px; margin: 5px; display: inline-flex; - flex-flow: column; - box-sizing: content-box; + box-sizing: border-box; text-align: left; line-height: 1em; @@ -350,9 +352,10 @@ align-items: center; img { - max-width: 100px; - max-height: 100px; + max-width: 30px; + max-height: 30px; background: #fff; + margin-right: 10px; } .cp-creation-template-element-name { @@ -363,18 +366,15 @@ min-height: 20px; height: 20px; line-height: 20px; - margin-top: 5px; max-width: 100%; } .fa, .cptools { color: @creation-bg-color; color: var(--creation-bg-color); cursor: pointer; - width: 100px; - height: 100px; - font-size: 70px; + font-size: 30px; text-align: center; - line-height: 100px; + margin-right: 10px; } } } @@ -394,66 +394,43 @@ } } - @media screen and (max-height: 850px) { - #cp-creation-container { - .cp-creation-logo img { - display: none; - } + @media screen and (max-height: 850px) { + #cp-creation-container { + .cp-creation-logo img { + display: none; } } - @media screen and (max-width: 500px) { - #cp-creation { - #cp-creation-form { - & > div { - width: 95%; - margin: 10px auto; - } - .cp-creation-expire { - &.active { - label { - flex: 1; - } - .cp-creation-slider { - flex: none; - order: 10; - width: 100%; - } + } + @media screen and (max-width: 400px) { + #cp-creation { + #cp-creation-form { + & > div { + width: 95%; + margin: 0 auto; + } + .cp-creation-expire { + &.active { + label { + flex: 1; + } + .cp-creation-slider { + flex: none; + order: 10; + width: 100%; } } } } } - @media screen and (max-width: @browser_media-medium-screen) { - #cp-creation { - height: auto; - #cp-creation-form { - div.cp-creation-template { - margin: 0; - padding: 5px; - .cp-creation-template-container { - .cp-creation-template-element { - flex-flow: row; - margin: 1px; - padding: 5px; - width: 155px; - img { - display: none; - } - .fa { - font-size: 18px; - width: 20px; - height: 20px; - line-height: 20px; - display: inline !important; - } - .cp-creation-template-element-name { - margin: 0; - margin-left: 5px; - } - } - } - } + } + @media screen and (max-width: 800px) { + #cp-creation { + height: 550px; + #cp-creation-form { + div.cp-creation-template { + flex-flow: column; } } } + } } diff --git a/www/common/common-interface.js b/www/common/common-interface.js index 83a5e80be..66c066d3f 100644 --- a/www/common/common-interface.js +++ b/www/common/common-interface.js @@ -1163,7 +1163,14 @@ define([ } }); - $input.change(function () { $mark.focus(); }); + $input.change(function () { + if (!opts.labelAlt) { return; } + if ($input.is(':checked') !== checked) { + $(label).text(opts.labelAlt); + } else { + $(label).text(labelTxt); + } + }); return h('label.cp-checkmark', labelOpts, [ input, diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js index 99fd4c7a6..a4015f341 100644 --- a/www/common/common-ui-elements.js +++ b/www/common/common-ui-elements.js @@ -2188,8 +2188,13 @@ define([ // XXX rewrite "creation_expire2": "An expiring pad has a set lifetime, after which it will be automatically removed from the server and other users' CryptDrives." + + Messages.creation_expiration = "Expiration date"; // XXX + Messages.creation_expiresIn = "Expires in"; // XXX var expire = h('div.cp-creation-expire', [ - UI.createCheckbox('cp-creation-expire', Messages.creation_expire, false), + UI.createCheckbox('cp-creation-expire', Messages.creation_expiration, false, { + labelAlt: Messages.creation_expiresIn + }), h('span.cp-creation-expire-picker.cp-creation-slider', [ h('input#cp-creation-expire-val', { type: "number", @@ -2209,6 +2214,7 @@ define([ ]); // Password + Messages.creation_password = "Password"; // XXX var password = h('div.cp-creation-password', [ UI.createCheckbox('cp-creation-password', Messages.creation_password, false), h('span.cp-creation-password-picker.cp-creation-slider', [ @@ -2220,8 +2226,15 @@ define([ //createHelper('#', "TODO: password protection adds another layer of security ........") // TODO ]); + var $w = $(window); + var big = $w.width() > 800; + var right = h('span.fa.fa-chevron-right.cp-creation-template-more'); var left = h('span.fa.fa-chevron-left.cp-creation-template-more'); + if (!big) { + $(left).removeClass('fa-chevron-left').addClass('fa-chevron-up'); + $(right).removeClass('fa-chevron-right').addClass('fa-chevron-down'); + } var templates = h('div.cp-creation-template', [ left, h('div.cp-creation-template-container', [ @@ -2245,7 +2258,7 @@ define([ // Display templates var selected = 0; // Selected template in the list (highlighted) - var TEMPLATES_DISPLAYED = 4; // Max templates displayed per page + var TEMPLATES_DISPLAYED = big ? 6 : 3; // Max templates displayed per page var next = function () {}; // Function called when pressing tab to highlight the next template var i = 0; // Index of the first template displayed in the current page sframeChan.query("Q_CREATE_TEMPLATES", type, function (err, res) { @@ -2359,6 +2372,20 @@ define([ .addClass('cp-creation-template-selected'); }; + $w.on('resize', function () { + var _big = $w.width() > 800; + if (big === _big) { return; } + big = _big; + if (!big) { + $(left).removeClass('fa-chevron-left').addClass('fa-chevron-up'); + $(right).removeClass('fa-chevron-right').addClass('fa-chevron-down'); + } else { + $(left).removeClass('fa-chevron-up').addClass('fa-chevron-left'); + $(right).removeClass('fa-chevron-down').addClass('fa-chevron-right'); + } + TEMPLATES_DISPLAYED = big ? 6 : 3; + redraw(0); + }); }); // Display expiration form when checkbox checked