cronofy-elements - npm Package Compare versions

Comparing version 1.17.7 to 1.17.8

package.json

 {
     "name": "cronofy-elements",
-    "version": "1.17.7",
+    "version": "1.17.8",
     "description": "Fast track scheduling with Cronofy's embeddable UI Elements",
@@ -5,0 +5,0 @@ "main": "build/npm/CronofyElements.js",

src/js/components/AvailabilityRules/AvailabilityRules.js

@@ -82,2 +82,5 @@ import React, { useState, useEffect } from "react";
         sizes: {
+            breakpoints: {
+                small: 650
+            },
             labelWidth: 60,
@@ -84,0 +87,0 @@ columnWidth: 100,

src/js/components/AvailabilityRules/Calendars.js

@@ -95,3 +95,3 @@ import React, { useState, useContext } from "react";
                 margin-bottom: 20px;
-                @media (max-width: 550px) {
+                @media (max-width: ${theme.sizes.breakpoints.small}px) {
                     flex-wrap: wrap;
@@ -104,5 +104,6 @@ }
                 css={css`
-                    margin-right: 4px;
-                    width: 12em;
-                    @media (max-width: 550px) {
+                    display: block;
+                    margin-right: 12px;
+                    flex-shrink: 0;
+                    @media (max-width: ${theme.sizes.breakpoints.small}px) {
                         margin-bottom: 10px;
@@ -109,0 +110,0 @@ }

src/js/components/AvailabilityRules/DayLabels.js

@@ -59,3 +59,3 @@ import React, { useContext } from "react";
                 display: flex;
-                @media (max-width: 550px) {
+                @media (max-width: ${theme.sizes.breakpoints.small}px) {
                     margin-top: 16px;
@@ -73,3 +73,3 @@ }
                     height: ${extras.slotHeight.height}px;
-                    @media (max-width: 550px) {
+                    @media (max-width: ${theme.sizes.breakpoints.small}px) {
                         display: none;
@@ -76,0 +76,0 @@ }

src/js/components/AvailabilityRules/Footer.js

@@ -29,3 +29,3 @@ import React, { useContext } from "react";
                 align-items: center;
-                @media (max-width: 550px) {
+                @media (max-width: ${theme.sizes.breakpoints.small}px) {
                     flex-wrap: wrap;
@@ -44,3 +44,3 @@ align-items: flex-end;
                     height: ${extras.slotHeight.height}px;
-                    @media (max-width: 550px) {
+                    @media (max-width: ${theme.sizes.breakpoints.small}px) {
                         display: none;
@@ -85,5 +85,6 @@ }
                     border-radius: 2px;
-                    width: 132px;
+                    min-width: 132px;
                     flex-shrink: 0;
                     text-align: center;
+                    flex-shrink: 0;
                 `}
@@ -90,0 +91,0 @@ onClick={() => generateRules()}

src/js/components/AvailabilityRules/Legend.js

@@ -46,3 +46,3 @@ import React, { useContext } from "react";
                 flex-shrink: 0;
-                @media (max-width: 550px) {
+                @media (max-width: ${theme.sizes.breakpoints.small}px) {
                     margin-bottom: 16px;
@@ -49,0 +49,0 @@ }

src/js/components/AvailabilityRules/TimeLabels.js

@@ -29,3 +29,3 @@ import React, { useState, useContext } from "react";
                 text-transform: lowercase;
-                @media (max-width: 550px) {
+                @media (max-width: ${theme.sizes.breakpoints.small}px) {
                     text-align: left;
@@ -69,3 +69,3 @@ opacity: 0.6;
                     padding-right: 4px;
-                    @media (max-width: 550px) {
+                    @media (max-width: ${theme.sizes.breakpoints.small}px) {
                         position: absolute;
@@ -88,3 +88,3 @@ top: 0;
                         cursor: pointer;
-                        @media (max-width: 550px) {
+                        @media (max-width: ${theme.sizes.breakpoints.small}px) {
                             left: 0;
@@ -91,0 +91,0 @@ transform: translate(0, -40px);

src/js/components/AvailabilityRules/TimeZoneDisplay.js

@@ -23,3 +23,3 @@ import React, { useContext } from "react";
                 width: 100%;
-                @media (max-width: 550px) {
+                @media (max-width: ${theme.sizes.breakpoints.small}px) {
                     margin-bottom: 16px;
@@ -26,0 +26,0 @@ }

src/js/components/AvailabilityRules/Week.js

@@ -45,3 +45,5 @@ import React, { useContext, useEffect, useState } from "react";
         const availableSpaceForGrid =
-            size.width > 550 ? elementWidth - labelColumnWidth : elementWidth;
+            size.width > theme.sizes.breakpoints.small
+                ? elementWidth - labelColumnWidth
+                : elementWidth;
 
@@ -48,0 +50,0 @@ const columnCount = 7;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2586909

increased by0.03%

Lines of code

24095

increased by0.03%

No dependency changes