From 93f26e30f7b46013b9c02bd86abf9d7f5462a507 Mon Sep 17 00:00:00 2001 From: Clement Verna Date: Sun, 2 Sep 2018 12:20:33 +0200 Subject: [PATCH] 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 --- 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 literal 6265 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 j - + + + + - + - {{ .RegistryDomain }} + Fedora Container Registry + + -

{{ .RegistryDomain }}

+
+

+ Fedora Container Registry +

+
+

{{ .RegistryDomain }}

clear
@@ -28,14 +39,19 @@ - {{ $value.Name }} + {{ $value.Name }} - - docker pull {{ $value.URI }} - +
+ + +
+
+ + +
{{ end }} @@ -45,25 +61,38 @@

Last Updated: {{ .LastUpdated }}

- Fedora Container Layered Images brought to you by the - Fedora Atomic Working - Group + Fedora Container Layered Images brought to you by the + Fedora Container SIG +

- reg-server - was originally written and is maintained upstream by - @jessfraz + reg-server was originally written and is maintained + upstream by + @jessfraz

-
+ + + {{end}} diff --git a/files/reg-server/styles.css b/files/reg-server/styles.css new file mode 100644 index 0000000000..4880df9d2c --- /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 1173bff04d..b984518b35 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