diff --git a/composer.json b/composer.json index e9f98d3818..da8b34c972 100644 --- a/composer.json +++ b/composer.json @@ -77,7 +77,8 @@ "kunstmaan/sensio-generator-bundle": "^3.2", "doctrine/collections": "^1.6", "symfony/deprecation-contracts": "^2.5|^3.0", - "pagerfanta/doctrine-dbal-adapter": "^2.7" + "pagerfanta/doctrine-dbal-adapter": "^2.7", + "symfony/maker-bundle": "^1.11" }, "require-dev": { "symfony/error-handler": "^4.4|^5.3", diff --git a/src/Kunstmaan/AdminBundle/Resources/public/js/admin-bundle.min.js b/src/Kunstmaan/AdminBundle/Resources/public/js/admin-bundle.min.js index c7c393a64f..65fc25caed 100644 --- a/src/Kunstmaan/AdminBundle/Resources/public/js/admin-bundle.min.js +++ b/src/Kunstmaan/AdminBundle/Resources/public/js/admin-bundle.min.js @@ -68,7 +68,7 @@ var kunstmaanbundles=kunstmaanbundles||{};kunstmaanbundles.rangeslider=function( var kunstmaanbundles=kunstmaanbundles||{};kunstmaanbundles.mediaChooser=function(e,i){var a,n,t,d=$("body");return a=function(){n(),t()},n=function(){d.on("click",".js-media-chooser-del-preview-btn",function(e){var i=$(this),a=i.data("linked-id"),n=$("#"+a+"-widget"),t=$("#"+a);if(i.parent(".media-chooser__preview").find(".media-chooser__preview__img").attr({src:"",srcset:"",alt:""}),$(".media-thumbnail__icon").remove(),n.removeClass("media-chooser--choosen"),t.val(""),void 0!==i.data("clear-image-edit")){var a=i.data("linked-id"),d=$("#"+a+"-image-edit-modal"),o=d.find(".js-image-edit"),s=d.find(".js-image-edit-image"),m=new CustomEvent("destroy");s.attr({src:"",srcset:"",alt:""}),o[0].dispatchEvent(m)}})},t=function(){d.on("click",".js-media-chooser-image-edit-btn",function(){var e=$(this),i=e.data("linked-id"),a=$("#"+i+"-image-edit-modal");a.modal("show"),a.on("shown.bs.modal",function(){document.dispatchEvent(new CustomEvent("modalOpen",{detail:a[0]}))})})},{init:a}}(window); var kunstmaanbundles=kunstmaanbundles||{};kunstmaanbundles.nestedForm=function(e,t){var a,n,d,i,s,_,o,r,m;return a=n=function(){$(".js-nested-form").each(function(){var e=$(this),t=e.data("initialized"),a=e.data("initializing");t||a||(e.data("initializing",!0),d(e),e.data("initialized",!0),e.data("initializing",!1))})},d=function(e){var t=e.data("sortable"),a=e.data("allow-new"),n=e.data("allow-delete"),d=e.data("min-items"),s=e.find("> .js-nested-form__item"),l=s.length;if(e.data("index",l),a&&_(e),n&&s.each(function(){o($(this),e)}),d>0&&d>l)for(var f=d-l,c=0;c .js-nested-form__item").length,s=e.find(".js-nested-form__add-btn").last(),_=e.find(".js-nested-form__del-btn").first();t&&(!1===d||in?_.removeClass("hidden"):_.addClass("hidden")},_=function(e){var t=e.data("add-button-label"),a=''.replace("%label%",void 0===t?"Add":t),n=$(a);e.append(n),n.on("click",function(){i(e)})},o=function(e,t){var a=e.find(".js-nested-form__item__header__actions").first(),n=$('');a.append(n),n.on("click",function(){s($(this),t,e)})},i=function(e){var t,a=e.data("prototype"),n=e.data("prototype-name"),d=e.data("index"),i=e.data("sortable"),s=new RegExp(n+"___[a-z]+__","g"),_=a.match(s)[0],l=new RegExp(_,"g");if(a=a.replace(l,n+"_"+d),e.data("index",d+1),i){var f=e.data("sortkey").replace(l,n+"_"+d);t=$('
')}else t=$('
');s=new RegExp("\\["+n+"\\]\\[__[a-z]+__\\]","g"),_=a.match(s)[0].replace(new RegExp("\\[","g"),"\\[").replace(new RegExp("\\]","g"),"\\]"),l=new RegExp(_,"g"),a=a.replace(l,"["+n+"]["+d+"]"),t.find(".js-nested-form__item__view").append(a),e.find(".js-nested-form__add-btn").last().before(t),o(t,e),r(e),kunstmaanbundles.app.initModules(),kunstmaanbundles.pagepartEditor.reInit(t),kunstmaanbundles.ajaxModal.resetAjaxModals(),i&&m(e)},s=function(e,t,a){var n=a.data("delete-key"),d=t.data("sortable");n&&t.append(''),a.remove(),r(t),d&&m(t)},m=function(e){var t=0;e.find("> .js-nested-form__item").each(function(){var e=$(this).data("sortkey");void 0!==e&&$("#"+e).val(t++)})},{init:a,reInit:n}}(window); var kunstmaanbundles=kunstmaanbundles||{};kunstmaanbundles.pageEditor=function(e,a){var t,n,i,s,l,o,d,r=$("body");return t=function(){$(".js-change-page-template").on("click",function(){n($(this))}),$("#publish-later__check").length&&i(),$("#unpublish-later__check").length&&s(),$(".js-sortable-container").length&&l(),$("#permissions-container").length&&o(),$("#pageadminform").length&&d()},n=function(e){var a=$("#pagetemplate_template_holder"),t=$("input[name=pagetemplate_template_choice]:checked"),n=t.val(),i=e.data(i);$(i).modal("hide"),a.val(n),t.closest("form").submit()},i=function(){var e;if(e=function(e){e.checked?($("#publish-later").show(),$("#publish-later-action").show(),$("#publish-action").hide()):($("#publish-later").hide(),$("#publish-later-action").hide(),$("#publish-action").show())},$("#publish-later__check")){var a=document.getElementById("publish-later__check");e(a),$(a).on("change",function(){e(this)})}},s=function(){var e=function(e){e.checked?($("#unpublish-later").show(),$("#unpublish-later-action").show(),$("#unpublish-action").hide()):($("#unpublish-later").hide(),$("#unpublish-later-action").hide(),$("#unpublish-action").show())};if($("#unpublish-later__check")){var a=document.getElementById("unpublish-later__check");e(a),$(a).on("change",function(){e(this)})}},l=function(){$(".js-sortable-container").each(function(){var e=$(this),a=e.attr("id"),t=document.getElementById(a);Sortable.create(t,{draggable:".js-sortable-item",handle:".js-sortable-item__handle",ghostClass:"sortable-item--ghost",group:{name:"pagepartRegion",pull:!0},animation:100,scroll:!0,scrollSensitivity:300,scrollSpeed:300,onStart:function(e){var a=$(e.item),t=a.data("scope");a.find(".js-rich-editor").each(function(){kunstmaanbundles.richEditor.destroySpecificRichEditor($(this))}),r.addClass("sortable-active"),$(".js-sortable-container").on("dragover",function(e){var n=$(this);if(n.data("scope")){n.data("scope").split(" ").indexOf(t)>-1?a.removeClass("sortable-item--error"):a.addClass("sortable-item--error")}})},onEnd:function(e){var a=$(e.item),t=a.parents(".js-pp-container"),n=a.find(".pagepartadmin_field_updatecontextname"),i=t.data("context");r.removeClass("sortable-active"),$(".js-sortable-container").off("dragover"),kunstmaanbundles.checkIfEdited.edited(),n.each(function(){$(this).attr("name",i+$(this).data("suffix"))}),a.find(".js-rich-editor").each(function(){kunstmaanbundles.richEditor.enableRichEditor($(this))})}})}),$(".js-sortable-item__handle").on("mousedown",function(){r.addClass("sortable-active")}),$(".js-sortable-item__handle").on("mouseup",function(){r.removeClass("sortable-active")})},o=function(){var e=$("#permissions-container"),a=[];a.add=[],a.del=[],$(".js-permission-checkbox").on("change",function(){var t=this,n=$(t),i=n.data("role"),s=n.data("permission"),l=n.data("original-value");if(l==t.checked){var o;l?-1!=(o=a.del.indexOf(i+"."+s))&&a.del.splice(o,1):-1!=(o=a.add.indexOf(i+"."+s))&&a.add.splice(o,1)}else t.checked?a.add.push(i+"."+s):a.del.push(i+"."+s);var d=$("#permission-hidden-fields"),r="";if(a.add.length>0)for(var c=0;c'}if(a.del.length>0)for(var c=0;c'}if(d.html(r),e.data("recursive")){var u=e.data("trans-perms-added"),p=e.data("trans-perms-removed"),m=$("#permission-changes-info-container"),f="";if(a.add.length>0){f=f+"

"+u,f+="

    ";for(var c=0;c"+h[0]+" : "+h[1]+""}f+="
",f+="

"}if(a.del.length>0){f=f+"

"+p,f+="

    ";for(var c=0;c"+h[0]+" : "+h[1]+""}f+="
",f+="

"}""!=f?($("#permission-changes-modal__body").html(f),m.removeClass("hidden")):(m.addClass("hidden"),$("#apply-recursive").prop("checked",!1))}})},d=function(){$(document).on("keydown",function(e){(e.ctrlKey||e.metaKey)&&83===e.which&&(e.preventDefault(),kunstmaanbundles.appLoading.addLoading(),$("#pageadminform").submit())})},{init:t}}(window); -var kunstmaanbundles=kunstmaanbundles||{};kunstmaanbundles.pagepartEditor=function(a){var e,t,n,i,s,d,o,r,c,l,u,p,f,m={add:[],edit:[],delete:[]};return e=function(){var a=$("body");a.on("click",".js-pp-modal-button",function(a){f=$(a.target)}),a.on("click",".js-add-pp-button",function(){n($(this))}),a.on("change",".js-add-pp-select",function(){t($(this))}),a.on("click",".js-edit-pp-btn",function(){i($(this))}),a.on("click",".js-delete-pp-btn",function(){s($(this))}),a.on("click",".js-move-up-pp-btn",function(){d($(this))}),a.on("click",".js-move-down-pp-btn",function(){o($(this))}),a.on("click",".js-resize-pp-view-btn",function(){resizePagePartView($(this))}),a.on("click",".js-resize-all-pp",function(a){resizeAllRegionPp($(this)),a.preventDefault()})},t=function(a){if(!a.val())return!1;var e=a.closest(".js-pp-container"),t=a.data("url"),n=e.data("pageclassname"),i=e.data("pageid"),s=e.data("context"),d=a.val();kunstmaanbundles.appLoading.addLoading(),$.ajax({url:t,data:{pageclassname:n,pageid:i,context:s,type:d},async:!0,success:function(e){var t=a.hasClass("js-add-pp-select--first");t?$("#parts-"+s).prepend(e):a.closest(".js-sortable-item").after(e);var n=$("
");n.append(e),u(n),kunstmaanbundles.appLoading.removeLoading(),kunstmaanbundles.checkIfEdited.edited(),kunstmaanbundles.advancedSelect.init(),kunstmaanbundles.ajaxModal.resetAjaxModals(),l("add")}}),a.val("")},n=function(a){var e=f.closest(".js-pp-container"),t=f.data("url"),n=e.data("pageclassname"),i=e.data("pageid"),s=e.data("context"),d=a.data("pagepartclass");kunstmaanbundles.appLoading.addLoading(),$.ajax({url:t,data:{pageclassname:n,pageid:i,context:s,type:d},async:!0,success:function(a){var e=f.hasClass("js-add-pp-select--first");e?$("#parts-"+s).prepend(a):f.closest(".js-sortable-item").after(a);var t=$("
");t.append(a),u(t),kunstmaanbundles.appLoading.removeLoading(),kunstmaanbundles.checkIfEdited.edited(),kunstmaanbundles.advancedSelect.init(),kunstmaanbundles.ajaxModal.resetAjaxModals(),l("add")}}),$("#"+a.data("pagepartmodalname")).modal("hide")},i=function(e){var t=e.data("target-id");kunstmaanbundles.checkIfEdited.edited(),$("#"+t+"-edit-view").removeClass("pp__view__block--hidden"),$("#"+t+"-preview-view").addClass("pp__view__block--hidden");var n=$("#pp-"+t);n.addClass("pp--edit-active"),kunstmaanbundles.advancedSelect.init(),a.activeEdit=t,l("edit",n)},s=function(a){var e=a.data("target-id"),t=$("#"+e+"-pp-container");kunstmaanbundles.checkIfEdited.edited(),t.velocity("slideUp",{duration:300}),$("#"+e+"-is-deleted").prop("checked",!0),$("#delete-pagepart-modal-"+e).modal("hide"),$("body").removeClass("modal-open"),l("delete",t),$("#delete-pagepart-modal-"+e).on("hidden.bs.modal",function(){t.empty()})},d=function(e){var t=e.data("target-id"),n=e.parents("#"+t+"-pp-container"),i=n.prevAll(".sortable-item:first");u(n),i.length&&($(i).before(n),p(n.parent()),kunstmaanbundles.checkIfEdited.edited()),n.velocity("scroll",{duration:500,offset:-200,easing:"ease-in-out"}),a.activeEdit=t},o=function(e){var t=e.data("target-id"),n=e.parents("#"+t+"-pp-container"),i=n.nextAll(".sortable-item:first");u(n),i.length&&($(i).after(n),p(n.parent()),kunstmaanbundles.checkIfEdited.edited()),n.velocity("scroll",{duration:500,offset:-200,easing:"ease-in-out"}),a.activeEdit=t},resizePagePartView=function(a){var e=a.data("target-id"),t=($("#"+e),$("#"+e+"-preview-view")),n=t.parent();n.toggleClass("action--maximize"),a.toggleClass("pp__actions__action--resize-max"),n.hasClass("action--maximize")?(a.find("i").removeClass("fa-minus").addClass("fa-plus"),n.velocity({height:"7rem"},{duration:400,easing:"ease-in-out"})):(a.find("i").removeClass("fa-plus").addClass("fa-minus"),n.velocity({height:"100%"},{duration:400,easing:"ease-in-out"}))},resizeAllRegionPp=function(a){var e=a.data("target"),t=$("#"+e);t.find(".pp__view");a.hasClass("region__actions__min")?(t.velocity({height:"11.8rem"},{duration:400,easing:"ease-in-out"}),t.addClass("action--maximize")):a.hasClass("region__actions__max")&&(t.velocity({height:"100%"},{duration:400,easing:"ease-in-out"}),t.removeClass("action--maximize"))},r=function(a,e){if(!m.hasOwnProperty(a))throw new Error("PagePartEditor: I cannot let you subscribe to the unknown event named: "+a);m[a].push(e)},c=function(a,e){if(!m.hasOwnProperty(a))throw new Error("PagePartEditor: I cannot let you unSubscribe to the unknown event named: "+a);m=m.filter(function(a){return a!==e})},l=function(a,e){m[a].forEach(function(a){a({target:e})})},u=function(a){var e=[];a.find("*[data-reinit-js]").each(function(){var a=$(this).data("reinit-js");if(a)for(var t=0;t");u.append(e);const f=u[0].lastElementChild.dataset.scope;p(u),kunstmaanbundles.appLoading.removeLoading(),kunstmaanbundles.checkIfEdited.edited(),kunstmaanbundles.advancedSelect.init(),kunstmaanbundles.ajaxModal.resetAjaxModals(),m.add.push(function(){r&&"AppEntityPagePartsSpacerPagePart"!==f&&!c&&(addSpacer(t,s,i,d,n,a),c=!0)}),l("add")}}),a.val("")},n=function(a){var e=f.closest(".js-pp-container"),t=f.data("url"),n=$("body").data("spacer-pp"),s=e.data("pageclassname"),i=e.data("pageid"),d=e.data("context"),o=a.data("pagepartclass");const r=e.parent().parent().hasClass("js-auto-spacer");var c=!1;kunstmaanbundles.appLoading.addLoading(),$.ajax({url:t,data:{pageclassname:s,pageid:i,context:d,type:o},async:!0,success:function(a){var e=f.hasClass("js-add-pp-select--first");e?$("#parts-"+d).prepend(a):f.closest(".js-sortable-item").after(a);var o=$("
");o.append(a);const u=o[0].lastElementChild.dataset.scope;p(o),kunstmaanbundles.appLoading.removeLoading(),kunstmaanbundles.checkIfEdited.edited(),kunstmaanbundles.advancedSelect.init(),kunstmaanbundles.ajaxModal.resetAjaxModals(),m.add.push(function(){r&&u!==n.replace("\\","")&&!c&&(addSpacer(t,s,i,d,n,f),c=!0)}),l("add")}}),$("#"+a.data("pagepartmodalname")).modal("hide")},addSpacer=function(a,e,t,n,s,i){$.ajax({url:a,data:{pageclassname:e,pageid:t,context:n,type:s},async:!0,success:function(a){const e=(i.closest(".js-sortable-item").after(a),$("
"));e.append(a),p(e),kunstmaanbundles.appLoading.removeLoading(),kunstmaanbundles.checkIfEdited.edited(),kunstmaanbundles.advancedSelect.init(),kunstmaanbundles.ajaxModal.resetAjaxModals()}})},s=function(e){var t=e.data("target-id");kunstmaanbundles.checkIfEdited.edited(),$("#"+t+"-edit-view").removeClass("pp__view__block--hidden"),$("#"+t+"-preview-view").addClass("pp__view__block--hidden");var n=$("#pp-"+t);n.addClass("pp--edit-active"),kunstmaanbundles.advancedSelect.init(),a.activeEdit=t,l("edit",n)},i=function(a){var e=a.data("target-id"),t=$("#"+e+"-pp-container");kunstmaanbundles.checkIfEdited.edited(),t.velocity("slideUp",{duration:300}),$("#"+e+"-is-deleted").prop("checked",!0),$("#delete-pagepart-modal-"+e).modal("hide"),$("body").removeClass("modal-open"),l("delete",t),$("#delete-pagepart-modal-"+e).on("hidden.bs.modal",function(){t.empty()})},d=function(e){var t=e.data("target-id"),n=e.parents("#"+t+"-pp-container"),s=n.prevAll(".sortable-item:first");p(n),s.length&&($(s).before(n),u(n.parent()),kunstmaanbundles.checkIfEdited.edited()),n.velocity("scroll",{duration:500,offset:-200,easing:"ease-in-out"}),a.activeEdit=t},o=function(e){var t=e.data("target-id"),n=e.parents("#"+t+"-pp-container"),s=n.nextAll(".sortable-item:first");p(n),s.length&&($(s).after(n),u(n.parent()),kunstmaanbundles.checkIfEdited.edited()),n.velocity("scroll",{duration:500,offset:-200,easing:"ease-in-out"}),a.activeEdit=t},resizePagePartView=function(a){var e=a.data("target-id"),t=($("#"+e),$("#"+e+"-preview-view")),n=t.parent();n.toggleClass("action--maximize"),a.toggleClass("pp__actions__action--resize-max"),n.hasClass("action--maximize")?(a.find("i").removeClass("fa-minus").addClass("fa-plus"),n.velocity({height:"7rem"},{duration:400,easing:"ease-in-out"})):(a.find("i").removeClass("fa-plus").addClass("fa-minus"),n.velocity({height:"100%"},{duration:400,easing:"ease-in-out"}))},resizeAllRegionPp=function(a){var e=a.data("target"),t=$("#"+e);t.find(".pp__view");a.hasClass("region__actions__min")?(t.velocity({height:"11.8rem"},{duration:400,easing:"ease-in-out"}),t.addClass("action--maximize")):a.hasClass("region__actions__max")&&(t.velocity({height:"100%"},{duration:400,easing:"ease-in-out"}),t.removeClass("action--maximize"))},r=function(a,e){if(!m.hasOwnProperty(a))throw new Error("PagePartEditor: I cannot let you subscribe to the unknown event named: "+a);m[a].push(e)},c=function(a,e){if(!m.hasOwnProperty(a))throw new Error("PagePartEditor: I cannot let you unSubscribe to the unknown event named: "+a);m=m.filter(function(a){return a!==e})},l=function(a,e){m[a].forEach(function(a){a({target:e})})},p=function(a){var e=[];a.find("*[data-reinit-js]").each(function(){var a=$(this).data("reinit-js");if(a)for(var t=0;t0&&void 0!==CKEDITOR&&void 0!==CKEDITOR.plugins)for(var t=0;t0;){for(p=E.getFirst(),m=0;m'); $temp.append(data); + const ppScope = $temp[0].lastElementChild.dataset.scope; // Check if some javascript needs to be reinitialised for this PP reInit($temp); @@ -116,6 +121,13 @@ kunstmaanbundles.pagepartEditor = function (window) { // Reset ajax-modals kunstmaanbundles.ajaxModal.resetAjaxModals(); + events.add.push(function() { + if (allowAutoSpacer && ppScope !== spacerPagePart.replace('\\', '') && !spacerAdded) { + addSpacer(requestUrl, pageClassName, pageId, context, spacerPagePart, $select); + spacerAdded = true; + } + }); + executeEvent('add'); } }); @@ -127,7 +139,8 @@ kunstmaanbundles.pagepartEditor = function (window) { // Add addPagePartExtended = function ($select) { var $targetContainer = target.closest('.js-pp-container'), - requestUrl = target.data('url'); + requestUrl = target.data('url'), + spacerPagePart = $('body').data('spacer-pp'); // Get necessary data var pageClassName = $targetContainer.data('pageclassname'), @@ -135,6 +148,9 @@ kunstmaanbundles.pagepartEditor = function (window) { context = $targetContainer.data('context'), ppType = $select.data('pagepartclass'); + const allowAutoSpacer = $targetContainer.parent().parent().hasClass('js-auto-spacer'); + var spacerAdded = false; + // Set Loading kunstmaanbundles.appLoading.addLoading(); @@ -161,6 +177,7 @@ kunstmaanbundles.pagepartEditor = function (window) { // Create a temporary node of the new PP var $temp = $('
'); $temp.append(data); + const ppScope = $temp[0].lastElementChild.dataset.scope; // Check if some javascript needs to be reinitialised for this PP reInit($temp); @@ -177,6 +194,13 @@ kunstmaanbundles.pagepartEditor = function (window) { // Reset ajax-modals kunstmaanbundles.ajaxModal.resetAjaxModals(); + events.add.push(function() { + if (allowAutoSpacer && ppScope !== spacerPagePart.replace('\\', '') && !spacerAdded) { + addSpacer(requestUrl, pageClassName, pageId, context, spacerPagePart, target); + spacerAdded = true; + } + }); + executeEvent('add'); } }); @@ -184,6 +208,41 @@ kunstmaanbundles.pagepartEditor = function (window) { $('#' + $select.data('pagepartmodalname')).modal('hide'); }; + addSpacer = function addSpacer(requestUrl, pageClassName, pageId, context, spacerPagePart, $select) { + $.ajax({ + url: requestUrl, + data: { + 'pageclassname': pageClassName, + 'pageid': pageId, + 'context': context, + 'type': spacerPagePart, + }, + async: true, + success: function (data) { + // Add PP + const elem = $select.closest('.js-sortable-item').after(data); + + // Create a temporary node of the new PP + const $temp = $('
'); + $temp.append(data); + + // Check if some javascript needs to be reinitialised for this PP + reInit($temp); + + // Remove Loading + kunstmaanbundles.appLoading.removeLoading(); + + // Enable leave-page modal + kunstmaanbundles.checkIfEdited.edited(); + + // Reinit custom selects + kunstmaanbundles.advancedSelect.init(); + + // Reset ajax-modals + kunstmaanbundles.ajaxModal.resetAjaxModals(); + }, + }); + }; // Edit editPagePart = function ($btn) { diff --git a/src/Kunstmaan/GeneratorBundle/Command/InstallCommand.php b/src/Kunstmaan/GeneratorBundle/Command/InstallCommand.php index 933a8985fb..c263ed9e05 100644 --- a/src/Kunstmaan/GeneratorBundle/Command/InstallCommand.php +++ b/src/Kunstmaan/GeneratorBundle/Command/InstallCommand.php @@ -11,6 +11,7 @@ use Symfony\Component\Console\Input\InputOption; use Symfony\Component\Console\Output\OutputInterface; use Symfony\Component\Console\Style\SymfonyStyle; +use Symfony\Component\HttpKernel\Kernel; use Symfony\Component\Process\Process; /** @@ -57,6 +58,8 @@ protected function configure() new InputOption('namespace', '', InputOption::VALUE_OPTIONAL, 'The namespace of the bundle to create (only for SF3)'), new InputOption('dir', '', InputOption::VALUE_OPTIONAL, 'The directory where to create the bundle (only for SF3)'), new InputOption('bundle-name', '', InputOption::VALUE_OPTIONAL, 'The optional bundle name (only for SF3)'), + new InputOption('new-cms-skeleton', '', InputOption::VALUE_NONE, 'Use the new cms skeleton and default pageparts'), + new InputOption('prefix', '', InputOption::VALUE_REQUIRED, 'The prefix to be used in the table name of the generated entities', ''), ] ) ); @@ -83,6 +86,13 @@ protected function interact(InputInterface $input, OutputInterface $output) $outputStyle->writeln('Installing KunstmaanCms...'); $outputStyle->writeln($this->getKunstmaanLogo()); + if (Kernel::VERSION_ID < 40000 && $input->getOption('new-cms-skeleton')) { + $output->writeln('The new cms skeleton and default pageparts are not supported on Symfony 3'); + $this->shouldStop = true; + + return; + } + if (true !== $input->getOption('db-installed')) { $this->shouldStop = !$this->assistant->askConfirmation('We need access to your database. Are the database credentials setup properly? (y/n)', 'y'); if ($this->shouldStop) { @@ -90,7 +100,12 @@ protected function interact(InputInterface $input, OutputInterface $output) } } - if (null === $input->getOption('demosite')) { + if ($input->getOption('demosite') && $input->getOption('new-cms-skeleton')) { + $this->assistant->writeSection('The demosite option is not available together with the new cms skeleton and default pageparts. Ignoring the demosite option..', 'bg=yellow;fg=black;options=bold'); + $input->setOption('demosite', 'No'); + } + + if (null === $input->getOption('demosite') && false === $input->getOption('new-cms-skeleton')) { $demoSiteOption = $this->assistant->askConfirmation('Do you want to create a "demosite"? (y/n)', 'n', '?', false); $input->setOption('demosite', $demoSiteOption === true ? 'Yes' : 'No'); } @@ -119,7 +134,9 @@ protected function execute(InputInterface $input, OutputInterface $output) $this->initAssistant($input, $output); - $defaultSiteOptions = []; + $defaultSiteOptions = [ + '--prefix' => $input->getOption('prefix'), + ]; $defaultSiteOptions['--browsersync'] = 'https://myproject.dev'; if ($input->getOption('demosite') === 'Yes') { $defaultSiteOptions['--articleoverviewpageparent'] = 'HomePage'; @@ -132,8 +149,14 @@ protected function execute(InputInterface $input, OutputInterface $output) $this->executeCommand($output, 'kuma:generate:config'); + if ($input->getOption('new-cms-skeleton')) { + $this->executeCommand($output, 'make:website-skeleton', $defaultSiteOptions); + $this->executeCommand($output, 'make:default-pageparts', $defaultSiteOptions); + } else { + $this->executeCommand($output, 'kuma:generate:default-site', $defaultSiteOptions); + } + $this - ->executeCommand($output, 'kuma:generate:default-site', $defaultSiteOptions) ->executeCommand($output, 'doctrine:database:create') ->executeCommand($output, 'doctrine:schema:drop', ['--force' => true]) ->executeCommand($output, 'doctrine:schema:create') @@ -153,7 +176,7 @@ protected function execute(InputInterface $input, OutputInterface $output) protected function executeCommand(OutputInterface $output, $command, array $options = [], $separateProcess = false) { - $options = array_merge(['--no-debug' => true], $options); + $options = array_merge(['--no-debug' => true, 'command' => $command], $options); ++$this->commandSteps; diff --git a/src/Kunstmaan/GeneratorBundle/DependencyInjection/KunstmaanGeneratorExtension.php b/src/Kunstmaan/GeneratorBundle/DependencyInjection/KunstmaanGeneratorExtension.php index 75ca8c6747..aa43c6585d 100644 --- a/src/Kunstmaan/GeneratorBundle/DependencyInjection/KunstmaanGeneratorExtension.php +++ b/src/Kunstmaan/GeneratorBundle/DependencyInjection/KunstmaanGeneratorExtension.php @@ -13,5 +13,6 @@ public function load(array $configs, ContainerBuilder $container) { $loader = new YamlFileLoader($container, new FileLocator(__DIR__ . '/../Resources/config')); $loader->load('services.yml'); + $loader->load('maker.yml'); } } diff --git a/src/Kunstmaan/GeneratorBundle/Helper/DoctrineHelper.php b/src/Kunstmaan/GeneratorBundle/Helper/DoctrineHelper.php new file mode 100644 index 0000000000..d57a7c710d --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Helper/DoctrineHelper.php @@ -0,0 +1,19 @@ +build(); + return $inflector->tableize($inflector->pluralize($className)); + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Helper/SymfonyVersionChecker.php b/src/Kunstmaan/GeneratorBundle/Helper/SymfonyVersionChecker.php new file mode 100644 index 0000000000..ef1b8fe70a --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Helper/SymfonyVersionChecker.php @@ -0,0 +1,16 @@ += 40000; + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Maker/MakeDefaultPageparts.php b/src/Kunstmaan/GeneratorBundle/Maker/MakeDefaultPageparts.php new file mode 100644 index 0000000000..912bcac4ac --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Maker/MakeDefaultPageparts.php @@ -0,0 +1,217 @@ +projectDir = $projectDir; + $this->fs = new Filesystem(); + + $this->twig = new Environment(new FilesystemLoader([__DIR__ . '/../Resources/skeleton']), [ + 'debug' => true, + 'cache' => false, + 'strict_variables' => true, + 'autoescape' => false, + ]); + } + + /** + * Return the command name for your maker (e.g. make:report). + * + * @return string + */ + public static function getCommandName(): string + { + return 'make:default-pageparts'; + } + + /** + * Configure the command: set description, input arguments, options, etc. + * + * By default, all arguments will be asked interactively. If you want + * to avoid that, use the $inputConfig->setArgumentAsNonInteractive() method. + * + * @param Command $command + * @param InputConfiguration $inputConfig + */ + public function configureCommand(Command $command, InputConfiguration $inputConfig) + { + $command + ->setDescription('Copy the default pageparts') + ->addOption('prefix', null, InputOption::VALUE_REQUIRED, 'The prefix to be used in the table name of the generated entities', '') + ; + } + + /** + * Configure any library dependencies that your maker requires. + * + * @param DependencyBuilder $dependencies + */ + public function configureDependencies(DependencyBuilder $dependencies) + { + $dependencies->addClassDependency( + Environment::class, + 'twig' + ); + + $dependencies->addClassDependency( + Filesystem::class, + 'filesystem' + ); + + $dependencies->addClassDependency( + Finder::class, + 'finder' + ); + } + + /** + * Called after normal code generation: allows you to do anything. + * + * @param InputInterface $input + * @param ConsoleStyle $io + * @param Generator $generator + */ + public function generate(InputInterface $input, ConsoleStyle $io, Generator $generator) + { + if (false === SymfonyVersionChecker::isSymfony4()) { + throw new \InvalidArgumentException('This command can only be executed on symfony 4.'); + } + + $dbPrefix = ''; + if ($input->getOption('prefix')) { + $dbPrefix = rtrim($input->getOption('prefix'), '_') . '_'; + } + + $types = []; + foreach ($this->getAllDefaultPageParts() as $pagePart) { + $pagePartName = $pagePart->getBasename('.php'); + + $pagePartClassDetails = $generator->createClassNameDetails($pagePartName, 'Entity\\PageParts\\'); + $adminTypeClassDetails = $generator->createClassNameDetails($pagePartName . 'AdminType', 'Form\\PageParts\\'); + + $this->fs->dumpFile($this->projectDir . '/src/Entity/PageParts/' . $pagePartName . '.php', $this->renderPagePartClass($pagePartClassDetails, $adminTypeClassDetails, $generator->getRootNamespace(), $dbPrefix)); + + if ($pagePartName === 'AbstractPagePart') { + continue; + } + + $this->fs->dumpFile($this->projectDir . '/src/Form/PageParts/' . $adminTypeClassDetails->getShortName() . '.php', $this->renderAdminTypeClass($pagePartClassDetails, $adminTypeClassDetails, $generator->getRootNamespace())); + + $this->fs->mirror(__DIR__ . '/../Resources/skeleton/default-pageparts/templates/PageParts/' . $pagePartName, $this->projectDir . '/templates/pageparts/' . Str::asSnakeCase(str_replace('PagePart', 'Pagepart', $pagePartName))); + + $types[] = [ + 'name' => str_replace('PagePart', '', $pagePartClassDetails->getShortName()), + 'class' => $pagePartClassDetails->getFullName(), + ]; + } + + $this->renderExtraClasses($generator->getRootNamespace(), $dbPrefix); + + $originalTypes = []; + $data = Yaml::parse(file_get_contents($this->projectDir . '/config/kunstmaancms/pageparts/main.yml')); + if (array_key_exists('kunstmaan_page_part', $data)) { + $originalTypes = $data['kunstmaan_page_part']['pageparts']['main']['types']; + } + + $types = array_merge($originalTypes, $types); + + $data['kunstmaan_page_part']['pageparts']['main']['types'] = $types; + $ymlData = Yaml::dump($data, 5); + file_put_contents($this->projectDir . '/config/kunstmaancms/pageparts/main.yml', $ymlData); + } + + private function renderPagePartClass(ClassNameDetails $pagePartClassDetails, ClassNameDetails $adminTypeClassDetails, $rootNamespace, $dbPrefix): string + { + return $this->twig->render('/default-pageparts/entities/pageparts/' . $pagePartClassDetails->getShortName() . '.php', [ + 'namespace' => $rootNamespace, + 'table_name' => $dbPrefix . DoctrineHelper::convertToTableName($pagePartClassDetails->getShortName()), + 'admin_type_class' => $adminTypeClassDetails->getShortName(), + 'admin_type_full' => $adminTypeClassDetails->getFullName(), + ]); + } + + private function renderAdminTypeClass(ClassNameDetails $pagePartClassDetails, ClassNameDetails $adminTypeClassDetails, $rootNamespace): string + { + return $this->twig->render('/default-pageparts/forms/pageparts/' . $adminTypeClassDetails->getShortName() . '.php', [ + 'namespace' => $rootNamespace, + 'pagepart_class' => $pagePartClassDetails->getShortName(), + 'pagepart_class_full' => $pagePartClassDetails->getFullName(), + ]); + } + + private function renderExtraClasses($rootNamespace, $dbPrefix) + { + $this->fs->dumpFile($this->projectDir . '/src/Entity/UspItem.php', $this->twig->render('/default-pageparts/entities/UspItem.php', [ + 'namespace' => $rootNamespace, + 'db_prefix' => $dbPrefix, + ])); + + $this->fs->dumpFile($this->projectDir . '/src/Form/UspItemAdminType.php', $this->twig->render('/default-pageparts/forms/UspItemAdminType.php', [ + 'namespace' => $rootNamespace, + ])); + + $this->fs->dumpFile($this->projectDir . '/src/Entity/MapItem.php', $this->twig->render('/default-pageparts/entities/MapItem.php', [ + 'namespace' => $rootNamespace, + 'db_prefix' => $dbPrefix, + ])); + + $this->fs->dumpFile($this->projectDir . '/src/Form/MapItemAdminType.php', $this->twig->render('/default-pageparts/forms/MapItemAdminType.php', [ + 'namespace' => $rootNamespace, + ])); + + $this->fs->dumpFile($this->projectDir . '/src/Entity/GalleryRow.php', $this->twig->render('/default-pageparts/entities/GalleryRow.php', [ + 'namespace' => $rootNamespace, + 'db_prefix' => $dbPrefix, + ])); + + $this->fs->dumpFile($this->projectDir . '/src/Form/GalleryRowAdminType.php', $this->twig->render('/default-pageparts/forms/GalleryRowAdminType.php', [ + 'namespace' => $rootNamespace, + ])); + + $this->fs->dumpFile($this->projectDir . '/src/Entity/GalleryRowMediaItem.php', $this->twig->render('/default-pageparts/entities/GalleryRowMediaItem.php', [ + 'namespace' => $rootNamespace, + 'db_prefix' => $dbPrefix, + ])); + + $this->fs->dumpFile($this->projectDir . '/src/Form/GalleryRowMediaItemAdminType.php', $this->twig->render('/default-pageparts/forms/GalleryRowMediaItemAdminType.php', [ + 'namespace' => $rootNamespace, + ])); + } + + private function getAllDefaultPageParts(): Finder + { + $finder = (new Finder())->files()->name('*PagePart.php')->in(__DIR__ . '/../Resources/skeleton/default-pageparts/entities/pageparts')->sortByName(); + + return $finder; + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Maker/MakeWebsiteSkeleton.php b/src/Kunstmaan/GeneratorBundle/Maker/MakeWebsiteSkeleton.php new file mode 100644 index 0000000000..94f3f64749 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Maker/MakeWebsiteSkeleton.php @@ -0,0 +1,184 @@ +projectDir = $projectDir; + $this->fs = new Filesystem(); + + $this->twig = new Environment(new FilesystemLoader([__DIR__ . '/../Resources/skeleton']), [ + 'debug' => true, + 'cache' => false, + 'strict_variables' => true, + 'autoescape' => false, + ]); + } + + /** + * {@inheritdoc} + */ + public static function getCommandName(): string + { + return 'make:website-skeleton'; + } + + /** + * {@inheritdoc} + */ + public function configureCommand(Command $command, InputConfiguration $inputConfig) + { + $command + ->setDescription('Create the kunstmaan CMS skeleton') + ->addOption('browser-sync-url', null, InputOption::VALUE_REQUIRED, 'The URI that will be used for browsersync to connect') + ->addOption('prefix', null, InputOption::VALUE_REQUIRED, 'The prefix to be used in the table name of the generated entities', '') + ; + } + + /** + * {@inheritdoc} + */ + public function generate(InputInterface $input, ConsoleStyle $io, Generator $generator) + { + if (false === SymfonyVersionChecker::isSymfony4()) { + throw new \InvalidArgumentException('This command can only be executed on symfony 4.'); + } + + $this->copyGroundcontrol($input, $io, $generator); + $this->copyAssets($input, $io, $generator); + + $this->copyDefaultController(); + $this->copyTemplates($input, $io, $generator); + $this->copyDefaultPages($input, $generator, ['HomePage', 'ContentPage']); + $this->copyDefaultSiteFixture($generator); + $this->copyPageAndPagepartConfigs(); + + $generator->writeChanges(); + } + + /** + * {@inheritdoc} + */ + public function configureDependencies(DependencyBuilder $dependencies) + { + $dependencies->addClassDependency( + Filesystem::class, + 'filesystem' + ); + + $dependencies->addClassDependency( + Finder::class, + 'finder' + ); + } + + private function copyGroundcontrol(InputInterface $input, ConsoleStyle $io, Generator $generator) + { + $mirrorIterator = (new Finder()) + ->files() + ->in(__DIR__ . '/../Resources/skeleton/website-skeleton/groundcontrol/bin') + ->filter(function (\SplFileInfo $fileinfo) { + return !($fileinfo->getRelativePathname() === 'configured-tasks.js'); + }) + ->getIterator(); + + $this->fs->mirror(__DIR__ . '/../Resources/skeleton/website-skeleton/groundcontrol', $this->projectDir); + $this->fs->mirror(__DIR__ . '/../Resources/skeleton/website-skeleton/groundcontrol/bin', $this->projectDir . '/groundcontrol', $mirrorIterator); + + $io->comment(sprintf('%s: %s', 'created', 'groundcontrol skeleton')); + + $generator->generateFile($this->projectDir . '/groundcontrol/configured-tasks.js', __DIR__ . '/../Resources/skeleton/website-skeleton/groundcontrol/bin/configured-tasks.js', ['browserSyncUrl' => $input->getOption('browser-sync-url')]); + } + + private function copyAssets(InputInterface $input, ConsoleStyle $io, Generator $generator) + { + $this->fs->mirror(__DIR__ . '/../Resources/skeleton/website-skeleton/assets/', $this->projectDir . '/assets'); + + $io->comment(sprintf('%s: %s', 'created', 'ui skeleton')); + } + + private function copyTemplates(InputInterface $input, ConsoleStyle $io, Generator $generator) + { + $this->fs->mirror(__DIR__ . '/../Resources/skeleton/website-skeleton/templates/', $this->projectDir . '/templates'); + + $io->comment(sprintf('%s: %s', 'created', 'template skeleton')); + } + + private function copyDefaultPages(InputInterface $input, Generator $generator, array $pages) + { + $dbPrefix = ''; + if ($input->getOption('prefix')) { + $dbPrefix = rtrim($input->getOption('prefix'), '_') . '_'; + } + + foreach ($pages as $page) { + $pageClassDetails = $generator->createClassNameDetails($page, 'Entity\\Pages\\'); + $adminTypeClassDetails = $generator->createClassNameDetails($page . 'AdminType', 'Form\\Pages\\'); + + $pageClass = $this->twig->render('/website-skeleton/entities/' . $pageClassDetails->getShortName() . '.php', [ + 'namespace' => $generator->getRootNamespace(), + 'table_name' => $dbPrefix . DoctrineHelper::convertToTableName($pageClassDetails->getShortName()), + 'admin_type_class' => $adminTypeClassDetails->getShortName(), + 'admin_type_full' => $adminTypeClassDetails->getFullName(), + ]); + + $pageAdminType = $this->twig->render('/website-skeleton/form/' . $adminTypeClassDetails->getShortName() . '.php', [ + 'namespace' => $generator->getRootNamespace(), + 'pagepart_class' => $pageClassDetails->getShortName(), + 'pagepart_class_full' => $pageClassDetails->getFullName(), + ]); + + $this->fs->dumpFile($this->projectDir . '/src/Entity/Pages/' . $pageClassDetails->getShortName() . '.php', $pageClass); + + $this->fs->dumpFile($this->projectDir . '/src/Form/Pages/' . $adminTypeClassDetails->getShortName() . '.php', $pageAdminType); + + $this->fs->mirror(__DIR__ . '/../Resources/skeleton/website-skeleton/templates/pages/' . Str::asSnakeCase($pageClassDetails->getShortName()), $this->projectDir . '/templates/pages/' . Str::asSnakeCase($pageClassDetails->getShortName())); + } + } + + private function copyDefaultController() + { + $this->fs->copy(__DIR__ . '/../Resources/skeleton/website-skeleton/controller/DefaultController.php', $this->projectDir . '/src/Controller/DefaultController.php'); + } + + private function copyDefaultSiteFixture(Generator $generator) + { + $fixtureClass = $this->twig->render('/website-skeleton/fixtures/DefaultSiteFixtures.php', [ + 'namespace' => $generator->getRootNamespace(), + ]); + + $this->fs->dumpFile($this->projectDir . '/src/DataFixtures/ORM/DefaultSiteGenerator/DefaultSiteFixtures.php', $fixtureClass); + } + + private function copyPageAndPagepartConfigs() + { + $this->fs->mirror(__DIR__ . '/../Resources/skeleton/website-skeleton/config/', $this->projectDir . '/config/kunstmaancms'); + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/config/liip_imagine.yaml b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/config/liip_imagine.yaml index efd5c80612..152801c2b2 100644 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/config/liip_imagine.yaml +++ b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/config/liip_imagine.yaml @@ -28,8 +28,78 @@ liip_imagine: format: png filters: strip: ~ - - # ImagePagePart srcset JPG filters + image_huge_jpg_low: + quality: 1 + format: jpg + filters: + strip: ~ + thumbnail: { size: [2400,null], mode: outbound, allow_upscale: false } + image_big_jpg_low: + quality: 1 + format: jpg + filters: + strip: ~ + thumbnail: { size: [1200,null], mode: outbound, allow_upscale: false } + image_medium_jpg_low: + quality: 1 + format: jpg + filters: + strip: ~ + thumbnail: { size: [600,null], mode: outbound, allow_upscale: false } + image_small_jpg_low: + quality: 1 + format: jpg + filters: + strip: ~ + thumbnail: { size: [400,null], mode: outbound, allow_upscale: false } + image_huge_jpeg_low: + quality: 1 + format: jpeg + filters: + strip: ~ + thumbnail: { size: [2400,null], mode: outbound, allow_upscale: false } + image_big_jpeg_low: + quality: 1 + format: jpeg + filters: + strip: ~ + thumbnail: { size: [1200,null], mode: outbound, allow_upscale: false } + image_medium_jpeg_low: + quality: 1 + format: jpeg + filters: + strip: ~ + thumbnail: { size: [600,null], mode: outbound, allow_upscale: false } + image_small_jpeg_low: + quality: 1 + format: jpeg + filters: + strip: ~ + thumbnail: { size: [400,null], mode: outbound, allow_upscale: false } + image_huge_png_low: + quality: 1 + format: png + filters: + strip: ~ + thumbnail: { size: [2400,null], mode: outbound, allow_upscale: false } + image_big_png_low: + quality: 1 + format: png + filters: + strip: ~ + thumbnail: { size: [1200,null], mode: outbound, allow_upscale: false } + image_medium_png_low: + quality: 1 + format: png + filters: + strip: ~ + thumbnail: { size: [600,null], mode: outbound, allow_upscale: false } + image_small_png_low: + quality: 1 + format: png + filters: + strip: ~ + thumbnail: { size: [400,null], mode: outbound, allow_upscale: false } image_huge_jpg: quality: 95 format: jpg @@ -54,8 +124,6 @@ liip_imagine: filters: strip: ~ thumbnail: { size: [400,null], mode: outbound, allow_upscale: false } - - # ImagePagePart srcset PNG filters image_huge_png: quality: 95 format: png @@ -80,3 +148,107 @@ liip_imagine: filters: strip: ~ thumbnail: { size: [400,null], mode: outbound, allow_upscale: false } + hero_low: + quality: 1 + format: jpg + filters: + strip: ~ + thumbnail: { size: [1440,null], mode: outbound, allow_upscale: false } + hero: + quality: 95 + format: jpg + filters: + strip: ~ + thumbnail: { size: [1440,null], mode: outbound, allow_upscale: false } + banner_low: + quality: 1 + format: jpeg + filters: + strip: ~ + thumbnail: { size: [900,null], mode: outbound, allow_upscale: false } + banner: + quality: 95 + format: jpeg + filters: + strip: ~ + thumbnail: { size: [900,null], mode: outbound, allow_upscale: false } + banner_img_low: + quality: 1 + format: jpeg + filters: + strip: ~ + thumbnail: { size: [360,null], mode: outbound, allow_upscale: false } + banner_img: + quality: 95 + format: jpeg + filters: + strip: ~ + thumbnail: { size: [360,null], mode: outbound, allow_upscale: false } + image_gallery_full_low: + quality: 1 + filters: + strip: ~ + thumbnail: { size: [1440,null], mode: outbound, allow_upscale: false } + image_gallery_half_low: + quality: 1 + filters: + strip: ~ + thumbnail: { size: [700,null], mode: outbound, allow_upscale: false } + image_gallery_third_low: + quality: 1 + filters: + strip: ~ + thumbnail: { size: [440,null], mode: outbound, allow_upscale: false } + image_gallery_full: + quality: 95 + filters: + strip: ~ + thumbnail: { size: [1440,null], mode: outbound, allow_upscale: false } + image_gallery_half: + quality: 95 + filters: + strip: ~ + thumbnail: { size: [700,null], mode: outbound, allow_upscale: false } + image_gallery_third: + quality: 95 + filters: + strip: ~ + thumbnail: { size: [440,null], mode: outbound, allow_upscale: false } + media_with_content_low: + quality: 1 + format: jpeg + filters: + strip: ~ + upscale: { min: [720,500] } + thumbnail: { size: [720,500], mode: outbound } + media_with_content: + quality: 95 + format: jpeg + filters: + strip: ~ + upscale: { min: [720,500] } + thumbnail: { size: [720,500], mode: outbound } + usp_low: + quality: 1 + format: jpeg + filters: + strip: ~ + thumbnail: { size: [600,null], mode: outbound, allow_upscale: false } + usp: + quality: 95 + format: jpeg + filters: + strip: ~ + thumbnail: { size: [600,null], mode: outbound, allow_upscale: false } + video_link_low: + quality: 1 + format: jpg + filters: + strip: ~ + thumbnail: { size: [1440,null], mode: outbound, allow_upscale: false } + video_link: + quality: 95 + format: jpg + filters: + strip: ~ + thumbnail: { size: [1440,null], mode: outbound, allow_upscale: false } diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/defaultsite/Resources/views/Pages/ContentPage/pagetemplate.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/defaultsite/Resources/views/Pages/ContentPage/pagetemplate.html.twig index 7263750572..39d057c66f 100644 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/defaultsite/Resources/views/Pages/ContentPage/pagetemplate.html.twig +++ b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/defaultsite/Resources/views/Pages/ContentPage/pagetemplate.html.twig @@ -1,10 +1,7 @@ -
+{{ render_pageparts(page, 'main') }} - {{ render_pageparts(page, 'main') }} - - <% if demosite %> +<% if demosite %>
{% include '<% if not isV4 %><%= bundle.name %>:<% endif %>Layout<% if not isV4 %>:<% else %>/<% endif %>submenu.html.twig' with {'page': page} %}
- <% endif %> -
+<% endif %> diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/defaultsite/Resources/views/Pages/ContentPage/view.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/defaultsite/Resources/views/Pages/ContentPage/view.html.twig old mode 100755 new mode 100644 diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/defaultsite/Resources/views/Pages/HomePage/pagetemplate.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/defaultsite/Resources/views/Pages/HomePage/pagetemplate.html.twig index 3444db5ac8..e09241a9f6 100644 --- a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/defaultsite/Resources/views/Pages/HomePage/pagetemplate.html.twig +++ b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/defaultsite/Resources/views/Pages/HomePage/pagetemplate.html.twig @@ -38,3 +38,4 @@
<% endif %> + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/defaultsite/Resources/views/Pages/HomePage/view.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/SensioGeneratorBundle/skeleton/defaultsite/Resources/views/Pages/HomePage/view.html.twig old mode 100755 new mode 100644 diff --git a/src/Kunstmaan/GeneratorBundle/Resources/config/maker.yml b/src/Kunstmaan/GeneratorBundle/Resources/config/maker.yml new file mode 100644 index 0000000000..8ae0547c75 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/config/maker.yml @@ -0,0 +1,13 @@ +services: + Kunstmaan\GeneratorBundle\Maker\MakeWebsiteSkeleton: + arguments: + - '%kernel.project_dir%' + tags: + - { name: maker.command } + + Kunstmaan\GeneratorBundle\Maker\MakeDefaultPageparts: + arguments: + - '%kernel.project_dir%' + tags: + - { name: maker.command } + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/GalleryRow.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/GalleryRow.php new file mode 100644 index 0000000000..67da46e8d8 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/GalleryRow.php @@ -0,0 +1,106 @@ +mediaItems = new ArrayCollection(); + } + + public function setGalleryPagePart(GalleryPagePart $galleryPagePart): GalleryRow + { + $this->galleryPagePart = $galleryPagePart; + + return $this; + } + + public function getGalleryPagePart(): ?GalleryRow + { + return $this->galleryPagePart; + } + + /** + * @return Collection|GalleryRowMediaItem[] + */ + public function getMediaItems(): ?Collection + { + return $this->mediaItems; + } + + public function addMediaItem(GalleryRowMediaItem $item) + { + if (!$this->mediaItems->contains($item)) { + $this->mediaItems->add($item); + $item->setGalleryRow($this); + } + + return $this; + } + + public function removeMediaItem(GalleryRowMediaItem $item) + { + if ($this->mediaItems->contains($item)) { + $this->mediaItems->removeElement($item); + } + + return $this; + } + + public function getWeight(): ?int + { + return $this->weight; + } + + public function setWeight(int $weight): GalleryRow + { + $this->weight = $weight; + + return $this; + } + + /** + * When cloning this entity, also clone all entities in the item ArrayCollection. + */ + public function deepClone(): void + { + $items = $this->getMediaItems(); + $this->mediaItems = new ArrayCollection(); + foreach ($items as $item) { + $cloneItem = clone $item; + $this->addMediaItem($cloneItem); + } + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/GalleryRowMediaItem.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/GalleryRowMediaItem.php new file mode 100644 index 0000000000..f8f8ab2291 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/GalleryRowMediaItem.php @@ -0,0 +1,72 @@ +media; + } + + public function setMedia(Media $media): GalleryRowMediaItem + { + $this->media = $media; + + return $this; + } + + public function getWeight(): ?int + { + return $this->weight; + } + + public function setWeight(int $weight): GalleryRowMediaItem + { + $this->weight = $weight; + + return $this; + } + + public function getGalleryRow(): ?GalleryRow + { + return $this->galleryRow; + } + + public function setGalleryRow($galleryRow): GalleryRowMediaItem + { + $this->galleryRow = $galleryRow; + + return $this; + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/MapItem.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/MapItem.php new file mode 100644 index 0000000000..28a9cf0d56 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/MapItem.php @@ -0,0 +1,69 @@ +latitude; + } + + public function setLatitude(float $latitude): MapItem + { + $this->latitude = $latitude; + + return $this; + } + + public function getLongitude(): ?float + { + return $this->longitude; + } + + public function setLongitude(float $longitude): MapItem + { + $this->longitude = $longitude; + + return $this; + } + + public function setMapPagePart(MapPagePart $mapPagePart): MapItem + { + $this->mapPagePart = $mapPagePart; + + return $this; + } + + public function getMapPagePart(): ?MapPagePart + { + return $this->mapPagePart; + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/UspItem.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/UspItem.php new file mode 100644 index 0000000000..a5238168a8 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/UspItem.php @@ -0,0 +1,159 @@ +icon = $icon; + + return $this; + } + + public function getIcon(): ?Media + { + return $this->icon; + } + + public function getTitle(): ?string + { + return $this->title; + } + + public function setTitle(string $title): UspItem + { + $this->title = $title; + + return $this; + } + + public function getDescription(): ?string + { + return $this->description; + } + + public function setDescription(string $description): UspItem + { + $this->description = $description; + + return $this; + } + + public function getLinkText(): ?string + { + return $this->linkText; + } + + public function setLinkText(string $linkText): UspItem + { + $this->linkText = $linkText; + + return $this; + } + + public function getLinkUrl(): ?string + { + return $this->linkUrl; + } + + public function setLinkUrl(string $linkUrl): UspItem + { + $this->linkUrl = $linkUrl; + + return $this; + } + + public function getLinkNewWindow(): bool + { + return $this->linkNewWindow; + } + + public function setLinkNewWindow(bool $linkNewWindow): UspItem + { + $this->linkNewWindow = $linkNewWindow; + + return $this; + } + + public function getWeight(): ?int + { + return $this->weight; + } + + public function setWeight(int $weight): UspItem + { + $this->weight = $weight; + + return $this; + } + + public function setUspPagePart(UspPagePart $uspPagePart): UspItem + { + $this->uspPagePart = $uspPagePart; + + return $this; + } + + public function getUspPagePart(): ?UspPagePart + { + return $this->uspPagePart; + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/AbstractPagePart.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/AbstractPagePart.php new file mode 100644 index 0000000000..f3a76f381d --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/AbstractPagePart.php @@ -0,0 +1,7 @@ +media; + } + + public function setMedia(Media $media): AudioPagePart + { + $this->media = $media; + + return $this; + } + + public function getDefaultView(): string + { + return 'pageparts/audio_pagepart/view.html.twig'; + } + + public function getDefaultAdminType(): string + { + return {{ admin_type_class }}::class; + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/BannerPagePart.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/BannerPagePart.php new file mode 100644 index 0000000000..cc41c85a2d --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/BannerPagePart.php @@ -0,0 +1,128 @@ +openInNewWindow; + } + + public function setOpenInNewWindow(bool $openInNewWindow): BannerPagePart + { + $this->openInNewWindow = $openInNewWindow; + + return $this; + } + + public function setButtonLink(string $buttonLink): BannerPagePart + { + $this->buttonLink = $buttonLink; + + return $this; + } + + public function getButtonLink(): ?string + { + return $this->buttonLink; + } + + public function setButtonText(string $buttonText): BannerPagePart + { + $this->buttonText = $buttonText; + + return $this; + } + + public function getButtonText(): ?string + { + return $this->buttonText; + } + + public function getBackgroundImage(): ?Media + { + return $this->backgroundImage; + } + + public function setBackgroundImage(Media $backgroundImage): BannerPagePart + { + $this->backgroundImage = $backgroundImage; + + return $this; + } + + public function getImage(): ?Media + { + return $this->image; + } + + public function setImage(Media $image): BannerPagePart + { + $this->image = $image; + + return $this; + } + + public function getText(): ?string + { + return $this->text; + } + + public function setText(string $text): BannerPagePart + { + $this->text = $text; + + return $this; + } + + public function getDefaultView(): string + { + return 'pageparts/banner_pagepart/view.html.twig'; + } + + public function getDefaultAdminType(): string + { + return {{ admin_type_class }}::class; + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/ButtonPagePart.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/ButtonPagePart.php new file mode 100644 index 0000000000..b90925d1e9 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/ButtonPagePart.php @@ -0,0 +1,199 @@ +type = self::TYPE_PRIMARY; + $this->size = self::SIZE_DEFAULT; + $this->position = self::POSITION_LEFT; + } + + public function setLinkNewWindow(bool $linkNewWindow): ButtonPagePart + { + $this->linkNewWindow = $linkNewWindow; + + return $this; + } + + public function isLinkNewWindow(): bool + { + return $this->linkNewWindow; + } + + public function setLinkText(string $linkText): ButtonPagePart + { + $this->linkText = $linkText; + + return $this; + } + + public function getLinkText(): ?string + { + return $this->linkText; + } + + public function setLinkUrl(?string $linkUrl): ButtonPagePart + { + $this->linkUrl = $linkUrl; + + return $this; + } + + public function getLinkUrl(): ?string + { + return $this->linkUrl; + } + + /** + * @throws \InvalidArgumentException + */ + public function setType(string $type): ButtonPagePart + { + if (!in_array($type, self::$types, true)) { + throw new \InvalidArgumentException(sprintf('Type "%s" not supported', $type)); + } + $this->type = $type; + + return $this; + } + + public function getType(): ?string + { + return $this->type; + } + + /** + * @throws \InvalidArgumentException + */ + public function setSize(string $size): ButtonPagePart + { + if (!in_array($size, self::$sizes, true)) { + throw new \InvalidArgumentException(sprintf('Size "%s" not supported', $size)); + } + $this->size = $size; + + return $this; + } + + public function getSize(): ?string + { + return $this->size; + } + + /** + * @throws \InvalidArgumentException + */ + public function setPosition(string $position): ButtonPagePart + { + if (!in_array($position, self::$positions, true)) { + throw new \InvalidArgumentException(sprintf('Position "%s" not supported', $position)); + } + $this->position = $position; + + return $this; + } + + public function getPosition(): ?string + { + return $this->position; + } + + public function getDefaultView(): string + { + return 'pageparts/button_pagepart/view.html.twig'; + } + + public function getDefaultAdminType(): string + { + return {{ admin_type_class }}::class; + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/DividerPagePart.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/DividerPagePart.php new file mode 100644 index 0000000000..4ceac2214a --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/DividerPagePart.php @@ -0,0 +1,23 @@ +media; + } + + public function setMedia(Media $media): DownloadPagePart + { + $this->media = $media; + + return $this; + } + + public function getDefaultView(): string + { + return 'pageparts/download_pagepart/view.html.twig'; + } + + public function getDefaultAdminType(): string + { + return {{ admin_type_class }}::class; + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/GalleryPagePart.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/GalleryPagePart.php new file mode 100644 index 0000000000..61a0545bc8 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/GalleryPagePart.php @@ -0,0 +1,80 @@ +rows = new ArrayCollection(); + } + + public function getRows(): Collection + { + return $this->rows; + } + + public function addRow(GalleryRow $row) + { + if (!$this->rows->contains($row)) { + $this->rows->add($row); + $row->setGalleryPagePart($this); + } + + return $this; + } + + public function removeRow(GalleryRow $row) + { + if ($this->rows->contains($row)) { + $this->rows->removeElement($row); + } + + return $this; + } + + public function getDefaultView(): string + { + return 'pageparts/gallery_pagepart/view.html.twig'; + } + + public function getDefaultAdminType(): string + { + return {{ admin_type_class }}::class; + } + + /** + * When cloning this entity, also clone all entities in the item ArrayCollection. + */ + public function deepClone(): void + { + /** @var Collection|GalleryRow[] $rows */ + $rows = $this->getRows(); + $this->rows = new ArrayCollection(); + foreach ($rows as $row) { + $cloneRow = clone $row; + $cloneRow->deepClone(); + + $this->addRow($cloneRow); + } + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/HeaderPagePart.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/HeaderPagePart.php new file mode 100644 index 0000000000..c7144c0faa --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/HeaderPagePart.php @@ -0,0 +1,89 @@ + 'left', + 'center' => 'center', + 'right' => 'right', + ]; + + /** + * @ORM\Column(name="niv", type="integer", nullable=true) + * @Assert\NotBlank(message="headerpagepart.niv.not_blank") + */ + private $niv; + + /** + * @ORM\Column(name="title", type="string", nullable=true) + * @Assert\NotBlank(message="headerpagepart.title.not_blank") + */ + private $title; + + /** + * @ORM\Column(type="string", nullable=true) + * @Assert\NotNull() + */ + private $alignment; + + /** + * @var array Supported header sizes + */ + public static $supportedHeaders = [1, 2, 3, 4, 5, 6]; + + public function setNiv(int $niv): HeaderPagePart + { + $this->niv = $niv; + + return $this; + } + + public function getNiv(): ?int + { + return $this->niv; + } + + public function setTitle(string $title): HeaderPagePart + { + $this->title = $title; + + return $this; + } + + public function getTitle(): ?string + { + return $this->title; + } + + public function getAlignment(): ?string + { + return $this->alignment; + } + + public function setAlignment(string $alignment): HeaderPagePart + { + $this->alignment = $alignment; + + return $this; + } + + public function getDefaultView(): string + { + return 'pageparts/header_pagepart/view.html.twig'; + } + + public function getDefaultAdminType(): string + { + return {{ admin_type_class }}::class; + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/HighlightPagePart.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/HighlightPagePart.php new file mode 100644 index 0000000000..ec45a7327c --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/HighlightPagePart.php @@ -0,0 +1,111 @@ +title; + } + + public function setTitle(string $title): HighlightPagePart + { + $this->title = $title; + + return $this; + } + + public function getText(): ?string + { + return $this->text; + } + + public function setText(string $text): HighlightPagePart + { + $this->text = $text; + + return $this; + } + + public function getLinkText(): ?string + { + return $this->linkText; + } + + public function setLinkText($linkText): HighlightPagePart + { + $this->linkText = $linkText; + + return $this; + } + + public function getLinkUrl(): ?string + { + return $this->linkUrl; + } + + public function setLinkUrl($linkUrl): HighlightPagePart + { + $this->linkUrl = $linkUrl; + + return $this; + } + + public function getLinkNewWindow(): bool + { + return $this->linkNewWindow; + } + + public function setLinkNewWindow(bool $linkNewWindow): HighlightPagePart + { + $this->linkNewWindow = $linkNewWindow; + + return $this; + } + + public function getDefaultView(): string + { + return 'pageparts/highlight_pagepart/view.html.twig'; + } + + public function getDefaultAdminType(): string + { + return {{ admin_type_class }}::class; + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/ImagePagePart.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/ImagePagePart.php new file mode 100644 index 0000000000..734c9d6a92 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/ImagePagePart.php @@ -0,0 +1,160 @@ + 'left', + 'center' => 'center', + 'right' => 'right', + ]; + + public const IMAGE_WIDTH = [ + 'natural' => 'natural', + 'container' => 'container', + 'full width' => 'full_width', + ]; + + /** + * @ORM\ManyToOne(targetEntity="Kunstmaan\MediaBundle\Entity\Media") + * @ORM\JoinColumn(name="media_id", referencedColumnName="id") + * @Assert\NotNull() + */ + private $media; + + /** + * @ORM\Column(type="string", nullable=true) + */ + private $caption; + + /** + * @ORM\Column(name="alt_text", type="string", nullable=true) + */ + private $altText; + + /** + * @ORM\Column(type="string", nullable=true) + */ + private $link; + + /** + * @ORM\Column(name="open_in_new_window", type="boolean", nullable=true) + */ + private $openInNewWindow = false; + + /** + * @ORM\Column(type="string", nullable=true) + * @Assert\NotNull() + */ + private $alignment; + + /** + * @ORM\Column(type="string", nullable=true) + * @Assert\NotNull() + */ + private $width; + + public function getOpenInNewWindow(): bool + { + return $this->openInNewWindow; + } + + public function setOpenInNewWindow(bool $openInNewWindow): ImagePagePart + { + $this->openInNewWindow = $openInNewWindow; + + return $this; + } + + public function setLink(string $link): ImagePagePart + { + $this->link = $link; + + return $this; + } + + public function getLink(): ?string + { + return $this->link; + } + + public function setAltText(string $altText): ImagePagePart + { + $this->altText = $altText; + + return $this; + } + + public function getAltText(): ?string + { + return $this->altText; + } + + public function getMedia(): ?Media + { + return $this->media; + } + + public function setMedia(Media $media): ImagePagePart + { + $this->media = $media; + + return $this; + } + + public function setCaption(string $caption): ImagePagePart + { + $this->caption = $caption; + + return $this; + } + + public function getCaption(): ?string + { + return $this->caption; + } + + public function getAlignment(): ?string + { + return $this->alignment; + } + + public function setAlignment(string $alignment): ImagePagePart + { + $this->alignment = $alignment; + + return $this; + } + + public function getWidth(): ?string + { + return $this->width; + } + + public function setWidth(string $width): ImagePagePart + { + $this->width = $width; + + return $this; + } + + public function getDefaultView(): string + { + return 'pageparts/image_pagepart/view.html.twig'; + } + + public function getDefaultAdminType(): string + { + return {{ admin_type_class }}::class; + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/IntroTextPagePart.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/IntroTextPagePart.php new file mode 100644 index 0000000000..4eadc0f4be --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/IntroTextPagePart.php @@ -0,0 +1,42 @@ +content = $content; + + return $this; + } + + public function getContent(): ?string + { + return $this->content; + } + + public function getDefaultView(): string + { + return 'pageparts/intro_text_pagepart/view.html.twig'; + } + + public function getDefaultAdminType(): string + { + return {{ admin_type_class }}::class; + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/MapPagePart.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/MapPagePart.php new file mode 100644 index 0000000000..5cf5a844be --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/MapPagePart.php @@ -0,0 +1,99 @@ +items = new ArrayCollection(); + } + + public function getText(): ?string + { + return $this->text; + } + + public function setText(string $text): MapPagePart + { + $this->text = $text; + + return $this; + } + + /** + * @return Collection|MapItem[] + */ + public function getItems(): Collection + { + return $this->items; + } + + public function addItem(MapItem $item) + { + if (!$this->items->contains($item)) { + $this->items->add($item); + $item->setMapPagePart($this); + } + + return $this; + } + + public function removeItem(MapItem $item) + { + if ($this->items->contains($item)) { + $this->items->removeElement($item); + } + + return $this; + } + + public function getDefaultView(): string + { + return 'pageparts/map_pagepart/view.html.twig'; + } + + public function getDefaultAdminType(): string + { + return {{ admin_type_class }}::class; + } + + /** + * When cloning this entity, also clone all entities in the item ArrayCollection. + */ + public function deepClone(): void + { + $items = $this->getItems(); + $this->items = new ArrayCollection(); + foreach ($items as $item) { + $cloneItem = clone $item; + $this->addItem($cloneItem); + } + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/MediaWithContentPagePart.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/MediaWithContentPagePart.php new file mode 100644 index 0000000000..a3fabf3b3d --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/MediaWithContentPagePart.php @@ -0,0 +1,194 @@ + 'left', + 'right' => 'right', + ]; + + public const CONTENT_ALIGNMENT = [ + 'left' => 'left', + 'center' => 'center', + ]; + + /** + * @ORM\ManyToOne(targetEntity="Kunstmaan\MediaBundle\Entity\Media") + * @ORM\JoinColumns({ + * @ORM\JoinColumn(name="image_id", referencedColumnName="id") + * }) + * @Assert\NotBlank() + */ + private $image; + + /** + * @ORM\Column(name="image_position", type="text", nullable=true) + * @Assert\NotBlank() + */ + private $imagePosition; + + /** + * @ORM\Column(name="image_alt_text", type="text", nullable=true) + */ + private $imageAltText; + + /** + * @ORM\Column(name="content_alignment", type="text", nullable=true) + * @Assert\NotBlank() + */ + private $contentAlignment; + + /** + * @ORM\Column(type="string", nullable=true) + */ + private $title; + + /** + * @ORM\Column(type="text", nullable=true) + */ + private $text; + + /** + * @ORM\Column(name="link_text", type="string", nullable=true) + */ + private $linkText; + + /** + * @ORM\Column(name="link_url", type="string", nullable=true) + */ + private $linkUrl; + + /** + * @ORM\Column(name="link_new_window", type="boolean", nullable=true) + */ + private $linkNewWindow = false; + + public function getImagePosition(): ?string + { + return $this->imagePosition; + } + + public function setImagePosition(string $imagePosition): MediaWithContentPagePart + { + $this->imagePosition = $imagePosition; + + return $this; + } + + public function setImageAltText(string $imageAltText): MediaWithContentPagePart + { + $this->imageAltText = $imageAltText; + + return $this; + } + + public function getImageAltText(): ?string + { + return $this->imageAltText; + } + + public function setTitle(string $title): MediaWithContentPagePart + { + $this->title = $title; + + return $this; + } + + public function getTitle(): ?string + { + return $this->title; + } + + public function setText(string $text): MediaWithContentPagePart + { + $this->text = $text; + + return $this; + } + + public function getText(): ?string + { + return $this->text; + } + + public function setImage(Media $image): MediaWithContentPagePart + { + $this->image = $image; + + return $this; + } + + public function getImage(): ?Media + { + return $this->image; + } + + public function getContentAlignment(): ?string + { + return $this->contentAlignment; + } + + public function setContentAlignment(string $contentAlignment): MediaWithContentPagePart + { + $this->contentAlignment = $contentAlignment; + + return $this; + } + + public function setLinkNewWindow(bool $linkNewWindow): MediaWithContentPagePart + { + $this->linkNewWindow = $linkNewWindow; + + return $this; + } + + public function isLinkNewWindow(): bool + { + return $this->linkNewWindow; + } + + public function setLinkText(string $linkText): MediaWithContentPagePart + { + $this->linkText = $linkText; + + return $this; + } + + public function getLinkText(): ?string + { + return $this->linkText; + } + + public function setLinkUrl(string $linkUrl): MediaWithContentPagePart + { + $this->linkUrl = $linkUrl; + + return $this; + } + + public function getLinkUrl(): ?string + { + return $this->linkUrl; + } + + public function getDefaultView(): string + { + return 'pageparts/media_with_content_pagepart/view.html.twig'; + } + + public function getDefaultAdminType(): string + { + return {{ admin_type_class }}::class; + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/MediaWithParagraphPagePart.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/MediaWithParagraphPagePart.php new file mode 100644 index 0000000000..bfe9eceec8 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/MediaWithParagraphPagePart.php @@ -0,0 +1,120 @@ + 'left', + 'right' => 'right', + ]; + + /** + * @ORM\ManyToOne(targetEntity="Kunstmaan\MediaBundle\Entity\Media") + * @ORM\JoinColumns({ + * @ORM\JoinColumn(name="image_id", referencedColumnName="id") + * }) + * @Assert\NotBlank() + */ + private $image; + + /** + * @ORM\Column(name="image_position", type="text", nullable=true) + * @Assert\NotBlank() + */ + private $imagePosition; + + /** + * @ORM\Column(name="image_alt_text", type="text", nullable=true) + */ + private $imageAltText; + + /** + * @ORM\Column(type="string", nullable=true) + */ + private $text; + + /** + * @ORM\Column(type="boolean", nullable=true) + */ + private $wrap = true; + + public function getImagePosition(): ?string + { + return $this->imagePosition; + } + + public function setImagePosition(string $imagePosition): MediaWithParagraphPagePart + { + $this->imagePosition = $imagePosition; + + return $this; + } + + public function setImageAltText(string $imageAltText): MediaWithParagraphPagePart + { + $this->imageAltText = $imageAltText; + + return $this; + } + + public function getImageAltText(): ?string + { + return $this->imageAltText; + } + + public function setText(string $text): MediaWithParagraphPagePart + { + $this->text = $text; + + return $this; + } + + public function getText(): ?string + { + return $this->text; + } + + public function setImage(Media $image): MediaWithParagraphPagePart + { + $this->image = $image; + + return $this; + } + + public function getImage(): ?Media + { + return $this->image; + } + + public function getWrap(): bool + { + return $this->wrap; + } + + public function setWrap(bool $wrap): MediaWithParagraphPagePart + { + $this->wrap = $wrap; + + return $this; + } + + public function getDefaultView(): string + { + return 'pageparts/media_with_paragraph_pagepart/view.html.twig'; + } + + public function getDefaultAdminType(): string + { + return {{ admin_type_class }}::class; + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/QuotePagePart.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/QuotePagePart.php new file mode 100644 index 0000000000..16bcf4b8b5 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/QuotePagePart.php @@ -0,0 +1,63 @@ +title = $title; + + return $this; + } + + public function getTitle(): ?string + { + return $this->title; + } + + public function setText(?string $text): self + { + $this->text = $text; + + return $this; + } + + public function getText(): ?string + { + return $this->text; + } + + public function getDefaultView(): string + { + return 'pageparts/quote_pagepart/view.html.twig'; + } + + public function getDefaultAdminType(): string + { + return {{ admin_type_class }}::class; + } + +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/RawHtmlPagePart.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/RawHtmlPagePart.php new file mode 100644 index 0000000000..e5b620b33b --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/RawHtmlPagePart.php @@ -0,0 +1,42 @@ +content; + } + + public function setContent(string $content): RawHtmlPagePart + { + $this->content = $content; + + return $this; + } + + public function getDefaultView(): string + { + return 'pageparts/raw_html_pagepart/view.html.twig'; + } + + public function getDefaultAdminType(): string + { + return {{ admin_type_class }}::class; + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/SharePagePart.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/SharePagePart.php new file mode 100644 index 0000000000..838e23e5a2 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/SharePagePart.php @@ -0,0 +1,23 @@ + 'xs', + 's' => 's', + 'm' => 'm', + 'l' => 'l', + 'xl' => 'xl', + 'xxl' => 'xxl', + ]; + + /** + * @ORM\Column(type="string", nullable=true) + * @Assert\NotBlank() + */ + private $size; + + public function getSize(): ?string + { + return $this->size; + } + + public function setSize(string $size): SpacerPagePart + { + $this->size = $size; + + return $this; + } + + public function getDefaultView(): string + { + return 'pageparts/spacer_pagepart/view.html.twig'; + } + + public function getDefaultAdminType(): string + { + return {{ admin_type_class }}::class; + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/TextPagePart.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/TextPagePart.php new file mode 100644 index 0000000000..ea159f7b35 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/TextPagePart.php @@ -0,0 +1,42 @@ +content; + } + + public function setContent(string $content): TextPagePart + { + $this->content = $content; + + return $this; + } + + public function getDefaultView(): string + { + return 'pageparts/text_pagepart/view.html.twig'; + } + + public function getDefaultAdminType(): string + { + return {{ admin_type_class }}::class; + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/TocPagePart.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/TocPagePart.php new file mode 100644 index 0000000000..d388d6db85 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/TocPagePart.php @@ -0,0 +1,23 @@ +items = new ArrayCollection(); + } + + public function getTitle(): ?string + { + return $this->title; + } + + public function setTitle(string $title): UspPagePart + { + $this->title = $title; + + return $this; + } + + /** + * @return Collection|UspItem[] + */ + public function getItems(): Collection + { + return $this->items; + } + + public function addItem(UspItem $item): UspPagePart + { + if (!$this->items->contains($item)) { + $this->items->add($item); + $item->setUspPagePart($this); + } + + return $this; + } + + public function removeItem(UspItem $item): UspPagePart + { + if ($this->items->contains($item)) { + $this->items->removeElement($item); + } + + return $this; + } + + public function getDefaultView(): string + { + return 'pageparts/usp_pagepart/view.html.twig'; + } + + public function getDefaultAdminType(): string + { + return {{ admin_type_class }}::class; + } + + /** + * When cloning this entity, also clone all entities in the item ArrayCollection. + */ + public function deepClone(): void + { + $items = $this->getItems(); + $this->items = new ArrayCollection(); + foreach ($items as $item) { + $cloneItem = clone $item; + $this->addItem($cloneItem); + } + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/VideoPagePart.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/VideoPagePart.php new file mode 100644 index 0000000000..8a7ceb4b29 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/entities/pageparts/VideoPagePart.php @@ -0,0 +1,104 @@ + 'container', + 'full width' => 'full_width', + ]; + + /** + * @ORM\ManyToOne(targetEntity="Kunstmaan\MediaBundle\Entity\Media") + * @ORM\JoinColumn(name="video_media_id", referencedColumnName="id") + * @Assert\NotNull() + */ + private $video; + + /** + * @ORM\Column(type="string", name="caption", nullable=true) + */ + private $caption; + + /** + * @ORM\ManyToOne(targetEntity="Kunstmaan\MediaBundle\Entity\Media") + * @ORM\JoinColumns({ + * @ORM\JoinColumn(name="thumbnail_media_id", referencedColumnName="id") + * }) + */ + private $thumbnail; + + /** + * @ORM\Column(type="string", nullable=true) + * @Assert\NotNull() + */ + private $width; + + public function setCaption(string $caption): VideoPagePart + { + $this->caption = $caption; + + return $this; + } + + public function getCaption(): ?string + { + return $this->caption; + } + + public function setThumbnail(Media $thumbnail): VideoPagePart + { + $this->thumbnail = $thumbnail; + + return $this; + } + + public function getThumbnail(): ?Media + { + return $this->thumbnail; + } + + public function setVideo(Media $video): VideoPagePart + { + $this->video = $video; + + return $this; + } + + public function getVideo(): ?Media + { + return $this->video; + } + + public function getWidth(): ?string + { + return $this->width; + } + + public function setWidth(string $width): VideoPagePart + { + $this->width = $width; + + return $this; + } + + public function getDefaultView(): string + { + return 'pageparts/video_pagepart/view.html.twig'; + } + + public function getDefaultAdminType(): string + { + return {{ admin_type_class }}::class; + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/GalleryRowAdminType.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/GalleryRowAdminType.php new file mode 100644 index 0000000000..3622cc64f5 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/GalleryRowAdminType.php @@ -0,0 +1,41 @@ +add('mediaItems', CollectionType::class, [ + 'entry_type' => GalleryRowMediaItemAdminType::class, + 'allow_add' => true, + 'allow_delete' => true, + 'by_reference' => false, + 'attr' => [ + 'nested_form' => true, + 'nested_sortable' => true, + 'nested_form_min' => 1, + 'nested_form_max' => 3, + ], + ]) + ->add('weight', HiddenType::class, [ + 'required' => true, + ]) + ; + } + + public function configureOptions(OptionsResolver $resolver) + { + $resolver->setDefaults([ + 'data_class' => GalleryRow::class, + ]); + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/GalleryRowMediaItemAdminType.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/GalleryRowMediaItemAdminType.php new file mode 100644 index 0000000000..4739688daa --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/GalleryRowMediaItemAdminType.php @@ -0,0 +1,33 @@ +add('media', MediaType::class, [ + 'mediatype' => 'image', + 'required' => true, + ]) + ->add('weight', HiddenType::class, [ + 'required' => true, + ]) + ; + } + + public function configureOptions(OptionsResolver $resolver) + { + $resolver->setDefaults([ + 'data_class' => GalleryRowMediaItem::class, + ]); + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/MapItemAdminType.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/MapItemAdminType.php new file mode 100644 index 0000000000..a228691bb2 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/MapItemAdminType.php @@ -0,0 +1,28 @@ +add('address', TextType::class, [ + 'required' => true, + ]) + ; + } + + public function configureOptions(OptionsResolver $resolver) + { + $resolver->setDefaults([ + 'data_class' => MapItem::class, + ]); + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/UspItemAdminType.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/UspItemAdminType.php new file mode 100644 index 0000000000..0b2154169c --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/UspItemAdminType.php @@ -0,0 +1,56 @@ +add('icon', MediaType::class, [ + 'mediatype' => 'image', + 'required' => true, + ]) + ->add('title', TextType::class, [ + 'required' => true, + ]) + ->add('description', TextareaType::class, [ + 'attr' => [ + 'rows' => 4, + 'cols' => 600, + ], + 'required' => false, + ]) + ->add('linkUrl', URLChooserType::class, [ + 'required' => false, + ]) + ->add('linkText', TextType::class, [ + 'required' => false, + ]) + ->add('linkNewWindow', CheckboxType::class, [ + 'required' => false, + ]) + ->add('weight', HiddenType::class, [ + 'required' => true, + ]) + ; + } + + public function configureOptions(OptionsResolver $resolver) + { + $resolver->setDefaults([ + 'data_class' => UspItem::class, + ]); + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/AudioPagePartAdminType.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/AudioPagePartAdminType.php new file mode 100644 index 0000000000..06f36da3e2 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/AudioPagePartAdminType.php @@ -0,0 +1,26 @@ +add('media', MediaType::class, [ + 'label' => 'mediapagepart.audio.choose', + ]); + } + + public function configureOptions(OptionsResolver $resolver) + { + $resolver->setDefaults([ + 'data_class' => {{ pagepart_class }}::class, + ]); + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/BannerPagePartAdminType.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/BannerPagePartAdminType.php new file mode 100644 index 0000000000..8b1ae4bc9e --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/BannerPagePartAdminType.php @@ -0,0 +1,49 @@ +add('text', WysiwygType::class, [ + 'required' => false, + ]) + ->add('backgroundImage', MediaType::class, [ + 'mediatype' => 'image', + 'required' => false, + ]) + ->add('image', MediaType::class, [ + 'mediatype' => 'image', + 'required' => false, + ]) + ->add('buttonText', TextType::class, [ + 'required' => false, + ]) + ->add('buttonLink', URLChooserType::class, [ + 'required' => false, + ]) + ->add('openInNewWindow', CheckboxType::class, [ + 'required' => false, + ]) + ; + } + + public function configureOptions(OptionsResolver $resolver) + { + $resolver->setDefaults([ + 'data_class' => {{ pagepart_class }}::class, + ]); + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/ButtonPagePartAdminType.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/ButtonPagePartAdminType.php new file mode 100644 index 0000000000..811e14a4f5 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/ButtonPagePartAdminType.php @@ -0,0 +1,52 @@ +add('linkUrl', URLChooserType::class, [ + 'required' => true, + ]) + ->add('linkText', TextType::class, [ + 'required' => true, + ]) + ->add('linkNewWindow', CheckboxType::class, [ + 'required' => false, + ]) + ->add('type', ChoiceType::class, [ + 'choices' => array_combine({{ pagepart_class }}::$types, {{ pagepart_class }}::$types), + 'placeholder' => false, + 'required' => true, + ]) + ->add('size', ChoiceType::class, [ + 'choices' => array_combine({{ pagepart_class }}::$sizes, {{ pagepart_class }}::$sizes), + 'placeholder' => false, + 'required' => true, + ]) + ->add('position', ChoiceType::class, [ + 'choices' => array_combine({{ pagepart_class }}::$positions, {{ pagepart_class }}::$positions), + 'placeholder' => false, + 'required' => true, + ]) + ; + } + + public function configureOptions(OptionsResolver $resolver) + { + $resolver->setDefaults([ + 'data_class' => {{ pagepart_class }}::class, + ]); + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/DividerPagePartAdminType.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/DividerPagePartAdminType.php new file mode 100644 index 0000000000..605007d40f --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/DividerPagePartAdminType.php @@ -0,0 +1,17 @@ +setDefaults([ + 'data_class' => {{ pagepart_class }}::class, + ]); + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/DownloadPagePartAdminType.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/DownloadPagePartAdminType.php new file mode 100644 index 0000000000..9d0ebcb5c2 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/DownloadPagePartAdminType.php @@ -0,0 +1,26 @@ +add('media', MediaType::class, [ + 'label' => 'mediapagepart.download.choosefile', + ]); + } + + public function configureOptions(OptionsResolver $resolver) + { + $resolver->setDefaults([ + 'data_class' => {{ pagepart_class }}::class, + ]); + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/GalleryPagePartAdminType.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/GalleryPagePartAdminType.php new file mode 100644 index 0000000000..91828e2fa9 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/GalleryPagePartAdminType.php @@ -0,0 +1,37 @@ +add('rows', CollectionType::class, [ + 'entry_type' => GalleryRowAdminType::class, + 'allow_add' => true, + 'allow_delete' => true, + 'by_reference' => false, + 'attr' => [ + 'nested_form' => true, + 'nested_sortable' => true, + 'nested_form_min' => 1, + ], + ]) + ; + } + + public function configureOptions(OptionsResolver $resolver) + { + $resolver->setDefaults([ + 'data_class' => {{ pagepart_class }}::class, + ]); + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/HeaderPagePartAdminType.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/HeaderPagePartAdminType.php new file mode 100644 index 0000000000..612715b244 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/HeaderPagePartAdminType.php @@ -0,0 +1,43 @@ +add('niv', ChoiceType::class, [ + 'label' => 'pagepart.header.type', + 'choices' => array_combine($names, {{ pagepart_class }}::$supportedHeaders), + 'required' => true, + ]) + ->add('title', TextType::class, [ + 'label' => 'pagepart.header.title', + 'required' => true, + ]) + ->add('alignment', ChoiceType::class, [ + 'label' => 'pagepart.header.alignment', + 'choices' => {{ pagepart_class }}::ALIGNMENT, + 'required' => true, + ]) + ; + } + + public function configureOptions(OptionsResolver $resolver) + { + $resolver->setDefaults([ + 'data_class' => {{ pagepart_class }}::class, + ]); + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/HighlightPagePartAdminType.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/HighlightPagePartAdminType.php new file mode 100644 index 0000000000..582bb05688 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/HighlightPagePartAdminType.php @@ -0,0 +1,43 @@ +add('title', TextType::class, [ + 'required' => true, + ]) + ->add('text', WysiwygType::class, [ + 'required' => true, + ]) + ->add('linkUrl', URLChooserType::class, [ + 'required' => false, + ]) + ->add('linkText', TextType::class, [ + 'required' => false, + ]) + ->add('linkNewWindow', CheckboxType::class, [ + 'required' => false, + ]) + ; + } + + public function configureOptions(OptionsResolver $resolver) + { + $resolver->setDefaults([ + 'data_class' => {{ pagepart_class }}::class, + ]); + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/ImagePagePartAdminType.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/ImagePagePartAdminType.php new file mode 100644 index 0000000000..4eb98ec716 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/ImagePagePartAdminType.php @@ -0,0 +1,57 @@ +add('media', MediaType::class, [ + 'label' => 'mediapagepart.image.choosefile', + 'mediatype' => 'image', + 'required' => true, + ]) + ->add('caption', TextType::class, [ + 'required' => false, + ]) + ->add('altText', TextType::class, [ + 'required' => false, + 'label' => 'mediapagepart.image.alttext', + ]) + ->add('alignment', ChoiceType::class, [ + 'choices' => {{ pagepart_class }}::IMAGE_ALIGNMENT, + 'required' => true, + ]) + ->add('width', ChoiceType::class, [ + 'choices' => {{ pagepart_class }}::IMAGE_WIDTH, + 'required' => true, + ]) + ->add('link', URLChooserType::class, [ + 'required' => false, + 'label' => 'mediapagepart.image.link', + ]) + ->add('openInNewWindow', CheckboxType::class, [ + 'required' => false, + 'label' => 'mediapagepart.image.openinnewwindow', + ]) + ; + } + + public function configureOptions(OptionsResolver $resolver) + { + $resolver->setDefaults([ + 'data_class' => {{ pagepart_class }}::class, + ]); + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/IntroTextPagePartAdminType.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/IntroTextPagePartAdminType.php new file mode 100644 index 0000000000..bd1622e12c --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/IntroTextPagePartAdminType.php @@ -0,0 +1,26 @@ +add('content', WysiwygType::class, [ + 'required' => true, + ]); + } + + public function configureOptions(OptionsResolver $resolver) + { + $resolver->setDefaults([ + 'data_class' => {{ pagepart_class }}::class, + ]); + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/MapPagePartAdminType.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/MapPagePartAdminType.php new file mode 100644 index 0000000000..1f528a7bd4 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/MapPagePartAdminType.php @@ -0,0 +1,39 @@ +add('text', WysiwygType::class) + ->add('items', CollectionType::class, [ + 'entry_type' => MapItemAdminType::class, + 'allow_add' => true, + 'allow_delete' => true, + 'by_reference' => false, + 'attr' => [ + 'nested_form' => true, + 'nested_sortable' => false, + 'nested_form_min' => 1, + 'nested_form_max' => 3, + ], + ]); + } + + public function configureOptions(OptionsResolver $resolver) + { + $resolver->setDefaults([ + 'data_class' => {{ pagepart_class }}::class, + ]); + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/MediaWithContentPagePartAdminType.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/MediaWithContentPagePartAdminType.php new file mode 100644 index 0000000000..422a3166ea --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/MediaWithContentPagePartAdminType.php @@ -0,0 +1,61 @@ +add('imagePosition', ChoiceType::class, [ + 'choices' => {{ pagepart_class }}::IMAGE_POSITION, + 'required' => true, + ]) + ->add('image', MediaType::class, [ + 'mediatype' => 'image', + 'required' => true, + ]) + ->add('imageAltText', TextType::class, [ + 'required' => false, + ]) + ->add('contentAlignment', ChoiceType::class, [ + 'choices' => {{ pagepart_class }}::CONTENT_ALIGNMENT, + 'required' => true, + ]) + ->add('title', TextType::class, [ + 'label' => 'pagepart.header.title', + 'required' => false, + ]) + ->add('text', WysiwygType::class, [ + 'required' => false, + ]) + ->add('linkUrl', URLChooserType::class, [ + 'required' => false, + ]) + ->add('linkText', TextType::class, [ + 'required' => false, + ]) + ->add('linkNewWindow', CheckboxType::class, [ + 'required' => false, + ]) + ; + } + + public function configureOptions(OptionsResolver $resolver) + { + $resolver->setDefaults([ + 'data_class' => {{ pagepart_class }}::class, + ]); + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/MediaWithParagraphPagePartAdminType.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/MediaWithParagraphPagePartAdminType.php new file mode 100644 index 0000000000..f9045e849c --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/MediaWithParagraphPagePartAdminType.php @@ -0,0 +1,46 @@ +add('imagePosition', ChoiceType::class, [ + 'choices' => {{ pagepart_class }}::IMAGE_POSITION, + 'required' => true, + ]) + ->add('image', MediaType::class, [ + 'mediatype' => 'image', + 'required' => true, + ]) + ->add('imageAltText', TextType::class, [ + 'required' => false, + ]) + ->add('text', WysiwygType::class, [ + 'required' => false, + ]) + ->add('wrap', CheckboxType::class, [ + 'required' => false, + ]) + ; + } + + public function configureOptions(OptionsResolver $resolver) + { + $resolver->setDefaults([ + 'data_class' => {{ pagepart_class }}::class, + ]); + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/QuotePagePartAdminType.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/QuotePagePartAdminType.php new file mode 100644 index 0000000000..93b3235334 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/QuotePagePartAdminType.php @@ -0,0 +1,32 @@ +add('title', TextType::class, [ + 'required' => true, + ]) + ->add('text', WysiwygType::class, [ + 'required' => true, + ]) + ; + } + + public function configureOptions(OptionsResolver $resolver) + { + $resolver->setDefaults([ + 'data_class' => {{ pagepart_class }}::class, + ]); + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/RawHtmlPagePartAdminType.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/RawHtmlPagePartAdminType.php new file mode 100644 index 0000000000..57e2c51537 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/RawHtmlPagePartAdminType.php @@ -0,0 +1,28 @@ +add('content', TextareaType::class, [ + 'label' => 'pagepart.html.content', + 'required' => true, + 'attr' => ['rows' => 5], + ]); + } + + public function configureOptions(OptionsResolver $resolver) + { + $resolver->setDefaults([ + 'data_class' => {{ pagepart_class }}::class, + ]); + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/SharePagePartAdminType.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/SharePagePartAdminType.php new file mode 100644 index 0000000000..84d44a6159 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/SharePagePartAdminType.php @@ -0,0 +1,17 @@ +setDefaults([ + 'data_class' => {{ pagepart_class }}::class, + ]); + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/SpacerPagePartAdminType.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/SpacerPagePartAdminType.php new file mode 100644 index 0000000000..1f1c741fd4 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/SpacerPagePartAdminType.php @@ -0,0 +1,27 @@ +add('size', ChoiceType::class, [ + 'choices' => SpacerPagePart::SPACER_SIZES, + 'required' => true, + ]); + } + + public function configureOptions(OptionsResolver $resolver) + { + $resolver->setDefaults([ + 'data_class' => {{ pagepart_class }}::class, + ]); + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/TextPagePartAdminType.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/TextPagePartAdminType.php new file mode 100644 index 0000000000..e3f314515b --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/TextPagePartAdminType.php @@ -0,0 +1,26 @@ +add('content', WysiwygType::class, [ + 'required' => true, + ]); + } + + public function configureOptions(OptionsResolver $resolver) + { + $resolver->setDefaults([ + 'data_class' => {{ pagepart_class }}::class, + ]); + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/TocPagePartAdminType.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/TocPagePartAdminType.php new file mode 100644 index 0000000000..4c72763bce --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/TocPagePartAdminType.php @@ -0,0 +1,17 @@ +setDefaults([ + 'data_class' => {{ pagepart_class }}::class, + ]); + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/UspPagePartAdminType.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/UspPagePartAdminType.php new file mode 100644 index 0000000000..543a1c19bd --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/UspPagePartAdminType.php @@ -0,0 +1,40 @@ +add('title', TextType::class) + ->add('items', CollectionType::class, [ + 'entry_type' => UspItemAdminType::class, + 'allow_add' => true, + 'allow_delete' => true, + 'by_reference' => false, + 'attr' => [ + 'nested_form' => true, + 'nested_sortable' => true, + 'nested_form_min' => 1, + 'nested_form_max' => 3, + ], + ]) + ; + } + + public function configureOptions(OptionsResolver $resolver) + { + $resolver->setDefaults([ + 'data_class' => {{ pagepart_class }}::class, + ]); + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/VideoPagePartAdminType.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/VideoPagePartAdminType.php new file mode 100644 index 0000000000..45656c753c --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/forms/pageparts/VideoPagePartAdminType.php @@ -0,0 +1,42 @@ +add('video', MediaType::class, [ + 'mediatype' => 'video', + 'required' => true, + ]) + ->add('thumbnail', MediaType::class, [ + 'mediatype' => 'image', + 'required' => false, + ]) + ->add('caption', TextType::class, [ + 'required' => false, + ]) + ->add('width', ChoiceType::class, [ + 'choices' => {{ pagepart_class }}::VIDEO_WIDTH, + 'required' => true, + ]) + ; + } + + public function configureOptions(OptionsResolver $resolver) + { + $resolver->setDefaults([ + 'data_class' => {{ pagepart_class }}::class, + ]); + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/AudioPagePart/view.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/AudioPagePart/view.html.twig new file mode 100644 index 0000000000..e81af65cde --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/AudioPagePart/view.html.twig @@ -0,0 +1,27 @@ +{% if resource.media is defined and resource.media != "" %} +
+
+
+ + + +
+
{{ resource.media.name }}
+
+ +
+ + +
+
+
+ +
+
+
+{% endif %} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/BannerPagePart/view.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/BannerPagePart/view.html.twig new file mode 100644 index 0000000000..6a39930c27 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/BannerPagePart/view.html.twig @@ -0,0 +1,24 @@ + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/ButtonPagePart/view.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/ButtonPagePart/view.html.twig new file mode 100644 index 0000000000..b167b783da --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/ButtonPagePart/view.html.twig @@ -0,0 +1,15 @@ +
+
+ {% if resource.linkText is defined %} + {% if resource.type == "button" %} + + {{ resource.linkText|default(resource.linkUrl|replace_url) }} + + {% elseif resource.type == "link" %} +

+ {{ resource.linkText|default(resource.linkUrl|replace_url) }} +

+ {% endif %} + {% endif %} +
+
diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/DividerPagePart/view.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/DividerPagePart/view.html.twig new file mode 100644 index 0000000000..cd9ed25d14 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/DividerPagePart/view.html.twig @@ -0,0 +1,5 @@ +
+
+
+
+
diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/DownloadPagePart/view.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/DownloadPagePart/view.html.twig new file mode 100644 index 0000000000..1a7047c15b --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/DownloadPagePart/view.html.twig @@ -0,0 +1,21 @@ +{% if resource.media is not empty and app.request is defined %} + {% set name = resource.media.name %} + {% if name is empty %} + {% set name = "Download"|trans %} + {% endif %} + +
+
+
+
+ +
+
{{ name }}
+

{{ resource.media.contentTypeShort }} ({{ resource.media.getFileSize() }})

+
+
+ Download +
+
+
+{% endif %} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/GalleryPagePart/view.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/GalleryPagePart/view.html.twig new file mode 100644 index 0000000000..b57646d39c --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/GalleryPagePart/view.html.twig @@ -0,0 +1,45 @@ +{% import _self as gallery %} + +{% macro buildImage(siblings, mediaItem) %} + {% import 'macros/_image-url.html.twig' as macros %} + {% set filterSize = 'full' %} + {% if siblings > 0 and siblings < 2 %} + {% set filterSize = 'half' %} + {% elseif siblings > 0 and siblings == 2 %} + {% set filterSize = 'third' %} + {% endif %} + {% set filterNameLow = 'image_gallery_' ~ filterSize ~ '_low' %} + {% set filterName = 'image_gallery_' ~ filterSize %} + + {% set width = ''%} + {% if mediaItem.media.metadata['original_width'] is defined and mediaItem.media.metadata['original_width'] %} + {% set width = mediaItem.media.metadata['original_width'] %} + {% endif %} + {% set height = ''%} + {% if mediaItem.media.metadata['original_height'] is defined and mediaItem.media.metadata['original_height'] %} + {% set height = mediaItem.media.metadata['original_height'] %} + {% endif %} + +
+ + {{ mediaItem.altText }} + +
+{% endmacro %} + + +
+
+
+ + {% for row in resource.rows %} +
+ {% set siblings = row.mediaItems | length %} + {% for mediaItem in row.mediaItems %} + {{ gallery.buildImage(siblings - 1, mediaItem) }} + {% endfor %} +
+ {% endfor %} +
+
+
diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/HeaderPagePart/view.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/HeaderPagePart/view.html.twig new file mode 100644 index 0000000000..fe07f67761 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/HeaderPagePart/view.html.twig @@ -0,0 +1,7 @@ +
+
+ + {{ resource.title }} + +
+
diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/HighlightPagePart/view.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/HighlightPagePart/view.html.twig new file mode 100644 index 0000000000..cadf29547b --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/HighlightPagePart/view.html.twig @@ -0,0 +1,21 @@ +
+
+
+ {% if resource.title is defined %} +

+ {{ resource.title | title }} +

+ {% endif %} + {% if resource.text is defined %} +
+ {{ resource.text |replace_url| raw }} +
+ {% endif %} + {% if resource.linkText is defined %} +

+ {{ resource.linkText }} +

+ {% endif %} +
+
+
diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/ImagePagePart/view.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/ImagePagePart/view.html.twig new file mode 100644 index 0000000000..a28adbe538 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/ImagePagePart/view.html.twig @@ -0,0 +1,56 @@ +{% import _self as buildImage %} + +{% macro setFilters(image, altText, type, originalWidth) %} + {% set imgUrl = '' %} + + {% if type in ['svg', 'gif'] %} + {% set imgUrl = absolute_url(asset(image)) %} + {{ altText }} + {% else %} + {% set imgUrl_huge = asset(image | imagine_filter('image_huge_' ~ type)) %} + {% set imgUrl_big = asset(image | imagine_filter('image_big_' ~ type)) %} + {% set imgUrl_medium = asset(image | imagine_filter('image_medium_' ~ type)) %} + {% set imgUrl_small = asset(image | imagine_filter('image_small_' ~ type)) %} +` + {% set imgUrl_huge_low = asset(image | imagine_filter('image_huge_' ~ type ~ 'low')) %} + {% set imgUrl_big_low = asset(image | imagine_filter('image_big_' ~ type ~ 'low')) %} + {% set imgUrl_medium_low = asset(image | imagine_filter('image_medium_' ~ type ~ 'low')) %} + {% set imgUrl_small_low = asset(image | imagine_filter('image_small_' ~ type ~ 'low')) %} + + {% set srcSet = imgUrl_small ~ ' 400w, ' ~ imgUrl_medium ~ ' 600w, ' ~ imgUrl_big ~ ' 1200w, ' ~ imgUrl_huge ~ ' 2400w' %} + {% set srcSetLow = imgUrl_small_low ~ ' 400w, ' ~ imgUrl_medium_low ~ ' 600w, ' ~ imgUrl_big_low ~ ' 1200w, ' ~ imgUrl_huge_low ~ ' 2400w' %} + + {{ altText }} + + {% endif %} +{% endmacro %} + +{% if resource.media is not empty %} + {% set image %} + {% set imageType = resource.media.originalFilename|lower|split('.')|last %} + {{ buildImage.setFilters(resource.media.url, resource.altText, imageType, resource.media.metadata.original_width) }} + {% endset %} + + {% if app.request %} +
+
+
+ {% if resource.link is defined and resource.link != '' %} + + {{ image }} + + {% else %} + {{ image }} + {% endif %} + {% if resource.caption %} +
+
{{ resource.caption |replace_url | raw }}
+
+ {% endif %} +
+
+
+ {% endif %} +{% endif %} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/IntroTextPagePart/view.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/IntroTextPagePart/view.html.twig new file mode 100644 index 0000000000..ee911f7db3 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/IntroTextPagePart/view.html.twig @@ -0,0 +1,5 @@ +
+
+ {{ resource.content|replace_url|raw }} +
+
diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/MapPagePart/view.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/MapPagePart/view.html.twig new file mode 100644 index 0000000000..ddfb4d9025 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/MapPagePart/view.html.twig @@ -0,0 +1,6 @@ +
+ {% for mapItem in resource.items %} + {{ mapItem.address }}
+ {% endfor %} +

{{ resource.text }}

+
diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/MediaWithContentPagePart/view.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/MediaWithContentPagePart/view.html.twig new file mode 100644 index 0000000000..5d7411ff17 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/MediaWithContentPagePart/view.html.twig @@ -0,0 +1,27 @@ +
+
+
+ {% if resource.image is not null %} +
+ {{ resource.imageAltText }} +
+ {% endif %} +
+

+ {{ resource.title }} +

+ {% if resource.text is defined %} + {{ resource.text|replace_url|raw }} + {% endif %} + + {% if resource.linkText %} +

+ + {{ resource.linkText }} + +

+ {% endif %} +
+
+
+
diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/MediaWithParagraphPagePart/view.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/MediaWithParagraphPagePart/view.html.twig new file mode 100644 index 0000000000..2ed3d571a1 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/MediaWithParagraphPagePart/view.html.twig @@ -0,0 +1,14 @@ +
+
+
+
+ {% if resource.image is not null %} + {{ resource.imageAltText }} + {% endif %} +
+
+ {{ resource.text|replace_url|raw }} +
+
+
+
diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/QuotePagePart/view.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/QuotePagePart/view.html.twig new file mode 100644 index 0000000000..3b49ec30fb --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/QuotePagePart/view.html.twig @@ -0,0 +1,4 @@ +
+

{{ resource.title }}

+ {{ resource.text|replace_url|raw }} +
\ No newline at end of file diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/RawHtmlPagePart/view.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/RawHtmlPagePart/view.html.twig new file mode 100644 index 0000000000..17e9df005a --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/RawHtmlPagePart/view.html.twig @@ -0,0 +1 @@ +{{ resource.content|raw }} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/SharePagePart/view.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/SharePagePart/view.html.twig new file mode 100644 index 0000000000..f74815bcef --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/SharePagePart/view.html.twig @@ -0,0 +1,57 @@ + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/SpacerPagePart/view.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/SpacerPagePart/view.html.twig new file mode 100644 index 0000000000..b1926d3063 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/SpacerPagePart/view.html.twig @@ -0,0 +1 @@ +
diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/TextPagePart/view.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/TextPagePart/view.html.twig new file mode 100644 index 0000000000..69a1b59a96 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/TextPagePart/view.html.twig @@ -0,0 +1,5 @@ +
+
+ {{ resource.content|replace_url|raw }} +
+
diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/TocPagePart/view.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/TocPagePart/view.html.twig new file mode 100644 index 0000000000..8581e56e1e --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/TocPagePart/view.html.twig @@ -0,0 +1,21 @@ +{% set tocContent = "" %} + +{% if page is defined %} + {% for pagepart in getpageparts(page, 'main') %} + {% if 'HeaderPagePart' in pagepart.getDefaultView %} + {% if pagepart.niv is defined and pagepart.niv == 2 %} + {% set tocContent = tocContent ~ '
  • ' ~ pagepart.getTitle ~ '
    • ' %} + {% endif %} + {% endif %} + {% endfor %} + + {% if tocContent %} +
    +
    +
      + {{ tocContent|raw }} +
    +
    +
    + {% endif %} +{% endif %} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/UspPagePart/view.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/UspPagePart/view.html.twig new file mode 100644 index 0000000000..392d5ea975 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/UspPagePart/view.html.twig @@ -0,0 +1,31 @@ +{% if resource.items|length > 0 %} +
    +
    +

    {{ resource.title }}

    +
    + {% for uspItem in resource.items %} +
    +
    + {% if uspItem.icon is not null %} + {{ uspItem.title }} + {% endif %} +
    +

    + {{ uspItem.title }} +

    + {% if uspItem.description %} +

    + {{ uspItem.description }} +

    + {% endif %} + {% if uspItem.linkUrl and uspItem.linkText %} + + {{ uspItem.linkText }} + + {% endif %} +
    + {% endfor %} +
    +
    +
    +{% endif %} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/VideoPagePart/view.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/VideoPagePart/view.html.twig new file mode 100644 index 0000000000..272480f6c9 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/default-pageparts/templates/PageParts/VideoPagePart/view.html.twig @@ -0,0 +1,50 @@ +{% import 'macros/_image-url.html.twig' as macros %} + +{% if resource.video is defined and resource.video %} +
    +
    + {% set handler = mediamanager.getHandler(resource.video) %} + {% set helper = handler.getFormHelper(resource.video) %} + {% set videoImage = asset('frontend/img/general/video-pp--default.svg') %} + {% set videoImageLow = asset('frontend/img/general/video-pp--default.svg') %} + {% if resource.thumbnail is not empty %} + {% set videoImage = macros.getImageUrl(resource.thumbnail, 'video_link') %} + {% set videoImageLow = macros.getImageUrl(resource.thumbnail, 'video_link_low') %} + {% elseif helper.type == 'youtube' %} + {% set videoImage = 'https://img.youtube.com/vi/' ~ helper.code ~ '/0.jpg' %} + {% set videoImageLow = 'https://img.youtube.com/vi/' ~ helper.code ~ '/1.jpg' %} + {% endif %} + + {% if helper.type == 'youtube' %} + {% set videoEmbedUrl = "//www.youtube.com/embed/" ~ helper.code %} + {% elseif helper.type == 'vimeo' %} + {% set videoEmbedUrl = "//player.vimeo.com/video/" ~ helper.code %} + {% elseif helper.type == 'dailymotion' %} + {% set videoEmbedUrl = "//www.dailymotion.com/embed/video/" ~ helper.code %} + {% endif %} + +
    + + + + + + + + + + + + +
    +
    +
    + {% if resource.caption %} +
    +
    +

    {{ resource.caption }}

    +
    +
    + {% endif %} +
    +{% endif %} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/admin/js/admin-bundle-extra.js b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/admin/js/admin-bundle-extra.js new file mode 100644 index 0000000000..ceed9da5de --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/admin/js/admin-bundle-extra.js @@ -0,0 +1,8 @@ +/** + * + * Extra Javascript that needs to be implemented for the KunstmaanBundlesCMS can be written in this file/folder. + * + * The Javascript will be bundled & compiled when the `npm run build` command has run. The compiled JS will be at: + * web/frontend/js/admin-bundle-extra.js and will be included automatically in all of the KunstmaanBundlesCMS layouts. + * + */ diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/fonts/.gitkeep b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/fonts/.gitkeep new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/add.svg b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/add.svg new file mode 100755 index 0000000000..f22bfb34e8 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/add.svg @@ -0,0 +1,5 @@ + + +add + + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/alert.svg b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/alert.svg new file mode 100755 index 0000000000..5cb0680fd2 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/alert.svg @@ -0,0 +1,5 @@ + + +alert + + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/arrow-left.svg b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/arrow-left.svg new file mode 100755 index 0000000000..58adb7cfd4 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/arrow-left.svg @@ -0,0 +1,5 @@ + + +arrow-left + + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/arrow-right.svg b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/arrow-right.svg new file mode 100755 index 0000000000..6ceded7481 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/arrow-right.svg @@ -0,0 +1,5 @@ + + +arrow-right + + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/check.svg b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/check.svg new file mode 100755 index 0000000000..876b337d54 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/check.svg @@ -0,0 +1,5 @@ + + +check + + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/close.svg b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/close.svg new file mode 100755 index 0000000000..db3ab3d33f --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/close.svg @@ -0,0 +1,5 @@ + + +close + + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/date.svg b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/date.svg new file mode 100755 index 0000000000..8cd71ac883 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/date.svg @@ -0,0 +1,5 @@ + + +date + + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/delete.svg b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/delete.svg new file mode 100755 index 0000000000..c069aaed2c --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/delete.svg @@ -0,0 +1,5 @@ + + +delete + + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/download.svg b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/download.svg new file mode 100755 index 0000000000..e083f194f2 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/download.svg @@ -0,0 +1,5 @@ + + +download + + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/dropdown.svg b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/dropdown.svg new file mode 100755 index 0000000000..4f4e194652 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/dropdown.svg @@ -0,0 +1,5 @@ + + +dropdown + + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/edit.svg b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/edit.svg new file mode 100755 index 0000000000..61fbd3ba5a --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/edit.svg @@ -0,0 +1,5 @@ + + +edit + + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/expand.svg b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/expand.svg new file mode 100755 index 0000000000..e50bf2d9c8 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/expand.svg @@ -0,0 +1,5 @@ + + +expand + + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/hamburger.svg b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/hamburger.svg new file mode 100755 index 0000000000..6002b210e8 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/hamburger.svg @@ -0,0 +1,5 @@ + + +hamburger + + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/home.svg b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/home.svg new file mode 100755 index 0000000000..13c2113b89 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/home.svg @@ -0,0 +1,5 @@ + + +home + + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/info.svg b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/info.svg new file mode 100755 index 0000000000..53f4ca9343 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/info.svg @@ -0,0 +1,5 @@ + + +info + + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/like.svg b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/like.svg new file mode 100755 index 0000000000..9636256f6f --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/like.svg @@ -0,0 +1,5 @@ + + +like + + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/more-options.svg b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/more-options.svg new file mode 100755 index 0000000000..e08b882e04 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/more-options.svg @@ -0,0 +1,5 @@ + + +more-options + + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/pause.svg b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/pause.svg new file mode 100755 index 0000000000..7ac63d6657 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/pause.svg @@ -0,0 +1,5 @@ + + +pause + + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/pdf.svg b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/pdf.svg new file mode 100755 index 0000000000..233ddeb68d --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/pdf.svg @@ -0,0 +1,5 @@ + + +pdf + + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/phone.svg b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/phone.svg new file mode 100755 index 0000000000..77096ac85f --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/phone.svg @@ -0,0 +1,5 @@ + + +phone + + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/photo.svg b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/photo.svg new file mode 100755 index 0000000000..7db928781e --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/photo.svg @@ -0,0 +1,5 @@ + + +photo + + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/play.svg b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/play.svg new file mode 100755 index 0000000000..9cfdbdb13d --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/play.svg @@ -0,0 +1,5 @@ + + +play + + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/question.svg b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/question.svg new file mode 100755 index 0000000000..042b9a3b1b --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/question.svg @@ -0,0 +1,5 @@ + + +question + + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/required.svg b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/required.svg new file mode 100755 index 0000000000..6a6cba1c0f --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/required.svg @@ -0,0 +1,5 @@ + + +required + + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/rewind.svg b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/rewind.svg new file mode 100755 index 0000000000..c82775e3ec --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/rewind.svg @@ -0,0 +1,6 @@ + + +rewind + + + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/search.svg b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/search.svg new file mode 100755 index 0000000000..c541d11c6b --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/search.svg @@ -0,0 +1,5 @@ + + +search + + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/send.svg b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/send.svg new file mode 100755 index 0000000000..2257ebc67b --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/send.svg @@ -0,0 +1,5 @@ + + +send + + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/settings.svg b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/settings.svg new file mode 100755 index 0000000000..13afb3edb8 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/settings.svg @@ -0,0 +1,5 @@ + + +settings + + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/share.svg b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/share.svg new file mode 100755 index 0000000000..862de05bad --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/share.svg @@ -0,0 +1,5 @@ + + +share + + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/star.svg b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/star.svg new file mode 100755 index 0000000000..673e0bfa4a --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/star.svg @@ -0,0 +1,5 @@ + + +star + + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/sync.svg b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/sync.svg new file mode 100755 index 0000000000..614037af21 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/sync.svg @@ -0,0 +1,5 @@ + + +sync + + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/tag.svg b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/tag.svg new file mode 100755 index 0000000000..94c90f70a5 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/tag.svg @@ -0,0 +1,5 @@ + + +tag + + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/unlocked.svg b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/unlocked.svg new file mode 100755 index 0000000000..cc510179d3 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/unlocked.svg @@ -0,0 +1,5 @@ + + +unlocked + + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/upload.svg b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/upload.svg new file mode 100755 index 0000000000..2129815d1e --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/upload.svg @@ -0,0 +1,5 @@ + + +upload + + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/user.svg b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/user.svg new file mode 100755 index 0000000000..86e83f105e --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/user.svg @@ -0,0 +1,5 @@ + + +user + + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/zoom.svg b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/zoom.svg new file mode 100755 index 0000000000..08c0bf0c64 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/SVG/zoom.svg @@ -0,0 +1,5 @@ + + +zoom + + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/selection.json b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/selection.json new file mode 100755 index 0000000000..9a3f36a763 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/selection.json @@ -0,0 +1,1549 @@ +{ + "IcoMoonType": "selection", + "icons": [ + { + "icon": { + "paths": [ + "M69.013 644.091c-26.965-56.31-42.066-119.384-42.066-185.985 0-238.122 193.036-431.158 431.158-431.158s431.158 193.036 431.158 431.158c0 238.122-193.036 431.158-431.158 431.158v-161.684c148.826 0 269.474-120.647 269.474-269.474s-120.647-269.474-269.474-269.474c-148.826 0-269.474 120.647-269.474 269.474 0 40.944 9.029 80.279 26.208 116.155l-145.827 69.831z", + "M595.85 564.122c-2.128 0-4.389 0.333-6.783 0.998s-4.522 1.663-6.384 2.993l-293.675 178.36c-3.724 2.128-6.65 5.121-8.778 8.978s-3.192 8.047-3.192 12.569c0 4.522 1.064 8.712 3.192 12.569s5.054 6.85 8.778 8.978l294.074 178.36c1.862 1.33 3.99 2.328 6.384 2.993s4.655 0.998 6.783 0.998c2.128 0 4.256-0.266 6.384-0.798s4.123-1.33 5.985-2.394c4.256-2.394 7.515-5.586 9.776-9.576s3.392-8.246 3.392-12.768l-0.399-356.719c0-4.522-1.131-8.778-3.392-12.768s-5.52-7.182-9.776-9.576c-1.862-1.064-3.857-1.862-5.985-2.394s-4.256-0.798-6.384-0.798z" + ], + "attrs": [ + { + "fill": "rgb(138, 144, 147)" + }, + { + "fill": "rgb(138, 144, 147)" + } + ], + "width": 916, + "isMulticolor": false, + "isMulticolor2": false, + "grid": 0, + "tags": [ + "rewind" + ], + "colorPermutations": { + "11711711711381441471255741331": [ + { + "f": 1 + }, + { + "f": 1 + } + ] + } + }, + "attrs": [ + { + "fill": "rgb(138, 144, 147)" + }, + { + "fill": "rgb(138, 144, 147)" + } + ], + "properties": { + "order": 79, + "id": 42, + "name": "rewind", + "prevSize": 32 + }, + "setIdx": 0, + "setId": 0, + "iconIdx": 0 + }, + { + "icon": { + "paths": [ + "M107.789 916.211c0 59.446 48.344 107.789 107.789 107.789h538.947c59.446 0 107.789-48.344 107.789-107.789v-646.737h-754.526v646.737zM215.579 377.263h538.947l0.054 538.947h-539.001v-538.947zM646.737 107.789h323.368v107.789h-970.105v-107.789h323.368v-107.789h323.368v107.789zM323.368 485.053v323.368h107.789v-323.368h-107.789zM538.947 485.053v323.368h107.789v-323.368h-107.789z" + ], + "attrs": [ + {} + ], + "width": 970, + "isMulticolor": false, + "isMulticolor2": false, + "grid": 0, + "tags": [ + "delete" + ], + "colorPermutations": { + "11171171171": [ + {} + ], + "11711711711381441471255741331": [ + {} + ] + } + }, + "attrs": [ + {} + ], + "properties": { + "order": 80, + "id": 41, + "name": "delete", + "prevSize": 32 + }, + "setIdx": 0, + "setId": 0, + "iconIdx": 1 + }, + { + "icon": { + "paths": [ + "M935.936 315.136l-227.482-226.765 41.37-41.37c60.723-60.672 166.451-60.621 227.123 0 62.618 62.618 62.618 164.557 0 227.123l-41.011 41.011zM863.13 387.84l-466.381 466.381c-3.994 3.942-8.397 7.168-13.312 9.626l-309.402 154.726c-19.712 9.882-43.52 5.939-59.085-9.626s-19.456-39.373-9.574-59.085l154.624-309.402c2.509-4.915 5.734-9.318 9.626-13.312l466.381-466.381 227.123 227.072z" + ], + "attrs": [ + {} + ], + "isMulticolor": false, + "isMulticolor2": false, + "grid": 0, + "tags": [ + "edit" + ], + "colorPermutations": { + "11171171171": [ + {} + ], + "11711711711381441471255741331": [ + {} + ] + } + }, + "attrs": [ + {} + ], + "properties": { + "order": 81, + "id": 40, + "name": "edit", + "prevSize": 32 + }, + "setIdx": 0, + "setId": 0, + "iconIdx": 2 + }, + { + "icon": { + "paths": [ + "M512 1024c282.317 0 512-229.632 512-512 0-282.317-229.683-512-512-512s-512 229.734-512 512c0 282.368 229.683 512 512 512zM512 102.4c225.843 0 409.6 183.757 409.6 409.6s-183.757 409.6-409.6 409.6c-225.843 0-409.6-183.757-409.6-409.6s183.757-409.6 409.6-409.6zM563.2 665.6v-204.8c0-28.262-22.886-51.2-51.2-51.2h-102.4v102.4h51.2v153.6h-102.4v102.4h307.2v-102.4h-102.4zM512 371.2c35.346 0 64-28.654 64-64s-28.654-64-64-64c-35.346 0-64 28.654-64 64s28.654 64 64 64z" + ], + "attrs": [ + {} + ], + "isMulticolor": false, + "isMulticolor2": false, + "grid": 0, + "tags": [ + "info" + ], + "colorPermutations": { + "11171171171": [ + {} + ], + "11711711711381441471255741331": [ + {} + ] + } + }, + "attrs": [ + {} + ], + "properties": { + "order": 82, + "id": 39, + "name": "info", + "prevSize": 32 + }, + "setIdx": 0, + "setId": 0, + "iconIdx": 3 + }, + { + "icon": { + "paths": [ + "M45.059 30.118h301.176v963.765h-301.176v-963.765zM557.294 30.118h301.176v963.765h-301.176v-963.765z" + ], + "attrs": [ + { + "fill": "rgb(255, 74, 133)" + } + ], + "width": 904, + "isMulticolor": false, + "isMulticolor2": false, + "grid": 0, + "tags": [ + "pause" + ], + "colorPermutations": { + "11171171171": [ + { + "f": 0 + } + ], + "11711711711381441471255741331": [ + { + "f": 2 + } + ] + } + }, + "attrs": [ + { + "fill": "rgb(255, 74, 133)" + } + ], + "properties": { + "order": 83, + "id": 38, + "name": "pause", + "prevSize": 32 + }, + "setIdx": 0, + "setId": 0, + "iconIdx": 4 + }, + { + "icon": { + "paths": [ + "M584.657 0h-411.281c-60.084 0-108.986 48.936-108.986 108.986v403.013h-10.645c-24.25 0-43.917 19.648-43.917 43.919v266.342c0 24.269 19.665 43.915 43.917 43.915h10.645v48.838c0 60.116 48.902 108.986 108.986 108.986h561.175c60.046 0 108.954-48.872 108.954-108.986v-657.072l-258.849-257.942zM125.041 603.984c12.871-2.175 30.962-3.814 56.45-3.814 25.758 0 44.117 4.917 56.452 14.793 11.783 9.307 19.735 24.669 19.735 42.747 0 18.074-6.025 33.44-16.989 43.849-14.26 13.423-35.348 19.448-60.016 19.448-5.49 0-10.411-0.272-14.26-0.805v66.044h-41.373v-182.262zM734.551 957.255h-561.175c-23.265 0-42.21-18.945-42.21-42.242v-48.838h523.13c24.255 0 43.919-19.646 43.919-43.915v-266.342c0-24.272-19.665-43.919-43.919-43.919h-523.13v-403.013c0-23.231 18.947-42.176 42.21-42.176l386.311-0.404v142.794c0 41.709 33.842 75.582 75.582 75.582l139.882-0.401 1.574 630.63c0 23.299-18.911 42.244-42.174 42.244zM284.357 785.409v-181.425c15.345-2.442 35.345-3.814 56.452-3.814 35.078 0 57.824 6.293 75.648 19.714 19.181 14.26 31.229 36.989 31.229 69.623 0 35.348-12.871 59.751-30.696 74.811-19.448 16.167-49.053 23.834-85.22 23.834-21.659 0-37.004-1.372-47.413-2.742zM583.455 677.994v33.973h-66.328v74.278h-41.925v-184.704h112.905v34.241h-70.98v42.212h66.328zM345.193 632.235c35.898 0 58.377 20.283 58.109 58.646 0 44.117-24.669 64.937-62.493 64.67-5.206 0-10.963 0-14.529-0.837v-120.84c3.564-0.835 9.589-1.64 18.913-1.64zM216.306 658.811c0 18.915-13.707 30.127-35.9 30.127-6.042 0-10.426-0.268-13.992-1.070v-54.562c3.012-0.803 8.769-1.642 17.271-1.642 20.82 0 32.621 10.141 32.621 27.147z" + ], + "attrs": [ + {} + ], + "width": 853, + "isMulticolor": false, + "isMulticolor2": false, + "grid": 0, + "tags": [ + "pdf" + ], + "colorPermutations": { + "11171171171": [ + {} + ], + "11711711711381441471255741331": [ + {} + ] + } + }, + "attrs": [ + {} + ], + "properties": { + "order": 84, + "id": 37, + "name": "pdf", + "prevSize": 32 + }, + "setIdx": 0, + "setId": 0, + "iconIdx": 5 + }, + { + "icon": { + "paths": [ + "M77.071 21.455c5.13 0 10.581 0.802 16.352 2.405s10.901 4.008 15.39 7.214l707.943 429.96c8.978 5.13 16.031 12.344 21.161 21.642s7.695 19.398 7.695 30.299c0 10.901-2.565 21.001-7.695 30.299s-12.184 16.512-21.161 21.642l-708.905 429.96c-4.489 3.206-9.619 5.611-15.39 7.214s-11.222 2.405-16.352 2.405c-5.13 0-10.26-0.641-15.39-1.924s-9.939-3.206-14.428-5.771c-10.26-5.771-18.115-13.466-23.566-23.085s-8.176-19.879-8.176-30.78l0.962-859.92c0-10.901 2.725-21.161 8.176-30.78s13.306-17.314 23.566-23.085c4.489-2.565 9.298-4.489 14.428-5.771s10.26-1.924 15.39-1.924z" + ], + "attrs": [ + { + "fill": "rgb(255, 74, 133)" + } + ], + "width": 860, + "isMulticolor": false, + "isMulticolor2": false, + "grid": 0, + "tags": [ + "play" + ], + "colorPermutations": { + "11171171171": [ + { + "f": 0 + } + ], + "11711711711381441471255741331": [ + { + "f": 2 + } + ] + } + }, + "attrs": [ + { + "fill": "rgb(255, 74, 133)" + } + ], + "properties": { + "order": 85, + "id": 36, + "name": "play", + "prevSize": 32 + }, + "setIdx": 0, + "setId": 0, + "iconIdx": 6 + }, + { + "icon": { + "paths": [ + "M844.223 627.17l-198.93-114.788 198.93-114.934c8.709-4.956 11.697-16.107 6.669-24.816l-91.102-157.825c-2.442-4.227-6.414-7.288-11.078-8.491-4.664-1.275-9.657-0.619-13.811 1.786l-198.93 114.861v-229.649c0-10.094-8.199-18.22-18.22-18.22h-182.204c-10.058 0-18.22 8.126-18.22 18.22v229.577l-198.894-114.788c-4.191-2.405-9.183-3.061-13.811-1.786-4.664 1.203-8.636 4.264-11.078 8.491l-91.102 157.825c-5.029 8.709-2.041 19.86 6.669 24.816l198.894 114.934-198.894 114.788c-8.709 5.102-11.697 16.18-6.669 24.925l91.102 157.825c2.442 4.118 6.414 7.179 11.078 8.418 4.628 1.203 9.62 0.619 13.811-1.822l198.894-114.788v229.722c0 10.058 8.163 18.22 18.22 18.22h182.204c10.021 0 18.22-8.163 18.22-18.22v-229.722l198.93 114.788c4.154 2.442 9.147 3.025 13.811 1.822 4.664-1.239 8.636-4.3 11.078-8.418l91.102-157.825c2.405-4.227 3.061-9.183 1.786-13.847-1.239-4.628-4.3-8.673-8.454-11.078z" + ], + "attrs": [ + {} + ], + "width": 853, + "isMulticolor": false, + "isMulticolor2": false, + "grid": 0, + "tags": [ + "required" + ], + "colorPermutations": { + "11171171171": [ + {} + ], + "11711711711381441471255741331": [ + {} + ] + } + }, + "attrs": [ + {} + ], + "properties": { + "order": 86, + "id": 35, + "name": "required", + "prevSize": 32 + }, + "setIdx": 0, + "setId": 0, + "iconIdx": 7 + }, + { + "icon": { + "paths": [ + "M896 448h-320v-320h-128v320h-320v128h320v320h128v-320h320z" + ], + "attrs": [ + {} + ], + "isMulticolor": false, + "isMulticolor2": false, + "grid": 0, + "tags": [ + "add" + ], + "colorPermutations": { + "11171171171": [ + {} + ], + "11711711711381441471255741331": [ + {} + ] + } + }, + "attrs": [ + {} + ], + "properties": { + "order": 44, + "id": 33, + "name": "add", + "prevSize": 32 + }, + "setIdx": 0, + "setId": 0, + "iconIdx": 8 + }, + { + "icon": { + "paths": [ + "M512 85.333c-235.264 0-426.667 191.403-426.667 426.667 0 235.307 191.403 426.667 426.667 426.667s426.667-191.36 426.667-426.667c0-235.264-191.403-426.667-426.667-426.667zM469.333 256h85.333v298.667h-85.333v-298.667zM512 736c-29.44 0-53.333-23.851-53.333-53.333 0-29.44 23.893-53.333 53.333-53.333s53.333 23.893 53.333 53.333c0 29.483-23.893 53.333-53.333 53.333z" + ], + "attrs": [ + { + "fill": "rgb(117, 117, 117)" + } + ], + "isMulticolor": false, + "isMulticolor2": false, + "grid": 0, + "tags": [ + "alert" + ], + "colorPermutations": { + "11171171171": [ + { + "f": 1 + } + ], + "11711711711381441471255741331": [ + { + "f": 0 + } + ] + } + }, + "attrs": [ + { + "fill": "rgb(117, 117, 117)" + } + ], + "properties": { + "order": 45, + "id": 32, + "name": "alert", + "prevSize": 32 + }, + "setIdx": 0, + "setId": 0, + "iconIdx": 9 + }, + { + "icon": { + "paths": [ + "M725.333 256l-86.955-85.333-339.712 341.333 339.712 341.333 86.955-85.333-256-256z" + ], + "attrs": [ + {} + ], + "isMulticolor": false, + "isMulticolor2": false, + "grid": 0, + "tags": [ + "arrow-left" + ], + "colorPermutations": { + "11171171171": [ + {} + ], + "11711711711381441471255741331": [ + {} + ] + } + }, + "attrs": [ + {} + ], + "properties": { + "order": 46, + "id": 31, + "name": "arrow-left", + "prevSize": 32 + }, + "setIdx": 0, + "setId": 0, + "iconIdx": 10 + }, + { + "icon": { + "paths": [ + "M298.667 256l86.955-85.333 339.712 341.333-339.712 341.333-86.955-85.333 256-256z" + ], + "attrs": [ + {} + ], + "isMulticolor": false, + "isMulticolor2": false, + "grid": 0, + "tags": [ + "arrow-right" + ], + "colorPermutations": { + "11171171171": [ + {} + ], + "11711711711381441471255741331": [ + {} + ] + } + }, + "attrs": [ + {} + ], + "properties": { + "order": 47, + "id": 30, + "name": "arrow-right", + "prevSize": 32 + }, + "setIdx": 0, + "setId": 0, + "iconIdx": 11 + }, + { + "icon": { + "paths": [ + "M461.957 812.255l-285.957-214.468 85.787-114.383 171.574 128.681 300.255-400.34 114.383 85.787z" + ], + "attrs": [ + { + "fill": "rgb(117, 117, 117)" + } + ], + "isMulticolor": false, + "isMulticolor2": false, + "grid": 0, + "tags": [ + "check" + ], + "colorPermutations": { + "11171171171": [ + { + "f": 1 + } + ], + "11711711711381441471255741331": [ + { + "f": 0 + } + ] + } + }, + "attrs": [ + { + "fill": "rgb(117, 117, 117)" + } + ], + "properties": { + "order": 48, + "id": 29, + "name": "check", + "prevSize": 32 + }, + "setIdx": 0, + "setId": 0, + "iconIdx": 12 + }, + { + "icon": { + "paths": [ + "M871.040 260.83l-107.889-107.851-251.132 251.17-251.17-251.17-107.889 107.851 251.17 251.17-251.17 251.17 107.889 107.851 251.17-251.17 251.132 251.17 107.889-107.851-251.17-251.17z" + ], + "attrs": [ + { + "fill": "rgb(117, 117, 117)" + } + ], + "isMulticolor": false, + "isMulticolor2": false, + "grid": 0, + "tags": [ + "close" + ], + "colorPermutations": { + "11171171171": [ + { + "f": 1 + } + ], + "11711711711381441471255741331": [ + { + "f": 0 + } + ] + } + }, + "attrs": [ + { + "fill": "rgb(117, 117, 117)" + } + ], + "properties": { + "order": 49, + "id": 28, + "name": "close", + "prevSize": 32 + }, + "setIdx": 0, + "setId": 0, + "iconIdx": 13 + }, + { + "icon": { + "paths": [ + "M896 170.667h-85.333v-85.333h-85.333v213.333h-85.333v-128h-256v-85.333h-85.333v213.333h-85.333v-128h-85.333c-47.061 0-85.333 38.315-85.333 85.333v640c0 47.019 38.272 85.333 85.333 85.333h768c47.061 0 85.333-38.315 85.333-85.333v-640c0-47.061-38.272-85.333-85.333-85.333zM341.333 853.333h-170.667v-170.667h170.667v170.667zM341.333 597.333h-170.667v-170.667h170.667v170.667zM597.333 853.333h-170.667v-170.667h170.667v170.667zM597.333 597.333h-170.667v-170.667h170.667v170.667zM853.333 597.333h-170.667v-170.667h170.667v170.667z" + ], + "attrs": [ + { + "fill": "rgb(117, 117, 117)" + } + ], + "isMulticolor": false, + "isMulticolor2": false, + "grid": 0, + "tags": [ + "date" + ], + "colorPermutations": { + "11171171171": [ + { + "f": 1 + } + ], + "11711711711381441471255741331": [ + { + "f": 0 + } + ] + } + }, + "attrs": [ + { + "fill": "rgb(117, 117, 117)" + } + ], + "properties": { + "order": 50, + "id": 27, + "name": "date", + "prevSize": 32 + }, + "setIdx": 0, + "setId": 0, + "iconIdx": 14 + }, + { + "icon": { + "paths": [ + "M676.608 640h262.059v298.667h-853.333v-298.667h262.059c19.029 73.515 85.205 128 164.608 128s145.579-54.485 164.608-128zM652.501 353.835l60.331 60.331-200.832 200.832-200.832-200.832 60.331-60.331 97.835 97.835v-366.336h85.333v366.336l97.835-97.835z" + ], + "attrs": [ + { + "fill": "rgb(117, 117, 117)" + } + ], + "isMulticolor": false, + "isMulticolor2": false, + "grid": 0, + "tags": [ + "download" + ], + "colorPermutations": { + "11171171171": [ + { + "f": 1 + } + ], + "11711711711381441471255741331": [ + { + "f": 0 + } + ] + } + }, + "attrs": [ + { + "fill": "rgb(117, 117, 117)" + } + ], + "properties": { + "order": 52, + "id": 25, + "name": "download", + "prevSize": 32 + }, + "setIdx": 0, + "setId": 0, + "iconIdx": 15 + }, + { + "icon": { + "paths": [ + "M255.289 298.667l278.044 291.748 278.044-291.748 84.622 88.793-362.667 380.541-362.667-380.541 84.622-88.793z" + ], + "attrs": [ + {} + ], + "isMulticolor": false, + "isMulticolor2": false, + "grid": 0, + "tags": [ + "dropdown" + ], + "colorPermutations": { + "11171171171": [ + {} + ], + "11711711711381441471255741331": [ + {} + ] + } + }, + "attrs": [ + {} + ], + "properties": { + "order": 53, + "id": 24, + "name": "dropdown", + "prevSize": 32 + }, + "setIdx": 0, + "setId": 0, + "iconIdx": 16 + }, + { + "icon": { + "paths": [ + "M938.667 85.333v256h-85.333v-110.336l-225.835 225.835-60.331-60.331 225.835-225.835h-110.336v-85.333h256zM341.333 853.333v85.333h-256v-256h85.333v110.336l225.835-225.835 60.331 60.331-225.835 225.835h110.336zM170.667 230.997v110.336h-85.333v-256h256v85.333h-110.336l225.835 225.835-60.331 60.331-225.835-225.835zM682.667 938.667v-85.333h110.336l-225.835-225.835 60.331-60.331 225.835 225.835v-110.336h85.333v256h-256z" + ], + "attrs": [ + { + "fill": "rgb(117, 117, 117)" + } + ], + "isMulticolor": false, + "isMulticolor2": false, + "grid": 0, + "tags": [ + "expand" + ], + "colorPermutations": { + "11171171171": [ + { + "f": 1 + } + ], + "11711711711381441471255741331": [ + { + "f": 0 + } + ] + } + }, + "attrs": [ + { + "fill": "rgb(117, 117, 117)" + } + ], + "properties": { + "order": 55, + "id": 22, + "name": "expand", + "prevSize": 32 + }, + "setIdx": 0, + "setId": 0, + "iconIdx": 17 + }, + { + "icon": { + "paths": [ + "M0 85.333h1024v128h-1024v-128zM0 426.667h1024v128h-1024v-128zM0 768h1024v128h-1024v-128z" + ], + "attrs": [ + {} + ], + "isMulticolor": false, + "isMulticolor2": false, + "grid": 0, + "tags": [ + "hamburger" + ], + "colorPermutations": { + "11171171171": [ + {} + ], + "11711711711381441471255741331": [ + {} + ] + } + }, + "attrs": [ + {} + ], + "properties": { + "order": 56, + "id": 21, + "name": "hamburger", + "prevSize": 32 + }, + "setIdx": 0, + "setId": 0, + "iconIdx": 18 + }, + { + "icon": { + "paths": [ + "M896 554.667v426.667h-256v-256h-256v256h-256v-426.667h-128l512-512 512 512h-128zM853.333 302.635v-217.301h-128v89.301l128 128z" + ], + "attrs": [ + {} + ], + "isMulticolor": false, + "isMulticolor2": false, + "grid": 0, + "tags": [ + "home" + ], + "colorPermutations": { + "11171171171": [ + {} + ], + "11711711711381441471255741331": [ + {} + ] + } + }, + "attrs": [ + {} + ], + "properties": { + "order": 57, + "id": 20, + "name": "home", + "prevSize": 32 + }, + "setIdx": 0, + "setId": 0, + "iconIdx": 19 + }, + { + "icon": { + "paths": [ + "M682.667 170.709c-68.011 0-130.987 35.712-170.667 88.747-39.68-53.035-102.656-88.747-170.667-88.747-117.632 0-213.333 95.701-213.333 213.333 0 234.283 346.624 453.632 361.429 462.848 6.912 4.309 14.763 6.485 22.571 6.485s15.659-2.176 22.571-6.485c14.805-9.216 361.429-228.565 361.429-462.848 0-117.632-95.701-213.333-213.333-213.333z" + ], + "attrs": [ + { + "fill": "rgb(117, 117, 117)" + } + ], + "isMulticolor": false, + "isMulticolor2": false, + "grid": 0, + "tags": [ + "like" + ], + "colorPermutations": { + "11171171171": [ + { + "f": 1 + } + ], + "11711711711381441471255741331": [ + { + "f": 0 + } + ] + } + }, + "attrs": [ + { + "fill": "rgb(117, 117, 117)" + } + ], + "properties": { + "order": 59, + "id": 18, + "name": "like", + "prevSize": 32 + }, + "setIdx": 0, + "setId": 0, + "iconIdx": 20 + }, + { + "icon": { + "paths": [ + "M213.333 597.333c-47.128 0-85.333-38.205-85.333-85.333s38.205-85.333 85.333-85.333c47.128 0 85.333 38.205 85.333 85.333s-38.205 85.333-85.333 85.333zM512 597.333c-47.128 0-85.333-38.205-85.333-85.333s38.205-85.333 85.333-85.333c47.128 0 85.333 38.205 85.333 85.333s-38.205 85.333-85.333 85.333zM810.667 597.333c-47.128 0-85.333-38.205-85.333-85.333s38.205-85.333 85.333-85.333c47.128 0 85.333 38.205 85.333 85.333s-38.205 85.333-85.333 85.333z" + ], + "attrs": [ + { + "fill": "rgb(117, 117, 117)" + } + ], + "isMulticolor": false, + "isMulticolor2": false, + "grid": 0, + "tags": [ + "more-options" + ], + "colorPermutations": { + "11171171171": [ + { + "f": 1 + } + ], + "11711711711381441471255741331": [ + { + "f": 0 + } + ] + } + }, + "attrs": [ + { + "fill": "rgb(117, 117, 117)" + } + ], + "properties": { + "order": 60, + "id": 17, + "name": "more-options", + "prevSize": 32 + }, + "setIdx": 0, + "setId": 0, + "iconIdx": 21 + }, + { + "icon": { + "paths": [ + "M768 170.624c0-47.147-38.229-85.333-85.333-85.333h-341.333c-47.104 0-85.333 38.229-85.333 85.333v682.667c0 47.104 38.229 85.333 85.333 85.333h341.333c47.104 0 85.333-38.229 85.333-85.333v-682.667zM682.667 767.957h-341.333v-512h341.333v512z" + ], + "attrs": [ + { + "fill": "rgb(117, 117, 117)" + } + ], + "isMulticolor": false, + "isMulticolor2": false, + "grid": 0, + "tags": [ + "phone" + ], + "colorPermutations": { + "11171171171": [ + { + "f": 1 + } + ], + "11711711711381441471255741331": [ + { + "f": 0 + } + ] + } + }, + "attrs": [ + { + "fill": "rgb(117, 117, 117)" + } + ], + "properties": { + "order": 62, + "id": 15, + "name": "phone", + "prevSize": 32 + }, + "setIdx": 0, + "setId": 0, + "iconIdx": 22 + }, + { + "icon": { + "paths": [ + "M512 384c-94.123 0-170.667 76.544-170.667 170.667 0 94.165 76.544 170.667 170.667 170.667s170.667-76.501 170.667-170.667c0-94.080-76.544-170.667-170.667-170.667zM853.333 256.043h-82.347c-28.501 0-55.168-14.251-70.997-37.973l-34.645-52.053c-15.829-23.723-42.496-38.016-70.997-38.016h-164.693c-28.501 0-55.168 14.293-70.997 37.973l-34.645 52.053c-15.829 23.765-42.496 37.973-70.997 37.973h-82.347c-47.147 0-85.333 38.229-85.333 85.333v469.333c0 47.104 38.187 85.333 85.333 85.333h682.667c47.104 0 85.333-38.229 85.333-85.333v-469.333c0-47.061-38.229-85.291-85.333-85.291zM512 810.667c-141.184 0-256-114.816-256-256 0-141.141 114.816-256 256-256s256 114.859 256 256c0 141.227-114.816 256-256 256z" + ], + "attrs": [ + { + "fill": "rgb(117, 117, 117)" + } + ], + "isMulticolor": false, + "isMulticolor2": false, + "grid": 0, + "tags": [ + "photo" + ], + "colorPermutations": { + "11171171171": [ + { + "f": 1 + } + ], + "11711711711381441471255741331": [ + { + "f": 0 + } + ] + } + }, + "attrs": [ + { + "fill": "rgb(117, 117, 117)" + } + ], + "properties": { + "order": 63, + "id": 14, + "name": "photo", + "prevSize": 32 + }, + "setIdx": 0, + "setId": 0, + "iconIdx": 23 + }, + { + "icon": { + "paths": [ + "M512 85.333c-235.264 0-426.667 191.445-426.667 426.667 0 235.307 191.403 426.667 426.667 426.667s426.667-191.36 426.667-426.667c0-235.221-191.403-426.667-426.667-426.667zM512 778.667c-29.44 0-53.333-23.851-53.333-53.333 0-29.44 23.893-53.333 53.333-53.333s53.333 23.893 53.333 53.333c0 29.483-23.893 53.333-53.333 53.333zM554.667 592v48h-85.333v-128h42.667c47.104 0 85.333-38.272 85.333-85.333 0-47.104-38.229-85.333-85.333-85.333s-85.333 38.229-85.333 85.333h-85.333c0-94.080 76.587-170.667 170.667-170.667s170.667 76.587 170.667 170.667c0 79.403-54.485 146.304-128 165.333z" + ], + "attrs": [ + { + "fill": "rgb(117, 117, 117)" + } + ], + "isMulticolor": false, + "isMulticolor2": false, + "grid": 0, + "tags": [ + "question" + ], + "colorPermutations": { + "11171171171": [ + { + "f": 1 + } + ], + "11711711711381441471255741331": [ + { + "f": 0 + } + ] + } + }, + "attrs": [ + { + "fill": "rgb(117, 117, 117)" + } + ], + "properties": { + "order": 64, + "id": 13, + "name": "question", + "prevSize": 32 + }, + "setIdx": 0, + "setId": 0, + "iconIdx": 24 + }, + { + "icon": { + "paths": [ + "M981.333 889.266l-244.631-242.684c46.009-62.773 73.212-139.979 73.212-223.364 0-209.831-172.090-380.551-383.643-380.551-211.514 0-383.604 170.72-383.604 380.551 0 209.87 172.090 380.551 383.604 380.551 80.19 0 154.664-24.523 216.324-66.411l245.932 243.975 92.806-92.068zM170.667 426.667c0-141.159 114.841-256 256-256s256 114.841 256 256c0 141.159-114.841 256-256 256-141.196 0-256-114.841-256-256z" + ], + "attrs": [ + {} + ], + "isMulticolor": false, + "isMulticolor2": false, + "grid": 0, + "tags": [ + "search" + ], + "colorPermutations": { + "11171171171": [ + {} + ], + "11711711711381441471255741331": [ + {} + ] + } + }, + "attrs": [ + {} + ], + "properties": { + "order": 67, + "id": 10, + "name": "search", + "prevSize": 32 + }, + "setIdx": 0, + "setId": 0, + "iconIdx": 25 + }, + { + "icon": { + "paths": [ + "M896 469.333h-610.432c-14.976 0-28.843-7.893-36.565-20.736l-157.568-262.613c-9.259-15.36-7.851-34.944 3.456-48.811 11.264-13.909 30.123-19.285 47.061-13.397l768 262.656c19.669 6.784 31.573 26.837 28.117 47.317-3.456 20.565-21.248 35.584-42.069 35.584zM285.568 554.667h610.432c20.864 0 38.656 14.976 42.112 35.584 3.456 20.523-8.448 40.576-28.117 47.403l-768 262.571c-16.981 5.845-35.797 0.512-47.104-13.397s-12.715-33.493-3.499-48.811l157.611-262.699c7.68-12.715 21.547-20.651 36.565-20.651z" + ], + "attrs": [ + { + "fill": "rgb(117, 117, 117)" + } + ], + "isMulticolor": false, + "isMulticolor2": false, + "grid": 0, + "tags": [ + "send" + ], + "colorPermutations": { + "11171171171": [ + { + "f": 1 + } + ], + "11711711711381441471255741331": [ + { + "f": 0 + } + ] + } + }, + "attrs": [ + { + "fill": "rgb(117, 117, 117)" + } + ], + "properties": { + "order": 68, + "id": 9, + "name": "send", + "prevSize": 32 + }, + "setIdx": 0, + "setId": 0, + "iconIdx": 26 + }, + { + "icon": { + "paths": [ + "M618.667 255.957c0 14.72 2.005 28.885 5.163 42.667h-538.496v-85.333h538.496c-3.157 13.781-5.163 27.947-5.163 42.667zM618.667 767.957c0 14.72 2.005 28.885 5.163 42.667h-538.496v-85.333h538.496c-3.157 13.781-5.163 27.947-5.163 42.667zM192 511.957c0 14.72 2.005 28.885 5.163 42.667h-111.829v-85.333h111.829c-3.157 13.781-5.163 27.947-5.163 42.667zM570.837 469.291h367.829v85.333h-367.829c3.157-13.781 5.163-27.947 5.163-42.667s-2.005-28.885-5.163-42.667zM810.667 383.957c-70.692 0-128-57.308-128-128s57.308-128 128-128c70.692 0 128 57.308 128 128s-57.308 128-128 128zM384 639.957c-70.692 0-128-57.308-128-128s57.308-128 128-128c70.692 0 128 57.308 128 128s-57.308 128-128 128zM810.667 895.957c-70.692 0-128-57.308-128-128s57.308-128 128-128c70.692 0 128 57.308 128 128s-57.308 128-128 128z" + ], + "attrs": [ + { + "fill": "rgb(117, 117, 117)" + } + ], + "isMulticolor": false, + "isMulticolor2": false, + "grid": 0, + "tags": [ + "settings" + ], + "colorPermutations": { + "11171171171": [ + { + "f": 1 + } + ], + "11711711711381441471255741331": [ + { + "f": 0 + } + ] + } + }, + "attrs": [ + { + "fill": "rgb(117, 117, 117)" + } + ], + "properties": { + "order": 69, + "id": 8, + "name": "settings", + "prevSize": 32 + }, + "setIdx": 0, + "setId": 0, + "iconIdx": 27 + }, + { + "icon": { + "paths": [ + "M768 597.333c-51.2 0-96.683 23.083-128 58.923l-217.259-108.587c2.517-11.477 3.925-23.381 3.925-35.669s-1.408-24.149-3.925-35.712l217.259-108.587c31.317 35.84 76.8 58.965 128 58.965 94.080 0 170.667-76.587 170.667-170.667 0-94.123-76.587-170.667-170.667-170.667s-170.667 76.544-170.667 170.667c0 12.245 1.408 24.149 3.925 35.669l-217.259 108.587c-31.317-35.797-76.8-58.923-128-58.923-94.080 0-170.667 76.544-170.667 170.667 0 94.080 76.587 170.667 170.667 170.667 51.2 0 96.683-23.168 128-59.008l217.259 108.629c-2.517 11.563-3.925 23.467-3.925 35.712 0 94.080 76.587 170.667 170.667 170.667s170.667-76.587 170.667-170.667c0-94.080-76.587-170.667-170.667-170.667z" + ], + "attrs": [ + { + "fill": "rgb(117, 117, 117)" + } + ], + "isMulticolor": false, + "isMulticolor2": false, + "grid": 0, + "tags": [ + "share" + ], + "colorPermutations": { + "11171171171": [ + { + "f": 1 + } + ], + "11711711711381441471255741331": [ + { + "f": 0 + } + ] + } + }, + "attrs": [ + { + "fill": "rgb(117, 117, 117)" + } + ], + "properties": { + "order": 70, + "id": 7, + "name": "share", + "prevSize": 32 + }, + "setIdx": 0, + "setId": 0, + "iconIdx": 28 + }, + { + "icon": { + "paths": [ + "M935.424 367.701c-6.571-15.915-22.187-26.325-39.424-26.325h-229.632l-116.224-232.405c-14.464-28.885-61.867-28.885-76.331 0l-116.181 232.405h-229.632c-17.237 0-32.853 10.411-39.424 26.325s-2.944 34.347 9.259 46.507l195.584 195.584-78.421 274.56c-4.907 17.195 1.408 35.627 15.829 46.165 14.507 10.581 34.005 10.965 48.811 1.024l232.363-154.88 232.32 154.88c7.168 4.779 15.403 7.168 23.68 7.168 8.832 0 17.664-2.731 25.173-8.192 14.421-10.539 20.736-28.971 15.829-46.165l-78.421-274.56 195.584-195.584c12.203-12.16 15.829-30.592 9.259-46.507z" + ], + "attrs": [ + { + "fill": "rgb(117, 117, 117)" + } + ], + "isMulticolor": false, + "isMulticolor2": false, + "grid": 0, + "tags": [ + "star" + ], + "colorPermutations": { + "11171171171": [ + { + "f": 1 + } + ], + "11711711711381441471255741331": [ + { + "f": 0 + } + ] + } + }, + "attrs": [ + { + "fill": "rgb(117, 117, 117)" + } + ], + "properties": { + "order": 71, + "id": 6, + "name": "star", + "prevSize": 32 + }, + "setIdx": 0, + "setId": 0, + "iconIdx": 29 + }, + { + "icon": { + "paths": [ + "M341.333 341.376c-94.080 0-170.667 76.587-170.667 170.667h-85.333c0-141.184 114.816-256 256-256h323.669l-97.835-97.835 60.331-60.331 170.667 170.667c16.683 16.683 16.683 43.648 0 60.331l-170.667 170.667-60.331-60.331 97.835-97.835h-323.669zM853.333 512.043h85.333c0 141.184-114.816 256-256 256h-323.669l97.835 97.835-60.331 60.331-170.667-170.667c-16.683-16.683-16.683-43.648 0-60.331l170.667-170.667 60.331 60.331-97.835 97.835h323.669c94.080 0 170.667-76.587 170.667-170.667z" + ], + "attrs": [ + { + "fill": "rgb(117, 117, 117)" + } + ], + "isMulticolor": false, + "isMulticolor2": false, + "grid": 0, + "tags": [ + "sync" + ], + "colorPermutations": { + "11171171171": [ + { + "f": 1 + } + ], + "11711711711381441471255741331": [ + { + "f": 0 + } + ] + } + }, + "attrs": [ + { + "fill": "rgb(117, 117, 117)" + } + ], + "properties": { + "order": 72, + "id": 5, + "name": "sync", + "prevSize": 32 + }, + "setIdx": 0, + "setId": 0, + "iconIdx": 30 + }, + { + "icon": { + "paths": [ + "M926.165 567.168l-469.333-469.333c-8.021-8.021-18.816-12.501-30.165-12.501h-298.667c-23.595 0-42.667 19.072-42.667 42.667v298.667c0 11.349 4.48 22.144 12.501 30.165l469.333 469.333c8.32 8.32 19.243 12.501 30.165 12.501s21.845-4.181 30.165-12.501l298.667-298.667c16.683-16.683 16.683-43.648 0-60.331zM298.667 384c-47.189 0-85.333-38.229-85.333-85.333 0-47.189 38.144-85.333 85.333-85.333 47.104 0 85.333 38.144 85.333 85.333 0 47.104-38.229 85.333-85.333 85.333z" + ], + "attrs": [ + { + "fill": "rgb(117, 117, 117)" + } + ], + "isMulticolor": false, + "isMulticolor2": false, + "grid": 0, + "tags": [ + "tag" + ], + "colorPermutations": { + "11171171171": [ + { + "f": 1 + } + ], + "11711711711381441471255741331": [ + { + "f": 0 + } + ] + } + }, + "attrs": [ + { + "fill": "rgb(117, 117, 117)" + } + ], + "properties": { + "order": 73, + "id": 4, + "name": "tag", + "prevSize": 32 + }, + "setIdx": 0, + "setId": 0, + "iconIdx": 31 + }, + { + "icon": { + "paths": [ + "M725.333 469.333h-341.333v-170.667c0-70.571 57.429-128 128-128s128 57.429 128 128v42.667h85.333v-42.667c0-117.632-95.701-213.333-213.333-213.333s-213.333 95.701-213.333 213.333v170.667c-47.061 0-85.333 38.229-85.333 85.333v298.667c0 47.061 38.272 85.333 85.333 85.333h426.667c47.104 0 85.333-38.272 85.333-85.333v-298.667c0-47.104-38.229-85.333-85.333-85.333zM512 768c-35.328 0-64-28.672-64-64s28.672-64 64-64c35.328 0 64 28.672 64 64s-28.672 64-64 64z" + ], + "attrs": [ + { + "fill": "rgb(117, 117, 117)" + } + ], + "isMulticolor": false, + "isMulticolor2": false, + "grid": 0, + "tags": [ + "unlocked" + ], + "colorPermutations": { + "11171171171": [ + { + "f": 1 + } + ], + "11711711711381441471255741331": [ + { + "f": 0 + } + ] + } + }, + "attrs": [ + { + "fill": "rgb(117, 117, 117)" + } + ], + "properties": { + "order": 74, + "id": 3, + "name": "unlocked", + "prevSize": 32 + }, + "setIdx": 0, + "setId": 0, + "iconIdx": 32 + }, + { + "icon": { + "paths": [ + "M712.832 268.501l-60.331 60.331-97.835-97.835v409.003h-85.333v-409.003l-97.835 97.835-60.331-60.331 200.832-200.832 200.832 200.832zM676.608 640h262.059v298.667h-853.333v-298.667h262.059c19.029 73.515 85.205 128 164.608 128s145.579-54.485 164.608-128z" + ], + "attrs": [ + { + "fill": "rgb(117, 117, 117)" + } + ], + "isMulticolor": false, + "isMulticolor2": false, + "grid": 0, + "tags": [ + "upload" + ], + "colorPermutations": { + "11171171171": [ + { + "f": 1 + } + ], + "11711711711381441471255741331": [ + { + "f": 0 + } + ] + } + }, + "attrs": [ + { + "fill": "rgb(117, 117, 117)" + } + ], + "properties": { + "order": 75, + "id": 2, + "name": "upload", + "prevSize": 32 + }, + "setIdx": 0, + "setId": 0, + "iconIdx": 33 + }, + { + "icon": { + "paths": [ + "M512.085 512.256c-94.080 0-170.667-76.587-170.667-170.667s76.544-170.667 170.667-170.667c94.123 0 170.667 76.587 170.667 170.667s-76.544 170.667-170.667 170.667zM512.085 554.923c201.003 0 341.333 105.259 341.333 256v42.667h-682.667v-42.667c0-150.741 140.373-256 341.333-256z" + ], + "attrs": [ + { + "fill": "rgb(117, 117, 117)" + } + ], + "isMulticolor": false, + "isMulticolor2": false, + "grid": 0, + "tags": [ + "user" + ], + "colorPermutations": { + "11171171171": [ + { + "f": 1 + } + ], + "11711711711381441471255741331": [ + { + "f": 0 + } + ] + } + }, + "attrs": [ + { + "fill": "rgb(117, 117, 117)" + } + ], + "properties": { + "order": 76, + "id": 1, + "name": "user", + "prevSize": 32 + }, + "setIdx": 0, + "setId": 0, + "iconIdx": 34 + }, + { + "icon": { + "paths": [ + "M913.664 793.003l-193.152-193.152c30.72-51.968 47.488-111.232 47.488-173.184 0-91.179-35.541-176.896-100.011-241.323-64.427-64.512-150.144-100.011-241.323-100.011s-176.896 35.499-241.323 100.011c-64.512 64.427-100.011 150.144-100.011 241.323s35.499 176.896 100.011 241.323c64.427 64.512 150.144 100.011 241.323 100.011 61.952 0 121.216-16.768 173.184-47.488l193.152 193.109c16.085 16.171 37.547 25.045 60.331 25.045s44.245-8.875 60.331-25.003c16.128-16.128 25.003-37.504 25.003-60.331 0-22.784-8.875-44.203-25.003-60.331zM597.333 469.333h-128v128h-85.333v-128h-128v-85.333h128v-128h85.333v128h128v85.333z" + ], + "attrs": [ + { + "fill": "rgb(117, 117, 117)" + } + ], + "isMulticolor": false, + "isMulticolor2": false, + "grid": 0, + "tags": [ + "zoom" + ], + "colorPermutations": { + "11171171171": [ + { + "f": 1 + } + ], + "11711711711381441471255741331": [ + { + "f": 0 + } + ] + } + }, + "attrs": [ + { + "fill": "rgb(117, 117, 117)" + } + ], + "properties": { + "order": 77, + "id": 0, + "name": "zoom", + "prevSize": 32 + }, + "setIdx": 0, + "setId": 0, + "iconIdx": 35 + } + ], + "height": 1024, + "preferences": { + "showGlyphs": true, + "showCodes": true, + "showQuickUse": true, + "showQuickUse2": true, + "showSVGs": true, + "fontPref": { + "prefix": "", + "metadata": { + "fontFamily": "kuma_icons", + "majorVersion": 1, + "minorVersion": 0 + }, + "metrics": { + "emSize": 1024, + "baseline": 6.25, + "whitespace": 50 + }, + "noie8": true, + "ie7": false, + "cssVars": true, + "cssVarsFormat": "scss", + "showMetrics": true, + "showSelector": true, + "selector": "class", + "classSelector": ".icon", + "showMetadata": false, + "showVersion": false + }, + "imagePref": { + "prefix": "icon--", + "png": false, + "useClassSelector": false, + "color": 0, + "bgColor": 16777215, + "classSelector": ".icon", + "height": 32, + "columns": 16, + "margin": 16, + "name": "icomoon" + }, + "historySize": 50, + "gridSize": 16 + } +} \ No newline at end of file diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/symbol-defs.svg b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/symbol-defs.svg new file mode 100755 index 0000000000..752bc320e8 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/icons/symbol-defs.svg @@ -0,0 +1,149 @@ + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/img/general/.gitkeep b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/img/general/.gitkeep new file mode 100755 index 0000000000..e69de29bb2 diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/img/general/logo-kunstmaan.svg b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/img/general/logo-kunstmaan.svg new file mode 100755 index 0000000000..cf761c23e6 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/img/general/logo-kunstmaan.svg @@ -0,0 +1,18 @@ + + + + logo-kunstmaan + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/img/general/video-pp--default.svg b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/img/general/video-pp--default.svg new file mode 100644 index 0000000000..975a945ea8 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/img/general/video-pp--default.svg @@ -0,0 +1,6 @@ + + + + + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/app.js b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/app.js new file mode 100755 index 0000000000..e7248ef50b --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/app.js @@ -0,0 +1,24 @@ +import 'picturefill'; +import 'svgxuse/svgxuse'; +import 'focus-visible/dist/focus-visible'; +import 'intersection-observer/intersection-observer'; +// import '../../../vendor/kunstmaan/cookie-bundle/bin/'; + +import {lazyLoadImage} from './lazyLoadImage/lazyLoadImage'; +import {tabs} from './tabs/tabs'; +import {navToggle} from './nav-toggle/nav-toggle'; +import {modal} from './modals/modals'; +import {videoLink} from './video-link/video-link'; +import {initDatePickers} from './datepicker/datepicker'; +import {initAudioplayers} from './audioplayer/audioplayer'; + +document.addEventListener('DOMContentLoaded', () => { + lazyLoadImage(); + tabs(); + navToggle(); + modal(); + videoLink(); + + initDatePickers(); + initAudioplayers(); +}); diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/audioplayer/audioplayer.config.js b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/audioplayer/audioplayer.config.js new file mode 100644 index 0000000000..9828c2e1f8 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/audioplayer/audioplayer.config.js @@ -0,0 +1,12 @@ +const CLASSES = { + ELEMENT: 'js-audio-player', + SOURCE: 'js-audio-player-source', + PLAY: 'js-audio-player-play', + PROGRESS: 'js-audio-player-progress', + CURRENT_TIME: 'js-audio-player-time-current', + TOTAL_TIME: 'js-audio-player-time-total', + RESTART: 'js-audio-player-restart', + MODIFIER: 'audio-player--playing', +}; + +export { CLASSES }; diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/audioplayer/audioplayer.js b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/audioplayer/audioplayer.js new file mode 100644 index 0000000000..792e987262 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/audioplayer/audioplayer.js @@ -0,0 +1,124 @@ +import { CLASSES } from './audioplayer.config'; +import { sliceArray } from '../helpers/sliceArray'; + +class Audioplayer { + constructor(element) { + this.elementNode = element; + this.sourceNode = this.elementNode.querySelector(`.${CLASSES.SOURCE}`); + this.progressNode = this.elementNode.querySelector(`.${CLASSES.PROGRESS}`); + this.playBackNodes = { + current: this.elementNode.querySelector(`.${CLASSES.CURRENT_TIME}`), + total: this.elementNode.querySelector(`.${CLASSES.TOTAL_TIME}`), + }; + this.controlNodes = { + play: this.elementNode.querySelector(`.${CLASSES.PLAY}`), + restart: this.elementNode.querySelector(`.${CLASSES.RESTART}`), + }; + + this.isPlaying = false; + this.playBack = { + current: this.sourceNode.currentTime, + total: null, + percentage: 0, + }; + + this.togglePlay = this.togglePlay.bind(this); + this.updateTime = this.updateTime.bind(this); + this.handleFinish = this.handleFinish.bind(this); + this.rewind = this.rewind.bind(this); + this.restart = this.restart.bind(this); + + this.addEventListeners(); + } + + addEventListeners() { + this.controlNodes.play.addEventListener('click', this.togglePlay); + this.sourceNode.addEventListener('loadedmetadata', this.updateTime); + this.sourceNode.addEventListener('timeupdate', this.updateTime); + this.sourceNode.addEventListener('ended', this.handleFinish); + this.progressNode.addEventListener('click', this.rewind); + this.controlNodes.restart.addEventListener('click', this.restart); + } + + togglePlay() { + if (this.isPlaying) { + this.sourceNode.pause(); + this.elementNode.classList.remove(CLASSES.MODIFIER); + this.isPlaying = false; + } else { + this.sourceNode.play(); + this.elementNode.classList.add(CLASSES.MODIFIER); + this.isPlaying = true; + } + } + + updateTime() { + this.playBack.current = formatTime(this.sourceNode.currentTime); + if (this.playBack.total === null) { + this.playBack.total = formatTime(this.sourceNode.duration); + } + + Object.entries(this.playBackNodes).forEach(([key, node]) => { + const elementNode = node; + elementNode.setAttribute('datetime', this.playBack[key]); + elementNode.textContent = this.playBack[key]; + }); + + this.playBack.percentage = isPercentageOfTotal(this.sourceNode.currentTime, this.sourceNode.duration); + this.progressNode.value = this.playBack.percentage; + } + + rewind(e) { + if (inRange(e, this.progressNode)) { + const element = this.progressNode; + const rect = element.getBoundingClientRect(); + + // calculate percentage value of the click in relation with the element + const coefficient = (e.clientX - rect.left) / e.target.clientWidth; + + this.sourceNode.currentTime = this.sourceNode.duration * coefficient; + } + } + + restart() { + this.sourceNode.currentTime = 0; + } + + handleFinish() { + this.updateTime(); + this.togglePlay(); + } +} + +function inRange(event, element) { + const rangeBox = element; + const min = rangeBox.offsetLeft; + const max = min + rangeBox.offsetWidth; + + return event.clientX >= min && event.clientX <= max; +} + +function formatTime(time) { + const min = Math.floor(time / 60); + const sec = Math.floor(time % 60); + + return `${min}:${(sec < 10) ? (`0${sec}`) : sec}`; +} + +function isPercentageOfTotal(current, total) { + return Math.floor((current * 100) / total); +} + +function initAudioplayers() { + const AUDIO_PLAYER_NODES = sliceArray(document.querySelectorAll(`.${CLASSES.ELEMENT}`)); + const AUDIO_PLAYERS = []; + + AUDIO_PLAYER_NODES.forEach((element) => { + const audioplayer = new Audioplayer(element); + AUDIO_PLAYERS.push(audioplayer); + }); + + return AUDIO_PLAYERS; +} + +export { initAudioplayers }; diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/datepicker/datepicker.config.js b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/datepicker/datepicker.config.js new file mode 100644 index 0000000000..adb881eb86 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/datepicker/datepicker.config.js @@ -0,0 +1,27 @@ +const CLASSES = { + ELEMENT: 'js-datepicker', + INPUT: 'js-datepicker-input', + CALENDAR_WRAPPER: 'js-datepicker-calendar', + CLOSE_CALENDAR: 'js-datepicker-control-close', + OPEN_CALENDAR: 'js-datepicker-control-open', + MODIFIERS: { + SHOW_CALENDAR: 'datepicker--open', + }, +}; + +const ARROWS = { + NEXT: + ` + + + + `, + PREV: + ` + + + + `, +}; + +export { CLASSES, ARROWS }; diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/datepicker/datepicker.js b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/datepicker/datepicker.js new file mode 100644 index 0000000000..2861f608e2 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/datepicker/datepicker.js @@ -0,0 +1,57 @@ +import flatpickr from 'flatpickr'; +import {Dutch} from 'flatpickr/dist/l10n/nl'; +import {French} from 'flatpickr/dist/l10n/fr'; +import {German} from 'flatpickr/dist/l10n/de'; +import {English} from 'flatpickr/dist/l10n/default'; +import {CLASSES, ARROWS} from './datepicker.config'; +import {sliceArray} from '../helpers/sliceArray'; + +const defaultLocale = 'nl'; +const locales = { + nl: Dutch, + fr: French, + de: German, + en: English +}; + +class Datepicker { + constructor(element) { + this.domNode = element; + this.calendarNode = this.domNode.querySelector(`.${CLASSES.CALENDAR_WRAPPER}`); + + this.isRangePicker = this.domNode.hasAttribute('data-range'); + this.datePicker = null; + this.locale = getLocale(); + + this.config = { + minDate: this.domNode.hasAttribute('data-minDate') ? this.domNode.getAttribute('data-minDate') : null, + maxDate: this.domNode.hasAttribute('data-maxDate') ? this.domNode.getAttribute('data-maxDate') : null, + nextArrow: ARROWS.NEXT, + prevArrow: ARROWS.PREV, + dateFormat: 'd-m-Y', + locale: locales[this.locale] + }; + + this.initDatePicker(); + } + + initDatePicker() { + this.datePicker = flatpickr(this.domNode, this.config); + } +} + +function getLocale() { + return document.documentElement.lang !== '' ? document.documentElement.lang : defaultLocale; +} + +function initDatePickers() { + const DATEPICKER_NODES = sliceArray(document.querySelectorAll(`.${CLASSES.INPUT}`)); + const DATEPICKERS = []; + + DATEPICKER_NODES.forEach((element) => { + const datepicker = new Datepicker(element); + DATEPICKERS.push(datepicker); + }); +} + +export {initDatePickers}; diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/helpers/ScrollService.js b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/helpers/ScrollService.js new file mode 100644 index 0000000000..f05c605f4b --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/helpers/ScrollService.js @@ -0,0 +1,12 @@ +class ScrollService { + constructor(target, options, callback) { + this.options = options; + this.callback = callback; + this.observer = new IntersectionObserver(this.callback, this.options); + this.target = target; + + this.observer.observe(this.target); + } +} + +export { ScrollService }; diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/helpers/focus.js b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/helpers/focus.js new file mode 100644 index 0000000000..f710eba79d --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/helpers/focus.js @@ -0,0 +1,29 @@ +import { sliceArray } from './sliceArray'; + +const focusable = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'; + +function disableFocus(TARGET) { + const focusableNodes = sliceArray(TARGET.querySelectorAll(focusable)); + + focusableNodes.forEach((focusableNode) => { + const node = focusableNode; + + node.tabIndex = '-1'; + }); +} + +function enableFocus(TARGET) { + const focusableNodes = sliceArray(TARGET.querySelectorAll(focusable)); + + focusableNodes.forEach((focusableNode) => { + const node = focusableNode; + + node.tabIndex = '0'; + }); +} + + +export { + disableFocus, + enableFocus, +}; diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/helpers/formatting.js b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/helpers/formatting.js new file mode 100644 index 0000000000..452109cd29 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/helpers/formatting.js @@ -0,0 +1,8 @@ +function formatTime(time) { + const min = Math.floor(time / 60); + const sec = Math.floor(time % 60); + + return `${min}:${(sec < 10) ? (`0${sec}`) : sec}`; +} + +export { formatTime }; diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/helpers/isIE.js b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/helpers/isIE.js new file mode 100755 index 0000000000..7b58d6441a --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/helpers/isIE.js @@ -0,0 +1,14 @@ +const UAString = navigator.userAgent; + +function isIE10() { + return navigator.appVersion.indexOf('MSIE 10') !== -1; +} + +function isIE11() { + return UAString.indexOf('Trident') !== -1 && UAString.indexOf('rv:11') !== -1; +} + +export { + isIE10, + isIE11, +}; diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/helpers/sliceArray.js b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/helpers/sliceArray.js new file mode 100755 index 0000000000..ae90dc3492 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/helpers/sliceArray.js @@ -0,0 +1,5 @@ +function sliceArray(arrayLikeObject) { + return Array.prototype.slice.call(arrayLikeObject); +} + +export { sliceArray }; diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/helpers/throttle.js b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/helpers/throttle.js new file mode 100755 index 0000000000..b15427f140 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/helpers/throttle.js @@ -0,0 +1,25 @@ +function throttle(delay, fn) { + let lastCall = 0; + + return (...args) => { + const now = (new Date()).getTime(); + + if (now - lastCall < delay) { + return; + } + + lastCall = now; + + return fn(...args); // eslint-disable-line consistent-return + }; +} + +function debounce(delay, fn) { + let timeout; + + clearTimeout(timeout); + + timeout = setTimeout(fn, delay); +} + +export { throttle, debounce }; diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/helpers/viewport.js b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/helpers/viewport.js new file mode 100644 index 0000000000..74f3f2d7ad --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/helpers/viewport.js @@ -0,0 +1,12 @@ +function getViewportHeight() { + return Math.max(document.documentElement.clientHeight, window.innerHeight || 0); +} + +function getViewportWidth() { + return Math.max(document.documentElement.clientWidth, window.innerWidth || 0); +} + +export { + getViewportHeight, + getViewportWidth, +}; diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/lazyLoadImage/lazyLoadImage.js b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/lazyLoadImage/lazyLoadImage.js new file mode 100644 index 0000000000..9f5a7dd2f6 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/lazyLoadImage/lazyLoadImage.js @@ -0,0 +1,50 @@ +import {sliceArray} from '../helpers/sliceArray'; +import {ScrollService} from '../helpers/ScrollService'; + +const OBSERVER_OPTIONS = { + threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1] +}; +const imageHolders = sliceArray(document.querySelectorAll('.js-lazy-load-img-wrapper')); +const OBSERVERS = []; + +function lazyLoadImage() { + if (imageHolders.length === 0) { + return false; + } + + imageHolders.forEach((imageHolder) => { + const observer = new ScrollService(imageHolder, OBSERVER_OPTIONS, handleItem); + OBSERVERS.push(observer); + }); + + return OBSERVERS; +} + +function handleItem(entries, observer) { + entries.forEach((entry) => { + const TARGET = entry.target; + const images = sliceArray(TARGET.querySelectorAll('.js-lazy-load-img')); + + if (entry.isIntersecting) { + loadHighRes(images); + + observer.unobserve(TARGET); + } + }); +} + +function loadHighRes(images) { + images.forEach((image) => { + const srcSet = image.hasAttribute('data-srcset') ? image.dataset.srcset : false; + // eslint-disable-next-line prefer-destructuring + const src = image.dataset.src; + + if (srcSet) { + image.setAttribute('srcset', srcSet); + } + + image.setAttribute('src', src); + }); +} + +export {lazyLoadImage}; diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/modals/modals.config.js b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/modals/modals.config.js new file mode 100644 index 0000000000..bd9a58b684 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/modals/modals.config.js @@ -0,0 +1,6 @@ +const CLASSES = { + COMPONENT: '.js-modal-toggle', + ACTIVE: 'modal--active', +}; + +export { CLASSES }; diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/modals/modals.js b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/modals/modals.js new file mode 100644 index 0000000000..b594d66da2 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/modals/modals.js @@ -0,0 +1,25 @@ +import { sliceArray } from '../helpers/sliceArray'; +import { CLASSES } from './modals.config'; + + +export function modal() { + const HOOKS = sliceArray(document.querySelectorAll(CLASSES.COMPONENT)); + + HOOKS.forEach((HOOK) => { + const target = document.querySelector(HOOK.dataset.target); + + HOOK.addEventListener('click', (e) => { + clickHandler(e, target); + }); + }); +} + +function clickHandler(e, target) { + e.preventDefault(); + + if (target.classList.contains(CLASSES.ACTIVE)) { + target.classList.remove(CLASSES.ACTIVE); + } else { + target.classList.add(CLASSES.ACTIVE); + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/nav-toggle/nav-toggle.config.js b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/nav-toggle/nav-toggle.config.js new file mode 100644 index 0000000000..01235ca176 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/nav-toggle/nav-toggle.config.js @@ -0,0 +1,6 @@ +const CLASSES = { + COMPONENT: '.js-nav-toggle', + ACTIVE: 'nav-toggle--active', +}; + +export { CLASSES }; diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/nav-toggle/nav-toggle.js b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/nav-toggle/nav-toggle.js new file mode 100644 index 0000000000..c7d52e7445 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/nav-toggle/nav-toggle.js @@ -0,0 +1,20 @@ +import { sliceArray } from '../helpers/sliceArray'; +import { CLASSES } from './nav-toggle.config'; + +export function navToggle() { + const HOOKS = sliceArray(document.querySelectorAll(CLASSES.COMPONENT)); + + HOOKS.forEach((HOOK) => { + HOOK.addEventListener('click', clickHandler); + }); +} + +function clickHandler(e) { + const current = e.currentTarget; + + if (current.classList.contains(CLASSES.ACTIVE)) { + current.classList.remove(CLASSES.ACTIVE); + } else { + current.classList.add(CLASSES.ACTIVE); + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/tabs/tabs.config.js b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/tabs/tabs.config.js new file mode 100644 index 0000000000..5fcf41945a --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/tabs/tabs.config.js @@ -0,0 +1,8 @@ +const CLASSES = { + COMPONENT: '.js-tabs', + SWITCH: '.js-tab-switch', + CONTENT: '.js-tab-content', + ACTIVE: 'tabs__switch--active', +}; + +export { CLASSES }; diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/tabs/tabs.js b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/tabs/tabs.js new file mode 100644 index 0000000000..6b98c7fcb1 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/tabs/tabs.js @@ -0,0 +1,62 @@ +import { sliceArray } from '../helpers/sliceArray'; +import { CLASSES } from './tabs.config'; + +export function tabs() { + const TABS = sliceArray(document.querySelectorAll(CLASSES.COMPONENT)); + + TABS.forEach((tab) => { + init(tab); + }); +} + +function init(tab) { + const hooks = sliceArray(tab.querySelectorAll(CLASSES.SWITCH)); + const currentActive = tab.querySelector(`.${CLASSES.ACTIVE}`); + + loadContent(tab, currentActive); + + hooks.forEach((hook) => { + hook.addEventListener('click', (e) => { + clickHandler(e, tab); + }); + }); +} + +function loadContent(tab, currentActive) { + const url = currentActive.getAttribute('data-content-url'); + const contentHolder = tab.querySelector(CLASSES.CONTENT); + + getContent(url).then((newContent) => { + contentHolder.innerHTML = newContent; + }); +} + +function getContent(url) { + const promiseObj = new Promise((resolve) => { + const xhr = new XMLHttpRequest(); + + xhr.open('GET', url, true); + xhr.send(); + + xhr.onreadystatechange = () => { + const finished = xhr.readyState === 4; + const ok = xhr.status === 200; + + if (finished && ok) { + resolve(xhr.responseText); + } + }; + }); + + return promiseObj; +} + +function clickHandler(e, tab) { + const newActive = e.currentTarget; + const currentActive = tab.querySelector(`.${CLASSES.ACTIVE}`); + + currentActive.classList.remove(CLASSES.ACTIVE); + newActive.classList.add(CLASSES.ACTIVE); + + loadContent(tab, newActive); +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/video-link/video-link.config.js b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/video-link/video-link.config.js new file mode 100644 index 0000000000..4a2a950d2f --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/video-link/video-link.config.js @@ -0,0 +1,9 @@ +const CLASSES = { + ELEMENT: '.js-videolink', + HOOK: '.js-videolink-play', + CONTAINER: '.js-videolink-container', + PLACEHOLDER: '.js-videolink-placholder', + MODIFIER: 'videolink__link--hidden', +}; + +export { CLASSES }; diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/video-link/video-link.js b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/video-link/video-link.js new file mode 100644 index 0000000000..e16a91a4d5 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/js/video-link/video-link.js @@ -0,0 +1,114 @@ +import { sliceArray } from '../helpers/sliceArray'; +import { CLASSES } from './video-link.config'; + +export function videoLink() { + const HOOKS = sliceArray(document.querySelectorAll(CLASSES.HOOK)); + + handlePlaceholders(); + + HOOKS.forEach((el) => { + el.addEventListener('click', clickHandler, false); + }); +} + +function clickHandler(e) { + e.preventDefault(); + + const el = e.currentTarget; + + const provider = el.getAttribute('data-video-provider'); + const id = el.getAttribute('data-video-id'); + const videoContainer = el.parentNode.querySelector(CLASSES.CONTAINER); + const template = createTemplate(provider, id); + + el.classList.add(CLASSES.MODIFIER); + videoContainer.appendChild(template); +} + +function createTemplate(provider, id) { + let template; + let url; + + switch (provider) { + case 'youtube': + url = `//www.youtube.com/embed/${id}?title=0&byline=0&portrait=0;&badge=0&autoplay=1`; + break; + + case 'vimeo': + url = `//player.vimeo.com/video/${id}?title=0&byline=0&portrait=0&badge=0&autoplay=1`; + break; + + case 'dailymotion': + url = `//www.dailymotion.com/embed/video/${id}?autoplay=1`; + break; + + default: + url = ''; + break; + } + + if (url !== '') { + template = document.createElement('iframe'); + template.setAttribute('src', url); + template.setAttribute('webkitallowfullscreen', 'true'); + template.setAttribute('mozallowfullscreen', 'true'); + template.setAttribute('allowfullscreen', 'true'); + template.frameBorder = 0; + template.style.width = `${100}%`; + template.style.height = `${100}%`; + } else { + template = '

    Sorry, this provider is not supported yet.

    '; + } + + return template; +} + +function handlePlaceholders() { + const PLACEHOLDERS = sliceArray(document.querySelectorAll(CLASSES.PLACEHOLDER)); + + PLACEHOLDERS.forEach((el) => { + const provider = el.parentNode.getAttribute('data-video-provider'); + const id = el.parentNode.getAttribute('data-video-id'); + + setVideoPlaceholder(provider, id, el); + }); +} + +function setVideoPlaceholder(provider, id, el) { + const placeHolder = el; + + if (provider === 'youtube') { + placeHolder.src = `//img.youtube.com/vi/${id}/maxresdefault.jpg`; + } else { + const xhr = new XMLHttpRequest(); + let url; + let json; + let imgUrl; + + if (provider === 'vimeo') { + url = `http://vimeo.com/api/v2/video/${id}.json`; + } else if (provider === 'dailymotion') { + url = `https://api.dailymotion.com/video/${id}?fields=thumbnail_720_url`; + } + + xhr.open('GET', url, true); + xhr.send(); + + xhr.onreadystatechange = () => { + const finished = xhr.readyState === 4; + const ok = xhr.status === 200; + + if (finished && ok) { + json = JSON.parse(xhr.responseText); + + if (provider === 'vimeo') { + imgUrl = json[0].thumbnail_large; + } else if (provider === 'dailymotion') { + imgUrl = json.thumbnail_720_url; + } + + placeHolder.src = imgUrl; + } + }; + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/00-bootstrap/_all.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/00-bootstrap/_all.scss new file mode 100644 index 0000000000..2c2c24dbd6 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/00-bootstrap/_all.scss @@ -0,0 +1,20 @@ +/* ========================================================================== + Bootstrap + + This file is exclusively intended for aggregating helper functions + and global site config + Never add styles directly to this file + ========================================================================== */ + +@import "utils/reset"; +@import "utils/base"; + +@import "helpers/deep-get"; +@import "helpers/text"; + +@import "config/breakpoints"; +@import "config/z-indexes"; +@import "config/paths"; +@import "config/easings"; + +@import "snipsonian/snipsonian-imports"; diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/00-bootstrap/config/_breakpoints.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/00-bootstrap/config/_breakpoints.scss new file mode 100644 index 0000000000..01bf7a326a --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/00-bootstrap/config/_breakpoints.scss @@ -0,0 +1,37 @@ +/* ========================================================================== + Break-points + + This file is exclusively intended for setting up and accessing variables + Never add styles directly to this file + ========================================================================== */ + +$xs: 480px; +$sm: 768px; +$md: 992px; +$lg: 1200px; +$xl: 1400px; +$xxl: 2000px; + +$break-xs: $xs; +$break-xs-min: $xs; +$break-xs-max: $sm - 1; + +$break-sm: $sm; +$break-sm-min: $sm; +$break-sm-max: $md - 1; + +$break-md: $md; +$break-md-min: $md; +$break-md-max: $lg - 1; + +$break-lg: $lg; +$break-lg-min: $lg; +$break-lg-max: $xl - 1; + +$break-xl: $xl; +$break-xl-min: $xl; +$break-xl-max: $xxl - 1; + +$break-xxl: $xxl; +$break-xxl-min: $xxl; +$break-xxl-max: $xxl + 1; diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/00-bootstrap/config/_easings.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/00-bootstrap/config/_easings.scss new file mode 100755 index 0000000000..1465bcc7bf --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/00-bootstrap/config/_easings.scss @@ -0,0 +1,12 @@ +/* ========================================================================== + Easings + + This file is exclusively intended for setting up and accessing variables + Never add styles directly to this file + ========================================================================== */ + +$ease-out-quart: cubic-bezier(.165, .84, .44, 1); +$ease-out-back: cubic-bezier(.175, .885, .32, 1.275); +$ease-in-out-back: cubic-bezier(.68, -.55, .265, 1.55); + +$ease-default: $ease-out-quart; diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/00-bootstrap/config/_paths.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/00-bootstrap/config/_paths.scss new file mode 100755 index 0000000000..d16da63832 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/00-bootstrap/config/_paths.scss @@ -0,0 +1,14 @@ +/* ========================================================================== + Paths + + This file is exclusively intended for setting up and accessing variables + Never add styles directly to this file + ========================================================================== */ + +$root: "/frontend"; + +$backgrounds: "#{$root}/img/backgrounds"; +$general: "#{$root}/img/general"; +$icons: "#{$root}/icons"; + +$webfont-path: "#{$root}/fonts"; diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/00-bootstrap/config/_z-indexes.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/00-bootstrap/config/_z-indexes.scss new file mode 100755 index 0000000000..bb3dceaed1 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/00-bootstrap/config/_z-indexes.scss @@ -0,0 +1,26 @@ +/* ========================================================================== + Z indexes + + This file is exclusively intended for setting up and accessing variables + Never add styles directly to this file + ========================================================================== */ + +$base: 0; + +$z-hide: $base - 1000; +$z-base: $base; +$z-middle: $base + 100; +$z-near: $base + 500; +$z-show: $base + 1000; + + +/* Expose variables + ========================================================================== */ + +:root { + --zindexes-hide: $z-hide; + --zindexes-base: $z-show; + --zindexes-middle: $z-middle; + --zindexes-near: $z-near; + --zindexes-show: $z-show; +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/00-bootstrap/helpers/_deep-get.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/00-bootstrap/helpers/_deep-get.scss new file mode 100644 index 0000000000..da70f1e7a5 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/00-bootstrap/helpers/_deep-get.scss @@ -0,0 +1,22 @@ +/* ========================================================================== + Helper function: deep get + itterates over maps with sublevels and returns match + ========================================================================== */ + +@function deep-get($key: null, $level: null, $map: null) { + @if ($key != null and $map != null) { + $match: null; + + @if ($level != null) { + $match: map-get(map-get($map, $level), $key); + } @else { + $match: map-get($map, $key); + } + + @if ($match == null) { + @error('Key #{$key} has no match in map'); + } + + @return $match; + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/00-bootstrap/helpers/_text.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/00-bootstrap/helpers/_text.scss new file mode 100644 index 0000000000..10b30b76c5 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/00-bootstrap/helpers/_text.scss @@ -0,0 +1,11 @@ +/* ========================================================================== + Text helper classes + ========================================================================== */ + +$alignments: left center right; + +@each $alignment in $alignments { + .text--#{$alignment} { + text-align: $alignment; + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/00-bootstrap/snipsonian/_snipsonian-imports.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/00-bootstrap/snipsonian/_snipsonian-imports.scss new file mode 100644 index 0000000000..5028513422 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/00-bootstrap/snipsonian/_snipsonian-imports.scss @@ -0,0 +1,14 @@ + +/* ========================================================================== + Snipsonian imports + ========================================================================== */ + +@import "../../../../../node_modules/@snipsonian/parent/packages/snipsonian-scss/src/layout/coordinates"; +@import "../../../../../node_modules/@snipsonian/parent/packages/snipsonian-scss/src/layout/flex-grid"; +@import "../../../../../node_modules/@snipsonian/parent/packages/snipsonian-scss/src/layout/grid"; +@import "../../../../../node_modules/@snipsonian/parent/packages/snipsonian-scss/src/layout/position-absolute"; +@import "../../../../../node_modules/@snipsonian/parent/packages/snipsonian-scss/src/layout/position-fixed"; + +@import "../../../../../node_modules/@snipsonian/parent/packages/snipsonian-scss/src/utility/object-fit"; +@import "../../../../../node_modules/@snipsonian/parent/packages/snipsonian-scss/src/utility/pseudo"; +@import "../../../../../node_modules/@snipsonian/parent/packages/snipsonian-scss/src/utility/visibility"; diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/00-bootstrap/utils/_base.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/00-bootstrap/utils/_base.scss new file mode 100644 index 0000000000..399b37fb15 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/00-bootstrap/utils/_base.scss @@ -0,0 +1,26 @@ +/* ========================================================================== + Bootstrap - Base + ========================================================================== */ + +/* Box model + ========================================================================== */ +* { + box-sizing: border-box; +} + +*:before, +*:after { + box-sizing: border-box; +} + +/* Html & body + ========================================================================== */ +html { + height: 100%; + + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + + -ms-overflow-style: -ms-autohiding-scrollbar; +} + +body {} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/00-bootstrap/utils/_reset.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/00-bootstrap/utils/_reset.scss new file mode 100644 index 0000000000..374ccc8228 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/00-bootstrap/utils/_reset.scss @@ -0,0 +1,146 @@ +/* ========================================================================== + Bootstrap - reset + + http://meyerweb.com/eric/tools/css/reset/ + ========================================================================== */ + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + padding: 0; + margin: 0; + + border: 0; + + font-family: inherit; + font-style: inherit; + font-variant: inherit; + font-size: 100%; + vertical-align: baseline; +} + +// HTML5 display-role reset for older browsers +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} + +body { + line-height: 1; +} + +ol, +ul { + list-style: none; +} + +blockquote, +q { + quotes: none; +} + +blockquote { + &:before, + &:after { + content: none; + } +} + +q { + &:before, + &:after { + content: none; + } +} + +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/01-quarks/_all.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/01-quarks/_all.scss new file mode 100644 index 0000000000..6e16e0a8f3 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/01-quarks/_all.scss @@ -0,0 +1,135 @@ +/* ========================================================================== + Quarks + + This file is exclusively intended for aggregating helper functions + Never add styles directly to this file + ========================================================================== */ + +@import 'colors/colors'; + +@import 'layout/spacings'; + +@import 'shadows/shadows'; + +@import 'typography/fonts'; + +/** + * @section Quarks + * @page Index + */ + +/** + * @section Typography + * @sectionof Quarks + */ + +/** + * @section Fonts + * @sectionof Quarks.Typography + * + * @font {Arial, Helvetica, sans-serif} Brand primary - [Quarks.Typography.Fonts] + * @font {Georgia, "Times New Roman", Times, serif} Brand secondary - [Quarks.Typography.Fonts] + */ + +/** + * @section Font weights + * @sectionof Quarks.Typography + * + * @fontWeight {300} light (default) - [Quarks.Typography.Font weights] + * @fontWeight {400} normal (default) - [Quarks.Typography.Font weights] + * @fontWeight {500} medium (default) - [Quarks.Typography.Font weights] + * @fontWeight {700} bold (default) - [Quarks.Typography.Font weights] + */ + +/** + * @section Font sizes + * @sectionof Quarks.Typography + * + * @fontSize {18px} Content desktop (default) - [Quarks.Typography.Font sizes] + * @fontSize {14px} Content desktop (small) - [Quarks.Typography.Font sizes] + * @fontSize {15px} Content mobile (default) - [Quarks.Typography.Font sizes] + * @fontSize {13px} Content mobile (small) - [Quarks.Typography.Font sizes] + */ + + +/** + * @section Colors + * @sectionof Quarks + */ + +/** + * @section Greyscale + * @sectionof Quarks.Colors + * + * @color {#000000} Black - [Quarks.Colors.Greyscale] + * @color {#3A3F44} Greyscale dark-grey - [Quarks.Colors.Greyscale] + * @color {#8A9093} Greyscale grey - [Quarks.Colors.Greyscale] + * @color {#C1C7CC} Greyscale light-grey - [Quarks.Colors.Greyscale] + * @color {#E4DFD9} Greyscale Light - [Quarks.Colors.Greyscale] + * @color {#F4F4F4} Greyscale off-white - [Quarks.Colors.Greyscale] + * @color {#FFFFFF} White - [Quarks.Colors.Greyscale] + */ + +/** + * @section Functional + * @sectionof Quarks.Colors + * + * @color {#1CAED8} Link - [Quarks.Colors.Functional] + * @color {#9ACC04} Success - [Quarks.Colors.Functional] + * @color {#FF7200} Warning - [Quarks.Colors.Functional] + * @color {#FF0020} Danger - [Quarks.Colors.Functional] + * @color {#3A3F44} Disabled - [Quarks.Colors.Functional] + * @color {#171A2F} Text - [Quarks.Colors.Functional] + */ + +/** + * @section Brand colors + * @sectionof Quarks.Colors + * + * @color {#FF4A85} Brand Primary 1 - [Quarks.Colors.Brand colors] + * @color {#1CAED8} Brand Primary 2 - [Quarks.Colors.Brand colors] + * @color {#FFD900} Brand Primary 3 - [Quarks.Colors.Brand colors] + * @color {#9ACC04} Brand Primary 4 - [Quarks.Colors.Brand colors] + * @color {#F9D2DC} Brand Secondary 1 - [Quarks.Colors.Brand colors] + * @color {#82C6D9} Brand Secondary 2 - [Quarks.Colors.Brand colors] + * @color {#FFEC80} Brand Secondary 3 - [Quarks.Colors.Brand colors] + * @color {#CDED6E} Brand Secondary 4 - [Quarks.Colors.Brand colors] + */ + +/** + * @section Shadows + * @sectionof Quarks + * + * @shadow {2px 2px 8px 0 rgba(12, 0, 51, .1)} sm - [Quarks.Shadows] + * @shadow {0 8px 16px 0 rgba(12, 0, 51, .1)} md - [Quarks.Shadows] + * @shadow {0 24px 32px 0 rgba(12, 0, 51, .1)} lg - [Quarks.Shadows] + */ + +/** + * @section Spacings + * @sectionof Quarks + */ + +/** + * @section Desktop + * @sectionof Quarks.Spacings + * + * @spacing {24px} xs - [Quarks.Spacings.Desktop] + * @spacing {40px} sm - [Quarks.Spacings.Desktop] + * @spacing {80px} md - [Quarks.Spacings.Desktop] + * @spacing {120px} lg - [Quarks.Spacings.Desktop] + * @spacing {180px} xl - [Quarks.Spacings.Desktop] + * @spacing {240px} xxl - [Quarks.Spacings.Desktop] + */ + +/** + * @section Mobile + * @sectionof Quarks.Spacings + * + * @spacing {16px} xs - [Quarks.Spacings.Mobile] + * @spacing {24px} sm - [Quarks.Spacings.Mobile] + * @spacing {40px} md - [Quarks.Spacings.Mobile] + * @spacing {64px} lg - [Quarks.Spacings.Mobile] + * @spacing {80px} xl - [Quarks.Spacings.Mobile] + * @spacing {120px} xxl - [Quarks.Spacings.Mobile] + */ diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/01-quarks/colors/_colors.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/01-quarks/colors/_colors.scss new file mode 100644 index 0000000000..d72dda074d --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/01-quarks/colors/_colors.scss @@ -0,0 +1,83 @@ +/* ========================================================================== + Colors + + This file is exclusively intended for setting up variables + Never add styles directly to this file + ========================================================================== */ + +/* Definition + ========================================================================== */ + +$black: #000000; +$grey-darkest: #171A2F; +$grey-dark: #3A3F44; +$grey: #8A9093; +$grey-light: #C1C7CC; +$grey-lightest: #F4F4F4; +$white: #FFFFFF; + +$pink: #FF4A85; +$pink-light: #F9D2DC; +$blue: #1CAED8; +$blue-light: #82C6D9; +$yellow: #FFD900; +$yellow-light: #FFEC80; +$green: #9ACC04; +$green-light: #CDED6E; +$orange: #FF7200; +$red: #FF0020; + +/* Application + ========================================================================== */ + +$color-primary: $pink; +$color-secondary: $blue; +$color-tertiary: $yellow; +$color-quarternary: $green; + +$color-primary-desat: $pink-light; +$color-secondary-desat: $blue-light; +$color-tertiary-desat: $yellow-light; +$color-quarternary-desat: $green-light; + +$color-link: $blue; +$color-success: $green; +$color-warning: $orange; +$color-error: $red; +$color-disabled: $grey-dark; +$color-text: $grey-darkest; + +$color-greyscale-black: $black; +$color-greyscale-darkest: $grey-darkest; +$color-greyscale-dark: $grey-dark; +$color-greyscale-grey: $grey; +$color-greyscale-light: $grey-light; +$color-greyscale-lightest: $grey-lightest; +$color-greyscale-white: $white; + +/* Expose variables + ========================================================================== */ + +:root { + --color-primary: $color-primary; + --color-secondary: $color-secondary; + --color-tertiary: $color-tertiary; + --color-quarternary: $color-quarternary; + --color-primary-desat: $color-primary-desat; + --color-secondary-desat: $color-secondary-desat; + --color-tertiary-desat: $color-tertiary-desat; + --color-quarternary-desat: $color-quarternary-desat; + --color-link: $color-link; + --color-success: $color-success; + --color-warning: $color-warning; + --color-error: $color-error; + --color-disabled: $color-disabled; + --color-text: $color-text; + --color-greyscale-black: $color-greyscale-black; + --color-greyscale-darkest: $color-greyscale-darkest; + --color-greyscale-dark: $color-greyscale-dark; + --color-greyscale-grey: $color-greyscale-grey; + --color-greyscale-light: $color-greyscale-light; + --color-greyscale-lightest: $color-greyscale-lightest; + --color-greyscale-white: $color-greyscale-white; +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/01-quarks/layout/_spacings.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/01-quarks/layout/_spacings.scss new file mode 100644 index 0000000000..c8f69c7fb6 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/01-quarks/layout/_spacings.scss @@ -0,0 +1,42 @@ +/* ========================================================================== + Spacings + + This file is exclusively intended for setting up variables + Never add styles directly to this file + ========================================================================== */ + +/* Application + ========================================================================== */ + +$spacing-desktop-xs: 24px; +$spacing-desktop-sm: 40px; +$spacing-desktop-md: 80px; +$spacing-desktop-lg: 120px; +$spacing-desktop-xl: 180px; +$spacing-desktop-xxl: 240px; + +$spacing-mobile-xs: 16px; +$spacing-mobile-sm: 24px; +$spacing-mobile-md: 40px; +$spacing-mobile-lg: 64px; +$spacing-mobile-xl: 80px; +$spacing-mobile-xxl: 120px; + + +/* Expose variables + ========================================================================== */ + +:root { + --spacing-desktop-xs: $spacing-desktop-xs; + --spacing-desktop-sm: $spacing-desktop-sm; + --spacing-desktop-md: $spacing-desktop-md; + --spacing-desktop-lg: $spacing-desktop-lg; + --spacing-desktop-lg: $spacing-desktop-lg; + --spacing-desktop-xxl: $spacing-desktop-xxl; + --spacing-mobile-xs: $spacing-mobile-xs; + --spacing-mobile-sm: $spacing-mobile-sm; + --spacing-mobile-md: $spacing-mobile-md; + --spacing-mobile-lg: $spacing-mobile-lg; + --spacing-mobile-xl: $spacing-mobile-xl; + --spacing-mobile-xxl: $spacing-mobile-xxl; +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/01-quarks/shadows/_shadows.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/01-quarks/shadows/_shadows.scss new file mode 100644 index 0000000000..157adf3b4c --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/01-quarks/shadows/_shadows.scss @@ -0,0 +1,44 @@ +/* ========================================================================== + shadows + + This file is exclusively intended for setting up variables + Never add styles directly to this file + ========================================================================== */ + +/* Config - shadow access + ========================================================================== */ + +@mixin shadow($size) { + box-shadow: + deep-get($key: h-offset, $level: $size, $map: $shadow-config) + deep-get($key: v-offset, $level: $size, $map: $shadow-config) + deep-get($key: blur, $level: $size, $map: $shadow-config) + deep-get($key: spread, $level: $size, $map: $shadow-config) + deep-get($key: color, $level: $size, $map: $shadow-config); +} + +$shadow-color: rgba(12, 0, 51, .1); + +$shadow-config: ( + sm: ( + h-offset: 2px, + v-offset: 2px, + blur: 8px, + spread: 0, + color: $shadow-color + ), + md: ( + h-offset: 0, + v-offset: 8px, + blur: 16px, + spread: 0, + color: $shadow-color + ), + lg: ( + h-offset: 0, + v-offset: 24px, + blur: 32px, + spread: 0, + color: $shadow-color + ) +); diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/01-quarks/typography/_fonts.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/01-quarks/typography/_fonts.scss new file mode 100644 index 0000000000..9081bf51c9 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/01-quarks/typography/_fonts.scss @@ -0,0 +1,45 @@ +/* ========================================================================== + Fonts + + This file is exclusively intended for setting up variables + Never add styles directly to this file + ========================================================================== */ + +/* Definition + ========================================================================== */ + +$default-sans: Arial, Helvetica, sans-serif; +$default-serif: Georgia, "Times New Roman", Times, serif; + +/* Application + ========================================================================== */ + +$font-family-primary: $default-sans; +$font-family-secondary: $default-serif; + +$font-size-desktop: 18px; +$font-size-desktop-small: 14px; +$font-size-mobile: 15px; +$font-size-mobile-small: 13px; + +$font-weight-light: 300; +$font-weight-normal: 400; +$font-weight-medium: 500; +$font-weight-bold: 700; + + +/* Expose variables + ========================================================================== */ + +:root { + --font-family-primary: $font-family-primary; + --font-family-secondary: $font-family-secondary; + --font-size-desktop: $font-size-desktop; + --font-size-desktop-small: $font-size-desktop-small; + --font-size-mobile: $font-size-mobile; + --font-size-mobile-small: $font-size-mobile-small; + --font-weight-light: $font-weight-light; + --font-weight-normal: $font-weight-normal; + --font-weight-medium: $font-weight-medium; + --font-weight-bold: $font-weight-bold; +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/_all.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/_all.scss new file mode 100644 index 0000000000..1d14f5d9b2 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/_all.scss @@ -0,0 +1,181 @@ +/* ========================================================================== + Atoms + + This file is exclusively intended for aggregating helper functions + Never add styles directly to this file + ========================================================================== */ + +@import "spacers/spacers"; + +@import "typography/bodycopy"; +@import "typography/headings"; + +@import "buttons/button"; +@import "buttons/nav-toggle"; + +@import "containers/containers"; +@import "media/media-object"; + +@import "loader/loader"; +@import "img/img"; +@import "divider/divider"; +@import "tables/tables"; +@import "links/links"; +@import "tags/tags"; + +@import "form/form-control"; +@import "form/form-control-label"; +@import "form/form-control-error"; +@import "form/form-group"; +@import "form/datepicker/all"; +@import "form/checkbox-radiobtn/radio-btn"; +@import "form/checkbox-radiobtn/checkbox"; +@import "form/checkbox-radiobtn/toggle-switch"; + +@import "label/label"; + +/** + * @section Atoms + * @page Index + */ + +/** + * @section Forms + * @sectionof Atoms + */ + +/** + * @doc form/docs/form-control.md + * @section Form control + * @sectionof Atoms.Forms + */ + +/** + * @doc form/docs/form-control-label.md + * @section Form control label + * @sectionof Atoms.Forms + */ + +/** + * @doc form/docs/datepicker.md + * @section Datepicker + * @sectionof Atoms.Forms + */ + +/** + * @doc form/docs/form-group.md + * @section Form group + * @sectionof Atoms.Forms + */ + +/** + * @doc form/docs/checkbox.md + * @section Checkbox + * @sectionof Atoms.Forms + */ + +/** + * @doc form/docs/radio-button.md + * @section Radio button + * @sectionof Atoms.Forms + */ + +/** + * @doc form/docs/toggle-switch.md + * @section Toggle switch + * @sectionof Atoms.Forms + */ + +/** + * @section Images + * @sectionof Atoms + */ + +/** + * @doc img/docs/img.md + * @section Default + * @sectionof Atoms.Images + */ + +/** + * @doc img/docs/card.md + * @section Card + * @sectionof Atoms.Images + */ + +/** + * @section Buttons + * @sectionof Atoms + */ + +/** + * @doc buttons/docs/buttons.md + * @section Default + * @sectionof Atoms.Buttons + */ + +/** + * @doc buttons/docs/nav-toggle.md + * @section Nav toggle + * @sectionof Atoms.Buttons + */ + +/** + * @doc loader/docs/loader.md + * @section Loader + * @sectionof Atoms + */ + +/** + * @doc tables/docs/tables.md + * @section Tables + * @sectionof Atoms + */ + +/** + * @doc links/docs/links.md + * @section Links + * @sectionof Atoms + */ + +/** + * @doc tags/docs/tags.md + * @section Tags + * @sectionof Atoms + */ + +/** + * @doc divider/docs/divider.md + * @section Divider + * @sectionof Atoms + */ + +/** + * @doc containers/docs/containers.md + * @section Containers + * @sectionof Atoms + */ + + +/** + * @section Typography + * @sectionof Atoms + */ + +/** + * @doc typography/docs/copy.md + * @section Body copy + * @sectionof Atoms.Typography + */ + +/** + * @doc typography/docs/headings.md + * @section Headings + * @sectionof Atoms.Typography + */ + +/** + * @doc label/docs/label.md + * @section Label + * @sectionof Atoms + */ diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/buttons/_button.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/buttons/_button.scss new file mode 100644 index 0000000000..fb24cde33b --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/buttons/_button.scss @@ -0,0 +1,43 @@ +/* ========================================================================== + Buttons + ========================================================================== */ + +@import "helpers"; + +.btn { + @extend %button-base; +} + +$button-types: primary secondary eye-catcher; +$button-sizes: lg md sm; + +@each $type in $button-types { + .btn--#{$type} { + @include buttonType($type: $type); + } +} + +@each $size in $button-sizes { + .btn--#{$size} { + @include buttonSize($size: $size); + } +} + +/* Icon Buttons + ========================================================================== */ + +.icon-btn { + @extend %button-base; +} + +@each $size in $button-sizes { + .icon-btn--#{$size} { + @include buttonSize($size: $size, $iconbutton: true); + } +} + +/* + * @doc ../docs/icon-buttons.md + * @section Icon Buttons + * @sectionof Components.Basic +*/ diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/buttons/_helpers.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/buttons/_helpers.scss new file mode 100644 index 0000000000..9928fcc78a --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/buttons/_helpers.scss @@ -0,0 +1,139 @@ +/* ========================================================================== + Buttons helpers + ========================================================================== */ + +%button-base { + position: relative; + + display: block; + width: 100%; + padding: 0; + overflow: hidden; + + background: transparent; + + border-radius: 0; + border: none; + + text-align: center; + user-select: none; + cursor: pointer; + + transition: background-color .3s $ease-out-quart; + + &:disabled { + pointer-events: not-allowed; + cursor: not-allowed; + + background: transparent; + + opacity: .4; + } + + @media (min-width: $break-sm) { + display: inline-block; + width: auto; + } +} + +@mixin buttonType($type) { + $types: ( + primary: ( + border: $color-greyscale-black, + background: $color-greyscale-white, + text: $color-greyscale-black, + border-hover: $color-greyscale-black, + background-hover: $color-greyscale-black, + text-hover: $color-greyscale-white, + ), + secondary: ( + border: $color-greyscale-black, + background: $color-greyscale-black, + text: $color-greyscale-white, + border-hover: $color-greyscale-black, + background-hover: $color-greyscale-white, + text-hover: $color-greyscale-black, + ), + eye-catcher: ( + border: $color-primary, + background: $color-primary, + text: $color-greyscale-white, + border-hover: $color-primary, + background-hover: $color-greyscale-white, + text-hover: $color-primary, + ) + ); + + background: deep-get(background, $type, $types); + + border: deep-get(border, $type, $types) 2px solid; + + color: deep-get(text, $type, $types); + + .icon-btn__icon { + fill: deep-get(text, $type, $types); + } + + &:not(:disabled) { + &:hover, + &:focus { + background: deep-get(background-hover, $type, $types); + + border: deep-get(border-hover, $type, $types) 2px solid; + + color: deep-get(text-hover, $type, $types); + + .icon-btn__icon { + fill: deep-get(text-hover, $type, $types); + } + } + } +} + +@mixin buttonSize($size, $iconbutton: false) { + $sizes: ( + lg: ( + font-size: 25px, + spacing: 18px 50px, + size: 80px, + icon-size: 50px + ), + md: ( + font-size: 17px, + spacing: 12px 50px, + size: 60px, + icon-size: 40px + ), + sm: ( + font-size: 14px, + spacing: 8px 50px, + size: 45px, + icon-size: 30px + ) + ); + + padding: deep-get(spacing, $size, $sizes); + + font-size: deep-get(font-size, $size, $sizes); + + @if $iconbutton == true { + position: relative; + + height: deep-get(size, $size, $sizes); + width: deep-get(size, $size, $sizes); + padding: 0; + + border-radius: 50%; + + .icon-btn__icon { + position: absolute; + top: 50%; + left: 50%; + + height: deep-get(icon-size, $size, $sizes); + width: deep-get(icon-size, $size, $sizes); + + transform: translate3d(-50%, -50%, 0); + } + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/buttons/_nav-toggle.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/buttons/_nav-toggle.scss new file mode 100644 index 0000000000..ccc86fb934 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/buttons/_nav-toggle.scss @@ -0,0 +1,84 @@ +/* ========================================================================== + Mobile nav toggle + ========================================================================== */ + +.nav-toggle { + position: relative; + z-index: $z-show + 1; + + display: inline-block; + width: 24px; + height: 24px; + padding: 0; + + background: none; + + border: 0; + + font: inherit; + + cursor: pointer; + + &:focus, + &:active { + outline: none; + } + + &--active { + .nav-toggle__line { + &:nth-child(1) { + transform: translate3d(0, 10px, 0) rotate(135deg); + + transition-delay: .075s; + } + + &:nth-child(2) { + transition-delay: 0s; + + opacity: 0; + } + + &:nth-child(3) { + transform: translate3d(0, -10px, 0) rotate(-315deg); + + transition-delay: .075s; + } + } + } +} + +.nav-toggle__line { + position: absolute; + top: 50%; + left: 50%; + + display: block; + width: 100%; + height: 4px; + margin-left: -12px; + + background: $color-greyscale-black; + + transition-property: transform; + transition-duration: .15s; + transition-timing-function: ease; + + &:nth-child(1) { + margin-top: -12px; + + transition-duration: .275s; + transition-timing-function: cubic-bezier(.68, -.55, .265, 1.55); + } + + &:nth-child(2) { + margin-top: -2px; + + transition: opacity .125s .275s ease; + } + + &:nth-child(3) { + margin-top: 8px; + + transition: transform .275s cubic-bezier(.68, -.55, .265, 1.55); + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/buttons/docs/buttons.md b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/buttons/docs/buttons.md new file mode 100644 index 0000000000..a6f0040b07 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/buttons/docs/buttons.md @@ -0,0 +1,77 @@ +Description: +
    +
    +Acceptable use: + +```html +@code + + + + + + + + + + + + + + + + + +``` + +```html +@example +
    Eyecatcher
    +
    + +
    +
    +
    Primary
    +
    + + +
    +
    +
    Secondary
    +
    + + +
    +
    +
    Disabled
    +
    + + + +
    +
    +

    Icon Buttons

    +
    +
    Eyecatcher
    +
    + +
    +
    +
    Primary
    +
    + + +
    +
    +
    Secondary
    +
    + + +
    +
    +
    Disabled
    +
    + + + +``` diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/buttons/docs/nav-toggle.md b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/buttons/docs/nav-toggle.md new file mode 100644 index 0000000000..d1f7b77116 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/buttons/docs/nav-toggle.md @@ -0,0 +1,23 @@ +Description: +
    +
    +Acceptable use: + +```html +@example + +``` + +```html +@code + +``` + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/containers/_containers.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/containers/_containers.scss new file mode 100644 index 0000000000..89ee97c83c --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/containers/_containers.scss @@ -0,0 +1,32 @@ +/* ========================================================================== + Containers + ========================================================================== */ + +.container { + width: 100%; + padding: 0 $spacing-mobile-sm; + margin: 0 auto; + + .container { + padding: 0; + } + + @media (min-width: $break-md) { + max-width: 790px; + + padding: 0 $spacing-desktop-sm; + + &--full-width { + max-width: 1200px; + } + + &--fluid { + max-width: none; + } + } + + @media (min-width: $break-xl) { + padding: 0; + } +} + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/containers/docs/containers.md b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/containers/docs/containers.md new file mode 100644 index 0000000000..f060e3c956 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/containers/docs/containers.md @@ -0,0 +1,32 @@ +Description: +
    +
    +Acceptable use: + +```html +@code +
    + Container +
    +
    + Full Width Container +
    +
    + Fluid Container +
    +``` + +```html +@example +
    + Container +
    +
    +
    + Full Width Container +
    +
    +
    + Fluid Container +
    +``` \ No newline at end of file diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/divider/_divider.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/divider/_divider.scss new file mode 100644 index 0000000000..be80dd8e8b --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/divider/_divider.scss @@ -0,0 +1,17 @@ +hr { + display: block; + width: 100%; + margin: $spacing-mobile-sm 0; + + border: 1px solid $color-greyscale-grey; + + @media (min-width: $break-md) { + margin: $spacing-desktop-sm 0; + } +} + +/* + * @doc docs/divider.md + * @section Divider + * @sectionof Atoms + */ diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/divider/docs/divider.md b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/divider/docs/divider.md new file mode 100644 index 0000000000..5ffd01588d --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/divider/docs/divider.md @@ -0,0 +1,9 @@ +Description: +
    +
    +Acceptable use: + +```html +@example +
    +``` \ No newline at end of file diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/_config.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/_config.scss new file mode 100644 index 0000000000..4359efcc9e --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/_config.scss @@ -0,0 +1,10 @@ +/* ========================================================================== + Form Config + + This file is exclusively intended for setting up variables + Never add styles directly to this file + ========================================================================== */ + +$form-max-width: 350px; +$form-border-radius: 8px; +$form-border: 1px solid $color-greyscale-grey; diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/_form-control-error.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/_form-control-error.scss new file mode 100644 index 0000000000..8ce2ebd8a6 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/_form-control-error.scss @@ -0,0 +1,12 @@ +/* ========================================================================== + Forms - Form control error + ========================================================================== */ + +.form-control-error { + padding: 0 $spacing-mobile-sm; + margin: $spacing-mobile-xs 0 0 0; + + color: $color-error; + font-family: $font-family-primary; + font-size: 18px; +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/_form-control-label.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/_form-control-label.scss new file mode 100644 index 0000000000..54ee721666 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/_form-control-label.scss @@ -0,0 +1,14 @@ +/* ========================================================================== + Forms - Form control Label + ========================================================================== */ + +@import "config"; + +.form-control-label { + display: block; + margin: 0 0 $spacing-mobile-xs 0; + + color: $color-text; + font-family: $font-family-primary; + font-size: 18px; +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/_form-control.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/_form-control.scss new file mode 100644 index 0000000000..7f467b800d --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/_form-control.scss @@ -0,0 +1,155 @@ +/* ========================================================================== + Forms - Form control + ========================================================================== */ + +@import "config"; + +/* General + ========================================================================== */ + +.form-control { + display: block; + width: 100%; + height: 50px; + max-width: $form-max-width; + padding: $spacing-mobile-xs; + + appearance: none; + + background: $color-greyscale-white; + + border: $form-border; + border-radius: $form-border-radius; + + color: $color-text; + font-family: $font-family-primary; + font-size: 18px; + + &:focus { + border: 1px solid $color-primary; + + outline: none; + } + + &:disabled { + background: $color-disabled; + + color: $color-greyscale-black; + + &:hover { + cursor: not-allowed; + } + } + + &::-ms-expand { + display: none; + } +} + +/* Icon + ========================================================================== */ + +.form-control-icon { + position: relative; + + max-width: $form-max-width; + + .form-control { + padding-right: 63px; + } + + .form-control-icon__icon { + position: absolute; + top: 50%; + right: $spacing-mobile-xs; + z-index: $z-show; + + display: block; + width: 23px; + height: 23px; + + fill: $color-text; + + transform: translate3d(0, -50%, 0); + } + + &--double { + .form-control { + padding-left: 63px; + } + + .form-control-icon__icon:first-of-type { + right: auto; + left: $spacing-mobile-xs; + } + } +} + + +/* Input + ========================================================================== */ + +/* Text-area + ========================================================================== */ + +.form-control--textarea { + height: none; + min-height: 130px; +} + +/* Form control select + ========================================================================== */ + +.form-control-select { + overflow: hidden; +} + +.form-control--select { + width: 110%; + padding-top: 0; + padding-bottom: 0; +} + +/* Form control upload + ========================================================================== */ + +.form-control-upload { + position: relative; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 200px; + max-width: $form-max-width; + + background: $color-greyscale-white; + + border-radius: $form-border-radius; + border: $form-border; + border-style: dashed; +} + +.form-control--upload { + position: absolute; + top: 0; + left: 0; + + width: 100%; + + height: 100%; + + opacity: 0; +} + +.form-control-label.form-control-upload__label { + font-size: 22px; + font-weight: $font-weight-medium; +} + +.form-control-upload__icon { + width: 24px; + height: 24px; + + fill: $color-primary-desat; +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/_form-group.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/_form-group.scss new file mode 100644 index 0000000000..103f004397 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/_form-group.scss @@ -0,0 +1,13 @@ +/* ========================================================================== + Forms - Form group + ========================================================================== */ + +.form-group { + margin: $spacing-mobile-sm 0; + + &--has-error { + .form-control { + border-color: $color-error; + } + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/checkbox-radiobtn/_checkbox.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/checkbox-radiobtn/_checkbox.scss new file mode 100644 index 0000000000..d93a93d143 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/checkbox-radiobtn/_checkbox.scss @@ -0,0 +1,72 @@ +/* ========================================================================== +Forms - checkbox +========================================================================== */ + +@import 'config'; + +.checkbox { + display: block; + + input[type="checkbox"] { + @extend %radio-checkbox-base; + + + label { + &:before { + content: ''; + + position: absolute; + top: 50%; + left: 3px; + z-index: $z-base + 1; + + width: 20px; + height: 20px; + margin: -10px 0 0 0; + + transform: scale(0); + + background-image: url('#{$icons}/svg/check.svg'); + background-size: 100%; + background-repeat: no-repeat; + + transition: transform .2s ease-in-out; + } + + &:after { + content: ' '; + + position: absolute; + top: 50%; + left: 0; + z-index: $z-base; + + width: 26px; + height: 26px; + + transform: translateY(-50%); + + border: 1px solid $color-greyscale-light; + border-radius: 3px; + } + } + + &:checked + label { + &:before { + transform: scale(1); + } + } + } + + @media (min-width: $break-sm) { + display: inline-block; + } + + + .radio { + margin-top: $spacing-mobile-sm; + + @media (min-width: $break-sm) { + margin-top: 0; + margin-left: $spacing-desktop-sm; + } + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/checkbox-radiobtn/_config.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/checkbox-radiobtn/_config.scss new file mode 100644 index 0000000000..9656ae4356 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/checkbox-radiobtn/_config.scss @@ -0,0 +1,42 @@ +/* ========================================================================== + Forms - Radio buttons and checkboxes config + ========================================================================== */ + +%radio-checkbox-base { + float: left; + + opacity: 0; + + cursor: pointer; + + + label { + position: relative; + + display: block; + padding: 5px 0 5px 40px; + margin: 0; + + color: $color-text; + font-size: 15px; + font-weight: $font-weight-medium; + + cursor: pointer; + + &:after { + background: $color-greyscale-white; + } + + &::selection { + background: none; + } + + @media (min-width: $break-sm) { + font-size: 18px; + } + } + + &:disabled + label { + cursor: default; + pointer-events: none; + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/checkbox-radiobtn/_radio-btn.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/checkbox-radiobtn/_radio-btn.scss new file mode 100644 index 0000000000..beaca379b8 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/checkbox-radiobtn/_radio-btn.scss @@ -0,0 +1,71 @@ +/* ========================================================================== + Forms - Radio button + ========================================================================== */ + +.radio { + display: block; + + input[type="radio"] { + @extend %radio-checkbox-base; + + + label { + &:before { + content: ''; + + position: absolute; + top: 50%; + left: 6px; + z-index: $z-middle; + + display: inline-block; + width: 16px; + height: 16px; + margin: -8px 0 0 0; + + transform: scale(0); + + background: $color-primary-desat; + + border-radius: 50%; + + transition: transform .2s ease-in-out; + } + + &:after { + content: ' '; + + position: absolute; + top: 50%; + left: 0; + z-index: $z-base; + + width: 28px; + height: 28px; + + transform: translateY(-50%); + + border: 1px solid $color-greyscale-light; + border-radius: 50%; + } + } + + &:checked + label { + &:before { + transform: scale(1); + } + } + } + + @media (min-width: $break-sm) { + display: inline-block; + } + + + .radio { + margin-top: $spacing-mobile-sm; + + @media (min-width: $break-sm) { + margin-top: 0; + margin-left: $spacing-desktop-sm; + } + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/checkbox-radiobtn/_toggle-switch.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/checkbox-radiobtn/_toggle-switch.scss new file mode 100644 index 0000000000..77982bbbf2 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/checkbox-radiobtn/_toggle-switch.scss @@ -0,0 +1,162 @@ +/* ========================================================================== + Forms - Radio button + ========================================================================== */ + +.toggle-switch { + position: relative; + + margin: $spacing-mobile-sm 0; +} + +.form-control--switch { + position: absolute; + top: 0; + left: 0; + + opacity: 0; + + cursor: pointer; + + + label { + .toggle-switch__label--on { + display: none; + } + + .toggle-switch__label--off { + display: block; + } + } + + &:checked + label { + .toggle-switch__label--on { + display: block; + } + + .toggle-switch__label--off { + display: none; + } + + &:after { + transform: translate3d(16px, -50%, 0) rotate3d(0, 0, 1, 360deg); + + background-color: $color-success; + background-image: url('#{$icons}/svg/check.svg'); + } + } + + .toggle-switch--inline & { + + label { + .toggle-switch__label--on, + .toggle-switch__label--off { + display: inline-block; + } + + .toggle-switch__label--on { + opacity: 0; + } + + .toggle-switch__label--off { + opacity: 1; + } + } + + &:checked + label { + .toggle-switch__label--on, + .toggle-switch__label--off { + display: inline-block; + } + + .toggle-switch__label--on { + opacity: 1; + } + + .toggle-switch__label--off { + opacity: 0; + } + + &:after { + transform: translate3d(49px, -50%, 0) rotate3d(0, 0, 1, 360deg); + } + } + } +} + +.toggle-switch__label { + position: relative; + + padding-left: 50px; + margin: 0; + + cursor: pointer; + + &:before, + &:after { + content: ''; + + position: absolute; + } + + &:before { + top: 50%; + left: 0; + + display: block; + width: 34px; + height: 14px; + + transform: translate3d(0, -50%, 0); + + background: $color-greyscale-white; + + border-radius: 7px; + border: 1px solid $color-greyscale-light; + } + + &:after { + @include shadow($size: sm); + + position: absolute; + + top: 50%; + left: -1px; + + width: 20px; + height: 20px; + transform: translate3d(0, -50%, 0) rotate3d(0, 0, 1, 0); + + background-position: center; + background-color: $color-greyscale-lightest; + background-image: url('#{$icons}/svg/close.svg'); + background-size: 60%; + background-repeat: no-repeat; + + border-radius: 50%; + + transition: transform .3s ease-in-out, color .3s ease-in-out; + } + + .toggle-switch--inline & { + display: flex; + justify-content: space-between; + width: 80px; + padding: 4px 15px; + + background: $color-greyscale-white; + + border-radius: 100px; + border: 1px solid $color-greyscale-light; + + font-family: $font-family-primary; + font-size: $font-size-desktop-small; + + &:before { + content: none; + } + + &:after { + width: 33px; + height: 33px; + } + } +} + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/datepicker/_all.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/datepicker/_all.scss new file mode 100644 index 0000000000..33cff3714f --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/datepicker/_all.scss @@ -0,0 +1,10 @@ +/* ========================================================================== + Forms - Datepicker + + This file is exclusively intended for aggregating helper functions + Never add styles directly to this file + ========================================================================== */ + +@import "vendor"; +@import "datepicker"; + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/datepicker/_datepicker.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/datepicker/_datepicker.scss new file mode 100644 index 0000000000..22e0de9198 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/datepicker/_datepicker.scss @@ -0,0 +1,141 @@ +/* ========================================================================== + Forms - Datepicker custom styling + ========================================================================== */ + +.datepicker { + position: relative; + + width: 100%; + + &--open { + .datepicker__controls__control--open { + display: none; + } + + .datepicker__controls__control--close { + display: block; + } + + .datepicker__input, + .datepicker__input:focus { + border-bottom: 0; + } + + .datepicker__range .datepicker__input + .datepicker__input { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + } + } + + @media (min-width: $break-sm) { + max-width: $form-max-width; + } +} + +.datepicker__input { + max-width: none; + padding-right: 60px; + + background: $color-greyscale-white; + + border: $form-border; + border-radius: $form-border-radius; + + &:focus { + border: $form-border; + } + + &.active { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + } +} + +.datepicker__range { + position: relative; + + display: flex; + justify-content: flex-start; + align-items: flex-start; + + .datepicker__input { + max-width: none; + + &:first-child { + padding-right: 10px; + + border-top-right-radius: 0; + border-right: 0; + border-bottom-right-radius: 0; + } + + &:last-child { + padding-left: 10px; + + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-left: 0; + + &:focus { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + } + } + } + + &:before { + content: '-'; + + position: absolute; + top: 50%; + left: 50%; + + transform: translate3d(calc(-50% - 32px), -50%, 0); + + font-size: 18px; + } +} + +.datepicker__controls { + position: absolute; + top: 50%; + right: 20px; + + width: 24px; + height: 24px; + + transform: translate3d(0, -50%, 0); +} + +.datepicker__controls__control { + padding: 0; + + border: none; +} + +.datepicker__controls__control--close { + display: none; +} + +.datepicker__controls__control--open, +.datepicker__controls__control--close, +.datepicker__controls__control__icon { + width: 100%; + height: 100%; +} + +.datepicker__calendar__direction__item { + position: relative; + + display: block; + width: 30px; + height: 30px; + + background: $color-greyscale-lightest; + + border-radius: 50%; +} + +.datepicker__calendar__direction__item__icon { + fill: $color-primary-desat; +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/datepicker/_vendor.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/datepicker/_vendor.scss new file mode 100644 index 0000000000..3696fa8dac --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/datepicker/_vendor.scss @@ -0,0 +1,291 @@ +/* ========================================================================== + Forms - Datepicker Vendor + ========================================================================== */ + +/* Import vendor styles + ========================================================================== */ + +@import "../../../../../../node_modules/flatpickr/dist/flatpickr"; + +/* Overwrite + ========================================================================== */ + +.flatpickr-wrapper { + position: relative; + + display: block; +} + +.flatpickr-calendar { + position: absolute; + top: 100%; + left: 0; + + width: 100% !important; + max-width: calc(100% - $spacing-mobile-xs) !important; + padding: $spacing-mobile-sm $spacing-mobile-md; + margin-top: -2px; + + box-shadow: none; + + border: $form-border; + border-top-right-radius: 0; + border-top-left-radius: 0; + border-bottom-right-radius: 8px; + border-bottom-left-radius: 8px; + + &:before, + &:after { + display: none; + } + + &.rangeMode { + max-width: calc(100% - #{$spacing-mobile-sm}) !important; + + + @media (min-width: $break-sm) { + max-width: calc(#{$form-max-width * 2}) !important; + + border-top-right-radius: 8px; + } + + .flatpickr-day { + margin: 0; + } + } + + @media (min-width: $break-sm) { + max-width: $form-max-width !important; + } + + @media (max-width: $break-sm) { + right: auto !important; + left: auto !important; + } +} + +.flatpickr-innerContainer { + justify-content: center; +} + +.flatpickr-current-month { + padding: 0; + margin: 0; + + span.cur-month, + .numInputWrapper { + font-size: 24px; + font-family: $font-family-primary; + font-weight: $font-weight-medium; + } +} + +.flatpickr-months { + padding-bottom: $spacing-mobile-md; + + .flatpickr-prev-month, + .flatpickr-next-month { + top: $spacing-mobile-sm; + + display: block; + width: 30px; + height: 30px; + padding: 0; + + svg { + position: absolute; + top: 50%; + left: 50%; + + width: 16px; + height: 16px; + + transform: translate3d(-50%, -50%, 0); + } + } + + .flatpickr-prev-month { + left: $spacing-mobile-sm !important; + } + + .flatpickr-next-month { + right: $spacing-mobile-sm !important; + } +} + +.flatpickr-month { + padding-right: $spacing-mobile-sm; + + + .flatpickr-month { + padding-right: 0; + padding-left: $spacing-mobile-sm; + } +} + +.dayContainer { + width: 100%; + max-width: none; + justify-content: center; + + box-shadow: none; + + &:first-child { + padding-right: $spacing-mobile-sm; + } + + &:last-child { + padding-left: $spacing-mobile-sm; + + box-shadow: none; + } +} + +.flatpickr-weekdaycontainer { + padding-bottom: $spacing-mobile-sm; + + border-bottom: 1px solid $color-greyscale-light; + + &:first-child { + margin-right: $spacing-mobile-sm; + } + + &:last-child { + margin-left: $spacing-mobile-sm; + } +} + +.flatpickr-weekdays { + height: auto; +} + + +.flatpickr-day { + position: relative; + + margin: 0; + + box-shadow: none !important; + + border-radius: 0; + border: none; + border-bottom: 1px solid $color-greyscale-light; + + font-family: $font-family-primary; + font-weight: $font-weight-light; + font-size: 15px; + color: $color-text; + + + &:hover { + background: transparent; + + &:after { + border-color: $color-primary; + } + } + + &:after { + content: ''; + + position: absolute; + top: 50%; + left: 50%; + z-index: $z-base - 1; + + display: block; + width: 30px; + height: 30px; + + transform: translate3d(-50%, -50%, 0); + + border: 1px solid transparent; + border-radius: 50%; + } + + &.hidden, + &.disabled { + visibility: visible; + + color: $color-greyscale-light; + } + + &.disabled { + border-bottom: 1px solid $color-greyscale-light; + + &:hover { + border-bottom: 1px solid $color-greyscale-light; + + color: $color-greyscale-light; + + &:after { + border-color: transparent; + } + } + } + + &, + &.selected, + &.inRange, + &.hidden { + flex: 1 1 auto; + max-width: none !important; + + box-shadow: none; + + border: none; + border-radius: 0; + border-bottom: 1px solid $color-greyscale-light; + } + + &.today { + border-bottom: 1px solid $color-greyscale-light !important; + + font-weight: $font-weight-bold; + + &:hover { + background: transparent; + + color: $color-text; + } + } + + &.selected, + &.inRange { + color: $color-text; + + .rangeMode & { + background: rgba($color-primary, .2); + + &.hidden { + background: rgba($color-primary, .1); + + color: $color-greyscale-light; + } + } + } + + &.startRange, + &.endRange { + background: rgba($color-primary, .2) !important; + + border: none !important; + border-radius: 0 !important; + border-bottom: 1px solid $color-greyscale-light !important; + + color: $color-text; + + &:after { + background: $color-primary !important; + + border-color: $color-primary !important; + } + + &:hover { + color: $color-text !important; + + &:after { + background: transparent !important; + } + } + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/docs/checkbox.md b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/docs/checkbox.md new file mode 100644 index 0000000000..4038ceef55 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/docs/checkbox.md @@ -0,0 +1,12 @@ +Description: +
    +
    +Acceptable use: + +```html +@example +
    + + +
    +``` diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/docs/datepicker.md b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/docs/datepicker.md new file mode 100644 index 0000000000..0161471167 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/docs/datepicker.md @@ -0,0 +1,67 @@ +Description: +
    +
    +Acceptable use: +
    +- Default min-day is today, can be overwritten using a data attribute: data-minDate="dd-mm-yyyy" +- Default max-day is null, can be overwritten using a data attribute: data-maxDate="dd-mm-yyyy" + +```html +@example +
    + +
    + + +
    +
    +
    +
    +
    + + +
    +
    + + +
    +
    +``` + +```html +@code +
    + +
    + + +
    +
    + +
    +
    + + +
    +
    + + +
    +
    +``` \ No newline at end of file diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/docs/form-control-error.md b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/docs/form-control-error.md new file mode 100644 index 0000000000..7621d5be1f --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/docs/form-control-error.md @@ -0,0 +1,4 @@ +Description: +
    +
    +Acceptable use: \ No newline at end of file diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/docs/form-control-label.md b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/docs/form-control-label.md new file mode 100644 index 0000000000..dec1563fd5 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/docs/form-control-label.md @@ -0,0 +1,14 @@ +Description: +
    +
    +Acceptable use: + +```html +@example + +``` + +```html +@code + +``` \ No newline at end of file diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/docs/form-control.md b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/docs/form-control.md new file mode 100644 index 0000000000..4af6f0da32 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/docs/form-control.md @@ -0,0 +1,69 @@ +Description: +
    +
    +Acceptable use: +```html +@example + +
    +
    + + +
    +
    + +
    +
    + + +
    +
    +
    + + + + + +
    +``` + +```html +@code + + +
    + + +
    + + + +
    + + +
    + +
    + + + + + +
    +``` \ No newline at end of file diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/docs/form-group.md b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/docs/form-group.md new file mode 100644 index 0000000000..573f5c0f0c --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/docs/form-group.md @@ -0,0 +1,20 @@ +Description: +
    +
    +Acceptable use: + +```html +@example +
    + + +
    +``` + +```html +@code +
    + + +
    +``` \ No newline at end of file diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/docs/radio-button.md b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/docs/radio-button.md new file mode 100644 index 0000000000..eaf76aae41 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/docs/radio-button.md @@ -0,0 +1,17 @@ +Description: +
    +
    +Acceptable use: + +```html +@example +
    + + +
    + +
    + + +
    +``` diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/docs/toggle-switch.md b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/docs/toggle-switch.md new file mode 100644 index 0000000000..efd64e686b --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/form/docs/toggle-switch.md @@ -0,0 +1,24 @@ +Description: +
    +
    +Acceptable use: + +```html +@example + +
    + + +
    + +
    + + +
    +``` diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/img/_img.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/img/_img.scss new file mode 100644 index 0000000000..a590059625 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/img/_img.scss @@ -0,0 +1,107 @@ +/* ========================================================================== + IMG + ========================================================================== */ + +img { + display: block; + height: auto; + max-width: 100%; +} + +figure img { + margin: 0 auto; +} + +.img--full-width { + width: 100%; + max-width: none; +} + +.img__caption { + padding: $spacing-mobile-xs; + + text-align: center; + font-size: $font-size-desktop-small; + font-family: font-family(null, primary); + font-weight: $font-weight-normal; + font-style: italic; +} + +// image card + +.image-card { + position: relative; + + display: inline-block; + width: auto; + + &:after { + content: ''; + + position: absolute; + top: 0; + left: 0; + z-index: $z-base; + + display: block; + width: 100%; + height: 100%; + + background: linear-gradient(to bottom, rgba($color-greyscale-black, .25), transparent); + } +} + +.image-card__image { + position: relative; + z-index: $z-base; +} + +.image-card__title { + position: absolute; + top: 0; + left: 0; + z-index: $z-middle; + + width: 100%; + padding: $spacing-mobile-xs; + + color: $color-greyscale-white; + text-shadow: 0 2px 2px rgba($color-greyscale-black, .5); + font-family: font-family(null, primary); + font-size: 18px; + + @media (min-width: $break-sm) { + padding: $spacing-desktop-xs; + + font-size: 24px; + } +} + +.author-img { + width: 70px; + height: 70px; + overflow: hidden; + + border-radius: 50%; + + @media (min-width: $break-sm) { + width: 90px; + height: 90px; + } + + img { + width: 100%; + height: 100%; + object-fit: cover; + } + + &--sm { + width: 30px; + height: 30px; + + @media (min-width: $break-sm) { + width: 30px; + height: 30px; + } + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/img/docs/card.md b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/img/docs/card.md new file mode 100644 index 0000000000..1b0458083a --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/img/docs/card.md @@ -0,0 +1,14 @@ +Description: +
    +
    +Acceptable use: + +```html +@example +
    + +
    + image card with caption +
    +
    +``` \ No newline at end of file diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/img/docs/img.md b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/img/docs/img.md new file mode 100644 index 0000000000..300b52247a --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/img/docs/img.md @@ -0,0 +1,58 @@ +Description: +
    +
    +Acceptable use: + +```html +@code + +
    + +
    image with caption
    +
    + +
    + +
    full with image
    +
    + +
    + +
    + +
    + +
    +``` + +```html +@example + + +
    + +
    + +
    image with caption
    +
    + +
    + +
    + +
    full with image
    +
    + +
    + +
    + +
    + +
    + +
    + +
    + +``` \ No newline at end of file diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/label/_label.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/label/_label.scss new file mode 100644 index 0000000000..f1f6a3fd05 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/label/_label.scss @@ -0,0 +1,31 @@ +/* ========================================================================== + Label + ========================================================================== */ + +.label { + display: inline-block; + padding: 3px 8px; + + background: $color-greyscale-dark; + + font-size: 13px; + font-family: $font-family-primary; + font-weight: $font-weight-medium; + color: $color-greyscale-lightest; + + &--inactive { + background: $color-greyscale-lightest; + + color: $color-text; + } + + &--active { + background: $color-primary-desat; + + color: $color-greyscale-white; + } + + + .label { + margin-left: $spacing-mobile-sm; + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/label/docs/label.md b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/label/docs/label.md new file mode 100644 index 0000000000..d1d85e9cea --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/label/docs/label.md @@ -0,0 +1,11 @@ +Description: +
    +
    +Acceptable use: + +```html +@example +Categorie +Categorie +Categorie +``` \ No newline at end of file diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/links/_links.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/links/_links.scss new file mode 100644 index 0000000000..d259ed6369 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/links/_links.scss @@ -0,0 +1,39 @@ +/* ========================================================================== + Atoms - Links + ========================================================================== */ + +a { + color: $color-link; + text-decoration: none; + + &:hover { + color: darken($color-link, 20%); + } + + &:active { + color: inherit; + } +} + +.icon-link { + vertical-align: middle; +} + +.icon-link__icon { + display: inline-block; + width: 16px; + height: 16px; + + + vertical-align: middle; + + fill: $color-link; + + .icon-link:hover & { + fill: darken($color-link, 20%); + } + + .icon-link:active & { + fill: inherit; + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/links/docs/links.md b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/links/docs/links.md new file mode 100644 index 0000000000..cd037787e2 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/links/docs/links.md @@ -0,0 +1,23 @@ +Description: +
    +
    +Acceptable use: + +```html +@example +Some link +
    + + icon link + + +``` + +```html +@code +Some link + + icon link + + +``` \ No newline at end of file diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/loader/docs/loader.md b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/loader/docs/loader.md new file mode 100644 index 0000000000..fdd15c4b95 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/loader/docs/loader.md @@ -0,0 +1,11 @@ +Description: +
    +
    +Acceptable use: + +```html +@example +
    +
    +
    +``` \ No newline at end of file diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/loader/loader.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/loader/loader.scss new file mode 100644 index 0000000000..70f7befdda --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/loader/loader.scss @@ -0,0 +1,71 @@ +.loader { + position: relative; + + width: 48px; + height: 48px; + overflow: hidden; + + border-radius: 50%; + + animation: spin 1s linear infinite; + + text-align: left; +} + +@keyframes spin { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } +} + +.loader-inside { + position: absolute; + + width: 100%; + height: 50%; + + margin-top: 50%; + + background: linear-gradient(90deg, rgb(220, 220, 220), rgb(150, 150, 150)); + + &:before, + &:after { + content: ''; + + position: absolute; + top: 0; + left: 0; + } + + &:before { + width: 100%; + height: 100%; + + margin-top: -50%; + + background: linear-gradient(90deg, rgb(50, 50, 50), rgb(160, 160, 160)); + } + + &:after { + width: 80%; + height: 160%; + + margin-top: -40%; + margin-left: 10%; + + /* TO DO: set background color to background color of the parent element */ + background: rgb(255, 255, 255); + + border-radius: 50%; + } +} + +/* + * @doc docs/loader.md + * @section Loader + * @sectionof Atoms + */ diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/media/_media-object.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/media/_media-object.scss new file mode 100644 index 0000000000..e306685fcd --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/media/_media-object.scss @@ -0,0 +1,73 @@ +/* ========================================================================== + Media object helpers + ========================================================================== */ + +@mixin media-object-base($type: null, $spacing: null) { + margin-top: $spacing-mobile-sm; + margin-right: 0; + margin-bottom: $spacing-mobile-sm; + margin-left: 0; + + @media (min-width: $break-sm) { + display: flex; + align-items: flex-start; + margin-top: $spacing-desktop-md; + margin-right: 0; + margin-bottom: $spacing-desktop-md; + margin-left: 0; + } + + .media-object__media, + > *:first-child { + margin-top: 0; + margin-right: 0; + margin-bottom: $spacing-mobile-sm; + margin-left: 0; + + @media (min-width: $break-sm) { + @if $type == reversed { + order: 1; + + margin-top: 0; + margin-right: 0; + margin-bottom: 0; + margin-left: $spacing-desktop-sm; + } @else { + margin-top: 0; + margin-right: $spacing-desktop-sm; + margin-bottom: 0; + margin-left: 0; + } + + @if $spacing == evenly { + flex: 1; + } + } + } + + .media-object__body, + > *:last-child { + flex: 1; + } +} + + +/* ========================================================================== + Media object + ========================================================================== */ + +.media-object { + @include media-object-base($type: null, $spacing: null); + + &--reversed { + @include media-object-base($type: reversed); + + &--evenly { + @include media-object-base($type: reversed, $spacing: evenly); + } + } + + &--evenly { + @include media-object-base($type: null, $spacing: evenly); + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/spacers/_spacers.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/spacers/_spacers.scss new file mode 100644 index 0000000000..a0184d9428 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/spacers/_spacers.scss @@ -0,0 +1,51 @@ +/* ========================================================================== + Spacers + ========================================================================== */ + +.spacer-xs { + margin-top: $spacing-mobile-xs; + + @media (min-width: $break-md) { + margin-top: $spacing-desktop-xs; + } +} + +.spacer-sm { + margin-top: $spacing-mobile-sm; + + @media (min-width: $break-md) { + margin-top: $spacing-desktop-sm; + } +} + +.spacer-md { + margin-top: $spacing-mobile-md; + + @media (min-width: $break-md) { + margin-top: $spacing-desktop-md; + } +} + +.spacer-lg { + margin-top: $spacing-mobile-lg; + + @media (min-width: $break-md) { + margin-top: $spacing-desktop-lg; + } +} + +.spacer-xl { + margin-top: $spacing-mobile-xl; + + @media (min-width: $break-md) { + margin-top: $spacing-desktop-xl; + } +} + +.spacer-xxl { + margin-top: $spacing-mobile-xxl; + + @media (min-width: $break-md) { + margin-top: $spacing-desktop-xxl; + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/tables/_tables.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/tables/_tables.scss new file mode 100644 index 0000000000..e935c9fa5a --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/tables/_tables.scss @@ -0,0 +1,31 @@ +/* ========================================================================== + Atoms - tables + ========================================================================== */ + +table, +th, +td { + border-collapse: collapse; + border: none; + + text-align: left; +} + +table { + width: 100%; +} + +th, +td { + padding: 4px; +} + +tr:not(:last-child) { + border-bottom: 1px solid $color-greyscale-black; +} + +/* + * @doc docs/tables.md + * @section Tables + * @sectionof Atoms + */ diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/tables/docs/tables.md b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/tables/docs/tables.md new file mode 100644 index 0000000000..1a67f62391 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/tables/docs/tables.md @@ -0,0 +1,39 @@ +Description: +
    +
    +Acceptable use: + +```html +@example + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    FirstnameLastnameRanking
    SamGooris5 stars
    PaulSevers5 stars
    LauraLynn5 stars
    EddyWally5 stars
    +``` \ No newline at end of file diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/tags/_tags.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/tags/_tags.scss new file mode 100644 index 0000000000..5bcca4d9cc --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/tags/_tags.scss @@ -0,0 +1,42 @@ +/* ========================================================================== + Atoms - tags + ========================================================================== */ + +.tags { + display: flex; + flex-wrap: wrap; + margin: - $spacing-mobile-sm; + + list-style: none; +} + +.tags__item { + position: relative; + + margin: $spacing-mobile-sm; + + &:before { + @include paragraphStyles($color: $color-greyscale-dark, $size: 12px, $size-mobile: 11px); + + content: '-'; + + position: absolute; + top: 50%; + left: - $spacing-mobile-sm; + + transform: translateY(-50%); + + color: $color-greyscale-grey; + } + + &:first-child { + &:before { + display: none; + } + } +} + +.tags__item__link { + @include paragraphStyles($color: $color-greyscale-dark, $size: 12px, $size-mobile: 11px); + color: $color-greyscale-grey; +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/tags/docs/tags.md b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/tags/docs/tags.md new file mode 100644 index 0000000000..00ba90561d --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/tags/docs/tags.md @@ -0,0 +1,13 @@ +Description: +
    +
    +Acceptable use: + +```html +@example + +``` \ No newline at end of file diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/typography/_bodycopy.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/typography/_bodycopy.scss new file mode 100644 index 0000000000..663cb62203 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/typography/_bodycopy.scss @@ -0,0 +1,53 @@ +/* ========================================================================== + Atoms - typography - bodycopy + ========================================================================== */ + +@mixin paragraphStyles($color, $size, $size-mobile) { + font-size: $size-mobile; + font-weight: 400; + font-family: $font-family-primary; + color: $color; + line-height: 1.4; + + @media (min-width: $break-sm) { + font-size: $size; + line-height: 1.3; + } +} + +body, +table, +th, +td { + @include paragraphStyles($color: $color-text, $size: 18px, $size-mobile: 15px); +} + +p { + margin: $spacing-mobile-sm 0; + + @include paragraphStyles($color: $color-text, $size: 18px, $size-mobile: 15px); + + @media (min-width: $break-md) { + margin: $spacing-desktop-xs 0; + } +} + +.intro-text, +.intro-text p { + width: 100%; + + @include paragraphStyles($color: $color-text, $size: 24px, $size-mobile: 20px); +} + + +.small-text { + @include paragraphStyles($color: $color-text, $size: 15px, $size-mobile: 12px); +} + +.legal-text { + @include paragraphStyles($color: $color-greyscale-dark, $size: 12px, $size-mobile: 11px); +} + +.text--inverted { + color: $color-greyscale-white; +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/typography/_headings.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/typography/_headings.scss new file mode 100644 index 0000000000..efbdbe0174 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/typography/_headings.scss @@ -0,0 +1,40 @@ +/* ========================================================================== + Atoms - typography - headings + ========================================================================== */ + +@mixin header($size, $size-mobile, $line-height, $line-height-mobile, $weight) { + font-size: $size-mobile; + font-weight: $weight; + font-family: $font-family-primary; + color: $color-text; + line-height: $line-height-mobile; + + @media (min-width: $break-sm) { + font-size: $size; + line-height: $line-height; + } +} + +h1 { + @include header($size: 70px, $size-mobile: 35px, $line-height: 1.5, $line-height-mobile: 1.2, $weight: $font-weight-normal); +} + +h2 { + @include header($size: 44px, $size-mobile: 32px, $line-height: 1.3, $line-height-mobile: 1.1, $weight: $font-weight-normal); +} + +h3 { + @include header($size: 34px, $size-mobile: 24px, $line-height: 1.5, $line-height-mobile: 1.3, $weight: $font-weight-normal); +} + +h4 { + @include header($size: 24px, $size-mobile: 20px, $line-height: 1.5, $line-height-mobile: 1.2, $weight: $font-weight-medium); +} + +h5 { + @include header($size: 20px, $size-mobile: 16px, $line-height: 1.6, $line-height-mobile: 1.2, $weight: $font-weight-medium); +} + +h6 { + @include header($size: 16px, $size-mobile: 12px, $line-height: 1.5, $line-height-mobile: 1.3, $weight: $font-weight-bold); +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/typography/docs/copy.md b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/typography/docs/copy.md new file mode 100644 index 0000000000..6884284836 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/typography/docs/copy.md @@ -0,0 +1,12 @@ +Description: +
    +
    +Acceptable use: + +```html +@example +

    Intro - Text link - I focus a lot on helping the first time or inexperienced traveler head out prepared and confident in themselves. Starting out as a old traveler can be intimidating.

    +

    Normal - Text link - According to us blisters are a very common thing and we come across them very often in our daily lives. It is a very common occurrence like cold or fever depending upon your lifestyle.

    +

    Small - Text link - According to us blisters are a very common thing and we come across them very often in our daily lives. It is a very common occurrence like cold or fever depending upon your lifestyle.

    +

    Legal - Text link - According to us blisters are a very common thing and we come across them very often in our daily lives. It is a very common occurrence like cold or fever depending upon your lifestyle.

    +``` \ No newline at end of file diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/typography/docs/headings.md b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/typography/docs/headings.md new file mode 100644 index 0000000000..14e30a9712 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/02-atoms/typography/docs/headings.md @@ -0,0 +1,19 @@ +Description: +
    +
    +Acceptable use: + +```html +@example +

    H1 Main page title

    + +

    H2 First level content title

    + +

    H3 Second level content title

    + +

    H4 small content title

    + +
    H5 small content title
    + +
    H6 small content title
    +``` \ No newline at end of file diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/_all.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/_all.scss new file mode 100644 index 0000000000..4e629893c4 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/_all.scss @@ -0,0 +1,28 @@ +/* ========================================================================== + Molecules + + This file is exclusively intended for aggregating helper functions + Never add styles directly to this file + ========================================================================== */ + +@import "breadcrumbs/breadcrumbs"; +@import "download/download"; +@import "editorial/editorial"; +@import "hero/hero"; +@import "banner/banner"; +@import "content-box/author"; +@import "content-box/highlight-box"; +@import "content-box/quote"; +@import "social-share/social-share"; +@import "audio-player/audio-player"; +@import "video-link/video-link"; +@import "pagination/pagination"; +@import "tabs/tabs"; +@import "usps/usps"; +@import "modals/modals"; +@import "articles/articles"; + +/** + * @section Molecules + * @page Index + */ diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/articles/_articles.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/articles/_articles.scss new file mode 100644 index 0000000000..280daba6fe --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/articles/_articles.scss @@ -0,0 +1,153 @@ +/* ========================================================================== + molecules: Articles + ========================================================================== */ + +.article { + @include shadow($size: sm); + + transition: box-shadow .2s ease-in-out; + + &:hover { + @include shadow($size: lg); + } + + &--featured { + position: relative; + + min-height: 625px; + + @media (min-width: $break-md) { + display: flex; + justify-content: flex-end; + } + } +} + +.article__author { + display: flex; + align-items: center; +} + +.article__image { + position: relative; + + min-height: 250px; + @supports (object-fit: cover) { + min-height: auto; + } + + overflow: hidden; + + img { + @include snip-object-fit($x: center); + } + + .article--featured & { + @media (min-width: $break-md) { + position: absolute; + top: 0; + left: 0; + z-index: $z-base; + + width: 100%; + height: 100%; + } + } +} + +.article__content { + padding: $spacing-mobile-xs; + + @media (min-width: $break-md) { + padding: $spacing-desktop-xs; + } + + .article--featured & { + position: relative; + z-index: $z-base + 1; + + @media (min-width: $break-md) { + display: flex; + flex-direction: column; + justify-content: flex-end; + width: 100%; + max-width: 500px; + padding: $spacing-desktop-md; + + background: rgba($color-greyscale-white, .8); + } + } +} + +.article__label { + position: absolute; + bottom: 0; + left: 0; +} + +.article__title { + margin: $spacing-mobile-sm 0 $spacing-mobile-xs 0; + + @media (min-width: $break-md) { + margin: $spacing-desktop-sm 0 $spacing-desktop-xs 0; + } + + .article--featured & { + margin-top: 0; + + @media (min-width: $break-md) { + font-size: 35px; + } + } +} + +.article__author__img { + margin-right: 8px; + + .article--featured & { + @media (min-width: $break-md) { + width: 40px; + height: 40px; + } + } +} + +.article__author__name, +.article__date { + color: $color-greyscale-grey; + + font-family: $font-family-primary; + font-weight: $font-weight-light; + font-size: 15px; +} + +.article__text { + margin-bottom: 10px; + + .article--featured & { + line-height: 1.6; + font-family: $font-family-secondary; + font-weight: $font-weight-light; + } +} + +.article__read-more-wrapper { + margin-bottom: 0; +} + +/** + * @section Articles + * @sectionof Molecules + */ + +/** + * @doc docs/default.md + * @section Default + * @sectionof Molecules.Articles + */ + +/** + * @doc docs/featured.md + * @section Featured + * @sectionof Molecules.Articles + */ diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/articles/docs/default.md b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/articles/docs/default.md new file mode 100644 index 0000000000..166d9d7e3a --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/articles/docs/default.md @@ -0,0 +1,38 @@ +Description: +
    +
    +Acceptable use: + +```html +@example +
    +
    + + Categorie +
    +
    +

    Closing main reactor

    +
    +
    + +
    + +
    C3PO
    +
    +

    + Did you hear that? They've shut down the main reactor. We'll be destroyed for sure. This is madness! We're doomed! There'll be no escape for the Princess this time. What's that? Artoo! Artoo-Detoo, where are you? At last! Where have you been? They're heading in this direction. What are we going to do? We'll be sent to the spice mine of Kessel or smashed into who knows what! Wait a minute, where are you going? +

    + +

    + + Read this story + + +

    +
    +
    +``` \ No newline at end of file diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/articles/docs/featured.md b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/articles/docs/featured.md new file mode 100644 index 0000000000..b3e17bdebb --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/articles/docs/featured.md @@ -0,0 +1,38 @@ +Description: +
    +
    +Acceptable use: + +```html +@example +
    +
    + + Categorie +
    +
    +

    Closing main reactor

    +
    +
    + +
    + +
    C3PO
    +
    +

    + Did you hear that? They've shut down the main reactor. We'll be destroyed for sure. This is madness! We're doomed! There'll be no escape for the Princess this time. What's that? Artoo! Artoo-Detoo, where are you? At last! Where have you been? They're heading in this direction. What are we going to do? We'll be sent to the spice mine of Kessel or smashed into who knows what! Wait a minute, where are you going? +

    + +

    + + Read this story + + +

    +
    +
    +``` \ No newline at end of file diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/audio-player/_audio-player.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/audio-player/_audio-player.scss new file mode 100644 index 0000000000..5d83483f29 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/audio-player/_audio-player.scss @@ -0,0 +1,111 @@ +/* ========================================================================== + molecules: Audio player + ========================================================================== */ + +.audio-player { + position: relative; + + display: flex; + align-items: center; + width: 100%; + max-width: 530px; +} + +.audio-player__source { + display: none; +} + +.audio-player__toggle-play { + flex: 0 0 auto; + + .audio-player__toggle-play__pause { + display: none; + } + + .audio-player__toggle-play__play { + display: block; + } + + .audio-player--playing & { + .audio-player__toggle-play__pause { + display: block; + } + + .audio-player__toggle-play__play { + display: none; + } + } +} + +.audio-player__data { + flex: 1 1 auto; + + padding: 0 3px 0 $spacing-mobile-sm; + + @media (min-width: $break-md) { + padding: 0 $spacing-mobile-sm 0 $spacing-desktop-sm; + } +} + +.audio-player__progress[value] { + display: block; + width: 100%; + height: 6px; + margin-top: $spacing-mobile-xs; + + /* Reset the default appearance */ + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + + border: none; + + color: $color-primary; + + cursor: ew-resize; + + &::-webkit-progress-bar { + background: $color-greyscale-light; + } + + &::-webkit-progress-value { + background: $color-primary; + } + + &::-moz-progress-bar { + background: $color-primary; + } +} + +.audio-player__playback { + display: flex; + justify-content: space-between; + margin-top: $spacing-mobile-sm; + + font-family: $font-family-primary; + font-size: 12px; + font-weight: $font-weight-normal; + color: $color-greyscale-grey; +} + +.audio-player__restart { + flex: 0 0 auto; + padding: 0; + + background: none; + + border: none; + + svg { + width: 25px; + height: 25px; + + fill: $color-greyscale-grey; + } +} + +/** + * @doc docs/audio-player.md + * @section Audio player + * @sectionof Molecules + */ diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/audio-player/docs/audio-player.md b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/audio-player/docs/audio-player.md new file mode 100644 index 0000000000..3a8fdac058 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/audio-player/docs/audio-player.md @@ -0,0 +1,29 @@ +Description: +
    +
    +Acceptable use: + +```html +@example +
    + + + +
    +
    Title audioitem
    +
    + +
    + + +
    +
    +
    + +
    +``` diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/banner/_banner.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/banner/_banner.scss new file mode 100644 index 0000000000..cdf4d11d0c --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/banner/_banner.scss @@ -0,0 +1,78 @@ +/* ========================================================================== + Hero + ========================================================================== */ + +.banner { + position: relative; + + display: flex; + align-items: center; + justify-content: center; + + width: 100%; + min-height: 400px; + overflow: hidden; + + text-align: center; +} + +.banner__content { + position: relative; + z-index: $z-middle; + + width: 100%; + max-width: $break-md; + padding: $spacing-mobile-md; + margin: 0 auto; + + @media (min-width: $break-sm) { + padding: $spacing-mobile-lg; + } +} + +.banner__text { + margin: 0 0 $spacing-mobile-xl; + + color: $color-greyscale-white; + + @media (min-width: $break-sm) { + margin: 0 0 $spacing-mobile-sm; + } +} + +.banner__bg { + position: absolute; + top: 0; + left: 0; + z-index: $z-base; + + width: 100%; + height: 100%; + + overflow: hidden; + + &:after { + content: ''; + + position: absolute; + top: 0; + left: 0; + z-index: $z-base + 1; + + display: block; + width: 100%; + height: 100%; + + background: linear-gradient(to bottom, rgba($color-greyscale-black, .25), transparent); + } +} + +.banner__bg__img { + @include snip-object-fit($x: center); +} + +/** + * @doc docs/banner.md + * @section Banner + * @sectionof Molecules + */ diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/banner/docs/banner.md b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/banner/docs/banner.md new file mode 100644 index 0000000000..fbb1b468ca --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/banner/docs/banner.md @@ -0,0 +1,44 @@ +Description: +
    +
    +Acceptable use: + +```html +@example + +``` + +```html +@code + +``` diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/breadcrumbs/_breadcrumbs.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/breadcrumbs/_breadcrumbs.scss new file mode 100644 index 0000000000..9144624ca6 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/breadcrumbs/_breadcrumbs.scss @@ -0,0 +1,52 @@ +/* ========================================================================== + Breadcrumbs + ========================================================================== */ + +.breadcrumbs { + display: block; + margin: 0; +} + +.breadcrumbs__item { + display: inline-block; + padding-right: 5px; + + color: $color-text; + text-decoration: none; + font-size: $font-size-mobile; + font-family: $font-family-primary; + + + .breadcrumbs__item { + &:before { + content: '/'; + + display: inline-block; + margin-right: 5px; + } + } + + @media (min-width: $break-sm) { + font-size: $font-size-desktop; + } +} + +.breadcrumbs__item__icon { + display: inline-block; + + width: 12px; + height: 12px; + margin-right: 5px; + + fill: $color-text; + + @media (min-width: $break-sm) { + width: 16px; + height: 16px; + } +} + +/** + * @doc docs/breadcrumbs.md + * @section Breadcrumbs + * @sectionof Molecules + */ diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/breadcrumbs/docs/breadcrumbs.md b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/breadcrumbs/docs/breadcrumbs.md new file mode 100644 index 0000000000..b25c13ef36 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/breadcrumbs/docs/breadcrumbs.md @@ -0,0 +1,19 @@ +Description: +
    +
    +Acceptable use: + +```html +@example + +``` \ No newline at end of file diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/content-box/author.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/content-box/author.scss new file mode 100644 index 0000000000..f41fa3aa22 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/content-box/author.scss @@ -0,0 +1,27 @@ +/* ========================================================================== + Author + ========================================================================== */ + +.author__img { + flex-shrink: 0; + margin-right: $spacing-mobile-xs; +} + +.author__title { + display: inline-block; + padding: 3px 8px; + + background-color: $color-primary; + + color: $color-greyscale-white; +} + +.author__body { + margin-top: $spacing-mobile-xs; +} + +/** + * @doc docs/author.md + * @section Author content box + * @sectionof Molecules + */ diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/content-box/docs/author.md b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/content-box/docs/author.md new file mode 100644 index 0000000000..23260e6225 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/content-box/docs/author.md @@ -0,0 +1,21 @@ +Description: +
    +
    +Acceptable use: + +```html +@example +
    +
    + +
    +
    +
    + About the author +
    +

    + Bolero-marktenspecialist Tom Simonts volgt elke dag de beurs van dichtbij op wat er reilt en zeilt op de financiële markten. KBC Senior Economist Koen De Leus geeft elke dag zijn visie op belangrijk macro-economische cijfers. Ontdek zijn economische overpeinzingen en ongezouten mening over de dollar, de euro, de eurozone, de VS,...  Guy Sips is onze small en mid caps-specialist in een waaier aan sectoren.Hij volgt als analist de Belgische small en mid cap-bedrijven op. +

    +
    +
    +``` diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/content-box/docs/highlight-box.md b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/content-box/docs/highlight-box.md new file mode 100644 index 0000000000..15af99d9dd --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/content-box/docs/highlight-box.md @@ -0,0 +1,19 @@ +Description: +
    +
    +Acceptable use: + +```html +@example +
    +

    + An highlight box +

    +

    + It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. +

    +

    + Text link +

    +
    +``` diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/content-box/docs/quote.md b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/content-box/docs/quote.md new file mode 100644 index 0000000000..a913849655 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/content-box/docs/quote.md @@ -0,0 +1,16 @@ +Description: +
    +
    +Acceptable use: + +```html +@example +
    +

    + Lorem ipsum dolores est nunqum tipidum. Lorem Ipsum passages, and more recently with desktop publishing. +

    +

    + Lucy Licorice, Head of design +

    +
    +``` diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/content-box/highlight-box.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/content-box/highlight-box.scss new file mode 100644 index 0000000000..dd5495bb98 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/content-box/highlight-box.scss @@ -0,0 +1,19 @@ +/* ========================================================================== + Highlight-box + ========================================================================== */ + +.highlight-box { + padding: $spacing-mobile-xs; + + background-color: $color-greyscale-dark; +} + +.highlight-box__body { + margin-top: $spacing-mobile-xs; +} + +/** + * @doc docs/highlight-box.md + * @section Highlight content box + * @sectionof Molecules + */ diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/content-box/quote.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/content-box/quote.scss new file mode 100644 index 0000000000..4a76e1de49 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/content-box/quote.scss @@ -0,0 +1,34 @@ +/* ========================================================================== + Quote + ========================================================================== */ + +.quote { + padding: $spacing-mobile-xs; +} + +.quote__title { + padding-left: 30px; + + color: $color-greyscale-dark; + + &:before { + content: '"'; + + position: absolute; + + transform: translateX(-2rem) translateY(1rem); + + font-size: 4rem; + line-height: 1rem; + } +} + +.quote__body { + margin-top: $spacing-mobile-xs; +} + +/** + * @doc docs/quote.md + * @section Quote content box + * @sectionof Molecules + */ diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/download/_download.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/download/_download.scss new file mode 100644 index 0000000000..5a46c0e682 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/download/_download.scss @@ -0,0 +1,72 @@ +/* ========================================================================== + Download + ========================================================================== */ + +.download { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + width: 100%; + max-width: 790px; + + padding: $spacing-mobile-xs; + + background-color: $color-greyscale-lightest; + + @media (min-width: $break-sm) { + flex-direction: row; + } +} + +.download__icon { + display: none; + + width: 40px; + height: 40px; + margin-right: $spacing-mobile-xs; + + fill: $color-primary; + + @media (min-width: $break-xs) { + display: block; + } + + @media (min-width: $break-sm) { + width: 60px; + height: 60px; + } +} + +.download__info { + display: flex; + margin-bottom: $spacing-mobile-xs; + + @media (min-width: $break-sm) { + margin-bottom: 0; + } +} + +.download__info__copy { + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.download__info__name { + margin: 0; + + font-size: $font-size-mobile-small; + font-family: font-family(null, primary); + font-weight: $font-weight-normal; + + @media (min-width: $break-sm) { + font-size: $font-size-desktop-small; + } +} + +/** + * @doc docs/download.md + * @section Download + * @sectionof Molecules + */ diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/download/docs/download.md b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/download/docs/download.md new file mode 100644 index 0000000000..4a5985a32d --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/download/docs/download.md @@ -0,0 +1,18 @@ +Description: +
    +
    +Acceptable use: + +```html +@example +
    +
    + +
    +
    Title of the download
    +

    big name of the document.pdf (356 kb)

    +
    +
    + +
    +``` diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/editorial/_editorial.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/editorial/_editorial.scss new file mode 100644 index 0000000000..d4438a09a9 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/editorial/_editorial.scss @@ -0,0 +1,25 @@ +/* ========================================================================== + Editorial + ========================================================================== */ + +.editorial { + width: 100%; + max-width: 1000px; +} + +.editorial__media { + max-width: 400px; +} + +.editorial__body { +} + +.editorial__cta { + margin-top: $spacing-mobile-xs; +} + +/** + * @doc docs/editorial.md + * @section Editorial + * @sectionof Molecules + */ diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/editorial/docs/editorial.md b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/editorial/docs/editorial.md new file mode 100644 index 0000000000..b79a9f35b5 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/editorial/docs/editorial.md @@ -0,0 +1,37 @@ +Description: +
    +
    +Acceptable use: + +```html +@example +
    +
    + image +
    +
    +

    + Lorem title +

    +

    + According to us blisters are a very common thing and we come across them very often in our daily lives. It is a very common occurrence like cold or fever depending upon your lifestyle. The common forms of blisters are the ones wherein the blister is raised and filled with a liquid. +

    + +
    +
    + +
    +
    + image +
    +
    +

    + Lorem title +

    +

    + According to us blisters are a very common thing and we come across them very often in our daily lives. It is a very common occurrence like cold or fever depending upon your lifestyle. The common forms of blisters are the ones wherein the blister is raised and filled with a liquid. +

    + +
    +
    +``` \ No newline at end of file diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/hero/_hero.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/hero/_hero.scss new file mode 100644 index 0000000000..3c3291e04c --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/hero/_hero.scss @@ -0,0 +1,98 @@ +/* ========================================================================== + Hero + ========================================================================== */ + +.hero { + position: relative; + + display: flex; + align-items: center; + justify-content: center; + + width: 100%; + min-height: 400px; + overflow: hidden; + + text-align: center; +} + +.hero__content { + position: relative; + z-index: $z-middle; + + width: 100%; + max-width: $break-md; + padding: $spacing-mobile-md; + margin: 0 auto; + + @media (min-width: $break-sm) { + padding: $spacing-mobile-lg; + } +} + +.hero__title, +.hero__sub-title { + color: $color-greyscale-white; +} + +.hero__title { + margin: 0; + + font-weight: $font-weight-bold; + font-size: 40px; + line-height: 1.2; + + @media (min-width: $break-sm) { + font-size: 64px; + } +} + +.hero__sub-title { + margin: 0 0 $spacing-mobile-xl; + + font-size: 16px; + line-height: 1.2; + + @media (min-width: $break-sm) { + margin: 0 0 $spacing-mobile-sm; + + font-size: 22px; + } +} + +.hero__bg { + position: absolute; + top: 0; + left: 0; + z-index: $z-base; + + width: 100%; + height: 100%; + + overflow: hidden; + + &:after { + content: ''; + + position: absolute; + top: 0; + left: 0; + z-index: $z-base + 1; + + display: block; + width: 100%; + height: 100%; + + background: linear-gradient(to bottom, rgba($color-greyscale-black, .25), transparent); + } +} + +.hero__bg__img { + @include snip-object-fit($x: center); +} + +/** + * @doc docs/hero.md + * @section Hero + * @sectionof Molecules + */ diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/hero/docs/hero.md b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/hero/docs/hero.md new file mode 100644 index 0000000000..84db2e886f --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/hero/docs/hero.md @@ -0,0 +1,44 @@ +Description: +
    +
    +Acceptable use: + +```html +@example +
    +
    +

    + A family-owned business +

    +

    + We take pride in the quality of the products we sell. +

    + +
    +
    + +
    +
    +``` + +```html +@code +
    +
    +

    + A family-owned business +

    +

    + We take pride in the quality of the products we sell. +

    + +
    +
    + +
    +
    +``` diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/modals/_modals.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/modals/_modals.scss new file mode 100644 index 0000000000..563b25b89c --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/modals/_modals.scss @@ -0,0 +1,33 @@ +/* ========================================================================== + Modals + ========================================================================== */ + +.modal { + position: fixed; + top: 0; + left: 0; + z-index: $z-hide; + + width: 100vw; + height: 100vh; + padding: $spacing-desktop-md; + + opacity: 0; + + background: $color-greyscale-white; + + transition: opacity .3s ease-in-out; + + &--active { + z-index: $z-show; + + opacity: 1; + } +} + + +/** + * @doc docs/modals.md + * @section Modals + * @sectionof Molecules + */ diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/modals/docs/modals.md b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/modals/docs/modals.md new file mode 100644 index 0000000000..30df368f6e --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/modals/docs/modals.md @@ -0,0 +1,17 @@ +Description: +
    +
    +Acceptable use: + +```html +@example + + +``` diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/pagination/_pagination.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/pagination/_pagination.scss new file mode 100644 index 0000000000..2536095169 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/pagination/_pagination.scss @@ -0,0 +1,51 @@ +/* ========================================================================== + Pagination + ========================================================================== */ + +.pagination { + display: flex; + justify-content: center; + margin: $spacing-mobile-lg 0 $spacing-mobile-lg 0; + + @media (min-width: $break-md) { + margin: $spacing-desktop-lg 0 $spacing-desktop-xxl 0; + } +} + +.pagination__list { + display: flex; + align-items: center; +} + +.pagination__item { + margin: 0 $spacing-mobile-xs; + + &--active { + .pagination__item__link { + color: $color-primary; + font-weight: $font-weight-bold; + } + } + + &--disabled { + .pagination__item__link { + opacity: .5; + } + } +} + +.pagination__item__link { + padding: $spacing-mobile-xs; + + color: $color-greyscale-black; + text-decoration: none; + font-family: $font-family-secondary; + font-size: 13px; + font-weight: $font-weight-normal; +} + +/** + * @doc docs/pagination.md + * @section Pagination + * @sectionof Molecules + */ diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/pagination/docs/pagination.md b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/pagination/docs/pagination.md new file mode 100644 index 0000000000..30ecdcd982 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/pagination/docs/pagination.md @@ -0,0 +1,38 @@ +Description: +
    +
    +Acceptable use: + +```html +@example + + +``` diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/social-share/_social-share.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/social-share/_social-share.scss new file mode 100644 index 0000000000..591168d492 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/social-share/_social-share.scss @@ -0,0 +1,68 @@ +/* ========================================================================== + Social share + ========================================================================== */ + +.social-share { + width: 100%; + + @media (min-width: $break-sm) { + display: flex; + justify-content: flex-end; + align-items: center; + } +} + +.social-share__title { + margin: 0 0 10px; + + text-align: center; + font-family: $font-family-primary; + font-weight: $font-weight-medium; + + @media (min-width: $break-sm) { + margin: 0 10px 0 0; + } +} + +.social-share__list { + text-align: center; + + @media (min-width: $break-sm) { + text-align: left; + } + + li { + display: inline-block; + + + li { + margin-left: 5px; + } + } +} + +.social-share__icon { + width: 30px; + height: 30px; + + padding: 5px; + + text-align: center; + + fill: #FFFFFF; + + &--facebook { + background-color: #3B5998; + } + + &--github { + background-color: #BD2C00; + } + + &--linkedin { + background-color: #0077B5; + } + + &--twitter { + background-color: #1DA1F2; + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/social-share/docs/social-share.md b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/social-share/docs/social-share.md new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/tabs/_tabs.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/tabs/_tabs.scss new file mode 100644 index 0000000000..50bfebaa6f --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/tabs/_tabs.scss @@ -0,0 +1,60 @@ +/* ========================================================================== + Tabs + ========================================================================== */ + +$tab-border: 1px solid $color-greyscale-black; +$tab-border-none: 1px solid transparent; +$tab-border-light: 1px solid $color-greyscale-grey; + +.tabs {} + +.tabs__header { + padding: 0 $spacing-mobile-sm; + + @media (min-width: $break-md) { + position: relative; + + display: flex; + } +} + +.tabs__switch { + padding: $spacing-mobile-sm; + + background: $color-greyscale-lightest; + + border: none; + + font-family: $font-family-primary; + font-size: 16px; + color: $color-greyscale-black; + + user-select: none; + cursor: pointer; + + &--active { + background: $color-greyscale-white; + } + + &:focus { + outline: none; + } + + @media (min-width: $break-md) { + flex: 1 1 auto; + } +} + +.tabs__content-holder { + padding-top: $spacing-mobile-lg; + + @media (min-width: $break-md) { + padding-top: $spacing-desktop-lg; + } +} + +/** + * @doc docs/tabs.md + * @section Tabs + * @sectionof Molecules + */ diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/tabs/docs/tabs.md b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/tabs/docs/tabs.md new file mode 100644 index 0000000000..2f205d5c4c --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/tabs/docs/tabs.md @@ -0,0 +1,22 @@ +Description: +
    +
    +Acceptable use: + +```html +@example +
    +
    + + + +
    +
    +
    +

    + content loading.. +

    +
    +
    +
    +``` diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/usps/_usps.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/usps/_usps.scss new file mode 100644 index 0000000000..235a4947bd --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/usps/_usps.scss @@ -0,0 +1,60 @@ +/* ========================================================================== + Usps + ========================================================================== */ + +.usp__container { + padding: $spacing-mobile-sm; + + @media (min-width: $break-md) { + padding: $spacing-mobile-md 0; + } +} + +.usp__main-title { + margin-bottom: $spacing-mobile-sm; + + @media (min-width: $break-md) { + margin-bottom: $spacing-mobile-sm; + } +} + +.usp__usps { + display: flex; + flex-direction: column; + align-items: center; + + @media (min-width: $break-md) { + flex-direction: row; + justify-content: space-evenly; + align-items: flex-start; + } +} + +.usp { + flex: 1; + max-width: 400px; + padding: $spacing-mobile-xs; + + text-align: center; +} + +.usp__image { + display: block; + + img { + display: block; + width: 100%; + max-width: 100px; + margin: 0 auto; + } +} + +.usp__image, +.usp__title, +.usp__content { + margin-bottom: $spacing-mobile-xs; + + @media (min-width: $break-md) { + margin-bottom: $spacing-mobile-xs; + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/video-link/_video-link.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/video-link/_video-link.scss new file mode 100644 index 0000000000..49c60567d5 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/video-link/_video-link.scss @@ -0,0 +1,67 @@ +/* ========================================================================== + Videolink + ========================================================================== */ + +.videolink { + position: relative; + z-index: $z-base; +} + +.videolink__link { + position: relative; + z-index: $z-show; + + display: block; + + opacity: 1; + + transition: all .3s cubic-bezier(0, 0, .58, 1); + + &--hidden { + z-index: $z-hide; + + opacity: 0; + + pointer-events: none; + } +} + +.videolink__image { + position: relative; + z-index: $z-base; + + display: block; + width: 100%; + max-width: none; +} + +.videolink__video-container { + position: absolute; + top: 0; + left: 0; + z-index: $z-middle; + + width: 100%; + height: 100%; + + background: $color-greyscale-light; +} + +.videolink__link__btn-like { + position: absolute; + top: 50%; + left: 50%; + z-index: $z-show + 1; + + transform: translate3d(-50%, -50%, 0); + + .icon-btn__icon { + fill: $color-primary; + } +} + +/** + * @doc docs/video-link.md + * @section Videolink + * @sectionof Molecules + */ diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/video-link/docs/video-link.md b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/video-link/docs/video-link.md new file mode 100644 index 0000000000..a57a968e71 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/03-molecules/video-link/docs/video-link.md @@ -0,0 +1,17 @@ +Description: +
    +
    +Acceptable use: + +```html +@example +
    + + + + + +
    +
    + +``` diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/_all.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/_all.scss new file mode 100644 index 0000000000..028ff42046 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/_all.scss @@ -0,0 +1,17 @@ +/* ========================================================================== + Organisms + + This file is exclusively intended for aggregating helper functions + Never add styles directly to this file + ========================================================================== */ + +@import "image-gallery/image-gallery"; +@import "article-overview/article-overview"; + +@import "pageparts/button/button"; + + +/** +* @section Organisms +* @page Index +*/ diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/article-overview/_article-overview.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/article-overview/_article-overview.scss new file mode 100644 index 0000000000..92c273a3a8 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/article-overview/_article-overview.scss @@ -0,0 +1,45 @@ +/* ========================================================================== + Article overview + ========================================================================== */ + +.article-overview { + @include snip-flex-grid($gutter: 30px, $cols: 3); + + .article--featured { + flex-basis: 100%; + } + + @supports (grid-template-columns: auto) { + @media (min-width: $break-sm) { + display: grid; + grid-gap: 30px; + grid-template-columns: repeat(2, 1fr); + } + + @media (min-width: $break-md) { + grid-template-columns: repeat(3, 1fr); + } + + .article--featured { + display: flex; + + @media (min-width: $break-sm) { + grid-column: 1 / span 2; + } + + @media (min-width: $break-md) { + grid-column: 1 / span 3; + } + } + + .article { + margin: 0; + } + } +} + +/** + * @doc docs/article-overview.md + * @section Article overview + * @sectionof Organisms + */ diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/article-overview/docs/article-overview.md b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/article-overview/docs/article-overview.md new file mode 100644 index 0000000000..d876e747e7 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/article-overview/docs/article-overview.md @@ -0,0 +1,130 @@ +Description: +
    +
    +Acceptable use: + +```html +@example +
    +
    +
    + + Categorie +
    +
    +

    Closing main reactor

    +
    +
    + +
    + +
    C3PO
    +
    +

    + Did you hear that? They've shut down the main reactor. We'll be destroyed for sure. This is madness! We're doomed! There'll be no escape for the Princess this time. What's that? Artoo! Artoo-Detoo, where are you? At last! Where have you been? They're heading in this direction. What are we going to do? We'll be sent to the spice mine of Kessel or smashed into who knows what! Wait a minute, where are you going? +

    + +

    + + Read this story + + +

    +
    +
    +
    +
    + + Categorie +
    +
    +

    Closing main reactor

    +
    +
    + +
    + +
    C3PO
    +
    +

    + Did you hear that? They've shut down the main reactor. We'll be destroyed for sure. This is madness! We're doomed! There'll be no escape for the Princess this time. What's that? Artoo! Artoo-Detoo, where are you? At last! Where have you been? They're heading in this direction. What are we going to do? We'll be sent to the spice mine of Kessel or smashed into who knows what! Wait a minute, where are you going? +

    + +

    + + Read this story + + +

    +
    +
    +
    +
    + + Categorie +
    +
    +

    Closing main reactor

    +
    +
    + +
    + +
    C3PO
    +
    +

    + Did you hear that? They've shut down the main reactor. We'll be destroyed for sure. This is madness! We're doomed! There'll be no escape for the Princess this time. What's that? Artoo! Artoo-Detoo, where are you? At last! Where have you been? They're heading in this direction. What are we going to do? We'll be sent to the spice mine of Kessel or smashed into who knows what! Wait a minute, where are you going? +

    + +

    + + Read this story + + +

    +
    +
    +
    +
    + + Categorie +
    +
    +

    Closing main reactor

    +
    +
    + +
    + +
    C3PO
    +
    +

    + Did you hear that? They've shut down the main reactor. We'll be destroyed for sure. This is madness! We're doomed! There'll be no escape for the Princess this time. What's that? Artoo! Artoo-Detoo, where are you? At last! Where have you been? They're heading in this direction. What are we going to do? We'll be sent to the spice mine of Kessel or smashed into who knows what! Wait a minute, where are you going? +

    + +

    + + Read this story + + +

    +
    +
    +
    +``` \ No newline at end of file diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/cookie-bar/_all.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/cookie-bar/_all.scss new file mode 100644 index 0000000000..506adce9c2 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/cookie-bar/_all.scss @@ -0,0 +1,7 @@ +/* ========================================================================== + Kunstmaan Cookie bar + ========================================================================== */ + +@import "vendor-config"; +@import "vendor/kunstmaan/cookie-bundle/src/Resources/ui/scss/legal"; +@import "cookie-bar"; diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/cookie-bar/_cookie-bar.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/cookie-bar/_cookie-bar.scss new file mode 100644 index 0000000000..a476b80b1f --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/cookie-bar/_cookie-bar.scss @@ -0,0 +1,3 @@ +/* ========================================================================== + Organisms: Kunstmaan cookie bar + ========================================================================== */ diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/cookie-bar/_vendor-config.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/cookie-bar/_vendor-config.scss new file mode 100644 index 0000000000..199a75941b --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/cookie-bar/_vendor-config.scss @@ -0,0 +1,80 @@ +/* ========================================================================== + INTERNAL Variables + + This file is exclusively intended for setting up variables + Never add styles directly to this file + These variables should not be overriden. + Those should go in ./_variables-default.scss + ========================================================================== */ + +/* Screen sizes + ========================================================================== */ +$kmcc_screen-xs: $break-xs; +$kmcc_screen-sm: $break-sm; +$kmcc_screen-md: $break-md; +$kmcc_screen-lg: $break-lg; + +$kmcc_screen-sm-max: $kmcc_screen-md - 1px; +$kmcc_screen-md-max: $kmcc_screen-lg - 1px; + +/* Margins and paddings + ========================================================================== */ +$kmcc_container-padding: $spacing-desktop-xs; +$kmcc_container-padding--md: $spacing-desktop-md; +$kmcc_container-padding--lg: $spacing-desktop-lg; + +/* Widths + ========================================================================== */ +$kmcc_container-width: 1200px; + +/* Colors + ========================================================================== */ + +// Main colors +$kmcc_primary-color: $color-primary; +$kmcc_secondary-color: $color-secondary; + +// Button colors +$kmcc_button-background: $kmcc_secondary-color !default; +$kmcc_button-background--hover: $kmcc_white !default; +$kmcc_button-color: $kmcc_white !default; +$kmcc_button-color--hover: $kmcc_secondary-color !default; +$kmcc_button-border-color--hover: $kmcc_secondary-color !default; + +$kmcc_toggle-button--check: $kmcc_green !default; + +// Heading colors +$kmcc_headings: $kmcc_black !default; + +// Tab colors +$kmcc_tabs: $kmcc_grey--dark !default; + +/* Z-index + ========================================================================== */ +// This is a base value used internally by the Kunstmaan Cookie Consent (KMCC). +// All the internal z-indices will be matched to this one. This way it is easy +// to add the highest z-index of your application, KMCC will basically +1 this value +// so it always ends up on top. +$kmcc-base-z-index: $z-show + 100 !default; + +$kmcc_z-cookie-bar: $kmcc-base-z-index; + +$kmcc_z-modal-backdrop: -1; +$kmcc_z-modal-backdrop--visible: $kmcc-base-z-index; + +$kmcc_z-modal: -1; +$kmcc_z-modal--visible: $kmcc-base-z-index + 1; +$kmcc_z-sticky-footer: $kmcc-base-z-index + 2; +$kmcc_z-sidebar: $kmcc-base-z-index + 3; +$kmcc_z-totop: $kmcc-base-z-index + 4; + +$kmcc_z-notification: $kmcc-base-z-index + 10; + +/* Toggle + ========================================================================== */ +$kmcc-toggle-size: 33px; +$kmcc-toggle-slider-range: 50px; + +/* Fact + ========================================================================== */ +$kmcc-fact__figure-width: 150px; diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/image-gallery/_image-gallery.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/image-gallery/_image-gallery.scss new file mode 100644 index 0000000000..f744380a29 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/image-gallery/_image-gallery.scss @@ -0,0 +1,67 @@ +/* ========================================================================== + Image Gallery + ========================================================================== */ + +.image-gallery { +} + +.image-gallery__title { + margin-top: 0; + + @media (min-width: $break-sm) { + margin-top: 0; + } +} + +.image-gallery__items { + margin: calc(-#{$spacing-mobile-xs} / 2); + + @media (min-width: $break-sm) { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + } +} + +.image-gallery__item { + display: block; + padding: calc(#{$spacing-mobile-xs} / 2); + + @media (min-width: $break-sm) { + flex: 1 1 50%; + } + + @media (min-width: $break-md) { + flex: 1 1 33%; + + &:hover { + .image-gallery__image img { + transform: scale3d(1.2, 1.2, 1); + } + } + } +} + +.image-gallery__image { + width: 300px; + height: 300px; + + @supports (object-fit: cover) { + width: 100%; + height: 100%; + } + overflow: hidden; + + img { + @include snip-object-fit($x: center); + + transition: transform .15s ease-in-out; + } +} + + +/** + * @doc docs/image-gallery.md + * @section Image gallery + * @sectionof Organisms + */ diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/image-gallery/docs/image-gallery.md b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/image-gallery/docs/image-gallery.md new file mode 100644 index 0000000000..cf14121c44 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/image-gallery/docs/image-gallery.md @@ -0,0 +1,53 @@ +Description: +
    +
    +Acceptable use: + +```html +@example +
    +
    + +
    + +
    + Prepare to target the main generator +
    +
    +     + +
    + +
    + Prepare to target the main generator +
    +
    +     + +
    + +
    + Prepare to target the main generator +
    +
    +     + +
    + +
    + Prepare to target the main generator +
    +
    +     + +
    + +
    + Prepare to target the main generator +
    +
    +     +
    +
    + +``` \ No newline at end of file diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/pageparts/banner/.gitkeep b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/pageparts/banner/.gitkeep new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/pageparts/button/.gitkeep b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/pageparts/button/.gitkeep new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/pageparts/button/_button.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/pageparts/button/_button.scss new file mode 100644 index 0000000000..15748a2d2e --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/pageparts/button/_button.scss @@ -0,0 +1,26 @@ +/* ========================================================================== + Button pp + ========================================================================== */ + +.btn-pp {} + +.btn-pp__btn-wrapper { + &--block { + .btn-pp__btn { + display: block; + max-width: none; + } + } + + &--left { + text-align: left; + } + + &--center { + text-align: center; + } + + &--right { + text-align: right; + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/pageparts/header/.gitkeep b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/pageparts/header/.gitkeep new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/pageparts/introtext/.gitkeep b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/pageparts/introtext/.gitkeep new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/pageparts/line/.gitkeep b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/pageparts/line/.gitkeep new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/pageparts/mediawithcontent/.gitkeep b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/pageparts/mediawithcontent/.gitkeep new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/pageparts/mediawithparagraph/.gitkeep b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/pageparts/mediawithparagraph/.gitkeep new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/pageparts/rawhtml/.gitkeep b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/pageparts/rawhtml/.gitkeep new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/pageparts/share/.gitkeep b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/pageparts/share/.gitkeep new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/pageparts/spacer/.gitkeep b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/pageparts/spacer/.gitkeep new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/pageparts/text/.gitkeep b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/pageparts/text/.gitkeep new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/pageparts/toc/.gitkeep b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/pageparts/toc/.gitkeep new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/pageparts/usps/.gitkeep b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/04-organisms/pageparts/usps/.gitkeep new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/admin-style.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/admin-style.scss new file mode 100644 index 0000000000..d388830dea --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/admin-style.scss @@ -0,0 +1,17 @@ +@charset "UTF-8"; + +/* ========================================================================== + Extra Stylesheet for admin + ========================================================================== */ + +/* Use these styling only in the pagepart previews + ========================================================================== */ +.page-template__region .admin-region, +.pp__view .pp__view__block:first-child { + @import "00-bootstrap/all"; + @import '01-quarks/all'; + + @import "02-atoms/all"; + @import "03-molecules/all"; + @import "04-organisms/all"; +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/style.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/style.scss new file mode 100755 index 0000000000..334b6b346a --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/scss/style.scss @@ -0,0 +1,14 @@ +@charset "UTF-8"; + +/* ========================================================================== + Stylesheet for all browsers + + Never add styles directly to this file - set up imports + Style guide: https://github.com/necolas/idiomatic-css + ========================================================================== */ + +@import "00-bootstrap/all"; +@import "01-quarks/all"; +@import "02-atoms/all"; +@import "03-molecules/all"; +@import "04-organisms/all"; diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/assets/audio/Jolene at 33rpm.mp3 b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/assets/audio/Jolene at 33rpm.mp3 new file mode 100644 index 0000000000..9d6dcc995b Binary files /dev/null and b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/assets/audio/Jolene at 33rpm.mp3 differ diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/html/tab1.html b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/html/tab1.html new file mode 100644 index 0000000000..700f9044bf --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/html/tab1.html @@ -0,0 +1,3 @@ +
    +

    tab 1 content

    +
    \ No newline at end of file diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/html/tab2.html b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/html/tab2.html new file mode 100644 index 0000000000..83065613a5 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/html/tab2.html @@ -0,0 +1,3 @@ +
    +

    tab 2 content

    +
    \ No newline at end of file diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/html/tab3.html b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/html/tab3.html new file mode 100644 index 0000000000..f9afc4218e --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/html/tab3.html @@ -0,0 +1,3 @@ +
    +

    tab 3 content

    +
    \ No newline at end of file diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/html/tab4.html b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/html/tab4.html new file mode 100644 index 0000000000..7e2fe61b43 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/html/tab4.html @@ -0,0 +1,3 @@ +
    +

    tab 4 content

    +
    \ No newline at end of file diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/js/MobileNav.js b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/js/MobileNav.js new file mode 100755 index 0000000000..cfedaa58eb --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/js/MobileNav.js @@ -0,0 +1,58 @@ +import {TweenLite, Power4} from 'gsap/TweenLite'; +import 'gsap/ScrollToPlugin'; + +export default class MobileNav { + + constructor() { + const CLASSES = { + button: 'js-mobile-nav-btn', + mobileSubnav: 'js-mobile-subnav', + mobileNav: 'js-mobile-nav', + activeClass: 'mobile-nav-open' + }; + const scrollOffset = 80; + const toTopOffset = 150; + + const button = document.querySelectorAll(`.${CLASSES.button}`)[0]; + const nav = document.querySelectorAll(`.${CLASSES.mobileNav}`)[0]; + const subnav = document.querySelectorAll(`.${CLASSES.mobileSubnav}`)[0]; + + this.CLASSES = CLASSES; + this.scrollOffset = scrollOffset; + this.toTopOffset = toTopOffset; + this.button = button; + this.nav = nav; + this.subnav = subnav; + + button && this._initMobileNav(); + subnav && this._initMobileSubnav(); + } + + _initMobileNav() { + this.button.addEventListener('click', () => { + if (this.button.classList.contains(this.CLASSES.activeClass)) { + this.nav.classList.remove(this.CLASSES.activeClass); + this.button.classList.remove(this.CLASSES.activeClass); + } else { + this.nav.classList.add(this.CLASSES.activeClass); + this.button.classList.add(this.CLASSES.activeClass); + } + }); + }; + + _initMobileSubnav() { + this.subnav.addEventListener('change', (e) => { + const target = (e.currentTarget).value; + + if (target) { + TweenLite.to(window, .3, { + scrollTo: { + y: `${target}`, + offsetY: this.scrollOffset + }, + ease: Power4.easeOut + }); + } + }, false); + }; +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/js/Scrollspy.js b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/js/Scrollspy.js new file mode 100755 index 0000000000..71289c0831 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/js/Scrollspy.js @@ -0,0 +1,12 @@ +import 'bootstrap.native/dist/polyfill'; +import bsn from 'bootstrap.native'; + +export default class Scrollspy { + + constructor() { + // Add scrollspy to subnav + new bsn.ScrollSpy(document.getElementById('spy-content'), { + target: document.getElementById('subnav') + }); + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/js/Toggle.js b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/js/Toggle.js new file mode 100755 index 0000000000..1018d355e2 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/js/Toggle.js @@ -0,0 +1,73 @@ +import TweenLite from 'gsap/TweenLite'; +import 'gsap/CSSPlugin'; + +export default class Toggle { + constructor() { + const CLASSES = { + trigger: 'js-sg-toggle-trigger', + content: 'js-sg-toggle-content', + }; + const defaultDuration = 0.3; // in seconds + + Array.prototype.forEach.call(document.querySelectorAll(`.${CLASSES.trigger}`), (el) => { + const target = document.querySelectorAll(el.getAttribute('data-target'))[0]; + + this.addMultiEventistener(el, 'click touchstart mousedown', (e) => { + e.preventDefault(); + }); + + this.addMultiEventistener(el, 'touchend mouseup', () => { + const targetContent = target.querySelectorAll(`.${CLASSES.content}`)[0]; + const currentTargetIsOpen = el.getAttribute('aria-expanded') === 'true'; + + currentTargetIsOpen ? this.hideContent(el, target, targetContent, false) : this.showContent(el, target, targetContent, false); + }); + + // Check if hide/show on load + if (target) { + const targetContent = target.querySelectorAll(`.${CLASSES.content}`)[0]; + + if (targetContent && el.getAttribute('aria-expanded') === 'true') { + this.showContent(el, target, targetContent); + } else if (targetContent) { + this.hideContent(el, target, targetContent); + } + } + }); + + this.defaultDuration = defaultDuration; + } + + hideContent(trigger, target, targetContent, smoothAnimation) { + trigger.setAttribute('aria-expanded', false); + + if (smoothAnimation) { + TweenLite.to(targetContent, this.defaultDuration, { + height: 0, + }); + } else { + targetContent.style.height = 0; + } + } + + showContent(trigger, target, targetContent, smoothAnimation) { + trigger.setAttribute('aria-expanded', true); + + if (smoothAnimation) { + TweenLite.to(targetContent, this.defaultDuration, { + height: 'auto', + }); + } else { + targetContent.style.height = 'auto'; + } + } + + // Add multiple listeners + addMultiEventistener(el, s, fn) { + const evts = s.split(' '); + + for (let i = 0, iLen = evts.length; i < iLen; i += 1) { + el.addEventListener(evts[i], fn, false); + } + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/js/styleguide.js b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/js/styleguide.js new file mode 100755 index 0000000000..2a21bb8051 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/js/styleguide.js @@ -0,0 +1,15 @@ +import 'prismjs'; +import 'prismjs/components/prism-markup'; +import Clipboard from 'clipboard'; + +import Scrollspy from './Scrollspy'; +import MobileNav from './MobileNav'; +import Toggle from './Toggle'; + +document.addEventListener('DOMContentLoaded', () => { + new Clipboard('.js-clipboard-code'); + + new Scrollspy(); + new MobileNav(); + new Toggle(); +}); diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/_components.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/_components.scss new file mode 100755 index 0000000000..d5928f4ce7 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/_components.scss @@ -0,0 +1,41 @@ +/* ========================================================================== + Components + + Never add styles directly to this file - set up imports + ========================================================================== */ + + +/* Blocks + ========================================================================== */ +@import "blocks/code"; +@import "blocks/img"; +@import "blocks/links"; + + +/* Structures + ========================================================================== */ +@import "structures/cards"; +@import "structures/colors"; +@import "structures/icons"; +@import "structures/sections"; +@import "structures/code-snippet"; +@import "structures/spacings"; +@import "structures/fonts"; +@import "structures/font-sizes"; +@import "structures/font-weights"; +@import "structures/shadows"; + + +/* Header + ========================================================================== */ +@import "header/main-header"; + + +/* Content + ========================================================================== */ +@import "content/main-content"; + + +/* Vendors + ========================================================================== */ +@import "vendors/bootstrap-components/grid"; diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/blocks/_code.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/blocks/_code.scss new file mode 100755 index 0000000000..dc46be0c62 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/blocks/_code.scss @@ -0,0 +1,30 @@ +/* ========================================================================== + Blocks - Code + ========================================================================== */ + +/* General + ========================================================================== */ +.sg-styleguide { + + code:not(.kds-code) { + padding: 1px 3px; + + background: $grey--light; + + border: 1px solid $grey; + border-radius: 3px; + + color: $red; + font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', 'monospace'; + font-size: 12px; + + white-space: nowrap; + } + + pre { + background: $primary-color--dark; + + code:not(.kds-code) { + } + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/blocks/_img.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/blocks/_img.scss new file mode 100755 index 0000000000..3a10c7c59d --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/blocks/_img.scss @@ -0,0 +1,19 @@ +/* ========================================================================== + Images + ========================================================================== */ + +/* Shared + ========================================================================== */ +img { + max-width: 100%; + height: auto; + max-height: 100%; +} + +figure { + margin: 0; + + img { + display: block; + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/blocks/_links.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/blocks/_links.scss new file mode 100755 index 0000000000..aa1caf3975 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/blocks/_links.scss @@ -0,0 +1,17 @@ +/* ========================================================================== + Links + ========================================================================== */ + +/* Shared + ========================================================================== */ +a { + transition: color .3s ease; + + color: $link-color; + text-decoration: underline; + + &:hover { + text-decoration: none; + color: $link-color--hover; + } +} \ No newline at end of file diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/content/_main-content.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/content/_main-content.scss new file mode 100755 index 0000000000..1c4786fb61 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/content/_main-content.scss @@ -0,0 +1,16 @@ +/* ========================================================================== + Main content + ========================================================================== */ + +/* General + ========================================================================== */ +.sg-content { + position: relative; + + padding: 100px 20px 50px; + overflow: hidden; + + @media (min-width: $screen-md-min) { + padding: 20px 50px 20px 410px; + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/header/_main-header.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/header/_main-header.scss new file mode 100755 index 0000000000..9e39c5d835 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/header/_main-header.scss @@ -0,0 +1,385 @@ +/* ========================================================================== + Header - Main header + ========================================================================== */ + +/* General + ========================================================================== */ +.sg-header { + position: fixed; + z-index: 1000; + + display: block; + width: 100%; + padding: 0 20px; + margin: 0 0 50px; + + background: $white; + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .12), 0 2px 10px 0 rgba(0, 0, 0, .08); + + border-bottom: 1px solid $grey; + + font-family: $primary-font; + + @media (min-width: $screen-md-min) { + position: fixed; + top: 0; + bottom: 0; + left: 0; + + display: flex; + flex-direction: column; + width: 360px; + height: 100%; + padding: 0; + margin: 0; + overflow-y: auto; + } +} + + +/* Brand + ========================================================================== */ +.sg-header__brand { + position: relative; + z-index: 1; + + display: inline-block; + width: 180px; + margin-top: 8px; + + text-decoration: none; + + a { + display: inline-block; + padding: 10px 0; + + span { + display: none; + } + + &:hover { + text-decoration: none; + } + } + + @media (min-width: $screen-md-min) { + display: block; + width: 100%; + + a { + display: block; + padding: 20px 50px; + + text-align: left; + } + } +} + +.sg-header__brand__logo { + display: inline-block; + width: 100%; +} + +/* Navigation + ========================================================================== */ +.sg-header__nav { + max-height: 0; + overflow: auto; + + transition: max-height .3s ease; + + &.mobile-nav-open { + max-height: 500px; // big enough + + border-top: 1px solid $grey--light; + } + + @media (min-width: $screen-md-min) { + max-height: none; + + border-top: none; + } +} + +/* Mobile toggle button + ========================================================================== */ +.sg-header__nav__btn { + float: right; + margin: 10px 0 0; + padding: 1.25em 1em; + + box-shadow: none; + border: none; + appearance: none; + background: none; + + font-size: 12px; + line-height: 1; + color: $grey; + + transition: color .3s ease; + + &:focus, &:active { + color: $grey; + outline: none; + } + + &:hover { + color: $white; + } + + @media (min-width: $screen-md-min) { + display: none; + } +} + +/* Hamburger + ========================================================================== */ +.sg-header__nav__btn__icon { + position: relative; + + width: 28px; + height: 20px; + padding: 0; + margin: 0; + transform: rotate(0deg); + + box-shadow: none; + + line-height: 1; + + transition: .5s ease-in-out; + cursor: pointer; + + span { + position: absolute; + + display: block; + height: 2px; + width: 50%; + + background: $black; + + opacity: 1; + transform: rotate(0deg); + transition: .25s ease-in-out; + + &:nth-child(even) { + left: 50%; + + border-radius: 0 2px 2px 0; + } + + &:nth-child(odd) { + left: 0; + + border-radius: 2px 0 0 2px; + } + + &:nth-child(1), + &:nth-child(2) { + top: 0; + } + + &:nth-child(3), + &:nth-child(4) { + top: 8px; + } + + &:nth-child(5), + &:nth-child(6) { + top: 16px; + } + } + + .mobile-nav-open & { + + span { + + &:nth-child(1), + &:nth-child(6) { + transform: rotate(45deg); + } + + &:nth-child(2), + &:nth-child(5) { + transform: rotate(-45deg); + } + + &:nth-child(1) { + left: 3px; + top: 6px; + } + + &:nth-child(2) { + left: calc(50% - 3px); + top: 6px; + } + + &:nth-child(3) { + left: -50%; + + opacity: 0; + } + + &:nth-child(4) { + left: 100%; + + opacity: 0; + } + + &:nth-child(5) { + top: 14px; + left: 3px; + } + + &:nth-child(6) { + top: 14px; + left: calc(50% - 3px); + } + } + } +} + + +/* Navigation + ========================================================================== */ +.sg-header__nav__list { + padding: 0; + margin: 0 0 20px; + + text-align: right; + + list-style: none; + + @media (max-width: $screen-sm-max) { + ul { + display: none; + } + } +} + +.sg-header__nav__list__item { + display: block; + margin: 20px 0 0; + + text-align: left; + + a { + display: block; + padding: 5px 10px; + + color: $black; + font-size: 16px; + font-weight: bold; + text-decoration: none; + + transition: color .3s ease, border .3s ease; + + &:hover { + border-color: $grey; + + color: $black; + text-decoration: none; + } + } + + &.active { + border-bottom: 0; + + > ul { + display: block; + + border-top: 1px solid $grey; + } + + > a { + margin-bottom: -1px; + + border-color: $primary-color; + + color: $primary-color--dark; + } + } + + ul { + + li { + position: relative; + + &.children { + > a:before { + display: block; + } + } + + a { + position: relative; + + padding: 6px 24px; + + border-bottom: 1px solid $grey; + + font-weight: normal; + font-size: 14px; + + &:before { + content: ' '; + + position: absolute; + top: 0; + bottom: 0; + left: -5px; + + width: 5px; + + background: $grey--dark; + + transition: transform .25s ease; + } + + &:hover { + + &:before { + transform: translate3d(5px, 0, 0); + } + } + } + + &.active { + + > a { + font-weight: bold; + + &:before { + transform: translate3d(5px, 0, 0); + } + } + + ul { + display: block; + } + } + + ul { + display: none; + + background: $grey--light; + + li { + + a { + padding: 6px 24px 6px 36px; + + &:hover { + + &:before { + display: block; + } + } + } + } + } + } + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/structures/_cards.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/structures/_cards.scss new file mode 100755 index 0000000000..8a1a6b8521 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/structures/_cards.scss @@ -0,0 +1,241 @@ +/* ========================================================================== + Structures - Cards + ========================================================================== */ + +/* General + ========================================================================== */ +.kds-card { + position: relative; + + margin: 0 0 15px; + + background: $white; + border: 1px solid $grey; + + border-radius: 4px; + + & + & { + margin-top: 30px; + } +} + +.kds-card__anchor { + position: relative; + + padding: 30px 0 10px; + + > h3, + > h4 { + margin: 0; + } +} + +/* Title + ========================================================================== */ +.kds-card__heading { + padding: 10px 15px; + margin: 0; + + border-radius: 4px 4px 0 0; + border-bottom: 1px solid $grey; + + color: $black; + font-family: $primary-font; + font-size: 21px; + + &:target:before { + content: ' '; + + display: block; + height: 100px; + margin: -100px 0 0; + } +} + + +/* Body + ========================================================================== */ +.kds-card__body { + + @media (min-width: $screen-sm-min) { + display: flex; + width: 100%; + } + + &--full-width { + display: block; + + .kds-card__example, + .kds-card__description { + width: 100%; + } + } +} + +.kds-card__example { + flex: 1 1 auto; + padding: 15px; + //max-width: 1190px; + + small { + display: block; + margin: 0 0 5px; + + font-size: 12px; + color: $black; + } + + > p:first-child { + margin-top: 0; + } + + @media (min-width: $screen-sm-min) { + width: 60%; + } + + // override the bootstrap container width as this conflicts with the IotaCSS container class + .container { + width: auto; + } +} + +.kds-card__description { + flex: 1 1 auto; + + font-size: 14px; + line-height: 1.4; + + p { + margin: 1em 0; + + + strong { + display: block; + margin-top: 2em; + } + } + + ul { + padding: 0; + margin: 0 10px; + + list-style: none; + + li { + position: relative; + + padding: 0 0 15px 15px; + margin: 0; + + line-height: 1.6; + + &:before { + content: '-'; + + position: absolute; + left: 0; + } + } + } + + blockquote { + padding-left: 16px; + margin: 16px 0 16px 2px; + + border-left: 3px solid $grey; + } + + @media (min-width: $screen-sm-min) { + width: 40%; + } +} + +.kds-card__description__inner { + padding: 15px; + + > p:first-child + .kds-title { + margin-top: 0; + } + + pre { + background: none; + + code { + display: block; + } + } +} + +/* Toggle + ========================================================================== */ +.kds-card__footer { + background: lighten($grey--light, 2.5); + + border-radius: 0 0 4px 4px; +} + +.kds-card__footer__toggle { + line-height: 1; +} + +.kds-card__footer__toggle__button { + position: relative; + + display: inline-block; + width: 100%; + padding: 8px 20px; + margin: 0; + + background: none; + + border: none; + border-top: 1px solid $grey; + border-bottom: 1px solid $grey; + border-radius: 0; + outline: none; + + color: $grey--dark; + font-size: 14px; + line-height: 1; + text-align: center; + text-transform: uppercase; + + appearance: none; + cursor: pointer; + user-select: none; + vertical-align: middle; + white-space: nowrap; + + transition: color .3s ease; + + &:hover { + color: $black; + } + + .hide-code { + display: none; + } + + &.active { + + .hide-code { + display: block; + } + + .show-code { + display: none; + } + } +} + +.kds-card__footer__toggle__content { + position: relative; + + display: block; + overflow: hidden; +} + +/* Markup + ========================================================================== */ +.kds-card__footer__toggle__content__code-snippet { + position: relative; +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/structures/_code-snippet.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/structures/_code-snippet.scss new file mode 100755 index 0000000000..b29b6a2ef0 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/structures/_code-snippet.scss @@ -0,0 +1,116 @@ +$code-block-gutter: 2px; + +.code-snippet-container { + display: flex; + margin: -#{$code-block-gutter / 2}; +} + +.code-snippet { + position: relative; + + display: flex; + flex: 1 1 0; + padding: 0 #{$code-block-gutter / 2}; + max-height: 500px; + min-width: 0; +} + +pre.code-snippet__code-block { + width: 100%; + margin: 0; + + background: $primary-color--dark;//#192E47; + + font-size: 13px; +} + +/* Clipboard + ========================================================================== */ +.code-snippet__copy { + position: absolute; + top: 10px; + right: 10px; + + > button { + position: relative; + z-index: 1; + + display: inline-block; + padding: .15em .5em; + + background: $primary-color--dark; + + border: 0; + border-radius: 8px; + + color: $grey; + font-size: 14px; + + appearance: none; + + transition: background-color .3s ease, color .3s ease; + + &:hover { + background: $white; + + color: $primary-color--dark; + + .tooltip--info { + transform: translate3d(-50%, 0, 0); + + opacity: 1; + } + } + + &:focus { + outline: none; + + .tooltip--success { + transform: translate3d(-50%, 0, 0); + + opacity: 1; + } + + .tooltip--info { + opacity: 0; + } + } + } + + .tooltip { + position: absolute; + bottom: -50px; + left: 50%; + z-index: -1; + + display: inline-block; + padding: .5em 1em; + transform: translate3d(-50%, -20px, 0); + + background: $primary-color; + opacity: 0; + + border-radius: 3px; + + color: $white; + font-weight: bold; + white-space: nowrap; + + transition: opacity .2s ease, transform .3s ease; + + &:after { + content: ' '; + + position: absolute; + top: -6px; + left: calc(50% - 6px); + + display: block; + width: 12px; + height: 12px; + transform: rotate3d(0, 0, 1, 45deg); + + background: $primary-color; + } + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/structures/_colors.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/structures/_colors.scss new file mode 100755 index 0000000000..a2320c2647 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/structures/_colors.scss @@ -0,0 +1,59 @@ +/* ========================================================================== + Structures - Color cards + ========================================================================== */ + +/* General + ========================================================================== */ +.kds-color { + display: inline-block; + width: calc((100% - 60px) / 3); + max-width: 240px; + margin: 10px; + + border-radius: 4px; + + box-shadow: 0 0 4px 0 rgba(0, 0, 0, .35), 0 3px 2px 0 rgba(0, 0, 0, .18); +} + +/* Color + ========================================================================== */ +.kds-color__color { + display: block; + height: 100px; + + border-radius: 4px 4px 0 0; + border-bottom: 1px solid $grey; + + color: $white; + vertical-align: middle; + text-align: center; +} + +.kds-color__color__text { + position: relative; + top: 50%; + + transform: translateY(-50%); +} + +/* Description + ========================================================================== */ +.kds-color__description { + padding: 0 8px 8px; +} + +.kds-color__description__title { + margin-top: 10px; + + color: $black; + font-size: 14px; + font-family: $primary-font; + font-weight: bold; +} + +.kds-color__description__value { + margin-bottom: 5px; + + color: $grey--dark; + font-size: 15px; +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/structures/_font-sizes.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/structures/_font-sizes.scss new file mode 100644 index 0000000000..cb41275f1a --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/structures/_font-sizes.scss @@ -0,0 +1,5 @@ +.kds-font-size { + & + .kds-font-size { + margin-top: 20px; + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/structures/_font-weights.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/structures/_font-weights.scss new file mode 100644 index 0000000000..2910581433 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/structures/_font-weights.scss @@ -0,0 +1,5 @@ +.kds-font-weight { + & + .kds-font-weight { + margin-top: 20px; + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/structures/_fonts.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/structures/_fonts.scss new file mode 100644 index 0000000000..dea42d7f23 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/structures/_fonts.scss @@ -0,0 +1,9 @@ +.kds-font { + & + .kds-font { + margin-top: 20px; + } +} + +.kds-font__description__title { + margin-bottom: 10px; +} \ No newline at end of file diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/structures/_icons.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/structures/_icons.scss new file mode 100755 index 0000000000..21489e1e20 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/structures/_icons.scss @@ -0,0 +1,58 @@ +/* ========================================================================== + Structures - Icons + ========================================================================== */ + +/* General + ========================================================================== */ +.kds-icon-wrapper { + display: flex; + flex-wrap: wrap; +} + +.kds-icon { + display: inline-block; + flex: 0 1 auto; + width: auto; + margin: 10px 20px 10px 0; + + border-radius: .4rem; + + box-shadow: 0 0 4px 0 rgba(0, 0, 0, .35), 0 3px 2px 0 rgba(0, 0, 0, .18); +} + +/* Color + ========================================================================== */ +.kds-icon__icon { + display: flex; + align-items: center; + justify-content: center; + height: 60px; + + border-bottom: 1px solid $grey; + + text-align: center; + vertical-align: middle; + + img { + display: block; + margin: 20px; + max-height: 80%; + } +} + +/* Description + ========================================================================== */ +.kds-icon__description { + padding: 10px; + + background: rgba($grey--light, .5); + + border-radius: 0 0 4px 4px; + + color: $red; + font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', 'monospace'; + font-size: 12px; + text-align: center; + + white-space: nowrap; +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/structures/_sections.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/structures/_sections.scss new file mode 100755 index 0000000000..823bd66215 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/structures/_sections.scss @@ -0,0 +1,20 @@ +/* ========================================================================== + Structures - Sections + ========================================================================== */ + +.section { + + & + & { + margin-top: 50px; + } +} + +.section__title { + margin-top: 0; + padding-bottom: 10px; + + border-bottom: 2px solid $grey; + + color: $black; + font-family: $primary-font; +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/structures/_shadows.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/structures/_shadows.scss new file mode 100644 index 0000000000..31746f9f27 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/structures/_shadows.scss @@ -0,0 +1,9 @@ +.kds-shadow { + height: 200px; + width: 200px; + margin: 50px; + + display: inline-flex; + justify-content: center; + align-items: center; +} \ No newline at end of file diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/structures/_spacings.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/structures/_spacings.scss new file mode 100644 index 0000000000..a84917b8d1 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/structures/_spacings.scss @@ -0,0 +1,62 @@ +/* ========================================================================== + Structures - Spacing cards + ========================================================================== */ + +.kds-spacing { + display: inline-block; + margin: 10px; +} + +.kds-spacing__description { + margin-left: 10px; + + display: inline-block; + + text-align: left; + vertical-align: text-bottom; + + .kds-spacing__description__value { + margin: 0; + } + + .kds-spacing__description__title { + margin: 0; + } +} + +.kds-spacing__spacing { + position: relative; + + display: inline-block; + + background: $grey; + + &:before, + &:after { + content: ''; + + position: absolute; + + display: block; + } + + &:before { + bottom: -5px; + left: 0; + + width: calc(100% + 5px); + height: 1px; + + background: $black; + } + + &:after { + right: -6px; + bottom: -5px; + + height: calc(100% + 5px); + width: 1px; + + background: $black; + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/vendors/bootstrap-components/_grid.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/vendors/bootstrap-components/_grid.scss new file mode 100755 index 0000000000..d9643b079f --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/components/vendors/bootstrap-components/_grid.scss @@ -0,0 +1,11 @@ +/* ========================================================================== + Bootstrap grid adjustments + ========================================================================== */ + + +/* Container + ========================================================================== */ +.container--styleguide { + width: 100% !important; + max-width: 1700px !important; +} \ No newline at end of file diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/config/_config.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/config/_config.scss new file mode 100755 index 0000000000..adda4ec65d --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/config/_config.scss @@ -0,0 +1,24 @@ +/* ========================================================================== + Config + + This file is exclusively intended for setting up imports + Never add styles directly to this file + ========================================================================== */ + +/* General + ========================================================================== */ +@import "general/paths", + "general/colors", + "general/sizes", + "general/z-index"; + +@import "general/typography/fonts", + "general/typography/bodycopy", + "general/typography/headings"; + + +/* Vendors + ========================================================================== */ + +@import "vendors/prism-imports"; + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/config/general/_colors.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/config/general/_colors.scss new file mode 100755 index 0000000000..a327d17cae --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/config/general/_colors.scss @@ -0,0 +1,35 @@ +/* ========================================================================== + Colors + + This file is exclusively intended for setting up variables + Never add styles directly to this file + ========================================================================== */ + +/* Colors + ========================================================================== */ +$black: #373737; +$white: #FFFFFF; + +$grey--dark: #808080; +$grey: #D8D8D8; +$grey--light: #f3f3f3; + +$red: #dd1144; + +$primary-color--dark: #1D2948; +$primary-color: #009EE3; +// +//$secondary-color: #E52143; +// +//$tertiary-color--darkest: #142438; +//$tertiary-color--dark: #062652; +//$tertiary-color: #093363; +// +//$quaternary-color--dark: #FFE100; +//$quaternary-color: #FFEC00; + +/* Specifics + ========================================================================== */ +$text-color: $black; +$link-color: $primary-color; +$link-color--hover: darken($primary-color, 15%); \ No newline at end of file diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/config/general/_paths.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/config/general/_paths.scss new file mode 100755 index 0000000000..4da7e4ef1a --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/config/general/_paths.scss @@ -0,0 +1,26 @@ +/* ========================================================================== + Paths + + This file is exclusively intended for setting up variables + Never add styles directly to this file + ========================================================================== */ + + +/* General + ========================================================================== */ +$root: "/frontend"; + + +/* Image folders + ========================================================================== */ +$backgrounds: "#{$root}/img/backgrounds"; +$buttons: "#{$root}/img/buttons"; +$dummy: "#{$root}/img/dummy"; +$general: "#{$root}/img/general"; +$icons: "#{$root}/img/icons"; + + +/* Font folders + ========================================================================== */ +$fonts: "#{$root}/fonts"; + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/config/general/_sizes.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/config/general/_sizes.scss new file mode 100755 index 0000000000..3749e68563 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/config/general/_sizes.scss @@ -0,0 +1,50 @@ +/* ========================================================================== + Sizes + + This file is exclusively intended for setting up variables + Never add styles directly to this file + ========================================================================== */ + + +/* Margins + ========================================================================== */ +$default-margin: 1.5rem; + + +/* Breakpoints + ========================================================================== */ + +// Extra small screen / phone +//** Deprecated `$screen-xs` as of v3.0.1 +$screen-xs: 480px !default; +//** Deprecated `$screen-xs-min` as of v3.2.0 +$screen-xs-min: $screen-xs !default; +//** Deprecated `$screen-phone` as of v3.0.1 +$screen-phone: $screen-xs-min !default; + +// Small screen / tablet +//** Deprecated `$screen-sm` as of v3.0.1 +$screen-sm: 768px !default; +$screen-sm-min: $screen-sm !default; +//** Deprecated `$screen-tablet` as of v3.0.1 +$screen-tablet: $screen-sm-min !default; + +// Medium screen / desktop +//** Deprecated `$screen-md` as of v3.0.1 +$screen-md: 992px !default; +$screen-md-min: $screen-md !default; +//** Deprecated `$screen-desktop` as of v3.0.1 +$screen-desktop: $screen-md-min !default; + +// Large screen / wide desktop +//** Deprecated `$screen-lg` as of v3.0.1 +$screen-lg: 1200px !default; +$screen-lg-min: $screen-lg !default; +//** Deprecated `$screen-lg-desktop` as of v3.0.1 +$screen-lg-desktop: $screen-lg-min !default; + +// So media queries don't overlap when required, provide a maximum +$screen-xs-max: ($screen-sm-min - 1) !default; +$screen-sm-max: ($screen-md-min - 1) !default; +$screen-md-max: ($screen-lg-min - 1) !default; + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/config/general/_z-index.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/config/general/_z-index.scss new file mode 100755 index 0000000000..44d5b93146 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/config/general/_z-index.scss @@ -0,0 +1,6 @@ +/* ========================================================================== + Z-indexes + + This file is exclusively intended for setting up variables + Never add styles directly to this file + ========================================================================== */ diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/config/general/typography/_bodycopy.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/config/general/typography/_bodycopy.scss new file mode 100755 index 0000000000..0aa800c6fe --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/config/general/typography/_bodycopy.scss @@ -0,0 +1,23 @@ +/* ========================================================================== + Bodycopy + + This file is exclusively intended for setting up variables + Never add styles directly to this file + ========================================================================== */ + +/* Line-height + ========================================================================== */ +$line-height--base: 1.6; + +$line-height--small: 1.1; +$line-height--medium: 1.2; + +$line-height--headers: 1; + + +/* Font sizes + ========================================================================== */ +$font-size--base: 10px; +$font-size--default: 1.6rem; +$font-size--small: 1.2rem; +$font-size--big: 1.8rem; diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/config/general/typography/_fonts.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/config/general/typography/_fonts.scss new file mode 100755 index 0000000000..8ad9d9ef8b --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/config/general/typography/_fonts.scss @@ -0,0 +1,26 @@ +/* ========================================================================== + Fonts + + This file is exclusively intended for setting up variables + Never add styles directly to this file + ========================================================================== */ + +/* Webfonts + ========================================================================== */ +$primary-font: 'Lato', Helvetica, Arial, sans-serif; + + +/* Iconfonts + ========================================================================== */ +@font-face { + font-family: 'icomoon'; + src: url("data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBfsAAAC8AAAAYGNtYXAXVtKTAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5ZpDnbsgAAAF4AAAKYGhlYWQLuTCrAAAL2AAAADZoaGVhCVEFmQAADBAAAAAkaG10eDjAAXkAAAw0AAAARGxvY2ER4hRwAAAMeAAAACRtYXhwABgAwQAADJwAAAAgbmFtZZlKCfsAAAy8AAABhnBvc3QAAwAAAAAORAAAACAAAwPFAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpDAPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6Qz//f//AAAAAAAg6QD//f//AAH/4xcEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAFgAJgWOA2kAIAAAARcWFAcBBiIvAS4BIzQwMS4BMwEmND8BNjIXCQE2MhcxBTBeHx/9sR9XH1MHAwECAQH+Dh8fXR9YHwGpAacfVx8DaF0fVx/9sB8fUgcDAQEBAfEfVx9dHx/+VwGqHh8AAAAABAAA/8IDjAOoAAoALQA7AEkAACUUBiMhIiY1ESERAyMVFAYjIiY9ASEVFAYjIiY9ASMiBhURFBYzITI2NRE0JiMHMjY9ATQmIyIGHQEUFiEyNj0BNCYjIgYdARQWAzsaE/1wExoC6i0dKB0dJv6zJx4cJBk0Sko0ApA0Sko0YA4TEw4OFBT+Og4UFA4OExNAExoaEwGx/k8DDmsYJiYYa2sYJiYYa0o0/XA0Sko0ApA0SowUDqIOFBQOog4UFA6iDhQUDqIOFAACAAD/0gJMA7MADgAzAAA3FBYzITI2NTQmIyEiBhUBIgYPARE0JiMiBhURJyYiBwYUHwEeATMyNj8BPgE1NCYnLgEjACwfAbYfLCwf/kofLAHsER0LPC8iITA8F0IYFxfHDB0QEB4LwwwMDAwLHRAeHy0tHyAtLSACFQwMPAGCIjAwIv6CPRcXGEMYygsNDQvGCx4QEB4LDAwAAAAEAAf/0gWPA7wAAwARABUAIQAAJQkBEQcOASMhIiYvAQEFJQEHCQIRNzQ2MyEyFjEVCQE3BY/+gwF9Fg4pF/tBFykOBwGbARkBFQGgB/qOAXz+hBUhLwS/OBT9VP1OA1cBegFl/SFfEhQUEggBnvX1/mIIAz7+mf6IAt9dASgyBf2SAnUHAAAAAQAA/9EB3AO1ABYAAAEjNTQ2OwE1IyIOAh0BIxUzETMRMzcB3KIfDnOeQlMwEmVl1ZASAnNnHROrKj9JHnKw/g4B8rAAAAAABQAA/+QD1QO5AEgAkACcALEAvgAAASIGBw4BBw4BBw4BBw4BBw4BFRQWFx4BFx4BFx4BFx4BFx4BMzI2Nz4BNz4BNz4BNz4BNz4BNTQmJy4BJy4BJy4BJy4BJy4BIxUyFhceARceARceARceARceARUUBgcOAQcOAQcOAQcOAQcOASMiJicuAScuAScuAScuAScuATU0Njc+ATc+ATc+ATc+ATc+ARMiJjU0NjMyFhUUBgMiDgIVFB4CMzI+AjU0LgIjJRQGIyImNTQ2MzIWFQHrZD8oJzgYGCoVFBsJCQwCAgEBAgIMCQkbFBUqGBg4Jyg/ZGQ/Jyc5FxgrFBUaCgkMAgEBAQECDAkKGhUUKxgXOScnP2RiPSckKg0RGw0MEgYFCwECAQECAQsFBhIMDRsRDSokJz1iYz0nIysNERoNDREHBQoCAQICAQIKBQcRDQ0aEQ0rIyc9Y0RgYEREX19ENFxFJydFXDQ0XEQoKERcNAFBIxgZIiIZGCMDuQECAQwJChsUFCsYFzknJz9kZD8oJzgYGCoVFBsJCQwCAgEBAgIMCQkbFBUqGBg4Jyg/ZGQ/Jyc5FxgrFBQbCgkMAQIBWAECAgoFBhIMDRsRDSokJz1iYz0nJCoNERoNDREHBQoCAgEBAgIKBQcRDQ0aEQ0qJCc9Y2I9JyQqDREbDQwSBgUKAgIB/cpgRENgYENEYAGgKERcNDVbRScnRVs1NFxEKAoZIiIZGCIiGAAAAAABAAD/3gQnA8AAqgAABSoBIzEqASMiJicuAScuASMiBgcOASMiJicuAScuAScuAScuATU0Njc+Azc4ATE+AScuAScuAScuATc+ATMyFhceATMyNjMuATUuATc+AzM6ATEzMh4CFxYGBxUOARUyFhcxPgE3PgEzMhYXMR4BFRQGBw4BBw4BBwYWFxQwMR4DFx4BFRQGBw4BBw4BBw4BBw4BKwEiJicuASMiBgcOAQcOASMCGgIEAgEDATBBHhQoFgsWCxMeCgcLBQQJAgIDAQQGB0s3BAEBBQQ6VDccAQcDBQgqEQQIAyIPAQMaDQQGAhAbDBEPAQEBBAESGUtMQRABEgMQQktLGhEBAwEBAQ4PCxoOBQgDBQoEDA4SHgMIBBErCAQDBwEcN1Q5BQUBAQQ4SwYGBAEDAgEHBgEECwgMHhIKFgsWKBQeQi8iJBQOGAQCAgUCAQIEBwYMBhASAQsdCwEEAQQHAQk8QDQDDxgKExMFAgIBDhkHDA8BAgcHCggQCTZ5JjpCIQkJIUI6Jnk2AwgPBwkBAQcGAgICAgQPCQgWDAECAgUTEwoYDgEDNEA8CQEHBAEEAQsdCwEREAYMBwUFAQEDBAICBBcPFCQAAAYAAP/GA0kDsAAQAB8AIwAoACwAPQAAASEiBhUXHgEzITI2NTc0JiMlMhYVMzQmIyIGFTM0NjMbATMDIxEzESMDEyMDJxwBFxMeATMhMjY3EzY0NSEDOvzVBgkDAQkHAyAGCgUJBv5qHyxUXUJBXVQsHnYrOCvJNzeFKjcrlQFRAhwSAdASHAJUAf0pAvkJBmYGCgoGZgYJbCcbOlNTOhsn/LsBzP40Acz+NAHM/jQBzFkECQX9vxMZGRMCQQUJBAAAAAABAAr/0QTpA7UATQAAAT4BNw4BBy4BIyIOAhUUFhcuAycOARUUFhcuASccARUUHgIXDgEjIiYnHgMXDgMjIiYnHgMzMiQ+ATU8ATU+ATcOAQcEVig6DyVSLCNgODVdRSgDA1CVhnUvERI+NCA6Gh83SywQIhENGAsMLj9MKiFKUFYtEB4PKl1jaDaxAQ+5XyVBGSJKJwMYF0gsFh8IJSonRFw0Dx0NBChEXTkbQCNBbyEBEA4BAQEuUkEtCQQFAwIlQC4bARkoHA4BAhsqHQ+Czv99CBAIG0ImEBQEAAAAAAEATP/3Ao4DkwAhAAAlBwYiJwEmND8BPgExOAExNjAxATYyHwEWFAcJARYUBzkBAo5BFT0V/mYVFTkFAgIBWBU9FUEVFf7ZAScVFThBFRUBmRY8FToFAgIBWRUVQRU9Ff7Z/tsVPRUAAQBM//cCjgOTACEAABM3NjIXARYUDwEOATE4ARUGFDUBBiIvASY0NwkBJjQ3OQFMQRU9FQGaFRU5BQIC/qgVPRVBFRUBJv7aFRUDUkEVFf5nFjwWOQUCAQEBAf6nFRVBFT0VAScBJRU8FgAAAQBYACYFjgNoACEAADcnJjQ3ATYyHwEeARc4ATMeATUBFhQPAQYiJwkBBiInOQG1XR8fAk8fVx9SBwMBAQEBAfIfH14fVx/+Vv5ZHlgfJl4eVx8CUB8fUgcCAQIBAf4OH1ceXh8fAan+Vx8fAAAAAAEAIP/YA6oDwAAwAAABNzY0LwEuASMiBg8BJy4BIyIGDwEGFB8BBwYUHwEeATMyNj8BFx4BMzI2PwE2NC8BAq78ICA9ECcWFSgP7+4PKBUWJxA+Hx/8/CAgPRAnFhUoD+/uDygVFigPPh8f/AHM/SBaHz4QEBAQ7+8QEBAQPh9aIP3+H1ogPg8QEA/w8A8QEA8+IFof/gAAAQAAAAEAAN1yknlfDzz1AAsEAAAAAADThXYWAAAAANOFdhYAAP/CBY8DwAAAAAgAAgAAAAAAAAABAAADwP/AAAAFxwAAAAAFjwABAAAAAAAAAAAAAAAAAAAAEQQAAAAAAAAAAAAAAAIAAAAFxwBYA6cAAAJVAAAFqwAHAewAAAPXAAAEKQAAA1UAAAT2AAoCxQBMAsUATAXHAFgDygAgAAAAAAAKABQAHgBWALoBCAFMAXACiANwA9IEQgR2BKwE5AUwAAEAAAARAL8ABgAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAHAAAAAQAAAAAAAgAHAGAAAQAAAAAAAwAHADYAAQAAAAAABAAHAHUAAQAAAAAABQALABUAAQAAAAAABgAHAEsAAQAAAAAACgAaAIoAAwABBAkAAQAOAAcAAwABBAkAAgAOAGcAAwABBAkAAwAOAD0AAwABBAkABAAOAHwAAwABBAkABQAWACAAAwABBAkABgAOAFIAAwABBAkACgA0AKRpY29tb29uAGkAYwBvAG0AbwBvAG5WZXJzaW9uIDEuMABWAGUAcgBzAGkAbwBuACAAMQAuADBpY29tb29uAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG5SZWd1bGFyAFIAZQBnAHUAbABhAHJpY29tb29uAGkAYwBvAG0AbwBvAG5Gb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA") format('truetype'); + font-weight: normal; + font-style: normal; +} + +/* Defaults + ========================================================================== */ +$font-family--base: $primary-font; +$font-family--headings: $font-family--base; +$font-family--buttons: $font-family--base; \ No newline at end of file diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/config/general/typography/_headings.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/config/general/typography/_headings.scss new file mode 100755 index 0000000000..3324e25812 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/config/general/typography/_headings.scss @@ -0,0 +1,17 @@ +/* ========================================================================== + Headings + + This file is exclusively intended for setting up variables + Never add styles directly to this file + sizes are defined without unit to enable the use of the rem function + ========================================================================== */ + +$line-height--headers: 1.2; + +$font-size-h1: 4.5rem; +$font-size-h1--small: 3.2rem; +$font-size-h2: 3.2rem; +$font-size-h3: 2.3rem; +$font-size-h4: 2.3rem; +$font-size-h5: 1.8rem; +$font-size-h6: 1.4rem; diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/config/vendors/_prism-imports.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/config/vendors/_prism-imports.scss new file mode 100755 index 0000000000..abc2193ae1 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/config/vendors/_prism-imports.scss @@ -0,0 +1,8 @@ +/* ========================================================================== + Imports for PrismJS + + This file is exclusively intended for setting up imports + Never add styles directly to this file + ========================================================================== */ + +@import 'node_modules/prismjs/themes/prism-okaidia'; \ No newline at end of file diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/general/_base.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/general/_base.scss new file mode 100755 index 0000000000..a8e5941cd4 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/general/_base.scss @@ -0,0 +1,29 @@ +/* ========================================================================== + Base + ========================================================================== */ + +/* Box model + ========================================================================== */ +// Defined in corona scss which is also included in the styleguide + + +/* Html & body + ========================================================================== */ +html.sg-styleguide { + + body { + position: relative; + + overflow-x: hidden; + + background-color: $white; + + @media (min-width: $screen-sm-min) { + background-position: bottom 1.5rem right 1.5rem; + } + } + + .kds-margin-sm { + margin: 1rem 0; + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/general/_general.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/general/_general.scss new file mode 100755 index 0000000000..3e19caa241 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/general/_general.scss @@ -0,0 +1,16 @@ +/* ========================================================================== + General + + This file is exclusively intended for setting up imports + Never add styles directly to this file + ========================================================================== */ + +/* Base + ========================================================================== */ +@import "base"; + + +/* Typography + ========================================================================== */ +@import "typography/headings", + "typography/iconfont"; diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/general/typography/_headings.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/general/typography/_headings.scss new file mode 100755 index 0000000000..33fc88f6d3 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/general/typography/_headings.scss @@ -0,0 +1,13 @@ +/* ========================================================================== + Headings + ========================================================================== */ + +/* Shared + ========================================================================== */ + +h1, h2, h3, h4, h5, h6 { + + &.kds-title { + font-family: $primary-font; + } +} \ No newline at end of file diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/general/typography/_iconfont.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/general/typography/_iconfont.scss new file mode 100755 index 0000000000..aab2e4fc93 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/general/typography/_iconfont.scss @@ -0,0 +1,42 @@ +/* ========================================================================== + Icon font + ========================================================================== */ + +/* General + ========================================================================== */ +//.icon { +// /* use !important to prevent issues with browser extensions that change fonts */ +// font-family: 'icomoon' !important; +// speak: none; +// font-style: normal; +// font-weight: normal; +// font-variant: normal; +// text-transform: none; +// line-height: 1; +// +// /* Better Font Rendering =========== */ +// -webkit-font-smoothing: antialiased; +// -moz-osx-font-smoothing: grayscale; +//} +// +//$icons: ( +// cross "\e90c", +// arrow-left "\e909", +// arrow-right "\e90a", +// arrow-up "\e90b", +// arrow-down "\e900", +// calendar "\e901", +// download "\e902", +// email "\e903", +// facebook "\e904", +// instagram "\e905", +// snapchat "\e906", +// trash "\e907", +// twitter "\e908" +//); +// +//@each $icon in $icons { +// .icon--#{nth($icon, 1)}:before { +// content: nth($icon, 2); +// } +//} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/helpers/_helpers.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/helpers/_helpers.scss new file mode 100755 index 0000000000..90a7e1ecd0 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/helpers/_helpers.scss @@ -0,0 +1,6 @@ +/* ========================================================================== + Helpers + + Never add styles directly to this file - set up imports + ========================================================================== */ + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/styleguide.scss b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/styleguide.scss new file mode 100755 index 0000000000..9603d33b17 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/scss/styleguide.scss @@ -0,0 +1,27 @@ +@charset "UTF-8"; + +/* ========================================================================== + Stylesheet for all browsers + + Never add styles directly to this file - set up imports + Style guide: https://github.com/necolas/idiomatic-css + ========================================================================== */ + +/* Config + ========================================================================== */ +@import "config/config"; + + +/* Helpers + ========================================================================== */ +@import "helpers/helpers"; + + +/* General + ========================================================================== */ +@import "general/general"; + + +/* Pages + ========================================================================== */ +@import "components/components"; diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/templates/layout.hbs b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/templates/layout.hbs new file mode 100755 index 0000000000..d228476259 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/templates/layout.hbs @@ -0,0 +1,81 @@ + + + + + + + Kuma Design System + + + + + + {{~> webfonts}} + + + +
    +
    + + {{!-- --}} + +
    + + + +
    +
      + {{#each sections}} +
    • + {{name}} + {{#if children}} + + {{/if}} +
      • + {{/each}} +
    +
    +
    + +
    + {{#each sections}} +
    +

    {{ clean name }}

    + {{~> section}} + + {{#children}} + {{~> childSection}} + {{/children}} +
    + {{/each}} +
    + + + + + + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/templates/partials/childSection.hbs b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/templates/partials/childSection.hbs new file mode 100755 index 0000000000..c3944076a3 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/templates/partials/childSection.hbs @@ -0,0 +1,94 @@ +
    + {{#if code }} +
    + {{clean name}} + {{~> section}} + + {{#children}} + {{~> childSection}} + {{/children}} +
    + {{else}} + {{#if description }} +
    + {{clean name}} + {{~> section}} + + {{#children}} + {{~> childSection}} + {{/children}} +
    + {{else}} + {{#if colors }} +
    + {{clean name}} + {{~> section}} + + {{#children}} + {{~> childSection}} + {{/children}} +
    + {{else}} + {{#if spacings }} +
    + {{clean name}} + {{~> section}} + + {{#children}} + {{~> childSection}} + {{/children}} +
    + {{else}} + {{#if fonts }} +
    + {{clean name}} + {{~> section}} + {{#children}} + {{~> childSection}} + {{/children}} +
    + {{else}} + {{#if fontSizes }} +
    + {{clean name}} + {{~> section}} + + {{#children}} + {{~> childSection}} + {{/children}} +
    + {{else}} + {{#if fontWeights }} +
    + {{clean name}} + {{~> section}} + + {{#children}} + {{~> childSection}} + {{/children}} +
    + {{else}} + {{#if shadows }} +
    + {{clean name}} + {{~> section}} + + {{#children}} + {{~> childSection}} + {{/children}} +
    + {{else}} + {{clean name}} + + {{#children}} + {{~> childSection}} + {{/children}} + {{/if}} + {{/if}} + {{/if}} + {{/if}} + {{/if}} + {{/if}} + {{/if}} + {{/if}} +
    diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/templates/partials/color.hbs b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/templates/partials/color.hbs new file mode 100755 index 0000000000..648a4e39bb --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/templates/partials/color.hbs @@ -0,0 +1,10 @@ +
    +
    +
    {{ this.description }}
    +
    +
    +
    {{ this.name }}
    + HEX {{ this.hex }} + RGB {{ this.rgb }} +
    +
    diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/templates/partials/font.hbs b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/templates/partials/font.hbs new file mode 100644 index 0000000000..058cfa6f4c --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/templates/partials/font.hbs @@ -0,0 +1,8 @@ +
    +
    +
    {{ this.name }} - {{ this.stack}}
    +
    +

    + This is Chewbacca. He's first-mate on a ship that might suit our needs. I don't like the look of this. Han Solo. I'm captain of the Millennium Falcon. Chewie here tells me you're looking for passage to the Alderaan system. Yes, indeed. If it's a fast ship. Fast ship? You've never heard of the Millennium Falcon? Should I have? It's the ship that made the Kessel run in less than twelve parsecs! I've outrun Imperial starships, not the local bulk-cruisers, mind you. I'm talking about the big Corellian ships now. She's fast enough for you, old man. What's the cargo? Only passengers. Myself, the boy, two droids, and no questions asked. What is it? Some kind of local trouble? Let's just say we'd like to avoid any Imperial entanglements. +

    +
    diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/templates/partials/fontSize.hbs b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/templates/partials/fontSize.hbs new file mode 100644 index 0000000000..f13f6d11a7 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/templates/partials/fontSize.hbs @@ -0,0 +1,3 @@ +
    +

    {{ this.size}} | {{ this.name }}

    +
    diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/templates/partials/fontWeight.hbs b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/templates/partials/fontWeight.hbs new file mode 100644 index 0000000000..0d0278ec42 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/templates/partials/fontWeight.hbs @@ -0,0 +1,3 @@ +
    +

    {{ this.size}} | {{ this.name }}

    +
    diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/templates/partials/section.hbs b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/templates/partials/section.hbs new file mode 100755 index 0000000000..a62dcb9bf7 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/templates/partials/section.hbs @@ -0,0 +1,106 @@ + +{{#xif depth '==' '1'}} + {{#xif example '||' description}} +
    +
    + {{/xif}} +{{/xif}} + + +
    + {{#if example}} +
    + {{#if example}} + {{{ example.description }}} + {{/if}} +
    + {{/if}} + + {{#if colors}} +
    + {{#each colors}} + {{~> color}} + {{/each}} +
    + {{/if}} + + {{#if spacings}} +
    + {{#each spacings}} + {{~> spacing}} + {{/each}} +
    + {{/if}} + + {{#if fonts}} +
    + {{#each fonts}} + {{~> font}} + {{/each}} +
    + {{/if}} + + {{#if fontSizes}} +
    + {{#each fontSizes}} + {{~> fontSize}} + {{/each}} +
    + {{/if}} + + {{#if fontWeights}} +
    + {{#each fontWeights}} + {{~> fontWeight}} + {{/each}} +
    + {{/if}} + + {{#if shadows}} +
    + {{#each shadows}} + {{~> shadow}} + {{/each}} +
    + {{/if}} + + {{#if description}} +
    +
    + {{{description}}} +
    +
    + {{/if}} +
    +{{#if code}} +
    +
    + +
    +
    +
    +
    +
    +
    + +
    + 
    {{code.description}}
    +
    +
    +
    +
    +
    +{{/if}} + +{{#xif depth '==' '1'}} + {{#xif example '||' description}} +
    + {{/xif}} +{{/xif}} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/templates/partials/shadow.hbs b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/templates/partials/shadow.hbs new file mode 100644 index 0000000000..ededfb89d3 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/templates/partials/shadow.hbs @@ -0,0 +1,3 @@ +
    +

    {{ this.name }}

    +
    diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/templates/partials/spacing.hbs b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/templates/partials/spacing.hbs new file mode 100644 index 0000000000..501833ac07 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/templates/partials/spacing.hbs @@ -0,0 +1,8 @@ +
    +
    +
    +
    +
    {{ this.name }}
    + {{ this.size }} +
    +
    diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/templates/partials/webfonts.hbs b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/templates/partials/webfonts.hbs new file mode 100755 index 0000000000..8b13789179 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/assets/ui/styleguide/templates/partials/webfonts.hbs @@ -0,0 +1 @@ + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/config/pageparts/main.yml b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/config/pageparts/main.yml new file mode 100644 index 0000000000..dcfb1dd30a --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/config/pageparts/main.yml @@ -0,0 +1,6 @@ +kunstmaan_page_part: + pageparts: + main: + name: "Main" + context: "main" + types: [] diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/config/pagetemplates/contentpage.yml b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/config/pagetemplates/contentpage.yml new file mode 100644 index 0000000000..6cc8d8b053 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/config/pagetemplates/contentpage.yml @@ -0,0 +1,8 @@ +kunstmaan_page_part: + pagetemplates: + contentpage: + name: "Content page" + rows: + - regions: + - { name: "main", span: 12 } + template: "pages\\content_page\\pagetemplate.html.twig" diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/config/pagetemplates/homepage.yml b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/config/pagetemplates/homepage.yml new file mode 100644 index 0000000000..7fd1b313e8 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/config/pagetemplates/homepage.yml @@ -0,0 +1,8 @@ +kunstmaan_page_part: + pagetemplates: + homepage: + name: "Home page" + rows: + - regions: + - { name: "main", span: 12 } + template: "pages\\home_page\\pagetemplate.html.twig" diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/controller/DefaultController.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/controller/DefaultController.php new file mode 100755 index 0000000000..bc1fcb961b --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/controller/DefaultController.php @@ -0,0 +1,29 @@ +redirectToRoute('_slug', [ + 'url' => '', + '_locale' => $this->getLocale($request), + ]); + } + + private function getLocale(Request $request): string + { + $locales = array_filter(explode('|', $this->getParameter('requiredlocales'))); + + return $request->getPreferredLanguage($locales); + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/entities/ContentPage.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/entities/ContentPage.php new file mode 100755 index 0000000000..3c1b14c13a --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/entities/ContentPage.php @@ -0,0 +1,51 @@ + 'ContentPage', + 'class' => __CLASS__, + ], + ]; + } + + public function getPagePartAdminConfigurations(): array + { + return ['main']; + } + + public function getPageTemplates(): array + { + return ['contentpage']; + } + + public function getDefaultView(): string + { + return 'pages/content_page/view.html.twig'; + } + + public function getSearchType(): string + { + return 'Page'; + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/entities/HomePage.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/entities/HomePage.php new file mode 100755 index 0000000000..8e0470903b --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/entities/HomePage.php @@ -0,0 +1,52 @@ + 'ContentPage', + 'class' => ContentPage::class, + ], + ]; + } + + public function getPagePartAdminConfigurations(): array + { + return ['main']; + } + + public function getPageTemplates(): array + { + return ['homepage']; + } + + public function getDefaultView(): string + { + return 'pages/home_page/view.html.twig'; + } + + public function getSearchType(): string + { + return 'Home'; + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/fixtures/DefaultSiteFixtures.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/fixtures/DefaultSiteFixtures.php new file mode 100755 index 0000000000..53257d9e64 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/fixtures/DefaultSiteFixtures.php @@ -0,0 +1,157 @@ +manager = $manager; + + $this->pageCreator = $this->container->get('kunstmaan_node.page_creator_service'); + $this->requiredLocales = explode('|', $this->container->getParameter('requiredlocales')); + + $this->createTranslations(); //TODO: check if we should insert translation on another way and if needed still + + $this->createHomePage(); +// $this->createDashboard(); //TODO check if still needed + } + + /** + * Create the dashboard. + */ + private function createDashboard() + { + //TODO: should we do this? + /** @var $dashboard DashboardConfiguration */ + $dashboard = $this->manager->getRepository('KunstmaanAdminBundle:DashboardConfiguration')->findOneBy([]); + if (null === $dashboard) { + $dashboard = new DashboardConfiguration(); + } + $dashboard->setTitle('Dashboard'); + $dashboard->setContent('
    Important: please change these items to the graphs of your own site!
    '); + $this->manager->persist($dashboard); + $this->manager->flush(); + } + + private function createHomePage() + { + $homePage = new HomePage(); + $homePage->setTitle('Home'); + + $translations = []; + foreach ($this->requiredLocales as $locale) { + $translations[] = [ + 'language' => $locale, + 'callback' => static function ($page, NodeTranslation $translation, $seo) { + $translation->setTitle('Home'); + $translation->setSlug(''); + }, + ]; + } + + $options = [ + 'parent' => null, + 'page_internal_name' => 'homepage', + 'set_online' => true, + 'hidden_from_nav' => false, + 'creator' => self::ADMIN_USERNAME, + ]; + + $this->pageCreator->createPage($homePage, $translations, $options); + } + + /** + * Insert all translations. + */ + private function createTranslations() + { + //TODO: still needed? + $trans = []; + + $trans['warning.outdated.title']['en'] = 'You are using an outdated browser.'; + $trans['warning.outdated.title']['nl'] = 'Uw browser is verouderd.'; + $trans['warning.outdated.title']['fr'] = 'Vous utilisez un navigateur internet dépassé.'; + $trans['warning.outdated.title']['de'] = 'Ihr Browser ist veraltet.'; + + $trans['warning.outdated.subtitle']['en'] = 'Some page content will be lost or rendered incorrectly.'; + $trans['warning.outdated.subtitle']['nl'] = 'Sommige inhoud kan verloren gaan of zal niet correct weergegeven worden.'; + $trans['warning.outdated.subtitle']['fr'] = "Certain contenu pourrait être perdu ou ne pas s'afficher correctement"; + $trans['warning.outdated.subtitle']['de'] = 'Einige Inhalte können verloren gehen oder nicht richtig angezeigt werden.'; + + $trans['warning.outdated.description']['en'] = 'Please install a more recent version of your browser.'; + $trans['warning.outdated.description']['nl'] = 'Gelieve een meer recente versie van uw browser te installeren.'; + $trans['warning.outdated.description']['fr'] = 'Nous vous conseillons de mettre votre navigateur à jour.'; + $trans['warning.outdated.description']['de'] = 'Bitte aktualisieren Sie Ihren Browser auf eine neuere Version.'; + + $trans['warning.outdated.upgrade_browser']['en'] = 'Upgrade your browser'; + $trans['warning.outdated.upgrade_browser']['nl'] = 'Upgrade uw browser'; + $trans['warning.outdated.upgrade_browser']['fr'] = 'Mettez votre navigateur à jour'; + $trans['warning.outdated.upgrade_browser']['de'] = 'Aktualisieren Sie Ihren Browser'; + + $translationId = $this->manager->getRepository('KunstmaanTranslatorBundle:Translation')->getUniqueTranslationId(); + foreach ($trans as $key => $array) { + foreach ($array as $lang => $value) { + $t = new Translation(); + $t->setKeyword($key); + $t->setLocale($lang); + $t->setText($value); + $t->setDomain('messages'); + $t->setCreatedAt(new \DateTime()); + $t->setFlag(Translation::FLAG_NEW); + $t->setTranslationId($translationId); + + $this->manager->persist($t); + } + ++$translationId; + } + + $this->manager->flush(); + } + + public function getOrder(): int + { + return 51; + } + + public function setContainer(ContainerInterface $container = null) + { + $this->container = $container; + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/form/ContentPageAdminType.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/form/ContentPageAdminType.php new file mode 100755 index 0000000000..2662ec9512 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/form/ContentPageAdminType.php @@ -0,0 +1,23 @@ +setDefaults([ + 'data_class' => ContentPage::class, + ]); + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/form/HomePageAdminType.php b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/form/HomePageAdminType.php new file mode 100755 index 0000000000..3619b59a46 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/form/HomePageAdminType.php @@ -0,0 +1,23 @@ +setDefaults([ + 'data_class' => HomePage::class, + ]); + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/.babelrc b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/.babelrc new file mode 100755 index 0000000000..d3337dc0f4 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": [ "@babel/preset-env" ] +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/.eslintrc b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/.eslintrc new file mode 100755 index 0000000000..9263a34dae --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/.eslintrc @@ -0,0 +1,16 @@ +{ + "root": true, + "env": { + "browser": true, + "es6": true + }, + "extends": ["./node_modules/@kunstmaan/eslint-config/index.js"], + "rules": { + "import/no-extraneous-dependencies": ["error", {"devDependencies": ["gulpfile.babel.js", "./groundcontrol/**/*.js"]}], + "no-console": ["error", { + "allow": ["warn", "error"] + }], + "no-alert": "error", + "no-new": 0 + } + } diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/.nvmrc b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/.nvmrc new file mode 100755 index 0000000000..e338b86593 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/.nvmrc @@ -0,0 +1 @@ +v10 diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/.stylelintrc b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/.stylelintrc new file mode 100755 index 0000000000..61ae8ba29d --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/.stylelintrc @@ -0,0 +1,5 @@ +{ + "extends": ["./node_modules/@kunstmaan/stylelint-config/index.js"], + "rules": { + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/config/webpack.config.admin-extra.js b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/config/webpack.config.admin-extra.js new file mode 100644 index 0000000000..c2a40c7a63 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/config/webpack.config.admin-extra.js @@ -0,0 +1,14 @@ +import defaultConfig from './webpack.config.default'; +import path from 'path'; + +export default function webpackConfigAdminExtra(speedupLocalDevelopment, optimize = false) { + const config = defaultConfig(speedupLocalDevelopment, optimize); + + config.entry = './assets/admin/js/admin-bundle-extra.js'; + config.output = { + path: path.resolve(__dirname, '../../public/frontend/js'), + filename: 'admin-bundle-extra.js', + }; + + return config; +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/config/webpack.config.app.js b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/config/webpack.config.app.js new file mode 100644 index 0000000000..3c1d2b0e84 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/config/webpack.config.app.js @@ -0,0 +1,14 @@ +import path from 'path'; +import defaultConfig from './webpack.config.default'; + +export default function webpackConfigApp(speedupLocalDevelopment, optimize = false) { + const config = defaultConfig(speedupLocalDevelopment, optimize); + + config.entry = './assets/ui/js/app.js'; + config.output = { + path: path.resolve(__dirname, '../../public/frontend/js'), + filename: 'bundle.js', + }; + + return config; +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/config/webpack.config.default.js b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/config/webpack.config.default.js new file mode 100644 index 0000000000..67d24c749e --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/config/webpack.config.default.js @@ -0,0 +1,66 @@ +import TerserPlugin from 'terser-webpack-plugin'; + +function getBabelLoaderOptions({ optimize = false, transpileOnlyForLastChromes = false }) { + if (optimize || !transpileOnlyForLastChromes) { + return { + babelrc: false, + presets: [ + ['@babel/preset-env', { + useBuiltIns: 'usage', + modules: false + }] + ], + }; + } + + return { + babelrc: false, + presets: [ + ['@babel/preset-env', { + useBuiltIns: 'usage', + targets: { + browsers: ['last 2 Chrome versions'] + } + }] + ], + cacheDirectory: true, + }; +} + +function shouldOptimize({optimize = false}) { + if (optimize) { + return { + minimizer: [new TerserPlugin({ + terserOptions: { + mangle: true, + sourceMap: true + } + })], + } + } +} + +export default function defaultConfig(speedupLocalDevelopment, optimize = false) { + const config = { + mode: optimize ? 'production' : 'development', + devtool: optimize ? 'source-map' : 'cheap-module-source-map', + module: { + rules: [ + { + test: /\.js$/, + exclude: /node_modules/, + use: { + loader: 'babel-loader', + options: getBabelLoaderOptions({ + transpileOnlyForLastChromes: speedupLocalDevelopment, + }), + }, + }, + ], + }, + optimization: shouldOptimize({optimize: optimize}), + plugins: [], + }; + + return config; +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/config/webpack.config.styleguide.js b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/config/webpack.config.styleguide.js new file mode 100644 index 0000000000..73bbf6d6ed --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/config/webpack.config.styleguide.js @@ -0,0 +1,14 @@ +import path from 'path'; +import defaultConfig from './webpack.config.default'; + +export default function webpackConfigStyleguide(speedupLocalDevelopment, optimize = false) { + const config = defaultConfig(speedupLocalDevelopment, optimize); + + config.entry = './assets/ui/styleguide/js/styleguide.js'; + config.output = { + path: path.resolve(__dirname, '../../public/frontend/styleguide/js'), + filename: 'styleguide.js', + }; + + return config; +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/configured-tasks.js b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/configured-tasks.js new file mode 100755 index 0000000000..f9f8e90f8e --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/configured-tasks.js @@ -0,0 +1,147 @@ +import gulp from 'gulp'; + +import consoleArguments from './console-arguments'; + +import createImagesTask from './tasks/images'; +import createEslintTask from './tasks/eslint'; +import createStylelintTask from './tasks/stylelint'; +import createCleanTask from './tasks/clean'; +import createCopyTask from './tasks/copy'; +import { createCssLocalTask, createCssOptimizedTask } from './tasks/css'; +import createBundleTask from './tasks/bundle'; +import createServerTask from './tasks/server'; +import createStyleguideTask from './tasks/livingcss'; +import webpackConfigApp from './config/webpack.config.app'; +import webpackConfigAdminExtra from './config/webpack.config.admin-extra'; +import webpackConfigStyleguide from './config/webpack.config.styleguide'; + +export const images = createImagesTask({ + src: './assets/ui/img/**', + dest: './public/frontend/img' +}); + +export const eslint = createEslintTask({ + src: './assets/ui/js/**/*.js', + failAfterError: !consoleArguments.continueAfterTestError, +}); + +export const stylelint = createStylelintTask({ + src: './assets/ui/scss/**/*.scss', +}); + +export const clean = createCleanTask({ + target: ['./public/frontend'], +}); + +export const copy = gulp.parallel( + createCopyTask({src: ['./assets/ui/fonts/**'], dest: './public/frontend/fonts'}), + createCopyTask({src: ['./assets/ui/icons/**'], dest: './public/frontend/icons'}), + createCopyTask({ src: ['./assets/ui/styleguide/assets/**'], dest: './public/frontend/styleguide/assets' }), + createCopyTask({ src: ['./assets/ui/styleguide/html/**'], dest: './public/frontend/styleguide/html' }), +); + +export const cssLocal = createCssLocalTask({ + src: './assets/ui/scss/style.scss', + dest: './public/frontend/css', +}); + +export const cssOptimized = createCssOptimizedTask({ + src: './assets/ui/scss/*.scss', + dest: './public/frontend/css', +}); + +export const bundleLocal = createBundleTask({ + config: webpackConfigApp(consoleArguments.speedupLocalDevelopment), +}); + +export const bundleOptimized = createBundleTask({ + config: webpackConfigApp(consoleArguments.speedupLocalDevelopment, true), + logStats: true, +}); + +export const bundleAdminExtraLocal = createBundleTask({ + config: webpackConfigAdminExtra(consoleArguments.speedupLocalDevelopment), +}); + +export const bundleAdminExtraOptimized = createBundleTask({ + config: webpackConfigAdminExtra(consoleArguments.speedupLocalDevelopment, true), +}); + +export const server = createServerTask({ + config: { + ui: false, + ghostMode: false, + files: [ + 'public/frontend/css/*.css', + 'public/frontend/js/*.js', + 'public/frontend/icons/**/*', + 'public/frontend/fonts/**/*', + 'public/frontend/img/**/*', + 'public/frontend/styleguide/*.html', + ], + open: false, + reloadOnRestart: true, + + proxy: { + target: '', + }, + + server: { + baseDir: '.', + }, + + notify: true, + }, +}); + +export const generateStyleguide = createStyleguideTask({ + src: './assets/ui/scss/**/*.scss', + dest: './public/frontend/styleguide', + template: './assets/ui/styleguide/templates/layout.hbs', + partials: './assets/ui/styleguide/templates/partials/*.hbs', + sortOrder: [ + { + Index: [ + 'Quarks', + 'Atoms', + 'Molecules', + 'Organisms', + 'Life forms' + ], + }, + ], +}); + +export const copyStyleguide = createCopyTask({ + src: ['./node_modules/prismjs/themes/prism-okaidia.css'], + dest: './public/frontend/styleguide/css', +}); + +export const cssStyleguideOptimized = createCssOptimizedTask({ + src: './assets/ui/styleguide/scss/*.scss', + dest: './public/frontend/styleguide/css', +}); + +export const bundleStyleguideOptimized = createBundleTask({ + config: webpackConfigStyleguide(consoleArguments.speedupLocalDevelopment, true), +}); + +export function buildOnChange(done) { + gulp.watch('./assets/ui/js/**/!(*.spec).js', bundleLocal); + gulp.watch('./assets/admin/js/**/!(*.spec).js', bundleAdminExtraLocal); + gulp.watch('./assets/ui/scss/**/*.scss', cssLocal); + gulp.watch('./assets/ui/img/**', images); + done(); +} + +export function testOnChange(done) { + gulp.watch('./assets/ui/js/**/*.js', eslint); + gulp.watch('./assets/ui/scss/**/*.scss', stylelint); + gulp.watch('./assets/ui/scss/**/*.scss', cssLocal); + gulp.watch([ + './assets/ui/scss/**/*.md', + './assets/ui/styleguide/**/*.hbs', + ], generateStyleguide); + gulp.watch('./assets/ui/styleguide/scss/**/*.scss', cssStyleguideOptimized); + done(); +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/console-arguments.js b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/console-arguments.js new file mode 100644 index 0000000000..1929a51ca4 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/console-arguments.js @@ -0,0 +1,53 @@ +import yargs from 'yargs'; +import chalk from 'chalk'; + +const OPTIONS = { + logBundleStats: { + alias: 'logStats', + describe: 'Should stats from bundling be logged?', + default: false, + type: 'boolean', + }, + continueAfterTestError: { + describe: 'Should the (watch) process continue after a lint/jest error or not?', + default: false, + type: 'boolean', + }, + speedupLocalDevelopment: { + alias: 'speedupLocalDev', + describe: 'Should local dev be speeded up, but at cost of slightly different setup vs. the prod build?', + default: false, + type: 'boolean', + }, +}; + +const { argv } = yargs.options(OPTIONS); + +console.log(getCurrentArgumentsInfo(argv, OPTIONS)); + +module.exports = argv; + +function getCurrentArgumentsInfo(currentArgs, options) { + const initialResultInfo = `\n${chalk.cyan('[Arguments]')}\n`; + + return Object + .keys(options) + .reduce( + (resultInfo, optionKey) => `${resultInfo}- ${getArgumentInfo(optionKey)}`, + initialResultInfo, + ); + + function getArgumentInfo(optionKey) { + const option = options[optionKey]; + // eslint-disable-next-line max-len + return `${chalk.bold.green(optionKey)}${getAliasInfo(option)} | ${option.describe} : ${chalk.bold.red(currentArgs[optionKey])}\n`; + } + + function getAliasInfo(option) { + if (option.alias) { + return ` [${option.alias}]`; + } + + return ''; + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/tasks/bundle.js b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/tasks/bundle.js new file mode 100755 index 0000000000..618a267d6c --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/tasks/bundle.js @@ -0,0 +1,47 @@ +import webpack from 'webpack'; + +/** + * You can let webpack watch the files and rebundle on change, or you can do it + * via gulp. Gulp will probably be easier at first, since you have to configure + * multiple watches for the other src files as well. + */ +export default function createBundleTask({ + config = undefined, + watch = false, + logStats = false, +}) { + const compiler = webpack(config); + + return function bundle(done) { + if (watch) { + compiler.watch({}, handleWebpackResult); + } else { + compiler.run(handleWebpackResult); + } + + function handleWebpackResult(err, stats) { + if (err) { + console.error(err.stack || err); + if (err.details) { + console.error(err.details); + } + return; + } + + const info = stats.toJson(); + + if (stats.hasErrors()) { + console.error(info.errors); + } + + if (stats.hasWarnings()) { + console.warn(info.warnings); + } + + if (logStats) { + console.log(stats.toString()); + } + done(); + } + }; +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/tasks/clean.js b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/tasks/clean.js new file mode 100755 index 0000000000..29befa1259 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/tasks/clean.js @@ -0,0 +1,9 @@ +import del from 'del'; + +export default function createCleanTask({ + target = undefined, +}) { + return function clean() { + return del(target); + }; +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/tasks/copy.js b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/tasks/copy.js new file mode 100755 index 0000000000..36100386e8 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/tasks/copy.js @@ -0,0 +1,11 @@ +import gulp from 'gulp'; + +export default function createCopyTask({ + src = undefined, + dest = undefined, +}) { + return function copy() { + return gulp.src(src) + .pipe(gulp.dest(dest)); + }; +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/tasks/css.js b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/tasks/css.js new file mode 100755 index 0000000000..2752d04737 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/tasks/css.js @@ -0,0 +1,45 @@ +import gulp from 'gulp'; +import sass from 'gulp-sass'; +import notifier from 'node-notifier'; +import sourcemaps from 'gulp-sourcemaps'; +import postcss from 'gulp-postcss'; +import cssnano from 'cssnano'; +import autoprefixer from 'autoprefixer'; + +export function createCssLocalTask({ + src = undefined, + dest = undefined, +}) { + return function cssLocal() { + return gulp.src(src) + .pipe(sourcemaps.init()) + .pipe(sass().on('error', sassErrorHandler)) + .pipe(postcss([autoprefixer()])) + .pipe(sourcemaps.write()) + .pipe(gulp.dest(dest)); + }; +} + +export function createCssOptimizedTask({ + src = undefined, + dest = undefined, + cssnanoConfig = { + safe: true, + }, +}) { + return function cssOptimized() { + return gulp.src(src) + .pipe(sass().on('error', sassErrorHandler)) + .pipe(postcss([autoprefixer(), cssnano(cssnanoConfig)])) + .pipe(gulp.dest(dest)); + }; +} + +function sassErrorHandler(error) { + console.log(`Sass Error:\n${error.messageFormatted}`); + notifier.notify({ + title: 'Sass', + message: `Error in ${error.relativePath} at L${error.line}:C${error.column}`, + }); + this.emit('end'); +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/tasks/eslint.js b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/tasks/eslint.js new file mode 100755 index 0000000000..52b3bde112 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/tasks/eslint.js @@ -0,0 +1,28 @@ +import gulp from 'gulp'; +import eslintPlugin from 'gulp-eslint'; +import cache from 'gulp-cached'; +import path from 'path'; +import gulpif from 'gulp-if'; + +const ESLINT_CACHE = 'eslint'; + +export default function createEslintTask({ + src = undefined, + failAfterError = true, +}) { + return function eslint() { + return gulp.src(src) + .pipe(cache(ESLINT_CACHE)) + .pipe(eslintPlugin()) + .pipe(eslintPlugin.format()) + .pipe(eslintPlugin.result(removeInvalidFilesFromCache)) + .pipe(gulpif(failAfterError, eslintPlugin.failAfterError())); + }; +} + +function removeInvalidFilesFromCache(result) { + if (result.warningCount > 0 || result.errorCount > 0) { + // If a file has errors/warnings remove it from cache + delete cache.caches[ESLINT_CACHE][path.resolve(result.filePath)]; + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/tasks/images.js b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/tasks/images.js new file mode 100755 index 0000000000..477c2172c0 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/tasks/images.js @@ -0,0 +1,26 @@ +import gulp from 'gulp'; +import changed from 'gulp-changed'; +import imagemin from 'gulp-imagemin'; + +export default function createImagesTask({src = undefined, dest = undefined}) { + return function images() { + return gulp.src(src) + // Only optimize changed images + .pipe(changed(dest)) + + // Imagemin + .pipe(imagemin([ + imagemin.jpegtran({progressive: true}), + imagemin.optipng({optimizationLevel: 3}), + imagemin.svgo({ + plugins: [ + {removeViewBox: false}, + {cleanupIDs: false} + ] + }) + ])) + + // Set desitination + .pipe(gulp.dest(dest)); + }; +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/tasks/inject.js b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/tasks/inject.js new file mode 100755 index 0000000000..d03fc685ef --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/tasks/inject.js @@ -0,0 +1,16 @@ +import gulp from 'gulp'; +import injectPlugin from 'gulp-inject'; + +export default function createInjectTask({ + src = undefined, + dest = undefined, + injectables = undefined, +}) { + return function inject() { + let stream = gulp.src(src); + injectables.forEach((injectable) => { + stream = stream.pipe(injectPlugin(gulp.src(injectable.stream), injectable.config)); + }); + return stream.pipe(gulp.dest(dest)); + }; +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/tasks/jest.js b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/tasks/jest.js new file mode 100755 index 0000000000..2bc2d6e6bd --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/tasks/jest.js @@ -0,0 +1,19 @@ +import jestCli from 'jest-cli'; + +export default function createJestTask({ + config = undefined, + root = '.', + failAfterError = true, +}) { + return function jest(done) { + const onComplete = (runResults) => { + if (runResults.success === false && failAfterError === true) { + done(new Error('[jest] at least 1 test failed')); + } else { + done(); + } + }; + + jestCli.runCLI({ config }, root, onComplete); + }; +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/tasks/livingcss.js b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/tasks/livingcss.js new file mode 100644 index 0000000000..c91dc9ef21 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/tasks/livingcss.js @@ -0,0 +1,161 @@ +import gulp from 'gulp'; +import livingcss from 'gulp-livingcss'; +import path from 'path'; + +export default function createStyleguideTask({ + src = undefined, + dest = undefined, + template = undefined, + sortOrder = undefined, + partials = undefined, +}) { + return function styleguide() { + return gulp.src(src) + .pipe(livingcss(dest, { + template, + sortOrder, + preprocess(context, tmpl, Handlebars) { + Handlebars.registerHelper('json', (data) => JSON.stringify(data)); + Handlebars.registerHelper('clean', (data) => data.replace(/(\\|%5[cC])/g, '')); + + return livingcss.utils.readFileGlobs(partials, (data, file) => { + // make the name of the partial the name of the file + const partialName = path.basename(file, path.extname(file)); + Handlebars.registerPartial(partialName, data); + Handlebars.registerHelper('xif', (v1, operator, v2, options) => { + switch (operator) { + case '==': + // eslint-disable-next-line eqeqeq + return (v1 == v2) ? options.fn(this) : options.inverse(this); + case '===': + return (v1 === v2) ? options.fn(this) : options.inverse(this); + case '<': + return (v1 < v2) ? options.fn(this) : options.inverse(this); + case '<=': + return (v1 <= v2) ? options.fn(this) : options.inverse(this); + case '>': + return (v1 > v2) ? options.fn(this) : options.inverse(this); + case '>=': + return (v1 >= v2) ? options.fn(this) : options.inverse(this); + case '&&': + return (v1 && v2) ? options.fn(this) : options.inverse(this); + case '||': + return (v1 || v2) ? options.fn(this) : options.inverse(this); + default: + return options.inverse(this); + } + }); + + Handlebars.registerHelper('counter', (index) => index + 1); + Handlebars.registerHelper('version', (filename) => `${filename}?${Date.now()}`); + }); + }, + tags: { + color() { + const matches = (this.tag.description).match(/\[(.*?)\]/); + + if (matches) { + const section = this.sections[matches[1]]; + + if (section) { + section.colors = section.colors || []; + section.colors.push({ + name: this.tag.name, + hex: this.tag.type, + rgb: hexToRgb(this.tag.type), + }); + } + } + }, + spacing() { + const matches = (this.tag.description).match(/\[(.*?)\]/); + + if (matches) { + const section = this.sections[matches[1]]; + + if (section) { + section.spacings = section.spacings || []; + section.spacings.push({ + name: this.tag.name, + size: this.tag.type + }); + } + } + }, + font() { + const matches = (this.tag.description).match(/\[(.*?)\]/); + + if (matches) { + const section = this.sections[matches[1]]; + + if (section) { + section.fonts = section.fonts || []; + section.fonts.push({ + name: this.tag.name, + stack: this.tag.type + }); + } + } + }, + fontWeight() { + const matches = (this.tag.description).match(/\[(.*?)\]/); + + if (matches) { + const section = this.sections[matches[1]]; + + if (section) { + section.fontWeights = section.fontWeights || []; + section.fontWeights.push({ + name: this.tag.name, + size: this.tag.type + }); + } + } + }, + fontSize() { + const matches = (this.tag.description).match(/\[(.*?)\]/); + + if (matches) { + const section = this.sections[matches[1]]; + + if (section) { + section.fontSizes = section.fontSizes || []; + section.fontSizes.push({ + name: this.tag.name, + size: this.tag.type + }); + } + } + }, + shadow() { + const matches = (this.tag.description).match(/\[(.*?)\]/); + + if (matches) { + const section = this.sections[matches[1]]; + + if (section) { + section.shadows = section.shadows || []; + section.shadows.push({ + name: this.tag.name, + value: this.tag.type + }); + } + } + } + }, + })) + .pipe(gulp.dest(dest)); + }; +} + +function hexToRgb(hex) { + const strippedHex = hex.replace(/[^0-9A-F]/gi, ''); + const bigint = parseInt(strippedHex, 16); + /* eslint-disable no-bitwise */ + const r = (bigint >> 16) & 255; + const g = (bigint >> 8) & 255; + const b = bigint & 255; + /* eslint-enable no-bitwise */ + + return `${r}, ${g}, ${b}`; +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/tasks/server.js b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/tasks/server.js new file mode 100755 index 0000000000..f47b9faa4d --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/tasks/server.js @@ -0,0 +1,12 @@ +import browserSync from 'browser-sync'; + +export default function createServerTask({ + serverName = 'server', + config = undefined, +}) { + return function server(done) { + browserSync + .create(serverName) + .init(config, done); + }; +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/tasks/stylelint.js b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/tasks/stylelint.js new file mode 100755 index 0000000000..f9b4756848 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/bin/tasks/stylelint.js @@ -0,0 +1,21 @@ +import gulp from 'gulp'; +import stylelintPlugin from 'stylelint'; +import reporter from 'postcss-reporter'; +import postcss from 'gulp-postcss'; +import scssSyntax from 'postcss-scss'; + +export default function createStylelintTask({ + src = undefined, +}) { + return function stylelint() { + return gulp.src(src) + .pipe(postcss([ + stylelintPlugin(), + reporter({ + clearReportedMessages: true, + }), + ], { + syntax: scssSyntax, + })); + }; +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/buildUI.sh b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/buildUI.sh new file mode 100644 index 0000000000..9b6d934123 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/buildUI.sh @@ -0,0 +1,15 @@ +#!/bin/bash -e + +# Source bashrc to make nvm() available +if [ -f ~/.bashrc ]; then + source ~/.bashrc +fi + +# Delete old node_modules +rm -rf node_modules + +# Set correct node version +nvm use + +npm install +npm run build diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/gulpfile.babel.js b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/gulpfile.babel.js new file mode 100755 index 0000000000..5748d7588f --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/gulpfile.babel.js @@ -0,0 +1,87 @@ +import gulp from 'gulp'; +import chug from 'gulp-chug'; + +import { + images, + eslint, + stylelint, + clean, + copy, + cssLocal, + cssOptimized, + bundleLocal, + bundleOptimized, + bundleAdminExtraLocal, + bundleAdminExtraOptimized, + generateStyleguide, + cssStyleguideOptimized, + bundleStyleguideOptimized, + copyStyleguide, + server, + buildOnChange, + testOnChange, +} from './groundcontrol/configured-tasks'; + +const analyze = gulp.series( + eslint, + stylelint, +); + +const test = gulp.series(analyze); + +const buildStyleguide = gulp.series( + cssStyleguideOptimized, + bundleStyleguideOptimized, + generateStyleguide, + copyStyleguide, +); + +const buildLocal = gulp.series( + clean, + images, + copy, + cssLocal, + bundleLocal, + bundleAdminExtraLocal, + buildStyleguide, +); + +const buildOptimized = gulp.series( + clean, + images, + copy, + cssOptimized, + bundleOptimized, + bundleAdminExtraOptimized, + buildStyleguide, +); + +const testAndBuildOptimized = gulp.series( + test, + buildOptimized, +); + +const startLocal = gulp.series( + analyze, + buildLocal, + server, + buildOnChange, + testOnChange, +); + +const startOptimized = gulp.series( + analyze, + buildOptimized, + server, +); + +const buildCmsAssets = gulp.series(() => gulp.src('vendor/kunstmaan/bundles-cms/gulpfile.babel.js', { read: false }) + .pipe(chug({ + args: [ + '--rootPath', + '../../../../../../../public/assets/', + ], + tasks: ['buildOptimized'], + }))); + +export { test, buildOptimized, testAndBuildOptimized, startLocal, startOptimized, buildCmsAssets }; diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/package.json b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/package.json new file mode 100644 index 0000000000..1db5f49659 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/groundcontrol/package.json @@ -0,0 +1,61 @@ +{ + "license": "UNLICENSED", + "private": true, + "devDependencies": { + "@kunstmaan/eslint-config": "^1.1.0", + "@kunstmaan/stylelint-config": "^1.1.1", + "autoprefixer": "^6.7.6", + "@babel/cli": "^7.2.3", + "@babel/core": "^7.2.2", + "@babel/polyfill": "^7.2.5", + "@babel/preset-env": "^7.3.1", + "@babel/register": "^7.0.0", + "babel-loader": "^8.0.5", + "bootstrap.native": "^2.0.11", + "browser-sync": "^2.18.8", + "chalk": "^1.1.3", + "clipboard": "^1.7.1", + "cssnano": "^3.10.0", + "del": "^2.2.2", + "gulp": "^4.0.0", + "gulp-autoprefixer": "^3.1.1", + "gulp-cached": "^1.1.1", + "gulp-changed": "^3.2.0", + "gulp-chug": "^0.5.1", + "gulp-eslint": "^4.0.0", + "gulp-if": "^2.0.2", + "gulp-imagemin": "^4.1.0", + "gulp-inject": "^4.2.0", + "gulp-livingcss": "^2.1.0", + "gulp-postcss": "^6.3.0", + "gulp-sass": "^3.1.0", + "gulp-sourcemaps": "^2.4.1", + "jest-cli": "^19.0.2", + "node-notifier": "^5.0.2", + "postcss-reporter": "^3.0.0", + "postcss-scss": "^1.0.6", + "prismjs": "^1.6.0", + "stylelint": "^9.6.0", + "webpack": "^4.29.0", + "yargs": "^7.0.2", + "imports-loader": "^0.8.0" + }, + "dependencies": { + "@snipsonian/parent": "git://github.com/Kunstmaan/snipsonian.git#67c2bdfe502c23ded15131afdc5b7b82ea18d721", + "flatpickr": "^4.5.2", + "svgxuse": "^1.2.6", + "focus-visible": "^4.1.5", + "gsap": "^2.1.1", + "intersection-observer": "^0.5.1", + "picturefill": "^3.0.3" + }, + "scripts": { + "start": "gulp startLocal --continueAfterTestError --speedupLocalDev", + "startOptimized": "gulp startOptimized", + "test": "gulp test", + "build": "gulp buildOptimized", + "testAndBuild": "gulp testAndBuildOptimized", + "buildCmsAssets": "npm run installCmsAssetsNodemodules && gulp buildCmsAssets", + "installCmsAssetsNodemodules": "cd vendor/kunstmaan/bundles-cms && npm install" + } +} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/bundles/TwigBundle/Exception/error.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/bundles/TwigBundle/Exception/error.html.twig new file mode 100644 index 0000000000..4aca331fbe --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/bundles/TwigBundle/Exception/error.html.twig @@ -0,0 +1,3 @@ +{% extends 'error/error.html.twig' %} + +{% set status_code = 'other' %} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/bundles/TwigBundle/Exception/error404.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/bundles/TwigBundle/Exception/error404.html.twig new file mode 100644 index 0000000000..c80e0696c1 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/bundles/TwigBundle/Exception/error404.html.twig @@ -0,0 +1 @@ +{% extends 'error/error.html.twig' %} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/bundles/TwigBundle/Exception/error500.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/bundles/TwigBundle/Exception/error500.html.twig new file mode 100644 index 0000000000..c80e0696c1 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/bundles/TwigBundle/Exception/error500.html.twig @@ -0,0 +1 @@ +{% extends 'error/error.html.twig' %} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/bundles/TwigBundle/Exception/error503.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/bundles/TwigBundle/Exception/error503.html.twig new file mode 100644 index 0000000000..c80e0696c1 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/bundles/TwigBundle/Exception/error503.html.twig @@ -0,0 +1 @@ +{% extends 'error/error.html.twig' %} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/error/error.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/error/error.html.twig new file mode 100644 index 0000000000..4ccda05714 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/error/error.html.twig @@ -0,0 +1,14 @@ +{% extends 'error/layout.html.twig' %} + +{% block title %} - {{ status_code }} - {{ status_text }} - {{ websitetitle }}{% endblock %} + +{% block content %} +

    Sorry, an error has occurred

    +

    + {% if status_code == 404 %} + The page you requested could not be found. + {% else %} + The server returned a "{{ status_code }} {{ status_text }}". + {% endif %} +

    +{% endblock %} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/error/layout.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/error/layout.html.twig new file mode 100755 index 0000000000..030a14a534 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/error/layout.html.twig @@ -0,0 +1,39 @@ +{% spaceless %} +{% set htmlLocale = app.request.locale|default(defaultlocale)|slice(0,2) %} + + + + + + + + + {{ websitetitle | trans }}{% block title %}{% endblock %} + + + {# Favicons #} + {% include 'layout/_favicons.html.twig' %} + + {# Webfonts #} + {% include 'layout/_webfonts.html.twig' %} + + {# CSS #} + {% include 'layout/_css.html.twig' %} + + + + + {# Google Tagmanager #} + {% include 'layout/_googletagmanager.html.twig' %} + + {# Outdated browser message #} + {% include 'layout/_outdatedbrowser.html.twig' %} + + {# Content #} +
    + {% block content %}{% endblock %} +
    + + + +{% endspaceless %} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/form/fields.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/form/fields.html.twig new file mode 100755 index 0000000000..9c0456ab0d --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/form/fields.html.twig @@ -0,0 +1,197 @@ +{# Widget attributes #} +{% block widget_container_attributes %} +{% spaceless %} + {% if id is not empty %}id="{{ id }}" {% endif %} + {% for attrname, attrvalue in attr %}{{ attrname }}="{{ attrvalue }}" {% endfor %} +{% endspaceless %} +{% endblock widget_container_attributes %} + + +{# Form row #} +{% block form_row %} +{% spaceless %} +
    + {{ form_label(form) }} + {{ form_widget(form) }} + {{ form_errors(form) }} +
    +{% endspaceless %} +{% endblock form_row %} + + +{# Form label #} +{% block form_label %} +{% spaceless %} + {% if label is not same as(false) %} + {% if not compound %} + {% set label_attr = label_attr|merge({'for': id}) %} + {% endif %} + {% set label_attr = label_attr|merge({'class': (label_attr.class|default('') ~ ' form-control-label')|trim}) %} + {% if required %} + {% set label_attr = label_attr|merge({'class': label_attr.class ~ ' form-control-label--required'}) %} + {% endif %} + {% if label is empty %} + {% set label = name|humanize %} + {% endif %} + + {{ label|trans({}, translation_domain) }}{% if required %} *{% endif %} + + {% endif %} +{% endspaceless %} +{% endblock form_label %} + + +{# Form widget: Hidden #} +{% block hidden_widget %} +{% spaceless %} + +{% endspaceless %} +{% endblock hidden_widget %} + + +{# Form widget: Input #} +{% block form_widget_simple %} +{% spaceless %} + {% set type = type|default('text') %} + {% set class = (attr.class|default('') ~ ' form-control form-control--input') %} + {% set attr = attr|merge({'class': class|trim}) %} + +{% endspaceless %} +{% endblock form_widget_simple %} + + +{# Form widget: Textarea #} +{% block textarea_widget %} +{% spaceless %} + {% set class = (attr.class|default('') ~ ' form-control form-control--textarea form-widget--textarea') %} + {% set attr = attr|merge({'class': class|trim}) %} + +{% endspaceless %} +{% endblock textarea_widget %} + + +{# Form widget: Selectbox #} +{% block choice_widget_collapsed %} +{% spaceless %} +
    + + {% set class = (attr.class|default('') ~ ' form-control form-control--select') %} + {% set attr = attr|merge({'class': class|trim}) %} + + +
    +{% endspaceless %} +{% endblock choice_widget_collapsed %} + + +{# Form widget: Choice expanded - Radiobutton / Checkbox #} +{% block choice_widget_expanded %} +{% spaceless %} +
    + {% for child in form %} + {{ form_widget(child, { 'required': false }) }} + {% endfor %} +
    +{% endspaceless %} +{% endblock choice_widget_expanded %} + + +{# Form widget: Radiobutton #} +{% block radio_widget %} +{% spaceless %} +
    + {% if required and not compound %} + {% set label_attr = label_attr|merge({'class': (label_attr.class|default('') ~ ' required')|trim}) %} + {% endif %} + {% if label is empty %} + {% set label = name|humanize %} + {% endif %} + {% set class = (attr.class|default('') ~ ' form-control-choice') %} + {% set attr = attr|merge({'class': class|trim}) %} + + +
    +{% endspaceless %} +{% endblock radio_widget %} + + +{# Form widget: Checkbox #} +{% block checkbox_widget %} +{% spaceless %} +
    + {% if required %} + {% set label_attr = label_attr|merge({'class': (label_attr.class|default('') ~ ' required')|trim}) %} + {% endif %} + {% if label is empty %} + {% set label = name|humanize %} + {% endif %} + {% set class = (attr.class|default('') ~ ' form-control-choice') %} + {% set attr = attr|merge({'class': class|trim}) %} + + +
    +{% endspaceless %} +{% endblock checkbox_widget %} + + +{# Form widget: File upload #} +{% block file_widget %} +{% spaceless %} +
    + {{ block('form_widget') }} +
    +{% endspaceless %} +{% endblock %} + + +{# Form errors #} +{% block form_errors %} +{% spaceless %} + {% if errors|length > 0 %} + {% for error in errors %} + {{ error.message }} + {% endfor %} + {% endif %} +{% endspaceless %} +{% endblock form_errors %} + + +{# Button row #} +{% block button_row %} +{% spaceless %} +
    + {{ form_widget(form) }} +
    +{% endspaceless %} +{% endblock button_row %} + + +{# Submit button #} +{% block submit_widget %} +{% spaceless %} +
    + {% set type = type|default('submit') %} + {{ block('button_widget') }} +
    +{% endspaceless %} +{% endblock submit_widget %} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/layout/_breadcrumbs.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/layout/_breadcrumbs.html.twig new file mode 100644 index 0000000000..5f04706310 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/layout/_breadcrumbs.html.twig @@ -0,0 +1,26 @@ +{% if nodemenu is defined and nodemenu.breadCrumb|length > 1 %} +
    + +
    +{% endif %} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/layout/_cookieconsent.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/layout/_cookieconsent.html.twig new file mode 100644 index 0000000000..d82fa026dc --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/layout/_cookieconsent.html.twig @@ -0,0 +1,6 @@ + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/layout/_css.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/layout/_css.html.twig new file mode 100644 index 0000000000..e39a2dde67 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/layout/_css.html.twig @@ -0,0 +1,3 @@ +{% block css %} + +{% endblock %} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/layout/_favicons.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/layout/_favicons.html.twig new file mode 100644 index 0000000000..3bec65f6f6 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/layout/_favicons.html.twig @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/layout/_footer.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/layout/_footer.html.twig new file mode 100644 index 0000000000..2f38cc0c6a --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/layout/_footer.html.twig @@ -0,0 +1,68 @@ +
    + {# Main footer #} + {% if nodemenu is defined %} +
    +
    + {# Footer navigation #} + {% set activeSubnode = nodemenu.getActiveForDepth(1) %} + {% for node in activeSubnode.children %} + {% if not node.node.isHiddenFromNav() and node.node.internalName != 'contact' %} +
    + +
    + {% endif %} + {% endfor %} +
    +
    + {% endif %} + + + {# Sub-footer #} +
    +
    +
    +

    + © {{ "now"|date("Y") }} + {% if nodemenu is defined %} + {% set sitemap = nodemenu.getNodeByInternalName('sitemap') %} + {% if (sitemap != null and sitemap.online) %}- {{ sitemap.title }}{% endif %} + {% endif %} +

    +

    + Created by Kunstmaan +

    +
    +
    +
    +
    diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/layout/_googletagmanager.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/layout/_googletagmanager.html.twig new file mode 100644 index 0000000000..0eb303aa93 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/layout/_googletagmanager.html.twig @@ -0,0 +1,10 @@ +{% if gtm_code is defined %} + + + + +{% endif %} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/layout/_header.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/layout/_header.html.twig new file mode 100644 index 0000000000..6420c22536 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/layout/_header.html.twig @@ -0,0 +1,62 @@ +{# Default header #} +{% if nodemenu is defined %} +
    +
    + + {# Logo #} + {% set homepagePageNode = nodemenu.getNodeByInternalName('homepage') %} + + + + {# Main navigation #} + + + + {# Search #} + {% set searchPageNode = nodemenu.getNodeByInternalName('search') %} + {% if searchPageNode %} +
    +
    +
    + + +
    +
    +
    + {% endif %} + + + {# Language nav #} + {% set langs = get_locales() %} + {% if langs|length > 1 %} +
    + + {{ app.request.locale }} + + +
    + {% endif %} +
    +
    +{% endif %} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/layout/_js_footer.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/layout/_js_footer.html.twig new file mode 100644 index 0000000000..01b9746703 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/layout/_js_footer.html.twig @@ -0,0 +1,3 @@ +{% block jsBundle %} + +{% endblock %} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/layout/_outdatedbrowser.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/layout/_outdatedbrowser.html.twig new file mode 100644 index 0000000000..08487b6460 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/layout/_outdatedbrowser.html.twig @@ -0,0 +1,22 @@ + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/layout/_webfonts.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/layout/_webfonts.html.twig new file mode 100644 index 0000000000..ee790f9206 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/layout/_webfonts.html.twig @@ -0,0 +1,3 @@ +{% block webfonts %} + +{% endblock %} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/layout/layout.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/layout/layout.html.twig new file mode 100755 index 0000000000..78cc6d8b99 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/layout/layout.html.twig @@ -0,0 +1,81 @@ +{% spaceless %} +{% set htmlLocale = app.request.locale|default(defaultlocale)|slice(0,2) %} + + + + + + + + + {% set node = null %} + {% if nodetranslation is defined %} + {% set node = nodetranslation.node %} + {% endif %} + {% set nodemenu = get_node_menu(app.request.locale, node) %} + {% block title %} + {% if page is defined and nodemenu.getActiveForDepth(2) is not null %} + {{ get_title_for(page) ~ ' - ' ~ websitetitle|trans }} + {% else %} + {{ websitetitle | trans }} + {% if page is defined %} + {% set seo = get_seo_for(page) %} + {% if seo is defined and seo.metaTitle is not empty %} - {{ seo.metaTitle }}{% endif %} + {% endif %} + {% endif %} + {% endblock %} + + + {% if page is defined %} + {{ render_seo_metadata_for(page) }} + {% endif %} + + {# Favicons #} + {% include 'layout/_favicons.html.twig' %} + + {# Webfonts #} + {% include 'layout/_webfonts.html.twig' %} + + {# CSS #} + {% include 'layout/_css.html.twig' %} + +{% endspaceless %} + + + {# Google Tagmanager #} + {% include 'layout/_googletagmanager.html.twig' %} + + {# Outdated browser message #} + {% include 'layout/_outdatedbrowser.html.twig' %} + + {# Header #} + {% block header %} + {% include 'layout/_header.html.twig' %} + {% endblock %} + + {# Breadcrumbs #} + {% block breadcrumbs %} + {% include 'layout/_breadcrumbs.html.twig' %} + {% endblock %} + + {# Content #} +
    + {% block content %}{% endblock %} +
    + + {# Footer #} + {% block footer %} + {% include 'layout/_footer.html.twig' %} + {% endblock %} + + {# Cookieconsent #} + {% block cookieconsent %} + {% include 'layout/_cookieconsent.html.twig' %} + {% endblock %} + + {# JS Footer #} + {% block jsBundle %} + {% include 'layout/_js_footer.html.twig' %} + {% endblock %} + + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/macros/_image-url.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/macros/_image-url.html.twig new file mode 100644 index 0000000000..0226f0bbd7 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/macros/_image-url.html.twig @@ -0,0 +1,50 @@ +{% macro getImageUrl(media, filter) %}{% spaceless %} + {% if media %} + {% set type = media.url|lower|split('.')|last %} + + {% if type == 'svg' or 'image/svg' in media.contentType or type == "gif" %} + {% if app.request %} + {% set imgUrl = asset(media.url) %} + {% endif %} + {% elseif 'remote/image' in media.contentType %} + {% if app.request %} + {% set imgUrl = asset(media.url|imagine_filter(filter ~ '_external')) %} + {% endif %} + {% else %} + {% if app.request %} + {% set imgUrl = asset(media.url|imagine_filter(filter)) %} + {% endif %} + {% endif %} + + {{ imgUrl | replace({' ': '%20'}) }} + {% endif %} +{% endspaceless %}{% endmacro %} + +{% macro getImageUrlString(media, filter) %}{% spaceless %} + {% if media %} + {% set type = media|lower|split('.')|last %} + + {% if type == 'svg' %} + {% set imgUrl = asset(media) %} + {% elseif 'https://' in media %} + {% set imgUrl = asset(media|imagine_filter(filter ~ '_external')) %} + {% else %} + {% set imgUrl = asset(media|imagine_filter(filter)) %} + {% endif %} + + {{ imgUrl | replace({' ': '%20'}) }} + {% endif %} +{% endspaceless %}{% endmacro %} + +{% macro getImageDimensions(url) %} + {% set dimensions = get_image_dimensions(url) %} + + {% if dimensions is defined and dimensions is not null %} + {% if dimensions.height is defined and dimensions.height is not empty %} + + {% endif %} + {% if dimensions.width is defined and dimensions.width is not empty %} + + {% endif %} + {% endif %} +{% endmacro %} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/page/layout.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/page/layout.html.twig new file mode 100755 index 0000000000..7a3b2f3a0c --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/page/layout.html.twig @@ -0,0 +1 @@ +{% extends 'layout/layout.html.twig' %} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/pages/content_page/pagetemplate.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/pages/content_page/pagetemplate.html.twig new file mode 100644 index 0000000000..bf757c1388 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/pages/content_page/pagetemplate.html.twig @@ -0,0 +1 @@ +{{ render_pageparts(page, 'main') }} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/pages/content_page/view.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/pages/content_page/view.html.twig new file mode 100644 index 0000000000..c54511955a --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/pages/content_page/view.html.twig @@ -0,0 +1,5 @@ +{% extends 'page/layout.html.twig' %} + +{% block content %} + {{ render_pagetemplate(page) }} +{% endblock %} diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/pages/home_page/pagetemplate.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/pages/home_page/pagetemplate.html.twig new file mode 100644 index 0000000000..f664d73024 --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/pages/home_page/pagetemplate.html.twig @@ -0,0 +1,2 @@ +{{ render_pageparts(page, 'main') }} + diff --git a/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/pages/home_page/view.html.twig b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/pages/home_page/view.html.twig new file mode 100644 index 0000000000..8db41d0eee --- /dev/null +++ b/src/Kunstmaan/GeneratorBundle/Resources/skeleton/website-skeleton/templates/pages/home_page/view.html.twig @@ -0,0 +1,28 @@ +{% extends 'page/layout.html.twig' %} + +{# Extra body classes #} +{% block extra_body_classes %} homepage{% endblock %} + +{# Breadcrumbs #} +{% block breadcrumbs %}{% endblock %} + +{# Content #} +{% block content %} + {{ render_pagetemplate(page) }} +{% endblock %} + +{% block footerscripts %} + + +{% endblock %} diff --git a/src/Kunstmaan/GeneratorBundle/composer.json b/src/Kunstmaan/GeneratorBundle/composer.json index 91cc929453..c6081e6bcc 100644 --- a/src/Kunstmaan/GeneratorBundle/composer.json +++ b/src/Kunstmaan/GeneratorBundle/composer.json @@ -26,7 +26,8 @@ "kunstmaan/media-pagepart-bundle": "^5.9|^6.0", "kunstmaan/node-bundle": "^5.9|^6.0", "kunstmaan/pagepart-bundle": "^5.9|^6.0", - "kunstmaan/sensio-generator-bundle": "^3.2" + "kunstmaan/sensio-generator-bundle": "^3.2", + "symfony/maker-bundle": "^1.11" }, "require-dev": { "matthiasnoback/symfony-config-test": "^4.0", diff --git a/src/Kunstmaan/PagePartBundle/DependencyInjection/Configuration.php b/src/Kunstmaan/PagePartBundle/DependencyInjection/Configuration.php index e9562f4793..a7aeedb658 100644 --- a/src/Kunstmaan/PagePartBundle/DependencyInjection/Configuration.php +++ b/src/Kunstmaan/PagePartBundle/DependencyInjection/Configuration.php @@ -56,6 +56,7 @@ public function getConfigTreeBuilder() ->scalarNode('name')->end() ->scalarNode('span')->defaultValue(12)->end() ->scalarNode('template')->end() + ->booleanNode('auto_spacer')->defaultFalse()->end() ->variableNode('rows') ->validate()->ifTrue(function ($element) { return !\is_array($element); diff --git a/src/Kunstmaan/PagePartBundle/PageTemplate/PageTemplateConfigurationParser.php b/src/Kunstmaan/PagePartBundle/PageTemplate/PageTemplateConfigurationParser.php index 8ce4e47048..4136b18909 100644 --- a/src/Kunstmaan/PagePartBundle/PageTemplate/PageTemplateConfigurationParser.php +++ b/src/Kunstmaan/PagePartBundle/PageTemplate/PageTemplateConfigurationParser.php @@ -76,9 +76,10 @@ private function buildRegion($rawRegion) 'name' => null, 'span' => 12, 'template' => null, + 'auto_spacer' => false, ], $rawRegion); - return new Region($rawRegion['name'], $rawRegion['span'], $rawRegion['template'], $children, $rows); + return new Region($rawRegion['name'], $rawRegion['span'], $rawRegion['template'], $children, $rows, $rawRegion['auto_spacer']); } /** diff --git a/src/Kunstmaan/PagePartBundle/PageTemplate/Region.php b/src/Kunstmaan/PagePartBundle/PageTemplate/Region.php index 8411ff254b..ec5f915c96 100644 --- a/src/Kunstmaan/PagePartBundle/PageTemplate/Region.php +++ b/src/Kunstmaan/PagePartBundle/PageTemplate/Region.php @@ -32,19 +32,23 @@ class Region */ protected $rows; + /** @var bool */ + private $autoSpacer; + /** * @param string $name * @param number $span * @param string $template * @param array $children */ - public function __construct($name, $span, $template = null, $children = [], $rows = []) + public function __construct($name, $span, $template = null, $children = [], $rows = [], $autoSpacer = null) { $this->setName($name); $this->setSpan($span); $this->setTemplate($template); $this->setChildren($children); $this->setRows($rows); + $this->setAutoSpacer($autoSpacer ?? false); } /** @@ -146,4 +150,24 @@ public function setRows($rows) return $this; } + + /** + * @return bool + */ + public function isAutoSpacer(): bool + { + return $this->autoSpacer; + } + + /** + * @param bool $autoSpacer + * + * @return Region + */ + public function setAutoSpacer($autoSpacer) + { + $this->autoSpacer = $autoSpacer; + + return $this; + } } diff --git a/src/Kunstmaan/PagePartBundle/Resources/translations/validators.en.yml b/src/Kunstmaan/PagePartBundle/Resources/translations/validators.en.yml index 84cd29330c..d4bfc97494 100644 --- a/src/Kunstmaan/PagePartBundle/Resources/translations/validators.en.yml +++ b/src/Kunstmaan/PagePartBundle/Resources/translations/validators.en.yml @@ -1,3 +1,7 @@ headerpagepart: niv.not_blank: Niv is required. title.not_blank: Title is required. + +pageparts: + audio: + invalid_file: 'Invalid audio file selected. Supported formats are .aac and mp3' diff --git a/src/Kunstmaan/PagePartBundle/Resources/views/FormWidgets/PageTemplateWidget/widget.html.twig b/src/Kunstmaan/PagePartBundle/Resources/views/FormWidgets/PageTemplateWidget/widget.html.twig index 08ef4d6abb..83109841fb 100644 --- a/src/Kunstmaan/PagePartBundle/Resources/views/FormWidgets/PageTemplateWidget/widget.html.twig +++ b/src/Kunstmaan/PagePartBundle/Resources/views/FormWidgets/PageTemplateWidget/widget.html.twig @@ -101,7 +101,7 @@ {% endfor %}
    {% else %} -
    +
    diff --git a/src/Kunstmaan/PagePartBundle/Resources/views/PagePartAdminTwigExtension/add_pagepart.html.twig b/src/Kunstmaan/PagePartBundle/Resources/views/PagePartAdminTwigExtension/add_pagepart.html.twig index 4216a5f67b..910fcc243c 100644 --- a/src/Kunstmaan/PagePartBundle/Resources/views/PagePartAdminTwigExtension/add_pagepart.html.twig +++ b/src/Kunstmaan/PagePartBundle/Resources/views/PagePartAdminTwigExtension/add_pagepart.html.twig @@ -13,4 +13,4 @@ {% endfor %} {% endif %} -
    \ No newline at end of file +
    diff --git a/src/Kunstmaan/PagePartBundle/Resources/views/PagePartAdminTwigExtension/widget.html.twig b/src/Kunstmaan/PagePartBundle/Resources/views/PagePartAdminTwigExtension/widget.html.twig index 725ea77dbb..69acad851f 100644 --- a/src/Kunstmaan/PagePartBundle/Resources/views/PagePartAdminTwigExtension/widget.html.twig +++ b/src/Kunstmaan/PagePartBundle/Resources/views/PagePartAdminTwigExtension/widget.html.twig @@ -8,7 +8,7 @@
    {% for id, pagepart in pagepartadmin.pagepartmap %} - {% include '@KunstmaanPagePart/PagePartAdminTwigExtension/pagepart.html.twig' with { 'id': id, 'pagepartadmin': pagepartadmin, 'editmode': false} %} + {% include '@KunstmaanPagePart/PagePartAdminTwigExtension/pagepart.html.twig' with { 'id': id, 'pagepartadmin': pagepartadmin, 'editmode': false } %} {% endfor %}