mirror of
https://github.com/cryptpad/cryptpad.git
synced 2026-09-12 19:49:59 +05:00
feat(form footer): adjust UI
- remove form-block around footer text - adjust message text - remove icon appended to the end - adjust styles (line-height, margin-bottom, ...) - use link color rather than brand to improve link contrast
This commit is contained in:
David Benque
parent
7eda1715cb
commit
0b86a0b972
@ -157,7 +157,7 @@ define(req, function(AppConfig, Default, Language) {
|
||||
}
|
||||
};
|
||||
|
||||
Messages.form_footerInfo = "This form is created with CryptPad.<br>The data is end-to-end encrypted and no one can access it except for the person sending it to you.<br><a href='https://cryptpad.org/apps/form/' target='_blank'>Learn more about CryptPad Forms</a>"; // XXX
|
||||
Messages.form_footerInfo = "This form and your answers are protected with end-to-end encryption<br>Only the form author can read the data<br>To learn more and create your own forms <a href='https://cryptpad.org/apps/form/' target='_blank'>visit the CryptPad website</a>"; // XXX
|
||||
return Messages;
|
||||
|
||||
});
|
||||
|
||||
@ -217,12 +217,14 @@
|
||||
padding: 20px 20px 150px 20px;
|
||||
.cp-form-view-footer-text {
|
||||
text-align: center;
|
||||
line-height: 180%;
|
||||
margin-bottom: 2rem;
|
||||
svg.cp-form-footer-icon {
|
||||
margin: 0 0 0.2rem 0.2rem;
|
||||
color: @cryptpad_color_brand;
|
||||
}
|
||||
a {
|
||||
color: @cryptpad_color_brand;
|
||||
color: @cryptpad_color_link;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
@ -927,7 +929,7 @@
|
||||
align-items: baseline;
|
||||
border-radius: @variables_radius;
|
||||
margin-top: 0.5rem;
|
||||
padding: 1px;
|
||||
padding: 1px;
|
||||
.CodeMirror {
|
||||
cursor: default;
|
||||
flex: 1;
|
||||
@ -1498,10 +1500,10 @@
|
||||
.cp-form-response-modal {
|
||||
.cp-form-markdown-editor-wrapper {
|
||||
border: 1px solid @cp_forms-border;
|
||||
border-radius: @variables_radius;
|
||||
border-radius: @variables_radius;
|
||||
}
|
||||
.CodeMirror {
|
||||
border-radius: 0 0 @variables_radius @variables_radius;
|
||||
border-radius: 0 0 @variables_radius @variables_radius;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1567,4 +1569,3 @@
|
||||
|
||||
.charts_main();
|
||||
}
|
||||
|
||||
|
||||
@ -270,7 +270,7 @@ define([
|
||||
},
|
||||
content: Messages['form_poll_'+t]
|
||||
};
|
||||
});
|
||||
});
|
||||
var dropdownConfig = {
|
||||
text: '', // Button initial text
|
||||
options: options, // Entries displayed in the menu
|
||||
@ -314,7 +314,7 @@ define([
|
||||
dateFormat: dateFormat,
|
||||
defaultDate: val ? new Date(val) : undefined
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// if this element was active before the remote change, restore cursor
|
||||
var setCursor = function () {
|
||||
@ -543,7 +543,7 @@ define([
|
||||
$(el).find('input').focus();
|
||||
|
||||
return;
|
||||
}
|
||||
}
|
||||
$(add).click();
|
||||
return;
|
||||
} else {
|
||||
@ -559,12 +559,12 @@ define([
|
||||
$(element).find('input').focus();
|
||||
} else {
|
||||
$container.find('input')[i].value = selectedDates[i].toLocaleDateString();
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if ($container.find('input')[0]) {
|
||||
$container.find('input')[0].value = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$container.find('input').each(function (i, input) {
|
||||
if (input._flatpickr) {
|
||||
@ -1189,7 +1189,7 @@ define([
|
||||
toggleRow,
|
||||
block
|
||||
]);
|
||||
|
||||
|
||||
return [
|
||||
outerWrapper,
|
||||
cancelBlock
|
||||
@ -1882,10 +1882,10 @@ define([
|
||||
});
|
||||
return res;
|
||||
},
|
||||
reset: function () {
|
||||
reset: function () {
|
||||
$(tag).find('input').each(function (i, input) {
|
||||
var $i = $(input);
|
||||
if (Util.isChecked($i)) {
|
||||
if (Util.isChecked($i)) {
|
||||
$i.prop('checked', false);
|
||||
}
|
||||
});
|
||||
@ -2018,10 +2018,10 @@ define([
|
||||
});
|
||||
return res;
|
||||
},
|
||||
reset: function () {
|
||||
reset: function () {
|
||||
$(tag).find('input').each(function (i, input) {
|
||||
var $i = $(input);
|
||||
if (Util.isChecked($i)) {
|
||||
if (Util.isChecked($i)) {
|
||||
$i.prop('checked', false);
|
||||
}
|
||||
});
|
||||
@ -2252,7 +2252,7 @@ define([
|
||||
reset: function () {
|
||||
$(tag).find('input').each(function (i, input) {
|
||||
var $i = $(input);
|
||||
if (Util.isChecked($i)) {
|
||||
if (Util.isChecked($i)) {
|
||||
$i.prop('checked', false);
|
||||
}
|
||||
});
|
||||
@ -2406,7 +2406,7 @@ define([
|
||||
lines.forEach(checkDisabled);
|
||||
$(tag).find('input').each(function (i, input) {
|
||||
var $i = $(input);
|
||||
if (Util.isChecked($i)) {
|
||||
if (Util.isChecked($i)) {
|
||||
$i.prop('checked', false);
|
||||
}
|
||||
});
|
||||
@ -2752,7 +2752,7 @@ define([
|
||||
tag: tag,
|
||||
isEmpty: function () {
|
||||
var v = this.getValue();
|
||||
if (!v || !v.values) { return true; }
|
||||
if (!v || !v.values) { return true; }
|
||||
// Poll is considered empty if user hasn't interacted with it
|
||||
return !hasInteracted;
|
||||
},
|
||||
@ -3346,8 +3346,7 @@ define([
|
||||
$(logo).click(function () {
|
||||
APP.framework._.sfCommon.gotoURL('/');
|
||||
});
|
||||
var content = UI.setHTML(h('div.cp-form-block.cp-form-view-footer-text'), Messages.form_footerInfo);
|
||||
content.appendChild(Icons.get('form', { 'class': 'cp-form-footer-icon', 'aria-hidden': true }));
|
||||
var content = UI.setHTML(h('div.cp-form-view-footer-text'), Messages.form_footerInfo);
|
||||
var footer = h('div.cp-form-view-footer', [content, logo]);
|
||||
return footer;
|
||||
};
|
||||
@ -3424,7 +3423,7 @@ define([
|
||||
});
|
||||
sorted.forEach(function (uid) {
|
||||
var answer = answers[uid];
|
||||
|
||||
|
||||
var viewOnly = content.answers.cantEdit || APP.isClosed;
|
||||
|
||||
var action = h(viewOnly ? 'button.btn.btn-secondary' : 'button.btn.btn-primary', [
|
||||
@ -4309,7 +4308,7 @@ define([
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
content.form[_uid] = {
|
||||
q: content.form[uid].q,
|
||||
opts: opts,
|
||||
@ -4512,7 +4511,7 @@ define([
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
var shownContent = [];
|
||||
var shownPages = [];
|
||||
pgcontent.forEach(function(page) {
|
||||
@ -4529,7 +4528,7 @@ define([
|
||||
};
|
||||
|
||||
var pageContainer = h('div.cp-form-page-container');
|
||||
|
||||
|
||||
var $page = $(pageContainer);
|
||||
_content.push(pageContainer);
|
||||
var refreshPage = APP.refreshPage = function (current, direction) {
|
||||
@ -4587,7 +4586,7 @@ define([
|
||||
var shownContent = checkPages[0];
|
||||
var shownPages = checkPages[1];
|
||||
$(state).text(Messages._getKey('form_page', [shownPages.indexOf(_content[current-1])+1, shownContent.length]));
|
||||
|
||||
|
||||
});
|
||||
|
||||
if (shownPages.indexOf(_content[current-1])+1 === shownContent.length) { $(right).css('visibility', 'hidden'); }
|
||||
@ -5140,7 +5139,7 @@ define([
|
||||
var endDateStr = h('div.cp-form-status');
|
||||
var $endDate = $(endDateContainer);
|
||||
var $endDateStr = $(endDateStr);
|
||||
|
||||
|
||||
var refreshEndDate = function () {
|
||||
$endDate.empty();
|
||||
|
||||
@ -5379,7 +5378,7 @@ define([
|
||||
if (state) {
|
||||
$container.removeClass('cp-no-drag');
|
||||
} else {
|
||||
$container.addClass('cp-no-drag');
|
||||
$container.addClass('cp-no-drag');
|
||||
}
|
||||
};
|
||||
};
|
||||
@ -5779,7 +5778,7 @@ define([
|
||||
]);
|
||||
var editButtons = h('div.cp-form-edit-buttons-container', [ preview, edit, del ]);
|
||||
|
||||
var toggleRow = h('div.cp-markdown-toggle-row');
|
||||
var toggleRow = h('div.cp-markdown-toggle-row');
|
||||
var markdownWrapper = h('div.cp-form-markdown-editor-wrapper', t);
|
||||
var editDiv, previewDiv;
|
||||
var div = h('div.cp-form-block.editable.nodrag.cp-form-submit-message', [
|
||||
|
||||
Loading…
Reference in New Issue
Block a user