Skip to content

Commit e02bf71

Browse files
sharmaadityaHQsharmaadityaHQ
authored
Merge pull request #72 from AsavariA/ui/mobile-responsive
UI/mobile responsive
2 parents 1ee3af7 + e8cf924 commit e02bf71

21 files changed

+22487
-173
lines changed

‎package-lock.json‎

Lines changed: 22112 additions & 56 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/assets/scss/components/dropdown.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -93,8 +93,8 @@
9393
opacity: 0.08;
9494
}
9595

96-
@media only screen and (max-width: 281px) {
96+
@media only screen and (max-width: 500px) {
9797
.dropdown-container {
98-
padding: 0px 6px;
98+
padding: 0px;
9999
}
100100
}

‎src/assets/scss/components/dropdownOptions.scss‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
1+
.dropdown-main {
2+
align-items: center;
3+
display: flex;
4+
margin: 0 0.5rem;
5+
}
6+
17
.filter-title {
28
font-weight: bold;
39

410
&:not(:first-of-type) {
511
margin-left: 48px;
612
}
7-
}
13+
}

‎src/assets/scss/components/editableLabel.scss‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
.editable-label {
22
align-items: center;
33
display: flex;
4+
justify-content: center;
45

56
button {
67
background-color: transparent;
@@ -18,4 +19,27 @@
1819
visibility: visible;
1920
}
2021
}
22+
23+
@media only screen and (max-width: 768px) {
24+
h2 {
25+
margin: 0.5rem 0;
26+
}
27+
28+
p {
29+
margin: 0.5rem 0;
30+
}
31+
32+
button.editable-label-edit-btn {
33+
display: none;
34+
}
35+
36+
&:hover {
37+
38+
button {
39+
cursor: pointer;
40+
display: block;
41+
}
42+
}
43+
44+
}
2145
}

‎src/assets/scss/components/footer.scss‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,19 @@
77
padding: 10px 25px;
88
}
99
}
10+
11+
@media only screen and (max-width: 600px) {
12+
.footer-main {
13+
flex-direction: column;
14+
15+
p {
16+
margin: 0;
17+
margin-bottom: 1rem;
18+
padding: 0.3rem 0;
19+
}
20+
21+
a {
22+
padding: 0.3rem;
23+
}
24+
}
25+
}

‎src/assets/scss/components/modal.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
font-size: $font-size-header;
3838
height: 25px;
3939
position: absolute;
40-
right: 0;
40+
right: 0.5em;
4141
text-align: center;
4242
top: 0.5em;
4343
width: 25px;
@@ -54,3 +54,4 @@
5454
transform: scale(1.2);
5555
}
5656
}
57+

‎src/assets/scss/components/navigation.scss‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,6 @@
1414

1515
@media only screen and (max-width: 768px) {
1616
.nav-header {
17-
flex-direction: column;
18-
}
19-
20-
.navbar-content {
21-
margin-top: 20px;
17+
padding: 22px 10px 0;
2218
}
2319
}

‎src/assets/scss/components/roadmap.scss‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,3 +60,59 @@
6060
}
6161
}
6262
}
63+
64+
.roadmap-dropdown {
65+
background-color: white;
66+
display: none;
67+
padding: 20px;
68+
}
69+
70+
@media (max-width: 900px) {
71+
.roadmap-container {
72+
display: none;
73+
}
74+
75+
.roadmap-dropdown {
76+
display: block;
77+
}
78+
79+
.roadmap {
80+
align-items: flex-start;
81+
display: flex;
82+
flex-direction: column;
83+
position: relative;
84+
85+
&::before {
86+
border-left: 1px solid gray;
87+
border-top: 0;
88+
content: '';
89+
height: 80%;
90+
left: 23px;
91+
position: absolute;
92+
width: 100%;
93+
z-index: 1;
94+
}
95+
96+
.btn-tabs {
97+
margin: 0.8rem 0;
98+
}
99+
}
100+
101+
.btn-tabs {
102+
margin: 0.5rem;
103+
width: 200px;
104+
}
105+
106+
}
107+
108+
@media (max-width: 600px) {
109+
.roadmap-one {
110+
flex-direction: column;
111+
}
112+
113+
.btn-tabs {
114+
margin: 0.3rem 0;
115+
text-align: left;
116+
width: 100%;
117+
}
118+
}

‎src/assets/scss/components/search.scss‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
padding: 0px 10px;
88
padding-left: 0px;
99
position: relative;
10-
width: 290px;
1110

1211
.dropdown-container {
1312
.btn {
@@ -26,11 +25,14 @@
2625
input {
2726
border: 0px;
2827
outline: none;
29-
padding: 0px;
30-
width: 147px;
28+
padding: 0.3rem;
3129
}
3230
}
3331

32+
.search {
33+
margin: 0.5rem;
34+
}
35+
3436
.user-suggest-dropdown {
3537
background-color: $eos-white;
3638
border-radius: 10px 0px 10px 10px;
@@ -70,3 +72,15 @@
7072
.close-btn {
7173
cursor: pointer;
7274
}
75+
76+
@media (max-width: 400px) {
77+
.search-input {
78+
input {
79+
border: 0px;
80+
max-width: 4rem;
81+
min-width: 2rem;
82+
outline: none;
83+
padding: 0.3rem;
84+
}
85+
}
86+
}

‎src/assets/scss/components/storiesList.scss‎

Lines changed: 65 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -32,11 +32,6 @@
3232
display: flex;
3333
}
3434

35-
&-subcontent {
36-
margin: 0 16px;
37-
min-width: 105px;
38-
}
39-
4035
.category-text {
4136
color: $hyper-link-color;
4237
font-weight: bold;
@@ -48,11 +43,73 @@
4843
flex-grow: 2;
4944
margin: 0px 16px;
5045
width: 40%;
46+
47+
h3 {
48+
margin-bottom: 0.3rem;
49+
}
50+
51+
p {
52+
margin-top: 0.3rem;
53+
}
54+
}
55+
56+
.story-small-details {
57+
align-items: center;
58+
display: flex;
59+
justify-content: space-between;
60+
width: 40%;
61+
}
62+
63+
.story-heading {
64+
margin: 2rem 0;
65+
}
66+
67+
.story-description {
68+
margin: 2rem 0;
5169
}
5270

53-
@media only screen and (max-width: 768px) {
71+
72+
@media (max-width: 900px) {
73+
.story {
74+
display: block;
75+
height: auto;
76+
}
77+
5478
.stories-content {
55-
max-width: 60%;
56-
width: 60%;
79+
margin: 0px;
80+
width: 100%;
81+
}
82+
83+
.story-small-details {
84+
width: 100%;
85+
}
86+
}
87+
88+
@media only screen and (max-width: 450px) {
89+
.story-small-details {
90+
align-items: flex-start;
91+
display: flex;
92+
flex-direction: column;
93+
height: 9rem;
94+
justify-content: space-between;
95+
}
96+
97+
.story-subcontent {
98+
flex-direction: row;
99+
justify-content: space-between;
100+
101+
small {
102+
margin: 0 16px;
103+
}
104+
105+
a {
106+
margin: 0 16px;
107+
}
108+
}
109+
110+
.s-metas {
111+
flex-direction: row;
112+
justify-content: flex-end;
113+
width: 100%;
57114
}
58115
}

0 commit comments

Comments
 (0)