Merge branch 'release/1.0.8' into v1

nystudio107 · Mar 8, 2019 · 8dd014d · 8dd014d
2 parents 8f0e6a1 + c0a2eee
commit 8dd014d
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 12 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Recipe Changelog
 
+## 1.0.8 - 2019.03.08
+### Changed
+* Fixed an issue where tabs didn't work properly in the Field
+
 ## 1.0.7 - 2018.03.02
 ### Changed
 * Fixed deprecation errors from Craft CMS 3 RC13

diff --git a/composer.json b/composer.json
@@ -2,7 +2,7 @@
     "name": "nystudio107/craft-recipe",
     "description": "A comprehensive recipe FieldType for Craft CMS that includes metric/imperial conversion, portion calculation, and JSON-LD microdata support",
     "type": "craft-plugin",
-    "version": "1.0.7",
+    "version": "1.0.8",
     "keywords": [
         "craft",
         "cms",

diff --git a/src/assetbundles/recipefield/dist/css/Recipe.css b/src/assetbundles/recipefield/dist/css/Recipe.css
@@ -13,7 +13,6 @@
 div.recipe-field {
     border: 1px solid #e3e5e8;
     margin-bottom: 10px;
-    padding: 14px 14px 14px;
     border-radius: 3px;
     background: #f9fafa;
 }
@@ -46,3 +45,82 @@ img.recipe-field-icon {
 span.recipe-field-title {
     vertical-align: middle;
 }
+
+
+div.recipe-tab-content {
+    -webkit-box-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+    background: #fff;
+    padding: 24px;
+    word-wrap: break-word;
+}
+
+nav.recipe-tabs {
+    position: relative;
+    z-index: 1;
+    -webkit-box-shadow: inset 0 -1px 0 #e3e5e8;
+    box-shadow: inset 0 -1px 0 #e3e5e8;
+    min-height: 40px;
+    overflow: hidden;
+}
+
+nav.recipe-tabs ul {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    width: calc(100% + 1px);
+}
+
+nav.recipe-tabs ul li {
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    border-right: 1px solid rgba(0, 0, 20, 0.1);
+}
+
+nav.recipe-tabs ul li a {
+    position: relative;
+    display: block;
+    padding: 10px 24px;
+    white-space: nowrap;
+    overflow: hidden;
+    color: #576575;
+    text-decoration: none;
+}
+
+nav.recipe-tabs ul li a:active, nav.recipe-tabs ul li a:focus {
+    outline: 0;
+    border: none;
+    -moz-outline-style: none;
+}
+
+nav.recipe-tabs ul li a.sel {
+    color: #29323d;
+    background: #fff;
+    padding-bottom: 10px;
+    cursor: default;
+}
+
+nav.recipe-tabs ul li a:not(.sel):hover {
+    color: #0d78f2;
+}
+
+nav.recipe-tabs ul li a:after {
+    background: linear-gradient(to right, rgba(235, 237, 239, 0), #ebedef 17px);
+}
+
+nav.recipe-tabs ul li a.sel:after {
+    background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 17px);
+}
+
+div.content-icon-wrapper {
+    height: 24px;
+    width: auto;
+    display: inline-block;
+    padding: 3px 10px;
+    cursor: help;
+}
diff --git a/src/assetbundles/recipefield/dist/js/Recipe.js b/src/assetbundles/recipefield/dist/js/Recipe.js
@@ -37,6 +37,16 @@
 
 /* -- _this.options gives us access to the $jsonVars that our FieldType passed down to us */
 
+                // Tab handler
+                $('.recipe-tab-links').on('click', function(e) {
+                    e.preventDefault();
+                    $('.recipe-tab-links').removeClass('sel');
+                    $(this).addClass('sel');
+                    $('.recipe-tab-content').addClass('hidden');
+                    var selector = $(this).attr('href');
+                    $(selector).removeClass('hidden');
+                });
+
             });
         }
     };

