svatbonet/wireframe
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Pridan program, opraveno jQuery s webpackem

Browse Source
This commit is contained in:
Michal Kváček
2018-11-16 14:10:42 +01:00
parent 7d388100a5
commit 15c0f0b54a
13 changed files with 311 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+2 -1
View File
@@ -1,4 +1,5 @@
node_modules
dist
.idea
!dist/custom.*
!/dist/custom.js
!/dist/custom.css
index.js
+14 -5
View File
@@ -1,13 +1,22 @@
// webpack entry point
// JS
import $ from 'jquery';
window.jQuery = $;
window.$ = $;
import 'bootstrap';
import 'fullcalendar';
var req = require.context("./src/assets/js", true, /^(.*\.(js$))[^.]*$/igm);
req.keys().forEach(function(key){
req(key);
});
function requireAll(r) {
r.keys ().forEach (r);
}
requireAll (require.context ('./src/assets/js', true, /\.js$/));
// SASS
import './src/assets/scss/app.scss';
import './src/assets/scss/app.scss';
// nefunguje kalendar z nejakeho duvodu - mam blbe cestu
// import '~fullcalendar/dist/fullcalendar.css';
src/assets/js/calendar.js
+4 -4
View File
@@ -48,7 +48,7 @@ function initCalendar() {
$modal.find ('input[name=startdate]').val (startdate);
},
eventDrop: function (event) {
/*eventDrop: function (event) {
if (event.type === "event") {
$.nette.ajax ({
url: {plink editCalendarEvent!},
@@ -71,7 +71,7 @@ function initCalendar() {
}
});
}
},
},*/
eventClick: function (event, jsEvent, view) {
// wasn't remove button clicked?
if ($ (jsEvent.target).hasClass ('fa-times')) {
@@ -97,14 +97,14 @@ function initCalendar() {
$modal.modal ('show');
},
eventRender: function (event, element) {
/*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
});
src/assets/js/program.js
+38
View File
@@ -0,0 +1,38 @@
$ (document).on ('click', '.js-add-program', function () {
var $template = $ ($ (this).data ('template'));
var $templateContainer = $ ($ (this).data ('template-container'));
var $copy = $template.clone ().removeClass ('template');
$copy.find ('.js-remove-program').removeAttr('hidden');
$copy.appendTo ($templateContainer);
});
$ (document).on ('click', '.js-remove-program', function () {
if ($ (this).hasClass ('template'))
return;
$ (this).closest ('tr').remove ();
});
var $iconTarget = null;
$(document).on('click', '.js-set-icon-program', function () {
$('#setIconProgramModal').modal('show');
$iconTarget = $(this);
});
$(document).on('click', '.js-choose-icon', function () {
var icon = $(this).data('icon');
$iconTarget.find('input').val(icon);
$iconTarget.find('.fa').removeAttr('class').addClass('fa fa-2x fa-'+icon);
$iconTarget = null;
$('#setIconProgramModal').modal('hide');
});
src/assets/scss/app.scss
+1 -1
View File
@@ -23,4 +23,4 @@ $fa-font-path: "~font-awesome/fonts";
@import "backToDashboard";
@import "boxes";
@import "editor/parts";
@import "editor/app";
src/assets/scss/boxes.scss
+3 -1
View File
@@ -4,9 +4,11 @@
&__container {
column-count: 2;
column-width: 50%;
padding: 20px;
}
&__item {
margin: 20px;
margin-bottom: 20px;
}
}
src/assets/scss/editor/app.scss
+4
View File
@@ -0,0 +1,4 @@
@import "parts";
@import "timeline";
src/assets/scss/editor/timeline.scss
+56
View File
@@ -0,0 +1,56 @@
.timeline-container {
overflow: auto;
white-space: nowrap;
}
.timeline {
list-style: none;
width: auto;
color: gray;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
}
.timeline .timeline__item {
display: inline-block;
max-width: 200px;
text-align: center;
padding: 0 20px;
margin: 0 10px;
flex-grow: 1;
}
.timeline .timeline__icon {
width: 40px;
height: 40px;
font-size: 40px;
position: relative;
}
.timeline::before {
border: solid 1px;
position: absolute;
top: 100px;
content: " ";
width: 100%;
}
.timeline .timeline__icon::after {
font: normal normal normal 14px/1 FontAwesome;
content: "\F111";
position: absolute;
z-index: -1;
width: 100%;
bottom: -30px;
left: 0;
font-size: 20px;
}
.timeline .timeline__content {
margin-top: 30px;
}
.timeline .timeline__content h3 {
}
src/views/editor/index.ejs
+62 -1
View File
@@ -2,5 +2,66 @@
<div class="container text-center">
<% include ../partials/editor/aboutUs.ejs %>
</div>
<section class="web-part container text-center">
<div class="row">
<div class="col-md-4">
<h2>Kdy?</h2>
<p>1. 9. 2019</p>
</div>
<div class="col-md-4">
<h2>Kde?</h2>
<p>Zámek Litomyšl</p>
</div>
<div class="col-md-4">
<h2>V kolik?</h2>
<p>11:00</p>
</div>
<div class="web-part__edit">
<a href="#mainInfoModal" data-toggle="modal" data-target="#mainInfoModal">
<i class="fa fa-pencil-square"></i>
</a>
</div>
<% include ../partials/editor/modals/mainInfo.ejs %>
</div>
</section>
<section class="web-part container">
<h3>Svatební program</h3>
<div class="timeline-container">
<div class="timeline timeline-horizontal">
<% for(var i = 0; i < 5; i++) { %>
<div class="timeline__item">
<i class="timeline__icon fa fa-2x fa-heart-o"></i>
<div class="timeline__content">
<h3>11:00</h3>
<p><%= i %> Hostina</p>
</div>
</div>
<% } %>
</div>
</div>
<div class="web-part__edit">
<a href="#setProgramModal" data-toggle="modal" data-target="#setProgramModal">
<i class="fa fa-pencil-square"></i>
</a>
</div>
<% include ../partials/editor/modals/program.ejs %>
</section>
</div>
src/views/layouts/editor.ejs
+3 -1
View File
@@ -6,7 +6,6 @@
<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>
@@ -45,4 +44,7 @@
<!--<script src="https://github.com/jhollingworth/bootstrap-wysihtml5/blob/master/src/bootstrap-wysihtml5.js"></script>-->
</body>
<script src="/dist/custom.js"></script>
</html>
src/views/partials/editor/modals/mainInfo.ejs
+40
View File
@@ -0,0 +1,40 @@
<div class="modal fade" id="mainInfoModal" tabindex="-1" role="dialog" aria-labelledby="mainInfoModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-4">
<h2>Kdy?</h2>
<p>1. 9. 2019</p>
</div>
<div class="col-md-4">
<h2>Kde?</h2>
<p>Zámek Litomyšl</p>
</div>
<div class="col-md-4">
<h2>V kolik?</h2>
<p>11:00</p>
</div>
</div>
<canvas id="map">todo</canvas>
</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>
src/views/partials/editor/modals/program.ejs
+77
View File
@@ -0,0 +1,77 @@
<div class="modal fade" id="setProgramModal" tabindex="-1" role="dialog" aria-labelledby="setProgramModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<table>
<thead>
<tr>
<th>Čas</th>
<th>Ikona</th>
<th>Název události</th>
<th>
</th>
</tr>
</thead>
<tbody class="template-container">
<tr class="template">
<td><input type="text" class="form-control time" name="time[]" placeholder="11:00"></td>
<td class="text-center">
<a href="#" class="js-set-icon-program">
<input type="hidden" name="icon[]" value="heart">
<i class="fa fa-2x fa-heart"></i>
</a>
</td>
<td><input type="text" class="form-control program-description" name="description[]"></td>
<td><a href="#" class="js-remove-program" hidden><i class="fa fa-trash"></i></a></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<a href="#" class="js-add-program" data-template-container=".template-container" data-template=".template"><i class="fa fa-plus"></i></a>
</td>
</tr>
</tfoot>
</table>
</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 class="modal fade" id="setIconProgramModal" tabindex="-1" role="dialog" aria-labelledby="setIconProgramModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<a href="#" data-icon="gear" class="js-choose-icon"><i class="fa fa-2x fa-gear"></i></a>
<a href="#" data-icon="dashboard" class="js-choose-icon"><i class="fa fa-2x fa-dashboard"></i></a>
<a href="#" data-icon="home" class="js-choose-icon"><i class="fa fa-2x fa-home"></i></a>
</div>
</div>
</div>
</div>
src/views/partials/editor/modals/setAboutUs.ejs
+7 -16
View File
@@ -8,22 +8,13 @@
</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>
<textarea class="wysiwyg" name="aboutUs"></textarea>
</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>