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

Commit 77502db

Browse files
dyakovridyakovri
committed
Auto styling
1 parent 0cf33ff commit 77502db

File tree

9 files changed

+599
-539
lines changed

9 files changed

+599
-539
lines changed

‎src/components/GroupRow.vue‎

Lines changed: 32 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,45 @@
11
<template>
2-
<li class="event-item noselect" v-for="item in 2" :key="item.id">
3-
<div class="event-item-icon" v-if="item==1">
4-
<span class="material-symbols-sharp">schedule</span>
5-
</div>
6-
<div class="event-item-icon" v-else>
7-
<span class="material-symbols-sharp">group</span>
8-
</div>
9-
<div class="event-item-information">
10-
<div v-if="item==1">
11-
<div>Группа</div>
12-
<div>{{eventNumber}}</div>
13-
</div>
14-
<div v-else>
15-
<div>{{eventDate}}</div>
16-
<div>{{eventTime}}</div>
17-
</div>
18-
</div>
19-
</li>
2+
<li class="event-item noselect" v-for="item in 2" :key="item.id">
3+
<div class="event-item-icon" v-if="item == 1">
4+
<span class="material-symbols-sharp">schedule</span>
5+
</div>
6+
<div class="event-item-icon" v-else>
7+
<span class="material-symbols-sharp">group</span>
8+
</div>
9+
<div class="event-item-information">
10+
<div v-if="item == 1">
11+
<div>Группа</div>
12+
<div>{{ eventNumber }}</div>
13+
</div>
14+
<div v-else>
15+
<div>{{ eventDate }}</div>
16+
<div>{{ eventTime }}</div>
17+
</div>
18+
</div>
19+
</li>
2020
</template>
2121

2222
<script>
23-
import '@/components/row.css';
23+
import "@/components/row.css";
2424
2525
export default {
26-
props: {
27-
eventNumber: {
28-
type: String,
29-
},
30-
eventTime: {
31-
type: String,
32-
},
33-
eventDate: {
34-
type: String,
35-
}
26+
props: {
27+
eventNumber: {
28+
type: String,
3629
},
37-
}
30+
eventTime: {
31+
type: String,
32+
},
33+
eventDate: {
34+
type: String,
35+
},
36+
},
37+
};
3838
</script>
3939

4040
<style scoped>
4141
.material-symbols-sharp {
42-
color: #00004B;
43-
font-size: 30px;
42+
color: #00004b;
43+
font-size: 30px;
4444
}
45-
4645
</style>

‎src/components/LecturerRow.vue‎

Lines changed: 53 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,70 @@
11
<template>
2-
<li class="event-item noselect">
3-
<div class="photo-lecturer" v-if="lecturer.avatar_link">
4-
<div>
5-
<img v-bind:src="lecturer.avatar_link">
6-
</div>
7-
</div>
8-
<div class="event-item-icon" v-else>
9-
<div>
10-
<span class="material-symbols-sharp">person</span>
11-
</div>
12-
</div>
13-
<div class="event-item-information" v-if="lecturer.first_name[2]">
14-
<div class="event-item-header"><b>{{lecturer.first_name}} {{lecturer.middle_name}}</b></div>
15-
<div>{{lecturer.last_name}}</div>
16-
</div>
17-
<div class="event-item-information" v-else>
18-
<b>{{lecturer.first_name}} {{lecturer.middle_name}} {{lecturer.last_name}}</b>
19-
</div>
20-
</li>
2+
<li class="event-item noselect">
3+
<div class="photo-lecturer" v-if="lecturer.avatar_link">
4+
<div>
5+
<img v-bind:src="lecturer.avatar_link" />
6+
</div>
7+
</div>
8+
<div class="event-item-icon" v-else>
9+
<div>
10+
<span class="material-symbols-sharp">person</span>
11+
</div>
12+
</div>
13+
<div class="event-item-information" v-if="lecturer.first_name[2]">
14+
<div class="event-item-header">
15+
<b>{{ lecturer.first_name }} {{ lecturer.middle_name }}</b>
16+
</div>
17+
<div>{{ lecturer.last_name }}</div>
18+
</div>
19+
<div class="event-item-information" v-else>
20+
<b
21+
>{{ lecturer.first_name }} {{ lecturer.middle_name }}
22+
{{ lecturer.last_name }}</b
23+
>
24+
</div>
25+
</li>
2126
</template>
2227

