Skip to content
This repository was archived by the owner on Mar 26, 2023. It is now read-only.

Commit a35508c

Browse files
author
Artem Netsvetaev
committed
layout improves
1 parent f36f6fd commit a35508c

6 files changed

Lines changed: 143 additions & 172 deletions

File tree

‎src/components/EventRow.vue‎

Lines changed: 10 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,12 @@
11
<template>
22
<div class="event noselect">
33
<div class="time">
4-
<p>
5-
<b>{{ lesson.start_ts.slice(11, 16) }}</b>
6-
</p>
7-
<p>{{ lesson.end_ts.slice(11, 16) }}</p>
4+
<b>{{ lesson.start_ts.slice(11, 16) }}</b>
5+
<span>{{ lesson.end_ts.slice(11, 16) }}</span>
86
</div>
97
<div class="info">
10-
<p>
11-
<b class="title">{{ lesson.name }}</b>
12-
</p>
13-
<p
8+
<b class="title">{{ lesson.name }}</b>
9+
<span
1410
v-if="formatInfo(lesson.lecturer, lesson.room)"
1511
class="extra"
1612
v-html="formatInfo(lesson.lecturer, lesson.room)"
@@ -52,26 +48,21 @@ export default {
5248
<style scoped>
5349
.event {
5450
display: flex;
55-
flex-flow: row nowrap;
5651
gap: 16px;
5752
border-radius: 20px;
5853
background: var(--bs-primary-10);
5954
transition: background-color 0.5s ease;
60-
height: 78px;
61-
margin: 16px auto;
6255
padding: 10px 16px;
63-
width: 100%;
64-
max-width: 600px;
65-
min-width: 300px;
66-
overflow: hidden;
56+
margin-bottom: 16px;
57+
}
58+
.event:last-child {
59+
margin-bottom: 0;
6760
}
61+
6862
.event:hover {
6963
background: var(--bs-primary-20);
7064
}
7165
72-
p {
73-
margin: 0;
74-
}
7566
div.time,
7667
div.info {
7768
display: flex;
@@ -87,7 +78,7 @@ div.time {
8778
div.info {
8879
min-width: 0;
8980
}
90-
.info > p {
81+
.info > span {
9182
width: 100%;
9283
overflow: hidden;
9384
text-overflow: ellipsis;

‎src/components/row.css‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,7 @@
2525

2626
.event-item-icon {
2727
min-width: 88px;
28-
height: 40px;
29-
display: flex;
30-
align-items: center;
31-
justify-content: center;
28+
text-align: center;
3229
}
3330

3431
.event-item-header:nth-of-type(n + 3) {

‎src/router/index.js‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -36,18 +36,20 @@ const router = createRouter({
3636

3737
router.beforeEach((to, from) => {
3838
// Log to marketing API
39-
fetch(`${process.env.VUE_APP_API_MARKETING}/action`, {
40-
method: 'POST',
41-
cache: 'no-cache',
42-
redirect: 'follow',
43-
headers: { 'Content-Type': 'application/json' },
44-
body: JSON.stringify({
45-
user_id: localStorage.getItem('marketing-id'),
46-
action: 'route to',
47-
path_from: from.fullPath || null,
48-
path_to: to.fullPath || null,
49-
}),
50-
}).catch();
39+
if (to.fullPath !== from.fullPath) {
40+
fetch(`${process.env.VUE_APP_API_MARKETING}/action`, {
41+
method: 'POST',
42+
cache: 'no-cache',
43+
redirect: 'follow',
44+
headers: { 'Content-Type': 'application/json' },
45+
body: JSON.stringify({
46+
user_id: localStorage.getItem('marketing-id'),
47+
action: 'route to',
48+
path_from: from.fullPath || null,
49+
path_to: to.fullPath || null,
50+
}),
51+
}).catch();
52+
}
5153

5254
if (
5355
to.meta.requiresGroupSelection &&

‎src/views/EventView.vue‎

Lines changed: 57 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,64 @@
11
<template>
2-
<div class="event-wrapper">
3-
<div
4-
v-if="!loaded"
5-
class="lds-dual-ring"
6-
/>
7-
<div
8-
v-else
9-
class="wrapper"
10-
>
11-
<div class="lesson-event">
12-
<b>{{ eventInfo.name }}</b>
13-
</div>
14-
<ul>
15-
<GroupRow
16-
:event-number="eventInfo.group.number"
17-
:event-date="formatDate(date)"
18-
:event-time="DownTextFirst(eventInfo.start_ts, eventInfo.end_ts)"
2+
<div
3+
v-if="!loaded"
4+
class="lds-dual-ring"
5+
/>
6+
<template v-else>
7+
<b class="lesson-name">{{ eventInfo.name }}</b>
8+
<ul>
9+
<GroupRow
10+
:event-number="eventInfo.group.number"
11+
:event-date="formatDate(date)"
12+
:event-time="DownTextFirst(eventInfo.start_ts, eventInfo.end_ts)"
13+
/>
14+
<RoomRow
15+
v-for="room in eventInfo.room"
16+
:key="room.id"
17+
:room="room"
18+
@click="clickRoom(room.id)"
19+
/>
20+
<LecturerRow
21+
v-for="lecturer in eventInfo.lecturer"
22+
:key="lecturer.id"
23+
:lecturer="lecturer"
24+
@click="clickLecturer(lecturer.id)"
25+
/>
26+
</ul>
27+
<div class="comment-container">
28+
<b>Комментарии</b>
29+
<p
30+
v-if="getCurComments().length == 0"
31+
class="row"
32+
>
33+
<i class="text-secondary text-center">Еще нет комментариев</i>
34+
</p>
35+
<div
36+
v-for="(comment, i) in getCurComments()"
37+
:key="i"
38+
class="comment"
39+
>
40+
<MaterialIcon
41+
class="delete-btn text-danger"
42+
@click="dropComment(i)"
43+
icon="delete"
1944
/>
20-
<RoomRow
21-
v-for="room in eventInfo.room"
22-
:key="room.id"
23-
:room="room"
24-
@click="clickRoom(room.id)"
45+
<p>{{ comment }}</p>
46+
</div>
47+
<form @submit.prevent="sendComment">
48+
<textarea
49+
id="comment-text"
50+
name="comment-text"
51+
rows="3"
52+
class="form-control"
2553
/>
26-
<LecturerRow
27-
v-for="lecturer in eventInfo.lecturer"
28-
:key="lecturer.id"
29-
:lecturer="lecturer"
30-
@click="clickLecturer(lecturer.id)"
54+
<input
55+
type="submit"
56+
class="btn form-control"
57+
value="Сохранить на этом устройстве"
3158
/>
32-
</ul>
33-
<div class="comment-container">
34-
<b>Комментарии</b>
35-
<p
36-
v-if="getCurComments().length == 0"
37-
class="row"
38-
>
39-
<i class="text-secondary text-center">Еще нет комментариев</i>
40-
</p>
41-
<div
42-
v-for="(comment, i) in getCurComments()"
43-
:key="i"
44-
class="comment"
45-
>
46-
<MaterialIcon
47-
class="delete-btn text-danger"
48-
@click="dropComment(i)"
49-
icon="delete"
50-
/>
51-
<p>{{ comment }}</p>
52-
</div>
53-
<form @submit.prevent="sendComment">
54-
<textarea
55-
id="comment-text"
56-
name="comment-text"
57-
rows="3"
58-
class="form-control"
59-
/>
60-
<input
61-
type="submit"
62-
class="btn form-control"
63-
value="Сохранить на этом устройстве"
64-
/>
65-
</form>
66-
</div>
59+
</form>
6760
</div>
68-
</div>
61+
</template>
6962
</template>
7063

7164
<script>
@@ -167,19 +160,9 @@ ul {
167160
margin: 0;
168161
padding: 0;
169162
}
170-
.event-wrapper {
171-
padding: 10px 24px;
172-
min-height: calc(100vh - 56px * 2);
173-
display: flex;
174-
align-items: center;
175-
justify-content: center;
176-
}
177163
178-
.wrapper {
164+
.lesson-name {
179165
align-self: flex-start;
180-
}
181-
182-
.lesson-event {
183166
font-size: 24px;
184167
margin-bottom: 8px;
185168
}

‎src/views/InitView.vue‎

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,14 @@
33
<img
44
:src="logoItem"
55
:style="{ backgroundColor: '#fff' }"
6+
width="200"
7+
height="200"
68
/>
7-
<h1>Добро пожаловать!</h1>
8-
<p>Наше приложение позволит получить доступ к сервисам для студентов ФФ МГУ!</p>
9-
<p>Для просмотра расписания выберите свою группу</p>
9+
<h1 class="mb-3">Добро пожаловать!</h1>
10+
<p>
11+
Наше приложение позволит получить доступ к сервисам для студентов ФФ МГУ!<br />
12+
Для просмотра расписания выберите свою группу:
13+
</p>
1014
<select
1115
v-model="groupId"
1216
class="form-select form-select-sm mb-3 group-selector"
@@ -107,18 +111,16 @@ export default {
107111
flex-direction: column;
108112
align-items: center;
109113
justify-content: center;
110-
padding: 10px 10%;
111-
padding-bottom: 66px;
112-
gap: 1em;
113-
width: 100%;
114-
height: 100%;
115114
}
116115
h1 {
117116
font-weight: bold;
118117
}
119118
p {
120119
text-align: justify;
121120
}
121+
.group-selector {
122+
max-width: 296px;
123+
}
122124
.group-selector:hover {
123125
opacity: 0.6;
124126
box-shadow: none;
@@ -140,10 +142,4 @@ p {
140142
:active {
141143
box-shadow: none;
142144
}
143-
img {
144-
width: 40%;
145-
height: auto;
146-
max-width: 200px;
147-
border-radius: 50%;
148-
}
149145
</style>

0 commit comments

Comments
 (0)