Merge branch 'next'
This commit is contained in:
commit
7870c314da
|
|
@ -9,6 +9,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"tailwindcss": "^0.7.3",
|
||||
"tailwindcss-spaced-items": "^0.1.0",
|
||||
"vue": "^2.5.17",
|
||||
"vue-router": "^3.0.2"
|
||||
},
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 313 KiB After Width: | Height: | Size: 327 KiB |
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
<template>
|
||||
<div class="w-auto lg:w-64 bg-grey-darkest text-white antialiased fixed pin-l h-full overflow-y-scroll">
|
||||
<div class="w-auto lg:w-56 bg-grey-light text-grey-darker antialiased fixed pin-l h-full overflow-y-scroll">
|
||||
<div>
|
||||
<ul class="list-reset">
|
||||
<li v-for="link in links" :key="link.title" class="border-b border-grey-darkest">
|
||||
<li v-for="link in links" :key="link.title">
|
||||
<a
|
||||
href="#0"
|
||||
class="flex items-center no-underline hover:underline focus:underline border-l-6 px-4 py-5"
|
||||
class="flex items-center no-underline focus:underline px-4 py-2 text-sm"
|
||||
:class="{
|
||||
'border-blue bg-grey-darker': link.active,
|
||||
'border-transparent hover:bg-grey-darker': !link.active,
|
||||
'text-grey cursor-not-allowed': link.disabled,
|
||||
'text-white': !link.disabled,
|
||||
'bg-grey-darker text-white': link.active,
|
||||
'border-transparent hover:bg-grey hover:text-blue-dark': !link.active,
|
||||
'text-grey-dark cursor-not-allowed': link.disabled,
|
||||
'text-grey-darker': !link.disabled,
|
||||
}"
|
||||
>
|
||||
<svg class="h-6 w-6 fill-current" role="presentation"><use :xlink:href="`/img/icons.symbol.svg#${link.icon}`"></use></svg>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
<template>
|
||||
<div class="bg-grey-lighter px-4 lg:px-6 py-5 border-b-2 border-grey flex justify-between items-center">
|
||||
<div class="w-full md:w-auto flex flex-col">
|
||||
<slot name="left"></slot>
|
||||
</div>
|
||||
<div class="border-b-3 border-grey-light">
|
||||
<div class="bg-white px-4 lg:px-6 py-5 border-t border-grey-lighter flex justify-between items-center">
|
||||
<div class="w-full md:w-auto flex flex-col">
|
||||
<slot name="left"></slot>
|
||||
</div>
|
||||
|
||||
<slot name="right"></slot>
|
||||
<slot name="right"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -17,12 +17,12 @@
|
|||
</div>
|
||||
|
||||
<div class="mt-48">
|
||||
<div class="-mt-10 md:-mt-4 flex flex-row-reverse h-full">
|
||||
<div class="flex-1 p-4 lg:p-12 ml-16 lg:ml-64 overflow-x-hidden">
|
||||
<div class="-mt-10 md:-mt-3 flex flex-row-reverse h-full">
|
||||
<div class="flex-1 p-4 lg:p-12 ml-16 lg:ml-56 overflow-x-hidden">
|
||||
<div class="mb-6">
|
||||
<div class="lg:flex lg:items-baseline mb-12">
|
||||
<div class="mr-16 mb-4 lg:mb-0">
|
||||
<h1 class="text-4xl font-hairline mb-2">Applications</h1>
|
||||
<h1 class="text-4xl font-thin mb-2">Applications</h1>
|
||||
</div>
|
||||
|
||||
<application-display-switcher class="hidden lg:flex-1 lg:flex lg:justify-end mr-3" :mode="display" @display-changed="handleDisplay"></application-display-switcher>
|
||||
|
|
|
|||
|
|
@ -38,11 +38,11 @@
|
|||
</div>
|
||||
|
||||
<div class="mt-48">
|
||||
<div class="-mt-4 md:-mt-2 flex flex-row-reverse h-full">
|
||||
<div class="flex-1 p-4 lg:p-12 ml-16 lg:ml-64 overflow-x-hidden">
|
||||
<div class="-mt-3 md:-mt-1 flex flex-row-reverse h-full">
|
||||
<div class="flex-1 p-4 lg:p-12 ml-16 lg:ml-56 overflow-x-hidden">
|
||||
<div>
|
||||
<div>
|
||||
<h1 class="font-hairline mb-2">Overview</h1>
|
||||
<h1 class="text-4xl font-thin mb-2">Overview</h1>
|
||||
|
||||
<application-tags :type="application.type" :level="application.level"></application-tags>
|
||||
</div>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -33,12 +33,12 @@
|
|||
</div>
|
||||
|
||||
<div class="mt-48">
|
||||
<div class="-mt-4 md:-mt-2 flex flex-row-reverse h-full">
|
||||
<div class="flex-1 p-4 lg:p-12 ml-16 lg:ml-64 overflow-x-hidden">
|
||||
<div class="-mt-3 md:-mt-1 flex flex-row-reverse h-full">
|
||||
<div class="flex-1 p-4 lg:p-12 ml-16 lg:ml-56 overflow-x-hidden">
|
||||
<div class="mb-6">
|
||||
<div class="lg:flex lg:items-baseline mb-2">
|
||||
<div class="mr-16 mb-4 lg:mb-0">
|
||||
<h1 class="text-4xl font-hairline mb-2">Environments</h1>
|
||||
<h1 class="text-4xl font-thin mb-2">Environments</h1>
|
||||
|
||||
<application-tags :type="application.type" :level="application.level"></application-tags>
|
||||
</div>
|
||||
|
|
|
|||
13
tailwind.js
13
tailwind.js
|
|
@ -11,7 +11,7 @@ var colors = {
|
|||
'green': '#398002',
|
||||
'grey': '#B7B7B7',
|
||||
'grey-dark': '#888888',
|
||||
'grey-darker': '#444444',
|
||||
'grey-darker': '#555555',
|
||||
'grey-darkest': '#333333',
|
||||
'grey-light': '#DDDDDD',
|
||||
'grey-lighter': '#eeeeee',
|
||||
|
|
@ -56,16 +56,27 @@ module.exports = {
|
|||
},
|
||||
borderWidths: {
|
||||
...defaultConfig.borderWidths,
|
||||
'3': '3px',
|
||||
'6': '6px',
|
||||
'10': '10px',
|
||||
},
|
||||
margin: {
|
||||
...defaultConfig.margin,
|
||||
'48': '10rem',
|
||||
'56': '14rem',
|
||||
'64': '16rem',
|
||||
},
|
||||
width: {
|
||||
...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