2328
<script>
24-
import '@/components/row.css';
29+
import "@/components/row.css";
2530
2631
export default {
27-
props: {
28-
lecturer: {
29-
type: Object,
30-
required: true,
31-
},
32+
props: {
33+
lecturer: {
34+
type: Object,
35+
required: true,
3236
},
37+
},
3338
34-
data() {
35-
return {
36-
textDown: [],
37-
icon: [],
38-
date: new Date(),
39-
}
39+
data() {
40+
return {
41+
textDown: [],
42+
icon: [],
43+
date: new Date(),
44+
};
45+
},
46+
methods: {
47+
formatDate(date) {
48+
if (this.date) {
49+
var options = {
50+
month: "long",
51+
day: "numeric",
52+
};
53+
return date.toLocaleString("ru", options);
54+
}
4055
},
41-
methods: {
42-
formatDate(date) {
43-
if (this.date) {
44-
var options = {
45-
month: "long",
46-
day: "numeric",
47-
};
48-
return date.toLocaleString("ru", options);
49-
}
50-
},
51-
},
52-
}
56+
},
57+
};
5358
</script>
5459

5560
<style scoped>
5661
.material-symbols-sharp {
57-
font-size: 36px;
62+
font-size: 36px;
5863
}
5964
6065
.photo-lecturer {
61-
width: 56px;
62-
height: 56px;
63-
border-radius: 50%;
66+
width: 56px;
67+
height: 56px;
68+
border-radius: 50%;
6469
}
65-
</style>
70+
</style>

‎src/components/RoomRow.vue‎

Lines changed: 29 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,42 @@
11
<template>
2-
<li class="event-item noselect">
3-
<div class="event-item-icon">
4-
<span class="material-symbols-sharp">location_on</span>
5-
</div>
6-
<div class="event-item-information">
7-
<div class="event-item-header"><b>{{room.name}}</b></div>
8-
<div>
9-
<span v-if="room.building">{{room.building}}</span>
10-
<span v-if="room.building && room.direction"> • </span>
11-
<span v-if="room.direction">{{roomDirection(room.direction)}}</span>
12-
</div>
13-
</div>
14-
</li>
15-
2+
<li class="event-item noselect">
3+
<div class="event-item-icon">
4+
<span class="material-symbols-sharp">location_on</span>
5+
</div>
6+
<div class="event-item-information">
7+
<div class="event-item-header">
8+
<b>{{ room.name }}</b>
9+
</div>
10+
<div>
11+
<span v-if="room.building">{{ room.building }}</span>
12+
<span v-if="room.building && room.direction"> • </span>
13+
<span v-if="room.direction">{{ roomDirection(room.direction) }}</span>
14+
</div>
15+
</div>
16+
</li>
1617
</template>
1718

1819
<script>
19-
import '@/components/row.css';
20+
import "@/components/row.css";
2021
2122
export default {
22-
props: {
23-
room: {
24-
type: Object,
25-
required: true,
26-
},
23+
props: {
24+
room: {
25+
type: Object,
26+
required: true,
2727
},
28-
methods: {
29-
roomDirection(direction) {
30-
if (direction === "North") return "Север";
31-
if (direction === "South") return "Юг";
32-
}
33-
}
34-
}
35-
28+
},
29+
methods: {
30+
roomDirection(direction) {
31+
if (direction === "North") return "Север";
32+
if (direction === "South") return "Юг";
33+
},
34+
},
35+
};
3636
</script>
3737

3838
<style scoped>
3939
.material-symbols-sharp {
40-
font-size: 30px;
40+
font-size: 30px;
4141
}
42-
43-
4442
</style>

‎src/components/row.css‎

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,25 @@
33
padding: 0;
44
margin: 0;
55
list-style-type: none;
6-
height: 78px;
6+
height: 78px;
77
border-radius: 20px;
88
display: flex;
99
align-items: center;
10-
}
10+
}
11+
1112
.event-item:nth-child(n+3) {
1213
margin-top: 16px;
13-
background-color:rgba(0, 0, 0, 0.06);
14+
background-color: rgba(0, 0, 0, 0.06);
1415
}
1516

1617
.event-item:last-of-type {
1718
margin-bottom: 80px;
1819
}
1920

2021
.event-item:nth-child(n+3):hover {
21-
background: var(--bs-primary-20);
22+
background: var(--bs-primary-20);
2223
}
24+
2325
.event-item-icon {
2426
min-width: 88px;
2527
height: 40px;
@@ -41,12 +43,18 @@
4143
}
4244

4345
.noselect {
44-
-webkit-touch-callout: none; /* iOS Safari */
45-
-webkit-user-select: none; /* Safari */
46-
-khtml-user-select: none; /* Konqueror HTML */
47-
-moz-user-select: none; /* Old versions of Firefox */
48-
-ms-user-select: none; /* Internet Explorer/Edge */
49-
user-select: none; /* Non-prefixed version, currently
46+
-webkit-touch-callout: none;
47+
/* iOS Safari */
48+
-webkit-user-select: none;
49+
/* Safari */
50+
-khtml-user-select: none;
51+
/* Konqueror HTML */
52+
-moz-user-select: none;
53+
/* Old versions of Firefox */
54+
-ms-user-select: none;
55+
/* Internet Explorer/Edge */
56+
user-select: none;
57+
/* Non-prefixed version, currently
5058
supported by Chrome, Edge, Opera and Firefox */
5159
cursor: default;
52-
}
60+
}

0 commit comments

Comments
 (0)