feat(mobile): Better supports of mobile devives

fix(static): UI does not send requests to registry under non-root url (#73 )
Add example for this issue fixes: #73
2026-02-19 21:29:51 +00:00 · 2019-03-23 18:53:04 +01:00 · 2019-03-21 22:52:34 +01:00 · 2019-03-18 22:40:50 +01:00 · 2019-02-26 10:35:17 +01:00
13 changed files with 130 additions and 17 deletions
--- a/README.md
+++ b/README.md
@@ -9,7 +9,7 @@ All registries will be stored in the [local storage](https://en.wikipedia.org/wi

 This web user interface uses [Riot](https://github.com/Riot/riot) the react-like user interface micro-library and [riot-mui](https://github.com/kysonic/riot-mui) components.

-## [GitHub Page](https://joxit.github.io/docker-registry-ui) and [Live Demo](https://joxit.github.io/docker-registry-ui/demo/)
+## [GitHub Page](https://joxit.dev/docker-registry-ui) and [Live Demo](https://joxit.dev/docker-registry-ui/demo/)

 ![preview](https://raw.github.com/Joxit/docker-registry-ui/master/docker-registry-ui.gif "Preview of Docker Registry UI")

@@ -20,7 +20,7 @@ This web user interface uses [Riot](https://github.com/Riot/riot) the react-like
 -   Sort the tag list
 -   One interface for many registries
 -   Use a secured docker registry
-   Share your docker registry with query parameter `url` (e.g. `https://joxit.github.io/docker-registry-ui/demo?url=https://registry.example.com`)
+-   Share your docker registry with query parameter `url` (e.g. `https://joxit.dev/docker-registry-ui/demo?url=https://registry.example.com`)
 -   Use `joxit/docker-registry-ui:static` as reverse proxy to your docker registry (This will avoid CORS).
 -   Display image size (see #30)
 -   Add Title when using REGISTRY_URL (see #28)
@@ -136,14 +136,14 @@ Your server should be configured to accept CORS.

 If your docker registry does not need credentials, you will need to send this HEADER:

-    Access-Control-Allow-Origin: '*'
+    Access-Control-Allow-Origin: ['*']

 If your docker registry need credentials, you will need to send these HEADERS:

 ```yml
 http:
  headers:
-    Access-Control-Allow-Origin: '<your docker-registry-ui url>'
+    Access-Control-Allow-Origin: ['<your docker-registry-ui url>']
    Access-Control-Allow-Credentials: true
    Access-Control-Allow-Methods: ['HEAD', 'GET', 'OPTIONS'] # Optional
 ```
--- a/_config.yml
+++ b/_config.yml
@@ -1,3 +1,6 @@
 title: Docker Registry v2 User Interface
 google_analytics: UA-99119327-1
-theme: jekyll-theme-cayman
+theme: jekyll-theme-cayman
+author: Jones Magloire
+twitter:
+  username: Joxit
--- a/demo/index.html
+++ b/demo/index.html
@@ -22,7 +22,17 @@
  <link rel="stylesheet" href="../dist/vendor.css">
  <link rel="stylesheet" href="../dist/style.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" rel="stylesheet" type="text/css">
-  <title>Docker Registry UI</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta property="og:locale" content="en_US" />
+  <meta name="description" content="This is the live demo for my project Docker Registry v2 web User Interface. Sources : https://github.com/Joxit/docker-registry-ui" />
+  <meta property="og:description" content="This is the live demo for my project Docker Registry v2 web User Interface. Sources : https://github.com/Joxit/docker-registry-ui" />
+  <link rel="canonical" href="http://joxit.dev/docker-registry-ui/demo/" />
+  <meta property="og:url" content="http://joxit.dev/docker-registry-ui/demo/" />
+  <meta property="og:site_name" content="Demo | Docker Registry UI" />
+  <meta name="twitter:card" content="summary" />
+  <meta name="twitter:site" content="@Joxit" />
+  <meta name="twitter:creator" content="@Jones Magloire" />
+  <title>Demo | Docker Registry UI</title>
 </head>

 <body>
--- a/dist/index.html
+++ b/dist/index.html
@@ -13,4 +13,4 @@

 You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
--><!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="stylesheet" href="vendor.css"><link rel="stylesheet" href="style.css"><link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" rel="stylesheet" type="text/css"><title>Docker Registry UI</title></head><body><app></app><script src="scripts/vendor.js"></script><script src="scripts/docker-registry-ui.js"></script></body></html>
+--><!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="stylesheet" href="vendor.css"><link rel="stylesheet" href="style.css"><link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" rel="stylesheet" type="text/css"><meta name="viewport" content="width=device-width,initial-scale=1"><meta property="og:site_name" content="Docker Registry UI"><meta name="twitter:card" content="summary"><meta name="twitter:site" content="@Joxit"><meta name="twitter:creator" content="@Jones Magloire"><title>Docker Registry UI</title></head><body><app></app><script src="scripts/vendor.js"></script><script src="scripts/docker-registry-ui.js"></script></body></html>
--- a/dist/scripts/docker-registry-ui-static.js
+++ b/dist/scripts/docker-registry-ui-static.js
--- a/dist/scripts/docker-registry-ui.js
+++ b/dist/scripts/docker-registry-ui.js
--- a/dist/style.css
+++ b/dist/style.css
--- a/examples/issue-73/docker-compose.yml
+++ b/examples/issue-73/docker-compose.yml
@@ -0,0 +1,31 @@
+version: '2.0'
+services:
+  registry:
+    image: registry:2.6.2
+    volumes:
+      - ./registry-data:/var/lib/registry
+    networks:
+      - registry-ui-net
+
+  ui:
+    image: joxit/docker-registry-ui:static
+    environment:
+      - REGISTRY_TITLE=My Private Docker Registry
+      - REGISTRY_URL=http://registry:5000
+    depends_on:
+      - registry
+    networks:
+      - registry-ui-net
+
+  proxy:
+    image: nginx:alpine
+    volumes:
+      - ./nginx.conf:/etc/nginx/conf.d/default.conf
+    ports:
+      - 80:80
+    depends_on:
+      - ui
+    networks:
+      - registry-ui-net
+networks:
+  registry-ui-net:
--- a/examples/issue-73/nginx.conf
+++ b/examples/issue-73/nginx.conf
@@ -0,0 +1,35 @@
+server {
+    listen       80;
+    server_name  localhost;
+    resolver 127.0.0.11; # This is for docker container name resolver
+    #charset koi8-r;
+    #access_log  /var/log/nginx/host.access.log  main;
+
+    # disable any limits to avoid HTTP 413 for large image uploads
+    client_max_body_size 0;
+
+    # required to avoid HTTP 411: see Issue #1486 (https://github.com/moby/moby/issues/1486)
+    chunked_transfer_encoding on;
+    # required for strict SNI checking: see Issue #70 (https://github.com/Joxit/docker-registry-ui/issues/70)
+    proxy_ssl_server_name on;
+
+    location /ui/ {
+        proxy_pass http://ui/;
+    }
+
+    #error_page  404              /404.html;
+
+    # redirect server error pages to the static page /50x.html
+    #
+    error_page   500 502 503 504  /50x.html;
+    location = /50x.html {
+        root   /usr/share/nginx/html;
+    }
+
+    # deny access to .htaccess files, if Apache's document root
+    # concurs with nginx's one
+    #
+    #location ~ /\.ht {
+    #    deny  all;
+    #}
+}
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "docker-registry-ui",
-  "version": "1.1.0",
+  "version": "1.1.2",
  "scripts": {
    "build": "./node_modules/gulp/bin/gulp.js build"
  },
@@ -23,7 +23,7 @@
    "gulp-inject-version": "^1.0.1",
    "gulp-license": "^1.1.0",
    "gulp-riot": "^1.1.5",
-    "gulp-uglify": "^3.0.1",
+    "gulp-uglify": "^3.0.2",
    "gulp-useref": "^3.1.6",
    "riot": "^3.13.2",
    "riot-mui": "^0.1.1",
--- a/src/index.html
+++ b/src/index.html
@@ -20,13 +20,18 @@
 <head>
  <meta charset="UTF-8">
  <!-- build:css vendor.css -->
-  <LINK href="../node_modules/riot-mui/build/styles/riot-mui.min.css" rel="stylesheet" type="text/css">
+  <link href="../node_modules/riot-mui/build/styles/riot-mui.min.css" rel="stylesheet" type="text/css">
  <!-- endbuild -->
  <!-- build:css style.css -->
-  <LINK href="style.css" rel="stylesheet" type="text/css">
-  <LINK href="material-icons.css" rel="stylesheet" type="text/css">
+  <link href="style.css" rel="stylesheet" type="text/css">
+  <link href="material-icons.css" rel="stylesheet" type="text/css">
  <!-- endbuild -->
-  <LINK href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" rel="stylesheet" type="text/css">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" rel="stylesheet" type="text/css">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta property="og:site_name" content="Docker Registry UI" />
+  <meta name="twitter:card" content="summary" />
+  <meta name="twitter:site" content="@Joxit" />
+  <meta name="twitter:creator" content="@Jones Magloire" />
  <title>Docker Registry UI</title>
 </head>

--- a/src/scripts/static.js
+++ b/src/scripts/static.js
@@ -16,7 +16,12 @@
 */
 var registryUI = {}
 registryUI.url = function() {
-  return '${URL}';
+  var url = '${URL}';
+  if (!url) {
+    url = window.location.origin + window.location.pathname;
+    return url.endsWith('/') ? url.substr(0, url.length - 1) : url;
+  }
+  return url;
 };
 registryUI.name = function() {
  return '${REGISTRY_TITLE}' || registryUI.url();
--- a/src/style.css
+++ b/src/style.css
@@ -56,6 +56,13 @@ material-card {
  margin-bottom: 20px;
 }

+@media screen and (max-width: 950px){
+  material-card {
+    width: 95%;
+    max-width: 750px;
+  }
+}
+
 material-spinner {
  align-self: center;
 }
@@ -330,6 +337,7 @@ material-popup material-button:hover material-waves {

 material-popup .popup {
  max-width: 450px;
+  top: 2em;
 }

 footer {
@@ -339,6 +347,22 @@ footer {
  bottom: 0;
 }

+@media screen and (max-height: 750px) {
+  main {
+    min-height: calc(100% - 164px - 2.5em);
+    margin-bottom: 2em;
+  }
+  footer {
+    position: relative;
+  }
+}
+
+@media screen and (min-width: 760px) and (max-height: 750px) {
+  main {
+    min-height: calc(100% - 144px - 2.5em);
+  }
+}
+
 .select-padding {
  padding: 20px 0;
 }
Author	SHA1	Message	Date
Joxit	188cb80463	feat(mobile): Better supports of mobile devives	2019-03-23 18:53:04 +01:00
Joxit	f1bff47468	fix(static): UI does not send requests to registry under non-root url (#73 ) Add example for this issue fixes: #73	2019-03-21 22:52:34 +01:00
Joxit	df508cdef0	Update links	2019-03-18 22:40:50 +01:00
Joxit	eadaaadadd	Update README registry `Access-Control-Allow-Origin` option fixes: #72	2019-02-26 10:35:17 +01:00