Browse Source

Replace spaces with tabs

pull/2/head
Ambrose Chua 3 years ago
parent
commit
7d7146dde9
  1. 16
      src/App.vue
  2. 2
      src/components/BlobSize.vue
  3. 14
      src/components/Error.vue
  4. 52
      src/components/Layout.vue
  5. 20
      src/components/List.vue
  6. 28
      src/components/ListHeader.vue
  7. 30
      src/components/ListItem.vue
  8. 46
      src/components/LoadableText.vue
  9. 18
      src/components/Paginator.vue
  10. 2
      src/components/TagSize.vue
  11. 2
      src/components/ToolbarButton.vue
  12. 28
      src/views/Blob.vue
  13. 55
      src/views/Repo.vue
  14. 44
      src/views/Repos.vue
  15. 100
      src/views/Tag.vue

16
src/App.vue

@ -1,24 +1,24 @@
<template>
<router-view/>
<router-view/>
</template>
<style>
*, *::before, *::after {
box-sizing: border-box;
box-sizing: border-box;
}
html, body {
padding: 0;
margin: 0;
padding: 0;
margin: 0;
}
html {
font-size: 16px;
font-size: 16px;
}
body {
font-size: 1rem;
font-size: 1rem;
font-family: 'Source Sans Pro';
font-family: 'Source Sans Pro';
}
pre, code, kbd, samp {
font-family: 'Source Code Pro';
font-family: 'Source Code Pro';
}
</style>

2
src/components/BlobSize.vue

@ -1,5 +1,5 @@
<template>
<LoadableText :text="text" />
<LoadableText :text="text" />
</template>
<script>

14
src/components/Error.vue

