Подверстал расписание стримов под разные экраны

app/Http/Controllers/BasyaPhrasesController.php

@@ -0,0 +1,12 @@
+<?php
+
+namespace App\Http\Controllers;
+use Illuminate\Support\Facades\DB;
+use App\Models\BasyaPhrase;
+
+class BasyaPhrasesController extends Controller
+{
+    public function index(){
+        return DB::table('basya_phrases')->get();
+    }
+}

app/Models/BasyaPhrase.php

@@ -0,0 +1,11 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class BasyaPhrase extends Model
+{
+    use HasFactory;
+}

resources/views/Schedule.vue

@@ -1,10 +1,10 @@
 <template>
     <v-sheet class="mt-5 mb-5 rounded-lg w-75">
-        <p class="text-h3 ma-5">Расписание стримов</p>
+        <p class="text-xl-h3 text-lg-h3 text-md-h4 text-sm-h4 text-h5 ma-5">Расписание стримов</p>
         <v-skeleton-loader v-if="fetching" type="text" />
-        <p v-else class="ma-5 text-h4"> {{ parseDate(dates[0].current_date) }} - {{ parseDate(dates[1].current_date) }}</p>
+        <p v-else class="ma-5 text-xl-h3 text-lg-h3 text-md-h4 text-sm-h4 text-h5"> {{ parseDate(dates[0].current_date) }} - {{ parseDate(dates[1].current_date) }}</p>
         <ScheduleTable/>
-        <p class="text-h3 ma-5">Ссылочки</p>
+        <p class="text-xl-h3 text-lg-h3 text-md-h4 text-sm-h4 text-h5 ma-5">Ссылочки</p>
         <Links/>
     </v-sheet>
 </template>

resources/views/Schedule/Links.vue

@@ -5,7 +5,10 @@
         name: "Links",
         data: () => ({
             links: [],
-            fetching: true
+            fetching: true,
+            windowHeight: document.documentElement.clientHeight,
+            windowWidth: document.documentElement.clientWidth,
+            isWide: window.innerWidth >= 460
         }),
         mounted() {
             axios
@@ -14,13 +17,25 @@
                     this.links = response.data;
                     this.fetching = false;
                 });
+            this.myEventHandler();
+            window.addEventListener("resize", this.myEventHandler, { passive: true });
+        },
+        created() {
+            window.addEventListener("resize", this.myEventHandler);
+        },
+        methods: {
+            myEventHandler(e) {
+                this.windowHeight = document.documentElement.clientHeight;
+                this.windowWidth = document.documentElement.clientWidth;
+                this.isWide = this.windowWidth >= 460;
+            }
         }
     }
 </script>
 
 <template>
     <div class="w-100 d-flex justify-center">
-        <v-list class="w-66">
+        <v-list :class="isWide ? 'w-66' : 'w-100'">
             <v-skeleton-loader v-if="fetching" type="list-item"/>
             <v-list-item v-else class="ma-5 bg-gradient-noh" elevation="6" v-for="link in links" :href="link.link"> <!-- style="background-color: #E57373; color: #FFFFFF" -->
                 <template v-slot:prepend>

resources/views/Schedule/ScheduleTable.vue

@@ -27,7 +27,7 @@
 <template>
     <div class="w-100 d-flex justify-center">
         <v-skeleton-loader v-if="fetching" type="table"/>
-        <v-table v-else class="text-h5 w-66">
+        <v-table v-else class="text-xl-h5 text-lg-h5 text-md-h5 text-sm-h5  text-body-2 w-66">
             <tbody>
             <tr v-for="schedule in schedules">
                 <td>{{ parseDate(schedule.current_date) }} {{ schedule.weekday_name }} {{ schedule.stream_time }}</td>

resources/views/basya/Basya.vue

@@ -4,24 +4,27 @@
             <v-card :elevation="4" class="mt-5 mb-5 align-center justify-center h-auto rounded-lg main-sheet-bg w-75">
                 <v-card-title></v-card-title>
                 <v-card-text class="h-100 d-flex flex-column align-center justify-center">
-                    <div class="d-flex flex-column align-center justify-center main-text">
+                    <v-skeleton-loader type="text" v-if="fetching"></v-skeleton-loader>
-                        <p class="text-h1 ma-10">Юрий говорит:</p>
+                    <div v-if="!fetching">
-                        <p class="text-h2 ma-10 vertical-center align-stretch">{{ currentPhrase }}</p>
+                        <div class="d-flex flex-column align-center justify-center main-text">
-                    </div>
+                            <p class="text-h4 text-xl-h1 text-md-h2 text-sm-h3 ma-10">Юрий говорит:</p>
-                    <div class="d-flex align-center justify-center">
+                            <p class="text-h5 text-xl-h2 text-md-h3 text-sm-h4 ma-10 vertical-center align-stretch">{{ currentPhrase }}</p>
-                        <v-btn
+                        </div>
-                            variant="elevated"
+                        <div class="d-flex align-center justify-center flex-column">
-                            color="#94BBE9FF"
+                            <v-btn
-                            @click="reloadPhrase"
+                                variant="elevated"
-                            class="ma-10">
+                                color="#94BBE9FF"
-                            Другая фраза
+                                @click="reloadPhrase"
-                        </v-btn>
+                                class="ml-10 mr-10 mt-3 mb-3">
-                        <a
+                                Другая фраза
-                            v-if="currentPhrase === phrases[23]"
+                            </v-btn>
-                            href="/download/basya_answer.docx"
+                            <a
-                            class="ma-10">
+                                v-if="currentPhrase === secret"
-                            <v-btn variant="elevated">Инструкция</v-btn>
+                                href="/download/basya_answer.docx"
-                        </a>
+                                class="ml-10 mr-10 mt-3 mb-3">
+                                <v-btn variant="elevated">Инструкция</v-btn>
+                            </a>
+                        </div>
                     </div>
                 </v-card-text>
             </v-card>
@@ -31,49 +34,48 @@
 
 <script>
 import {ref} from 'vue';
+import axios from "axios";
 export default {
     name: "Basya",
     data: () => ({
-        phrases: [
+        secret: 'Для более быстрого результата, можете попробовать самостоятельно исправить ошибку по приложенной инструкции',
-            'Доброе утро. С проблемой боремся.',
+        phrases: ref(),
-            'Авария у провайдера, сроков на данный момент нет, разбираются',
+        fetching: true,
-            'Перегрузите страницу, все должно работать',
+        currentPhrase: ref(),
-            'Доброе утро, смотрим',
+        winWidth: ref(document.documentElement.clientWidth),
-            'Коллеги внимание!!! Сейчас аис не будет работать в течение 10 минут. Вынужденные работы. Просьба предупредить всех',
+        // size: ref(),
-            'Коллеги, пробуйте',
+        isLess: false
-            'Коллеги, проблема массовая, разбираемся',
-            'Попробуйте сейчас',
-            'Коллеги, уточняем по проблеме. Как будет понятно, напишем',
-            'Коллеги, занимаемся проблемой',
-            'По срокам пока сказать не могу',
-            'Добрый день. Разбираемся',
-            'Перепроверьте услуги',
-            'Обновите страницу ctrl+f5',
-            'Коллеги минуту, разбираемся',
-            'скиньте скриншот',
-            'Коллеги, проблема массовая, решается',
-            'Подождите еще',
-            'Коллеги, разбираемся',
-            'Работаем',
-            'Коллеги, проблема массовая. Ожидайте сигнала.',
-            'Сегодня будем плотно разбираться, что происходит. Непонятно пока из-за чего.',
-            'Коллеги, проблема общая. Сейчас решаем вопрос.',
-            'Для более быстрого результата, можете попробовать самостоятельно исправить ошибку по приложенной инструкции'
-        ],
-        currentPhrase: ref()
     }),
     methods: {
         reloadPhrase(){
-            let newPhrase = this.phrases[Math.floor(Math.random() * this.phrases.length)];
+            let newPhrase = this.phrases[Math.floor(Math.random() * this.phrases.length)].phrase;
             if (newPhrase === this.currentPhrase){
                 this.reloadPhrase();
             } else {
                 this.currentPhrase = newPhrase;
             }
+        },
+        onResize(e) {
+            this.winWidth = ref(document.documentElement.clientWidth);
+            console.log(this.winWidth.value);
         }
     },
     mounted() {
-        this.reloadPhrase();
+        axios
+            .get('/api/v1/phrases')
+            .then(response => {
+                this.phrases = response.data;
+                this.reloadPhrase();
+                this.fetching = false;
+            });
+        this.isLess = ref(this.winWidth.value <= 600 ? 'flex-column' : '');
+        /*
+        this.size = this.winWidth <= 600 ?  'x-small' :
+                        this.winWidth > 600 && this.winWidth <= 960 ? 'small' :
+                            this.winWidth > 960 && this.winWidth <= 1280 ? '' :
+                                this.winWidth > 1280 && this.winWidth <= 1920 ? 'large' :
+                                    this.winWidth > 1920 ? 'x-large' : '';
+         */
     }
 }
 </script>
@@ -82,13 +84,7 @@ export default {
 
 .bg-gradient {
     background: rgb(238, 174, 202)!important;
-    background: radial-gradient(circle, rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%)!important;;
+    background: radial-gradient(circle, rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%)!important;
-    /*
-    background: linear-gradient(-45deg, #f103b0, #f0a068, #4fdbfeff);
-    background-size: 200% 200%;
-    animation: gradient 15s ease infinite;
-    height: 100vh;
-    */
 }
 
 .main-sheet-bg {
@@ -103,11 +99,5 @@ export default {
 
 .vertical-center {
     justify-content: center;
-    /* -ms-transform: translate(-50%, -50%);
-    transform: translate(-50%, -50%);
-
-    transform: translateY(-50%);
-    */
 }
-
 </style>

resources/views/resume/About/Education.vue

@@ -1,18 +1,18 @@
 <template>
     <div>
-        <p class="text-h5 pb-3">Образование</p>
+        <p class="text-xl-h3 text-lg-h4 text-md-h4 text-sm-h5 text-h6 pb-3">Образование</p>
-        <v-table class="pb-5 main-sheet-bg">
+        <v-table class="pb-5 main-sheet-bg text-xl-h5 text-lg-h6 text-md-body-1 text-sm-body-1 text-body-2">
             <tbody>
             <tr>
-                <td>2020</td>
+                <td class="pb-2">2020</td>
-                <td>
+                <td class="pb-2">
                     <p>Братский государственный университет, Братск</p>
                     <p>Факультет экономики и управления, Прикладная информатика в экономике (бакалавриат)</p>
                 </td>
             </tr>
             <tr>
-                <td>2024</td>
+                <td class="pt-2 pb-2">2024</td>
-                <td>
+                <td class="pt-2 pb-2">
                     <p>Братский государственный университет, Братск</p>
                     <p>Факультет энергетики и автоматики, Веб технологии и информационный анализ данных (магистратура)</p>
                 </td>

resources/views/resume/About/Experience.vue

@@ -1,15 +1,15 @@
 <template>
     <div>
-        <p class="text-h5 pb-3">Опыт работы</p>
+        <p class="text-xl-h3 text-lg-h4 text-md-h4 text-sm-h5 text-h6 pb-3">Опыт работы</p>
-        <v-table class="pb-5 main-sheet-bg">
+        <v-table class="pb-5 main-sheet-bg text-xl-h5 text-lg-h6 text-md-body-1 text-sm-body-1 text-body-2">
             <tbody>
             <tr>
-                <td>Февраль 2022 — август 2023</td>
+                <td class="pb-2">Февраль 2022 — август 2023</td>
-                <td><p>Муниципальное казенное учреждение «Центр информационно-технического и транспортного обслуживания» муниципального образования города Братска</p></td>
+                <td class="pb-2"><p>Муниципальное казенное учреждение «Центр информационно-технического и транспортного обслуживания» муниципального образования города Братска</p></td>
             </tr>
             <tr>
-                <td>Сентябрь 2023 — по настоящее время</td>
+                <td class="pt-2 pb-2">Сентябрь 2023 — по настоящее время</td>
-                <td>Государственное Автономное Учреждение «Иркутский областной многофункциональный центр предоставления государственных и муниципальных услуг»</td>
+                <td class="pt-2 pb-2">Государственное Автономное Учреждение «Иркутский областной многофункциональный центр предоставления государственных и муниципальных услуг»</td>
             </tr>
             </tbody>
         </v-table>

resources/views/resume/About/Skills.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
-        <p class="text-h5 pb-3">Профессиональные навыки</p>
+        <p class="text-xl-h3 text-md-h4 text-sm-h5 text-h6 pb-3">Профессиональные навыки</p>
-        <p style="text-indent: 1em; text-align: justify" class="pb-5">Хорошо знаю Java, на прошлом месте работы в основном занимался разработкой консольных/десктопных приложений на данном языке
+        <p style="text-indent: 1em; text-align: justify" class="pb-5 text-body-2 text-xl-h5 text-lg-h6 text-md-body-1 text-sm-body-1">Хорошо знаю Java, на прошлом месте работы в основном занимался разработкой консольных/десктопных приложений на данном языке
             (муниципальный сектор). Планирую в ближайшее время изучить Spring Framework. В работе активно использую Git. Из СУБД плотно работаю с
             MySQL, Postgresql. Иногда по работе приходилось писать или дорабатывать небольшие сайты на HTML+CSS+JS (и иногда PHP) и
             дорабатывать веб-приложение на ASP.NET (Жил. фонд). На текущем месте работы занимаюсь разработкой, доработкой и поддержкой сайтов и веб-приложений

resources/views/resume/PersonalInfo.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="d-flex justify-end align-center">
-        <v-table class="main-sheet-bg pl-5" :class="[this.isWide ? 'w-25' : 'w-66']" style="text-align: left">
+        <v-table class="main-sheet-bg text-xl-h6 text-lg-body-1 text-md-body-1 text-sm-body-1 text-caption pl-5" :class="[this.isMore700 ? this.isWide ? 'w-25' : 'w-66' : 'w-100']" style="text-align: left">
             <tbody>
             <tr>
                 <td><v-icon :icon="`mdi-account`"></v-icon>Возраст</td>
@@ -20,7 +20,7 @@
             </tr>
             </tbody>
         </v-table>
-        <div class="w-33">
+        <div v-if="this.isMore700" class="w-33">
             <v-img class="image-gradient" src="./resume.png"></v-img>
         </div>
     </div>
@@ -38,7 +38,8 @@ export default {
         },
         windowHeight: document.documentElement.clientHeight,
         windowWidth: document.documentElement.clientWidth,
-        isWide: window.innerWidth > 1000,
+        isWide: window.innerWidth > 1750,
+        isMore700: window.innerWidth > 700,
         tableClass: 'w-25'
     }),
     created() {
@@ -52,13 +53,18 @@ export default {
         myEventHandler(e) {
             this.windowHeight = document.documentElement.clientHeight;
             this.windowWidth = document.documentElement.clientWidth;
-            if (this.windowWidth < 1000){
+            if (this.windowWidth < 1750){
                 this.isWide = false;
                 this.tableClass = 'w-66';
             } else {
                 this.isWide = true;
                 this.tableClass = 'w-33';
             }
+            if (this.windowWidth < 700){
+                this.isMore700 = false;
+            } else {
+                this.isMore700 = true;
+            }
         }
     }
 }

routes/api_v1.php

@@ -18,3 +18,4 @@
 Route::get('/links', 'App\Http\Controllers\LinksController@index')->name('links');
 Route::get('/schedules', 'App\Http\Controllers\SchedulesController@index')->name('schedules');
 Route::get('/dates', 'App\Http\Controllers\SchedulesController@mmDate')->name('dates');
+Route::get('/phrases', 'App\Http\Controllers\BasyaPhrasesController@index')->name('phrases');