diff --git a/manifest.dnn b/manifest.dnn index 4edd228..eec7490 100644 --- a/manifest.dnn +++ b/manifest.dnn @@ -1,6 +1,6 @@ - + DNNCommunityTheme A DNN Theme by and for the DNN Community MyIcon.png diff --git a/menus/desktop/RazorMenu.cshtml b/menus/desktop/RazorMenu.cshtml new file mode 100644 index 0000000..b23935f --- /dev/null +++ b/menus/desktop/RazorMenu.cshtml @@ -0,0 +1,39 @@ +@using DotNetNuke.Web.DDRMenu; +@using System.Dynamic; +@inherits DotNetNuke.Web.Razor.DotNetNukeWebPage + + + +@helper RenderPages(IEnumerable pages) +{ + if (!pages.Any()) + { + return; + } + + foreach (var page in pages) + { + var hasChildren = page.HasChildren(); + var attrTarget = !string.IsNullOrEmpty(page.Target) ? ("target=\"" + page.Target + "\"") :string.Empty; + +
  • + @if (page.Enabled) + { + @page.Text + } + else + { + @page.Text + } + + @if (hasChildren) + { +
      + @RenderPages(page.Children) +
    + } +
    • + } +} \ No newline at end of file diff --git a/menus/main/MainMenu-menudef.xml b/menus/desktop/menudef.xml similarity index 60% rename from menus/main/MainMenu-menudef.xml rename to menus/desktop/menudef.xml index 2399432..e863b39 100644 --- a/menus/main/MainMenu-menudef.xml +++ b/menus/desktop/menudef.xml @@ -1,4 +1,4 @@ - + \ No newline at end of file diff --git a/menus/main/MainMenu.txt b/menus/main/MainMenu.txt deleted file mode 100644 index 15e801c..0000000 --- a/menus/main/MainMenu.txt +++ /dev/null @@ -1,37 +0,0 @@ - - - [>NODE-TOP] - - - [?ENABLED] - [=TEXT] - [?ELSE] - [=TEXT] - [/?] - - [?NODE] -
      - [*>NODE] -
    - [/?] - - [/>] - - [>NODE] -
  • - - [?ENABLED] - [=TEXT] - [?ELSE] - [=TEXT] - [/?] - - [?NODE] -
      - [*>NODE] -
    - [/?] -
    • - [/>] \ No newline at end of file diff --git a/menus/mobile/RazorMenu.cshtml b/menus/mobile/RazorMenu.cshtml new file mode 100644 index 0000000..72c1f67 --- /dev/null +++ b/menus/mobile/RazorMenu.cshtml @@ -0,0 +1,50 @@ +@using DotNetNuke.Web.DDRMenu; +@using System.Dynamic; +@inherits DotNetNuke.Web.Razor.DotNetNukeWebPage + + + + + +@helper RenderPages(IEnumerable pages) +{ + if (!pages.Any()) + { + return; + } + + foreach (var page in pages) + { + var hasChildren = page.HasChildren(); + var pageDesc = Html.Raw(!string.IsNullOrEmpty(page.Description) ? ("
    " + @page.Description + "") :string.Empty); + var attrTarget = !string.IsNullOrEmpty(page.Target) ? ("target=\"" + page.Target + "\"") :string.Empty; + +
  • + @if (page.Enabled) + { + @page.Text @pageDesc + } + else + { + @page.Text @pageDesc + } + + @if (hasChildren) + { + + + } +
    • + } +} diff --git a/menus/mobile/menudef.xml b/menus/mobile/menudef.xml new file mode 100644 index 0000000..e863b39 --- /dev/null +++ b/menus/mobile/menudef.xml @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/partials/_header.ascx b/partials/_header.ascx index e787b97..127f481 100644 --- a/partials/_header.ascx +++ b/partials/_header.ascx @@ -13,11 +13,16 @@
    -
    -
    diff --git a/partials/_header.ascx.bak b/partials/_header.ascx.bak new file mode 100644 index 0000000..e7691a3 --- /dev/null +++ b/partials/_header.ascx.bak @@ -0,0 +1,27 @@ +
    +
    +
    +
    +
      +
      • +
      • +
      • +
      • +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    \ No newline at end of file diff --git a/partials/_includes.ascx b/partials/_includes.ascx index da75b98..6878bec 100644 --- a/partials/_includes.ascx +++ b/partials/_includes.ascx @@ -8,3 +8,4 @@ + \ No newline at end of file diff --git a/project-details.json b/project-details.json index c7590c5..d7d68e4 100644 --- a/project-details.json +++ b/project-details.json @@ -1,6 +1,6 @@ { "project": "DNNCommunityTheme", - "version": "1.2.1", + "version": "1.3.0", "author": "David Poindexter", "company": "nvisionative", "url": "www.nvisionative.com", diff --git a/src/js/custom.js b/src/js/custom.js index b1b99e6..e69de29 100644 --- a/src/js/custom.js +++ b/src/js/custom.js @@ -1,13 +0,0 @@ -jQuery( document ).ready(function($) { - /* SlimMenu Prep */ - $('#navigation').slimmenu({ - resizeWidth: '800', - collapserTitle: '', - animSpeed: 0, - easingEffect: null, - indentChildren: false, - childrenIndenter: ' ', - expandIcon: '', - collapseIcon: '' - }); -}); \ No newline at end of file diff --git a/src/js/customMenu.js b/src/js/customMenu.js new file mode 100644 index 0000000..4ab317d --- /dev/null +++ b/src/js/customMenu.js @@ -0,0 +1,31 @@ +/*jshint esversion: 6 */ + +// add event listeners to expands +const navExpand = [].slice.call(document.querySelectorAll('.nav-expand')); + +navExpand.forEach(item => { + item.querySelector('.nav-expand-link').addEventListener('click', () => item.classList.add('active')); + item.querySelector('.nav-back-link').addEventListener('click', () => item.classList.remove('active')); +}); + +// setup and add overlay +let overlay = document.createElement('div'); +overlay.setAttribute('id', 'body-overlay'); +document.body.appendChild(overlay).classList.add('d-none'); + +// target hamburger menu +const responsiveMenu = document.getElementById('nav-mobile'); +const bodyOverlay = document.getElementById('body-overlay'); + +responsiveMenu.addEventListener('click', function() { + // toggle menu + document.body.classList.toggle('nav-is-toggled'); + bodyOverlay.classList.toggle('d-none'); +}); + +// if overlay is clicked +bodyOverlay.addEventListener('click', function(e) { + // toggle menu and overlay + document.body.classList.toggle('nav-is-toggled'); + bodyOverlay.classList.toggle('d-none'); +}); diff --git a/src/scss/components/_dnn.scss b/src/scss/components/_dnn.scss index 3f17f70..8d09d1a 100644 --- a/src/scss/components/_dnn.scss +++ b/src/scss/components/_dnn.scss @@ -1028,7 +1028,7 @@ a.pinHelp { } .dnnRadiobutton img { - background: transparent url(../../../../../../images/radiobutton.png) no-repeat; + background: transparent url(/images/radiobutton.png) no-repeat; } .dnnRadiobutton img { diff --git a/src/scss/components/_nav.scss b/src/scss/components/_nav.scss index e227a30..b8bf633 100644 --- a/src/scss/components/_nav.scss +++ b/src/scss/components/_nav.scss @@ -1,25 +1,21 @@ /* Main Navigation */ -.nav-main { - justify-content:space-between; - position:relative; - +header { a[id*="dnnLOGO"] { - padding:1rem; + display: block; + padding: 1rem 0; + img { - height:45px; - max-height:100%; - width:auto; + height: 45px; + max-height: 100%; + width: auto; } + @include mq-max-width(400) { img { - height:30px; + height: 30px; } } } - nav { - display:flex; - align-items:center; - } } /* User Controls */ @@ -69,282 +65,236 @@ } } -/* Mobile Wrapper */ -.menu-collapser { - position:relative; - width:100%; - height:100%; - background-color:purple; + +/* Desktop Styling */ + +#nav-desktop { + + &, + ul { + display: flex; + list-style: none; + margin: 0; + padding: 0; + } + + li { + display: flex; + } + + a { + @include font-size(16); + color: $light-grey; + font-weight: 600; + text-decoration: none; + // text-transform: uppercase; + + &:hover { + color: white; + } + } + + // First Level + >li { + position: relative; + + &:hover { + >ul { + display: flex; + } + } + + >a { + display: flex; + align-items: flex-end; + padding: 1rem 1.5rem; + } + + // Below First Level + ul { + flex-direction: column; + } + + li { + &.selected>a { + background: $primary-color; + color: white; + } + + &:not(.selected)>a:hover { + background: $tertiary-color; + } + } + + // Second Level + >ul { + display: none; + position: absolute; + flex-direction: column; + top: 100%; + min-width: 250px; + max-width: 100%; + background: $secondary-color; + box-shadow: 1px 1px 5px 1px rgba(black, 0.2); + + // Below Second Level + a { + padding: 0.75rem 1.25rem; + } + + li { + flex-direction: column; + + &:not(:first-child) { + // border-top: 1px solid $dark-blue; + } + + // Below Third Level + >ul { + + // border-top: 1px solid $dark-blue; + a { + @include font-size(14); + font-weight: 700; + padding: .5rem .75rem .5rem 3rem; + } + } + } + } + } } -/* Mobile Button */ -.collapse-button { - position:absolute; - display:flex; - justify-content:center; - align-items:center; - right:15px; - top:50%; - transform: translate(0, -50%); - width:44px; - height:44px; - padding:6px; - color:$primary-color; - @include font-size(30); - text-align:center; - background-color:rgba(255,255,255, .75); - transition:all .3s ease; - cursor:pointer; - - &:hover, &:focus { - color:$grey; - } +/* Hamburger Styling */ + +$nav-height: 110px; +$nav-width: 320px; + +#body-overlay { + position: fixed; + width: 100vw; + height: 100vh; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1; + background: rgba(black, .6); } -/* Menu Styling */ -nav ul { - list-style-type:none; - margin:0; - padding:0; - - &.slimmenu { - /* Desktop Top Level */ - > li { - position:relative; - display:inline-flex; - align-items:stretch; +.hamburger { + margin-left: auto; + color: white; + cursor: pointer; +} - + li { - margin-left:10px; - } - } - .sub-toggle { - display:inline-flex; - justify-content:center; - align-items:center; - width:32px; - height:auto; - cursor:pointer; - - &:before { - display: inline-block; - content: ""; - color:white; - margin-top:.15em; - border-top: .3em solid; - border-right: .3em solid transparent; - border-bottom: 0; - border-left: .3em solid transparent; - transition:.25s ease all; - } - } - - /* Normal Menu Style */ - &.normal > li > ul { - position:absolute; - left:0; - top:calc(100% + 1px); - z-index:999; - background:$secondary-color; - display:none; - width:auto; - border-radius:.25em; - - li { - display:flex; - position:relative; - - &:first-child { - a { - border-top-left-radius:.25em; - border-top-right-radius:.25em; - } - .sub-toggle { - border-top-right-radius:.25em; - } - } - &:last-child { - a { - border-bottom-left-radius:.25em; - border-bottom-right-radius:.25em; - } - .sub-toggle { - border-bottom-right-radius:.25em; - } - } - - &:first-child, &:last-child { - a.split { - border-bottom-right-radius:0; - border-top-right-radius:0; - } - } - } +.nav-is-toggled { + .nav-drill { + transform: translateX(0); + } +} - a { - color:white; - padding:10px 20px; - flex-grow:1; - white-space:nowrap; +.nav { + &-drill { + display: flex; + position: fixed; + z-index: 100; + top: 0; + right: 0; + width: $nav-width; + max-width: calc(100% - 80px); + height: calc(100vh - $nav-height); + background-color: $secondary-color; + overflow-y: auto; + overflow-x: hidden; + -webkit-overflow-scrolling: touch; + transition: 0.45s; + margin-top: $nav-height; + transform: translateX(100%); + + ul { + list-style: none; + margin: 0; + padding: 0; + } + } - &:hover, &:focus { - background-color:$primary-color; - } - } + &-items { + flex: 0 0 100%; + } - > li { - - /* Under 2 */ - ul { - background:$secondary-color; - position: absolute; - left:calc(100% + 1px); - top: 0; - z-index: 999; - display: none; - white-space:nowrap; - border-radius:.25em; - } - } + &-item { + display: flex; + justify-content: space-between; - .sub-toggle { - width:44px; - - &:before { - display: inline-block; - content: ""; - color:white; - border-top: .3em solid transparent; - border-right: 0; - border-bottom: .3em solid transparent; - border-left: .3em solid; - } - - &:hover, &:focus { - background-color:$primary-color; - } - } - } - - /* Mobile Menu Style */ - &.collapsed { - position:absolute; - right:0; - top:calc(100% + 1px); - z-index:999; - background:$secondary-color; - display:none; - width:auto; - min-width:100%; - border-radius:0em; - - li { - display:flex; - flex-direction:column; - position:relative; - - + li { - margin:0; - } - } + // &:not(:last-child) { + // border-bottom: solid 1px $dark-blue; + // } - a { - color:white; - padding:10px 20px 10px 20px; - flex-grow:1; - white-space:nowrap; - text-align:left; - background-color:transparent; - border:none; - border-radius:0; - - &:hover, &:focus { - background-color:$primary-color !important; - } - - &.btn.single { - &:after { - display:none; - } - ~ .sub-toggle { - display:flex; - } - } - } + .nav-link { + background-color: $secondary-color; + color: $light-grey; + } - > li { - /* Under 2 */ - ul { - background:$font-color; - position:relative; - display:none; - width:100%; - border-radius:0; - - > li { - a { - padding-left:30px; - } - /* Under 3 */ - ul { - background:$dark-grey; - position:relative; - left:auto; - - > li { - a { - padding-left:40px; - } - /* Under 4 */ - ul { - background:$dark-blue; - position:relative; - left:auto; - - > li { - a { - padding-left:50px; - } - } - } - } - } - } - } - } + &.selected { + background-color: $primary-color; - .sub-toggle { - position:absolute; - top:0; - right:0; - width:44px; - height:44px; - background-color:$secondary-color; - border-radius:0 !important; - - &:before { - display:inline-block; - content:""; - color:white; - border-top: .3em solid transparent; - border-right: 0; - border-bottom: .3em solid transparent; - border-left: .3em solid; - } - - &:hover, &:focus { - background-color:$primary-color !important; - } - - &.expanded { - background-color:$primary-color; - - &:before { - transform:rotate(90deg); - } - - } - } - } - } -} + >.nav-link { + background-color: transparent; + color: white; + } + } + + .nav-back-link { + display: flex; + align-items: center; + background: $tertiary-color; + color: white; + + i { + font-size: 1.125rem; + } + } + } + + &-link { + display: block; + flex: 1 1 auto; + padding: 0.875rem 1rem; + font-size: 1rem; + line-height: 1.5em; + font-weight: 500; + + .link-description { + font-size: .875rem; + font-weight: 400; + } + } + + &-expand { + &-content { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform: translateX(100%); + background-color: $secondary-color; + transition: 0.3s; + visibility: hidden; + } + + &-link { + flex-grow: 0; + font-size: 1.125rem; + display: flex; + align-items: center; + } + + &.active { + >.nav-expand-content { + transform: translateX(0); + visibility: visible; + } + } + } +} \ No newline at end of file diff --git a/src/scss/variables/_colors.scss.bak b/src/scss/variables/_colors.scss.bak new file mode 100644 index 0000000..c2e7bc0 --- /dev/null +++ b/src/scss/variables/_colors.scss.bak @@ -0,0 +1,13 @@ +// Colors +$light-grey: #EBE4E4 !default; +$grey:#7d7d7d !default; +$dark-grey: #333333 !default; +$dark-blue: #012b4c !default; + +$primary-color: #00A7EA !default; +$secondary-color: #4C282A !default; +$tertiary-color: #7d7d7d !default; + +$border-color: #bbb !default; +$link-color: $primary-color !default; +$font-color: #1a1a1a !default;