From 6c8ff12f50ab5af550ef229de00cdd10b39ff747 Mon Sep 17 00:00:00 2001 From: sooraj Date: Sat, 18 May 2024 16:49:40 +0530 Subject: [PATCH 1/2] changed "ask your question ui" --- frontend/src/app.js | 2 +- frontend/src/pages/Q&A/Q&A.jsx | 31 +++++++++----- frontend/src/pages/Q&A/Ques.scss | 40 +++++++++++++++---- .../ResourceSharingForm.jsx | 7 ++-- .../resource-sharing-form.module.scss | 23 ++++++++++- 5 files changed, 79 insertions(+), 24 deletions(-) diff --git a/frontend/src/app.js b/frontend/src/app.js index 88e73909..921432a5 100644 --- a/frontend/src/app.js +++ b/frontend/src/app.js @@ -1,6 +1,6 @@ import { Fragment, useEffect, useState } from "react"; import { - BrowserRouter as Router, + // BrowserRouter as Router, Switch, Route, Redirect, diff --git a/frontend/src/pages/Q&A/Q&A.jsx b/frontend/src/pages/Q&A/Q&A.jsx index f3be734e..b99778ce 100644 --- a/frontend/src/pages/Q&A/Q&A.jsx +++ b/frontend/src/pages/Q&A/Q&A.jsx @@ -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: "", @@ -385,7 +385,12 @@ 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", + // paddingLeft: "1.5rem", + }} > Tags @@ -425,15 +430,19 @@ function Ques(props) {
- {isUploadingData ? : } + {isUploadingData ? ( + + ) : ( + + )}
diff --git a/frontend/src/pages/Q&A/Ques.scss b/frontend/src/pages/Q&A/Ques.scss index 4a221595..943c3016 100644 --- a/frontend/src/pages/Q&A/Ques.scss +++ b/frontend/src/pages/Q&A/Ques.scss @@ -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 { @@ -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%; diff --git a/frontend/src/pages/Resources/components/ResourceSharingForm/ResourceSharingForm.jsx b/frontend/src/pages/Resources/components/ResourceSharingForm/ResourceSharingForm.jsx index 909a9a9d..37c5fa56 100644 --- a/frontend/src/pages/Resources/components/ResourceSharingForm/ResourceSharingForm.jsx +++ b/frontend/src/pages/Resources/components/ResourceSharingForm/ResourceSharingForm.jsx @@ -1,5 +1,5 @@ import React, { useState } from "react"; -import { NavLink, useHistory } from "react-router-dom"; +// import { NavLink, useHistory } from "react-router-dom"; import Joi from "joi-browser"; import { Button2 } from "../../../../components/util/Button/index"; import style from "./resource-sharing-form.module.scss"; @@ -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(""); diff --git a/frontend/src/pages/Resources/components/ResourceSharingForm/resource-sharing-form.module.scss b/frontend/src/pages/Resources/components/ResourceSharingForm/resource-sharing-form.module.scss index b51b5a27..c2234502 100644 --- a/frontend/src/pages/Resources/components/ResourceSharingForm/resource-sharing-form.module.scss +++ b/frontend/src/pages/Resources/components/ResourceSharingForm/resource-sharing-form.module.scss @@ -81,6 +81,7 @@ .resource-input { position: relative; margin-bottom: 30px !important; + width: 35rem; } .resource-input input, @@ -217,8 +218,11 @@ } .inside-resource { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; width: 85%; - margin: 0 auto; } [type="radio"] { @@ -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; From 7e3709fec049c394016a2bd1a11f9f02ce54bc42 Mon Sep 17 00:00:00 2001 From: sooraj Date: Sat, 18 May 2024 17:07:56 +0530 Subject: [PATCH 2/2] reverted changes --- frontend/src/app.js | 2 +- frontend/src/pages/Q&A/Q&A.jsx | 1 - .../components/ResourceSharingForm/ResourceSharingForm.jsx | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/frontend/src/app.js b/frontend/src/app.js index 921432a5..88e73909 100644 --- a/frontend/src/app.js +++ b/frontend/src/app.js @@ -1,6 +1,6 @@ import { Fragment, useEffect, useState } from "react"; import { - // BrowserRouter as Router, + BrowserRouter as Router, Switch, Route, Redirect, diff --git a/frontend/src/pages/Q&A/Q&A.jsx b/frontend/src/pages/Q&A/Q&A.jsx index b99778ce..ad86635e 100644 --- a/frontend/src/pages/Q&A/Q&A.jsx +++ b/frontend/src/pages/Q&A/Q&A.jsx @@ -389,7 +389,6 @@ function Ques(props) { color: "#69a9dd", fontSize: "25px", textAlign: "center", - // paddingLeft: "1.5rem", }} > Tags diff --git a/frontend/src/pages/Resources/components/ResourceSharingForm/ResourceSharingForm.jsx b/frontend/src/pages/Resources/components/ResourceSharingForm/ResourceSharingForm.jsx index 37c5fa56..6b8213d1 100644 --- a/frontend/src/pages/Resources/components/ResourceSharingForm/ResourceSharingForm.jsx +++ b/frontend/src/pages/Resources/components/ResourceSharingForm/ResourceSharingForm.jsx @@ -1,5 +1,5 @@ import React, { useState } from "react"; -// import { NavLink, useHistory } from "react-router-dom"; +import { NavLink, useHistory } from "react-router-dom"; import Joi from "joi-browser"; import { Button2 } from "../../../../components/util/Button/index"; import style from "./resource-sharing-form.module.scss";