opdavies/rebuilding-uis
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Re-order classes

Browse source
This commit is contained in:
Oliver Davies 2019-06-27 19:11:44 +01:00
parent 38492073f7
commit 34bcdf6393
20 changed files with 94 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/Environment/ActionCard.vue
View file

@ -5,7 +5,7 @@
<div class="px-3 py-4">
<div class="flex flex-row-reverse">
<div class="flex-1">
<h2 class="text-gray-600 text-base mb-1">{{ title }}</h2>
<h2 class="mb-1 text-gray-600 text-base">{{ title }}</h2>
<div class="text-xs text-gray-600">{{ description }}</div>
</div>

2
src/components/Environment/ActionCardButton.vue
View file

@ -1,5 +1,5 @@
<template>
<button type="button" class="w-full flex flex-col items-center py-3 text-blue-300 text-xs font-bold no-underline hover:underline focus:underline hover:bg-gray-200 focus:bg-gray-200 focus:outline-none block">
<button type="button" class="py-3 w-full flex flex-col items-center text-blue-300 text-xs font-bold no-underline hover:underline focus:underline hover:bg-gray-200 focus:bg-gray-200 focus:outline-none">
<slot></slot>
<span class="block" v-text="label"></span>
</button>

10
src/components/Environment/ActionCards.vue
View file

@ -1,13 +1,13 @@
<template>
<div>
<ul class="flex flex-wrap md:hidden -mx-1 mb-5">
<li class="w-1/3 px-1"><button type="button" class="text-sm text-white w-full py-3 rounded" :class="[ active == 'code' ? 'bg-blue-400' : 'bg-blue-300' ]" @click="active = 'code'">Code</button></li>
<li class="w-1/3 px-1"><button type="button" class="text-sm text-white w-full py-3 rounded" :class="[ active == 'databases' ? 'bg-blue-400' : 'bg-blue-300' ]" @click="active = 'databases'">Databases</button></li>
<li class="w-1/3 px-1"><button type="button" class="text-sm text-white w-full py-3 rounded" :class="[ active == 'files' ? 'bg-blue-400' : 'bg-blue-300' ]" @click="active = 'files'">Files</button></li>
<li class="px-1 w-1/3"><button type="button" class="py-3 w-full text-sm text-white rounded" :class="[ active == 'code' ? 'bg-blue-400' : 'bg-blue-300' ]" @click="active = 'code'">Code</button></li>
<li class="px-1 w-1/3"><button type="button" class="py-3 w-full text-sm text-white rounded" :class="[ active == 'databases' ? 'bg-blue-400' : 'bg-blue-300' ]" @click="active = 'databases'">Databases</button></li>
<li class="px-1 w-1/3"><button type="button" class="py-3 w-full text-sm text-white rounded" :class="[ active == 'files' ? 'bg-blue-400' : 'bg-blue-300' ]" @click="active = 'files'">Files</button></li>
</ul>
<div class="flex flex-wrap -mx-4 -mb-4">
<div class="px-4 mb-4 w-full md:block md:w-1/3" :class="[ active == 'code' ? 'block' : 'hidden' ]">
<div class="-mx-4 -mb-4 flex flex-wrap">
<div class="px-4 mb-4 w-full md:w-1/3 md:block" :class="[ active == 'code' ? 'block' : 'hidden' ]">
<action-card title="Code" :description="`${ environment.name }: ${environment.label}`">
<svg slot="icon" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__code"></use></svg>

4
src/components/Environment/EnvironmentCards.vue
View file

@ -37,8 +37,8 @@
</span>
</button>
<button type="button" class="flex items-center text-white bg-blue-200 hover:bg-blue-400 focus:bg-blue-400 focus:outline-none focus:underline px-1 py-3 text-sm w-full text-left py-1 border-t border-gray-400">
<svg class="h-6 w-5 text-white mr-2 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__grip-handle"></use></svg>
<button type="button" class="px-1 py-3 w-full flex items-center text-white bg-blue-200 text-sm text-left border-t border-gray-400 hover:bg-blue-400 focus:bg-blue-400 focus:outline-none focus:underline">
<svg class="mr-2 h-6 w-5 text-white fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__grip-handle"></use></svg>
Files
</button>
</div>

10
src/components/Environment/QuickHelp.vue
View file

