Merge pull request #415 from cloudinary/uat

Uat

Author: asisayag2

cloudinary.php

@@ -3,7 +3,7 @@
  * Plugin Name: Cloudinary
  * Plugin URI: https://cloudinary.com/documentation/wordpress_integration
  * Description: With the Cloudinary plugin, you can upload and manage your media assets in the cloud, then deliver them to your users through a fast content delivery network, improving your website’s loading speed and overall user experience. Apply multiple transformations and take advantage of a full digital asset management solution without leaving WordPress.
- * Version: 2.7.0
+ * Version: 2.7.1-rc-4
  * Author:  Cloudinary Ltd., XWP
  * Author URI: https://cloudinary.com/
  * License: GPLv2+

css/cloudinary.css

@@ -11,3 +11,6 @@ $color-notification-success: #20b832;
 
 /** Sizes */
 $content-width: 870px;
+$size-small: 783px;
+$size-medium: 960px;
+$size-large: 1200px;

css/src/_variables.scss

@@ -313,6 +313,10 @@
 		margin-top: 0.5em;
 	}
 
+	input[type="checkbox"] ~ label {
+		margin-left: .25em;
+	}
+
 	.modal-footer {
 		background-color: #fcfcfc;
 		border-top: 1px solid #ddd;
@@ -334,5 +338,9 @@
 	textarea {
 		resize: none;
 	}
+
+	p {
+		display: flex;
+	}
 }
 

css/src/components/_settings.scss

