Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Contribute to GitLab
Sign in
Toggle navigation
H
Homework83_M11
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Ли Джен Сеп
Homework83_M11
Commits
1d9750ed
Commit
1d9750ed
authored
Dec 19, 2024
by
bekzat kapan
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
3# Достилизовал компоненты чтобы не было горизонтального скролла и интерфейс был адаптивным
parent
8aa25f20
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
75 additions
and
21 deletions
+75
-21
InputField.tsx
frontend/src/app/components/InputField.tsx
+13
-5
page.tsx
frontend/src/app/page.tsx
+62
-16
No files found.
frontend/src/app/components/InputField.tsx
View file @
1d9750ed
...
@@ -17,25 +17,33 @@ export default function InputField({ name, value, onChange }: Props) {
...
@@ -17,25 +17,33 @@ export default function InputField({ name, value, onChange }: Props) {
labelText
=
`Encoded message`
;
labelText
=
`Encoded message`
;
break
;
break
;
case
"Password"
:
case
"Password"
:
labelText
=
name
;
labelText
=
""
;
break
;
break
;
default
:
default
:
break
;
break
;
}
}
return
(
return
(
<
Grid2
container
alignItems=
"center"
paddingY=
{
2
}
>
<
Grid2
container
alignItems=
"center"
paddingY=
{
2
}
spacing=
{
2
}
>
<
Grid2
size=
{
name
===
"Password"
?
8
:
4
}
>
<
Grid2
flexGrow=
{
1
}
>
<
Typography
<
Typography
component=
"label"
component=
"label"
htmlFor=
{
`${name}-input`
}
htmlFor=
{
`${name}-input`
}
sx=
{
{
fontSize
:
20
,
display
:
"block"
}
}
sx=
{
{
fontSize
:
{
xs
:
"16px"
,
sm
:
"20px"
,
},
}
}
>
>
{
labelText
}
{
labelText
}
</
Typography
>
</
Typography
>
</
Grid2
>
</
Grid2
>
<
Grid2
size=
{
name
===
"Password"
?
4
:
8
}
>
<
Grid2
size=
{
name
===
"Password"
?
6
:
8
}
sx=
{
{
"@media (max-width: 900px)"
:
{
width
:
"100%"
}
}
}
>
<
TextField
<
TextField
fullWidth
fullWidth
multiline=
{
name
!==
"Password"
}
multiline=
{
name
!==
"Password"
}
...
...
frontend/src/app/page.tsx
View file @
1d9750ed
...
@@ -32,8 +32,25 @@ export default function Home() {
...
@@ -32,8 +32,25 @@ export default function Home() {
return
(
return
(
<
div
className=
"App"
>
<
div
className=
"App"
>
<
Container
sx=
{
{
marginTop
:
2
}
}
maxWidth=
"lg"
>
<
Container
sx=
{
{
marginTop
:
2
}
}
maxWidth=
"lg"
>
<
Typography
variant=
"h3"
>
Cypher Coder/Decoder
</
Typography
>
<
Typography
variant=
"h3"
sx=
{
{
fontSize
:
{
xs
:
"24px"
,
sm
:
"36px"
,
},
}
}
>
Cypher Coder/Decoder
</
Typography
>
<
Box
<
Box
sx=
{
{
maxWidth
:
{
xs
:
"90%"
,
sm
:
"80%"
,
lg
:
"70%"
,
},
}
}
component=
"form"
component=
"form"
autoComplete=
"off"
autoComplete=
"off"
onSubmit=
{
submitFormHandler
}
onSubmit=
{
submitFormHandler
}
...
@@ -45,7 +62,16 @@ export default function Home() {
...
@@ -45,7 +62,16 @@ export default function Home() {
value=
{
formData
.
decoded
}
value=
{
formData
.
decoded
}
onChange=
{
onInputChangeHandler
}
onChange=
{
onInputChangeHandler
}
/>
/>
<
Grid2
container
alignItems=
"center"
justifyContent=
"space-between"
>
<
Grid2
container
alignItems=
"center"
sx=
{
{
flexDirection
:
{
xs
:
"column"
,
md
:
"row"
,
},
}
}
>
<
Grid2
size=
{
7
}
>
<
Grid2
size=
{
7
}
>
<
InputField
<
InputField
name=
"Password"
name=
"Password"
...
@@ -53,22 +79,42 @@ export default function Home() {
...
@@ -53,22 +79,42 @@ export default function Home() {
onChange=
{
onInputChangeHandler
}
onChange=
{
onInputChangeHandler
}
/>
/>
</
Grid2
>
</
Grid2
>
<
Grid2
size=
{
2
}
justifyContent=
"center"
>
<
Grid2
container
justifyContent=
{
{}
}
>
<
Button
variant=
"contained"
startIcon=
{
<
ArrowDownwardIcon
/>
}
>
<
Grid2
>
<
Button
size=
"small"
variant=
"contained"
startIcon=
{
<
ArrowDownwardIcon
/>
}
>
<
Typography
sx=
{
{
display
:
{
xs
:
"none"
,
md
:
"inline"
},
}
}
>
Encode
Encode
</
Typography
>
</
Button
>
</
Button
>
</
Grid2
>
</
Grid2
>
<
Grid2
size=
{
2
}
justifyContent=
"center"
>
<
Grid2
>
<
Button
<
Button
size=
"small"
variant=
"contained"
variant=
"contained"
startIcon=
{
startIcon=
{
<
ArrowDownwardIcon
sx=
{
{
transform
:
"rotate(180deg)"
}
}
/>
<
ArrowDownwardIcon
sx=
{
{
transform
:
"rotate(180deg)"
}
}
/>
}
}
>
<
Typography
sx=
{
{
display
:
{
xs
:
"none"
,
md
:
"inline"
},
}
}
>
>
Decode
Decode
</
Typography
>
</
Button
>
</
Button
>
</
Grid2
>
</
Grid2
>
</
Grid2
>
</
Grid2
>
</
Grid2
>
<
InputField
<
InputField
name=
"Encoded"
name=
"Encoded"
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment