diff --git a/docs/Dockerfile b/docs/Dockerfile index 1e6552f0c1..90cafedc5d 100644 --- a/docs/Dockerfile +++ b/docs/Dockerfile @@ -1,17 +1,24 @@ -FROM docs/base:latest -MAINTAINER Sven Dowideit (@SvenDowideit) +FROM docs/base:hugo +MAINTAINER Mary Anthony (@moxiegirl) # to get the git info for this repo COPY . /src -# Reset the /docs dir so we can replace the theme meta with the new repo's git info -#RUN git reset --hard +COPY . /docs/content/kitematic/ -RUN grep '"version"' /src/package.json | sed 's/.*"version": "\(.*\)".*/\1/' > /docs/VERSION -COPY docs/* /docs/sources/kitematic/ -# sadly, COPY is only recursive if you don't also need to name the destination -COPY docs/assets/ /docs/sources/kitematic/assets/ -COPY docs/mkdocs.yml /docs/mkdocs-dhe.yml - -# Then build everything together, ready for mkdocs -RUN /docs/build.sh +# Sed to process GitHub Markdown +# 1-2 Remove comment code from metadata block +# 3 Remove .md extension from link text +# 4 Change ](/ to ](/project/ in links +# 5 Change ](word) to ](/project/word) +# 6 Change ](../../ to ](/project/ +# 7 Change ](../ to ](/project/word) +# +# +RUN find /docs/content/kitematic -type f -name "*.md" -exec sed -i.old \ + -e '/^/g' \ + -e '/^/g' \ + -e 's/\([(]\)\(.*\)\(\.md\)/\1\2/g' \ + -e 's/\(\]\)\([(]\)\(\/\)/\1\2\/kitematic\//g' \ + -e 's/\(\][(]\)\([A-z]*[)]\)/\]\(\/kitematic\/\2/g' \ + -e 's/\(\][(]\)\(\.\.\/\)/\1\/kitematic\//g' {} \; diff --git a/docs/Makefile b/docs/Makefile new file mode 100644 index 0000000000..021e8f6e5e --- /dev/null +++ b/docs/Makefile @@ -0,0 +1,55 @@ +.PHONY: all binary build cross default docs docs-build docs-shell shell test test-unit test-integration test-integration-cli test-docker-py validate + +# env vars passed through directly to Docker's build scripts +# to allow things like `make DOCKER_CLIENTONLY=1 binary` easily +# `docs/sources/contributing/devenvironment.md ` and `project/PACKAGERS.md` have some limited documentation of some of these +DOCKER_ENVS := \ + -e BUILDFLAGS \ + -e DOCKER_CLIENTONLY \ + -e DOCKER_EXECDRIVER \ + -e DOCKER_GRAPHDRIVER \ + -e TESTDIRS \ + -e TESTFLAGS \ + -e TIMEOUT +# note: we _cannot_ add "-e DOCKER_BUILDTAGS" here because even if it's unset in the shell, that would shadow the "ENV DOCKER_BUILDTAGS" set in our Dockerfile, which is very important for our official builds + +# to allow `make DOCSDIR=docs docs-shell` (to create a bind mount in docs) +DOCS_MOUNT := $(if $(DOCSDIR),-v $(CURDIR)/$(DOCSDIR):/$(DOCSDIR)) + +# to allow `make DOCSPORT=9000 docs` +DOCSPORT := 8000 + +# Get the IP ADDRESS +DOCKER_IP=$(shell python -c "import urlparse ; print urlparse.urlparse('$(DOCKER_HOST)').hostname or ''") +HUGO_BASE_URL=$(shell test -z "$(DOCKER_IP)" && echo localhost || echo "$(DOCKER_IP)") +HUGO_BIND_IP=0.0.0.0 + +GIT_BRANCH := $(shell git rev-parse --abbrev-ref HEAD 2>/dev/null) +DOCKER_IMAGE := docker$(if $(GIT_BRANCH),:$(GIT_BRANCH)) +DOCKER_DOCS_IMAGE := docs-base$(if $(GIT_BRANCH),:$(GIT_BRANCH)) + + +DOCKER_RUN_DOCS := docker run --rm -it $(DOCS_MOUNT) -e AWS_S3_BUCKET -e NOCACHE + +# for some docs workarounds (see below in "docs-build" target) +GITCOMMIT := $(shell git rev-parse --short HEAD 2>/dev/null) + +default: docs + +docs: docs-build + $(DOCKER_RUN_DOCS) -p $(if $(DOCSPORT),$(DOCSPORT):)8000 -e DOCKERHOST "$(DOCKER_DOCS_IMAGE)" hugo server --port=$(DOCSPORT) --baseUrl=$(HUGO_BASE_URL) --bind=$(HUGO_BIND_IP) + +docs-draft: docs-build + $(DOCKER_RUN_DOCS) -p $(if $(DOCSPORT),$(DOCSPORT):)8000 -e DOCKERHOST "$(DOCKER_DOCS_IMAGE)" hugo server --buildDrafts="true" --port=$(DOCSPORT) --baseUrl=$(HUGO_BASE_URL) --bind=$(HUGO_BIND_IP) + + +docs-shell: docs-build + $(DOCKER_RUN_DOCS) -p $(if $(DOCSPORT),$(DOCSPORT):)8000 "$(DOCKER_DOCS_IMAGE)" bash + + +docs-build: +# ( git remote | grep -v upstream ) || git diff --name-status upstream/release..upstream/docs ./ > ./changed-files +# echo "$(GIT_BRANCH)" > GIT_BRANCH +# echo "$(AWS_S3_BUCKET)" > AWS_S3_BUCKET +# echo "$(GITCOMMIT)" > GITCOMMIT + docker build -t "$(DOCKER_DOCS_IMAGE)" . diff --git a/docs/faq.md b/docs/faq.md index 0fef59e23b..69a7290e91 100755 --- a/docs/faq.md +++ b/docs/faq.md @@ -1,9 +1,16 @@ -page_title: Kitematic: Frequently Asked Questions -page_description: Documentation covering common questions users have about Kitematic -page_keywords: docker, documentation, about, technology, kitematic, gui + -# Frequently Asked Questions +# Kitematic: Frequently Asked Questions ### Is Kitematic Open Source? diff --git a/docs/assets/browse-images.png b/docs/images/browse-images.png similarity index 100% rename from docs/assets/browse-images.png rename to docs/images/browse-images.png diff --git a/docs/assets/change-folder.png b/docs/images/change-folder.png similarity index 100% rename from docs/assets/change-folder.png rename to docs/images/change-folder.png diff --git a/docs/assets/cli-access-button.png b/docs/images/cli-access-button.png similarity index 100% rename from docs/assets/cli-access-button.png rename to docs/images/cli-access-button.png diff --git a/docs/assets/cli-redis-container.png b/docs/images/cli-redis-container.png similarity index 100% rename from docs/assets/cli-redis-container.png rename to docs/images/cli-redis-container.png diff --git a/docs/assets/cli-terminal.png b/docs/images/cli-terminal.png similarity index 100% rename from docs/assets/cli-terminal.png rename to docs/images/cli-terminal.png diff --git a/docs/assets/containers.png b/docs/images/containers.png similarity index 100% rename from docs/assets/containers.png rename to docs/images/containers.png diff --git a/docs/assets/installing.png b/docs/images/installing.png similarity index 100% rename from docs/assets/installing.png rename to docs/images/installing.png diff --git a/docs/assets/minecraft-add-server.png b/docs/images/minecraft-add-server.png similarity index 100% rename from docs/assets/minecraft-add-server.png rename to docs/images/minecraft-add-server.png diff --git a/docs/assets/minecraft-create.png b/docs/images/minecraft-create.png similarity index 100% rename from docs/assets/minecraft-create.png rename to docs/images/minecraft-create.png diff --git a/docs/assets/minecraft-data-volume.png b/docs/images/minecraft-data-volume.png similarity index 100% rename from docs/assets/minecraft-data-volume.png rename to docs/images/minecraft-data-volume.png diff --git a/docs/assets/minecraft-login.png b/docs/images/minecraft-login.png similarity index 100% rename from docs/assets/minecraft-login.png rename to docs/images/minecraft-login.png diff --git a/docs/assets/minecraft-map.png b/docs/images/minecraft-map.png similarity index 100% rename from docs/assets/minecraft-map.png rename to docs/images/minecraft-map.png diff --git a/docs/assets/minecraft-port.png b/docs/images/minecraft-port.png similarity index 100% rename from docs/assets/minecraft-port.png rename to docs/images/minecraft-port.png diff --git a/docs/assets/minecraft-restart.png b/docs/images/minecraft-restart.png similarity index 100% rename from docs/assets/minecraft-restart.png rename to docs/images/minecraft-restart.png diff --git a/docs/assets/minecraft-server-address.png b/docs/images/minecraft-server-address.png similarity index 100% rename from docs/assets/minecraft-server-address.png rename to docs/images/minecraft-server-address.png diff --git a/docs/assets/nginx-2048-files.png b/docs/images/nginx-2048-files.png similarity index 100% rename from docs/assets/nginx-2048-files.png rename to docs/images/nginx-2048-files.png diff --git a/docs/assets/nginx-2048.png b/docs/images/nginx-2048.png similarity index 100% rename from docs/assets/nginx-2048.png rename to docs/images/nginx-2048.png diff --git a/docs/assets/nginx-create.png b/docs/images/nginx-create.png similarity index 100% rename from docs/assets/nginx-create.png rename to docs/images/nginx-create.png diff --git a/docs/assets/nginx-data-folder.png b/docs/images/nginx-data-folder.png similarity index 100% rename from docs/assets/nginx-data-folder.png rename to docs/images/nginx-data-folder.png diff --git a/docs/assets/nginx-data-volume.png b/docs/images/nginx-data-volume.png similarity index 100% rename from docs/assets/nginx-data-volume.png rename to docs/images/nginx-data-volume.png diff --git a/docs/assets/nginx-hello-world.png b/docs/images/nginx-hello-world.png similarity index 100% rename from docs/assets/nginx-hello-world.png rename to docs/images/nginx-hello-world.png diff --git a/docs/assets/nginx-preview.png b/docs/images/nginx-preview.png similarity index 100% rename from docs/assets/nginx-preview.png rename to docs/images/nginx-preview.png diff --git a/docs/assets/nginx-serving-2048.png b/docs/images/nginx-serving-2048.png similarity index 100% rename from docs/assets/nginx-serving-2048.png rename to docs/images/nginx-serving-2048.png diff --git a/docs/assets/rethink-container.png b/docs/images/rethink-container.png similarity index 100% rename from docs/assets/rethink-container.png rename to docs/images/rethink-container.png diff --git a/docs/assets/rethink-create.png b/docs/images/rethink-create.png similarity index 100% rename from docs/assets/rethink-create.png rename to docs/images/rethink-create.png diff --git a/docs/assets/rethink-ports.png b/docs/images/rethink-ports.png similarity index 100% rename from docs/assets/rethink-ports.png rename to docs/images/rethink-ports.png diff --git a/docs/assets/rethinkdb-preview.png b/docs/images/rethinkdb-preview.png similarity index 100% rename from docs/assets/rethinkdb-preview.png rename to docs/images/rethinkdb-preview.png diff --git a/docs/assets/volumes-dir.png b/docs/images/volumes-dir.png similarity index 100% rename from docs/assets/volumes-dir.png rename to docs/images/volumes-dir.png diff --git a/docs/index.md b/docs/kitematic-overview.md similarity index 75% rename from docs/index.md rename to docs/kitematic-overview.md index 60a58533b2..3ce916534a 100755 --- a/docs/index.md +++ b/docs/kitematic-overview.md @@ -1,8 +1,15 @@ -page_title: Kitematic User Guide: Intro & Overview -page_description: Documentation that provides an overview of Kitematic and installation instructions -page_keywords: docker, documentation, about, technology, kitematic, gui + -# Installing Kitematic +# Kitematic: Install Kitematic You install Kitematic much the same way you install any application on a Mac or Windows PC: download an image and run an installer. @@ -19,12 +26,12 @@ Opening Kitematic for the first time sets up everything you need to run Docker containers. If you don't already have VirtualBox installed, Kitematic will download and install the latest version. -![Installing](./assets/installing.png) +![Installing](../images/installing.png) All Done! Within a minute you should be ready to start running your first container! -![containers](./assets/containers.png) +![containers](../images/containers.png) ## Technical Details @@ -44,4 +51,4 @@ Kitematic needs your root password for two reasons: ## Next Steps -For information about using Kitematic, take a look at the [User Guide](./userguide.md). +For information about using Kitematic, take a look at the [User Guide](../userguide). diff --git a/docs/known-issues.md b/docs/known-issues.md index a9399076bb..a6dd7dbf3b 100755 --- a/docs/known-issues.md +++ b/docs/known-issues.md @@ -1,8 +1,15 @@ -page_title: Kitematic Known Issues -page_description: Information about known issues in Kitematic -page_keywords: docker, documentation, about, technology, kitematic, gui + -# Known Issues +# Kitematic: Known Issues Kitematic is in beta, so we're still working out the kinks. The most common diff --git a/docs/minecraft-server.md b/docs/minecraft-server.md index 4761411d57..c036311941 100755 --- a/docs/minecraft-server.md +++ b/docs/minecraft-server.md @@ -1,6 +1,13 @@ -page_title: Kitematic Tutorial: Set up a Minecraft Server -page_description: Tutorial demonstrating the setup of a Minecraft server using Docker and Kitematic -page_keywords: docker, documentation, about, technology, kitematic, gui, minecraft, tutorial + # Kitematic tutorial: Set up a Minecraft server @@ -10,12 +17,12 @@ using Kitematic and Docker. ### Create Minecraft Server Container First, if you haven't yet done so, [download and start -Kitematic](./index.md). Once installed and running, the app should look like this: +Kitematic](./kitematic-overview.md). Once installed and running, the app should look like this: Create a container from the recommended Minecraft image by clicking the "Create" button. -![create Minecraft container](../assets/minecraft-create.png) +![create Minecraft container](../images/minecraft-create.png) After the image finishes downloading, you'll see the home screen for the Minecraft container. Your Minecraft server is now up and running inside a Docker @@ -23,24 +30,24 @@ container. Note that we've marked the IP and port you can use to connect to your Minecraft server in red (your IP and port may be different from what's shown). -![Minecraft server port and IP info](../assets/minecraft-port.png) +![Minecraft server port and IP info](../images/minecraft-port.png) ### Connect to Minecraft server Open your Minecraft client, log in with your Minecraft account and click on the "Multiplayer" button. -![Minecraft login screen](../assets/minecraft-login.png) +![Minecraft login screen](../images/minecraft-login.png) Click the "Add Server" button to add the Minecraft server you want to connect to. -![Add server](../assets/minecraft-login.png) +![Add server](../images/minecraft-login.png) Fill in the "Server Address" text box with the marked IP and port from Kitematic you saw earlier. -![Minecraft server address](../assets/minecraft-server-address.png) +![Minecraft server address](../images/minecraft-server-address.png) Click on the play button to connect to your Minecraft server and enjoy! @@ -51,16 +58,16 @@ Open the "data" folder from Kitematic (You'll need to "Enable all volumes to edi files via Finder"). We use Docker Volume to map the folder from the Minecraft Docker container onto your computer. -![Minecraft data volume](../assets/minecraft-data-volume.png) +![Minecraft data volume](../images/minecraft-data-volume.png) The Finder will open, allowing you to replace your current map with the new one you desire. -![Minecraft maps](../assets/minecraft-map.png) +![Minecraft maps](../images/minecraft-map.png) Restart your container by clicking the "Restart" button. -![Restart Minecraft container](../assets/minecraft-restart.png) +![Restart Minecraft container](../images/minecraft-restart.png) Go back to your Minecraft client and join your server. The new map should load. diff --git a/docs/mkdocs.yml b/docs/mkdocs.yml deleted file mode 100644 index 745bee38b2..0000000000 --- a/docs/mkdocs.yml +++ /dev/null @@ -1,13 +0,0 @@ - -# Kitematic -- ['kitematic/index.md', 'Installation', 'Kitematic on OS X'] - -- ['kitematic/userguide.md', 'User Guide', 'Kitematic'] - -- ['kitematic/minecraft-server.md', 'Examples', 'Kitematic: Minecraft server'] -- ['kitematic/nginx-web-server.md', 'Examples', 'Kitematic: Ngnix web server'] -- ['kitematic/rethinkdb-dev-database.md', 'Examples', 'Kitematic: RethinkDB development database'] - -- ['kitematic/faq.md', 'Reference', 'Kitematic: FAQ'] -- ['kitematic/known-issues.md', 'Reference', 'Kitematic: Known issues'] - diff --git a/docs/nginx-web-server.md b/docs/nginx-web-server.md index d521b1b24f..de04754a2e 100755 --- a/docs/nginx-web-server.md +++ b/docs/nginx-web-server.md @@ -1,8 +1,15 @@ -page_title: Kitematic Tutorial: Set up an Nginx web server -page_description: Tutorial demonstrating the setup of an Nginx web server using Docker and Kitematic -page_keywords: docker, documentation, about, technology, kitematic, gui, nginx, tutorial + -# Serving a Static Website with Nginx +# Kitematic Tutorial: Serving a Static Website with Nginx In this tutorial, you will: @@ -13,26 +20,26 @@ In this tutorial, you will: In this example website we'll be serving the popular 2048 game, as shown below. Let's get to it! -![2048 game](../assets/nginx-2048.png) +![2048 game](../images/nginx-2048.png) #### Running the Nginx Web Server Container First, if you haven't yet done so, [download and start -Kitematic](./index.md). Once installed and running, the app should look like this: +Kitematic](./kitematic-overview.md). Once installed and running, the app should look like this: -![Nginx create](../assets/nginx-create.png) +![Nginx create](../images/nginx-create.png) Click on the _Create_ button of the `hello-world-nginx` listing as shown above. Kitematic will download (also known as pull the image) and then run a tiny Nginx web server in a Docker container, allowing it to serve website data to your Mac. -![download Nginx hello world](../assets/nginx-hello-world.png) +![download Nginx hello world](../images/nginx-hello-world.png) Once it's done downloading you should see a quick preview of the example website that comes with the container, as shown below. Click on the preview to see the result in your own browser. -![Nginx preview](../assets/nginx-preview.png) +![Nginx preview](../images/nginx-preview.png) **What just happened?** Kitematic downloaded the `kitematic/hello-world-nginx` image from the Docker Hub and then created and ran a Docker Nginx container from @@ -47,12 +54,12 @@ but you can change this in the container settings. To access the files via finder, click on the in-app folder icon for a container and "Enable all volumes to edit via Finder": -![Nginx data volume](../assets/nginx-data-volume.png) +![Nginx data volume](../images/nginx-data-volume.png) A Finder window of the folder should open containing the index.html file we see being served by the container. -![Nginx data folder](../assets/nginx-data-folder.png) +![Nginx data folder](../images/nginx-data-folder.png) #### Serving Your Own Website Data @@ -61,12 +68,12 @@ files](https://github.com/gabrielecirulli/2048/archive/master.zip) for 2048, a popular (and addictive) web-based tile game. Extract this zip file into the folder you just opened: -![Website files for 2048](../assets/nginx-2048-files.png) +![Website files for 2048](../images/nginx-2048-files.png) Switch back to Kitematic and restart the container by clicking the "Restart" button as shown below. Your Nginx container should now be serving 2048. -![Nginx running 2048](../assets/nginx-serving-2048.png) +![Nginx running 2048](../images/nginx-serving-2048.png) **What just happened?** diff --git a/docs/rethinkdb-dev-database.md b/docs/rethinkdb-dev-database.md index c746dedd16..1bd1b12527 100755 --- a/docs/rethinkdb-dev-database.md +++ b/docs/rethinkdb-dev-database.md @@ -1,8 +1,15 @@ -page_title: Kitematic Tutorial: Set up an Nginx web server -page_description: Tutorial demonstrating the setup of an Nginx web server using Docker and Kitematic -page_keywords: docker, documentation, about, technology, kitematic, gui, rethink, tutorial + -# Creating a Local RethinkDB Database for Development +# Kitematic Tutorial: Creating a Local RethinkDB Database for Development In this tutorial, you will: @@ -12,22 +19,22 @@ In this tutorial, you will: ### Setting up RethinkDB in Kitematic First, if you haven't yet done so, [download and start -Kitematic](./index.md). Once open, the app should look like +Kitematic](./kitematic-overview.md). Once open, the app should look like this: -![Rethink create button](../assets/rethink-create.png) +![Rethink create button](../images/rethink-create.png) Click on the _Create_ button of the `rethinkdb` image listing in the recommended list as shown above. This will download & run a RethinkDB container within a few minutes. Once it's done, you'll have a local RethinkDB database up and running. -![Rethink container](../assets/rethink-container.png) +![Rethink container](../images/rethink-container.png) Let's start using it to develop a node.js app. For now, let's figure out which IP address and port RethinkDB is listening on. To find out, click the `Settings` tab and then the `Ports` section: -![Rethink create button](../assets/rethink-ports.png) +![Rethink create button](../images/rethink-ports.png) You can see there that for RethinkDB port `28015`, the container is listening on host `192.168.99.100` and port `49154` (in this example - ports may be different @@ -58,5 +65,5 @@ Now, point your browser to `http://localhost:8000`. Congratulations, you've successfully used a RethinkDB container in Kitematic to build a real-time chat app. Happy coding! -![Rethink app preview](../assets/rethinkdb-preview.png) +![Rethink app preview](../images/rethinkdb-preview.png) diff --git a/docs/userguide.md b/docs/userguide.md index 324d6f2838..f932c76411 100755 --- a/docs/userguide.md +++ b/docs/userguide.md @@ -1,6 +1,12 @@ -page_title: Kitematic User Guide: Intro & Overview -page_description: Documentation that provides an overview of Kitematic and installation instructions -page_keywords: docker, documentation, about, technology, kitematic, gui + # Kitematic user guide @@ -24,7 +30,7 @@ stream logs, and single click terminal into your Docker container all from the GUI. First, if you haven't yet done so, [download and start -Kitematic](./index.md). +Kitematic](./kitematic-overview.md). ## Container list @@ -44,7 +50,7 @@ The "New Container" page lets you search for and select from images on the Docke When you've found the image you want to run, you can click "Create" to pull, create, and run the container. -![Nginx create](../assets/browse-images.png) +![Nginx create](../images/browse-images.png) ## Working with a container @@ -58,7 +64,7 @@ for your container - either a preview of the HTML output for a container that ha server, the main container process' logs, and any container volumes that have been configured. -![Redis container in Kitematic](../assets/cli-redis-container.png) +![Redis container in Kitematic](../images/cli-redis-container.png) The summary page will show different things depending on the image metadata. If a known "web" port (see below) is `EXPOSED`, then Kitematic assumes its a web page, @@ -97,7 +103,7 @@ This allows you to manage files in volumes via the Finder. Kitematic exposes a container's volume data under `~/Kitematic//`. Quick access to this folder (or directory) is available via the app: -![Accessing the volumes directory](../assets/volumes-dir.png) +![Accessing the volumes directory](../images/volumes-dir.png) > **Note**: When you "Enable all volumes to edit files in Finder", the Docker > container will be stopped, removed and re-created with the new `volumes` @@ -114,7 +120,7 @@ already have the HTML, Javascript, and CSS for your website under Navigate to the "Settings" tab of the container, and goto the "Volumes". This screen allows you to set the mappings individually. -![screen shot 2015-02-28 at 2 48 01 pm](../assets/change-folder.png) +![screen shot 2015-02-28 at 2 48 01 pm](../images/change-folder.png) > **Note**: When you "Change Folders", the Docker > container will be stopped, removed and re-created with the new `volumes` @@ -169,7 +175,7 @@ directly reflected in Kitematic. To open a terminal via Kitematic, just press whale button at the bottom left, as shown below: -![CLI access button](../assets/cli-access-button.png) +![CLI access button](../images/cli-access-button.png) ### Example: Creating a new Redis container @@ -177,7 +183,7 @@ Start by opening a Docker-CLI ready terminal by clicking the whale button as described above. Once the terminal opens, enter `docker run -d -P redis`. This will pull and run a new Redis container via the Docker CLI. -![Docker CLI terminal window](../assets/cli-terminal.png) +![Docker CLI terminal window](../images/cli-terminal.png) > **Note**: If you're creating containers from the commandline, use `docker run -d` > so that Kitematic can re-create the container when settings are changed via the @@ -185,7 +191,7 @@ will pull and run a new Redis container via the Docker CLI. Now, go back to Kitematic. The Redis container should now be visible. -![Redis container in Kitematic](../assets/cli-redis-container.png) +![Redis container in Kitematic](../images/cli-redis-container.png) ## Next Steps diff --git a/src/components/ContainerHome.react.js b/src/components/ContainerHome.react.js index e6fec53db0..198730eeb1 100644 --- a/src/components/ContainerHome.react.js +++ b/src/components/ContainerHome.react.js @@ -52,11 +52,11 @@ var ContainerHome = React.createClass({ let body; if (this.props.container.Error) { body = ( -
-

