Skip to content

Commit ca64638

Browse files
dvcabiyadvcabiya
authored
Merge pull request #222 from makeopensource/65-updated-Add-Grader-Code-Modal
65 updated add grader code modal
2 parents 1d63aee + c2bb1d9 commit ca64638

2 files changed

Lines changed: 146 additions & 26 deletions

File tree

‎devU-client/src/components/pages/forms/containers/containerAutoGraderForm.scss‎

Lines changed: 128 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,132 @@
11
@import 'variables';
22

3+
.breadcrumb {
4+
margin-bottom: 20px;
5+
font-size: 14px;
6+
7+
span {
8+
margin: 0 5px;
9+
10+
&:first-child {
11+
margin-left: 0;
12+
}
13+
}
14+
}
15+
16+
.pageTitle {
17+
font-size: 28px;
18+
text-align: center;
19+
margin-bottom: 20px;
20+
}
321

422
.form {
5-
display: absolute;
6-
background-color: $list-item-background;
7-
border-radius: 10px;
8-
padding: 20px;
9-
width: 50%;
10-
left: 0;
11-
right: 0;
12-
margin-left: auto;
13-
margin-right: auto;
14-
}
23+
position: relative; /* Fixed incorrect 'display: absolute' */
24+
background-color: $list-item-background;
25+
border-radius: 10px;
26+
padding: 20px;
27+
width: 50%;
28+
margin: 0 auto;
29+
}
30+
31+
.requiredField {
32+
margin-bottom: 15px;
33+
font-size: 14px;
34+
}
35+
36+
.formGroup {
37+
margin-bottom: 20px;
38+
39+
label {
40+
display: block;
41+
margin-bottom: 8px;
42+
font-weight: 500;
43+
}
44+
}
45+
46+
/* Updated file input section */
47+
.fileUploadContainer {
48+
display: flex;
49+
flex-direction: column;
50+
gap: 15px; /* Adds spacing between file inputs */
51+
margin-bottom: 25px;
52+
}
53+
54+
.fileInputGroup {
55+
display: flex;
56+
align-items: center;
57+
justify-content: space-between; /* Creates proper spacing */
58+
padding: 8px 12px;
59+
background: #f8f8f8;
60+
border-radius: 6px;
61+
border: 1px solid #ccc;
62+
}
63+
64+
.fileInputGroup label {
65+
font-weight: 600;
66+
flex: 1;
67+
}
68+
69+
.fileInputWrapper {
70+
display: flex;
71+
align-items: center;
72+
gap: 10px; /* Ensures spacing between elements */
73+
}
74+
75+
.fileInput {
76+
display: none;
77+
}
78+
79+
.fileInputButton {
80+
background-color: $primary;
81+
color: white;
82+
padding: 6px 12px;
83+
border-radius: 6px;
84+
cursor: pointer;
85+
font-size: 14px;
86+
border: none;
87+
transition: background-color 0.2s ease-in-out;
88+
89+
&:hover {
90+
background-color: darken($primary, 10%);
91+
}
92+
}
93+
94+
.fileUploadText {
95+
font-size: 14px;
96+
color: #666;
97+
}
98+
99+
.spacer {
100+
height: 15px;
101+
}
102+
103+
.buttonContainer {
104+
display: flex;
105+
justify-content: center;
106+
margin-top: 35px;
107+
}
108+
109+
.addGraderButton {
110+
background-color: $primary;
111+
color: white;
112+
padding: 10px 30px;
113+
border: none;
114+
border-radius: 40px;
115+
font-size: 16px;
116+
cursor: pointer;
117+
transition: background-color 0.2s;
118+
}
119+
120+
.addGraderButton:hover {
121+
background-color: darken($primary, 10%);
122+
}
123+
124+
.existingProblems {
125+
margin-top: 40px;
126+
text-align: center;
127+
128+
h2 {
129+
font-size: 24px;
130+
margin-bottom: 20px;
131+
}
132+
}

‎devU-client/src/components/pages/forms/containers/containerAutoGraderForm.tsx‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {applyStylesToErrorFields, removeClassFromField} from "../../../../utils/
1010
import textStyles from "../../../shared/inputs/textField.scss";
1111
import {useHistory, useParams} from 'react-router-dom'
1212

13-
import Button from '@mui/material/Button'
13+
// import Button from '@mui/material/Button'
1414

1515
const ContainerAutoGraderForm = () => {
1616
const [setAlert] = useActionless(SET_ALERT)
@@ -76,37 +76,39 @@ const ContainerAutoGraderForm = () => {
7676
<h1>Container Auto Grader Form</h1>
7777
<div className = {styles.form}>
7878
<p>Required Field *</p>
79-
8079
<label htmlFor='autogradingImage'>Autograding Image *</label>
81-
<TextField id='autogradingImage' onChange={handleChange}
82-
value={formData.autogradingImage}
83-
className={invalidFields.get('autogradingImage')}></TextField>
84-
80+
<TextField
81+
id='autogradingImage'
82+
onChange={handleChange}
83+
value={formData.autogradingImage}
84+
className={invalidFields.get('autogradingImage')}></TextField>
8585
<label htmlFor='timeout'>Timeout *</label>
86-
<TextField id='timeout' onChange={handleChange} value={formData.timeout}
87-
className={invalidFields.get('timeout')}></TextField>
86+
<TextField id='timeout' onChange={handleChange}
87+
value={formData.timeout}
88+
className={invalidFields.get('timeout')}
89+
placeholder="3000" ></TextField>
8890

8991
<div style={{ display: 'flex', justifyContent: 'center' }}>
9092
<label htmlFor="graderFile">Graderfile *</label>
91-
<input type="file" id='graderFile' onChange={handleGraderfileChange} /> <br/>
93+
<input type="file" id='graderFile'
94+
onChange={handleGraderfileChange} />
9295
</div>
9396

94-
<br/>
9597

9698
<div style={{ display: 'flex', justifyContent: 'center' }}>
9799
<label htmlFor="makefileFile">Makefile *</label>
98-
<input type="file" id='makefileFile' onChange={handleMakefileChange} /> <br/>
100+
<input type="file" id='makefileFile' onChange={handleMakefileChange} />
101+
99102
</div>
100103

101104
<br/>
102105

103-
<div style={{ display: 'flex', justifyContent: 'center' }}>
104-
<Button variant='contained' onClick= { handleSubmit } >Add Problem</Button>
106+
<div className={styles.buttonContainer}>
107+
<button className={styles.addGraderButton} onClick={handleSubmit}>
108+
Add Grader
109+
</button>
105110
</div>
106111
</div>
107-
<div className = {styles.rightColumn}>
108-
<h1>Existing Problems</h1>
109-
</div>
110112
</PageWrapper>
111113
)
112114
}

0 commit comments

Comments
 (0)