@ -2,21 +2,21 @@
<div class="bg-white border-t-10 border-purple mb-6" :class="[hidden ? 'hidden' : 'block lg:flex']">
<div class="flex-none py-3 pl-3 pr-8 border-b lg:border-r border-gray-200">
<div class="flex items-center">
<svg class="h-6 w-6 mr-1 text-purple fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__info"></use></svg>
<svg class="mr-1 h-6 w-6 text-purple fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__info"></use></svg>
Quick help
</div>
</div>
<div class="p-4">
<div class="block lg:hidden leading-normal -mb-5">
<div class="-mb-5 block leading-normal lg:hidden">
<div v-for="item in items" :key="item.subject">
<p class="text-sm mb-3 font-bold">{{ item.subject }}</p>
<p class="text-sm mb-5">{{ item.text }}</p>
<p class="mb-3 text-sm font-bold">{{ item.subject }}</p>
<p class="mb-5 text-sm">{{ item.text }}</p>
</div>
</div>
<div class="hidden lg:block">
<div class="w-full lg:w-auto lg:flex mb-6">
<div class="mb-6 w-full lg:w-auto lg:flex">
<button
v-for="(item, i) in items"
:key="item.subject"

2
src/components/Environment/TaskLog/TaskLog.vue
View file

@ -1,6 +1,6 @@
<template>
<div>
<div class="bg-gray-300 pb-4 pt-6 px-4">
<div class="pb-4 pt-6 px-4 bg-gray-300">
<h2 class="font-normal text-lg">Task Log</h2>
</div>
<div>

24
src/components/Environment/TaskLog/TaskLogItem.vue
View file

@ -2,13 +2,13 @@
<div>
<div class="px-3 py-4 border-b border-gray-300 flex" :class="{'bg-yellow-lightest': open}">
<div class="flex-none mr-3">
<svg v-if="task.loading" class="h-5 w-5 text-gray-500 fill-current rotates" role="presentation"><use xlink:href="/img/icons.symbol.svg#feedback__loading"></use></svg>
<svg v-if="task.loading" class="rotates h-5 w-5 text-gray-500 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#feedback__loading"></use></svg>
<svg v-if="!task.loading && task.success" class="h-5 w-5 text-green fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#feedback__success-circle"></use></svg>
<svg v-if="!task.loading && !task.success" class="h-5 w-5 text-red fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#feedback__warning"></use></svg>
</div>
<div class="flex-1">
<div class="text-sm font-bold mb-2">{{ task.text }}</div>
<div class="mb-2 text-sm font-bold">{{ task.text }}</div>
<div class="text-gray-600 text-2xs">{{ task.times.display }}</div>
</div>
@ -21,29 +21,29 @@
</div>
<div class="p-4 bg-gray-600 text-white antialiased" v-show="open">
<div class="lg:flex lg:flex-wrap -mx-4 -mb-4">
<div class="-mx-4 -mb-4 lg:flex lg:flex-wrap">
<div class="px-4 mb-4">
<div class="text-xs uppercase mb-1">Task ID</div>
<div class="mb-1 text-xs uppercase">Task ID</div>
<div class="text-sm font-bold">12345678</div>
</div>
<div class="px-4 mb-4 lg:w-1/6 lg:flex-none">
<div class="text-xs uppercase mb-1">User</div>
<div class="text-sm font-bold truncate">{{ task.user }}</div>
<div class="mb-4 px-4 lg:w-1/6 lg:flex-none">
<div class="mb-1 text-xs uppercase">User</div>
<div class="truncate text-sm font-bold">{{ task.user }}</div>
</div>
<div class="px-4 mb-4 lg:w-1/4 lg:flex-none">
<div class="text-xs uppercase mb-1">Started</div>
<div class="text-sm font-bold truncate">{{ task.times.started }}</div>
<div class="mb-1 text-xs uppercase">Started</div>
<div class="truncate text-sm font-bold">{{ task.times.started }}</div>
</div>
<div class="px-4 mb-4 lg:w-1/4 lg:flex-none">
<div class="text-xs uppercase mb-1">Completed</div>
<div class="text-sm font-bold truncate">{{ task.times.completed }}</div>
<div class="mb-1 text-xs uppercase">Completed</div>
<div class="truncate text-sm font-bold">{{ task.times.completed }}</div>
</div>
<div class="px-4 mb-4">
<div class="text-xs uppercase mb-1">Status</div>
<div class="mb-1 text-xs uppercase">Status</div>
<div class="text-sm font-bold">{{ status }}</div>
</div>
</div>

2
src/components/Environment/ToggleHelp.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="hidden lg:block">
<button type="button" class="text-blue-300 text-sm font-hairline flex items-end hover:underline focus:underline focus:outline-none" @click="$emit('toggle')">
<svg class="h-5 w-5 mr-1 text-blue-300 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__info"></use></svg>
<svg class="mr-1 h-5 w-5 text-blue-300 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__info"></use></svg>
{{ hidden ? 'Show quick help' : 'Hide quick help' }}
</button>
</div>