geophystech#311 Баннер для тренировочных событий.

aivazoff · Jan 14, 2019 · 5200342 · 5200342
1 parent f47e738
commit 5200342
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 2 deletions.
diff --git a/src/components/Event.vue b/src/components/Event.vue
@@ -1,9 +1,12 @@
 <template>
   <div class="event">
+
     <component :is="components.header" :event="event" />
+    <b-alert show v-if="!!event.has_training" variant="event-training">Режим учебных событий</b-alert>
     <component :is="components.tabs" :event="event" @onTabSwitch="onTabSwitch" v-if="event.id" />
 
     <b-row>
+
       <b-col cols="12" md="8">
 
         <div v-if="errorResponse" class="text-error">
@@ -45,14 +48,19 @@
         <keep-alive>
           <component :is="components.currentTab" :event="event" v-if="event.id" />
         </keep-alive>
+
       </b-col>
+
       <b-col cols="4">
         <keep-alive>
           <component :is="components.lastEvents" :event="event" v-if="!$root.onMobile" />
         </keep-alive>
       </b-col>
+
     </b-row>
+
   </div>
+
 </template>
 
 <script>
@@ -195,5 +203,19 @@
       position: relative;
     }
   }
+
+  $alert-event-training-color: #FF5657;
+
+  .alert-event-training
+  {
+    border-color: darken($alert-event-training-color, 15);
+    background-color: $alert-event-training-color;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    text-align: center;
+    font-weight: bold;
+    word-spacing: 3px;
+    color: white;
+  }
 </style>
 
diff --git a/src/components/event/Header.vue b/src/components/event/Header.vue
@@ -1,8 +1,11 @@
 <template>
+
   <b-row class="event-header" no-gutters>
-    <b-col cols="12" md="3">
+
+    <b-col cols="11" md="3">
       <b-breadcrumb :items="breadcrumbs" />
     </b-col>
+
     <b-col cols="12" md="8">
       <b-row>
         <b-col class="text-center">
@@ -29,17 +32,21 @@
           <b-badge
             :variant="label.variant"
             v-b-popover.hover.auto="label.description">
-              {{ label.text }}
+            {{ label.text }}
           </b-badge>
         </b-col>
       </b-row>
+
     </b-col>
+
     <b-col cols="1" md="1" class="text-right" v-if="!$root.onMobile">
       <b-button-group>
         <ExportDropDown v-if="event.id" @export2xls="export2xls" />
       </b-button-group>
     </b-col>
+
   </b-row>
+
 </template>
 
 <script>