Skip to content
Snippets Groups Projects
Commit 49c1c3c1 authored by Tomáš Valenta's avatar Tomáš Valenta
Browse files

WIP base layout

parent 2eb56966
Branches
No related tags found
No related merge requests found
Showing
with 269 additions and 47 deletions
......@@ -9,7 +9,6 @@
"version": "0.0.0",
"dependencies": {
"vue": "^3.2.47",
"vue-multiselect": "^3.0.0-beta.2",
"vue-router": "^4.1.6"
},
"devDependencies": {
......@@ -3523,15 +3522,6 @@
"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
"dev": true
},
"node_modules/vue-multiselect": {
"version": "3.0.0-beta.2",
"resolved": "https://registry.npmjs.org/vue-multiselect/-/vue-multiselect-3.0.0-beta.2.tgz",
"integrity": "sha512-TFVHtI/KdWoD3Opzbkso8OIqkZlZEqFF7f2jlYx1ttgC4Jv/48IGlU5zn6cBR4p2bFDFGCHF5SkLCaadLhnBPQ==",
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
}
},
"node_modules/vue-router": {
"version": "4.1.6",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.1.6.tgz",
......
......@@ -11,7 +11,6 @@
},
"dependencies": {
"vue": "^3.2.47",
"vue-multiselect": "^3.0.0-beta.2",
"vue-router": "^4.1.6"
},
"devDependencies": {
......
<script setup>
import { RouterView } from 'vue-router'
import Navbar from "./components/Navbar.vue";
</script>
<template>
<header>
<Navbar mainName="Generátor grafiky" secondaryName="foobar"></Navbar>
<!--<nav class="bg-">
<RouterLink to="/basic-photo-banner">Základní foto banner</RouterLink>
</nav>-->
</header>
<RouterView />
</template>
......
Graphics Generator v2/src/assets/todo.png

3.74 KiB

<script>
export default {
props: [
'width',
'height',
],
}
</script>
<template>
<div class="object-contain">
<canvas
class="w-full border border-gray-300 drop-shadow-md"
:width="this.width"
:height="this.height"
></canvas>
</div>
</template>
<template>
<div class="container container--default grid grid-cols-3 gap-4 mt-12">
<div class="col-span-2">
<slot name="left"></slot>
</div>
<div class="col-span-1 flex flex-col gap-2">
<slot name="right"></slot>
</div>
</div>
</template>
<script setup>
import { RouterLink } from 'vue-router'
import Multiselect from 'vue-multiselect'
import TEMPLATES from '../templates'
</script>
<script>
export default {
components: { Multiselect },
props: ['mainName'],
props: [
'headerName',
'templateIdentifier',
],
data () {
return {
value: null,
options: ['/basic-photo-banner'],
popoutIsOpen: false,
selectedTemplate: (
(Object.keys(TEMPLATES).includes(this.templateIdentifier)) ?
TEMPLATES[this.templateIdentifier] : null
)
}
},
methods: {
toggleDropdown () {
this.popoutIsOpen = !this.popoutIsOpen
},
setTemplate (identifier) {
this.selectedTemplate = TEMPLATES[identifier];
}
}
}
......@@ -20,26 +33,72 @@ export default {
<nav class="navbar navbar--simple">
<div class="justify-between container container--default navbar__content">
<div class="navbar__brand my-4 flex items-center lg:pr-8 lg:my-0">
<a href="/">
<RouterLink to="/">
<img src="https://styleguide.pirati.cz/2.12.x/images/logo-round-white.svg" class="w-8">
</a>
<a
href="/"
</RouterLink>
<RouterLink
to="/"
class="pl-4 font-bold text-xl hover:no-underline lg:border-r lg:border-grey-300 lg:pr-8"
>
{{ this.mainName }}
</a>
{{ this.headerName }}
</RouterLink>
</div>
<div
class="navbar__actions navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto self-start flex flex-col sm:flex-row lg:flex-col sm:space-x-4 space-y-2 sm:space-y-0 lg:space-y-2 xl:flex-row xl:space-x-2 xl:space-y-0"
>
<Multiselect
v-model="value"
:options="options"
></Multiselect>
<div class="relative">
<button
@click="toggleDropdown"
class="btn btn--icon btn--white btn--hoveractive"
>
<div class="btn__body-wrap">
<div class="btn__body">
<span v-if="selectedTemplate !== null">{{ selectedTemplate.name }}</span>
<span v-else>Vyber šablonu</span>
</div>
<div class="btn__icon">
<i
class="ico--chevron-down"
v-if="!popoutIsOpen"
></i>
<i
class="ico--chevron-up"
v-else
></i>
</div>
</div>
</button>
<ul
class="absolute w-full flex flex-col drop-shadow-md"
v-if="popoutIsOpen"
v-for="[entryIdentifier, entryTemplateData] of Object.entries(TEMPLATES)"
>
<li
class="bg-white py-3 px-8 text-black hover:bg-gray-300 duration-100"
v-bind:class="{
'bg-gray-300': entryIdentifier === templateIdentifier,
'cursor-pointer': entryIdentifier !== templateIdentifier
}"
>
<RouterLink
class="flex gap-2 !no-underline items-center"
:to="(
(entryIdentifier !== templateIdentifier) ?
entryTemplateData.path : '#'
)"
@click="toggleDropdown(); setTemplate(entryIdentifier)"
>
<img
class="w-12 h-12"
:src=entryTemplateData.image
alt="Obrázek šablony"
>
{{ entryTemplateData.name }}
</RouterLink>
</li>
</ul>
</div>
</div>
</div>
</nav>
</template>
<style src="vue-multiselect/dist/vue-multiselect.css"></style>
<script setup>
import InputHeading from "./InputHeading.vue"
</script>
<script>
export default {
components: { InputHeading },
props: ['name', 'important'],
}
</script>
<template>
<section class="flex flex-col gap-2 bg-gray-100 p-4 drop-shadow-md">
<InputHeading
:name="this.name"
:important="this.important"
></InputHeading>
</section>
</template>
<script>
export default {
props: ['name', 'important'],
methods: {
getClass () {
return {
'font-bold text-xl': this.important,
'text-lg': !this.important
}
}
}
}
</script>
<template>
<h2
class="font-condensed"
:class="getClass()"
>{{ this.name }}</h2>
</template>
<template>
<hr class="hr--unstyled my-5 border-t-gray-300">
</template>
<script setup>
import InputHeading from "./InputHeading.vue"
</script>
<script>
export default {
components: { InputHeading },
props: ['name', 'important'],
}
</script>
<template>
<section class="flex flex-col gap-2 bg-gray-100 p-4 drop-shadow-md">
<InputHeading
:name="this.name"
:important="this.important"
></InputHeading>
<textarea
class="p-2 font-condensed bg-gray-200 rounded-sm"
></textarea>
</section>
</template>
<script setup>
import InputHeading from "./InputHeading.vue"
</script>
<script>
export default {
components: { InputHeading },
props: ['name', 'important'],
}
</script>
<template>
<section class="flex flex-col gap-2 bg-gray-100 p-4 drop-shadow-md">
<InputHeading
:name="this.name"
:important="this.important"
></InputHeading>
<input
class="p-2 font-condensed bg-gray-200 rounded-sm"
type="text"
>
</section>
</template>
<script setup>
import InputHeading from "./InputHeading.vue"
</script>
<script>
export default {
components: { InputHeading },
props: ['name', 'important'],
}
</script>
<template>
<section class="flex flex-col gap-2 bg-gray-100 p-4 drop-shadow-md">
<InputHeading
:name="this.name"
:important="this.important"
></InputHeading>
<hr class="hr--unstyled border-t-gray-300">
<input
type="file"
>
</section>
</template>
import { createRouter, createWebHistory } from 'vue-router'
import TEMPLATES from '../templates'
let routes = [];
for (let [identifier, templateData] of Object.entries(TEMPLATES)) {
routes.push({
path: templateData.path,
name: identifier,
component: templateData.component
})
}
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/basic-photo-banner',
name: 'basic-photo-banner',
component: import('../views/BasicPhotoBanner.vue')
}
]
routes: routes
})
export default router
import basicPhotoBannerImage from './assets/todo.png'
const TEMPLATES = {
'basic-photo-banner': {
name: 'Základní banner s fotkou',
image: basicPhotoBannerImage,
path: '/basic-photo-banner',
component: import('./views/BasicPhotoBanner.vue')
},
}
export default TEMPLATES
<script setup>
import Navbar from '../components/Navbar.vue';
import MainContainer from '../components/MainContainer.vue';
import Canvas from '../components/Canvas.vue';
import SingleImageInput from '../components/inputs/SingleImageInput.vue';
import LongTextInput from '../components/inputs/LongTextInput.vue';
import ShortTextInput from '../components/inputs/ShortTextInput.vue';
import EmojiInput from '../components/inputs/EmojiInput.vue';
import InputSeparator from '../components/inputs/InputSeparator.vue'
</script>
<template>
<header>
<Navbar
headerName='Generátor grafiky'
templateIdentifier='basic-photo-banner'
></Navbar>
</header>
<main>
asdf
<MainContainer>
<template v-slot:left>
<Canvas width="2000" height="2000" />
</template>
<template v-slot:right>
<SingleImageInput name="Obrázek" v-bind:important="true" />
<LongTextInput name="Hlavní text" v-bind:important="true" />
<ShortTextInput name="Jméno" v-bind:important="true" />
<EmojiInput name="Reakce 1" v-bind:important="true" />
<InputSeparator />
<ShortTextInput name="Pozice" v-bind:important="false" />
</template>
</MainContainer>
</main>
</template>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment