Skip to content

Commit

Permalink
🍁 [Frontend] improve "ask your question" ui (#925)
Browse files Browse the repository at this point in the history
* changed "ask your question ui"

* reverted changes
  • Loading branch information
Sooraj002 authored May 18, 2024
1 parent 8836396 commit 4c2dbad
Show file tree
Hide file tree
Showing 4 changed files with 76 additions and 22 deletions.
30 changes: 19 additions & 11 deletions frontend/src/pages/Q&A/Q&A.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -124,17 +124,17 @@ function Ques(props) {
body: JSON.stringify(formdata),
});
const data = await response.json();
if(data.errStack){
if (data.errStack) {
setToastMessage(`${data.errStack}`);
setOpenToast(true);
setSeverity("error");
}else{
} else {
setToastMessage("Q&A added successfully!");
setOpenToast(true);
setSeverity("success");
}
setIsUploadingData(false);

setFormData({
title: "",
description: "",
Expand Down Expand Up @@ -385,7 +385,11 @@ function Ques(props) {
? `mb-3 ${style["level-of-trust"]} ${style["level-of-trust-dark"]}`
: `mb-3 ${style["level-of-trust"]} ${style["level-of-trust-dark"]}`
}
style={{ color: "#69a9dd", fontSize: "25px" }}
style={{
color: "#69a9dd",
fontSize: "25px",
textAlign: "center",
}}
>
Tags
</label>
Expand Down Expand Up @@ -425,15 +429,19 @@ function Ques(props) {

<div
className={style["submit-btn"]}
style={{ justifyContent: "space-around" }}
style={{ justifyContent: "space-around", marginBottom: "1rem" }}
>
<div className="data-loader">
{isUploadingData ? <Loader /> : <Button2
style={{ marginRight: "3%" }}
className={style["submit-btn-text"]}
label="Submit"
type="submit"
/>}
{isUploadingData ? (
<Loader />
) : (
<Button2
style={{ marginRight: "3%" }}
className={style["submit-btn-text"]}
label="Submit"
type="submit"
/>
)}
</div>
</div>
</div>
Expand Down
40 changes: 33 additions & 7 deletions frontend/src/pages/Q&A/Ques.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,35 @@
}

.question_form {
padding: 2rem;
width: 50%;
border: 2px solid #2a4886;
border-radius: 7px;
margin: 5% 5% 5% 25%;
border-radius: 1rem;
margin: 5rem auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-content: center;
}

.close-popup {
position: relative;
margin-top: 1%;
background: black;
color: #69a9dd;
color: black;
background: #69a9dd;
margin-left: 96.5%;
width: 25px;
height: 25px;
border-radius: 50%;
border: 1px solid #69a9dd;
border: none;
}

.toppings-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 2rem;
li {
width: 8rem;
}
}

.question-cards {
Expand Down Expand Up @@ -75,6 +88,19 @@
cursor: pointer;
}

@media screen and (max-width: 1200px) {
.toppings-list {
grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 650px) {
.question_form {
width: 85%;
margin: auto;
}
}

@media (max-width: 650px) {
.question_form {
width: 85%;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,8 @@ import { SimpleToast } from "../../../../components/util/Toast";

export function ResourceSharingForm(props) {
const [resourceToast, setResourceToast] = useState("");
const [openSubmitResourceSuccess, setOpenSubmitResourceSuccess] = useState(
false
);
const [openSubmitResourceSuccess, setOpenSubmitResourceSuccess] =
useState(false);
const [isLoading, setIsLoading] = useState(false);
const [resourceToastStatus, setResourceToastStatus] = useState("");

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@
.resource-input {
position: relative;
margin-bottom: 30px !important;
width: 35rem;
}

.resource-input input,
Expand Down Expand Up @@ -217,8 +218,11 @@
}

.inside-resource {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 85%;
margin: 0 auto;
}

[type="radio"] {
Expand Down Expand Up @@ -354,6 +358,23 @@ input[type="date"]:not(:valid):before {
align-items: center;
}

@media screen and (max-width: 1200px) {
.resource-input {
width: 23rem;
}

.toppings-list {
display: flex;
grid-template-columns: repeat(2, 1fr);
}
}

@media screen and (max-width: 750px) {
.resource-input {
width: auto;
}
}

@media screen and (max-width: 750px) {
.resource-section {
flex-direction: column;
Expand Down

0 comments on commit 4c2dbad

Please sign in to comment.