From c631f12df67579c133fed4e089c09c61be1c16ad Mon Sep 17 00:00:00 2001 From: Valentin Ceaprazaru <6508597+valentinceaprazaru@users.noreply.github.com> Date: Wed, 6 Mar 2024 08:14:45 +0200 Subject: [PATCH 1/2] Writing evaluation form - design --- public/assets/scss/app.scss | 27 ++++++++++--------- .../components/_writing-evaluation-form.scss | 0 .../course-details/course-details-area.jsx | 2 +- ...n-form.jsx => writing-evaluation-form.jsx} | 2 -- 4 files changed, 16 insertions(+), 15 deletions(-) rename src/components/forms/writing-evaluation-form.module.css => public/assets/scss/components/_writing-evaluation-form.scss (100%) rename src/components/forms/{writing-evalution-form.jsx => writing-evaluation-form.jsx} (97%) diff --git a/public/assets/scss/app.scss b/public/assets/scss/app.scss index c00641b..66bcb88 100644 --- a/public/assets/scss/app.scss +++ b/public/assets/scss/app.scss @@ -1,22 +1,22 @@ /*--------------------------------------------- Template Name: EduBlink - Online Learning React Education Template -Template URL: +Template URL: Description: This template is built with React NextJS. Author: DevsBlink Author URL: https://1.envato.market/YgGJbj Version: 1.0.0 -=============================================== +=============================================== STYLESHEET INDEXING | |___ Default Styles | |___ Variables -| |___ Shortcode +| |___ Shortcode | |___ Reset Styels | |___ Typography | |___ Forms Styles -| |___ Common -| |___ Animation +| |___ Common +| |___ Animation | |___ Elements Styles | |___ Accordion Style @@ -25,11 +25,11 @@ STYLESHEET INDEXING | |___ Button | |___ Countdown | |___ Course Widget -| |___ Pagination Styles -| |___ Sal Styels +| |___ Pagination Styles +| |___ Sal Styels | |___ Section Title -| |___ Slick Styles -| |___ Social Share Style +| |___ Slick Styles +| |___ Social Share Style | |___Template Styles | |___ About Styles @@ -132,7 +132,7 @@ STYLESHEET INDEXING /*======================================================================= -4.Blocks Styles +4.Blocks Styles =========================================================================*/ @import 'header/header'; @import 'header/nav'; @@ -143,7 +143,7 @@ STYLESHEET INDEXING @import "footer/footer"; /*======================================================================= -5.Blog Styles +5.Blog Styles =========================================================================*/ @import "blog/blog"; @import "blog/blog-details"; @@ -156,4 +156,7 @@ STYLESHEET INDEXING @import "default/spacing"; @import "default/react_specific"; @import "default/dark"; -@import "default/rtl"; \ No newline at end of file +@import "default/rtl"; + + +@import "components/writing-evaluation-form"; diff --git a/src/components/forms/writing-evaluation-form.module.css b/public/assets/scss/components/_writing-evaluation-form.scss similarity index 100% rename from src/components/forms/writing-evaluation-form.module.css rename to public/assets/scss/components/_writing-evaluation-form.scss diff --git a/src/components/course-details/course-details-area.jsx b/src/components/course-details/course-details-area.jsx index 9477f28..c333b35 100644 --- a/src/components/course-details/course-details-area.jsx +++ b/src/components/course-details/course-details-area.jsx @@ -3,7 +3,7 @@ import CourseDetailsSidebar from '../common/sidebar/course-details-sidebar'; import CommentFormCourse from '../forms/comment-form-course'; import SingleComment from './single-comment'; import SingleProgressbar from './single-progressbar'; -import WritingEvaluationForm from "../forms/writing-evalution-form"; +import WritingEvaluationForm from "../forms/writing-evaluation-form"; const CourseDetailsArea = ({course}) => { const { diff --git a/src/components/forms/writing-evalution-form.jsx b/src/components/forms/writing-evaluation-form.jsx similarity index 97% rename from src/components/forms/writing-evalution-form.jsx rename to src/components/forms/writing-evaluation-form.jsx index 97b4418..17bcbf4 100644 --- a/src/components/forms/writing-evalution-form.jsx +++ b/src/components/forms/writing-evaluation-form.jsx @@ -1,5 +1,4 @@ import React, {useState} from 'react'; -import './writing-evaluation-form.module.css'; const WritingEvaluationForm = () => { const [essay, setEssay] = useState(''); @@ -14,7 +13,6 @@ const WritingEvaluationForm = () => { setLoading(true); - console.log(essay, task) const response = await fetch('https://Mayanktstprep-tstprep-writing.hf.space/get_passage_html', { method: 'POST', From 92d10f72ac28bbfa7dcbf460525e80e00db742da Mon Sep 17 00:00:00 2001 From: Valentin Ceaprazaru <6508597+valentinceaprazaru@users.noreply.github.com> Date: Wed, 6 Mar 2024 12:43:56 +0200 Subject: [PATCH 2/2] Writing evaluation form - design --- .../components/_writing-evaluation-form.scss | 115 ++++++++++-------- .../forms/writing-evaluation-form.jsx | 32 ++++- 2 files changed, 89 insertions(+), 58 deletions(-) diff --git a/public/assets/scss/components/_writing-evaluation-form.scss b/public/assets/scss/components/_writing-evaluation-form.scss index 0cb07ef..3901592 100644 --- a/public/assets/scss/components/_writing-evaluation-form.scss +++ b/public/assets/scss/components/_writing-evaluation-form.scss @@ -1,95 +1,106 @@ .content-box { - background: #eaeaea; - padding: 100px 100px; - margin: -5px 0px 25px -15px; + background: #eaeaea; + padding: 100px 100px; + margin: -5px 0px 25px -15px; } .incorrect, .delete { - text-decoration: line-through; - border-bottom: 2px solid #c38181; - color: #d5bbbb !important; - padding: 0 3px; + text-decoration: line-through; + border-bottom: 2px solid #c38181; + color: #d5bbbb !important; + padding: 0 3px; } .corrected { - border-bottom: 2px solid #9ec59e; - padding-left: 3px; - font-weight: 600; + border-bottom: 2px solid #9ec59e; + padding-left: 3px; + font-weight: 600; } .space { - background: pink; - border: 1px solid pink; - padding-left: 3px; + background: pink; + border: 1px solid pink; + padding-left: 3px; } .addition { - color: #ff6700; - background: #ffd7b5; - border: 1px solid #ff6700; - padding: 0 3px; + color: #ff6700; + background: #ffd7b5; + border: 1px solid #ff6700; + padding: 0 3px; } .hovertextp { - position: relative; - display: inline-block; + position: relative; + display: inline-block; } .hovertextp .hovertext:before { - content: "Feedback: " attr(data-hover); - visibility: hidden; - background-color: rgba(0, 0, 0, 0.8); - color: #fff; - text-align: center; - border-radius: 6px; - padding: 5px 0; /* Position the tooltip */ - position: absolute; - display: block; - z-index: 9999; - top: auto; /* Reset the top property */ - overflow: visible; - width: max-content; - max-width: 200px; + content: "Feedback: " attr(data-hover); + visibility: hidden; + background-color: rgba(0, 0, 0, 0.8); + color: #fff; + text-align: center; + border-radius: 6px; + padding: 5px 0; /* Position the tooltip */ + position: absolute; + display: block; + z-index: 9999; + top: auto; /* Reset the top property */ + overflow: visible; + width: max-content; + max-width: 200px; } .hovertextp .hovertext:hover:before { - opacity: 1; - visibility: visible; + opacity: 1; + visibility: visible; } .nopaque { - opacity: 0.2; + opacity: 0.2; } .opaque { - opacity: 1.0; + opacity: 1.0; } -.menu { - list-style-type: none; - margin: 0; - padding: 0; -} +.waf-menu.waf-menu { + + li { + &:hover { + background-color: #f0f0f0; + } + } -.menu li { + a { + display: block; cursor: pointer; padding: 5px; -} - -.menu li:hover { - background-color: #f0f0f0; -} + } -.submenu { + .waf-submenu { display: none; list-style-type: none; - margin-left: 20px; - padding: 0; + padding: 0 0 20px 20px; + + &.active { + display: block; + } + } } + + .sentences { - display: none; + display: none; +} + +.waf-textarea { + textarea { + background: #f5f4f4; + } } diff --git a/src/components/forms/writing-evaluation-form.jsx b/src/components/forms/writing-evaluation-form.jsx index 17bcbf4..bcb6c50 100644 --- a/src/components/forms/writing-evaluation-form.jsx +++ b/src/components/forms/writing-evaluation-form.jsx @@ -14,15 +14,16 @@ const WritingEvaluationForm = () => { setLoading(true); - const response = await fetch('https://Mayanktstprep-tstprep-writing.hf.space/get_passage_html', { + const response = await fetch('https://TSTPrep-tstprep-writing.hf.space/get_passage_html', { method: 'POST', headers: { 'Content-Type': 'application/json', - Authorization: 'Bearer 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' + Authorization: 'Bearer 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' }, body: JSON.stringify({ essay, - task + task, + demo: true }) }); if (!response.ok) throw new Error(response.statusText); @@ -45,7 +46,19 @@ const WritingEvaluationForm = () => { } const toggleSubmenu = (e) => { - console.log('clicked', e); + e.preventDefault(); + let el = e.target; + + while (el && el !== e.currentTarget && el.tagName !== "A") { + el = el.parentNode; + } + if (el && el.tagName === "A") { + // ...do your state change... + + console.log(el.nextSibling.classList.toggle('active')); + + + } } return ( @@ -55,6 +68,7 @@ const WritingEvaluationForm = () => { {response &&
toggleSubmenu(e)} />} {error &&

{error}

} @@ -64,7 +78,7 @@ const WritingEvaluationForm = () => {
-
+