Update Environment page
This commit is contained in:
parent
2bc80f16e6
commit
92bef9fa83
|
|
@ -9,6 +9,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"tailwindcss": "^0.7.3",
|
||||
"tailwindcss-spaced-items": "^0.1.0",
|
||||
"vue": "^2.5.17",
|
||||
"vue-router": "^3.0.2"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
<div class="w-full md:w-1/3 md:block px-4 mb-4" :class="[ active == 'code' ? 'block' : 'hidden' ]">
|
||||
<div class="border border-grey rounded shadow bg-white overflow-hidden">
|
||||
<div class="border-t-4 border-teal">
|
||||
<div class="border-b border-grey-dark">
|
||||
<div class="border-b border-grey">
|
||||
<div class="px-3 py-4">
|
||||
<div class="flex flex-row-reverse">
|
||||
<div class="flex-1">
|
||||
|
|
@ -27,14 +27,14 @@
|
|||
|
||||
<div>
|
||||
<ul class="list-reset flex -ml-px">
|
||||
<li class="w-1/2 flex-1 text-center border-l border-grey-dark">
|
||||
<li class="w-1/2 flex-1 text-center border-l border-grey">
|
||||
<button type="button" class="w-full py-3 text-blue-dark text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-lighter focus:bg-grey-lighter focus:outline-none block">
|
||||
<svg class="h-6 w-6 fill-current mb-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__fork"></use></svg>
|
||||
<span class="block">Deploy</span>
|
||||
</button>
|
||||
</li>
|
||||
|
||||
<li class="w-1/2 flex-1 text-center border-l border-grey-dark">
|
||||
<li class="w-1/2 flex-1 text-center border-l border-grey">
|
||||
<button type="button" class="w-full py-3 text-blue-dark text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-lighter focus:bg-grey-lighter focus:outline-none block">
|
||||
<svg class="h-6 w-6 fill-current mb-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__switch"></use></svg>
|
||||
<span class="block">Switch</span>
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
<div class="w-full md:w-1/3 md:block px-4 mb-4" :class="[ active == 'databases' ? 'block' : 'hidden' ]">
|
||||
<div class="border border-grey rounded shadow bg-white overflow-hidden">
|
||||
<div class="border-t-4 border-teal">
|
||||
<div class="border-b border-grey-dark">
|
||||
<div class="border-b border-grey">
|
||||
<div class="px-3 py-4">
|
||||
<div class="flex flex-row-reverse">
|
||||
<div class="flex-1">
|
||||
|
|
@ -66,21 +66,21 @@
|
|||
|
||||
<div>
|
||||
<ul class="list-reset flex -ml-px">
|
||||
<li class="w-1/2 flex-1 text-center border-l border-grey-dark">
|
||||
<li class="w-1/2 flex-1 text-center border-l border-grey">
|
||||
<button type="button" class="w-full py-3 text-blue-dark text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-lighter focus:bg-grey-lighter focus:outline-none block">
|
||||
<svg class="h-6 w-6 fill-current mb-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg>
|
||||
<span class="block">Copy</span>
|
||||
</button>
|
||||
</li>
|
||||
|
||||
<li class="w-1/2 flex-1 text-center border-l border-grey-dark">
|
||||
<li class="w-1/2 flex-1 text-center border-l border-grey">
|
||||
<button type="button" class="w-full py-3 text-blue-dark text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-lighter focus:bg-grey-lighter focus:outline-none block">
|
||||
<svg class="h-6 w-6 fill-current mb-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__backup"></use></svg>
|
||||
<span class="block">Back up</span>
|
||||
</button>
|
||||
</li>
|
||||
|
||||
<li class="w-1/2 flex-1 text-center border-l border-grey-dark">
|
||||
<li class="w-1/2 flex-1 text-center border-l border-grey">
|
||||
<button
|
||||
type="button"
|
||||
class="w-full py-3 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-lighter focus:bg-grey-lighter focus:outline-none block"
|
||||
|
|
@ -103,7 +103,7 @@
|
|||
<div class="w-full md:w-1/3 md:block px-4 mb-4" :class="[ active == 'files' ? 'block' : 'hidden' ]">
|
||||
<div class="border border-grey rounded shadow bg-white overflow-hidden">
|
||||
<div class="border-t-4 border-teal">
|
||||
<div class="border-b border-grey-dark">
|
||||
<div class="border-b border-grey">
|
||||
<div class="px-3 py-4">
|
||||
<div class="flex flex-row-reverse">
|
||||
<div class="flex-1">
|
||||
|
|
@ -120,7 +120,7 @@
|
|||
|
||||
<div>
|
||||
<ul class="list-reset flex -ml-px">
|
||||
<li class="w-1/2 flex-1 text-center border-l border-grey-dark">
|
||||
<li class="w-1/2 flex-1 text-center border-l border-grey">
|
||||
<button type="button" class="w-full py-3 text-blue-dark text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-lighter focus:bg-grey-lighter focus:outline-none block">
|
||||
<svg class="h-6 w-6 fill-current mb-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg>
|
||||
<span class="block">Copy</span>
|
||||
|
|
|
|||
|
|
@ -54,75 +54,77 @@
|
|||
</a>
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<action-cards :environment="environment" :is-production="isProduction"></action-cards>
|
||||
</div>
|
||||
<div class="spaced-y-10">
|
||||
<div>
|
||||
<action-cards :environment="environment" :is-production="isProduction"></action-cards>
|
||||
</div>
|
||||
|
||||
<div class="mb-6 rounded border border-grey shadow overflow-hidden">
|
||||
<div class="bg-grey-light p-4"><h2 class="text-lg">Site Health</h2></div>
|
||||
<div class="bg-white p-4">
|
||||
<div class="mb-6">
|
||||
<p class="text-lg font-hairline text-grey-darkest">Uptime monitoring</p>
|
||||
</div>
|
||||
<div class="shadow-md overflow-hidden">
|
||||
<div class="bg-white border-b-2 border-grey-light p-3"><h2 class="text-lg">Site Health</h2></div>
|
||||
<div class="bg-white p-4">
|
||||
<div class="mb-6">
|
||||
<p class="text-lg font-hairline text-grey-darkest">Uptime monitoring</p>
|
||||
</div>
|
||||
|
||||
<div class="text-center leading-normal mb-5">
|
||||
<p class="text-grey-darker">
|
||||
Acquia uses a specially tuned uptime monitoring solution to keep track<br class="hidden md:inline">
|
||||
of whether your Drupal site is really up and running.
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-center leading-normal mb-5">
|
||||
<p class="text-grey-darker">
|
||||
Acquia uses a specially tuned uptime monitoring solution to keep track<br class="hidden md:inline">
|
||||
of whether your Drupal site is really up and running.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center">
|
||||
<button type="button" class="text-sm font-thin bg-blue-dark hover:bg-blue-darker antialiased text-white px-4 py-3 no-underline rounded mx-1">Enable Uptime</button>
|
||||
<button type="button" class="text-sm font-thin bg-grey-dark hover:bg-grey-darker antialiased text-white px-4 py-3 no-underline rounded mx-1">Learn more</button>
|
||||
<div class="flex justify-center">
|
||||
<button type="button" class="text-sm font-thin bg-blue-dark hover:bg-blue-darker antialiased text-white px-4 py-3 no-underline rounded mx-1">Enable Uptime</button>
|
||||
<button type="button" class="text-sm font-thin bg-grey-dark hover:bg-grey-darker antialiased text-white px-4 py-3 no-underline rounded mx-1">Learn more</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded border border-grey shadow overflow-hidden">
|
||||
<div class="bg-grey-light p-4"><h2 class="text-lg">Information</h2></div>
|
||||
<div class="bg-white px-4 py-6">
|
||||
<div class="mb-6 relative">
|
||||
<div class="text-xs mb-1">Git URL</div>
|
||||
<div class="border border-grey-dark rounded p-3">{{ gitUrl }}</div>
|
||||
<div class="absolute pin-t pin-r">
|
||||
<button type="button" class="flex items-center text-xs text-blue-dark hover:underline focus:underline">
|
||||
<svg class="h-3 w-3 fill-current mr-1" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg>
|
||||
Copy <span class="visuallyhidden">Git URL to your clipboard</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-6 relative">
|
||||
<div class="text-xs mb-1">SSH URL</div>
|
||||
<div class="border border-grey-dark rounded p-3">{{ sshUrl }}</div>
|
||||
<div class="absolute pin-t pin-r">
|
||||
<button type="button" class="flex items-center text-xs text-blue-dark hover:underline focus:underline">
|
||||
<svg class="h-3 w-3 fill-current mr-1" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg>
|
||||
Copy <span class="visuallyhidden">SSH URL to your clipboard</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap -mx-4 -mb-4 lg:-mb-6">
|
||||
<div class="w-full lg:w-1/2 px-4 mb-4 lg:mb-6">
|
||||
<div class="mb-1 text-xs text-grey-darker">IP Address</div>
|
||||
<div>1.2.3.4</div>
|
||||
<div class="shadow-md overflow-hidden">
|
||||
<div class="bg-white border-b-2 border-grey-light p-3"><h2 class="text-lg">Information</h2></div>
|
||||
<div class="bg-white px-4 py-6">
|
||||
<div class="mb-6 relative">
|
||||
<div class="text-xs mb-1">Git URL</div>
|
||||
<div class="border border-grey-dark rounded p-3">{{ gitUrl }}</div>
|
||||
<div class="absolute pin-t pin-r">
|
||||
<button type="button" class="flex items-center text-xs text-blue-dark hover:underline focus:underline">
|
||||
<svg class="h-3 w-3 fill-current mr-1" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg>
|
||||
Copy <span class="visuallyhidden">Git URL to your clipboard</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full lg:w-1/2 px-4 mb-4 lg:mb-6">
|
||||
<div class="mb-1 text-xs text-grey-darker">Region</div>
|
||||
<div>eu-west-1</div>
|
||||
<div class="mb-6 relative">
|
||||
<div class="text-xs mb-1">SSH URL</div>
|
||||
<div class="border border-grey-dark rounded p-3">{{ sshUrl }}</div>
|
||||
<div class="absolute pin-t pin-r">
|
||||
<button type="button" class="flex items-center text-xs text-blue-dark hover:underline focus:underline">
|
||||
<svg class="h-3 w-3 fill-current mr-1" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg>
|
||||
Copy <span class="visuallyhidden">SSH URL to your clipboard</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full lg:w-1/2 px-4 mb-4 lg:mb-6">
|
||||
<div class="mb-1 text-xs text-grey-darker">PHP version</div>
|
||||
<div>7.1</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap -mx-4 -mb-4 lg:-mb-6">
|
||||
<div class="w-full lg:w-1/2 px-4 mb-4 lg:mb-6">
|
||||
<div class="mb-1 text-xs text-grey-darker">IP Address</div>
|
||||
<div>1.2.3.4</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full lg:w-1/2 px-4 mb-4 lg:mb-6">
|
||||
<div class="mb-1 text-xs text-grey-darker">Live development mode</div>
|
||||
<div>Off</div>
|
||||
<div class="w-full lg:w-1/2 px-4 mb-4 lg:mb-6">
|
||||
<div class="mb-1 text-xs text-grey-darker">Region</div>
|
||||
<div>eu-west-1</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full lg:w-1/2 px-4 mb-4 lg:mb-6">
|
||||
<div class="mb-1 text-xs text-grey-darker">PHP version</div>
|
||||
<div>7.1</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full lg:w-1/2 px-4 mb-4 lg:mb-6">
|
||||
<div class="mb-1 text-xs text-grey-darker">Live development mode</div>
|
||||
<div>Off</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -70,8 +70,13 @@ module.exports = {
|
|||
...defaultConfig.width,
|
||||
'56': '14rem',
|
||||
},
|
||||
shadows: {
|
||||
...defaultConfig.shadows,
|
||||
'md': '0 0 10px 0 rgba(0,0,0,0.1)'
|
||||
},
|
||||
plugins: [
|
||||
require('tailwindcss/plugins/container')(),
|
||||
require('tailwindcss-spaced-items')(),
|
||||
require('tailwindcss-visuallyhidden')(),
|
||||
],
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7243,6 +7243,11 @@ table@^5.0.2:
|
|||
slice-ansi "2.0.0"
|
||||
string-width "^2.1.1"
|
||||
|
||||
tailwindcss-spaced-items@^0.1.0:
|
||||
version "0.1.0"
|
||||
resolved "https://registry.yarnpkg.com/tailwindcss-spaced-items/-/tailwindcss-spaced-items-0.1.0.tgz#e7f381e5c780a034bcdbc38a6a2cfb31f828a020"
|
||||
integrity sha512-YiT1h89fp13r6I+EBM8wS1RWfsTwzHSi4BAnHoTXXQK1GQ53DUCPeFNmiksYSdx2aQLMdp/DTPvErqBVfTALiQ==
|
||||
|
||||
tailwindcss-visuallyhidden@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/tailwindcss-visuallyhidden/-/tailwindcss-visuallyhidden-1.0.1.tgz#ed67ecf6ee48ea0313b5c3c27498467f350be206"
|
||||
|
|
|
|||
Reference in a new issue