@ -1,5 +1,5 @@
<template>
<div v-if="message">{{ message }}</div>
<div v-if="message">{{ message }}</div>
</template>
<script>
@ -12,11 +12,11 @@ export default {
<style scoped>
div {
text-align: center;
background: #fdd;
color: #800;
padding: 0.5rem 0.75rem;
margin: 1rem;
border-radius: 0.5rem;
text-align: center;
background: #fdd;
color: #800;
padding: 0.5rem 0.75rem;
margin: 1rem;
border-radius: 0.5rem;
}
</style>

52
src/components/Layout.vue

@ -1,23 +1,23 @@
<template>
<div class="wrapper">
<header>
<slot name="title" />
<slot name="error" />
<slot name="toolbar" />
</header>
<main>
<div class="content">
<slot />
</div>
</main>
<footer>
<p>
<a :href="source">dri</a>
{{ version }}
by <a href="https://github.com/serverwentdown">@serverwentdown</a>
</p>
</footer>
</div>
<div class="wrapper">
<header>
<slot name="title" />
<slot name="error" />
<slot name="toolbar" />
</header>
<main>
<div class="content">
<slot />
</div>
</main>
<footer>
<p>
<a :href="source">dri</a>
{{ version }}
by <a href="https://github.com/serverwentdown">@serverwentdown</a>
</p>
</footer>
</div>
</template>
<script>
@ -35,20 +35,20 @@ export default {
<style scoped>
header, footer, main {
margin: 0 auto;
margin: 0 auto;
}
header, footer, .content {
padding: 1rem;
padding: 1rem;
}
.content {
width: fit-content;}
header, footer {
max-width: 38rem;
text-align: center;
max-width: 38rem;
text-align: center;
}
main {
width: fit-content;
max-width: 100%;
overflow-x: auto;
width: fit-content;
max-width: 100%;
overflow-x: auto;
}
</style>

20
src/components/List.vue

@ -1,17 +1,17 @@
<template>
<table>
<thead>
<slot name="header" />
</thead>
<tbody>
<slot />
</tbody>
</table>
<table>
<thead>
<slot name="header" />
</thead>
<tbody>
<slot />
</tbody>
</table>
</template>
<style scoped>
table {
min-width: 28rem;
border-spacing: 0;
min-width: 28rem;
border-spacing: 0;
}
</style>

28
src/components/ListHeader.vue

@ -1,23 +1,23 @@
<template>
<tr>
<th class="col title"><slot name="title" /></th>
<th class="col detail" v-if="$slots.detail"><slot name="detail" /></th>
<th class="col date" v-if="$slots.date"><slot name="date" /></th>
<th class="col size" v-if="$slots.size"><slot name="size" /></th>
<th class="col buttons" v-if="$slots.buttons"><slot name="buttons" /></th>
</tr>
<tr>
<th class="col title"><slot name="title" /></th>
<th class="col detail" v-if="$slots.detail"><slot name="detail" /></th>
<th class="col date" v-if="$slots.date"><slot name="date" /></th>
<th class="col size" v-if="$slots.size"><slot name="size" /></th>
<th class="col buttons" v-if="$slots.buttons"><slot name="buttons" /></th>
</tr>
</template>
<style scoped>
th {
padding: 0.5rem;
white-space: nowrap;
font-size: 0.8em;
text-align: left;
border-bottom: 1px solid #eee;
text-align: right;
padding: 0.5rem;
white-space: nowrap;
font-size: 0.8em;
text-align: left;
border-bottom: 1px solid #eee;
text-align: right;
}
.title {
text-align: left;
text-align: left;
}
</style>

30
src/components/ListItem.vue

@ -1,11 +1,11 @@
<template>
<router-link tag="tr" :to="to || {}">
<td class="col title"><slot name="title" /></td>
<td class="col detail" v-if="$slots.detail"><slot name="detail" /></td>
<td class="col date" v-if="$slots.date"><slot name="date" /></td>
<td class="col size" v-if="$slots.size"><slot name="size" /></td>
<td class="col buttons" v-if="$slots.buttons"><slot name="buttons" /></td>
</router-link>
<router-link tag="tr" :to="to || {}">
<td class="col title"><slot name="title" /></td>
<td class="col detail" v-if="$slots.detail"><slot name="detail" /></td>
<td class="col date" v-if="$slots.date"><slot name="date" /></td>
<td class="col size" v-if="$slots.size"><slot name="size" /></td>
<td class="col buttons" v-if="$slots.buttons"><slot name="buttons" /></td>
</router-link>
</template>
<script>
@ -18,19 +18,19 @@ export default {
<style scoped>
tr:hover {
background: #f4f4f4;
background: #f4f4f4;
}
td {
padding: 0.5rem 0.75rem;
white-space: nowrap;
border-bottom: 1px solid #eee;
border-bottom-width: 0.5px;
text-align: right;
padding: 0.5rem 0.75rem;
white-space: nowrap;
border-bottom: 1px solid #eee;
border-bottom-width: 0.5px;
text-align: right;
}
.title {
text-align: left;
text-align: left;
}
.detail {
font-size: 0.8em;
font-size: 0.8em;
}
</style>

46
src/components/LoadableText.vue

@ -1,5 +1,5 @@
<template>
<span :class="{ loading: !text }">{{ text }}<span /><span /><span /></span>
<span :class="{ loading: !text }">{{ text }}<span /><span /><span /></span>
</template>
<script>
@ -12,35 +12,35 @@ export default {
<style scoped>
span.loading > span {
display: inline-block;
background: #000;
border-radius: 0.09375em;
width: 0.1875em;
height: 0.1875em;
margin: 0.25em 0.075em;
opacity: 0.5;
display: inline-block;
background: #000;
border-radius: 0.09375em;
width: 0.1875em;
height: 0.1875em;
margin: 0.25em 0.075em;
opacity: 0.5;
}
span.loading > span:nth-child(1) {
animation: fade 1s ease 0s infinite;
animation: fade 1s ease 0s infinite;
}
span.loading > span:nth-child(2) {
animation: fade 1s ease 0.333s infinite;
animation: fade 1s ease 0.333s infinite;
}
span.loading > span:nth-child(3) {
animation: fade 1s ease 0.666s infinite;
animation: fade 1s ease 0.666s infinite;
}
@keyframes fade {
0% {
opacity: 1;
}
33.3% {
opacity: 0.25;
}
66.6% {
opacity: 0.25;
}
100% {
opacity: 1;
}
0% {
opacity: 1;
}
33.3% {
opacity: 0.25;
}
66.6% {
opacity: 0.25;
}
100% {
opacity: 1;
}
}
</style>

18
src/components/Paginator.vue

@ -1,8 +1,8 @@
<template>
<div>
<!-- <span class="prev" @click="prev">Previous</span> -->
<span class="next" @click="next" v-if="nextLast">Next</span>
</div>
<div>
<!-- <span class="prev" @click="prev">Previous</span> -->
<span class="next" @click="next" v-if="nextLast">Next</span>
</div>
</template>
<script>
@ -23,12 +23,12 @@ export default {
<style scoped>
div {
display: flex;
justify-content: space-between;
padding-top: 0.75rem;
display: flex;
justify-content: space-between;
padding-top: 0.75rem;
}
div > span {
padding: 0.75rem;
color: #008;
padding: 0.75rem;
color: #008;
}
</style>

2
src/components/TagSize.vue

@ -1,5 +1,5 @@
<template>
<LoadableText :text="text" />
<LoadableText :text="text" />
</template>
<script>

2
src/components/ToolbarButton.vue

@ -19,7 +19,7 @@ button {
outline: none;
border-radius: 0.5rem;
background: #66f;
padding: 0.5rem 0.75rem;
padding: 0.5rem 0.75rem;
color: #fff;
tap-highlight-color: transparent;
}

28
src/views/Blob.vue

@ -1,19 +1,19 @@
<template>
<Layout>
<h1 slot="title">{{ $route.params.repo }}</h1>
<Layout>
<h1 slot="title">{{ $route.params.repo }}</h1>
<Error slot="error" :message='error' />
<h2>Details</h2>
<List>
<ListItem>
<span slot="title">Full Digest</span>
<span slot="detail">{{ $route.params.digest }}</span>
</ListItem>
<ListItem>
<span slot="title">Size</span>
<BlobSize slot="detail" :repo="$route.params.repo" :blob="$route.params.digest" />
</ListItem>
</List>
</Layout>
<h2>Details</h2>
<List>
<ListItem>
<span slot="title">Full Digest</span>
<span slot="detail">{{ $route.params.digest }}</span>
</ListItem>
<ListItem>
<span slot="title">Size</span>
<BlobSize slot="detail" :repo="$route.params.repo" :blob="$route.params.digest" />
</ListItem>
</List>
</Layout>
</template>
<script>

55
src/views/Repo.vue

@ -1,35 +1,35 @@
<template>
<Layout>
<h1 slot="title">{{ $route.params.repo }}</h1>
<Error slot="error" :message='error' />
<Layout>
<h1 slot="title">{{ $route.params.repo }}</h1>
<Error slot="error" :message='error' />
<Toolbar slot="toolbar">
<ToolbarButton v-if="repoCanDelete" @click="deleteRepo" danger>Delete</ToolbarButton>
<ToolbarButton v-if="repoCanDelete" @click="deleteRepo" danger>Delete</ToolbarButton>
</Toolbar>
<List>
<ListHeader slot="header">
<span slot="title">Tag</span>
<span slot="detail">Pull Commmand</span>
<span slot="date">Created</span>
<span slot="size">Size</span>
</ListHeader>
<ListItem
v-for="(tag, i) in tags"
:key="tag"
:to="{ name: 'tag', params: { tag, }}">
<span slot="title">
{{ tag }}
</span>
<span slot="detail">
<code>docker pull {{ registryHost }}/{{ $route.params.repo }}:{{ tag }}</code>
</span>
<time slot="date" :datetime="dates[i]">
<List>
<ListHeader slot="header">
<span slot="title">Tag</span>
<span slot="detail">Pull Commmand</span>
<span slot="date">Created</span>
<span slot="size">Size</span>
</ListHeader>
<ListItem
v-for="(tag, i) in tags"
:key="tag"
:to="{ name: 'tag', params: { tag, }}">
<span slot="title">
{{ tag }}
</span>
<span slot="detail">
<code>docker pull {{ registryHost }}/{{ $route.params.repo }}:{{ tag }}</code>
</span>
<time slot="date" :datetime="dates[i]">
{{ dates[i].toLocaleString() }}
</time>
<TagSize slot="size" :repo="$route.params.repo" :tag="tag" />
</ListItem>
</List>
<Paginator :nextLast="nextLast" />
</Layout>
<TagSize slot="size" :repo="$route.params.repo" :tag="tag" />
</ListItem>
</List>
<Paginator :nextLast="nextLast" />
</Layout>
</template>
<script>
@ -74,6 +74,7 @@ export default {
},
methods: {
async deleteRepo() {
// eslint-disable-next-line no-alert
if (!window.confirm(`Are you sure you want to delete ${this.$route.params.repo}?`)) {
return;
}

44
src/views/Repos.vue

@ -1,26 +1,26 @@
<template>
<Layout>
<h1 slot="title">Repositories</h1>
<Error slot="error" :message='error' />
<List>
<ListHeader slot="header">
<span slot="title">Repository</span>
<span slot="detail">Pull Commmand</span>
</ListHeader>
<ListItem
v-for="repo in repos"
:key="repo"
:to="{ name: 'repo', params: { repo, }}">
<span slot="title">
{{ repo }}
</span>
<span slot="detail">
<code>docker pull {{ registryHost }}/{{ repo }}</code>
</span>
</ListItem>
</List>
<Paginator :nextLast="nextLast" />
</Layout>
<Layout>
<h1 slot="title">Repositories</h1>
<Error slot="error" :message='error' />
<List>
<ListHeader slot="header">
<span slot="title">Repository</span>
<span slot="detail">Pull Commmand</span>
</ListHeader>
<ListItem
v-for="repo in repos"
:key="repo"
:to="{ name: 'repo', params: { repo, }}">
<span slot="title">
{{ repo }}
</span>
<span slot="detail">
<code>docker pull {{ registryHost }}/{{ repo }}</code>
</span>
</ListItem>
</List>
<Paginator :nextLast="nextLast" />
</Layout>
</template>
<script>

100
src/views/Tag.vue

@ -1,36 +1,37 @@
<template>
<Layout>
<h1 slot="title">{{ $route.params.repo }}:{{ $route.params.tag }}</h1>
<Error slot="error" :message='error' />
<Layout>
<h1 slot="title">{{ $route.params.repo }}:{{ $route.params.tag }}</h1>
<Error slot="error" :message='error' />
<Toolbar slot="toolbar">
<ToolbarButton v-if="tagCanDelete" @click="deleteTag" danger>Delete</ToolbarButton> </Toolbar>
<h2>Details</h2>
<List>
<ListItem>
<span slot="title">Schema Version</span>
<span slot="detail">{{ tag.schemaVersion }}</span>
</ListItem>
<ListItem>
<ToolbarButton v-if="tagCanDelete" @click="deleteTag" danger>Delete</ToolbarButton>
</Toolbar>
<h2>Details</h2>
<List>
<ListItem>
<span slot="title">Schema Version</span>
<span slot="detail">{{ tag.schemaVersion }}</span>
</ListItem>
<ListItem>
<span slot="title">Full Digest</span>
<span slot="detail">{{ tag.headers.get('Docker-Content-Digest') }}</span>
</ListItem>
<ListItem>
<span slot="detail">{{ tag.headers.get('Docker-Content-Digest') }}</span>
</ListItem>
<ListItem>
<span slot="title">Date Created</span>
<span slot="date">{{ new Date(config.created).toLocaleString() }}</span>
</ListItem>
<ListItem>
<span slot="date">{{ new Date(config.created).toLocaleString() }}</span>
</ListItem>
<ListItem>
<span slot="title">Platform</span>
<span slot="detail">{{ config.os }} {{ config.architecture }}</span>
</ListItem>
<ListItem>
</ListItem>
<ListItem>
<span slot="title">Entrypoint</span>
<span slot="detail"><code>{{ config.config.Entrypoint }}</code></span>
</ListItem>
<ListItem>
</ListItem>
<ListItem>
<span slot="title">Command</span>
<span slot="detail"><code>{{ config.config.Cmd }}</code></span>
</ListItem>
<ListItem>
</ListItem>
<ListItem>
<span slot="title">Labels</span>
<span slot="detail">
<ul style="text-align: left; list-style: none;">
@ -39,35 +40,35 @@
</li>
</ul>
</span>
</ListItem>
</ListItem>
<ListItem>
<span slot="title">Layers</span>
<span slot="size">{{ tag.layers.length }}</span>
</ListItem>
<ListItem>
<span slot="title">Layers</span>
<span slot="size">{{ tag.layers.length }}</span>
</ListItem>
<ListItem>
<span slot="title">Size</span>
<span slot="size">
<span slot="title">Size</span>
<span slot="size">
<TagSize :repo="$route.params.repo" :tag="$route.params.tag" />
</span>
</ListItem>
</List>
<h2>Layers</h2>
<List>
<ListHeader slot="header">
<span slot="title">Digest</span>
<span slot="detail">Summary</span>
<span slot="size">Size</span>
</ListHeader>
<ListItem
v-for="(layer, i) in tag.layers"
:key="i"
:to="{ name: 'blob', params: { repo: $route.params.repo, digest: layer.digest }}">
<span slot="title" :title="layer.digest">{{ identifier(tag, i) }}</span>
<span slot="detail">{{ command(tag, i) }}</span>
<BlobSize slot="size" :size="layer.size" />
</ListItem>
</List>
</Layout>
</ListItem>
</List>
<h2>Layers</h2>
<List>
<ListHeader slot="header">
<span slot="title">Digest</span>
<span slot="detail">Summary</span>
<span slot="size">Size</span>
</ListHeader>
<ListItem
v-for="(layer, i) in tag.layers"
:key="i"
:to="{ name: 'blob', params: { repo: $route.params.repo, digest: layer.digest }}">
<span slot="title" :title="layer.digest">{{ identifier(tag, i) }}</span>
<span slot="detail">{{ command(tag, i) }}</span>
<BlobSize slot="size" :size="layer.size" />
</ListItem>
</List>
</Layout>
</template>
<script>
@ -112,6 +113,7 @@ export default {
},
methods: {
async deleteTag() {
// eslint-disable-next-line no-alert
if (!window.confirm(`Are you sure you want to delete ${this.$route.params.repo}:${this.$route.params.tag}?`)) {
return;
}

Loading…
Cancel
Save