Use more top and left margins
This commit is contained in:
parent
34bcdf6393
commit
af8e6e09cc
7 changed files with 64 additions and 59 deletions
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<div>
|
||||
<ul class="list-reset -mr-2 -mb-2 flex flex-wrap">
|
||||
<li class="mr-2 mb-2 py-1 px-2 text-2xs rounded uppercase border" :class="typeClasses" v-text="applicationTypeName"/>
|
||||
<li class="mr-2 mb-2 py-1 px-2 text-2xs rounded uppercase border border-gray-400 bg-white">{{ application.level }}</li>
|
||||
<ul class="list-reset -ml-2 flex flex-wrap">
|
||||
<li class="ml-2 py-1 px-2 text-2xs rounded uppercase border" :class="typeClasses" v-text="applicationTypeName"/>
|
||||
<li class="ml-2 py-1 px-2 text-2xs rounded uppercase border border-gray-400 bg-white">{{ application.level }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@
|
|||
<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="-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' ]">
|
||||
<div class="-mx-4 flex flex-wrap">
|
||||
<div class="px-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>
|
||||
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
</action-card>
|
||||
</div>
|
||||
|
||||
<div class="px-4 mb-4 w-full md:block md:w-1/3" :class="[ active == 'databases' ? 'block' : 'hidden' ]">
|
||||
<div class="px-4 w-full md:block md:w-1/3" :class="[ active == 'databases' ? 'block' : 'hidden' ]">
|
||||
<action-card title="Databases" :description="environment.name">
|
||||
<svg slot="icon" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__database"></use></svg>
|
||||
|
||||
|
|
@ -56,7 +56,7 @@
|
|||
</action-card>
|
||||
</div>
|
||||
|
||||
<div class="px-4 mb-4 w-full md:block md:w-1/3" :class="[ active == 'files' ? 'block' : 'hidden' ]">
|
||||
<div class="px-4 w-full md:block md:w-1/3" :class="[ active == 'files' ? 'block' : 'hidden' ]">
|
||||
<action-card title="Files" :description="environment.name">
|
||||
<svg slot="icon" class="h-8 w-8 fill-current text-teal" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__environment"></use></svg>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,47 +1,45 @@
|
|||
<template>
|
||||
<div class="mb-6">
|
||||
<div class="flex flex-wrap -mx-4 -mb-6">
|
||||
<div v-for="(environment, key) in application.environments" class="w-full md:w-1/2 xl:w-1/3 px-4 mb-6" :key="key">
|
||||
<div class="border border-gray-400 rounded overflow-hidden shadow">
|
||||
<div class="bg-white">
|
||||
<div class="border-t-4 border-teal p-3">
|
||||
<router-link :to="{ name: 'environment', params: { environmentName: key, id: id }}" class="flex items-baseline no-underline hover:underline focus:underline text-gray-600 hover:text-blue-300 focus:text-blue-300 focus:outline-none mb-1">
|
||||
<h2>{{ environment.name }}</h2>
|
||||
<svg class="w-4 h-4 fill-current text-inherit ml-2" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z" fill-rule="evenodd"/></svg>
|
||||
</router-link>
|
||||
<div class="-mx-4 flex flex-wrap">
|
||||
<div v-for="(environment, key) in application.environments" class="w-full md:w-1/2 xl:w-1/3 px-4" :key="key">
|
||||
<div class="border border-gray-400 rounded overflow-hidden shadow">
|
||||
<div class="bg-white">
|
||||
<div class="border-t-4 border-teal p-3">
|
||||
<router-link :to="{ name: 'environment', params: { environmentName: key, id: id }}" class="flex items-baseline no-underline hover:underline focus:underline text-gray-600 hover:text-blue-300 focus:text-blue-300 focus:outline-none mb-1">
|
||||
<h2>{{ environment.name }}</h2>
|
||||
<svg class="w-4 h-4 fill-current text-inherit ml-2" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z" fill-rule="evenodd"/></svg>
|
||||
</router-link>
|
||||
|
||||
<div class="mb-2">
|
||||
<a href="#0" class="no-underline hover:underline focus:underline text-gray-600 hover:text-blue-300 focus:text-blue-300 focus:outline-none">
|
||||
{{ environment.url }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="text-gray-600">{{ environment.label }}</div>
|
||||
<div class="mb-2">
|
||||
<a href="#0" class="no-underline hover:underline focus:underline text-gray-600 hover:text-blue-300 focus:text-blue-300 focus:outline-none">
|
||||
{{ environment.url }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="text-gray-600">{{ environment.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button type="button" class="flex items-center justify-between text-white pl-1 bg-blue-200 hover:bg-blue-400 focus:bg-blue-400 focus:outline-none focus:underline text-sm w-full text-left py-1">
|
||||
<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>
|
||||
<span class="flex-1">Code</span>
|
||||
<span class="border-l border-gray-400 p-2">
|
||||
<svg class="h-6 w-6 text-white fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__switch"></use></svg>
|
||||
</span>
|
||||
</button>
|
||||
<div>
|
||||
<button type="button" class="flex items-center justify-between text-white pl-1 bg-blue-200 hover:bg-blue-400 focus:bg-blue-400 focus:outline-none focus:underline text-sm w-full text-left py-1">
|
||||
<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>
|
||||
<span class="flex-1">Code</span>
|
||||
<span class="border-l border-gray-400 p-2">
|
||||
<svg class="h-6 w-6 text-white fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__switch"></use></svg>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button type="button" class="flex items-center justify-between text-white pl-1 bg-blue-200 hover:bg-blue-400 focus:bg-blue-400 focus:outline-none focus:underline 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>
|
||||
<span class="flex-1">Databases</span>
|
||||
<span class="border-l border-gray-400 p-2">
|
||||
<svg class="h-6 w-6 text-white fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__backup"></use></svg>
|
||||
</span>
|
||||
</button>
|
||||
<button type="button" class="flex items-center justify-between text-white pl-1 bg-blue-200 hover:bg-blue-400 focus:bg-blue-400 focus:outline-none focus:underline 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>
|
||||
<span class="flex-1">Databases</span>
|
||||
<span class="border-l border-gray-400 p-2">
|
||||
<svg class="h-6 w-6 text-white fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__backup"></use></svg>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="bg-white border-t-10 border-purple mb-6" :class="[hidden ? 'hidden' : 'block lg:flex']">
|
||||
<div class="bg-white border-t-10 border-purple" :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="mr-1 h-6 w-6 text-purple fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__info"></use></svg>
|
||||
|
|
|
|||
Reference in a new issue