diff --git a/gulpfile.js b/gulpfile.js index aa663e93..e591f1d3 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -5,27 +5,34 @@ elixir (function (mix) { // vendor files mix .scripts ([ - 'bootstrap/dist/js/bootstrap.min.js', 'jquery/dist/jquery.min.js', + 'tether/dist/js/tether.min.js', + 'bootstrap/dist/js/bootstrap.min.js', + 'responsive-bootstrap-toolkit/dist/bootstrap-toolkit.js', 'metisMenu/dist/metisMenu.min.js', - 'nprogress/nprogress.js', 'tinycolor/dist/tinycolor-min.js', - 'tether/dist/js/tether.min.js' + 'jquery.are-you-sure/jquery.are-you-sure.js', + '../resources/assets/admin/js/app.js', ], 'public/js/vendor.js', 'bower_components'); - mix - .sass ([ - 'bootstrap/bootstrap.scss', - 'admin/_main.scss', - 'admin/**/!(_main|_variables|*-theme)*.scss' - ], 'public/css/admin/modularAdmin.css', null, {includePaths: ['bower_components', 'resources/assets/sass/admin']}); + var defaultColor = "green"; + var colors = ["blue", "seagreen", 'orange', "green", 'purple', 'red']; + var outputName; + colors.forEach (function (color) { + outputName = color == defaultColor ? 'app.css' : 'app-' + color + ".css"; + mix.copy ('resources/assets/sass/admin/_themes/' + color + '-theme.scss', 'public/css/admin/theme.scss'); + mix.sass ([ + 'admin/**/!(_imports|_variables|*-theme)*.scss', + '../admin/css/custom.css' - mix.copy('bower_components/font-awesome/css/font-awesome.min.css', 'public/css'); - mix.copy('bower_components/font-awesome/fonts', 'public/fonts'); + ], 'public/css/admin/' + outputName, null, {includePaths: ['bower_components', 'resources/assets/sass/admin']}); + }) - mix - .styles ([ - '../../../public/css/admin/modularAdmin.css', - 'admin/custom.css' - ], 'public/css/admin/style.css'); + mix.copy ('bower_components/font-awesome/css/font-awesome.min.css', 'public/css'); + mix.copy ('bower_components/font-awesome/fonts', 'public/fonts'); + mix.sass (['bootstrap/bootstrap.scss'], 'public/css/admin/bootstrap.css'); + mix.styles ([ + '../../../public/css/admin/bootstrap.css', + '../../../bower_components/animate.css/animate.css', + ], 'public/css/admin/style.css'); }); diff --git a/resources/assets/css/admin/custom.css b/resources/assets/admin/css/custom.css similarity index 100% rename from resources/assets/css/admin/custom.css rename to resources/assets/admin/css/custom.css diff --git a/resources/assets/admin/js/app.js b/resources/assets/admin/js/app.js new file mode 100644 index 00000000..fbb223ad --- /dev/null +++ b/resources/assets/admin/js/app.js @@ -0,0 +1,510 @@ +var config = window.config = {}; + +// Config reference element +var $ref = $ ("#ref"); + +// Configure responsive bootstrap toolkit +config.ResponsiveBootstrapToolkitVisibilityDivs = { + 'xs': $ ('
'), + 'sm': $ ('
'), + 'md': $ ('
'), + 'lg': $ ('
'), + 'xl': $ ('
') +}; + +ResponsiveBootstrapToolkit.use ('Custom', config.ResponsiveBootstrapToolkitVisibilityDivs); + +//validation configuration +config.validations = { + debug: true, + errorClass: 'has-error', + validClass: 'success', + errorElement: "span", + + // add error class + highlight: function (element, errorClass, validClass) { + $ (element).parents ("div.form-group") + .addClass (errorClass) + .removeClass (validClass); + }, + + // add error class + unhighlight: function (element, errorClass, validClass) { + $ (element).parents (".has-error") + .removeClass (errorClass) + .addClass (validClass); + }, + + // submit handler + submitHandler: function (form) { + form.submit (); + } +}; + +//delay time configuration +config.delayTime = 50; + +// chart configurations +config.chart = {}; + +/*********************************************** + * Animation Settings + ***********************************************/ +function animate(options) { + var animationName = "animated " + options.name; + var animationEnd = "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend"; + $ (options.selector) + .addClass (animationName) + .one (animationEnd, + function () { + $ (this).removeClass (animationName); + } + ); +} + +$ (function () { + var $itemActions = $ (".item-actions-dropdown"); + + $ (document).on ('click', function (e) { + if (!$ (e.target).closest ('.item-actions-dropdown').length) { + $itemActions.removeClass ('active'); + } + }); + + $ ('.item-actions-toggle-btn').on ('click', function (e) { + e.preventDefault (); + + var $thisActionList = $ (this).closest ('.item-actions-dropdown'); + + $itemActions.not ($thisActionList).removeClass ('active'); + + $thisActionList.toggleClass ('active'); + }); +}); + +// /*********************************************** +// * NProgress Settings +// ***********************************************/ +// var npSettings = { +// easing: 'ease', +// speed: 500 +// }; +// +// NProgress.configure (npSettings); +// $ (function () { +// setSameHeights (); +// +// var resizeTimer; +// +// $ (window).resize (function () { +// clearTimeout (resizeTimer); +// resizeTimer = setTimeout (setSameHeights, 150); +// }); +// }); + +function setSameHeights($container) { + + $container = $container || $ ('.sameheight-container'); + + var viewport = ResponsiveBootstrapToolkit.current (); + + $container.each (function () { + + var $items = $ (this).find (".sameheight-item"); + + // Get max height of items in container + var maxHeight = 0; + + $items.each (function () { + $ (this).css ({height: 'auto'}); + maxHeight = Math.max (maxHeight, $ (this).innerHeight ()); + }); + + // Set heights of items + $items.each (function () { + // Ignored viewports for item + var excludedStr = $ (this).data ('exclude') || ''; + var excluded = excludedStr.split (','); + + // Set height of element if it's not excluded on + if (excluded.indexOf (viewport) === -1) { + $ (this).innerHeight (maxHeight); + } + }); + }); +} + +$ (function () { + animate ({ + name: 'flipInY', + selector: '.error-card > .error-title-block' + }); + + setTimeout (function () { + var $el = $ ('.error-card > .error-container'); + + animate ({ + name: 'fadeInUp', + selector: $el + }); + + $el.addClass ('visible'); + }, 500); +}); + +$ (function () { + + $ ('#sidebar-menu, #customize-menu').metisMenu ({ + activeClass: 'open' + }); + + $ ('#sidebar-collapse-btn').on ('click', function (event) { + event.preventDefault (); + + $ ("#app").toggleClass ("sidebar-open"); + }); + + $ ("#sidebar-overlay").on ('click', function () { + $ ("#app").removeClass ("sidebar-open"); + }); + +}); +$ (function () { + + $ ('.actions-list > li').on ('click', '.check', function (e) { + e.preventDefault (); + + $ (this).parents ('.tasks-item') + .find ('.checkbox') + .prop ("checked", true); + + // removeActionList (); + }); + +}); + +// $ (function () { + + // // set sortable options + // $ ('.images-container').sortable ({ + // animation: 150, + // handle: ".control-btn.move", + // draggable: ".image-container", + // onMove: function (evt) { + // var $relatedElem = $ (evt.related); + // + // if ($relatedElem.hasClass ('add-image')) { + // return false; + // } + // } + // }); + // + // var $controlsButtons = $ ('.controls'); + // + // var $controlsButtonsStar = $controlsButtons.find ('.star'); + // + // $controlsButtonsStar.on ('click', function (e) { + // e.preventDefault (); + // + // $controlsButtonsStar.removeClass ('active'); + // $controlsButtonsStar.parents ('.image-container').removeClass ('main'); + // + // $ (this).addClass ('active'); + // + // $ (this).parents ('.image-container').addClass ('main'); + // }) +// }); + +$ (function () { + $ ('.nav-profile > li > a').on ('click', function () { + var $el = $ (this).next (); + + animate ({ + name: 'flipInX', + selector: $el + }); + }); +}); + +$ (function () { + // Local storage settings + var themeSettings = getThemeSettings (); + + // Elements + + var $app = $ ('#app'); + var $styleLink = $ ('#theme-style'); + var $customizeMenu = $ ('#customize-menu'); + + // Color switcher + var $customizeMenuColorBtns = $customizeMenu.find ('.color-item'); + + // Position switchers + var $customizeMenuRadioBtns = $customizeMenu.find ('.radio'); + + // ///////////////////////////////////////////////// + + // Initial state + + // On setting event, set corresponding options + + // Update customize view based on options + + // Update theme based on options + + /************************************************ + * Initial State + *************************************************/ + + setThemeSettings (); + + /************************************************ + * Events + *************************************************/ + + // set theme type + $customizeMenuColorBtns.on ('click', function () { + themeSettings.themeName = $ (this).data ('theme'); + + setThemeSettings (); + }); + + $customizeMenuRadioBtns.on ('click', function () { + + var optionName = $ (this).prop ('name'); + themeSettings[optionName] = $ (this).val (); + + setThemeSettings (); + }); + + function setThemeSettings() { + setThemeState () + .delay (config.delayTime) + .queue (function (next) { + + setThemeColor (); + setThemeControlsState (); + saveThemeSettings (); + + $ (document).trigger ("themechange"); + + next (); + }); + } + + /************************************************ + * Update theme based on options + *************************************************/ + + function setThemeState() { + // set theme type + if (themeSettings.themeName) { + $styleLink.attr ('href', window.cssPath + '/app-' + themeSettings.themeName + '.css'); + } + else { + $styleLink.attr ('href', window.cssPath + '/app.css'); + } + // App classes + $app.removeClass ('header-fixed footer-fixed sidebar-fixed'); + + // set header + $app.addClass (themeSettings.headerPosition); + + // set footer + $app.addClass (themeSettings.footerPosition); + + // set footer + $app.addClass (themeSettings.sidebarPosition); + + return $app; + } + + /************************************************ + * Update theme controls based on options + *************************************************/ + + function setThemeControlsState() { + // set color switcher + $customizeMenuColorBtns.each (function () { + if ($ (this).data ('theme') === themeSettings.themeName) { + $ (this).addClass ('active'); + } + else { + $ (this).removeClass ('active'); + } + }); + + // set radio buttons + $customizeMenuRadioBtns.each (function () { + var name = $ (this).prop ('name'); + var value = $ (this).val (); + + if (themeSettings[name] === value) { + $ (this).prop ("checked", true); + } + else { + $ (this).prop ("checked", false); + } + }); + } + + /************************************************ + * Update theme color + *************************************************/ + function setThemeColor() { + config.chart.colorPrimary = tinycolor ($ref.find (".chart .color-primary").css ("color")); + config.chart.colorSecondary = tinycolor ($ref.find (".chart .color-secondary").css ("color")); + } + + /************************************************ + * Storage Functions + *************************************************/ + + function getThemeSettings() { + var settings = (localStorage.getItem ('themeSettings')) ? JSON.parse (localStorage.getItem ('themeSettings')) : {}; + + settings.headerPosition = settings.headerPosition || ''; + settings.sidebarPosition = settings.sidebarPosition || ''; + settings.footerPosition = settings.footerPosition || ''; + + return settings; + } + + function saveThemeSettings() { + localStorage.setItem ('themeSettings', JSON.stringify (themeSettings)); + } + +}); + +$ (function () { + + $ ("body").addClass ("loaded"); + + var notification = $ ('.notification'); + if (notification.length) { + + notification.click (function () { + $ (this).fadeOut ('fast'); + }); + + setTimeout (function () { + notification.fadeOut (1500) + }, 5 * 1000) + } +}); + +/** + * Makes slug from input string + * + * @param text + * @param trimSpaces + * + * @returns {string} + */ +function slugify(text, trimSpaces) { + text = text.toString ().toLowerCase (); + + if (trimSpaces) + text = text.trim (); + + return text.replace (/ /g, '-') + .replace (/[àáâãäå]/g, "a") + .replace (/[čç]/g, "c") + .replace (/[ěèéêë]/g, "e") + .replace (/[ùúûüů]/g, "u") + .replace (/[ìíîï]/g, "i") + .replace (/[ňńñ]/g, "n") + .replace (/[òóôõö]/g, "o") + .replace (/[ýÿ]/g, "y") + .replace (/œ/g, "oe") + .replace (/ď/g, "d") + .replace (/ř/g, "r") + .replace (/š/g, "s") + .replace (/ž/g, "z") + .replace (/ť/g, "t") + .replace (/æ/g, "ae") + .replace (/[^a-z0-9\-]+/g, '') + .replace (/--+/g, '-'); +} + +// bind some custom methods +$ (document).ready (function () { + var previousTitle, previousMessage; + + $ ('.confirm').click (function (e) { + + var titleElement = $ ('#confirmation-title'); + var messageElement = $ ('#confirmation-message'); + + previousTitle = titleElement.text (); + previousMessage = messageElement.text (); + + var confirmTitle = $ (this).data ('title'); + var confirmMessage = $ (this).data ('message'); + var href = $ (this).attr ('href'); + + $ ('#confirm-button').attr ('href', href); + + if (confirmTitle) + titleElement.text (confirmTitle); + + if (confirmMessage) + messageElement.text (confirmMessage); + + $ ('#confirm-modal').modal ('show'); + + e.preventDefault (); + }); + + $ ('#confirm-modal').on ('hidden.bs.modal', function () { + $ ('#confirmation-title').text (previousTitle); + $ ('#confirmation-message').text (previousMessage); + }); + + $ ('#lockUrl').change (function () { + $ ('.slug-source').keyup (); + }); + + $ ('.slug-target').keyup (function () { + $ (this).val (slugify ($ (this).val (), false)); + $ ('#lockUrl').prop ('checked', true); + }); + + $ ('.slug-source').keyup (function () { + var source = $ (this); + var target = $ ('.slug-target'); + var locked = $ ('#lockUrl'); + + if (!locked.is (':checked')) + target.val (slugify (source.val (), true)); + }); + + $ (function () { + $ ('[data-toggle="tooltip"]').tooltip () + }); + + // find if any error occured and mark tab with that error + $ ('.has-error').each (function () { + var error = $ (this); + var tabCard = error.closest ('.tab-pane'); + + $ ("#" + tabCard.prop ('id') + "-tab").addClass ('tab-with-error'); + }); + + $('#removeTitlePhoto').click(function () { + $('#titlePhotoContainer').remove(); + // $('existingTitlePhoto').val(null); + }); + + $('form').areYouSure(); +}); + +// /*********************************************** +// * NProgress Settings +// ***********************************************/ +// +// // start load bar +// NProgress.start (); +// +// // end loading bar +// NProgress.done (); \ No newline at end of file diff --git a/resources/assets/sass/admin/_common/_styles/typography.scss b/resources/assets/sass/admin/_common/_styles/typography.scss index 60b32ee2..81efec90 100644 --- a/resources/assets/sass/admin/_common/_styles/typography.scss +++ b/resources/assets/sass/admin/_common/_styles/typography.scss @@ -48,7 +48,7 @@ } .text-primary { - color: $color-primary; + color: $color-primary !important; } .text-muted { diff --git a/resources/assets/sass/admin/_main.scss b/resources/assets/sass/admin/_main.scss index 0c99e747..1a5ec77a 100644 --- a/resources/assets/sass/admin/_main.scss +++ b/resources/assets/sass/admin/_main.scss @@ -1,6 +1,6 @@ @import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,800,700,600); -@import '_variables'; +@import 'variables'; @import 'bootstrap/scss/_variables'; @import 'bootstrap/scss/_mixins'; @import '_common/_styles/mixins'; diff --git a/resources/assets/sass/admin/_variables.scss b/resources/assets/sass/admin/_variables.scss index 4ef4cd3d..95222c61 100644 --- a/resources/assets/sass/admin/_variables.scss +++ b/resources/assets/sass/admin/_variables.scss @@ -6,6 +6,7 @@ /************************************************************* * Colors Definitions **************************************************************/ +@import '../../../../public/css/admin/theme'; $color-primary: #85CE36 !default; $color-primary-light: lighten($color-primary, 10%) !default; diff --git a/resources/assets/sass/admin/app/app.scss b/resources/assets/sass/admin/app/app.scss index 5841d9b2..aa56eae5 100644 --- a/resources/assets/sass/admin/app/app.scss +++ b/resources/assets/sass/admin/app/app.scss @@ -1,4 +1,4 @@ -@import "../imports"; +@import "../main"; .app { position: relative; diff --git a/resources/assets/sass/bootstrap/_variables.scss b/resources/assets/sass/bootstrap/_variables.scss deleted file mode 100644 index f9cad338..00000000 --- a/resources/assets/sass/bootstrap/_variables.scss +++ /dev/null @@ -1 +0,0 @@ -@import "bootstrap/scss/variables"; \ No newline at end of file diff --git a/resources/assets/sass/bootstrap/bootstrap.scss b/resources/assets/sass/bootstrap/bootstrap.scss index 3f9b3c36..bd45045e 100644 --- a/resources/assets/sass/bootstrap/bootstrap.scss +++ b/resources/assets/sass/bootstrap/bootstrap.scss @@ -1,49 +1,2 @@ - -// Core variables and mixins -@import "bootstrap/scss/variables"; -@import "bootstrap/scss/mixins"; - -// Reset and dependencies -@import "bootstrap/scss/normalize"; -@import "bootstrap/scss/print"; - -// Core CSS -@import "bootstrap/scss/reboot"; -@import "bootstrap/scss/type"; -@import "bootstrap/scss/images"; -@import "bootstrap/scss/code"; -@import "bootstrap/scss/grid"; -@import "bootstrap/scss/tables"; -@import "bootstrap/scss/forms"; -@import "bootstrap/scss/buttons"; - -// Components -@import "bootstrap/scss/animation"; -@import "bootstrap/scss/dropdown"; -@import "bootstrap/scss/button-group"; -@import "bootstrap/scss/input-group"; -//@import "bootstrap/scss/custom-forms"; -@import "bootstrap/scss/nav"; -@import "bootstrap/scss/navbar"; -@import "bootstrap/scss/card"; -@import "bootstrap/scss/breadcrumb"; -@import "bootstrap/scss/pagination"; -@import "bootstrap/scss/tags"; -//@import "bootstrap/scss/jumbotron"; -@import "bootstrap/scss/alert"; -//@import "bootstrap/scss/progress"; -@import "bootstrap/scss/media"; -@import "bootstrap/scss/list-group"; -//@import "bootstrap/scss/responsive-embed"; -@import "bootstrap/scss/close"; - -// Components w/ JavaScript -@import "bootstrap/scss/modal"; -@import "bootstrap/scss/tooltip"; -@import "bootstrap/scss/popover"; -//@import "bootstrap/scss/carousel"; - -// Utility classes -@import "bootstrap/scss/utilities"; - - +@import "variables.scss"; +@import "bower_components/bootstrap/scss/bootstrap"; \ No newline at end of file diff --git a/resources/assets/sass/bootstrap/variables.scss b/resources/assets/sass/bootstrap/variables.scss new file mode 100644 index 00000000..b23f023f --- /dev/null +++ b/resources/assets/sass/bootstrap/variables.scss @@ -0,0 +1,5 @@ +@import '../../../../public/css/admin/theme'; + +$font-family-sans-serif: 'Open Sans', sans-serif; + +@import 'bower_components/bootstrap/scss/variables'; \ No newline at end of file diff --git a/resources/views/admin/layout.blade.php b/resources/views/admin/layout.blade.php index fcd697c1..2dae3db6 100644 --- a/resources/views/admin/layout.blade.php +++ b/resources/views/admin/layout.blade.php @@ -11,15 +11,15 @@ @yield('stylesheets') @@ -76,8 +76,7 @@ - - + @yield('javascripts')