Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found
Select Git revision
  • clickable-select-chevron
  • feat/new-image-formats
  • master
  • 1.2.0
  • 1.4.0
  • 1.4.1
  • 1.4.2
  • 1.5.0
  • 1.5.1
  • 1.5.2
  • 1.5.3
  • 1.5.4
  • 1.5.5
  • 1.6.0
  • 1.6.1
  • 1.6.2
  • 1.6.3
  • 1.6.4
  • 1.7.0
  • 1.8.0
  • 2.0.0
  • 2.0.0-alpha-1
  • 2.0.0-alpha-10
  • 2.0.0-alpha-11
  • 2.0.0-alpha-12
  • 2.0.0-alpha-13
  • 2.0.0-alpha-14
  • 2.0.0-alpha-15
  • 2.0.0-alpha-16
  • 2.0.0-alpha-17
  • 2.0.0-alpha-2
  • 2.0.0-alpha-3
  • 2.0.0-alpha-4
  • 2.0.0-alpha-5
  • 2.0.0-alpha-6
  • 2.0.0-alpha-7
  • 2.0.0-alpha-8
  • 2.0.0-alpha-9
  • 2.0.1
  • 2.0.2
  • 2.0.3
  • 2.0.4
  • 2.1.0
  • 2.1.1
  • 2.1.2
  • 2.10.0
  • 2.11.0
  • 2.12.1
  • 2.13.0
  • 2.14.0
  • 2.15.0
  • 2.16.0
  • 2.16.1
  • 2.17.0
  • 2.18.0
  • 2.19.0
  • 2.2.0
  • 2.2.1
  • 2.20.0
  • 2.3.0
  • 2.3.1
  • 2.3.2
  • 2.3.3
  • 2.3.4
  • 2.4.0
  • 2.5.0
  • 2.5.1
  • 2.5.2
  • 2.6.0
  • 2.7.0
  • 2.7.1
  • 2.8.0
  • 2.9.0
  • 2.9.1
74 results

Target

Select target project
  • to/weby/ui-styleguide
  • va-fighters/ui-styleguide
2 results
Select Git revision
  • master
  • 1.2.0
  • 1.4.0
  • 1.4.1
  • 1.4.2
  • 1.5.0
  • 1.5.1
  • 1.5.2
  • 1.5.3
  • 1.5.4
  • 1.5.5
  • 1.6.0
  • 1.6.1
  • 1.6.2
  • 1.6.3
  • 1.6.4
  • 1.7.0
  • 1.8.0
  • 2.0.0-alpha-1
  • 2.0.0-alpha-10
  • 2.0.0-alpha-11
  • 2.0.0-alpha-2
  • 2.0.0-alpha-3
  • 2.0.0-alpha-4
  • 2.0.0-alpha-5
  • 2.0.0-alpha-6
  • 2.0.0-alpha-7
  • 2.0.0-alpha-8
  • 2.0.0-alpha-9
