From 02ef6fc675b5ab0fc9318b8ec8830525adc4ec00 Mon Sep 17 00:00:00 2001 From: smcgrath0 Date: Tue, 11 Aug 2020 11:37:47 -0700 Subject: [PATCH 01/20] #144 fixed multinavigation comp dark themes --- .../apps/themecleanflex/components/navigation/template.vue | 2 +- .../jcr_root/content/themecleanflex/pages/css/palette.css | 4 ++++ .../content/themecleanflex/pages/css/palettes/dawn.css | 4 ++++ .../content/themecleanflex/pages/css/palettes/ocean.css | 4 ++++ 4 files changed, 13 insertions(+), 1 deletion(-) diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/navigation/template.vue b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/navigation/template.vue index 72e3df678..1cb8b7afb 100644 --- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/navigation/template.vue +++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/navigation/template.vue @@ -13,7 +13,7 @@ v-bind:href="child.childrenPages.length > 0 ? false : child.path +'.html'" v-bind:class="model.colorscheme === 'dark' ? 'text-gray-200 hover:bg-gray-200 hover:text-black' : 'text-black hover:bg-black hover:text-gray-200'">{{child.title}}
-
+
Date: Tue, 11 Aug 2020 15:04:15 -0700 Subject: [PATCH 02/20] #144 added to hatch file --- fragments/navigation/hatch.js | 3 +-- fragments/navigation/template.html | 2 +- fragments/navigation/template.vue | 18 +++++++++--------- .../components/navigation/template.vue | 16 ++++++++-------- 4 files changed, 19 insertions(+), 20 deletions(-) diff --git a/fragments/navigation/hatch.js b/fragments/navigation/hatch.js index a9a1c87bb..392dfdbe0 100644 --- a/fragments/navigation/hatch.js +++ b/fragments/navigation/hatch.js @@ -18,12 +18,11 @@ module.exports = { f.mapField(rootLink, 'child.title', "model.childrenPages", "title"); f.bindAttribute(rootLink, 'href', "child.childrenPages.length > 0 ? false : child.path +'.html'"); f.bindAttribute(rootLink, 'class', "model.colorscheme === 'dark' ? 'text-gray-200 hover:bg-gray-200 hover:text-black' : 'text-black hover:bg-black hover:text-gray-200'",false); + f.bindAttribute(rootLink, "data-per-inline", "`model.childrenPages.${i}.title`") let nested = $.find('div').eq(1); f.addIf(nested, 'child.hasChildren && child.childrenPages && child.childrenPages.length > 0') - f.bindAttribute($.find('div').eq(2), 'class', "model.colorscheme === 'dark' ? 'theme-dark': 'theme-light'", false) - let nestedLink = $.find('a').eq(1); f.addFor( nestedLink, 'child.childrenPages', 'subchild' ); f.mapField( nestedLink, 'subchild.title' ); diff --git a/fragments/navigation/template.html b/fragments/navigation/template.html index 13bfbcfb2..a83c37c3f 100644 --- a/fragments/navigation/template.html +++ b/fragments/navigation/template.html @@ -3,7 +3,7 @@
- +
diff --git a/fragments/navigation/template.vue b/fragments/navigation/template.vue index 72e3df678..008ddd9cc 100644 --- a/fragments/navigation/template.vue +++ b/fragments/navigation/template.vue @@ -8,16 +8,16 @@ 'justify-end': model.justifyitems === 'end' }" v-else>
- {{child.title}} + :key="i"> + {{child.title}}
-
- {{subchild.title}} +
+ {{subchild.title}}
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/navigation/template.vue b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/navigation/template.vue index 1cb8b7afb..008ddd9cc 100644 --- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/navigation/template.vue +++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/navigation/template.vue @@ -8,16 +8,16 @@ 'justify-end': model.justifyitems === 'end' }" v-else>
- {{child.title}} + :key="i"> + {{child.title}}
- {{subchild.title}} + {{subchild.title}}
From 1a8490dd49a3a0c8d9cff76a842b73f312ba0b5b Mon Sep 17 00:00:00 2001 From: smcgrath0 Date: Wed, 12 Aug 2020 08:38:20 -0700 Subject: [PATCH 03/20] #144 updated with latest version of percli hatch --- fragments/navigation/hatch.js | 1 - fragments/navigation/template.html | 2 +- fragments/navigation/template.vue | 16 ++++++++-------- .../components/navigation/template.vue | 16 ++++++++-------- 4 files changed, 17 insertions(+), 18 deletions(-) diff --git a/fragments/navigation/hatch.js b/fragments/navigation/hatch.js index 392dfdbe0..93b914be2 100644 --- a/fragments/navigation/hatch.js +++ b/fragments/navigation/hatch.js @@ -18,7 +18,6 @@ module.exports = { f.mapField(rootLink, 'child.title', "model.childrenPages", "title"); f.bindAttribute(rootLink, 'href', "child.childrenPages.length > 0 ? false : child.path +'.html'"); f.bindAttribute(rootLink, 'class', "model.colorscheme === 'dark' ? 'text-gray-200 hover:bg-gray-200 hover:text-black' : 'text-black hover:bg-black hover:text-gray-200'",false); - f.bindAttribute(rootLink, "data-per-inline", "`model.childrenPages.${i}.title`") let nested = $.find('div').eq(1); f.addIf(nested, 'child.hasChildren && child.childrenPages && child.childrenPages.length > 0') diff --git a/fragments/navigation/template.html b/fragments/navigation/template.html index a83c37c3f..13bfbcfb2 100644 --- a/fragments/navigation/template.html +++ b/fragments/navigation/template.html @@ -3,7 +3,7 @@
- +
diff --git a/fragments/navigation/template.vue b/fragments/navigation/template.vue index 008ddd9cc..1cb8b7afb 100644 --- a/fragments/navigation/template.vue +++ b/fragments/navigation/template.vue @@ -8,16 +8,16 @@ 'justify-end': model.justifyitems === 'end' }" v-else>
- {{child.title}} + :key="child.path || i"> + {{child.title}}
- {{subchild.title}} + {{subchild.title}}
diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/navigation/template.vue b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/navigation/template.vue index 008ddd9cc..1cb8b7afb 100644 --- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/navigation/template.vue +++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/navigation/template.vue @@ -8,16 +8,16 @@ 'justify-end': model.justifyitems === 'end' }" v-else>
- {{child.title}} + :key="child.path || i"> + {{child.title}}
- {{subchild.title}} + {{subchild.title}}
From c213bb180111f037611e25d7bfa926095f947ef9 Mon Sep 17 00:00:00 2001 From: smcgrath0 Date: Wed, 12 Aug 2020 13:37:24 -0700 Subject: [PATCH 04/20] #149 added nested dropdowns and fixed desktop nav when scrolling --- fragments/navigation/hatch.js | 26 +++++++-- fragments/navigation/template.html | 13 ++++- fragments/navigation/template.vue | 57 ++++++++++++++++--- .../components/navigation/template.vue | 57 ++++++++++++++++--- .../etc/felibs/themecleanflex/css/build.css | 24 ++++++++ .../etc/felibs/themecleanflex/styles.css | 11 +++- 6 files changed, 162 insertions(+), 26 deletions(-) diff --git a/fragments/navigation/hatch.js b/fragments/navigation/hatch.js index 93b914be2..eee6bc838 100644 --- a/fragments/navigation/hatch.js +++ b/fragments/navigation/hatch.js @@ -14,13 +14,27 @@ module.exports = { let rootItem = $.find('div').eq(0); f.addFor( rootItem, 'model.childrenPages', 'child' ); - let rootLink = $.find('a'); - f.mapField(rootLink, 'child.title', "model.childrenPages", "title"); - f.bindAttribute(rootLink, 'href', "child.childrenPages.length > 0 ? false : child.path +'.html'"); - f.bindAttribute(rootLink, 'class', "model.colorscheme === 'dark' ? 'text-gray-200 hover:bg-gray-200 hover:text-black' : 'text-black hover:bg-black hover:text-gray-200'",false); + let rootLink = $.find('a').eq(0); + f.bindAttribute( rootLink, "aria-expanded", "`active[i] ? 'true' : 'false'`") + + let allLinks = $.find('a'); + f.mapField(allLinks, 'child.title', "model.childrenPages", "title"); + f.bindAttribute(allLinks, 'href', "child.childrenPages.length > 0 ? false : child.path +'.html'"); + f.bindAttribute(allLinks, 'class', "model.colorscheme === 'dark' ? 'text-gray-200 hover:bg-gray-200 hover:text-black' : 'text-black hover:bg-black hover:text-gray-200'",false); - let nested = $.find('div').eq(1); - f.addIf(nested, 'child.hasChildren && child.childrenPages && child.childrenPages.length > 0') + let nested = $.find('div').eq(0); + f.bindAttribute( nested, 'class', `{ 'bg-secondary': active[i] }`, false); + + let nestedArrow = $.find('svg').eq(0); + f.addIf(nestedArrow, 'child.hasChildren && child.childrenPages && child.childrenPages.length > 0') + f.bindEvent(nestedArrow, 'click', "toggleItem(i)") + f.bindAttribute(nestedArrow, "style", "`transform:${active[i] ? 'rotate(180deg)': 'rotate(0)'};`") + + let nestedListContainer = $.find("div").eq(2); + f.bindAttribute(nestedListContainer, "style", "`height:${active[i] ? heights[i] + 'px' : '0px'};`") + + let nestedList = $.find("div").eq(3); + f.bindAttribute(nestedList, "ref", "`tabContent${i}`") let nestedLink = $.find('a').eq(1); f.addFor( nestedLink, 'child.childrenPages', 'subchild' ); diff --git a/fragments/navigation/template.html b/fragments/navigation/template.html index 13bfbcfb2..1b9a9427d 100644 --- a/fragments/navigation/template.html +++ b/fragments/navigation/template.html @@ -1,8 +1,15 @@ @@ -41,21 +36,11 @@ export default { props: ['model'], data: function() { - const numElements = this.model.childrenPages ? this.model.childrenPages.length : 0; return { menuActive: false, - active: new Array(numElements).fill(false), - heights: new Array(numElements).fill(0), } }, - created() { - addEventListener("resize", this.setHeights); - }, - destroyed() { - removeEventListener("resize", this.setHeights); - }, mounted: function() { - this.setHeights(); window.addEventListener('pageRendered', (e) => { if (this.menuActive) { this.toggleMenu(); @@ -63,24 +48,28 @@ }, false); }, methods: { - beforeSave(data) { - delete data.childrenPages - return data - }, - setHeights: function() { - this.heights.forEach( (item,i) => { - Vue.set(this.heights, i, this.$refs[`tabContent${i}`][0].clientHeight ) - }); - }, - toggleItem(i) { - if (this.model.mobiletoggletype === 'accordion') { - this.active.forEach( (active,j) => { - Vue.set(this.active, j, j === i ? !this.active[j] : false); - Vue.set(this.heights, i, this.$refs[`tabContent${i}`][0].clientHeight); - }) + toggleItem(i, e) { + let parentItem, item; + if (e.target.nodeName.toLowerCase() === 'svg') { + parentItem = e.path[2]; + item = e.path[0]; + } + if (e.target.nodeName.toLowerCase() === 'path') { + parentItem = e.path[3]; + item = e.path[1]; + } + if(parentItem.querySelector('ul').classList.contains('hidden')) { + item.style.transform = "rotate(0deg)"; + parentItem.classList.add('bg-secondary') + parentItem.classList.add('md:bg-primary') + parentItem.querySelector('ul').classList.remove('hidden'); + parentItem.querySelector('ul').classList.remove('md:flex'); } else { - Vue.set(this.active, i, !this.active[i]) - Vue.set(this.heights, i, this.$refs[`tabContent${i}`][0].clientHeight); + item.style.transform = "rotate(180deg)"; + parentItem.classList.remove('bg-secondary') + parentItem.classList.remove('md:bg-primary') + parentItem.querySelector('ul').classList.add('hidden'); + parentItem.querySelector('ul').classList.add('md:flex'); } }, toggleMenu: function(){ @@ -104,9 +93,8 @@ .flex.dropdown-list { display: none; } - .flex.dropdown-container:hover .flex.dropdown-list, .flex.dropdown-container:focus-within .flex.dropdown-list { + .relative.dropdown-container:hover > .flex.dropdown-list, .relative.dropdown-container:focus-within > .flex.dropdown-list { display: flex; } } - From a1337a003f22da1ac0c91357729100634105b167 Mon Sep 17 00:00:00 2001 From: smcgrath0 Date: Mon, 17 Aug 2020 13:29:08 -0700 Subject: [PATCH 10/20] #149 added navgiation nested recursive component --- fragments/navigationnested/hatch.js | 15 ++++ fragments/navigationnested/model.json | 10 +++ fragments/navigationnested/readme.md | 3 + fragments/navigationnested/sample.json | 6 ++ fragments/navigationnested/template.html | 68 +++++++++++++++++++ fragments/navigationnested/template.vue | 65 ++++++++++++++++++ .../components/navigationnested/.content.xml | 4 ++ .../components/navigationnested/dialog.json | 1 + .../components/navigationnested/template.vue | 68 +++++++++++++++++++ .../components/page/renderer.html | 1 + .../etc/felibs/themecleanflex/css/build.css | 33 +++------ 11 files changed, 252 insertions(+), 22 deletions(-) create mode 100644 fragments/navigationnested/hatch.js create mode 100644 fragments/navigationnested/model.json create mode 100644 fragments/navigationnested/readme.md create mode 100644 fragments/navigationnested/sample.json create mode 100644 fragments/navigationnested/template.html create mode 100644 fragments/navigationnested/template.vue create mode 100644 ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/navigationnested/.content.xml create mode 100644 ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/navigationnested/dialog.json create mode 100644 ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/navigationnested/template.vue diff --git a/fragments/navigationnested/hatch.js b/fragments/navigationnested/hatch.js new file mode 100644 index 000000000..03232e86e --- /dev/null +++ b/fragments/navigationnested/hatch.js @@ -0,0 +1,15 @@ +module.exports = { + convert: function($, f) { + f.bindAttribute($, 'style', "`list-style-type: none;padding: 0px;display:${active[i] ? 'flex' : 'none'};`", false) + f.addFor($.find('li.children').first(), 'model.childrenPages', 'child') + f.bindAttribute($.find('li.children a').first(),'href',f.pathToUrl('child.path')) + f.mapField($.find('li.children a').first(),'child.title') + f.replace( $.find('ul.nested').eq(0), '') + f.addIf($.find('themecleanflex-components-navigationnested').first(), 'child.hasChildren && child.childrenPages && child.childrenPages.length > 0') + + let nestedArrow = $.find('svg').eq(0); + f.addIf(nestedArrow, 'child.hasChildren && child.childrenPages && child.childrenPages.length > 0'); + f.bindAttribute(nestedArrow, "style", "`transform:rotate(180deg);`") + f.bindEvent(nestedArrow, 'click', "(e) => { toggleItem(i, e) }") + } +} \ No newline at end of file diff --git a/fragments/navigationnested/model.json b/fragments/navigationnested/model.json new file mode 100644 index 000000000..5cd8af7a2 --- /dev/null +++ b/fragments/navigationnested/model.json @@ -0,0 +1,10 @@ +{ + "definitions": { + "Navigationnested": { + "type": "object", + "x-type": "component", + "properties": { + } + } + } + } \ No newline at end of file diff --git a/fragments/navigationnested/readme.md b/fragments/navigationnested/readme.md new file mode 100644 index 000000000..d3f13d711 --- /dev/null +++ b/fragments/navigationnested/readme.md @@ -0,0 +1,3 @@ +# Navigation Nested + +Used by the Navigation component diff --git a/fragments/navigationnested/sample.json b/fragments/navigationnested/sample.json new file mode 100644 index 000000000..b8fcdb360 --- /dev/null +++ b/fragments/navigationnested/sample.json @@ -0,0 +1,6 @@ +{ + "title": "Navigationnested", + "group": ".hidden", + "model": { + } + } \ No newline at end of file diff --git a/fragments/navigationnested/template.html b/fragments/navigationnested/template.html new file mode 100644 index 000000000..f1ff51a46 --- /dev/null +++ b/fragments/navigationnested/template.html @@ -0,0 +1,68 @@ + + + \ No newline at end of file diff --git a/fragments/navigationnested/template.vue b/fragments/navigationnested/template.vue new file mode 100644 index 000000000..442b6fccc --- /dev/null +++ b/fragments/navigationnested/template.vue @@ -0,0 +1,65 @@ + + + + + + \ No newline at end of file diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/navigationnested/.content.xml b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/navigationnested/.content.xml new file mode 100644 index 000000000..245773550 --- /dev/null +++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/navigationnested/.content.xml @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/navigationnested/dialog.json b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/navigationnested/dialog.json new file mode 100644 index 000000000..9e26dfeeb --- /dev/null +++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/navigationnested/dialog.json @@ -0,0 +1 @@ +{} \ No newline at end of file diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/navigationnested/template.vue b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/navigationnested/template.vue new file mode 100644 index 000000000..0a7bbad56 --- /dev/null +++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/navigationnested/template.vue @@ -0,0 +1,68 @@ + + + + + + \ No newline at end of file diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/page/renderer.html b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/page/renderer.html index 769f5acbc..38c113c98 100644 --- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/page/renderer.html +++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/page/renderer.html @@ -40,4 +40,5 @@ $peregrineApp.loadComponent('themecleanflex-components-menubuttons') $peregrineApp.loadComponent('themecleanflex-components-socialicons') $peregrineApp.loadComponent('themecleanflex-components-pagelistnested') + $peregrineApp.loadComponent('themecleanflex-components-navigationnested') diff --git a/ui.apps/src/main/content/jcr_root/etc/felibs/themecleanflex/css/build.css b/ui.apps/src/main/content/jcr_root/etc/felibs/themecleanflex/css/build.css index 723c2b197..d87243967 100644 --- a/ui.apps/src/main/content/jcr_root/etc/felibs/themecleanflex/css/build.css +++ b/ui.apps/src/main/content/jcr_root/etc/felibs/themecleanflex/css/build.css @@ -621,16 +621,6 @@ video { background-color: var(--bg-secondary); } -.hover\:bg-black:hover { - --bg-opacity: 1; - background-color: #000; - background-color: rgba(0, 0, 0, var(--bg-opacity)); -} - -.hover\:bg-gray-200:hover { - background-color: var(--color-gray-200); -} - .hover\:bg-blue-700:hover { background-color: var(--color-blue-700); } @@ -759,10 +749,6 @@ video { align-self: center; } -.self-stretch { - align-self: stretch; -} - .justify-start { justify-content: flex-start; } @@ -1100,10 +1086,6 @@ video { color: rgba(255, 255, 255, var(--text-opacity)); } -.text-gray-200 { - color: var(--color-gray-200); -} - .text-gray-800 { color: var(--color-gray-800); } @@ -1136,10 +1118,6 @@ video { color: rgba(255, 255, 255, var(--text-opacity)); } -.hover\:text-gray-200:hover { - color: var(--color-gray-200); -} - .hover\:text-red-600:hover { color: var(--color-red-600); } @@ -1284,6 +1262,17 @@ video { z-index: 10; } +.transform { + --transform-translate-x: 0; + --transform-translate-y: 0; + --transform-rotate: 0; + --transform-skew-x: 0; + --transform-skew-y: 0; + --transform-scale-x: 1; + --transform-scale-y: 1; + transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)); +} + .transition-colors { transition-property: background-color, border-color, color, fill, stroke; } From 9d849e363222f299cb6c684c874b1872857ae1c2 Mon Sep 17 00:00:00 2001 From: smcgrath0 Date: Mon, 17 Aug 2020 14:36:59 -0700 Subject: [PATCH 11/20] #149 fixed save error for rootpage of navigation comp --- .../java/com/themecleanflex/models/NavigationModel.java | 9 ++++----- fragments/navigation/template.vue | 4 ++++ .../themecleanflex/components/navigation/template.vue | 4 ++++ 3 files changed, 12 insertions(+), 5 deletions(-) diff --git a/core/src/main/java/com/themecleanflex/models/NavigationModel.java b/core/src/main/java/com/themecleanflex/models/NavigationModel.java index aadc47c5b..0971ca43e 100644 --- a/core/src/main/java/com/themecleanflex/models/NavigationModel.java +++ b/core/src/main/java/com/themecleanflex/models/NavigationModel.java @@ -631,10 +631,9 @@ public List getChildrenPages() { PerPage page = ppm.getPage(getRootpage()); if (page != null) { for (PerPage child : page.listChildren()) { - if(excludeSitemap && child.getContentProperty(EXCLUDE_FROM_SITEMAP, false)) { - continue; - } - if (!child.getPath().equals(page.getPath())) { + if ( !(excludeSitemap && child.getContentProperty(EXCLUDE_FROM_SITEMAP, false)) + && (!child.getPath().equals(page.getPath())) + ) { childPages.add(new Page(child, levels, excludeSitemap)); } } @@ -678,7 +677,7 @@ public List getChildrenPages() { if(excludeSitemap && child.getContentProperty(EXCLUDE_FROM_SITEMAP, false)) { continue; } - if(!child.getPath().equals(page.getPath())) { + if(levels > 0 && !child.getPath().equals(page.getPath())) { childPages.add(new Page(child, levels-1, excludeSitemap)); } } diff --git a/fragments/navigation/template.vue b/fragments/navigation/template.vue index 28f3e2b44..543d2e69f 100644 --- a/fragments/navigation/template.vue +++ b/fragments/navigation/template.vue @@ -48,6 +48,10 @@ }, false); }, methods: { + beforeSave(data) { + delete data.childrenPages + return data + }, toggleItem(i, e) { let parentItem, item; if (e.target.nodeName.toLowerCase() === 'svg') { diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/navigation/template.vue b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/navigation/template.vue index 28f3e2b44..543d2e69f 100644 --- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/navigation/template.vue +++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/navigation/template.vue @@ -48,6 +48,10 @@ }, false); }, methods: { + beforeSave(data) { + delete data.childrenPages + return data + }, toggleItem(i, e) { let parentItem, item; if (e.target.nodeName.toLowerCase() === 'svg') { From 83356f2bc38afa2798ac46245b8e144bbe67befe Mon Sep 17 00:00:00 2001 From: smcgrath0 Date: Mon, 17 Aug 2020 17:02:28 -0700 Subject: [PATCH 12/20] #149 added hamburger alignment --- fragments/navigation/hatch.js | 9 ++++++++- fragments/navigation/template.vue | 15 +++++++++------ 2 files changed, 17 insertions(+), 7 deletions(-) diff --git a/fragments/navigation/hatch.js b/fragments/navigation/hatch.js index b46ac2a3e..e38798c5b 100644 --- a/fragments/navigation/hatch.js +++ b/fragments/navigation/hatch.js @@ -28,6 +28,13 @@ module.exports = { f.addElse($); $.parent().prepend('
{{isEditAndEmpty}}
') - $.prepend('
|||
') + + let self = `{ + 'self-start': model.justifyitems === 'start', + 'self-end': model.justifyitems === 'end' + }` + + let hamburger = `
|||
` + $.prepend(hamburger) } } diff --git a/fragments/navigation/template.vue b/fragments/navigation/template.vue index 543d2e69f..ab37b0f1c 100644 --- a/fragments/navigation/template.vue +++ b/fragments/navigation/template.vue @@ -7,8 +7,11 @@ 'justify-center': model.justifyitems === 'center', 'justify-end': model.justifyitems === 'end' }" v-else> -
|||
+
|||
  • @media (min-width: 768px) { - .flex.dropdown-list { + .hidden.dropdown-list { display: none; } - .relative.dropdown-container:hover > .flex.dropdown-list, .relative.dropdown-container:focus-within > .flex.dropdown-list { + .relative.dropdown-container:hover > .hidden.dropdown-list, .relative.dropdown-container:focus-within > .hidden.dropdown-list { display: flex; } } From a27e09d4fb24e8af379e0fa27297f47cb89bf2a9 Mon Sep 17 00:00:00 2001 From: smcgrath0 Date: Mon, 17 Aug 2020 17:02:50 -0700 Subject: [PATCH 13/20] #149 fixed hover/active colors for links in nav --- fragments/navigationnested/hatch.js | 2 +- fragments/navigationnested/template.html | 4 ++-- fragments/navigationnested/template.vue | 12 +++++------ .../components/navigation/template.vue | 15 +++++++------ .../components/navigationnested/template.vue | 21 ++++++++----------- .../themecleanflex/pages/css/palette.css | 11 +++++++++- .../pages/css/palettes/dawn.css | 1 + .../pages/css/palettes/ocean.css | 1 + .../etc/felibs/themecleanflex/css/build.css | 4 ++++ 9 files changed, 43 insertions(+), 28 deletions(-) diff --git a/fragments/navigationnested/hatch.js b/fragments/navigationnested/hatch.js index 03232e86e..3a82872d5 100644 --- a/fragments/navigationnested/hatch.js +++ b/fragments/navigationnested/hatch.js @@ -1,6 +1,6 @@ module.exports = { convert: function($, f) { - f.bindAttribute($, 'style', "`list-style-type: none;padding: 0px;display:${active[i] ? 'flex' : 'none'};`", false) + f.bindAttribute($, 'style', "`list-style-type: none;padding: 0px;`", false) f.addFor($.find('li.children').first(), 'model.childrenPages', 'child') f.bindAttribute($.find('li.children a').first(),'href',f.pathToUrl('child.path')) f.mapField($.find('li.children a').first(),'child.title') diff --git a/fragments/navigationnested/template.html b/fragments/navigationnested/template.html index f1ff51a46..51e7a8003 100644 --- a/fragments/navigationnested/template.html +++ b/fragments/navigationnested/template.html @@ -32,8 +32,8 @@
--> -