Merge pull request #40 from jazzsequence/css-grid

Update styling
jazzsequence · Dec 24, 2019 · 3abb620 · 3abb620
2 parents 798cbf7 + 32381b2
commit 3abb620
Show file tree

Hide file tree

Showing 5 changed files with 136 additions and 111 deletions.
diff --git a/README.md b/README.md
@@ -1,12 +1,12 @@
 # Recipe Box #
 **Contributors:**      [Chris Reynolds](https://chrisreynolds.io)  
 **Donate link:**       https://paypal.me/jazzsequence  
-**Tags:**  
+
 **Requires at least:** 4.4  
 **Tested up to:**      4.8  
-**Stable tag:**        0.3.1  
+**Stable tag:**        0.3.2  
 **License:**           GPLv3  
-**License URI:**       http://www.gnu.org/licenses/gpl-3.0.html  
+**License URI:**       http://www.gnu.org/licenses/gpl-3.0.html
 
 ## Description ##
 
@@ -27,6 +27,9 @@ Easily store and publish recipes in WordPress.
 
 ## Changelog ##
 
+### 0.3.2 ###
+* fixes styling bugs from Gutenberg update
+
 ### 0.3.1 ###
 * added support for [Slack](https://wordpress.org/plugins/slack/) plugin to allow recipes to post to Slack.
 * fixed a javascript bug (props [@igmoweb](https://github.com/igmoweb)).
@@ -44,7 +47,7 @@ Easily store and publish recipes in WordPress.
 * hooked all the things
 * added preheat temperature
 * removed tgm plugin activation for REST API now that API is in core
-* 
+*
 
 ### 0.1 ###
 * First release

diff --git a/assets/css/recipes.css b/assets/css/recipes.css
@@ -14,38 +14,100 @@ html {
   border: none;
 }
 
-.post-type-rb_recipe .cmb2-wrap.ingredients .cmb-repeatable-group .cmb-field-list .cmb-th {
-  float: none;
-  margin-bottom: 0.75rem;
-  width: 100%;
+/**
+ * Recipe Information Grid
+ */
+.recipe-meta .cmb2-metabox {
+  display: grid;
+  grid-template-columns: repeat( 3, 1fr );
+  grid-template-areas:
+  "servings servings servings"
+  "prep cook total"
+  "preheat preheat preheat";
+  grid-gap: 1rem;
+}
+
+.cmb2-id--rb-servings {
+  grid-area: "servings";
+  grid-column: span 3;
+}
+
+.cmb2-id--rb-prep-time {
+  grid-area: "prep";
+}
+
+.cmb2-id--rb-cook-time {
+  grid-area: "cook";
+}
+
+.cmb2-id--rb-total-time {
+  grid-area: "total";
 }
 
-.post-type-rb_recipe .cmb2-wrap.ingredients .cmb-repeatable-group .cmb-field-list .cmb-th label {
+.cmb2-id--rb-preheat-group {
+  grid-column: span 3;
+}
+
+.cmb2-id--rb-preheat-group .cmb-field-list.inside {
+  display: grid;
+  grid-template-columns: repeat( 2, 1fr );
+}
+
+.cmb2-id--rb-preheat-group-0--rb-preheat-temp {
+  grid-column-start: 1;
+}
+
+.cmb2-id--rb-preheat-group-0--rb-preheat-unit {
+  grid-column-start: 2;
+}
+
+/**
+ * Reset CMB2 styles
+ */
+.cmb2-id--rb-preheat-group,
+.postbox-container .cmb2-wrap > .cmb-field-list > .cmb-row.cmb2-id--rb-preheat-group,
+.postbox-container .cmb2-id--rb-preheat-group .cmb-repeatable-grouping,
+.postbox-container .cmb2-id--rb-preheat-group .cmb-repeatable-grouping .inside,
+.postbox-container .cmb-row.cmb2-id--rb-preheat-group-0--rb-preheat-temp,
+.postbox-container .cmb-row.cmb2-id--rb-preheat-group-0--rb-preheat-unit,
+.postbox-container .cmb2-wrap > .cmb-field-list > .cmb-row.cmb2-id--rb-prep-time,
+.postbox-container .cmb2-wrap > .cmb-field-list > .cmb-row.cmb2-id--rb-cook-time,
+.postbox-container .cmb2-wrap > .cmb-field-list > .cmb-row.cmb2-id--rb-total-time,
+.post-type-rb_recipe .cmb2-wrap.ingredients .cmb-repeatable-group .cmb-field-list .cmb-row {
   margin: 0;
   padding: 0;
-  width: 100%;
 }
 
-.post-type-rb_recipe .cmb2-wrap.ingredients .cmb-repeatable-group .cmb-field-list .cmb-td {
-  float: none;
+.cmb2-id--rb-prep-time .cmb-th,
+.cmb2-id--rb-prep-time .cmb-th + .cmb-td,
+.cmb2-id--rb-cook-time .cmb-th,
+.cmb2-id--rb-cook-time .cmb-th + .cmb-td,
+.cmb2-id--rb-total-time .cmb-th,
+.cmb2-id--rb-total-time .cmb-th + .cmb-td,
+.cmb2-id--rb-preheat-group-0--rb-preheat-temp .cmb-th,
+.cmb2-id--rb-preheat-group-0--rb-preheat-temp .cmb-th + .cmb-td,
+.cmb2-id--rb-preheat-group-0--rb-preheat-unit .cmb-th,
+.cmb2-id--rb-preheat-group-0--rb-preheat-unit .cmb-th + .cmb-td,
+.ingredients .postbox.cmb-repeatable-grouping .cmb-td.inside .cmb-th,
+.ingredients .postbox.cmb-repeatable-grouping .cmb-td.inside .cmb-td {
   width: 100%;
+  float: none;
+  text-align: center;
 }
 
-.post-type-rb_recipe .cmb2-wrap.ingredients .cmb-repeatable-group .cmb-field-list .cmb-td .cmb2-text-small,
-.post-type-rb_recipe .cmb2-wrap.ingredients .cmb-repeatable-group .cmb-field-list .cmb-td .cmb2_select {
-  margin-bottom: 0.75rem;
-  width: 100%;
+.postbox-container .cmb-row.cmb2-id--rb-prep-time,
+.postbox-container .cmb-row.cmb2-id--rb-cook-time,
+.postbox-container .cmb-row.cmb2-id--rb-total-time,
+.postbox-container .cmb-row.cmb2-id--rb-preheat-group-0--rb-preheat-temp {
+  border-bottom: none;
 }
 
-.post-type-rb_recipe .cmb2-wrap.ingredients .cmb-repeatable-group .cmb-field-list .cmb-td .cmb2-product-search-button {
-  height: 2.25rem;
-  width: 2.25rem;
+.cmb2-id--rb-preheat-group .postbox {
+  box-shadow: none;
 }
 
-.post-type-rb_recipe .cmb2-wrap.ingredients .cmb-repeatable-group .cmb-field-list .cmb-td .cmb2-metabox-description {
-  display: block;
-  margin: 0.75rem 0 0;
-  padding: 0;
+.cmb2-id--rb-preheat-group {
+  margin-bottom: 2rem;
 }
 
 .post-type-rb_recipe .cmb2-wrap.ingredients .cmb-repeatable-group .cmb-field-list .cmb-remove-field-row:before {
@@ -61,95 +123,45 @@ html {
   display: table;
 }
 
-.post-type-rb_recipe .cmb2-wrap.ingredients .cmb-repeatable-group .cmb-field-list .cmb-remove-field-row .cmb-remove-row .cmb-shift-rows {
-  float: none;
-  padding: 0.125rem 0.25rem;
+.cmb2-metabox-description .extended-description {
+  display: block;
+  margin-top: .5rem;
 }
 
-.post-type-rb_recipe .cmb2-wrap.ingredients .cmb-repeatable-group .cmb-field-list .cmb-remove-field-row .cmb-remove-row .cmb-remove-group-row {
-  float: none;
-  padding: 0.125rem 0.25rem;
+.postbox-container .cmb2-wrap > .cmb-field-list > .cmb-row.cmb2-id--rb-preheat-group {
+  margin-bottom: 1rem;
 }
 
 /**
- * Options page.
+ * Ingredients Grid
  */
-.rb_recipe_page_recipe_box_options #recipe_box_options_metabox .cmb2-id-recipes-with-blog .cmb-td {
-  width: 75%;
+.ingredients .postbox.cmb-repeatable-grouping .cmb-td.inside {
+  display: grid;
+  grid-template-columns: repeat( 4, 1fr );
+  grid-gap: 1rem;
 }
 
-/**
- * Preheat Temperature styles.
- */
-@media screen and (min-width: 64rem) {
-  #_rb_preheat_group_repeat .cmb-row {
-      padding: 0;
-      margin: 0;
-      border: none;
-  }
-
-  #_rb_preheat_group_repeat .cmbhandle, #_rb_preheat_group_repeat .cmbhandle-title {
-      display: none;
-  }
-
-  #_rb_preheat_group_repeat .cmb-row.cmb-type-text-small.cmb2-id--rb-preheat-group-0--rb-preheat-temp.cmb-repeat-group-field {
-      width: 48%;
-      float: left;
-  }
-
-  .cmb-row.cmb-type-select.cmb2-id--rb-preheat-group-0--rb-preheat-unit.cmb-repeat-group-field {
-      width: 48%;
-      float: right;
-  }
+.ingredients .cmb-type-text-small .cmb2-metabox-description {
+  display: block;
+}
 
-  .cmb2-id--rb-preheat-group-0--rb-preheat-temp.cmb-row .cmb-th {
-      width: 60%;
-  }
+.ingredients button.cmb-remove-group-row.alignright {
+  float: left;
+  text-align: left;
+}
 
-  .cmb2-id--rb-preheat-group-0--rb-preheat-temp.cmb-row .cmb-td {
-      width: 40%;
-  }
+/**
+ * Options page.
+ */
+.rb_recipe_page_recipe_box_options #recipe_box_options_metabox .cmb2-id-recipes-with-blog .cmb-td {
+  width: 75%;
 }
 
 /**
- * Responsive Action Row
+ * Preheat Temperature styles.
  */
-@media screen and ( max-width: 1170px ) {
-	a.button.cmb-shift-rows.alignleft {
-		height: 1.7rem;
-	}
-
-	.post-type-rb_recipe .cmb2-wrap.ingredients .cmb-repeatable-group .cmb-field-list .cmb-row.cmb-remove-field-row {
-		float: right;
-	}
-}
-
-@media screen and (min-width: 64rem) {
-
-  .post-type-rb_recipe .cmb2-wrap.ingredients .cmb-repeatable-group .cmb-field-list .cmb-row {
-    float: left;
-    display: block;
-    margin-right: 2.35765%;
-    width: 23.23176%;
-  }
-
-  .post-type-rb_recipe .cmb2-wrap.ingredients .cmb-repeatable-group .cmb-field-list .cmb-row:last-child,
-  .post-type-rb_recipe .cmb2-wrap.ingredients .cmb-repeatable-group .cmb-field-list .cmb-remove-field-row
-   {
-    margin-right: 0;
-  }
-
-  .post-type-rb_recipe .cmb2-wrap.ingredients .cmb-repeatable-group .cmb-field-list .notes-parent {
-  	padding-top: 0;
-  	width: 100%;
-  }
-  .post-type-rb_recipe .cmb2-wrap.ingredients .cmb-repeatable-group .cmb-field-list input.notes {
-  	width: 100%;
-  }
-
-  .post-type-rb_recipe .cmb-remove-field-row .cmb-remove-row {
-  	text-align: left;
-  }
+ #_rb_preheat_group_repeat .cmbhandle, #_rb_preheat_group_repeat .cmbhandle-title {
+  display: none;
 }
 
 /**

diff --git a/assets/css/recipes.min.css b/assets/css/recipes.min.css
diff --git a/includes/class-recipe.php b/includes/class-recipe.php
@@ -199,21 +199,36 @@ private function recipe_meta( $prefix ) {
 			'name'       => __( 'Preparation Time', 'recipe-box' ),
 			'id'         => $prefix . 'prep_time',
 			'type'       => 'text_small',
-			'desc'       => __( 'minutes<br>Time to prepare the recipe.', 'recipe-box' ),
+			'desc'       => __( 'minutes', 'recipe-box' ) .
+				// 1: opening div tag, 2: closing div tag.
+				sprintf( __( '%1$sTime to prepare the recipe.%2$s', 'recipe-box' ),
+				'<div class="extended-description">',
+				'</div>'
+			),
 		) );
 
 		$cmb->add_field( array(
 			'name'       => __( 'Cook Time', 'recipe-box' ),
 			'id'         => $prefix . 'cook_time',
 			'type'       => 'text_small',
-			'desc'       => __( 'minutes<br>Time to cook the recipe.', 'recipe-box' ),
+			'desc'       => __( 'minutes', 'recipe-box' ) .
+				// 1: opening div tag, 2: closing div tag.
+				sprintf( __( '%1$sTime to cook the recipe.%2$s', 'recipe-box' ),
+				'<div class="extended-description">',
+				'</div>'
+			)
 		) );
 
 		$cmb->add_field( array(
 			'name'       => __( 'Total Time (optional)', 'recipe-box' ),
 			'id'         => $prefix . 'total_time',
 			'type'       => 'text_small',
-			'desc'       => __( 'minutes<br>The total time to prepare the recipe. (Defaults to Prep Time + Cook Time. Change if that is not accurate.)', 'recipe-box' ),
+			'desc'       => __( 'minutes', 'recipe-box' ) .
+				sprintf( __( '%1$sThe total time to prepare the recipe. (Defaults to Prep Time + Cook Time. Change if that is not accurate.)%2$s', 'recipe-box' ),
+				// 1: opening div tag, 2: closing div tag.
+				'<div class="extended-description">',
+				'</div>'
+			),
 			'default'    => ( $post_id ) ? $this->get_total_time( $post_id ) : '',
 		) );
 

diff --git a/recipe-box.php b/recipe-box.php
@@ -3,7 +3,7 @@
  * Plugin Name: Recipe Box
  * Plugin URI:  https://jazzsequence.com
  * Description: Easily store and publish recipes in WordPress.
- * Version:     0.3.1
+ * Version:     0.3.2
  * Author:      Chris Reynolds
  * Author URI:  https://jazzsequence.com
  * Donate link: https://jazzsequence.com
@@ -14,11 +14,11 @@
  * @link https://jazzsequence.com
  *
  * @package Recipe Box
- * @version 0.3
+ * @version 0.3.2
  */
 
 /**
- * Copyright (c) 2016 Chris Reynolds (email : hello@chrisreynolds.io)
+ * Copyright (c) 2019 Chris Reynolds (email : hello@chrisreynolds.io)
  *
  * This program is free software; you can redistribute it and/or modify
  * it under the terms of the GNU General Public License, version 2 or, at
@@ -35,11 +35,6 @@
  * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
  */
 
-/**
- * Built using generator-plugin-wp
- */
-
-
 /**
  * Autoloads files with classes when needed
  *
@@ -73,7 +68,7 @@ final class Recipe_Box {
 	 * @var  string
 	 * @since  0.1
 	 */
-	const VERSION = '0.3';
+	const VERSION = '0.3.2';
 
 	/**
 	 * URL of plugin directory