Skip to content

Commit ea5cb09

Browse files
ntthitrinhkhangon
ntthitrinh
and
khangon
authored
feature-8758: Redesign Menu Area on Schedule Page (#9047)
* feature-8758: Redesign Menu Area on Schedule Page: row 1 * feature-8758:Redesign Menu Area on Schedule Page-row2 * feature-8758:Redesign Menu Area on Schedule Page * feature-8758:Redesign Menu Area on Schedule Page * feature-8757-and-feature-8758:Redesign Menu Area on Schedule Page and Reduce area occupied by time and search field on schedule page * feature-8758: Redesign Menu Area on Schedule Page --------- Co-authored-by: Khang On - TMA <135116292+khangon@users.noreply.github.com>
1 parent e5df60d commit ea5cb09

File tree

8 files changed

+421
-71
lines changed

8 files changed

+421
-71
lines changed

‎app/routes/public/sessions.js‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -90,15 +90,16 @@ export default class SessionsRoute extends Route {
9090
}
9191

9292
if (params.track) {
93-
const tracks = params.track.split(':');
93+
const delimiter = this.device.isMobile ? ',' : ':';
94+
const tracks = params.track.split(delimiter).map(val => val.trim());
9495
filterOptions.push({
9596
name : 'track',
9697
op : 'has',
9798
val : {
9899
or: tracks.map(val => ({
99100
name : 'name',
100101
op : 'eq',
101-
val : val.charAt(0) === ',' ? val.substring(1) : val
102+
val : val.startsWith(',') ? val.substring(1) : val
102103
}))
103104
}
104105
});
@@ -147,15 +148,17 @@ export default class SessionsRoute extends Route {
147148
}
148149

149150
if (params.room) {
150-
const rooms = params.room.split(':');
151+
const delimiter = this.device.isMobile ? ',' : ':';
152+
const rooms = params.room.split(delimiter).map(val => val.trim());
153+
151154
filterOptions.push({
152155
name : 'microlocation',
153156
op : 'has',
154157
val : {
155158
or: rooms.map(val => ({
156159
name : 'name',
157160
op : 'eq',
158-
val : val.charAt(0) === ',' ? val.substring(1) : val
161+
val : val.startsWith(',') ? val.substring(1) : val
159162
}))
160163
}
161164
});

‎app/styles/libs/_helpers.scss‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -220,3 +220,37 @@ $spacer-heights: 50 100 200 300 400 500 600 700 800 900;
220220
display: none;
221221
}
222222
}
223+
224+
.input-full {
225+
input {
226+
width: 100%;
227+
}
228+
}
229+
230+
.transition-size {
231+
transition: width .3s ease-in-out;
232+
}
233+
234+
.dropdown-overflow-text {
235+
.text {
236+
width: calc(100% - .15rem);
237+
white-space: nowrap;
238+
overflow: hidden;
239+
text-overflow: ellipsis;
240+
}
241+
}
242+
243+
.min-half-width {
244+
min-width: 50% !important;
245+
}
246+
247+
.max-half-width {
248+
max-width: 50%;
249+
}
250+
251+
.focus-search-full {
252+
&:focus-within {
253+
max-width: 100% !important;
254+
width: 100% !important;
255+
}
256+
}

‎app/styles/pages/events.scss‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,43 @@
22
float: right;
33
}
44

5+
.search-box-mobile {
6+
float: right;
7+
}
8+
59
.create-event {
610
margin-top: 10px;
711
}
812

