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

Use more top and left margins

Browse source
This commit is contained in:
Oliver Davies 2019-06-27 21:25:01 +01:00
parent 34bcdf6393
commit af8e6e09cc
7 changed files with 64 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/Application/ApplicationTags.vue
View file

@ -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>

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

@ -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>

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

@ -1,7 +1,6 @@
<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="-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">
@ -45,7 +44,6 @@
</div>
</div>
</div>
</div>
</template>
<script>

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

@ -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>

15
src/views/Applications.vue
View file

@ -34,18 +34,21 @@
</div>
</div>
<div class="-mx-3 -mb-6 flex flex-wrap">
<application-card
<div class="-mt-6 -mx-3 flex flex-wrap">
<div
v-for="application in sortedApplications"
:id="application.id"
:application="application"
:key="application.id"
:display="display"
class="px-3 w-full"
:class="{ 'mb-6 flex flex-col md:w-1/2 lg:w-1/3 xl:w-1/4': display == 'grid' }"
:class="{ 'mt-6 flex flex-col md:w-1/2 lg:w-1/3 xl:w-1/4': display == 'grid' }"
>
<application-card
:application="application"
:display="display"
:id="application.id"
></application-card>
</div>
</div>
</div>
<sidebar :links="[
{ title: 'All', icon: 'alpha__grid', active: true, disabled: false },

8
src/views/Environment.vue
View file

@ -38,21 +38,21 @@
<action-cards :environment="environment" :is-production="isProduction"></action-cards>
</div>
<div class="shadow-md overflow-hidden">
<div class="mt-8 shadow-md overflow-hidden">
<div class="p-3 bg-white border-b-2 border-gray-300"><h2 class="text-lg">Site Health</h2></div>
<div class="p-4 bg-white">
<div class="mb-6">
<div>
<p class="text-lg font-hairline text-gray-700">Uptime monitoring</p>
</div>
<div class="mb-5 text-center leading-normal">
<div class="mt-6 text-center leading-normal">
<p class="text-gray-600">
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">
<div class="mt-5 flex justify-center">
<button type="button" class="btn">Enable Uptime</button>
<button type="button" class="btn is-secondary">Learn more</button>
</div>

4
src/views/Environments.vue
View file

@ -48,10 +48,14 @@
</div>
</div>
<div class="spaced-y-6">
<quick-help :hidden="help.hidden"></quick-help>
<environment-cards :application="application" :id="id"/>
<task-log :tasks="application.tasks" v-if="application.tasks[0]"></task-log>
</div>
</div>
<sidebar :links="[
{ title: 'Environments', icon: 'alpha__grid', active: true, disabled: false },