Nahozeni sablony na backend, nasazeni ejs, aktualizace Bootstrapu
This commit is contained in:
Michal Kváček
+52
@@ -0,0 +1,52 @@
|
||||
|
||||
var express = require ('express');
|
||||
var app = express ();
|
||||
|
||||
var expressLayouts = require ('express-ejs-layouts');
|
||||
var fs = require ('fs');
|
||||
|
||||
var viewsRootBase = 'src/views';
|
||||
app.set ('view engine', 'ejs');
|
||||
app.use ('/dist', express.static ('dist'));
|
||||
app.use (expressLayouts);
|
||||
|
||||
/**
|
||||
* Render template - check if exists
|
||||
*
|
||||
* @param req
|
||||
* @param res
|
||||
*/
|
||||
function renderTemplate(req, res) {
|
||||
var url = typeof req.params.page === 'undefined' ? 'index' : req.params.page;
|
||||
var urlSegment = url.replace (/[^a-z0-9_]/, '');
|
||||
var viewsRoot = app.get ('views');
|
||||
|
||||
if (fs.existsSync (viewsRoot + '/' + urlSegment + ".ejs")) {
|
||||
res.render (urlSegment);
|
||||
} else {
|
||||
res.status (404);
|
||||
res.send ('View ' + viewsRoot + '/' + urlSegment + '.ejs not found');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Editor
|
||||
*/
|
||||
app.get ('/editor/:page', function (req, res) {
|
||||
app.set ('layout', '../layouts/editor');
|
||||
app.set ('views', viewsRootBase + "/editor");
|
||||
|
||||
renderTemplate (req, res);
|
||||
});
|
||||
|
||||
/**
|
||||
* Backend
|
||||
*/
|
||||
app.get ('/:page?', function (req, res) {
|
||||
app.set ('layout', '../layouts/backend');
|
||||
app.set ('views', viewsRootBase + "/backend");
|
||||
|
||||
renderTemplate (req, res);
|
||||
});
|
||||
|
||||
app.listen (8080);
|
||||
@@ -0,0 +1,131 @@
|
||||
// appends styles
|
||||
var linkElement = document.createElement ("link");
|
||||
linkElement.rel = "stylesheet";
|
||||
linkElement.href = "/assets/dist/css/fullcalendar.css";
|
||||
document.head.appendChild (linkElement);
|
||||
|
||||
|
||||
|
||||
$ (window).resize (function () {
|
||||
var w = $ (this).width ();
|
||||
|
||||
if (w < 920) {
|
||||
$ ('#calendar').fullCalendar ('changeView', 'agendaWeek');
|
||||
} else {
|
||||
$ ('#calendar').fullCalendar ('changeView', 'month');
|
||||
}
|
||||
});
|
||||
|
||||
function initCalendar() {
|
||||
var $calendar = $ ('#calendar');
|
||||
|
||||
$calendar.fullCalendar ({
|
||||
header: {
|
||||
left: 'prev title next ',
|
||||
center: '',
|
||||
right: 'month,agendaWeek'
|
||||
},
|
||||
columnFormat: 'dddd',
|
||||
aspectRatio: 2,
|
||||
contentHeight: 'auto',
|
||||
editable: true,
|
||||
droppable: true,
|
||||
selectable: true,
|
||||
timezone: 'Europe/Prague',
|
||||
lang: 'cs',
|
||||
|
||||
views: {
|
||||
agenda: {
|
||||
columnFormat: 'dd'
|
||||
}
|
||||
},
|
||||
|
||||
select: function (start, end) {
|
||||
var $modal = $ ('#newCalendarEvent');
|
||||
$modal.modal ('show');
|
||||
|
||||
var startdate = start.format ('DD. MM. YYYY');
|
||||
|
||||
$modal.find ('input[name=startdate]').val (startdate);
|
||||
},
|
||||
eventDrop: function (event) {
|
||||
if (event.type === "event") {
|
||||
$.nette.ajax ({
|
||||
url: {plink editCalendarEvent!},
|
||||
method: "post",
|
||||
data: {
|
||||
'event-id': event.id,
|
||||
name: event.title,
|
||||
startdate: event.start.format ('DD. MM. YYYY')
|
||||
}
|
||||
});
|
||||
} else {
|
||||
var url = {plink changeDeadline! 'ID'};
|
||||
url = url.replace ('ID', event.id);
|
||||
|
||||
$.nette.ajax ({
|
||||
url: url,
|
||||
method: "post",
|
||||
data: {
|
||||
value: event.start.format ('DD. MM. YYYY')
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
eventClick: function (event, jsEvent, view) {
|
||||
// wasn't remove button clicked?
|
||||
if ($ (jsEvent.target).hasClass ('fa-times')) {
|
||||
return;
|
||||
}
|
||||
|
||||
var $modal;
|
||||
|
||||
if (event.type === 'event') {
|
||||
$modal = $ ('#editCalendarEvent');
|
||||
|
||||
$modal.find ('#event-id').val (event.id);
|
||||
$modal.find ('#event-name').val (event.title);
|
||||
$ ('#event-date').val (event.start.format ('DD. MM. YYYY'));
|
||||
} else {
|
||||
$modal = $ ('#editTask');
|
||||
|
||||
$modal.find ('#taskId').val (event.id);
|
||||
$modal.find ('#name').val (event.title);
|
||||
$modal.find ('#deadline').val (event.start.format ('DD. MM. YYYY'));
|
||||
|
||||
}
|
||||
$modal.modal ('show');
|
||||
|
||||
},
|
||||
eventRender: function (event, element) {
|
||||
|
||||
var url = {plink delete! 0,1};
|
||||
url = url.replace ("0?", event.id + "?").replace ("type=1", "type=" + event.type);
|
||||
|
||||
var link = '<span class="delete-button"><a href="javascript:void(0);" data-action="' + url + '" class="calendar-remove"><span class="fa fa-times"></span></a></span>';
|
||||
element.find (".fc-title").parent ().append (link);
|
||||
},
|
||||
events: window.events
|
||||
});
|
||||
|
||||
// wedding
|
||||
$calendar.fullCalendar ('renderEvent', {
|
||||
title: window.weddingTitle,
|
||||
allDay: true,
|
||||
start: window.weddingDate,
|
||||
end: window.weddingDate,
|
||||
className: 'wedding-date',
|
||||
editable: false,
|
||||
rendering: "background"
|
||||
}, true);
|
||||
}
|
||||
|
||||
$ (document).on ('snippet-reloaded', function () {
|
||||
initCalendar ();
|
||||
$ (window).resize ();
|
||||
});
|
||||
|
||||
$ (document).ready (function () {
|
||||
initCalendar ();
|
||||
$ (window).resize ();
|
||||
});
|
||||
@@ -0,0 +1,4 @@
|
||||
$ (document).on ('click', '#all-checkboxes-toggler', function () {
|
||||
var checked = $ (this).is (':checked');
|
||||
$ ('.checkbox').attr ('checked', checked).change();
|
||||
});
|
||||
@@ -0,0 +1,68 @@
|
||||
function displayValidationError($e, message) {
|
||||
var containerOffset = $e.offsetParent ().offset ();
|
||||
var offset = $e.offset ().left - containerOffset.left;
|
||||
var topOffset = $e.offset ().top + $e.height () + 15 - containerOffset.top;
|
||||
|
||||
console.log("Chyba: "+message);
|
||||
|
||||
var $error = $ ('<div class="animated bounceIn alert alert-danger validation-error">' + message + '</div>');
|
||||
$error.css ({
|
||||
"position": "absolute",
|
||||
"top": topOffset + "px",
|
||||
"left": offset + "px",
|
||||
"z-index": 10000
|
||||
});
|
||||
|
||||
$e.parent ().append ($error).show ();
|
||||
$e.addClass ('has-error');
|
||||
}
|
||||
|
||||
$ (document).on ('blur', 'input[type=email], [data-values=email]', function () {
|
||||
var $e = $ (this);
|
||||
var val = $e.val ();
|
||||
|
||||
if (val === "" && !$e.hasClass ('has-error'))
|
||||
return;
|
||||
|
||||
if (val !== "" && !/(.+)@(.+)\.(.{2,7})/.test (val)) {
|
||||
displayValidationError ($e, "E-mail není ve správném tvaru.");
|
||||
} else {
|
||||
$ ('.validation-error').remove ();
|
||||
$e.removeClass ('has-error')
|
||||
}
|
||||
});
|
||||
|
||||
$ (document).on ('blur', '[data-values=int]', function () {
|
||||
var $e = $ (this);
|
||||
var val = $e.val ();
|
||||
console.log(val);
|
||||
|
||||
if (val === "" && !$e.hasClass ('has-error'))
|
||||
return;
|
||||
|
||||
|
||||
if (val !== "" && !/^\d+$/.test (val)) {
|
||||
displayValidationError ($e, "Zadávejte prosím jen čísla.");
|
||||
} else {
|
||||
$ ('.validation-error').remove ();
|
||||
$e.removeClass ('has-error')
|
||||
}
|
||||
});
|
||||
|
||||
$ (document).on ('blur', '[data-values=phone]', function () {
|
||||
var $e = $ (this);
|
||||
var val = $e.val ().replace (/ /g, '');
|
||||
var res = /\+?[0-9]{9,14}/.test (val);
|
||||
|
||||
if (val === "" && !$e.hasClass ('has-error'))
|
||||
return;
|
||||
|
||||
console.log(val, res);
|
||||
|
||||
if (val !== "" && !res) {
|
||||
displayValidationError ($e, "Telefon není ve správném formátu.")
|
||||
} else {
|
||||
$ ('.validation-error').remove ();
|
||||
$e.removeClass ('has-error')
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,118 @@
|
||||
$ (document).ready (initDateTimePickers ());
|
||||
$ (document).on ('snippet-reloaded', initDateTimePickers);
|
||||
|
||||
$ (document).on ('blur', '.select-date', function () {
|
||||
$ (this).datetimepicker ('hide');
|
||||
});
|
||||
$ (document).on ('blur', '.select-datetime', function () {
|
||||
$ (this).datetimepicker ('hide');
|
||||
});
|
||||
|
||||
var i = 1;
|
||||
|
||||
function initDateTimePickers() {
|
||||
var $datepicker = $ ('.select-date');
|
||||
var $datetimepicker = $ ('.select-datetime');
|
||||
var $timepicker = $ ('.select-time');
|
||||
|
||||
$datepicker.each (function () {
|
||||
var $e = $ (this);
|
||||
if (!datePickerInitialized ($e)) {
|
||||
setDatepickerId ($e, 'datepicker-auto-id');
|
||||
initDatePicker ($e);
|
||||
}
|
||||
});
|
||||
|
||||
$datetimepicker.each (function () {
|
||||
var init = $ (this).attr ('data-picker-init');
|
||||
|
||||
if (init) {
|
||||
return;
|
||||
}
|
||||
|
||||
var $positionedParent = getPositionedParent ($ (this));
|
||||
var id = setDatepickerId ($ (this), 'datetimepicker-auto-id');
|
||||
|
||||
$ (this).attr ('data-toggle', 'datetimepicker');
|
||||
$ (this).attr ('data-target', '#' + id);
|
||||
|
||||
$ (this).datetimepicker ({
|
||||
sideBySide: true,
|
||||
stepping: 10,
|
||||
format: "DD. MM. YYYY HH:mm",
|
||||
widgetParent: $positionedParent,
|
||||
useCurrent: false,
|
||||
locale: window.locale || 'cs'
|
||||
});
|
||||
$ (this).attr ('data-picker-init', true);
|
||||
});
|
||||
|
||||
$timepicker.each (function () {
|
||||
var init = $ (this).attr ('data-picker-init');
|
||||
|
||||
if (init) {
|
||||
return;
|
||||
}
|
||||
|
||||
var id = setDatepickerId ($ (this), 'timepicker-auto-id');
|
||||
var $positionedParent = getPositionedParent ($ (this));
|
||||
|
||||
$ (this).attr ('data-toggle', 'datetimepicker');
|
||||
$ (this).attr ('data-target', '#' + id);
|
||||
|
||||
$ (this).datetimepicker ({
|
||||
sideBySide: true,
|
||||
stepping: 10,
|
||||
widgetParent: $positionedParent,
|
||||
format: "HH:mm",
|
||||
useCurrent: false,
|
||||
locale: window.locale || 'cs'
|
||||
});
|
||||
$ (this).attr ('data-picker-init', true);
|
||||
});
|
||||
}
|
||||
|
||||
function getPositionedParent($e) {
|
||||
do {
|
||||
$e = $e.parent ();
|
||||
} while ($e.css ('position') !== 'relative');
|
||||
|
||||
return $e;
|
||||
}
|
||||
|
||||
function datePickerInitialized($element) {
|
||||
var init = $element.attr ('data-picker-init');
|
||||
|
||||
return !!init;
|
||||
}
|
||||
|
||||
function setDatepickerId($element, prefix, postfix) {
|
||||
if (typeof postfix === 'undefined') {
|
||||
postfix = 1;
|
||||
}
|
||||
|
||||
var id = $element.attr ('id');
|
||||
if (id === "" || typeof id === 'undefined') {
|
||||
id = prefix + '-' + postfix++;
|
||||
$element.attr ('id', id);
|
||||
}
|
||||
|
||||
return id;
|
||||
}
|
||||
|
||||
function initDatePicker($element) {
|
||||
var id = $element.attr ('id');
|
||||
$element.attr ('data-toggle', 'datetimepicker');
|
||||
$element.attr ('data-target', '#' + id);
|
||||
|
||||
var $positionedParent = getPositionedParent ($element);
|
||||
$element.datetimepicker ({
|
||||
format: "DD. MM. YYYY",
|
||||
useCurrent: false,
|
||||
widgetParent: $positionedParent,
|
||||
locale: window.locale || 'cs'
|
||||
});
|
||||
|
||||
$element.attr ('data-picker-init', true);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
$ (document).on ('click', '.delete-button a', function () {
|
||||
|
||||
var $modal = $ ('#delete-modal');
|
||||
var $e = $ (this);
|
||||
|
||||
var action = $e.data ('action');
|
||||
var confirmMessage = $e.data ('message') || false;
|
||||
var modalHeader = $e.data ('title') || false;
|
||||
|
||||
if (confirmMessage)
|
||||
$modal.find ('.message').html (confirmMessage);
|
||||
|
||||
if (modalHeader)
|
||||
$modal.find ('.modal-title').text (modalHeader);
|
||||
|
||||
|
||||
$ ('#delete-modal-form').attr ('action', action);
|
||||
$modal.modal ('show');
|
||||
});
|
||||
@@ -0,0 +1,205 @@
|
||||
(function ($) {
|
||||
$.fn.editable = function (callback) {
|
||||
|
||||
if (typeof callback !== 'function') {
|
||||
callback = function () {
|
||||
};
|
||||
}
|
||||
|
||||
var $trigger = $ (this);
|
||||
var edit = {};
|
||||
|
||||
var defaultHtml = '...';
|
||||
|
||||
edit.init = function () {
|
||||
|
||||
// set placeholder
|
||||
$trigger.each (function () {
|
||||
var $e = $ (this);
|
||||
|
||||
if ($e.text ().trim () === "") {
|
||||
$e.text (defaultHtml)
|
||||
}
|
||||
});
|
||||
|
||||
// $trigger.bind ('mouseover', function () {
|
||||
// $ (this).parent ().css ('position', 'relative');
|
||||
// });
|
||||
|
||||
$trigger.bind ('click', function (e) {
|
||||
var $editable = $ (this);
|
||||
var height = $editable.innerHeight ();
|
||||
|
||||
$editable.css ('height', height + "px");
|
||||
var value = edit.getValue ($editable);
|
||||
var width = $editable.parent ().innerWidth () - 10;
|
||||
var $input = $ ('<input type="text" class="editing" data-original="' + value + '" value="' + value + '">').css ({"width": width + "px"});
|
||||
|
||||
// do not reset input after multiple clicks
|
||||
$input.click (function (e) {
|
||||
e.preventDefault ();
|
||||
e.stopImmediatePropagation ();
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
// save on enter
|
||||
$input.keydown (function (e) {
|
||||
|
||||
// enter
|
||||
if (e.keyCode === 13) {
|
||||
$input.blur ();
|
||||
}
|
||||
|
||||
// esc
|
||||
if (e.keyCode === 27) {
|
||||
var orig = $input.data ('original');
|
||||
$input.val (orig);
|
||||
$input.blur ();
|
||||
}
|
||||
});
|
||||
|
||||
// save data on blur
|
||||
$input.blur (function () {
|
||||
// datepicker opened
|
||||
if ($ ('.datepicker-dropdown').is (':visible')) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (edit.validateData ($input)) {
|
||||
var newData = edit.saveData ($input, $editable.data ('action'));
|
||||
$input.remove ();
|
||||
$editable.text (newData);
|
||||
}
|
||||
});
|
||||
|
||||
// replace text in element with input
|
||||
$editable.html ($input);
|
||||
|
||||
switch ($editable.data ('values')) {
|
||||
case "phone":
|
||||
$input.attr ('data-values', 'phone');
|
||||
break;
|
||||
|
||||
case "int":
|
||||
$input.attr ('data-values', 'int');
|
||||
break;
|
||||
|
||||
case "email":
|
||||
$input.attr ('type', 'email');
|
||||
$input.attr ('data-values', 'email');
|
||||
break;
|
||||
|
||||
case "time":
|
||||
$input.addClass ('select-time');
|
||||
initDateTimePickers ();
|
||||
|
||||
$input.datetimepicker ('show');
|
||||
|
||||
break;
|
||||
|
||||
case "date":
|
||||
$input.addClass ('select-date');
|
||||
initDatePicker ($input);
|
||||
|
||||
$input.datetimepicker ('show');
|
||||
break;
|
||||
|
||||
case "datetime":
|
||||
$input.addClass ('select-datetime');
|
||||
|
||||
initDateTimePickers ();
|
||||
|
||||
$input.datetimepicker ('show');
|
||||
break;
|
||||
}
|
||||
|
||||
$input.focus ();
|
||||
|
||||
e.stopImmediatePropagation ();
|
||||
return false;
|
||||
});
|
||||
};
|
||||
|
||||
edit.validateData = function ($input) {
|
||||
|
||||
var acceptedValues = $input.data ('values');
|
||||
var value = $input.val ();
|
||||
|
||||
switch (acceptedValues) {
|
||||
case "int":
|
||||
return value === "" || /^\d+$/.test (value);
|
||||
case "email":
|
||||
return value === "" || /(.+)@(.+)\.(.{2,7})/.test (value);
|
||||
case "phone":
|
||||
value = value.replace (/ /g, '');
|
||||
return value === "" || /\+?[0-9]{9,14}/.test (value);
|
||||
|
||||
default:
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
edit.saveData = function ($input, url) {
|
||||
var newData = $input.val ();
|
||||
|
||||
if (newData === $input.data('original')) {
|
||||
return newData;
|
||||
}
|
||||
|
||||
$.nette.ajax ({
|
||||
url: url,
|
||||
method: "POST",
|
||||
data: {
|
||||
value: newData
|
||||
}
|
||||
}).done (function () {
|
||||
// todo: very ugly, sorry...
|
||||
$ ("." + $trigger.attr ('class')).editable (callback);
|
||||
|
||||
// todo remove timepicker in nicer way
|
||||
$ ('.bootstrap-datetimepicker-widget').remove ();
|
||||
|
||||
// todo: somehow not working...?
|
||||
callback ();
|
||||
|
||||
var event = jQuery.Event ("snippet-reloaded");
|
||||
$ (document).trigger (event);
|
||||
});
|
||||
|
||||
return newData;
|
||||
};
|
||||
|
||||
edit.getValue = function ($element) {
|
||||
var allowedValue = $element.data ('values');
|
||||
var data = $element.text ().trim ();
|
||||
|
||||
if (data === defaultHtml)
|
||||
data = "";
|
||||
|
||||
switch (allowedValue) {
|
||||
case 'int':
|
||||
data = data.replace (/\D/g, '');
|
||||
break;
|
||||
|
||||
case 'double':
|
||||
data = data.replace (/\D/g, '');
|
||||
break;
|
||||
}
|
||||
|
||||
return data;
|
||||
};
|
||||
|
||||
edit.init ();
|
||||
};
|
||||
}) (jQuery);
|
||||
|
||||
function initEditable() {
|
||||
$ ('.edit-inline').editable (function () {
|
||||
if ($ ('#draggable-container').length > 0)
|
||||
initSortable ();
|
||||
});
|
||||
}
|
||||
|
||||
$ (document).ready (initEditable);
|
||||
$ (document).on ('snippet-reloaded', initEditable);
|
||||
@@ -0,0 +1,53 @@
|
||||
$ (document).ready (function () {
|
||||
if ($ ('.draggable-container').length > 0) {
|
||||
initSortable ();
|
||||
}
|
||||
});
|
||||
|
||||
// init sortable on reloaded snippet
|
||||
$ (document).on ('snippet-reloaded', initSortable);
|
||||
|
||||
function initSortable() {
|
||||
if (typeof Sortable === 'undefined') {
|
||||
$.getScript ('/www/assets/dist/js/Sortable.js', initSortable);
|
||||
} else {
|
||||
var $elements = document.getElementsByClassName ("draggable-container");
|
||||
if ($elements.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
for (i in $elements) {
|
||||
var $el = $elements[i];
|
||||
|
||||
if (typeof $el !== 'object') {
|
||||
continue;
|
||||
}
|
||||
|
||||
Sortable.create ($el, {
|
||||
animation: 200,
|
||||
handle: ".sort-handle",
|
||||
draggable: ".draggable",
|
||||
onEnd: function (evt) {
|
||||
var ordered = [];
|
||||
|
||||
console.log(evt);
|
||||
|
||||
// get item ids
|
||||
$ ('.sortable-item').each (function () {
|
||||
var $e = $ (this);
|
||||
ordered.push ($e.data ('id'));
|
||||
});
|
||||
|
||||
// send ordered items
|
||||
$.nette.ajax ({
|
||||
url: evt.target.getAttribute('data-url'),
|
||||
method: "post",
|
||||
data: {
|
||||
items: ordered
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
$topMenuLinkColor: #677788;
|
||||
$textColor: #677788;
|
||||
$footerBackgroundColor: #677787;
|
||||
$primaryPinkColor: #ED7493;
|
||||
$btnSecondaryColor: transparent;
|
||||
$boxShadowColor: #E3E3E3;
|
||||
$footerDarkerTextColor: $textColor;
|
||||
|
||||
$darkColor: #617891;
|
||||
$darkerColor: #314559;
|
||||
$contentBackgroundColor: white;
|
||||
$green: #3db621;
|
||||
$gray: #f2f2f2;
|
||||
$red: red;
|
||||
|
||||
$submenuColor: darken($gray, 10%);
|
||||
|
||||
$contentHeaderBackgroundColor: #F9F9F9;
|
||||
$contentHeaderColor: #627991;
|
||||
$contentColorBlue: #4f6a87;
|
||||
$contentTableColor: #748391;
|
||||
|
||||
$tableBorderColor: #ededf0;
|
||||
$tableHoverColor: #fcfcfc;
|
||||
@@ -0,0 +1,25 @@
|
||||
|
||||
|
||||
@import "~bootstrap/scss/bootstrap";
|
||||
|
||||
// Required
|
||||
@import "~bootstrap/scss/functions";
|
||||
@import "~bootstrap/scss/variables";
|
||||
@import "~bootstrap/scss/mixins";
|
||||
|
||||
// Optional
|
||||
@import "~bootstrap/scss/reboot";
|
||||
@import "~bootstrap/scss/type";
|
||||
@import "~bootstrap/scss/images";
|
||||
@import "~bootstrap/scss/code";
|
||||
@import "~bootstrap/scss/grid";
|
||||
|
||||
|
||||
$fa-font-path: "~font-awesome/fonts";
|
||||
@import '~font-awesome/scss/font-awesome.scss';
|
||||
|
||||
@import "sidebar";
|
||||
@import "main";
|
||||
@import "backToDashboard";
|
||||
|
||||
@import "editor/parts";
|
||||
@@ -0,0 +1,19 @@
|
||||
|
||||
|
||||
.back-to-dashboard {
|
||||
&__icon {
|
||||
font-size: 200%;
|
||||
}
|
||||
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
|
||||
border-radius: 50%;
|
||||
padding: 5px 10px;
|
||||
background: white;
|
||||
border: solid 1px;
|
||||
text-align: center;
|
||||
z-index: 100;
|
||||
line-height: 200%;
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
|
||||
.web-part {
|
||||
|
||||
position: relative;
|
||||
|
||||
&__edit {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
@import "variables";
|
||||
|
||||
|
||||
.navbar-top__logo{
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
main {
|
||||
|
||||
h3 {
|
||||
&.uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
color: $contentHeaderColor;
|
||||
font-size: 18px;
|
||||
margin-bottom: 20px;
|
||||
margin-top: 30px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.main-content{
|
||||
min-height: calc(100% - 132px);
|
||||
position: relative;
|
||||
|
||||
@media only screen and (max-width:1310px){
|
||||
min-height: calc(100% - 80px);
|
||||
}
|
||||
|
||||
@media only screen and (max-width:800px){
|
||||
min-height: calc(100% - 55px);
|
||||
}
|
||||
|
||||
&__content{
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
flex-basis: auto;
|
||||
padding:0px 30px;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 20px;
|
||||
padding-left:150px;
|
||||
|
||||
@media only screen and (max-width:500px){
|
||||
padding:0px 15px;
|
||||
padding-left:62px;
|
||||
}
|
||||
}
|
||||
|
||||
&__sidebar{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 47px;
|
||||
min-height: 100%;
|
||||
|
||||
@media only screen and (min-width:500px){
|
||||
width:120px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
@import "variables";
|
||||
|
||||
$sidebarDecorationOverflow: 13px;
|
||||
|
||||
#sidebar {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: -1px;
|
||||
font-weight: bold;
|
||||
|
||||
.sidebar-nav {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
.nav-item {
|
||||
font-size: 11px;
|
||||
position: relative;
|
||||
z-index: 1000;
|
||||
text-align: center;
|
||||
display: block;
|
||||
|
||||
|
||||
.nav-link {
|
||||
margin: 0 auto;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.5px;
|
||||
padding: 10px;
|
||||
font-size: 0px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
width: 47px;
|
||||
|
||||
&__icon {
|
||||
font-size: 200%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (min-width: 500px) {
|
||||
font-size: 11px;
|
||||
padding: 15px;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 1.5rem;
|
||||
@media only screen and (min-width: 500px) {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.active,
|
||||
.nav-item:hover {
|
||||
@media only screen and (min-width: 500px) {
|
||||
margin-right: -$sidebarDecorationOverflow;
|
||||
}
|
||||
|
||||
&::after {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
<div id='calendar'></div>
|
||||
|
||||
<script>
|
||||
// window.weddingTitle = {_ backend.calendar.wedding};
|
||||
// window.weddingDate = {$weddingDate|date:'Y-m-d'};
|
||||
</script>
|
||||
@@ -0,0 +1 @@
|
||||
tohle je nejaky obsah - melo by to mit layout
|
||||
@@ -0,0 +1,6 @@
|
||||
<% include ../partials/editor/titlePhoto.ejs %>
|
||||
|
||||
<div class="container text-center">
|
||||
<% include ../partials/editor/aboutUs.ejs %>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="cs" class="no-js">
|
||||
<head>
|
||||
<script src="/dist/bundle.js"></script>
|
||||
|
||||
<script src="/dist/custom.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/dist/custom.css">
|
||||
|
||||
<title>Svatební plánovač - backend</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header id="main-header">
|
||||
<% include ../partials/header %>
|
||||
</header>
|
||||
|
||||
<div id="main-content-wrapper" class="main-content">
|
||||
<div class="sidebar main-content__sidebar" id="sidebar">
|
||||
<% include ../partials/sidebar %>
|
||||
</div>
|
||||
|
||||
<div id="content" class="main-content__content">
|
||||
<%- body %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<% include ../partials/footer %>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,48 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
|
||||
<script src="/dist/bundle.js"></script>
|
||||
<script src="/dist/custom.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/dist/custom.css">
|
||||
|
||||
<title>Svatební web</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Sidebar -->
|
||||
|
||||
<div class="back-to-dashboard"><a href="/"><i class="fa fa-home back-to-dashboard__icon" ></i></a></div>
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
<a class="navbar-brand" href="/editor/index">Adam & Eva </a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="ml-auto navbar-nav">
|
||||
<li class="nav-item"><a class="nav-link" href="#"> Úvod </a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#"> Fotogalerie </a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#"> Náš příběh </a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-plus"></span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<%- body %>
|
||||
|
||||
|
||||
|
||||
<!-- Optional JavaScript -->
|
||||
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
|
||||
<!--<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>-->
|
||||
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>-->
|
||||
<!--<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>-->
|
||||
<!--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">-->
|
||||
<!--<script src="https://github.com/jhollingworth/bootstrap-wysihtml5/blob/master/src/bootstrap-wysihtml5.js"></script>-->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,19 @@
|
||||
<section class="web-part">
|
||||
<h2> Adam a Eva </h2>
|
||||
<article>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
|
||||
magna aliqua. Ut enim ad minim veniam, quis
|
||||
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
|
||||
reprehenderit in voluptate velit esse cillum dolore eu fugiat
|
||||
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
|
||||
id est laborum.</p>
|
||||
</article>
|
||||
|
||||
<div class="web-part__edit">
|
||||
<a href="#aboutUsModal" data-toggle="modal" data-target="#aboutUsModal">
|
||||
<i class="fa fa-pencil-square"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<% include ./modals/setAboutUs.ejs %>
|
||||
</section>
|
||||
@@ -0,0 +1,30 @@
|
||||
<div class="modal fade" id="aboutUsModal" tabindex="-1" role="dialog" aria-labelledby="aboutUsModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="aboutUsModalLabel">Editovat text</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 nopadding">
|
||||
<textarea class="wysiwyg" name="aboutUs"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Storno</button>
|
||||
<button type="button" class="btn btn-primary" data-dismiss="modal">Uložit
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,34 @@
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="setTitlePhotoModal" tabindex="-1" role="dialog" aria-labelledby="setTitlePhotoModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="setTitlePhotoModalLabel">Úvodní fotografie</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="container">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label>Vybrat obrázek</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-btn">
|
||||
<span class="btn btn-default btn-file">
|
||||
Procházet<input type="file" id="imgInp">
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Storno</button>
|
||||
<button type="button" class="btn btn-primary" data-dismiss="modal">Nastavit</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,14 @@
|
||||
<section class="web-section">
|
||||
<div class="profile-pic">
|
||||
<img src="./img/affair-anniversary-beach-1024993.jpg" class="img-fluid" id="uvodni" alt="Krásná úvodní fotografie">
|
||||
|
||||
<div class="web-part__edit">
|
||||
<a href="#setTitlePhotoModal" data-toggle="modal" data-target="#setTitlePhotoModal">
|
||||
<i class="fa fa-pencil-square"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<% include ./modals/setTitlePhoto.ejs %>
|
||||
|
||||
</section>
|
||||
@@ -0,0 +1,17 @@
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
<a class="navbar-brand" href="#">Svatbonet</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="ml-auto navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#"><span class="glyphicon glyphicon-user"></span> Adam </a></li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#"> Odhlásit </a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
@@ -0,0 +1,50 @@
|
||||
<nav>
|
||||
|
||||
<ul class="sidebar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/">
|
||||
<span class="fa nav-link__icon fa-home"></span>
|
||||
<span>Nástěnka</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/budget">
|
||||
<span class="fa nav-link__icon fa-money"></span>
|
||||
<span>Rozpočet</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/guests">
|
||||
<span class="fa nav-link__icon fa-group"></span>
|
||||
<span>Hosté</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/calendar">
|
||||
<span class="fa nav-link__icon fa-calendar"></span>
|
||||
<span>Události</span></a>
|
||||
</li>
|
||||
|
||||
<li class="separator"></li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/editor/index">
|
||||
<span class="fa nav-link__icon fa-heart-o"></span>
|
||||
<span>Svatební web</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
<span class="fa nav-link__icon fa-info"></span>
|
||||
<span>Detaily svatby</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
<span class="fa nav-link__icon fa-clock-o"></span>
|
||||
<span>Program</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
<span class="fa nav-link__icon fa-gears"></span>
|
||||
<span>Nastavení webu</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
Reference in New Issue
Block a user