913
@media screen and (max-width: 450px) {
10-
.search-box {
14+
.search-box-mobile {
1115
float: none;
1216
margin-top: 2px;
1317
width: 100%;
1418
}
1519
}
1620

21+
.expand-search-box .search-box-mobile {
22+
input {
23+
transition: width .35s ease-in-out;
24+
height: 100%;
25+
max-width: none;
26+
width: calc(100% - .5rem);
27+
margin-left: .5rem;
28+
position: absolute;
29+
left: auto;
30+
right: 0;
31+
top: 0;
32+
bottom: 0;
33+
34+
//Expand to full screen width
35+
&:focus {
36+
width: 200%;
37+
margin-left: .5rem;
38+
}
39+
}
40+
}
41+
1742
.select-ticket {
1843
background-color: #e0e1e2 !important;
1944
}

‎app/styles/pages/public.scss‎

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,194 @@
1212
display: flex;
1313
flex-wrap: wrap;
1414
}
15+
16+
.mobile-public {
17+
margin: unset !important;
18+
19+
.item-schedule {
20+
display: flex !important;
21+
align-items: center;
22+
padding-right: unset !important;
23+
padding-left: unset !important;
24+
25+
div {
26+
font-size: 25px;
27+
font-weight: bold;
28+
}
29+
}
30+
31+
.item-calendar {
32+
display: flex !important;
33+
justify-content: center;
34+
align-items: center;
35+
padding-right: 3.5px !important;
36+
padding-left: unset !important;
37+
38+
a {
39+
padding-left: 12px !important;
40+
padding-right: 12px !important;
41+
width: 100%;
42+
margin-right: unset !important;
43+
}
44+
}
45+
46+
.item-sort-by {
47+
padding-right: unset !important;
48+
padding-left: unset !important;
49+
display: flex !important;
50+
justify-content: center;
51+
align-items: center;
52+
}
53+
54+
.item-clear-filter {
55+
display: flex !important;
56+
justify-content: center;
57+
align-items: center;
58+
padding-left: unset !important;
59+
60+
a {
61+
padding-top: 7.8px !important;
62+
padding-left: 12px !important;
63+
padding-right: 12px !important;
64+
margin: unset !important;
65+
}
66+
}
67+
}
68+
69+
.row-two-my-schedule {
70+
margin-top: unset !important;
71+
margin-bottom: 1rem !important;
72+
73+
.item-public {
74+
padding: unset !important;
75+
76+
a {
77+
margin-right: unset !important;
78+
}
79+
}
80+
81+
.item-my-schedule {
82+
padding: unset !important;
83+
84+
a {
85+
margin-right: unset !important;
86+
display: flex;
87+
align-items: center;
88+
justify-content: center;
89+
}
90+
}
91+
92+
.item-my-speaker {
93+
padding: unset !important;
94+
95+
a {
96+
width: 100% !important;
97+
margin: unset !important;
98+
padding: unset !important;
99+
display: flex;
100+
align-items: center;
101+
height: 100%;
102+
}
103+
104+
div {
105+
align-items: center;
106+
justify-content: center;
107+
display: flex;
108+
}
109+
}
110+
}
111+
112+
.row-dropdown-public {
113+
margin-bottom: unset !important;
114+
115+
@media only screen and (max-width: 767px) {
116+
.ui.search.dropdown .menu {
117+
max-height: 13rem !important;
118+
}
119+
}
120+
121+
.ic-ddown {
122+
right: 6px !important;
123+
}
124+
125+
.dropdown {
126+
min-width: unset !important;
127+
}
128+
129+
.item-track {
130+
padding-right: 5px !important;
131+
padding-left: unset !important;
132+
padding-bottom: unset !important;
133+
134+
.menu-track {
135+
padding-left: 8px !important;
136+
137+
.menu.transition.visible {
138+
border-top: 1px solid #96c8da !important;
139+
}
140+
141+
.menu {
142+
width: 240px !important;
143+
}
144+
}
145+
}
146+
147+
.item-room {
148+
padding-right: unset !important;
149+
padding-left: unset !important;
150+
padding-bottom: unset !important;
151+
152+
.menu-room {
153+
padding-left: 8px !important;
154+
}
155+
156+
.menu.transition.visible {
157+
border-top: 1px solid #96c8da !important;
158+
}
159+
160+
.menu {
161+
width: 240px !important;
162+
}
163+
}
164+
165+
.item-session-type {
166+
padding-right: unset !important;
167+
padding-left: 5px !important;
168+
padding-bottom: unset !important;
169+
170+
.ui.active.selection.dropdown {
171+
border-bottom: unset !important;
172+
}
173+
174+
.menu-type {
175+
padding-left: 8px !important;
176+
}
177+
178+
.menu {
179+
width: 240px !important;
180+
border-bottom: 1px solid #96c8da !important;
181+
}
182+
183+
.menu.transition.visible {
184+
border-top: 1px solid #96c8da !important;
185+
}
186+
}
187+
188+
.item-session-level {
189+
padding-left: 5px !important;
190+
padding-right: unset !important;
191+
padding-bottom: unset !important;
192+
193+
.menu-level {
194+
padding-left: 8px !important;
195+
}
196+
197+
.menu.transition.visible {
198+
border-top: 1px solid #96c8da !important;
199+
}
200+
201+
.menu {
202+
width: 240px !important;
203+
}
204+
}
205+
}

‎app/styles/partials/utils.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -245,3 +245,12 @@
245245
.pd-1 {
246246
padding: 1rem !important;
247247
}
248+
249+
.mt-0 {
250+
margin-top: 0 !important;
251+
}
252+
253+
.align-bottom {
254+
vertical-align: bottom;
255+
}
256+

0 commit comments

Comments
 (0)