PCS small screens
yflory
parent
2164603f7d
commit
14cdffdeb4
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -2188,8 +2188,13 @@ define([
|
|||
|
||||
// XXX rewrite "creation_expire2": "An <b>expiring</b> 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
|
||||
|
|
|
|||
Loading…
Reference in New Issue