Restyle the Container Registry page.
This commit adds a Title and the Fedora Logo to the registry page. It also adds support for the podman pull command. It is now possible to copy to the clipboard the command. Signed-off-by: Clement Verna <cverna@tutanota.com>
This commit is contained in:
Clement Verna
parent
b2ae20130d
commit
93f26e30f7
4 changed files with 329 additions and 21 deletions
BIN
files/reg-server/fedora.png
Normal file
BIN
files/reg-server/fedora.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
|
|
@ -3,17 +3,28 @@
|
|||
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
|
||||
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
|
||||
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
|
||||
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
|
||||
<!--[if gt IE 8]><!-->
|
||||
<html class="no-js">
|
||||
<!--<![endif]-->
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<base href="/" >
|
||||
<base href="/">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>{{ .RegistryDomain }}</title>
|
||||
<title>Fedora Container Registry</title>
|
||||
<link rel="icon" type="image/ico" href="/favicon.ico">
|
||||
<link rel="stylesheet" href="/css/styles.css" />
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
|
||||
crossorigin="anonymous">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>{{ .RegistryDomain }}</h1>
|
||||
<div>
|
||||
<h1>
|
||||
<img src="/fedora.png"> Fedora Container Registry
|
||||
</h1>
|
||||
</div>
|
||||
<h3>{{ .RegistryDomain }}</h3>
|
||||
<form>
|
||||
<input name="filter" type="search"><a class="clear">clear</a>
|
||||
</form>
|
||||
|
|
@ -28,14 +39,19 @@
|
|||
<tr>
|
||||
<td valign="top">
|
||||
<a href="/repo/{{ $value.Name | urlquery }}/tags">
|
||||
{{ $value.Name }}
|
||||
{{ $value.Name }}
|
||||
</a>
|
||||
</td>
|
||||
|
||||
<td align="right" nowrap>
|
||||
<a href="/repo/{{ $value.Name | urlquery }}/tags">
|
||||
<code>docker pull {{ $value.URI }}</code>
|
||||
</a>
|
||||
<div>
|
||||
<input type="text" value="podman pull {{ $value.URI }}" id="podman-input-{{ $key }}">
|
||||
<i class="fa fa-clipboard"></i>
|
||||
</div>
|
||||
<div>
|
||||
<input type="text" value="docker pull {{ $value.URI }}" id="docker-input-{{ $key }}">
|
||||
<i class="fa fa-clipboard"></i>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
|
|
@ -45,25 +61,38 @@
|
|||
<div class="footer">
|
||||
<p>Last Updated: {{ .LastUpdated }}</p>
|
||||
<p>
|
||||
Fedora Container Layered Images brought to you by the
|
||||
<a href="https://fedoraproject.org/wiki/Atomic_WG">Fedora Atomic Working
|
||||
Group</a>
|
||||
Fedora Container Layered Images brought to you by the
|
||||
<a href="https://fedoraproject.org/wiki/Container_SIG">Fedora Container SIG
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://github.com/jessfraz/reg/tree/master/server">reg-server
|
||||
was originally written and is maintained upstream by</a>
|
||||
<a href="https://twitter.com/jessfraz">@jessfraz</a>
|
||||
<a href="https://github.com/jessfraz/reg/tree/master/server">reg-server was originally written and is maintained
|
||||
upstream by</a>
|
||||
<a href="https://twitter.com/jessfraz">@jessfraz</a>
|
||||
</p>
|
||||
</div><!--/.footer-->
|
||||
</div>
|
||||
<!--/.footer-->
|
||||
<script src="/js/scripts.js"></script>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-29404280-12', 'jessfraz.com');
|
||||
ga('send', 'pageview');
|
||||
(function () {
|
||||
let clipboards = document.querySelectorAll('.fa-clipboard'); //Select all copy to clipboard icons
|
||||
clipboards.forEach((item, idx) => {
|
||||
item.addEventListener('click', (e => {
|
||||
if (idx % 2 === 0) { //If the id is even copy the podman command
|
||||
let copyText = document.getElementById('podman-input-' + (idx / 2).toString());
|
||||
copyText.select();
|
||||
document.execCommand('copy');
|
||||
}
|
||||
else { //Else copy the docker command
|
||||
let copyText = document.getElementById('docker-input-' + ((idx - 1) / 2).toString());
|
||||
copyText.select();
|
||||
document.execCommand('copy');
|
||||
}
|
||||
}), false); //End of the click listener
|
||||
}); // Add an click listener to all clipboard icons
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
{{end}}
|
||||
|
|
|
|||
265
files/reg-server/styles.css
Normal file
265
files/reg-server/styles.css
Normal file
|
|
@ -0,0 +1,265 @@
|
|||
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,300');
|
||||
/* Have to use @import for the font, as you can only specify a single stylesheet */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html {
|
||||
min-height: 100%;
|
||||
border-top: 10px solid #ECEEF1;
|
||||
border-bottom: 10px solid #ECEEF1;
|
||||
color: #61666c;
|
||||
font-weight: 300;
|
||||
font-size: 1em;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
line-height: 2em;
|
||||
}
|
||||
body {
|
||||
padding: 20px;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
code {
|
||||
font-family: Inconsolata,monospace;
|
||||
}
|
||||
a {
|
||||
color: #61666c;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
color: #2a2a2a;
|
||||
}
|
||||
/*------------------------------------*\
|
||||
Wrapper
|
||||
\*------------------------------------*/
|
||||
.wrapper {
|
||||
margin: 0 auto;
|
||||
padding-top: 20px;
|
||||
max-width: 800px;
|
||||
}
|
||||
/*------------------------------------*\
|
||||
Demo block
|
||||
\*------------------------------------*/
|
||||
.block {
|
||||
font-size: .875em;
|
||||
margin: 20px 0;
|
||||
padding: 20px;
|
||||
color: #9099A3;
|
||||
}
|
||||
h1 {
|
||||
font-weight: 200;
|
||||
text-align: center;
|
||||
font-size: 1.4em;
|
||||
line-height: 3em;
|
||||
font-family: 'Museo Slab', 'Open Sans', monospace;
|
||||
}
|
||||
h3{
|
||||
font-weight: 100;
|
||||
text-align: center;
|
||||
font-size: 1.2em;
|
||||
line-height: 3em;
|
||||
font-family: 'Museo Slab', 'Open Sans', monospace;
|
||||
}
|
||||
|
||||
form {
|
||||
text-align: center;
|
||||
}
|
||||
input {
|
||||
margin: 0 auto;
|
||||
font-size: 100%;
|
||||
vertical-align: middle;
|
||||
*overflow: visible;
|
||||
line-height: normal;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
line-height: 18px;
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
padding: 4px 32px 4px 6px;
|
||||
margin-bottom: 9px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #555555;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
width: 196px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #cccccc;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
|
||||
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
|
||||
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
|
||||
transition: border linear 0.2s, box-shadow linear 0.2s;
|
||||
background: url('search.svg') no-repeat 211px center;
|
||||
background-size: auto 20px;
|
||||
}
|
||||
input:focus {
|
||||
border-color: rgba(82, 168, 236, 0.8);
|
||||
outline: 0;
|
||||
outline: thin dotted \9;
|
||||
/* IE6-9 */
|
||||
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
|
||||
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
|
||||
}
|
||||
input::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
input[type="search"] {
|
||||
margin-top: 20px;
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
-webkit-appearance: textfield;
|
||||
-webkit-transition: all 300ms ease-in;
|
||||
-moz-transition: all 300ms ease-in;
|
||||
-ms-transition: all 300ms ease-in;
|
||||
-o-transition: all 300ms ease-in;
|
||||
transition: all 300ms ease-in;
|
||||
}
|
||||
input[type="search"]::-webkit-search-decoration,
|
||||
input[type="search"]::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
input[type="text"]{
|
||||
width: 100%;
|
||||
background: none;
|
||||
}
|
||||
a.clear,
|
||||
a.clear:link,
|
||||
a.clear:visited {
|
||||
color: #666;
|
||||
padding: 2px 0 2px 0;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
margin: 0px 0 0 20px;
|
||||
line-height: 14px;
|
||||
display: inline-block;
|
||||
border-bottom: transparent 1px solid;
|
||||
vertical-align: -10px;
|
||||
-webkit-transition: all 300ms ease-in;
|
||||
-moz-transition: all 300ms ease-in;
|
||||
-ms-transition: all 300ms ease-in;
|
||||
-o-transition: all 300ms ease-in;
|
||||
transition: all 300ms ease-in;
|
||||
}
|
||||
a.clear:hover {
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
}
|
||||
/*------------------------------------*\
|
||||
Table (directory listing)
|
||||
\*------------------------------------*/
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
font-size: .875em;
|
||||
max-width: 100%;
|
||||
margin: 20px auto 0px auto;
|
||||
}
|
||||
tr {
|
||||
outline: 0;
|
||||
border: 0;
|
||||
}
|
||||
tr:hover td {
|
||||
background: #f6f6f6;
|
||||
}
|
||||
th {
|
||||
text-align: left;
|
||||
font-size: 1em;
|
||||
padding-right: 20px;
|
||||
}
|
||||
/* 2nd Column: Filename */
|
||||
th + th {
|
||||
width: 65%;
|
||||
}
|
||||
/* 3rd Column: Last Modified */
|
||||
/* 4th Column: Size */
|
||||
th + th + th + th {
|
||||
width: 5%;
|
||||
}
|
||||
tr td:first-of-type {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
td {
|
||||
padding: 5px 0;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #edf1f5;
|
||||
vertical-align: middle;
|
||||
text-align: left;
|
||||
-webkit-transition: background 300ms ease-in;
|
||||
-moz-transition: background 300ms ease-in;
|
||||
-ms-transition: background 300ms ease-in;
|
||||
-o-transition: background 300ms ease-in;
|
||||
transition: background 300ms ease-in;
|
||||
}
|
||||
td:last-child,
|
||||
th:last-child {
|
||||
text-align: right;
|
||||
padding-right: 5px;
|
||||
}
|
||||
td a {
|
||||
display: block;
|
||||
}
|
||||
tr.parent a {
|
||||
color: #9099A3;
|
||||
}
|
||||
.parent a:hover {
|
||||
color: #2a2a2a;
|
||||
}
|
||||
|
||||
/*------------------------------------*\
|
||||
Loading Indicator
|
||||
\*------------------------------------*/
|
||||
.signal {
|
||||
border: 2px solid #333;
|
||||
border-radius: 15px;
|
||||
height: 15px;
|
||||
left: 50%;
|
||||
margin: -8px 0 0 -8px;
|
||||
opacity: 0;
|
||||
top: 50%;
|
||||
width: 15px;
|
||||
float: right;
|
||||
animation: pulsate 1s ease-out;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
@keyframes pulsate {
|
||||
0% {
|
||||
transform: scale(.1);
|
||||
opacity: 0.0;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1.2);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------------------*\
|
||||
Footer
|
||||
\*------------------------------------*/
|
||||
.footer {
|
||||
text-align: center;
|
||||
font-size: .75em;
|
||||
margin-top: 50px;
|
||||
}
|
||||
img {
|
||||
outline: none;
|
||||
border: none;
|
||||
height: 3em;
|
||||
max-width: 100%;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue