grafic desijn is my pashion

This commit is contained in:
Miha Frangež 2024-11-01 01:20:00 +01:00
parent 1c9bff704a
commit 81218eb21a
22 changed files with 195 additions and 442 deletions

View file

@ -1,14 +1,13 @@
<script setup lang="ts">
//import HelloWorld from './components/HelloWorld.vue'
//import TheWelcome from './components/TheWelcome.vue'
import {ref, onMounted } from 'vue'
//import { $mqtt } from 'vue-paho-mqtt'
import Projektor from './Projektor.vue'
import Platno from './Platno.vue'
import MainPage from './MainPage.vue';
import ProjManualPage from './ProjManualPage.vue';
import { ref, onMounted } from 'vue'
import MainPage from './components/pages/MainPage.vue';
import ProjManualPage from './components/pages/ProjManualPage.vue';
import VerticalTabs from './components/tabs/VerticalTabs.vue';
import Tab from './components/tabs/Tab.vue';
const _p1_room = ref('p1')
let urlParams = new URLSearchParams(window.location.search);
const currentRoom = ref(urlParams.get('room') || 'p01')
const pageNum = ref(0) // TODO spremen na 0
@ -18,57 +17,52 @@ const pageNum = ref(0) // TODO spremen na 0
</script>
<template>
<header>
<!-- <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" /> -->
<div id="wrapper">
<header class="sidebar">
<div class="wrapper">
<!-- <HelloWorld msg="You did it!" /> -->
<h2>turbo odličen super mega kontrol panel</h2>
<h3>Predavalnica {{ _p1_room }}</h3>
</div>
<div>
<button @click="pageNum = 0">Page 1</button>
<button @click="pageNum = 1">Page 2</button>
<button @click="pageNum = 2">Page 3</button>
</div>
</header>
<img class="logo" src="https://fri.uni-lj.si/sites/all/themes/fri_theme/images/fri_logo.png" />
<h1>{{ currentRoom.toUpperCase() }}</h1>
<main>
<div v-if="pageNum == 0">
<MainPage />
</div>
<div v-else-if="pageNum == 1">
<ProjManualPage :room="_p1_room" />
</div>
<div v-else-if="pageNum == 2">temp</div>
</main>
<VerticalTabs id="nav">
<Tab @click="pageNum=0" :selected="pageNum==0">Priprava</Tab>
<Tab @click="pageNum=1" :selected="pageNum==1">Video</Tab>
<Tab @click="pageNum=2" :selected="pageNum==2">Zvok</Tab>
<Tab @click="pageNum=3" :selected="pageNum==3">Servis</Tab>
</VerticalTabs>
<small>turbo odličen super mega kontrol panel</small>
</header>
<main>
<MainPage v-if="pageNum == 0" />
<ProjManualPage v-else-if="pageNum == 1" :room="currentRoom" />
</main>
</div>
</template>
<style scoped>
header {
line-height: 1.5;
#wrapper {
width: 100%;
height: 100%;
display: flex;
}
main {
flex: 1;
padding: 1rem;
}
h1 {
text-align: center;
}
.sidebar {
max-width: 20vw;
}
.logo {
display: block;
margin: 0 auto 2rem;
max-width: 100%;
padding: .4rem;
}
@media (min-width: 1024px) {
header {
display: flex;
place-items: center;
padding-right: calc(var(--section-gap) / 2);
}
.logo {
margin: 0 2rem 0 0;
}
header .wrapper {
display: flex;
place-items: flex-start;
flex-wrap: wrap;
}
}
</style>