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
Show whitespace changes
Inline Side-by-side
Showing
with 269 additions and 47 deletions
Graphics Generator v2/package-lock.json
+ 0
− 10
View file @ 49c1c3c1
......@@ -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",
......
Graphics Generator v2/package.json
+ 0
− 1
View file @ 49c1c3c1
......@@ -11,7 +11,6 @@
},
"dependencies": {
"vue": "^3.2.47",
"vue-multiselect": "^3.0.0-beta.2",
"vue-router": "^4.1.6"
},
"devDependencies": {
......
Graphics Generator v2/src/App.vue
+ 0
− 8
View file @ 49c1c3c1
<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 0 → 100644
+ 0
− 0
View file @ 49c1c3c1
Graphics Generator v2/src/assets/todo.png

3.74 KiB

Graphics Generator v2/src/components/Canvas.vue 0 → 100644
+ 18
− 0
View file @ 49c1c3c1
<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>
Graphics Generator v2/src/components/MainContainer.vue 0 → 100644
+ 10
− 0
View file @ 49c1c3c1
<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>
Graphics Generator v2/src/components/Navbar.vue
+ 76
− 17
View file @ 49c1c3c1
<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>
Graphics Generator v2/src/components/inputs/EmojiInput.vue 0 → 100644
+ 19
− 0
View file @ 49c1c3c1
<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>
Graphics Generator v2/src/components/inputs/InputHeading.vue 0 → 100644
+ 20
− 0
View file @ 49c1c3c1
<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>
Graphics Generator v2/src/components/inputs/InputSeparator.vue 0 → 100644
+ 3
− 0
View file @ 49c1c3c1
<template>
<hr class="hr--unstyled my-5 border-t-gray-300">
</template>
Graphics Generator v2/src/components/inputs/LongTextInput.vue 0 → 100644
+ 22
− 0
View file @ 49c1c3c1
<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>
Graphics Generator v2/src/components/inputs/ShortTextInput.vue 0 → 100644
+ 23
− 0
View file @ 49c1c3c1
<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>
Graphics Generator v2/src/components/inputs/SingleImageInput.vue 0 → 100644
+ 23
− 0
View file @ 49c1c3c1
<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>
Graphics Generator v2/src/router/index.js
+ 13
− 8
View file @ 49c1c3c1
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
Graphics Generator v2/src/templates.js 0 → 100644
+ 12
− 0
View file @ 49c1c3c1
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
Graphics Generator v2/src/views/BasicPhotoBanner.vue
+ 30
− 3
View file @ 49c1c3c1
<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% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

Pirátský GitLab - Home of the CopyLeft