Skip to content
This repository was archived by the owner on Dec 25, 2024. It is now read-only.

Commit 1cce0bc

Browse files
javadbatjavadbat
committed
fix style problem on mobile
1 parent ea8327f commit 1cce0bc

File tree

4 files changed

+58
-38
lines changed

4 files changed

+58
-38
lines changed

Diff for: ‎docs/src/components/installation/styled.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,6 @@ export const InstallationTitle = styled.h2`
1212
text-align: center;
1313
`;
1414
export const CodeBox = styled(SyntaxHighlighter)`
15-
width: 400px;
15+
max-width: 400px;
16+
width: calc(100% - 64px);
1617
`;

Diff for: ‎docs/src/components/intro-section/styled.ts

+5
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,11 @@ export const ComponentName= styled.h1`
1616
font-size: 5rem;
1717
font-weight: 800;
1818
color:#010101;
19+
text-align: center;
20+
${down("lg")}{
21+
font-size: 2rem;
22+
word-break: break-all;
23+
}
1924
`;
2025
export const ComponentSubtitle = styled.h2`
2126
color:#404040;

Diff for: ‎docs/src/components/samples/Samples.tsx

+41-37
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useEffect } from 'react';
2-
import { FormalTheme, SamplesSectionWrapper, SamplesTitle } from './styled';
2+
import { FormalTheme, RTLJBDateInput, SamplesSectionWrapper, SamplesTitle, SamplesWrapper } from './styled';
33
import dynamic from 'next/dynamic';
4-
import {JBDateInputValueObject } from 'jb-date-input-react';
4+
import { JBDateInputValueObject } from 'jb-date-input-react';
55
enum InputTypes {
66
jalali = 'JALALI',
77
gregorian = 'GREGORIAN'
@@ -31,43 +31,47 @@ function Samples() {
3131
<SamplesTitle>
3232
Samples
3333
</SamplesTitle>
34-
<JBDateInput label="simple date:">{ }</JBDateInput>
35-
<JBDateInput label="with persian number" usePersianNumber={true}>{ }</JBDateInput>
36-
<JBDateInput label="with default value:" value="2020-08-10T08:51:23.176Z">{ }</JBDateInput>
37-
<JBDateInput label="with min and max value:" value="2020-08-10T08:51:23.176Z" min="2020-08-05T08:51:23.176Z" max="2020-08-15T08:51:23.176Z">{ }</JBDateInput>
38-
<JBDateInput label="with validation" validationList={validationList}>{ }</JBDateInput>
39-
<JBDateInput label="gregorian date:" inputType="GREGORIAN">{ }</JBDateInput>
40-
<JBDateInput label="with default opened calendar date" inputType="JALALI" calendarDefaultDateView={{ year: 1350, month: 3, dateType: InputTypes.jalali }}>{ }</JBDateInput>
41-
<JBDateInput label="with custom icon">
42-
<div slot="calendar-trigger-icon">
43-
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 610.398 610.398">
44-
<g>
34+
<SamplesWrapper>
35+
<JBDateInput label="simple date:">{ }</JBDateInput>
36+
<JBDateInput label="with persian number" usePersianNumber={true}>{ }</JBDateInput>
37+
<RTLJBDateInput label="راست به چپ" usePersianNumber={true}>{ }</RTLJBDateInput>
38+
<JBDateInput label="with default value:" value="2020-08-10T08:51:23.176Z">{ }</JBDateInput>
39+
<JBDateInput label="with min and max value:" value="2020-08-10T08:51:23.176Z" min="2020-08-05T08:51:23.176Z" max="2020-08-15T08:51:23.176Z">{ }</JBDateInput>
40+
<JBDateInput label="with validation" validationList={validationList}>{ }</JBDateInput>
41+
<JBDateInput label="gregorian date:" inputType="GREGORIAN">{ }</JBDateInput>
42+
<JBDateInput label="with default opened calendar date" inputType="JALALI" calendarDefaultDateView={{ year: 1350, month: 3, dateType: InputTypes.jalali }}>{ }</JBDateInput>
43+
<JBDateInput label="with custom icon">
44+
<div slot="calendar-trigger-icon">
45+
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 610.398 610.398">
4546
<g>
46-
<path d="M159.567,0h-15.329c-1.956,0-3.811,0.411-5.608,0.995c-8.979,2.912-15.616,12.498-15.616,23.997v10.552v27.009v14.052 c0,2.611,0.435,5.078,1.066,7.44c2.702,10.146,10.653,17.552,20.158,17.552h15.329c11.724,0,21.224-11.188,21.224-24.992V62.553 V35.544V24.992C180.791,11.188,171.291,0,159.567,0z" />
47-
<path d="M461.288,0h-15.329c-11.724,0-21.224,11.188-21.224,24.992v10.552v27.009v14.052c0,13.804,9.5,24.992,21.224,24.992 h15.329c11.724,0,21.224-11.188,21.224-24.992V62.553V35.544V24.992C482.507,11.188,473.007,0,461.288,0z" />
48-
<path d="M539.586,62.553h-37.954v14.052c0,24.327-18.102,44.117-40.349,44.117h-15.329c-22.247,0-40.349-19.79-40.349-44.117 V62.553H199.916v14.052c0,24.327-18.102,44.117-40.349,44.117h-15.329c-22.248,0-40.349-19.79-40.349-44.117V62.553H70.818 c-21.066,0-38.15,16.017-38.15,35.764v476.318c0,19.784,17.083,35.764,38.15,35.764h468.763c21.085,0,38.149-15.984,38.149-35.764 V98.322C577.735,78.575,560.671,62.553,539.586,62.553z M527.757,557.9l-446.502-0.172V173.717h446.502V557.9z" />
49-
<path d="M353.017,266.258h117.428c10.193,0,18.437-10.179,18.437-22.759s-8.248-22.759-18.437-22.759H353.017 c-10.193,0-18.437,10.179-18.437,22.759C334.58,256.074,342.823,266.258,353.017,266.258z" />
50-
<path d="M353.017,348.467h117.428c10.193,0,18.437-10.179,18.437-22.759c0-12.579-8.248-22.758-18.437-22.758H353.017 c-10.193,0-18.437,10.179-18.437,22.758C334.58,338.288,342.823,348.467,353.017,348.467z" />
51-
<path d="M353.017,430.676h117.428c10.193,0,18.437-10.18,18.437-22.759s-8.248-22.759-18.437-22.759H353.017 c-10.193,0-18.437,10.18-18.437,22.759S342.823,430.676,353.017,430.676z" />
52-
<path d="M353.017,512.89h117.428c10.193,0,18.437-10.18,18.437-22.759c0-12.58-8.248-22.759-18.437-22.759H353.017 c-10.193,0-18.437,10.179-18.437,22.759C334.58,502.71,342.823,512.89,353.017,512.89z" />
53-
<path d="M145.032,266.258H262.46c10.193,0,18.436-10.179,18.436-22.759s-8.248-22.759-18.436-22.759H145.032 c-10.194,0-18.437,10.179-18.437,22.759C126.596,256.074,134.838,266.258,145.032,266.258z" />
54-
<path d="M145.032,348.467H262.46c10.193,0,18.436-10.179,18.436-22.759c0-12.579-8.248-22.758-18.436-22.758H145.032 c-10.194,0-18.437,10.179-18.437,22.758C126.596,338.288,134.838,348.467,145.032,348.467z" />
55-
<path d="M145.032,430.676H262.46c10.193,0,18.436-10.18,18.436-22.759s-8.248-22.759-18.436-22.759H145.032 c-10.194,0-18.437,10.18-18.437,22.759S134.838,430.676,145.032,430.676z" />
56-
<path d="M145.032,512.89H262.46c10.193,0,18.436-10.18,18.436-22.759c0-12.58-8.248-22.759-18.436-22.759H145.032 c-10.194,0-18.437,10.179-18.437,22.759C126.596,502.71,134.838,512.89,145.032,512.89z" />
47+
<g>
48+
<path d="M159.567,0h-15.329c-1.956,0-3.811,0.411-5.608,0.995c-8.979,2.912-15.616,12.498-15.616,23.997v10.552v27.009v14.052 c0,2.611,0.435,5.078,1.066,7.44c2.702,10.146,10.653,17.552,20.158,17.552h15.329c11.724,0,21.224-11.188,21.224-24.992V62.553 V35.544V24.992C180.791,11.188,171.291,0,159.567,0z" />
49+
<path d="M461.288,0h-15.329c-11.724,0-21.224,11.188-21.224,24.992v10.552v27.009v14.052c0,13.804,9.5,24.992,21.224,24.992 h15.329c11.724,0,21.224-11.188,21.224-24.992V62.553V35.544V24.992C482.507,11.188,473.007,0,461.288,0z" />
50+
<path d="M539.586,62.553h-37.954v14.052c0,24.327-18.102,44.117-40.349,44.117h-15.329c-22.247,0-40.349-19.79-40.349-44.117 V62.553H199.916v14.052c0,24.327-18.102,44.117-40.349,44.117h-15.329c-22.248,0-40.349-19.79-40.349-44.117V62.553H70.818 c-21.066,0-38.15,16.017-38.15,35.764v476.318c0,19.784,17.083,35.764,38.15,35.764h468.763c21.085,0,38.149-15.984,38.149-35.764 V98.322C577.735,78.575,560.671,62.553,539.586,62.553z M527.757,557.9l-446.502-0.172V173.717h446.502V557.9z" />
51+
<path d="M353.017,266.258h117.428c10.193,0,18.437-10.179,18.437-22.759s-8.248-22.759-18.437-22.759H353.017 c-10.193,0-18.437,10.179-18.437,22.759C334.58,256.074,342.823,266.258,353.017,266.258z" />
52+
<path d="M353.017,348.467h117.428c10.193,0,18.437-10.179,18.437-22.759c0-12.579-8.248-22.758-18.437-22.758H353.017 c-10.193,0-18.437,10.179-18.437,22.758C334.58,338.288,342.823,348.467,353.017,348.467z" />
53+
<path d="M353.017,430.676h117.428c10.193,0,18.437-10.18,18.437-22.759s-8.248-22.759-18.437-22.759H353.017 c-10.193,0-18.437,10.18-18.437,22.759S342.823,430.676,353.017,430.676z" />
54+
<path d="M353.017,512.89h117.428c10.193,0,18.437-10.18,18.437-22.759c0-12.58-8.248-22.759-18.437-22.759H353.017 c-10.193,0-18.437,10.179-18.437,22.759C334.58,502.71,342.823,512.89,353.017,512.89z" />
55+
<path d="M145.032,266.258H262.46c10.193,0,18.436-10.179,18.436-22.759s-8.248-22.759-18.436-22.759H145.032 c-10.194,0-18.437,10.179-18.437,22.759C126.596,256.074,134.838,266.258,145.032,266.258z" />
56+
<path d="M145.032,348.467H262.46c10.193,0,18.436-10.179,18.436-22.759c0-12.579-8.248-22.758-18.436-22.758H145.032 c-10.194,0-18.437,10.179-18.437,22.758C126.596,338.288,134.838,348.467,145.032,348.467z" />
57+
<path d="M145.032,430.676H262.46c10.193,0,18.436-10.18,18.436-22.759s-8.248-22.759-18.436-22.759H145.032 c-10.194,0-18.437,10.18-18.437,22.759S134.838,430.676,145.032,430.676z" />
58+
<path d="M145.032,512.89H262.46c10.193,0,18.436-10.18,18.436-22.759c0-12.58-8.248-22.759-18.436-22.759H145.032 c-10.194,0-18.437,10.179-18.437,22.759C126.596,502.71,134.838,512.89,145.032,512.89z" />
59+
</g>
5760
</g>
58-
</g>
59-
</svg>
60-
</div>
61-
</JBDateInput>
62-
<JBDateInput label="with inner-box section">
63-
<jb-date-input-inbox-element slot="end-section">
64-
<div>after</div>
65-
</jb-date-input-inbox-element>
66-
<jb-date-input-inbox-element slot="start-section">
67-
<div>before</div>
68-
</jb-date-input-inbox-element>
69-
</JBDateInput>
70-
<FormalTheme label="more formal look">{ }</FormalTheme>
61+
</svg>
62+
</div>
63+
</JBDateInput>
64+
<JBDateInput label="with inner-box section">
65+
<jb-date-input-inbox-element slot="end-section">
66+
<div>a</div>
67+
</jb-date-input-inbox-element>
68+
<jb-date-input-inbox-element slot="start-section">
69+
<div>b</div>
70+
</jb-date-input-inbox-element>
71+
</JBDateInput>
72+
<FormalTheme label="more formal look">{ }</FormalTheme>
73+
</SamplesWrapper>
74+
7175

7276
</SamplesSectionWrapper>
7377
);

Diff for: ‎docs/src/components/samples/styled.ts

+10
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,13 @@ export const SamplesTitle = styled.h2`
1313
color:#101010;
1414
text-align: center;
1515
`;
16+
export const SamplesWrapper = styled.div`
17+
max-width: 400px;
18+
width: calc(100% - 32px);
19+
jb-date-input{
20+
width: 100%;
21+
}
22+
`;
1623
export const FormalTheme = styled(JBDateInput)`
1724
--jb-date-input-border-radius:0;
1825
--jb-date-input-border-color:#888;
@@ -26,4 +33,7 @@ export const FormalTheme = styled(JBDateInput)`
2633
--jb-date-input-calender-wrapper-bg-color:#fefefe;
2734
--jb-date-input-calender-wrapper-border-radius:0;
2835
--jb-calendar-arrow-button-border-radius:0;
36+
`;
37+
export const RTLJBDateInput = styled(JBDateInput)`
38+
direction: rtl;
2939
`;

0 commit comments

Comments
 (0)