From 961592f837521dc7fa639015519c5497549d325a Mon Sep 17 00:00:00 2001
From: Clement Verna <cverna@tutanota.com>
Date: Sun, 2 Sep 2018 12:20:33 +0200
Subject: [PATCH 1/1] 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>
---
 files/reg-server/fedora.png        | Bin 0 -> 6265 bytes
 files/reg-server/repositories.html |  71 +++++---
 files/reg-server/styles.css        | 265 +++++++++++++++++++++++++++++
 tasks/reg-server.yml               |  14 ++
 4 files changed, 329 insertions(+), 21 deletions(-)
 create mode 100644 files/reg-server/fedora.png
 create mode 100644 files/reg-server/styles.css

diff --git a/files/reg-server/fedora.png b/files/reg-server/fedora.png
new file mode 100644
index 0000000000000000000000000000000000000000..eeeb70c868b11d695e9e3f85614ef042c130d52f
GIT binary patch
diff --git a/files/reg-server/repositories.html b/files/reg-server/repositories.html
index 572fbc6ef..d5c75dd0b 100644
--- a/files/reg-server/repositories.html
+++ b/files/reg-server/repositories.html
@@ -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}}
diff --git a/files/reg-server/styles.css b/files/reg-server/styles.css
new file mode 100644
index 000000000..4880df9d2
--- /dev/null
+++ b/files/reg-server/styles.css
@@ -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%;
+}
diff --git a/tasks/reg-server.yml b/tasks/reg-server.yml
index 1173bff04..b984518b3 100644
--- a/tasks/reg-server.yml
+++ b/tasks/reg-server.yml
@@ -34,3 +34,17 @@
   when: env == "staging"
   tags:
   - regserver
+
+  - name: Copy fedora icon
+  copy:
+    src: "{{files}}/reg-server/fedora.png"
+    dest: "/var/lib/reg-server/static/fedora.png"
+  tags:
+  - regserver
+
+  - name: Copy custom styles.css
+  copy:
+    src: "{{files}}/reg-server/styles.css"
+    dest: "/var/lib/reg-server/static/css/styles.css"
+  tags:
+  - regserver
-- 
2.17.1