An error occurred:

-

{this.props.container.Error}

-

If you feel that this error is invalid, please file a ticket on our GitHub repo.

- +
+

We're sorry. There seem to be an error:

+

{this.props.container.Error}

+

If this error is invalid, please file a ticket on our Github repo.

+ File Ticket
); } else if (this.props.container && this.props.container.State.Downloading) { diff --git a/src/components/ContainerHomeLogs.react.js b/src/components/ContainerHomeLogs.react.js index b0d6a7b4bb..d673c82db3 100644 --- a/src/components/ContainerHomeLogs.react.js +++ b/src/components/ContainerHomeLogs.react.js @@ -43,7 +43,7 @@ module.exports = React.createClass({ }, scrollToBottom: function () { var parent = $('.logs'); - if (parent.scrollTop() >= _prevBottom - 50) { + if (parent[0].scrollHeight - parent.height() >= _prevBottom - 50) { parent.scrollTop(parent[0].scrollHeight - parent.height()); } _prevBottom = parent[0].scrollHeight - parent.height(); diff --git a/src/components/NewContainerSearch.react.js b/src/components/NewContainerSearch.react.js index d5ce1ab14a..7465a5ff70 100644 --- a/src/components/NewContainerSearch.react.js +++ b/src/components/NewContainerSearch.react.js @@ -126,7 +126,7 @@ module.exports = React.createClass({

Please verify your Docker Hub account email address

- {spinner} + {spinner}
diff --git a/styles/left-panel.less b/styles/left-panel.less index 3245ad5b17..6ca8a99eb1 100644 --- a/styles/left-panel.less +++ b/styles/left-panel.less @@ -131,7 +131,7 @@ } li { vertical-align: middle; - padding: 0.7rem 1rem 0.7rem 1.4rem; + padding: 0.5rem 1rem 0.7rem 1.4rem; display: flex; flex-direction: row; height: 45px; @@ -147,14 +147,14 @@ max-width: @sidebar-text-overflow-width; white-space: nowrap; overflow: hidden; - font-size: 12px; + font-size: 13px; font-weight: 400; color: @gray-darkest; } .image { margin-top: -0.1rem; color: @gray-light; - font-size: 10px; + font-size: 11px; font-weight: 400; text-overflow: ellipsis; max-width: @sidebar-text-overflow-width; diff --git a/styles/new-container.less b/styles/new-container.less index 0aaa7c2d11..f65c95c323 100644 --- a/styles/new-container.less +++ b/styles/new-container.less @@ -235,7 +235,7 @@ overflow: auto; padding: 0.5rem; .tag { - font-size: 10px; + font-size: 11px; padding: 0.3rem 0.6rem; display: inline-block; flex: 0 auto; @@ -309,7 +309,7 @@ position: relative; width: 190px; .namespace { - font-size: 10px; + font-size: 11px; color: @gray-normal; &.official { color: @brand-action; @@ -326,10 +326,10 @@ } } .description { - font-size: 10px; + font-size: 11px; color: @gray-light; padding-right: 1rem; - height: 44px; + height: 48px; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; @@ -346,7 +346,7 @@ border-top: 1px solid @color-divider; .favorites { flex: 1 auto; - font-size: 10px; + font-size: 11px; color: @gray-normal; border-right: 1px solid @color-divider; padding: 1.1rem 1.2rem; @@ -363,7 +363,7 @@ } .tags { flex: 1 auto; - font-size: 10px; + font-size: 11px; color: @gray-darker; padding-left: 1rem; .key { diff --git a/styles/right-panel.less b/styles/right-panel.less index 71d5ea0dd3..9240945e34 100644 --- a/styles/right-panel.less +++ b/styles/right-panel.less @@ -87,7 +87,7 @@ } .btn-label { text-align: center; - font-size: 9px; + font-size: 10px; position: relative; top: -0.5rem; } @@ -184,6 +184,23 @@ margin-bottom: 20px; text-align: center; } + &.error { + p { + color: @gray-darker; + &.error-message { + span { + display: block; + margin-bottom: 0.5rem; + } + text-align: center; + color: @brand-negative; + background-color: lighten(@brand-negative, 32%); + padding: 1rem; + border-radius: @border-radius; + -webkit-user-select: text; + } + } + } } .details-panel { flex: 1 auto; diff --git a/styles/theme.less b/styles/theme.less index 65c37aab87..1f2a8bd5bc 100644 --- a/styles/theme.less +++ b/styles/theme.less @@ -249,7 +249,8 @@ input[type="text"] { border-radius: 100%; &.small { width: 22px; - padding: 3px 5px 4px 5px; + height: 22px; + padding: 0.4rem 0.55rem; .icon { &::before { -webkit-font-smoothing: subpixel-antialiased; diff --git a/styles/variables.less b/styles/variables.less index c1bdae289f..a98c2fe98d 100644 --- a/styles/variables.less +++ b/styles/variables.less @@ -33,4 +33,4 @@ @container-state-size: 20px; @image-card-width: 260px; -@image-card-height: 130px; +@image-card-height: 135px;