Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 8a5bf33

Browse files
feat: updated home page responsive styles
1 parent 3db38d0 commit 8a5bf33

File tree

7 files changed

+158
-66
lines changed

7 files changed

+158
-66
lines changed

‎src/components/Home/OptionContainer.tsx‎

Lines changed: 24 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { FC, ReactEventHandler, useCallback, useMemo } from 'react'
22
import { useDispatch, useSelector } from 'react-redux'
3+
import { ActionCreatorWithPayload } from '@reduxjs/toolkit/dist/createAction'
34

45
import {
56
changeAlgorithm,
@@ -9,11 +10,12 @@ import {
910
} from '@/store/slice/sorting'
1011
import { RootState } from '@/store'
1112

12-
import { Header,Dropdown } from '@/components/shared'
13+
import { Dropdown } from '@/components/shared'
1314

1415
const SizeOption = 'Size'
1516
const AlgorithmOption = 'Algorithm'
16-
const ModeOption = 'Color mode'
17+
const ModeOption = 'Color Mode'
18+
const SpeedOption = 'Speed'
1719

1820
const getMenuOptions = (allAlgorithms: string[]) => [
1921
{
@@ -38,7 +40,7 @@ const getMenuOptions = (allAlgorithms: string[]) => [
3840
]
3941
},
4042
{
41-
name: 'Speed',
43+
name: SpeedOption,
4244
value: [
4345
{
4446
key: '1x',
@@ -58,34 +60,34 @@ const getMenuOptions = (allAlgorithms: string[]) => [
5860
name: ModeOption,
5961
value: [
6062
{
61-
key: 'True',
63+
key: 'On',
6264
value: true.toString()
6365
},
6466
{
65-
key: 'False',
67+
key: 'Off',
6668
value: false.toString()
6769
}
6870
]
6971
}
7072
]
7173

74+
const OptionHandlerMap: {
75+
[key: string]: ActionCreatorWithPayload<any, string>
76+
} = {
77+
[SizeOption]: changeArraySize,
78+
[AlgorithmOption]: changeAlgorithm,
79+
[ModeOption]: changeColorMode,
80+
[SpeedOption]: changeAnimationSpeed
81+
}
82+
7283
const OptionContainer: FC = () => {
7384
const { allAlgorithms } = useSelector((state: RootState) => state.sorting)
7485
const dispatch = useDispatch()
7586

7687
const handleChangeEvent: ReactEventHandler<HTMLSelectElement> = useCallback(
7788
event => {
7889
const { name, value } = event.currentTarget
79-
if (name === SizeOption) {
80-
dispatch(changeArraySize(value))
81-
} else if (name === AlgorithmOption) {
82-
dispatch(changeAlgorithm(value))
83-
} else if (name === ModeOption) {
84-
// console.log(value)
85-
dispatch(changeColorMode(value))
86-
} else {
87-
dispatch(changeAnimationSpeed(value))
88-
}
90+
dispatch(OptionHandlerMap[name](value))
8991
},
9092
[dispatch]
9193
)
@@ -97,16 +99,13 @@ const OptionContainer: FC = () => {
9799
return useMemo(() => {
98100
return (
99101
<div className='optionContainer'>
100-
{options.map(op => (
101-
<Header className='panelHeader' key={op.name}>
102-
<span>{op.name}: </span>
103-
<Dropdown
104-
name={op.name}
105-
options={op.value}
106-
onChange={handleChangeEvent}
107-
value={op.value[1].value}
108-
/>
109-
</Header>
102+
{options.map(({ name, value }) => (
103+
<Dropdown
104+
name={name}
105+
options={value}
106+
onChange={handleChangeEvent}
107+
value={value[1].value}
108+
/>
110109
))}
111110
</div>
112111
)

‎src/components/shared/Dropdown/index.tsx‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,22 @@ type IProps = {
1212

1313
const Dropdown: FC<IProps> = ({ name, options, onChange, value }) => {
1414
return (
15-
<select
16-
name={name}
17-
className='dropdown'
18-
onChange={onChange}
19-
defaultValue={value}
20-
>
21-
{options.map(({ key, value }) => (
22-
<option key={key} value={value}>
23-
{key}
24-
</option>
25-
))}
26-
</select>
15+
<div className='dropdown'>
16+
<label className='dropdown__label'>{name}:</label>
17+
<select
18+
className='dropdown__select'
19+
defaultValue={value}
20+
data-name={name}
21+
name={name}
22+
onChange={onChange}
23+
>
24+
{options.map(({ key, value }) => (
25+
<option key={key} value={value}>
26+
{key}
27+
</option>
28+
))}
29+
</select>
30+
</div>
2731
)
2832
}
2933

‎src/styles/app.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;1,100&display=swap');
2-
@import url('https://highlightjs.org/static/demo/styles/railscasts.css');
32

43
@import './pages/';
54
@import './shared/';

‎src/styles/pages/Home/bottomPanel.scss‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,17 +14,36 @@
1414
font-size: 14px;
1515

1616
& td {
17-
padding: 15px 50px;
17+
padding: 15px 20px;
18+
box-sizing: border-box;
1819
}
1920

2021
&:nth-child(odd) {
2122
background-color: hsl(0, 0%, 73%);
2223
}
2324

2425
&__key {
25-
width: 200px;
26+
max-width: 150px;
2627
font-weight: bold;
2728
}
29+
30+
&__value {
31+
text-align: left;
32+
}
33+
34+
@media screen and (max-width: 768px) {
35+
font-size: 12px;
36+
& td {
37+
padding: 10px;
38+
font-size: 12px;
39+
&:nth-child(2) {
40+
font-size: 10px;
41+
}
42+
}
43+
&__key {
44+
max-width: 70px;
45+
}
46+
}
2847
}
2948
}
3049
}

‎src/styles/pages/Home/mainPanel.scss‎

Lines changed: 61 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,21 @@
33
grid-template-columns: repeat(7, 1fr);
44
grid-template-areas:
55
'optionContainer optionContainer optionContainer optionContainer optionContainer optionContainer optionContainer'
6-
'. barContainer barContainer barContainer barContainer barContainer legend'
7-
'. barContainer barContainer barContainer barContainer barContainer legend'
8-
'. barContainer barContainer barContainer barContainer barContainer legend'
9-
'. barContainer barContainer barContainer barContainer barContainer legend'
10-
'. barContainer barContainer barContainer barContainer barContainer legend'
11-
'. barContainer barContainer barContainer barContainer barContainer legend'
12-
'. controls controls controls controls controls . ';
13-
padding: 40px;
6+
'. barContainer barContainer barContainer barContainer barContainer .'
7+
'. barContainer barContainer barContainer barContainer barContainer .'
8+
'. barContainer barContainer barContainer barContainer barContainer .'
9+
'. barContainer barContainer barContainer barContainer barContainer .'
10+
'. barContainer barContainer barContainer barContainer barContainer .'
11+
'controls controls controls controls controls controls controls'
12+
'legend legend legend legend legend legend legend'
13+
'. . . . . . .';
14+
padding: 20px;
1415
text-align: justify;
1516
height: 100%;
1617

1718
& .optionContainer {
1819
grid-area: optionContainer;
19-
align-self: start;
20+
align-self: center;
2021
display: flex;
2122
flex-direction: row;
2223
justify-content: space-evenly;
@@ -36,7 +37,9 @@
3637
margin: 1px;
3738
opacity: 1;
3839
color: white;
39-
box-shadow: 4px 4px 10px 2px background-color;
40+
border: 1px solid rgb(255, 255, 255);
41+
border-radius: 2px;
42+
box-shadow: 4px 4px 10px 2px rgba(128, 128, 128, 0.64);
4043
}
4144
}
4245

@@ -49,34 +52,76 @@
4952
padding: 10px;
5053

5154
& button {
52-
max-height: 50px;
53-
margin: 5px;
54-
padding: 5px;
55+
font-size: 12px;
5556
min-width: 80px;
57+
max-height: 50px;
58+
margin: 10px;
59+
padding: 10px;
60+
border: none;
61+
background: rgb(239, 239, 239);
62+
box-shadow: 4px 4px 10px 2px rgba(128, 128, 128, 0.64);
63+
border-radius: 2px;
64+
@media screen and (max-width: 768px) {
65+
font-size: 11px;
66+
min-width: 50px;
67+
max-height: 30px;
68+
margin: 5px;
69+
padding: 5px;
70+
}
71+
72+
&:hover {
73+
opacity: 0.9;
74+
}
75+
76+
&:active {
77+
opacity: 0.7;
78+
}
5679
}
5780
}
5881

5982
& .legendContainer {
6083
grid-area: legend;
6184
align-self: center;
85+
display: flex;
86+
flex-direction: row;
87+
align-items: center;
88+
justify-content: center;
6289

6390
&__header {
64-
margin-bottom: 10px;
91+
font-size: 16px;
92+
margin-right: 10px;
6593
}
6694

6795
& .legend {
6896
display: flex;
6997
flex-direction: row;
7098
align-items: center;
71-
font-size: 14px;
72-
margin: 5px0;
99+
font-size: 12px;
100+
margin: 5px;
73101

74102
&__color {
75103
height: 18px;
76104
width: 18px;
77105
border: 1px solid white;
78106
border-radius: 3px;
79107
margin-right: 10px;
108+
box-shadow: 0px 0px 10px 2px rgba(128, 128, 128, 0.64);
109+
}
110+
}
111+
112+
@media screen and (max-width: 768px) {
113+
&__header {
114+
font-size: 14px;
115+
}
116+
117+
& .legend {
118+
font-size: 10px;
119+
margin: 3px;
120+
121+
&__color {
122+
height: 16px;
123+
width: 16px;
124+
}
80125
}
81126
}
82127
}

‎src/styles/shared/dropdown.scss‎

Lines changed: 29 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,37 @@
11
.dropdown {
2-
padding: 5px;
3-
margin: 0 5px;
4-
background: hsl(0, 0%, 77%);
5-
font-size: 12px;
2+
width: 100px;
63

7-
&:hover {
8-
cursor: pointer;
4+
&__label {
5+
display: block;
6+
font-size: 12px;
7+
font-weight: bold;
8+
text-align: left;
9+
margin: 5px;
910
}
1011

11-
&:focus {
12-
outline: none;
12+
&__select {
13+
width: 100%;
14+
font-size: 14px;
15+
border: none;
16+
position: relative;
17+
padding: 5px;
18+
border-radius: 3px;
19+
20+
&:hover {
21+
cursor: pointer;
22+
}
23+
24+
&:focus {
25+
outline: none;
26+
}
1327
}
1428

15-
& option {
16-
font-size: 1rem;
29+
@media screen and (max-width: 768px) {
30+
width: 70px;
31+
font-size: 12px;
32+
33+
&__label {
34+
font-size: 10px;
35+
}
1736
}
1837
}

‎src/styles/shared/navbar.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,4 +30,11 @@
3030
margin-left: 25px;
3131
}
3232
}
33+
34+
@media screen and (max-width: 768px) {
35+
padding: 10px 20px;
36+
& * {
37+
font-size: 10px;
38+
}
39+
}
3340
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /