From 322f6c7b9313092ad95542a52dbca243bc4d3524 Mon Sep 17 00:00:00 2001 From: Bjorn Post Date: Sun, 28 Jul 2024 13:37:12 +0200 Subject: [PATCH] feat: rework styling to match craft 5 look and feel, update composer requirements --- composer.json | 4 +- .../olivemenus/dist/css/MenuItems.css | 246 ++++++++---------- .../olivemenus/dist/js/MenuItem.js | 25 +- src/services/OlivemenuItemsService.php | 43 +-- src/templates/_index.twig | 18 +- src/templates/_menu-edit.twig | 11 +- src/templates/_menu-items.twig | 72 ++--- src/templates/_menu-new.twig | 7 +- 8 files changed, 203 insertions(+), 223 deletions(-) diff --git a/composer.json b/composer.json index 531cfc8..4edec66 100644 --- a/composer.json +++ b/composer.json @@ -2,7 +2,7 @@ "name": "olivestudio/craft-olivemenus", "description": "A powerful menus plugin for Craft 4 built for the need of simplicity and flexibility", "type": "craft-plugin", - "version": "4.0.0", + "version": "5.0.0", "keywords": [ "craft", "cms", @@ -22,7 +22,7 @@ } ], "require": { - "craftcms/cms": "^4.0.0", + "craftcms/cms": "^5.0.0", "php": "^8.0.2" }, "autoload": { diff --git a/src/assetbundles/olivemenus/dist/css/MenuItems.css b/src/assetbundles/olivemenus/dist/css/MenuItems.css index 0d66586..fb63a62 100644 --- a/src/assetbundles/olivemenus/dist/css/MenuItems.css +++ b/src/assetbundles/olivemenus/dist/css/MenuItems.css @@ -10,153 +10,141 @@ * @since 1.0.0 */ - #menu-items-sidebar { - width:24%; - float:left; -} -#menu-items-sidebar > .os-accordion { - border-bottom:1px solid #e3e5e8; +#menu-items-sidebar { + width: 24%; + margin-right: 2rem; } + #menu-items-sidebar .ui-tabs-panel form > .field, #menu-items-sidebar .ui-tabs-panel form > .fields, #menu-items-sidebar .fields-custom { - margin-bottom:20px; + margin-bottom: var(--m); } + #menu-items-sidebar .field.checkboxfield { margin:0 0 8px 0; } + #menu-items-sidebar .field.checkboxfield label { display:block; } + #menu-items-sidebar .accordion .ui-accordion-header { - border:1px solid #e3e5e8; - padding:10px 10px 10px 14px; cursor:pointer; - background:#fafafa; - color: #29323d; position:relative; - color:#555; - margin:0; - border-bottom:0; -} -#menu-items-sidebar .accordion .ui-accordion-header:last-child { + color: var(--medium-text-color); + background-color: var(--white); + border: 2px solid var(--gray-100); + border-radius: var(--large-border-radius); + padding: var(--m); + margin-bottom: 0; } + #menu-items-sidebar .accordion .ui-accordion-header:after { - content: "▼"; - font-family: "Craft"; - height:40px; - width:40px; - text-align:center; - position:absolute; - top:0; - right:0; - line-height:40px; - font-size:20px; - color:#29323d; + content: "downangle"; + font-family: "Craft"; + height: 16px; + width: 16px; + position: absolute; + top: var(--m); + right: var(--m); + line-height: 16px; + font-weight: normal; } + #menu-items-sidebar .accordion .ui-accordion-header:hover, #menu-items-sidebar .accordion .ui-accordion-header.ui-state-active { - background:#737f8c; - border-color:#737f8c; - color:#fff; + background: var(--gray-050); outline:none; } -#menu-items-sidebar .accordion .ui-accordion-header:hover:after, -#menu-items-sidebar .accordion .ui-accordion-header.ui-state-active:after { - color:#fff; -} + #menu-items-sidebar .accordion .ui-accordion-header.ui-state-active:after { - transform:rotate(180deg); + content: "upangle"; } + #menu-items-sidebar .accordion .ui-accordion-content { - border:1px solid #e3e5e8; - border-top:none; - border-bottom:0; - padding:15px 14px 14px 14px; + background-color: var(--white); + border: 2px solid var(--gray-100); + border-top: 0; + border-radius: var(--large-border-radius); + border-top-left-radius: 0; + border-top-right-radius: 0; + padding: var(--m); } + #menu-items-sidebar .accordion .ui-accordion-content:last-child { border-top:1px solid #e3e5e8; } + #menu-items-sidebar .accordion .accordion { - margin-bottom:20px; + margin-bottom: var(--m); } + #menu-items-sidebar .accordion .accordion .ui-accordion-header { border:none; - padding:5px 0 5px 0; - font-size:13px; - border-bottom:1px solid #e3e5e8; + padding: var(--s) 0; + border-bottom:1px solid var(--gray-100); background:none; - color:#29323d; + border-radius: 0; } + #menu-items-sidebar .accordion .accordion .ui-accordion-header:hover, #menu-items-sidebar .accordion .accordion .ui-accordion-header.ui-state-active { - border-bottom:1px solid #29323d; + border-bottom:1px solid var(--gray-300); } + #menu-items-sidebar .accordion .accordion .ui-accordion-header:after { - width:30px; - height:30px; - line-height:30px; - font-size:14px; - color:#29323d; + width: 16px; + height: 16px; + line-height: 16px; + font-size: 16px; + right: 0; + top: 12px; } + #menu-items-sidebar .accordion .accordion .ui-accordion-content { padding:14px 0; border:none; } + #menu-items-sidebar .accordion .accordion .ui-accordion-content .ui-tabs { margin-bottom:0; } + #menu-items-sidebar .ui-tabs .ui-tabs-nav { border-bottom:1px solid #e3e5e8; padding-bottom:10px; margin-bottom:10px; overflow:hidden; } + #menu-items-sidebar .ui-tabs .ui-tabs-nav li { float:left; margin-right:10px; } + #menu-items-sidebar .ui-tabs .ui-tabs-nav li a { color:#555; } + #menu-items-sidebar .ui-tabs .ui-tabs-nav li:hover a, #menu-items-sidebar .ui-tabs .ui-tabs-nav li.ui-state-active a { color:#da5a47; text-decoration:none; } + #menu-items-sidebar .search-list { margin-bottom:20px; } + #menu-items-sidebar .search-list.active { padding-top:20px; } + #menu-items-sidebar .search-list li { display:none; } -#menu-items-sidebar .templating { - margin-top:20px; -} -#menu-items-sidebar .templating .heading { - padding:10px 10px 10px 14px; - background:#737f8c; - color:#fff; -} -#menu-items-sidebar .templating .content { - padding:10px; - background:#fafafa; - border:1px solid #e3e5e8; - border-top:none; -} -#menu-items-sidebar .templating .content pre { - white-space: pre-wrap; - white-space: -moz-pre-wrap !important; - white-space: -pre-wrap; - white-space: -o-pre-wrap; - word-wrap: break-word; - padding:10px; - background:#f2f2f2; - border:1px solid #eaeaea; -} + #menu-items-sidebar .btn:hover, #menu-items-sidebar .btn:focus, #menu-items-sidebar .btn:active, @@ -166,124 +154,118 @@ background:#737f8c; color:#fff !important; } + #menu-items { - box-sizing:border-box; - width:76%; - float:left; - padding-left:40px; + flex-grow: 1; } + #menu-items .sortable { padding-left:0; list-style:none; } + #menu-items .sortable li { - width:380px; + /* width:380px; */ margin-bottom:14px; } + #menu-items .sortable li.ui-sortable-helper { margin-top:14px; } + #menu-items .sortable ol { list-style:none; padding-left:20px; border-left:1px dotted #cacaca; } + #menu-items .sortable li > .ui-sortable-handle { margin-bottom:14px; } + #menu-items .sortable li .item-heading { - border:1px solid #e3e5e8; - padding:10px 10px 10px 14px; - background:#fafafa; - color: #29323d; - position:relative; - color:#555; - font-size:13px; - font-weight:700; - margin:0; - cursor:move; + background-color: var(--white); + border: 2px solid var(--gray-100); + border-radius: var(--large-border-radius); + padding: var(--m); + font-weight: 700; + margin: 0; + cursor: move; + display: flex; } + #menu-items .sortable li > .ui-sortable-handle:hover > .item-heading, #menu-items .sortable li.active > .ui-sortable-handle > .item-heading { - background:#737f8c; - border-color:#737f8c; - color:#fff; + background: var(--gray-050); + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; } + #menu-items .sortable li .item-heading .menu-title { - position:relative; - padding-left:30px; - display:inline-block; - max-width:70%; - overflow:hidden; + padding-left: var(--xs); + display: inline-block; + overflow: hidden; white-space: nowrap; text-overflow: ellipsis; + flex-grow: 1; } + #menu-items .sortable li .item-heading .settings-toggle { - width:30px; - height:40px; - position:absolute; - top:0; - left:0; - display:block; - cursor:pointer; - z-index:10; + width: 24px; + height: 24px; + display: inline-block; + cursor: pointer; } + #menu-items .sortable li .item-heading .settings-toggle:before { - content: "▼"; - font-family: "Craft"; - height:40px; - width:40px; - text-align:center; - position:absolute; - top:0; - left:0; - line-height:40px; - font-size:20px; - color:#29323d; + content: "downangle"; + font-family: "Craft"; + line-height: 24px; + font-size: 16px; } + #menu-items .sortable li.active > .ui-sortable-handle > .item-heading .settings-toggle:before { - transform:rotate(180deg); -} -#menu-items .sortable li > .ui-sortable-handle:hover > .item-heading .settings-toggle:before, -#menu-items .sortable li.active > .ui-sortable-handle > .item-heading .settings-toggle:before { - color:#fff; + content: "upangle"; } + #menu-items .sortable li .item-heading .delete-menu { - position:absolute; - top:10px; - right:10px; - z-index:20px; text-align:right; font-size:11px; font-weight:400; color:#29323d; - border: 1px solid #fff; + border: 1px solid #fff; } + #menu-items .sortable li .item-content { max-height:0; transition:200ms linear all; overflow:hidden; } + #menu-items .sortable li.active > .ui-sortable-handle > .item-content { max-height:500px; } + #menu-items .sortable li .item-content .inner { - padding:10px; - border:1px solid #e3e5e8; + padding: var(--m); + border: 2px solid var(--gray-100); border-top:none; + border-radius: 0 0 var(--large-border-radius) var(--large-border-radius); } + #menu-items .sortable li .item-content .inner .field:last-child { margin-bottom:0; } -#menu-items .sortable li .item-content .inner a { - color:#6f7072; - text-decoration:underline; -} + #menu-items .sortable .placeholder { background:#fafafa; border:1px solid #eaeaea; } +#instructions { + color: var(--medium-text-color); +} + .d-flex { display: flex; } \ No newline at end of file diff --git a/src/assetbundles/olivemenus/dist/js/MenuItem.js b/src/assetbundles/olivemenus/dist/js/MenuItem.js index 97b2a2c..4b80d7d 100644 --- a/src/assetbundles/olivemenus/dist/js/MenuItem.js +++ b/src/assetbundles/olivemenus/dist/js/MenuItem.js @@ -99,7 +99,7 @@ $(document).ready(function() { itemHTML += '
'; itemHTML += '
'; itemHTML += '
'; - itemHTML += ''; + itemHTML += ''; itemHTML += '
'; itemHTML += '
'; itemHTML += ''; @@ -107,7 +107,7 @@ $(document).ready(function() { itemHTML += '
'; itemHTML += '
'; itemHTML += '
'; - itemHTML += ''; + itemHTML += ''; itemHTML += '
'; itemHTML += '
'; itemHTML += ''; @@ -115,7 +115,7 @@ $(document).ready(function() { itemHTML += '
'; itemHTML += '
'; itemHTML += '
'; - itemHTML += ''; + itemHTML += ''; itemHTML += '
'; itemHTML += '
'; itemHTML += ''; @@ -123,7 +123,7 @@ $(document).ready(function() { itemHTML += '
'; itemHTML += '
'; itemHTML += '
'; - itemHTML += ''; + itemHTML += ''; itemHTML += '
'; itemHTML += '
'; itemHTML += ''; @@ -132,7 +132,7 @@ $(document).ready(function() { itemHTML += '
'; itemHTML += '
'; - itemHTML += ''; + itemHTML += ''; itemHTML += '
'; itemHTML += '
'; itemHTML += ''; @@ -281,7 +281,7 @@ private function getItemAdminMarkup(mixed $menuItem): string if (!$menuItem['entry_id']) { $localHTML .= '
'; $localHTML .= '
'; - $localHTML .= ''; + $localHTML .= ''; $localHTML .= '
'; $localHTML .= '
'; $localHTML .= ''; @@ -290,7 +290,7 @@ private function getItemAdminMarkup(mixed $menuItem): string } $localHTML .= '
'; $localHTML .= '
'; - $localHTML .= ''; + $localHTML .= ''; $localHTML .= '
'; $localHTML .= '
'; $localHTML .= ''; @@ -298,7 +298,7 @@ private function getItemAdminMarkup(mixed $menuItem): string $localHTML .= '
'; $localHTML .= '
'; $localHTML .= '
'; - $localHTML .= ''; + $localHTML .= ''; $localHTML .= '
'; $localHTML .= '
'; $localHTML .= ''; @@ -306,7 +306,7 @@ private function getItemAdminMarkup(mixed $menuItem): string $localHTML .= '
'; $localHTML .= '
'; $localHTML .= '
'; - $localHTML .= ''; + $localHTML .= ''; $localHTML .= '
'; $localHTML .= '
'; $localHTML .= ''; @@ -315,7 +315,7 @@ private function getItemAdminMarkup(mixed $menuItem): string $localHTML .= '
'; $localHTML .= '
'; - $localHTML .= ''; + $localHTML .= ''; $localHTML .= '
'; $localHTML .= '
'; $localHTML .= ' +{% endblock %} -{% set tabs = { - menus: { label: "All Menus"|t('olivemenus'), url: url('olivemenus/' ~ objSite.handle) }, - new: { label: "New Menu"|t('olivemenus'), url: url('olivemenus/menu-new/' ~ objSite.handle) } -} %} +{% set crumbs = [ + { + label: 'Olivemenus'|t('olivemenus'), + url: url('olivemenus'), + } +] %} {% set content %} + {{ actionInput('olivemenus/menu-items/save-menu-items') }}
{% endif %} -
-
{{ 'Templating code'|t('olivemenus') }}
-
-

{{ "Use this code to embed this menu in your templates:"|t('olivemenus') }}

- 
{% verbatim %}{{ craft.olivemenus.getMenuHTML('{% endverbatim %}{{menu.handle}}{% verbatim %}') }}{% endverbatim %}
-

{{ "Optionally you can add an array of settings to the call, to set extra configurations for the menu:"|t('olivemenus') }}

- 
{% verbatim %}{{ craft.olivemenus.getMenuHTML('{% endverbatim %}{{menu.handle}}{% verbatim %}',{ 'menu-id': 'main-menu' }) }}{% endverbatim %}
-

{{ "Use this code to get only the data from this menu in your templates:"|t('olivemenus') }}

- 
{% verbatim %}{{ craft.olivemenus.getMenuData('{% endverbatim %}{{menu.handle}}{% verbatim %}') }}{% endverbatim %}
-
-
-
-
Data JSON
-
-

{{ "If you want to use data attributes asignment to each menu item, you can add your data items in the following format in the Data JSON Field:"|t('olivemenus') }}

- 
data-attr : value-1
-

{{ "Add a new line for each data attribute."|t('olivemenus') }}

-
-
+
+ +
+ +
+ {% if devMode %} +

{{ 'Templating code'|t('olivemenus') }}

+ +

{{ "Use this code to embed this menu in your templates:"|t('olivemenus') }}

+ {% verbatim %}{{ craft.olivemenus.getMenuHTML('{% endverbatim %}{{menu.handle}}{% verbatim %}') }}{% endverbatim %} + +

{{ "Optionally you can add an array of settings to the call, to set extra configurations for the menu:"|t('olivemenus') }}

+ {% verbatim %}{{ craft.olivemenus.getMenuHTML('{% endverbatim %}{{menu.handle}}{% verbatim %}',{ 'menu-id': 'main-menu' }) }}{% endverbatim %} + +

{{ "Use this code to get only the data from this menu in your templates:"|t('olivemenus') }}

+ {% verbatim %}{{ craft.olivemenus.getMenuData('{% endverbatim %}{{menu.handle}}{% verbatim %}') }}{% endverbatim %} + {% endif %} + +

Data JSON

+

{{ "If you want to use data attributes asignment to each menu item, you can add your data items in the following format in the Data JSON Field:"|t('olivemenus') }}

+ data-attr : value-1 +

{{ "Add a new line for each data attribute."|t('olivemenus') }}

+
{% endset %} diff --git a/src/templates/_menu-new.twig b/src/templates/_menu-new.twig index 2cd8db1..7ebe052 100644 --- a/src/templates/_menu-new.twig +++ b/src/templates/_menu-new.twig @@ -5,11 +5,6 @@ {% set selectedTab = 'new' %} -{% set tabs = { - menus: { label: "All Menus"|t('olivemenus'), url: url('olivemenus/' ~ objSite.handle) }, - new: { label: "New Menu"|t('olivemenus'), url: url('olivemenus/menu-new/' ~ objSite.handle) } -} %} - {% set showSiteMenu = (craft.app.getIsMultiSite() ? true : false) %} {% set urlFormat = 'olivemenus/menu-new/{handle}' %} {% set selectedSiteId = objSite.id %} @@ -41,7 +36,7 @@ {% endif %} {% endmacro %} - + {% from _self import errorList %} {% if menu is defined %}