namirasoft-site-react 1.5.16 → 1.5.18

package/src/components/NSRange.module.css

@@ -1,67 +1,67 @@
-.ns_range_parent {
-	width: 100%;
-	max-width: 1150px;
-}
-
-.ns_range_time_item {
-	z-index: 99;
-	text-align: center;
-	max-width: 48px;
-	display: inline-block;
-	height: 60px;
-	position: relative;
-	border-width: 1px;
-	border-color: #DCDCDC;
-	border-style: groove;
-}
-
-.ns_range_time_box_full {
-	background-color: #fff;
-	border-radius: 5px;
-	position: relative;
-	box-shadow: 0 3px 6px 0 rgb(0 0 0 / 7%);
-	overflow-x: scroll;
-}
-
-.ns_range_time_box_full::-webkit-scrollbar {
-	height: 6px;
-}
-
-.ns_range_time_box_full::-webkit-scrollbar-track {
-	background-color: #c0c0c0;
-	border-radius: 6px;
-}
-
-.ns_range_time_box_full::-webkit-scrollbar-thumb {
-	background: #141B5C;
-	border-radius: 6px;
-}
-
-.ns_range_time_line {
-	position: absolute;
-	height: 100%;
-}
-
-.ns_time_line_title {
-	color: #141B5C;
-	margin-bottom: 16px;
-}
-
-.ns_range_time_item span {
-	color: #141B5C;
-	width: 100%;
-	display: inline-block;
-	background-color: #DCDCDC;
-	border-bottom: 1px solid #DCDCDC;
-	font-weight: 500;
-}
-
-@media screen and (min-width: 992px) {
-	.ns_range_time_box_full {
-		overflow: hidden;
-	}
-
-	.ns_range_time_item {
-		width: 4.166666%;
-	}
+.ns_range_parent {
+	width: 100%;
+	max-width: 1150px;
+}
+
+.ns_range_time_item {
+	z-index: 99;
+	text-align: center;
+	max-width: 48px;
+	display: inline-block;
+	height: 60px;
+	position: relative;
+	border-width: 1px;
+	border-color: #DCDCDC;
+	border-style: groove;
+}
+
+.ns_range_time_box_full {
+	background-color: #fff;
+	border-radius: 5px;
+	position: relative;
+	box-shadow: 0 3px 6px 0 rgb(0 0 0 / 7%);
+	overflow-x: scroll;
+}
+
+.ns_range_time_box_full::-webkit-scrollbar {
+	height: 6px;
+}
+
+.ns_range_time_box_full::-webkit-scrollbar-track {
+	background-color: #c0c0c0;
+	border-radius: 6px;
+}
+
+.ns_range_time_box_full::-webkit-scrollbar-thumb {
+	background: #141B5C;
+	border-radius: 6px;
+}
+
+.ns_range_time_line {
+	position: absolute;
+	height: 100%;
+}
+
+.ns_time_line_title {
+	color: #141B5C;
+	margin-bottom: 16px;
+}
+
+.ns_range_time_item span {
+	color: #141B5C;
+	width: 100%;
+	display: inline-block;
+	background-color: #DCDCDC;
+	border-bottom: 1px solid #DCDCDC;
+	font-weight: 500;
+}
+
+@media screen and (min-width: 992px) {
+	.ns_range_time_box_full {
+		overflow: hidden;
+	}
+
+	.ns_range_time_item {
+		width: 4.166666%;
+	}
 }

package/src/components/NSRange.tsx

@@ -1,84 +1,84 @@
-// todo move to its own probject: this is Timify
-
-import { useEffect, useState } from 'react';
-import Styles from './NSRange.module.css';
-import { IBaseComponentProps } from '../props/IBaseComponentProps';
-import { Color } from "../Color";
-
-export interface NSRangeRow
-{
-	start_time: Date;
-	end_time: Date;
-	percentage: number;
-}
-
-export interface NSPaginationProps extends IBaseComponentProps
-{
-	data: NSRangeRow[];
-	title?: string;
-}
-
-export function NSRange(props: NSPaginationProps)
-{
-	const [Widths, setWidths] = useState<string[]>([]);
-	const [positions, setPositions] = useState<string[]>([]);
-
-	useEffect(() =>
-	{
-		const widths = props.data?.map((data) =>
-		{
-			const minutes = calculateMinutesBetween(data.start_time, data.end_time);
-			return convertToPercentage(minutes);
-		});
-		const positions = props.data?.map((data) =>
-		{
-			const minutes = calculateMinutesBetween(new Date('2023-08-14T00:00:00'), data.start_time);
-			return convertToPercentage(minutes);
-		});
-		setWidths(widths);
-		setPositions(positions);
-	}, [props.data]);
-
-	const calculateMinutesBetween = (start_time: Date, end_time: Date): number =>
-	{
-		const difference_in_milliseconds = Math.abs(start_time.getTime() - end_time.getTime());
-		const difference_in_minutes = Math.floor(difference_in_milliseconds / 1000 / 60);
-		return difference_in_minutes;
-	};
-
-	const convertToPercentage = (minute: number): string =>
-	{
-		const width = ((minute * 100) / 1440).toString();
-		return `${width}%`;
-	};
-
-	return (
-		<div className={`${Styles.ns_range_parent} ${props.classList?.join(" ") ?? ""}`} style={props.style}>
-			<h5 className={Styles.ns_time_line_title}>{props.title}</h5>
-			<div className="col-12 px-0">
-				<div className={` ${Styles.ns_range_time_box_full} d-flex justify-content-start`}>
-					<div>
-						{
-							props.data?.map((data, index) =>
-								<span
-									key={`NSRange_span_key_${index}`}
-									className={Styles.ns_range_time_line}
-									style={{
-										background: Color.getColor(data?.percentage),
-										width: Widths[index] || '0%',
-										left: positions[index] || '%0'
-									}}>
-								</span>
-							)
-						}
-					</div>
-					{[...Array(24).keys()].map(hour => (
-						<div key={hour} className={Styles.ns_range_time_item}>
-							<span>{hour.toString().padStart(2, '0')}:00</span>
-						</div>
-					))}
-				</div>
-			</div>
-		</div>
-	);
+// todo move to its own probject: this is Timify
+
+import { useEffect, useState } from 'react';
+import Styles from './NSRange.module.css';
+import { IBaseComponentProps } from '../props/IBaseComponentProps';
+import { Color } from "../Color";
+
+export interface NSRangeRow
+{
+	start_time: Date;
+	end_time: Date;
+	percentage: number;
+}
+
+export interface NSPaginationProps extends IBaseComponentProps
+{
+	data: NSRangeRow[];
+	title?: string;
+}
+
+export function NSRange(props: NSPaginationProps)
+{
+	const [Widths, setWidths] = useState<string[]>([]);
+	const [positions, setPositions] = useState<string[]>([]);
+
+	useEffect(() =>
+	{
+		const widths = props.data?.map((data) =>
+		{
+			const minutes = calculateMinutesBetween(data.start_time, data.end_time);
+			return convertToPercentage(minutes);
+		});
+		const positions = props.data?.map((data) =>
+		{
+			const minutes = calculateMinutesBetween(new Date('2023-08-14T00:00:00'), data.start_time);
+			return convertToPercentage(minutes);
+		});
+		setWidths(widths);
+		setPositions(positions);
+	}, [props.data]);
+
+	const calculateMinutesBetween = (start_time: Date, end_time: Date): number =>
+	{
+		const difference_in_milliseconds = Math.abs(start_time.getTime() - end_time.getTime());
+		const difference_in_minutes = Math.floor(difference_in_milliseconds / 1000 / 60);
+		return difference_in_minutes;
+	};
+
+	const convertToPercentage = (minute: number): string =>
+	{
+		const width = ((minute * 100) / 1440).toString();
+		return `${width}%`;
+	};
+
+	return (
+		<div className={`${Styles.ns_range_parent} ${props.classList?.join(" ") ?? ""}`} style={props.style}>
+			<h5 className={Styles.ns_time_line_title}>{props.title}</h5>
+			<div className="col-12 px-0">
+				<div className={` ${Styles.ns_range_time_box_full} d-flex justify-content-start`}>
+					<div>
+						{
+							props.data?.map((data, index) =>
+								<span
+									key={`NSRange_span_key_${index}`}
+									className={Styles.ns_range_time_line}
+									style={{
+										background: Color.getColor(data?.percentage),
+										width: Widths[index] || '0%',
+										left: positions[index] || '%0'
+									}}>
+								</span>
+							)
+						}
+					</div>
+					{[...Array(24).keys()].map(hour => (
+						<div key={hour} className={Styles.ns_range_time_item}>
+							<span>{hour.toString().padStart(2, '0')}:00</span>
+						</div>
+					))}
+				</div>
+			</div>
+		</div>
+	);
 }

package/src/components/NSReorderDialog.module.css

@@ -1,50 +1,50 @@
-.column_item {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 8px 12px;
-    border-radius: 6px;
-    border: 2px solid transparent;
-    background-color: rgba(20, 27, 92, 0.04);
-    cursor: grab;
-    user-select: none;
-    box-sizing: border-box;
-    transition: background-color 0.1s, border-color 0.1s;
-}
-
-.column_item:hover {
-    background-color: rgba(20, 27, 92, 0.08);
-}
-
-.column_item_dragging {
-    opacity: 0.35;
-}
-
-.column_item_drag_over {
-    border-color: rgba(20, 27, 92, 0.45);
-    border-style: dashed;
-    background-color: rgba(20, 27, 92, 0.1);
-}
-
-.drag_handle {
-    color: #bbb;
-    font-size: 20px;
-    line-height: 1;
-    cursor: grab;
-    flex-shrink: 0;
-}
-
-.checkbox {
-    width: 18px;
-    height: 18px;
-    cursor: pointer;
-    margin: 0;
-    flex-shrink: 0;
-    accent-color: rgba(20, 27, 92, 1);
-}
-
-.column_label {
-    font-size: 14px;
-    flex: 1;
+.column_item {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 12px;
+    border-radius: 6px;
+    border: 2px solid transparent;
+    background-color: rgba(20, 27, 92, 0.04);
+    cursor: grab;
+    user-select: none;
+    box-sizing: border-box;
+    transition: background-color 0.1s, border-color 0.1s;
+}
+
+.column_item:hover {
+    background-color: rgba(20, 27, 92, 0.08);
+}
+
+.column_item_dragging {
+    opacity: 0.35;
+}
+
+.column_item_drag_over {
+    border-color: rgba(20, 27, 92, 0.45);
+    border-style: dashed;
+    background-color: rgba(20, 27, 92, 0.1);
+}
+
+.drag_handle {
+    color: #bbb;
+    font-size: 20px;
+    line-height: 1;
+    cursor: grab;
+    flex-shrink: 0;
+}
+
+.checkbox {
+    width: 18px;
+    height: 18px;
+    cursor: pointer;
+    margin: 0;
+    flex-shrink: 0;
+    accent-color: rgba(20, 27, 92, 1);
+}
+
+.column_label {
+    font-size: 14px;
+    flex: 1;
 }