diff --git a/src/templates/_components/fields/Recipe_input.twig b/src/templates/_components/fields/Recipe_input.twig
@@ -17,15 +17,14 @@
 {% set baseAssetsUrl = view.getAssetManager().getPublishedUrl('@nystudio107/recipe/assetbundles/recipefield/dist', true) %}
 
 <div id="{{ id }}" class="recipe-field">
-    <div class="pane">
-        <nav id="{{ id ~ "tabs" }}" class="tabs">
+        <nav id="{{ id ~ "tabs" }}" class="recipe-tabs">
             <ul>
-                <li><a id="{{ id ~ "tabs-recipe" }}" class="tab sel" href="#{{ prefix ~ id ~ 'tab-recipe' }}"  tabindex="0"><img class="recipe-field-icon" src="{{ baseAssetsUrl ~ '/img/Recipe-icon.svg' }}" width="16px" height="auto" /><span class="recipe-field-title">Recipe</span></a></li>
-                <li><a id="{{ id ~ "tabs-ratings" }}" class="tab" href="#{{ prefix ~ id ~ 'tab-ratings' }}" tabindex="0"><img class="recipe-field-icon" src="{{ baseAssetsUrl ~ '/img/Star-icon.svg' }}" width="16px" height="auto" /><span class="recipe-field-title">Ratings</span></a></li>
-                <li><a id="{{ id ~ "tabs-health" }}" class="tab" href="#{{ prefix ~ id ~ 'tab-health' }}" tabindex="0"><img class="recipe-field-icon" src="{{ baseAssetsUrl ~ '/img/Healthy-icon.svg' }}" width="16px" height="auto" /><span class="recipe-field-title">Nutrition</span></a></li>
+                <li><a id="{{ id ~ "tabs-recipe" }}" class="recipe-tab-links tab sel" href="#{{ prefix ~ id ~ 'tab-recipe' }}"  tabindex="0"><img class="recipe-field-icon" src="{{ baseAssetsUrl ~ '/img/Recipe-icon.svg' }}" width="16px" height="auto" /><span class="recipe-field-title">Recipe</span></a></li>
+                <li><a id="{{ id ~ "tabs-ratings" }}" class="recipe-tab-links tab" href="#{{ prefix ~ id ~ 'tab-ratings' }}" tabindex="0"><img class="recipe-field-icon" src="{{ baseAssetsUrl ~ '/img/Star-icon.svg' }}" width="16px" height="auto" /><span class="recipe-field-title">Ratings</span></a></li>
+                <li><a id="{{ id ~ "tabs-health" }}" class="recipe-tab-links tab" href="#{{ prefix ~ id ~ 'tab-health' }}" tabindex="0"><img class="recipe-field-icon" src="{{ baseAssetsUrl ~ '/img/Healthy-icon.svg' }}" width="16px" height="auto" /><span class="recipe-field-title">Nutrition</span></a></li>
             </ul>
         </nav>
-        <div id="{{ id ~ "tab-recipe" }}">
+        <div id="{{ id ~ "tab-recipe" }}" class="recipe-tab-content">
             {{ forms.textField({
                 id: id ~ 'name',
                 class: 'nicetext',
@@ -193,7 +192,7 @@
             }) }}
             </div>
 
-        <div id="{{ id ~ "tab-ratings" }}" class="hidden">
+        <div id="{{ id ~ "tab-ratings" }}" class="recipe-tab-content hidden">
             {{ forms.editableTableField({
                 id: id ~ 'ratings',
                 name: name ~ '[ratings]',
@@ -230,7 +229,7 @@
             }) }}
         </div>
 
-        <div id="{{ id ~ "tab-health" }}" class="hidden">
+        <div id="{{ id ~ "tab-health" }}" class="recipe-tab-content hidden">
 
             {{ forms.textField({
                 id: id ~ 'servingSize',
@@ -387,5 +386,4 @@
             }) }}
 
         </div>
-    </div>
-</div>
+</div>