@@ -12,9 +12,7 @@
 .cld {
 
 	&-syncing {
-		background-image: url("./loading.svg");
-		background-repeat: no-repeat;
-		background-position: center center;
+		background: url("./loading.svg") no-repeat center center;
 		width: 30px;
 		height: 20px;
 		margin-left: 12px;
@@ -29,7 +27,14 @@
 		right: 0;
 		padding: 0;
 		color: #555d66;
-		margin-left: 160px;
+
+		@media only screen and (min-width: $size-small) {
+			margin-left: 36px;
+		}
+
+		@media only screen and (min-width: $size-medium) {
+			margin-left: 160px;
+		}
 
 		.cld-notice-box.is-success{
 			border: 0;
@@ -66,7 +71,7 @@
 		margin-right: 20px;
 		margin-bottom: 12px;
 		.cld-notice {
-			padding: 1rem 1.2rem 0.75rem 1.2rem;
+			padding: 1rem 2.2rem 0.75rem 1.2rem;
 
 			img.cld-ui-icon {
 				height: 100%;
@@ -81,12 +86,12 @@
 			padding-left: 38px;
 		}
 
-
 		&.is-success,
 		&.is-updated,
 		&.is-created {
 			background-color: #ebf5ec;
 			border-left: 4px solid #42ad4f;
+
 			.dashicons{
 				color: $color-success;
 			}
@@ -138,18 +143,6 @@
 	}
 
 	&-ui {
-		&-settings {
-
-			/* Small devices */
-			@media only screen and (max-width: 992px) {
-				margin: 0 10px 0 -10px;
-			}
-
-			@media only screen and (max-width: 782px) {
-				margin: 0 -1px 0 -10px;
-			}
-
-		}
 
 		&-collapse {
 			align-self: center;
@@ -181,10 +174,18 @@
 
 			.cld-column {
 				padding: 0 1.75em;
+				float: left;
+				width: 100%;
+				box-sizing: border-box;
 
-				/* Small devices */
-				@media only screen and (max-width: 782px) {
-					width: 100% !important;
+				@media only screen and (min-width: $size-small) {
+					&.column-45 {
+						width: 45%;
+					}
+
+					&.column-55 {
+						width: 55%;
+					}
 				}
 			}
 
@@ -193,25 +194,13 @@
 				clear: both;
 				display: table;
 			}
-
-			@media only screen {
-
-				.cld-column {
-					float: left;
-					width: 100%;
-					box-sizing: border-box;
-				}
-			}
-
-
 		}
 	}
 
 	&-image,
 	&-video {
 
 		&-preview {
-
 			background-color: rgba(216, 216, 216, 0.5);
 			padding: 7px;
 			border-radius: 5px;
@@ -252,6 +241,7 @@
 			padding: 0 1rem;
 			margin-left: -20px;
 			margin-top: -1em;
+			flex-wrap: wrap;
 
 			&-tab {
 				list-style: none;
@@ -295,7 +285,6 @@
 	}
 
 	&-input {
-
 		@include input;
 
 		.regular-text,
@@ -388,8 +377,6 @@
 						}
 					}
 				}
-
-
 			}
 		}
 
@@ -411,18 +398,26 @@
 
 	&-panel,
 	&-info-box,
-	&-panel-short {
+	&-panel-short,
+	&-submit,
+	&-switch-cloud {
 		background-color: #fff;
 		border: 1px solid $color-light-grey;
-		padding: 2rem 1.75rem;
-		margin-top: 1rem;
 		margin-right: 1rem;
-		width: $content-width;
+		max-width: $content-width;
+	}
 
-		/* Medium devices until large */
-		@media only screen and (min-width: 993px) {
-			max-width: 900px;
-		}
+	&-submit,
+	&-switch-cloud {
+		border-top: 0;
+		padding: 1.2rem 1.75rem;
+	}
+
+	&-panel,
+	&-info-box,
+	&-panel-short {
+		margin-top: 1rem;
+		padding: 2rem 1.75rem;
 
 		&-inner {
 			padding: 1.3rem;
@@ -451,26 +446,12 @@
 
 		&-heading {
 			display: flex;
-			background-color: #fff;
-			border: 1px solid $color-light-grey;
 			border-bottom: 0;
 			padding: 0.4rem 1.75rem 0.2rem;
-			width: $content-width;
-			margin-top: 1rem;
 
 			img {
 				margin-right: 0.6rem;
 			}
-
-			/* Small devices */
-			@media only screen and (max-width: 960px) {
-				width: auto;
-			}
-
-			/* Medium devices until large */
-			@media only screen and (min-width: 961px) and (max-width: 1200px) {
-				width: 85%;
-			}
 		}
 
 		ul {
@@ -527,7 +508,7 @@
 				font-weight: 400;
 			}
 
-			@media only screen and (min-width: 783px) {
+			@media only screen and (min-width: $size-small) {
 				display: flex;
 				flex-wrap: nowrap;
 				font-size: 1em;
@@ -543,13 +524,14 @@
 				}
 			}
 
-			@media only screen and (min-width: 1200px) {
+			@media only screen and (min-width: $size-large) {
 				font-size: 1.2em;
 			}
 		}
 
 		.img-connection-string {
 			max-width: 607px;
+			width: 100%;
 		}
 
 		.connection-string {
@@ -619,8 +601,12 @@
 	}
 
 	&-info-box {
-
 		display: flex;
+		flex-direction: column;
+
+		@media only screen and (min-width: $size-small) {
+			flex-direction: row;
+		}
 
 		img,
 		a.button {
@@ -638,42 +624,27 @@
 		display: inline-block;
 	}
 
-	&-submit,
-	&-switch-cloud {
-
-		&.cld-ui-wrap {
-			background-color: #fff;
-			border: 1px solid $color-light-grey;
-			border-top: 0;
-			padding: 1.2rem 1.75rem;
-			width: $content-width;
-
-			/* Small devices */
-			@media only screen and (max-width: 960px) {
-				width: auto;
-			}
-
-			/* Medium devices until large */
-			@media only screen and (min-width: 961px) and (max-width: 1200px) {
-				width: 85%;
-			}
-		}
-	}
-
 	&-gallery-settings {
 		width: 100%;
 		display: flex;
 		flex-wrap: wrap;
 		padding: 1rem 0;
-		margin-left: -1rem;
-		margin-right: -1rem;
 		box-sizing: border-box;
 
+		@media only screen and (min-width: $size-medium) {
+			margin-left: -1rem;
+			margin-right: -1rem;
+		}
+
 		&__column {
-			width: 50%;
-			padding-left: 1rem;
-			padding-right: 1rem;
 			box-sizing: border-box;
+			width: 100%;
+
+			@media only screen and (min-width: $size-medium) {
+				padding-left: 1rem;
+				padding-right: 1rem;
+				width: 50%;
+			}
 		}
 	}
 }

css/src/components/_ui.scss

@@ -6,6 +6,15 @@ module.exports = function ( grunt ) {
 		.read( 'cloudinary.php' )
 		.match( /Version:\s*(.+)$/im )[ 1 ];
 
+	const options = {
+		plugin_slug:
+			'cloudinary-image-management-and-manipulation-in-the-cloud-cdn',
+		plugin_main_file: 'cloudinary.php',
+		build_dir: '<%= dist_dir %>',
+		assets_dir: 'assets',
+		svn_user: 'cloudinary',
+	};
+
 	grunt.initConfig( {
 		dist_dir: 'build',
 
@@ -56,18 +65,13 @@ module.exports = function ( grunt ) {
 		},
 
 		wp_deploy: {
-			options: {
-				plugin_slug:
-					'cloudinary-image-management-and-manipulation-in-the-cloud-cdn',
-				plugin_main_file: 'cloudinary.php',
-				build_dir: '<%= dist_dir %>',
-				assets_dir: 'assets',
-			},
 			default: {
 				// Default deploy to trunk and a tag release.
+				options,
 			},
 			assets: {
 				// Deploy only screenshots and icons.
+				...options,
 				deploy_trunk: false,
 				deploy_tag: false,
 			},

gruntfile.js

@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-polyfill'), 'version' => 'be441971594d2402081dd17cd9006ce5');
+<?php return array('dependencies' => array('wp-polyfill'), 'version' => 'e862bb5e9c2155662e26dab8ad582baa');