fixed vue warning, icons, load ring (#62)

Author: artemro

src/components/GroupRow.vue

@@ -1,11 +1,11 @@
 <template>
   <li class="event-item noselect" v-for="item in 2" :key="item.id">
-    <div class="event-item-icon" v-if="item == 1">
-      <span class="material-symbols-sharp">schedule</span>
-    </div>
-    <div class="event-item-icon" v-else>
+    <div class="event-item-icon noselect" v-if="item == 1">
       <span class="material-symbols-sharp">group</span>
     </div>
+    <div class="event-item-icon noselect" v-else>
+      <span class="material-symbols-sharp">schedule</span>
+    </div>
     <div class="event-item-information">
       <div v-if="item == 1">
         <div>Группа</div>

src/components/LecturerRow.vue

@@ -6,7 +6,7 @@
       </div>
     </div>
     <div class="event-item-icon" v-else>
-      <div>
+      <div class="noselect">
         <span class="material-symbols-sharp">person</span>
       </div>
     </div>

src/components/RoomRow.vue

@@ -1,6 +1,6 @@
 <template>
   <li class="event-item noselect">
-    <div class="event-item-icon">
+    <div class="event-item-icon noselect">
       <span class="material-symbols-sharp">location_on</span>
     </div>
     <div class="event-item-information">

src/components/row.css

@@ -1,6 +1,7 @@
 .event-item {
     width: 100%;
     padding: 0;
+    padding-right: 16px;
     margin: 0;
     list-style-type: none;
     height: 78px;

src/views/Event.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="event-wrapper">
     <div v-if="!loaded" class="lds-dual-ring"></div>
-    <div v-else>
+    <div v-else class="wrapper">
       <div class="lesson-event">
         <b>{{ eventInfo.name }}</b>
       </div>
@@ -84,8 +84,8 @@ export default {
         });
     },
     formatDate(date) {
-      this.date = new Date(this.eventInfo.start_ts.slice(0, 10));
-      if (this.date) {
+      date = new Date(this.eventInfo.start_ts.slice(0, 10));
+      if (date) {
         var options = {
           month: "long",
           day: "numeric",
@@ -210,14 +210,14 @@ ul {
 }
 .event-wrapper {
   padding: 32px 24px 64px 24px;
-  height: calc(100% - 56px);
+  height: calc(100vh - 56px);
   display: flex;
-  flex-direction: column;
+  align-items: center;
   justify-content: center;
 }
 
-.lds-dual-ring {
-  align-self: center;
+.wrapper {
+  align-self: flex-start;
 }
 
 .lesson-event {

src/views/Lecturer.vue

@@ -37,7 +37,7 @@
       </div>
       <div class="frame-wrapper">
         <router-link :to="feedbackLink" class="frame-link"
-          >Сообщить о проблеме</router-link
+          >Написать жалобу</router-link
         >
       </div>
     </div>
@@ -101,12 +101,14 @@ export default {
 .lecturer-wrapper {
   padding: 32px 24px 0px;
   display: flex;
+  height: calc(100vh - 56px);
   justify-content: center;
   align-items: center;
   margin: 0 auto;
 }
 
 .wrapper {
+  align-self: flex-start;
   width: 100%;
   max-width: 640px;
 }

src/views/Room.vue

@@ -1,26 +1,29 @@
 <template>
   <div class="room-wrapper">
-    <div class="location-wrapper">
-      <div class="room-location" v-if="roomInfo.building">
-        <span class="material-symbols-sharp">location_on</span>
-        <span class="room-info">{{ roomInfo.building }}</span>
+    <div v-if="!this.loaded" class="lds-dual-ring"></div>
+    <div v-else class="wrapper">
+      <div class="location-wrapper">
+        <div class="room-location" v-if="roomInfo.building">
+          <span class="material-symbols-sharp noselect">location_on</span>
+          <span class="room-info">{{ roomInfo.building }}</span>
+        </div>
+        <div class="room-location" v-if="roomInfo.direction">
+          <span class="material-symbols-sharp noselect">explore</span>
+          <span class="room-info">{{
+            this.roomDirection(roomInfo.direction)
+          }}</span>
+        </div>
       </div>
-      <div class="room-location" v-if="roomInfo.direction">
-        <span class="material-symbols-sharp">explore</span>
-        <span class="room-info">{{
-          this.roomDirection(roomInfo.direction)
-        }}</span>
+      <h4 class="room-header"><b>Карта этажа</b></h4>
+      <div class="map">
+        <router-link :to="mapLink" class="map-link">
+          <div class="map-text">Посмотреть на карте</div>
+        </router-link>
       </div>
-    </div>
-    <h4 class="room-header"><b>Карта этажа</b></h4>
-    <div class="map">
-      <router-link :to="mapLink" class="map-link">
-        <div class="map-text">Посмотреть на карте</div>
+      <router-link :to="feedbackLink" class="frame-link">
+        Сообщить о неисправности
       </router-link>
     </div>
-    <router-link :to="feedbackLink" class="frame-link">
-      Сообщить о неисправности
-    </router-link>
   </div>
 </template>
 
@@ -30,6 +33,7 @@ export default {
     return {
       roomId: this.$route.params.roomId,
       roomInfo: {},
+      loaded: false,
     };
   },
   methods: {
@@ -41,6 +45,7 @@ export default {
         .then((response) => response.json())
         .then((json) => {
           this.roomInfo = json;
+          this.loaded = true;
         });
     },
     roomDirection(direction) {
@@ -84,12 +89,20 @@ export default {
 .room-wrapper {
   padding: 32px 24px 0px;
   display: flex;
-  flex-direction: column;
+  height: calc(100vh - 56px);
   align-items: center;
+  justify-content: center;
   max-width: 640px;
   margin: 0 auto;
 }
 
+.wrapper {
+  align-self: flex-start;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
 .room-header {
   align-self: flex-start;
 }