Skip to content

feat: Mobile support for storybook login page #539

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 16, 2023
Merged

feat: Mobile support for storybook login page #539

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 35 additions & 3 deletions src/modules/App/stories/integrated-app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,17 @@
height: 120px;
justify-content: center;
align-items: center;
@include mobile() {
height: 80px;
}
}

.sendbird-integrated-sample-app__moderations {
position: relative;
padding: 18px;
display: flex;
flex-direction: column;
margin-left: calc((100% - 520px) / 2);
margin-right: calc((100% - 520px) / 2);
align-items: center;
@include themed() {
background-color: t(bg-1);
}
Expand All @@ -48,19 +50,49 @@
@include themed() {
border-bottom: 1px solid t(on-bg-1);
}
@include mobile() {
flex-direction: column;
flex-wrap: wrap;
align-items: center;
}
}
.sendbird-integrated-sample-app__moderations__option--toggle {
@include mobile() {
flex-direction: row;
flex-wrap: wrap;
width: 100%;
justify-content: space-between
}
.sendbird-integrated-sample-app__moderations__option__name,
.sendbird-integrated-sample-app__moderations__option__input {
@include mobile() {
width: auto;
}
}
.sendbird-integrated-sample-app-toggle-button {
text-align: right;
}
}
.sendbird-integrated-sample-app__moderations__option__name {
width: 140px;
@include mobile() {
width: 100%;
}
}
.sendbird-integrated-sample-app__moderations__option__input {
margin-left: 20px;
@include mobile() {
width: 100%;
margin-left: 0px;
}
}

.sendbird-integrated-app-submit-area {
display: flex;
width: 100%;
justify-content: center;
gap: 10px
gap: 10px;
margin: 16px 0px;
}

// text input
Expand Down
33 changes: 23 additions & 10 deletions src/modules/App/stories/integrated.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import Streamnig from '../../OpenChannelApp/Streaming';
import Label, { LabelTypography, LabelColors } from '../../../ui/Label';
import Icon, { IconTypes, IconColors } from '../../../ui/Icon';
import Button, { ButtonSizes, ButtonTypes } from '../../../ui/Button';
import { MediaQueryProvider } from '../../../lib/MediaQueryContext';

const STORAGE_KEY = 'sendbird-integrated-app-v1-groupchannel';

Expand Down Expand Up @@ -45,12 +46,22 @@ const ChannelType = {
LIVE: 'LIVE',
};

const TYPES = {
TOGGLE: 'TOGGLE',
};

const ModerationOptionItem = ({
subTitle,
children,
type,
}) => {
return (
<div className='sendbird-integrated-sample-app__moderations__option'>
<div
className={`
sendbird-integrated-sample-app__moderations__option
${type === TYPES.TOGGLE ? 'sendbird-integrated-sample-app__moderations__option--toggle' : '' }
`}
>
<div className='sendbird-integrated-sample-app__moderations__option__name'>
<Label
type={LabelTypography.SUBTITLE_1}
Expand Down Expand Up @@ -280,6 +291,8 @@ export const GroupChannel = () => {
backgroundColor: sampleOptions.theme === 'light' ? 'white' : 'black'
}}
>
{/* We need it for helping QA team on mobile */}
<MediaQueryProvider />
<div className='sendbird-integrated-sample-app__title'>
<Label
type={LabelTypography.H_1}
Expand Down Expand Up @@ -348,7 +361,7 @@ export const GroupChannel = () => {
}}
/>
</ModerationOptionItem>
<ModerationOptionItem subTitle="Message Search">
<ModerationOptionItem subTitle="Message Search" type={TYPES.TOGGLE}>
<ToggleButton
isEnabled={sampleOptions.messageSearch}
onClick={() => {
Expand All @@ -359,7 +372,7 @@ export const GroupChannel = () => {
}}
/>
</ModerationOptionItem>
<ModerationOptionItem subTitle="Edit User Profile">
<ModerationOptionItem subTitle="Edit User Profile" type={TYPES.TOGGLE}>
<ToggleButton
isEnabled={sampleOptions.editUserProfile}
onClick={() => {
Expand All @@ -370,7 +383,7 @@ export const GroupChannel = () => {
}}
/>
</ModerationOptionItem>
<ModerationOptionItem subTitle="Message Grouping">
<ModerationOptionItem subTitle="Message Grouping" type={TYPES.TOGGLE}>
<ToggleButton
isEnabled={sampleOptions.messageGrouping}
onClick={() => {
Expand All @@ -381,7 +394,7 @@ export const GroupChannel = () => {
}}
/>
</ModerationOptionItem>
<ModerationOptionItem subTitle="Emoji Reaction">
<ModerationOptionItem subTitle="Emoji Reaction" type={TYPES.TOGGLE}>
<ToggleButton
isEnabled={sampleOptions.emojiReaction}
onClick={() => {
Expand All @@ -392,7 +405,7 @@ export const GroupChannel = () => {
}}
/>
</ModerationOptionItem>
<ModerationOptionItem subTitle="Voice Message">
<ModerationOptionItem subTitle="Voice Message" type={TYPES.TOGGLE}>
<ToggleButton
isEnabled={sampleOptions.isVoiceMessageEnabled}
onClick={() => {
Expand All @@ -403,7 +416,7 @@ export const GroupChannel = () => {
}}
/>
</ModerationOptionItem>
<ModerationOptionItem subTitle="Mention">
<ModerationOptionItem subTitle="Mention" type={TYPES.TOGGLE}>
<ToggleButton
isEnabled={sampleOptions.mention}
onClick={() => {
Expand All @@ -414,7 +427,7 @@ export const GroupChannel = () => {
}}
/>
</ModerationOptionItem>
<ModerationOptionItem subTitle="Typing Indicator">
<ModerationOptionItem subTitle="Typing Indicator" type={TYPES.TOGGLE}>
<ToggleButton
isEnabled={sampleOptions.typingIndicator}
onClick={() => {
Expand All @@ -425,7 +438,7 @@ export const GroupChannel = () => {
}}
/>
</ModerationOptionItem>
<ModerationOptionItem subTitle="Message Status">
<ModerationOptionItem subTitle="Message Status" type={TYPES.TOGGLE}>
<ToggleButton
isEnabled={sampleOptions.messageStatus}
onClick={() => {
Expand All @@ -436,7 +449,7 @@ export const GroupChannel = () => {
}}
/>
</ModerationOptionItem>
<ModerationOptionItem subTitle="Image Compression">
<ModerationOptionItem subTitle="Image Compression" type={TYPES.TOGGLE}>
<ToggleButton
isEnabled={sampleOptions.imageCompression}
onClick={() => {
Expand Down