Skip to content

Commit

Permalink
added mobile responsive fixes for proposals page (#107)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Megha-Dev-19
Megha-Dev-19 authored Apr 16, 2024
1 parent 4302295 commit 3bacf8a
Show file tree
Hide file tree
Showing 7 changed files with 444 additions and 400 deletions.
166 changes: 76 additions & 90 deletions apps/astraplusplus/widget/Common/Layout/CardModal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,123 +6,109 @@ const isOpen = props.isOpen;
const onToggle = props.onToggle;

const Modal = styled.div`
display: ${({ hidden }) => (hidden ? "none" : "flex")};
position: fixed;
inset: 0;
justify-content: center;
align-items: center;
opacity: 1;
z-index: 999;
display: ${({ hidden }) => (hidden ? "none" : "flex")};
position: fixed;
inset: 0;
justify-content: center;
align-items: center;
opacity: 1;
z-index: 999;
`;

const ModalBackdrop = styled.div`
position: absolute;
inset: 0;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0.4;
position: absolute;
inset: 0;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0.4;
`;

const ModalDialog = styled.div`
padding: 2em;
z-index: 999;
overflow-y: auto;
max-height: 85%;
margin-top: 5%;
@media (width < 720px) {
width: 100%;
}
padding: 2em;
z-index: 999;
overflow-y: auto;
max-height: 85%;
margin-top: 5%;
@media (width < 720px) {
width: 100%;
}
`;

const ModalHeader = styled.div`
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding-bottom: 4px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding-bottom: 4px;
`;

const ModalFooter = styled.div`
padding-top: 4px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: items-center;
padding-top: 4px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: items-center;
`;

const CloseButton = styled.button`
display: flex;
align-items: center;
justify-content: center;
background-color: white;
padding: 0.5em;
border-radius: 6px;
border: 0;
color: #344054;
display: flex;
align-items: center;
justify-content: center;
background-color: white;
padding: 0.5em;
border-radius: 6px;
border: 0;
color: #344054;
&:hover {
background-color: #d3d3d3;
}
&:hover {
background-color: #d3d3d3;
}
`;

const ConfirmButton = styled.button`
padding: 0.7em;
border-radius: 6px;
border: 0;
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
background-color: #12b76a;
color: white;
padding: 0.7em;
border-radius: 6px;
border: 0;
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
background-color: #12b76a;
color: white;
&:hover {
background-color: #0e9f5d;
}
&:hover {
background-color: #0e9f5d;
}
`;

const ModalContent = styled.div`
flex: 1;
margin-top: 4px;
margin-bottom: 4px;
overflow-y: auto;
max-height: 50%;
flex: 1;
margin-top: 4px;
margin-bottom: 4px;
overflow-y: auto;
max-height: 50%;
`;

const NoButton = styled.button`
background: transparent;
border: none;
padding: 0;
margin: 0;
box-shadow: none;
background: transparent;
border: none;
padding: 0;
margin: 0;
box-shadow: none;
`;

return (
<>
<NoButton {...toggleContainerProps} onClick={onToggle}>
{toggle}
</NoButton>
<Modal hidden={!isOpen}>
<ModalBackdrop />
<ModalDialog className="ndc-card">
<ModalHeader>
<h3 className="mb-0">{title}</h3>
<CloseButton onClick={onToggle}>
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.5 5L5.5 15M5.5 5L15.5 15"
stroke="currentColor"
stroke-width="1.66667"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</CloseButton>
</ModalHeader>
<ModalContent>{content}</ModalContent>
</ModalDialog>
</Modal>
</>
<>
<NoButton {...toggleContainerProps} onClick={onToggle}>
{toggle}
</NoButton>
<Modal hidden={!isOpen}>
<ModalBackdrop />
<ModalDialog className="ndc-card">
<ModalHeader>
<h3 className="mb-0">{title}</h3>
<CloseButton onClick={onToggle}>
<i class="bi bi-x-lg"></i>
</CloseButton>
</ModalHeader>
<ModalContent>{content}</ModalContent>
</ModalDialog>
</Modal>
</>
);
72 changes: 36 additions & 36 deletions apps/astraplusplus/widget/Common/Modals/Comments.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,48 +2,48 @@ const commentsCount = props.commentsCount;
const item = props.item;

const Wrapper = styled.div`
padding: 24px;
border-radius: 14px;
padding: 24px;
border-radius: 14px;
& > div {
margin-left: 0 !important;
}
textarea {
font-size: 0.9rem !important;
margin-bottom: 24px !important;
}
& > div {
margin-left: 0 !important;
}
textarea {
font-size: 0.9rem !important;
margin-bottom: 24px !important;
}
p {
margin-bottom: 16px;
}
p {
margin-bottom: 16px;
}
`;

const Hr = styled.hr`
border: none;
border-top: 1px solid #d7dbdf;
margin: 16px 0;
border: none;
border-top: 1px solid #d7dbdf;
margin: 16px 0;
`;

return (
<Wrapper className="mb-2 w-100 ndc-card">
<Widget
src={`mob.near/widget/MainPage.N.Comment.Compose`}
props={{
item,
onComment: () => State.update({ showReply: false })
}}
/>
<Widget
src="mob.near/widget/MainPage.N.Comment.Feed"
props={{
item,
subscribe: true
}}
/>
{commentsCount === 0 && (
<span className="text-muted text-center mt-3">
No comments yet. Be the first to comment!
</span>
)}
</Wrapper>
<Wrapper className="mb-2 w-100">
<Widget
src={`mob.near/widget/MainPage.N.Comment.Compose`}
props={{
item,
onComment: () => State.update({ showReply: false })
}}
/>
<Widget
src="mob.near/widget/MainPage.N.Comment.Feed"
props={{
item,
subscribe: true
}}
/>
{commentsCount === 0 && (
<span className="text-muted text-center mt-3">
No comments yet. Be the first to comment!
</span>
)}
</Wrapper>
);
18 changes: 9 additions & 9 deletions apps/astraplusplus/widget/Common/Modals/Share.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,23 +23,23 @@ const socialMedia = [
{
name: "Facebook",
link: facebookURL.toString(),
icon: "bi bi-facebook",
icon: "bi bi-facebook"
},
{
name: "Twitter",
link: twitterURL.toString(),
icon: "bi bi-twitter",
icon: "bi bi-twitter"
},
{
name: "LinkedIn",
link: linkedinURL.toString(),
icon: "bi bi-linkedin",
icon: "bi bi-linkedin"
},
{
name: "Telegram",
link: telegramURL.toString(),
icon: "bi bi-telegram",
},
icon: "bi bi-telegram"
}
];

const Wrapper = styled.div`
Expand Down Expand Up @@ -83,11 +83,11 @@ const Wrapper = styled.div`
`;

State.init({
copied: false,
copied: false
});

return (
<Wrapper className="ndc-card p-4">
<Wrapper className="p-4">
<h3 className="mb-4">Share with friends</h3>
<div className="d-flex gap-4 justify-content-between mb-4">
{socialMedia.map((item, index) => (
Expand All @@ -109,11 +109,11 @@ return (
onClick={() => {
clipboard.writeText(url);
State.update({
copied: true,
copied: true
});
setTimout(() => {
State.update({
copied: false,
copied: false
});
}, 2000);
}}
Expand Down
Loading

0 comments on commit 3bacf8a

Please sign in to comment.