29 results
Show changes
Showing
with 473 additions and 44 deletions
File mode changed from 100755 to 100644
......@@ -4,6 +4,7 @@
v-bind:views="views"
v-bind:isCurrentView="isCurrentView"
v-bind:toggleView="toggleView"
v-bind:showView="showView"
v-bind:setView="setView"
></slot>
</div>
......@@ -14,11 +15,20 @@ export default {
props: {
initial: {
default: () => {}
},
syncLocation: {
type: Boolean,
default: false,
},
locationParam: {
type: String,
default: "view",
}
},
data() {
return {
views: this.$props.initial,
queryParams: null,
keyListener: e => {
// Esc
if (e.keyCode === 27) {
......@@ -27,21 +37,38 @@ export default {
}
};
},
methods: {
setView(viewId, show) {
this.$data.views[viewId] = show;
},
setViews(updates) {
this.$data.views = {...this.data.views, updates};
watch: {
routeView() {
const queryParams = new URLSearchParams(window.location.search);
}
},
toggleView(viewId) {
methods: {
setView(viewId, show, hideOthers = false) {
if (hideOthers) {
Object.keys(this.$data.views).forEach(key => {
if (key !== viewId) {
this.setView(key, false);
}
});
}
this.$data.views[viewId] = show;
this.setView(viewId, !this.isCurrentView(viewId));
if (show && this.$props.syncLocation) {
const queryParams = new URLSearchParams(window.location.search);
queryParams.set(this.$props.locationParam, viewId);
history.pushState(null, null, "?" + queryParams.toString());
}
},
setViews(updates) {
this.$data.views = Object.assign({}, this.data.views, updates);
},
toggleView(viewId) {
this.setView(viewId, !this.isCurrentView(viewId), true);
},
showView(viewId) {
this.setView(viewId, true, true);
},
isCurrentView(viewId) {
return this.$data.views[viewId];
......@@ -53,7 +80,16 @@ export default {
}
},
mounted() {
window.addEventListener('keydown', this.$data.keyListener);;
window.addEventListener('keydown', this.$data.keyListener);
if (this.$props.syncLocation) {
const queryParams = new URLSearchParams(window.location.search);
const locationView = queryParams.get(this.$props.locationParam);
if (locationView && Object.keys(this.$data.views).indexOf(locationView) !== -1) {
this.showView(locationView);
}
}
},
destroyed() {
window.removeEventListener('keydown', this.$data.keyListener);
......
......@@ -9,17 +9,15 @@
</template>
<script>
import screens from "../../../../screens";
const lgScreenSize = parseInt(screens.lg.replace("px", ""), 10);
import { isLgScreenSize } from "../../utils";
export default {
data() {
return {
isLgScreenSize: this.getWindowWidth() >= lgScreenSize,
isLgScreenSize: isLgScreenSize(),
show: false,
resizeHandler: () => {
this.$data.isLgScreenSize = this.getWindowWidth() >= lgScreenSize;
this.$data.isLgScreenSize = isLgScreenSize();
},
};
},
......@@ -43,9 +41,6 @@ export default {
}
},
methods: {
getWindowWidth() {
return Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
},
handleClick() {
if (this.$props.href) {
window.location = this.$props.href;
......
<script>
import FullCalendar from "@fullcalendar/vue"
import dayGridPlugin from "@fullcalendar/daygrid"
import { showEventData } from './utils'
export default {
components: {
FullCalendar // make the <FullCalendar> tag available
},
props: ["events"],
data() {
return {
calendarOptions: {
plugins: [ dayGridPlugin ],
initialView: "dayGridMonth",
contentHeight: "auto",
locale: "cs",
buttonText: {
today: "dnes"
},
eventTimeFormat: {
hour: 'numeric',
minute: '2-digit',
meridiem: false
},
moreLinkContent: (arg) => { return `+${arg.num} další` },
eventClick (info) {
showEventData(info)
},
events: JSON.parse(this.events)
}
}
}
}
</script>
<template>
<FullCalendar :options="calendarOptions" />
</template>
<script>
import FullCalendar from "@fullcalendar/vue"
import dayGridPlugin from "@fullcalendar/daygrid"
import multiMonthPlugin from "@fullcalendar/multimonth"
import { showEventData } from './utils'
export default {
components: {
FullCalendar // make the <FullCalendar> tag available
},
props: ["events"],
data() {
return {
calendarOptions: {
plugins: [ dayGridPlugin, multiMonthPlugin ],
initialView: "multiMonthYear",
contentHeight: "auto",
locale: "cs",
buttonText: {
today: "dnes"
},
moreLinkContent: (arg) => { return `+${arg.num} další` },
eventClick (info) {
showEventData(info)
},
events: JSON.parse(this.events)
}
}
}
}
</script>
<template>
<FullCalendar :options="calendarOptions" />
</template>
import tippy from 'tippy.js';
const showEventData = (info) => {
if (
info.event.url === ''
&& info.event.extendedProps.location === undefined
&& info.event.extendedProps.url === undefined
) {
return
}
info.jsEvent.preventDefault();
const popup = tippy(
info.el,
{
content: `
<div class="p-2 flex flex-col gap-3 text-white whitespace-nowrap">
${
(info.event.title !== undefined) ?
`
<div class="flex gap-2 items-baseline">
<div>${info.event.title}</div>
</div>
` : ''
}
${
(info.event.extendedProps.location !== undefined) ?
`
<div class="flex gap-2 items-baseline">
<i class="ico--location" aria-label="Místo konání"></i>
<div>${info.event.extendedProps.location}</div>
</div>
` : ''
}
${
(info.event.extendedProps.description !== undefined) ?
`
<div class="flex gap-2 items-baseline">
<i class="ico--info" aria-label="Popis"></i>
<div>${info.event.extendedProps.description}</div>
</div>
` : ''
}
${
(info.event.url !== '') ?
`
<div class="flex gap-2 items-baseline">
<i class="ico--link" aria-label="Adresa"></i>
<a class="underline cursor-pointer" href="${info.event.url}">${info.event.url}</a>
</div>
` : ''
}
</div>
`,
trigger: (
(
info.event.url !== ''
&& info.event.extendedProps.location === undefined
&& info.event.extendedProps.url === undefined
) ?
'hover' : 'click'
),
allowHTML: true,
interactive: true
}
);
popup.show();
}
export { showEventData }
<script>
import UiNavbarSubitem from "./NavbarSubitem";
import screens from "../../../../screens";
const lgScreenSize = parseInt(screens.lg.replace("px", ""), 10);
import UiNavbarSubitemReplacing from "./NavbarSubitemReplacing";
import { isLgScreenSize } from "../../utils";
export default {
components: {
UiNavbarSubitem
UiNavbarSubitem,
UiNavbarSubitemReplacing,
},
data() {
return {
isLgScreenSize: this.getWindowWidth() >= lgScreenSize,
isLgScreenSize: isLgScreenSize(),
show: false,
resizeHandler: () => {
this.$data.isLgScreenSize = this.getWindowWidth() >= lgScreenSize;
this.$data.isLgScreenSize = isLgScreenSize();
},
};
},
methods: {
getWindowWidth() {
return Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
}
},
mounted() {
this.$nextTick(() => {
window.addEventListener("resize", this.$data.resizeHandler);
......
<template>
<div @mouseenter="show = true" @mouseleave="show = false">
<span class="navbar-menu__link navbar-menu__submenu-toggle" :class="{'navbar-menu__submenu-toggle--open': show}" @click="handleClick">{{ label }}</span>
<div @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
<span v-if="!href" class="navbar-menu__link navbar-menu__submenu-toggle" :class="{'navbar-menu__submenu-toggle--open': show}" @click="handleClick">{{ label }}</span>
<a v-if="href" :href="href" class="navbar-menu__link navbar-menu__submenu-toggle" :class="{'navbar-menu__submenu-toggle--open': show}" @click.prevent="handleClick">{{ label }}</a>
<div :class="{'navbar-menu__submenu-wrap--show': show}" class="navbar-menu__submenu-wrap">
<slot>
</slot>
......@@ -10,6 +10,8 @@
</template>
<script>
import { isLgScreenSize } from "../../utils";
export default {
data() {
return {
......@@ -25,10 +27,23 @@ export default {
}
},
methods: {
handleClick() {
onMouseEnter() {
if (isLgScreenSize()) {
this.$data.show = true;
}
},
onMouseLeave() {
if (isLgScreenSize()) {
this.$data.show = false;
}
},
handleClick(evt) {
// On mobile screens, first click should just toggle and redir on second one
if (isLgScreenSize() || this.$data.show) {
if (this.$props.href) {
window.location = this.$props.href;
}
}
this.$data.show = !this.$data.show;
}
......
<template>
<div @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
<span v-if="!href" class="navbar-menu__link navbar-menu__submenu-toggle" :class="{'navbar-menu__submenu-toggle--open': show}" @click="handleClick">{{ label }}</span>
<a v-if="href" :href="href" class="navbar-menu__link navbar-menu__submenu-toggle" :class="{'navbar-menu__submenu-toggle--open': show}" @click.prevent="handleClick">{{ label }}</a>
<div :class="{'navbar-menu__submenu-wrap--show': show}" class="navbar-menu__submenu-wrap">
<ul class="navbar-menu__submenu">
<li v-for="(item, index) in parsedItems" :key="index">
<a :href="item[1]" class="navbar-menu__link">{{ item[0] }}</a>
</li>
</ul>
</div>
</div>
</template>
<script>
import { isLgScreenSize } from "../../utils";
export default {
data() {
return {
show: false,
parsedItems: JSON.parse(this.items),
};
},
props: {
href: {
type: String,
},
label: {
type: String,
},
items: {
type: String,
}
},
methods: {
onMouseEnter() {
if (isLgScreenSize()) {
this.$data.show = true;
}
},
onMouseLeave() {
if (isLgScreenSize()) {
this.$data.show = false;
}
},
handleClick(evt) {
// On mobile screens, first click should just toggle and redir on second one
if (isLgScreenSize() || this.$data.show) {
if (this.$props.href) {
window.location = this.$props.href;
}
}
this.$data.show = !this.$data.show;
}
}
}
</script>
......@@ -4,17 +4,23 @@ import { forEachNode } from "./utils";
import Renderer from "./components/calendar/Renderer";
import DummyProvider from "./components/calendar/DummyProvider";
import GoogleProvider from "./components/calendar/GoogleProvider";
import GoogleProvider from "./components/calendar/GoogleProvider"
import MonthCalendar from "./components/full-calendar/MonthCalendar";
import YearCalendar from "./components/full-calendar/YearCalendar";
import RegionMap from "./components/RegionMap";
import ViewProvider from "./components/ViewProvider";
import Navbar from "./components/navbar/Navbar";
import FooterCollapsible from "./components/footer/FooterCollapsible";
import FlipClock from "./components/FlipClock";
import Chart from 'chart.js/auto';
Vue.component("ui-calendar-renderer", Renderer);
Vue.component("ui-calendar-dummy-provider", DummyProvider);
Vue.component("ui-calendar-google-provider", GoogleProvider);
Vue.component("ui-month-calendar", MonthCalendar);
Vue.component("ui-year-calendar", YearCalendar);
Vue.component("ui-region-map", RegionMap);
Vue.component("ui-view-provider", ViewProvider);
Vue.component("ui-navbar", Navbar);
......@@ -51,9 +57,41 @@ function renderVueAppElement(el) {
}
function renderChart(element) {
const data = [
{ year: 2010, count: 10 },
{ year: 2011, count: 20 },
{ year: 2012, count: 15 },
{ year: 2013, count: 25 },
{ year: 2014, count: 22 },
{ year: 2015, count: 30 },
{ year: 2016, count: 28 },
];
new Chart(
element,
{
type: 'bar',
data: {
labels: data.map(row => row.year),
datasets: [
{
label: 'Firemní akvizice každý rok',
data: data.map(row => row.count)
}
]
}
}
);
}
function init(event) {
// Initialize Vue.js apps.
forEachNode(document.querySelectorAll('.__js-root'), renderVueAppElement)
// Show example charts.
forEachNode(document.querySelectorAll('.__chart-example'), renderChart);
}
document.addEventListener('DOMContentLoaded', init);
import screens from "../../screens";
const lgScreenSize = parseInt(screens.lg.replace("px", ""), 10);
export const forEachNode = function (array, callback, scope) {
for (var i = 0; i < array.length; i++) {
callback.call(scope, array[i]); // passes back stuff we need
}
};
export function getWindowWidth() {
return Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
}
export function isLgScreenSize() {
return getWindowWidth() >= lgScreenSize;
}
......@@ -59,6 +59,10 @@ module.exports = function (options) {
maxWidth: theme('maxWidth.xs'),
textDecoration: 'none',
},
'.btn[disabled]': {
opacity: '0.7',
cursor: 'not-allowed',
},
'.btn:hover': {
textDecoration: 'none',
},
......@@ -106,6 +110,46 @@ module.exports = function (options) {
'.btn--condensed .btn__body': {
padding: '.75em 1em',
},
'@keyframes btn-loading-spinner': {
'to': {
transform: 'rotate(360deg)',
}
},
'.btn--loading': {
position: 'relative',
},
'.btn--loading::before': {
pointerEvents: 'none',
content: "''",
position: 'absolute',
left: '0',
right: '0',
top: '0',
bottom: '0',
zIndex: '2',
backgroundColor: theme('colors.black'),
opacity: '0.4',
},
'.btn--loading::after': {
pointerEvents: 'none',
content: "''",
position: 'absolute',
left: '0',
right: '0',
top: '0',
bottom: '0',
zIndex: '3',
top: '50%',
left: '50%',
width: '1.5rem',
height: '1.5rem',
marginTop: '-0.75rem',
marginLeft: '-0.75rem',
borderRadius: '50%',
border: `3px solid ${theme('colors.cyan.200')}`,
borderLeftColor: 'transparent',
animation: 'btn-loading-spinner 1s linear infinite',
}
},
..._.map(options.colors, (colorOptions, name) => {
const bg = getThemeColor(colorOptions.background, '#000');
......
......@@ -6,11 +6,66 @@ const lighen = (clr, val) => Color(clr).lighten(val).rgb().string();
const darken = (clr, val) => Color(clr).darken(val).rgb().string();
module.exports = {
content: [
"./source/**/*.mustache",
"./source/**/*.json",
"./source/**/*.js",
"./source/**/*.vue",
"./public/**/*.html",
],
options: {
whitelistPatterns: [
/^((sm|md|lg|xl)\:)?(block|inline|fixed|absolute|inline-block|flex|inline-flex|grid)/,
/^((sm|md|lg|xl)\:)?w-\d\d?/,
/^((sm|md|lg|xl)\:)?w-(auto|full|screen)/,
/^((sm|md|lg|xl)\:)?h-\d\d?/,
/^((sm|md|lg|xl)\:)?h-screen/,
/^((sm|md|lg|xl)\:)?-?m.?-\d\d?/,
/^((sm|md|lg|xl)\:)?-?m.?-auto?/,
/^((sm|md|lg|xl)\:)?p.?-\d\d?/,
/^((sm|md|lg|xl)\:)?space-.?-\d\d?/,
/^((sm|md|lg|xl)\:)?hidden/,
/^((sm|md|lg|xl)\:)?block/,
/^((sm|md|lg|xl)\:)?inline-block/,
/^((sm|md|lg|xl)\:)?flex/,
/^((sm|md|lg|xl)\:)?inline-flex/,
/^((sm|md|lg|xl)\:)?grid/,
/^((sm|md|lg|xl)\:)?gap-\d\d?/,
/^((sm|md|lg|xl)\:)?static/,
/^((sm|md|lg|xl)\:)?flex-row-*/,
/^((sm|md|lg|xl)\:)?flex-col-*/,
/^((sm|md|lg|xl)\:)?grid-cols-*/,
/^((sm|md|lg|xl)\:)?col-span-*/,
/^((sm|md|lg|xl)\:)?row-span-*/,
/^((sm|md|lg|xl)\:)?order-*/,
/^((sm|md|lg|xl)\:)?items-*/,
/^((sm|md|lg|xl)\:)?float-*/,
/^((sm|md|lg|xl|hover)\:)?text-*/,
/^((sm|md|lg|xl)\:)?grid-flow-*/,
/^((sm|md|lg|xl)\:)?head-*/,
/^((sm|md|lg|xl)\:)?clearfix/,
/^((sm|md|lg|xl|hover)\:)?elevation-*/,
/^((sm|md|lg|xl|hover)\:)?border(-.*)?/,
/^((sm|md|lg|xl|hover)\:)?bg-opacity-\d\d?/,
/whitespace-*/,
/opacity-*/,
/^truncate/,
/^break-*/,
/^overflow-*/,
/^duration-*/,
/^max-w-*/,
/^max-h-*/,
/ico--*/,
],
},
theme: {
extend: {
maxWidth: {
'xxs': '16rem',
},
height: {
'120': '30rem',
},
opacity: {
'85': '0.85',
},
......@@ -19,12 +74,17 @@ module.exports = {
},
spacing: {
'0/5': '0.125rem',
'14': '3.5rem',
'28': '7rem',
'36': '9rem',
'44': '11rem',
'52': '13rem',
'80': '20rem'
}
'80': '20rem',
},
// flip-x
scale: {
'-1': '-1',
},
},
// Breakpoints
screens,
......@@ -60,6 +120,7 @@ module.exports = {
'black': '#000000',
'white': '#ffffff',
'grey': {
'25': '#fafafa',
'50': '#f7f7f7',
'100': '#f3f3f3',
'125': '#f0f0f0',
......@@ -71,10 +132,22 @@ module.exports = {
'700': '#202020',
'800': '#1f1f1f',
},
'olive': {
'100': '#d6e8b3'
},
'green': {
'100': '#d6e8b3',
'200': '#92c6ab',
'300': darken('#92c6ab', 0.1),
'300': '#76cc9f',
'400': '#4ca971',
},
'yellow': {
'100': '#fff7bf',
'200': '#f7f38a',
'300': '#ffea5a',
'400': '#fde119',
},
'red': {
'600': '#d60d53'
},
'brands': {
'facebook': '#067ceb',
......@@ -106,6 +179,9 @@ module.exports = {
'400': '#840048',
'500': '#670047',
},
'pirati': {
'yellow': '#fec934'
},
},
container: {
center: true,
......@@ -137,7 +213,7 @@ module.exports = {
// options
}
),
require('tailwindcss-typography')({
require('@tailwindcss/typography')({
// all these options default to the values specified here
ellipsis: false, // whether to generate ellipsis utilities
hyphens: false, // whether to generate hyphenation utilities
......@@ -179,11 +255,13 @@ module.exports = {
'grey-125': {
text: 'black',
background: 'grey.125',
hoverText: 'black',
},
'white': {
text: 'black',
background: 'white',
iconBorder: 'grey.100',
hoverText: 'black',
},
'blue-300': {
text: 'white',
......@@ -193,9 +271,13 @@ module.exports = {
text: 'white',
background: 'cyan.200',
},
'green-200': {
'green-300': {
text: 'white',
background: 'green.300',
},
'green-400': {
text: 'white',
background: 'green.200',
background: 'green.400',
},
'orange-300': {
text: 'white',
......@@ -209,6 +291,10 @@ module.exports = {
text: 'white',
background: 'violet.500',
},
'red-600': {
text: 'white',
background: 'red.600',
},
'brands-facebook': {
text: 'white',
background: 'brands.facebook',
......