The following pull request was submitted through Github. It can be accessed and reviewed at: https://github.com/lxc/linuxcontainers.org/pull/344
This e-mail was sent by the LXC bot, direct replies will not reach the author unless they happen to be subscribed to this list. === Description (from pull-request) === ## Done Updated Vanilla Framework to 1.8 and updated the markup/classes where necessary. ## QA Run the site locally and click through the pages. Check functionality at all viewport sizes (especially the updated nav component)
From 892d7862ea47e09355af03b834f9f96940c9ee46 Mon Sep 17 00:00:00 2001 From: deadlight <k...@deadlight.net> Date: Tue, 18 Dec 2018 10:11:32 +0000 Subject: [PATCH 1/7] Fix markdown requirement to <3.0.0 --- README.md | 6 +++--- requirements.txt | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index a280184..3ff6b52 100644 --- a/README.md +++ b/README.md @@ -10,13 +10,13 @@ part is located at https://github.com/lxc/lxd-demo-server * python3 (>= 3.3) * python3-bs4 * python3-jinja2 - * python3-markdown + * python3-markdown (<3.0.0) * python3-pygments ## Generating the website ./generate - + ## Launching website within container Make sure that the container has access to the website folder that you just cloned. @@ -27,7 +27,7 @@ After generating the website(above), run these commands(Ubuntu-specific) within cd output python3 -m http.server 8777 - + You now need to obtain the IP address for the specific container. You can now navigate to the site (from the host) with the following example IP address: > 185.5.3.12:8777 diff --git a/requirements.txt b/requirements.txt index 8bcd107..766099c 100644 --- a/requirements.txt +++ b/requirements.txt @@ -1,5 +1,5 @@ beautifulsoup4 jinja2 -markdown +markdown==3.0.0 pygments pyyaml From 9e7d5df0c58dce377873fcffa1d24043ce4ea128 Mon Sep 17 00:00:00 2001 From: deadlight <k...@deadlight.net> Date: Tue, 18 Dec 2018 11:16:17 +0000 Subject: [PATCH 2/7] Update css link to vanilla-framework 1.8.0 --- templates/common/base.tpl.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/common/base.tpl.html b/templates/common/base.tpl.html index a0d85c9..8dc2ef6 100644 --- a/templates/common/base.tpl.html +++ b/templates/common/base.tpl.html @@ -11,7 +11,7 @@ {% else %} <title>Linux Containers</title> {% endif %} - <link rel="stylesheet" href="https://assets.ubuntu.com/v1/vanilla-framework-version-1.6.3.min.css" /> + <link rel="stylesheet" href="https://assets.ubuntu.com/v1/vanilla-framework-version-1.8.0.min.css" /> <link href="/static/css/local.css" rel="stylesheet"/> <link href="/static/css/pygments.css" rel="stylesheet"/> From 408c6d537b9098ae4dc50a95d9cf6ad46e23cecc Mon Sep 17 00:00:00 2001 From: deadlight <k...@deadlight.net> Date: Tue, 18 Dec 2018 11:16:43 +0000 Subject: [PATCH 3/7] Remove override for issue fixed upstream --- static/css/local.css | 21 --------------------- 1 file changed, 21 deletions(-) diff --git a/static/css/local.css b/static/css/local.css index b16e770..624fc53 100644 --- a/static/css/local.css +++ b/static/css/local.css @@ -715,24 +715,3 @@ pre { #tryit_feedback .js-collapsable.is-hidden ~ .panel-body { display: none; } - -/* -XXX Ant: 04.12.17 This can be removed when this is fixed -https://github.com/vanilla-framework/vanilla-framework/issues/1478 -*/ -.u-align--center h1, -.u-align--center h2, -.u-align--center h3, -.u-align--center h4, -.u-align--center h5, -.u-align--center h6, -.u-align--center p, -h1.u-align--center, -h2.u-align--center, -h3.u-align--center, -h4.u-align--center, -h5.u-align--center, -h6.u-align--center, -p.u-align--center { - max-width: none; -} From 43e2208b18f57141016a31660ab5e38da45f59a4 Mon Sep 17 00:00:00 2001 From: deadlight <k...@deadlight.net> Date: Tue, 18 Dec 2018 11:30:34 +0000 Subject: [PATCH 4/7] Fix css formatting --- static/css/local.css | 211 +++++++++++++++++++++++++++++-------------- 1 file changed, 144 insertions(+), 67 deletions(-) diff --git a/static/css/local.css b/static/css/local.css index 624fc53..ccf3fed 100644 --- a/static/css/local.css +++ b/static/css/local.css @@ -1,17 +1,17 @@ body { - padding-top: 0 !important; + padding-top: 0 !important; } .hover-menu li { - color: #999; - cursor: auto; + color: #999; + cursor: auto; } /* paragraph anchors as generated by markdown toc */ a.headerlink { - color:inherit; - visibility:hidden; - text-decoration:none; + color:inherit; + text-decoration:none; + visibility:hidden; } h1:hover a.headerlink, h2:hover a.headerlink, @@ -20,18 +20,18 @@ h3:hover a.headerlink { } .divider { - height: 1px; - padding: 0; - margin-bottom: -10px; - border-top: 1px solid #999; + border-top: 1px solid #999; + height: 1px; + margin-bottom: -10px; + padding: 0; } .symbol { - display: inline-block; border-radius: 50%; border: 5px double white; - width: 30px; + display: inline-block; height: 30px; + width: 30px; } .symbol-empty { @@ -43,40 +43,40 @@ h3:hover a.headerlink { } .dropdown-submenu:hover .dropdown-menu { - display: block; + display: block; } @media only screen and (min-width: 768px) { - .dropdown-submenu .dropdown-menu { - display: none; - position: absolute; - left: 90%; - margin-top: -30px; background: #f7f7f7; - border: 1px solid #cdcdcd; border-radius: 10px; + border: 1px solid #cdcdcd; box-shadow: 0 2px 2px -1px #cdcdcd; - width: 200px; - padding-top: .3rem; + display: none; + left: 90%; + margin-top: -30px; padding-bottom: .8rem; + padding-top: .3rem; + position: absolute; + width: 200px; } .dropdown-submenu .dropdown-menu.columns { - width: 300px; + width: 300px; } .dropdown-submenu .dropdown-menu.columns li { - float: left; - width: 140px; - margin-top: 0; + float: left; + margin-top: 0; + width: 140px; } + .dropdown-menu::after { - transform: rotate(-90deg); - left: -48px !important; - width: 90px !important; - top: 0 !important; + left: -48px !important; + top: 0 !important; + transform: rotate(-90deg); + width: 90px !important; } } @@ -96,40 +96,47 @@ html { background-color: #e95420; border-bottom: 1px solid transparent; color: #f7f7f7; + font-weight: 400; + margin-bottom: 0; margin-top: 0; position: relative; width: 100%; - font-weight: 400; - margin-bottom: 0; } + .p-navigation .row { padding: 0; } + @media (max-width: 768px) { .p-navigation .p-navigation__banner { overflow: hidden; position: relative; } } + .p-navigation .p-navigation__toggle--open, .p-navigation .p-navigation__toggle--close, .p-navigation .p-navigation__link { color: #f7f7f7; } + .p-navigation .p-navigation__toggle--open:hover, .p-navigation .p-navigation__toggle--close:hover, .p-navigation .p-navigation__link:hover { border-bottom: 0; text-decoration: underline; } + .p-navigation .p-navigation__toggle--open:visited, .p-navigation .p-navigation__toggle--close:visited, .p-navigation .p-navigation__link:visited { color: #f7f7f7; } + .p-navigation .p-navigation__toggle--close { display: none; } + .p-navigation .p-navigation__toggle--open, .p-navigation .p-navigation__toggle--close { margin: 0; @@ -137,47 +144,54 @@ html { right: 1rem; top: calc(50% - .75rem); } + @media (min-width: 769px) { .p-navigation .p-navigation__toggle--open, .p-navigation .p-navigation__toggle--close { display: none; } } + .p-navigation .p-navigation__logo { - font-size: 1.375rem; - font-weight: 300; - line-height: 1.364; - -webkit-box-align: center; + align-items: center; + -ms-flex-align: center; -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; + -webkit-box-align: center; + display: -ms-flexbox; display: -webkit-box; display: -webkit-flex; - display: -ms-flexbox; display: flex; float: left; + font-size: 1.375rem; + font-weight: 300; + line-height: 1.364; margin: 0.75rem 0.5rem; } + @media only screen and (min-width: 1030px) { .p-navigation .p-navigation__logo { font-size: 1.5rem; line-height: 1.25; } } + @media (min-width: 769px) { .p-navigation .p-navigation__logo { margin: 0.5rem 1.25rem; } } + .p-navigation .p-navigation__image { float: left; height: 2rem; } + .p-navigation .p-navigation__link { border-bottom: 0; display: block; margin-top: 0; } + @media (min-width: 769px) { .p-navigation .p-navigation__link { display: block; @@ -185,24 +199,29 @@ html { width: auto; } } + .p-navigation .p-navigation__link, .p-navigation .p-navigation__link > a { border-bottom: 0; display: block; } + .p-navigation .p-navigation__link:hover, .p-navigation .p-navigation__link > a:hover { text-decoration: none; } + .p-navigation .p-navigation__link:last-child { margin-bottom: 0; } + .p-navigation .p-navigation__links { background-color: #cdcdcd; clear: both; margin: 0; padding: 0; } + @media (min-width: 769px) { .p-navigation .p-navigation__links { background-color: transparent; @@ -210,9 +229,11 @@ html { float: left; } } + .p-navigation .p-navigation__links .p-navigation__link { border-left: 1px solid #cdcdcd; } + @media (max-width: 768px) { .p-navigation .p-navigation__links .p-navigation__link { background-color: #f7f7f7; @@ -221,16 +242,19 @@ html { color: #111; text-align: left; } + .p-navigation .p-navigation__links .p-navigation__link:last-child { border-bottom: 1px solid #cdcdcd; } } + .p-navigation .p-navigation__links .p-navigation__link > a, .p-navigation .p-navigation__links > a { color: #111; font-size: .875rem; padding: 0.84375rem 0.5rem; } + @media (min-width: 769px) { .p-navigation .p-navigation__links .p-navigation__link > a, .p-navigation .p-navigation__links > a { @@ -243,95 +267,115 @@ html { .p-navigation .p-navigation__links:last-of-type { border-color: #ee784e; } + @media (max-width: 769px) { .p-navigation .p-navigation__links { border-right: 1px solid #cdcdcd; } } + @media (max-width: 768px) { .p-navigation .p-navigation__links:last-of-type { border-bottom: 0; border-right: 0; } } + .p-navigation .p-navigation__nav { display: none; margin-top: 0; } + @media (min-width: 769px) { .p-navigation .p-navigation__nav { display: block; } } + .p-navigation:target .p-navigation__toggle--open { display: none; } + @media (max-width: 768px) { .p-navigation:target .p-navigation__toggle--close { display: inline-block; } } + .p-navigation:target .p-navigation__nav { display: block; } + @media (max-width: 768px) { .p-navigation { border-bottom: 1px solid #f7f7f7; font-weight: 300; } } + @media (max-width: 768px) { .p-navigation .p-navigation__toggle--open, .p-navigation .p-navigation__toggle--close { top: .875rem; } } + .p-navigation__logo { margin: 0; padding: 0; } + @media (min-width: 768px) and (max-width: 1030px) { .p-navigation__logo { margin-left: 0; padding-left: 0; } } + @media (min-width: 1030px) { .p-navigation__row { position: relative; } } + .p-navigation .p-navigation__links .p-navigation__link { border-right: 1px solid #cdcdcd; font-size: .875rem; padding: 0; position: relative; } + @media (min-width: 768px) { .p-navigation .p-navigation__links .p-navigation__link { border-color: #ee784e; border-right: 0; } } + .p-navigation .p-navigation__links .p-navigation__link:hover { cursor: pointer; } + @media (max-width: 767px) { .p-navigation .p-navigation__links .p-navigation__link > a { padding: 0.75rem 1rem; } + .p-navigation .p-navigation__links .p-navigation__link > a.is-active { background-color: #cdcdcd; } } + @media (min-width: 768px) { .p-navigation .p-navigation__links .p-navigation__link > a { display: inline-block; padding: 1rem 0.75rem; } + .p-navigation .p-navigation__links .p-navigation__link > a.is-active { background-color: #c34113; } + .p-navigation .p-navigation__links .p-navigation__link:hover { background-color: #ee784e; } @@ -345,17 +389,20 @@ html { .nav-secondary .p-inline-list__link { display: inline-block; } + @media (min-width: 768px) and (max-width: 1030px) { .nav-secondary { border-top: 1px solid #cdcdcd; white-space: nowrap; } } + @media (max-width: 767px) { .nav-secondary__row.row { padding: 0; } } + @media (min-width: 768px) { .nav-secondary__row { padding: 0 0.75rem; @@ -367,31 +414,35 @@ html { font-size: .875rem; font-weight: 300; } + @media (max-width: 767px) { .nav-secondary { background: #fff; } + .nav-secondary .p-breadcrumbs { - position: relative; - left: 50%; + -ms-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); - -ms-transform: translate(-50%, 0); - transform: translate(-50%, 0); - width: 100vw; border-bottom: 1px solid #cdcdcd; + left: 50%; overflow-x: hidden; padding: 0 20px; + position: relative; + transform: translate(-50%, 0); + width: 100vw; } + .nav-secondary .p-breadcrumbs__item { + -ms-transform: translate(-50%, 0); + -webkit-transform: translate(-50%, 0); left: 50%; margin-left: 0; + padding: .5rem 0; position: relative; - -webkit-transform: translate(-50%, 0); - -ms-transform: translate(-50%, 0); - transform: translate(-50%, 0); + transform: translate(-50%, 0); width: 100%; - padding: .5rem 0; } + .nav-secondary .p-breadcrumbs__link { border-bottom: 1px solid #cdcdcd; color: #111; @@ -400,9 +451,11 @@ html { padding: 0.75rem 1rem; width: 100%; } + .nav-secondary__menu { width: 100%; } + .nav-secondary__menu .p-inline-list__item { float: left; margin-right: 0; @@ -410,9 +463,11 @@ html { padding-left: 0.5rem; width: 50%; } + .nav-secondary__menu .p-inline-list__item .is-active { font-weight: bold; } + .nav-secondary__menu .p-inline-list__link { color: #000; display: inline-block; @@ -423,38 +478,45 @@ html { top: .5rem; } } + .nav-secondary__menu { display: inline-block; margin-top: 0; position: relative; } + @media (min-width: 768px) { .nav-secondary__menu { margin-left: 1.5rem; vertical-align: top; } } + .nav-secondary a { color: #111; } + .nav-secondary a.is-active { color: #e95420; } + @media (min-width: 768px) { .nav-secondary { - position: relative; - left: 50%; + -ms-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); - -ms-transform: translate(-50%, 0); - transform: translate(-50%, 0); background: #f7f7f7; border-bottom: 1px solid #cdcdcd; + left: 50%; padding: 0.5rem 0 0.75rem; + position: relative; + transform: translate(-50%, 0); white-space: nowrap; } + .nav-secondary .p-breadcrumbs__item { margin-bottom: 0; } + .nav-secondary__menu::before { color: #666; content: '\203A'; @@ -463,14 +525,17 @@ html { position: absolute; top: 0; } + .nav-secondary .p-breadcrumbs__link { color: #666; } } + @media (min-width: 768px) { .nav-secondary .p-breadcrumbs__link + .second-level-nav { position: relative; } + .nav-secondary .p-breadcrumbs__link + .second-level-nav::before { color: #666; content: '\203A'; @@ -486,6 +551,7 @@ html { padding: 0 0.75rem; } } + .nav-secondary .p-navigation__row { padding-left: 0.5rem; padding-right: 0.5rem; @@ -504,6 +570,7 @@ html { .p-navigation__link:hover .hover-menu { display: block; } + .p-navigation__link:hover .hover-menu .p-inline-list__item { display: block; } @@ -519,48 +586,57 @@ html { width: 200px; z-index: 999; } + .hover-menu { background: #f7f7f7; - border: 1px solid #cdcdcd; border-radius: 10px; + border: 1px solid #cdcdcd; box-shadow: 0 2px 2px -1px #cdcdcd; display: none; float: none; left: 0; margin: 0; + min-width: 200px; padding: 0.5rem 0 1rem; position: absolute; top: 58px; width: auto; - min-width: 200px; z-index: 1; } + .hover-menu::before { display: none; } + .hover-menu li { font-size: .875rem; padding: 0.5rem 0.75rem 0 0.75rem; } + .hover-menu li:last-child { padding-bottom: 0; } + .hover-menu a { color: #111 !important; white-space: nowrap; } + .hover-menu .is-active a { color: #e95420 !important; } + .u-float-right .hover-menu { - right: 0; left: auto; + right: 0; text-align: right; } + .p-navigation .p-navigation__nav.u-float-right ul li:hover ul::after { background-position-x: 90%; } } + @media (max-width: 767px) { .p-navigation__links > .p-navigation__link:hover .hover-menu { display: block; @@ -576,11 +652,13 @@ html { margin-bottom: 0; padding-left: 0; } + @media (max-width: 767px) { .p-breadcrumbs__link + .second-level-nav, .p-breadcrumbs__link + .second-level-nav .p-breadcrumbs__link { width: 100%; } } + .second-level-nav .p-breadcrumbs__link { border-bottom: 0; padding-bottom: 0; @@ -622,19 +700,19 @@ p:empty { } #tryit_console_measurement { - color: white; - display: block; - float: left; border-color: black; border-style: solid; border-width: 5px 5px 5px 5px; + color: white; + display: block; + float: left; position: absolute; top: -1000px; } .tryit_run:hover { - text-decoration: underline; cursor: pointer; + text-decoration: underline; } .terminal { @@ -662,15 +740,14 @@ pre { margin-top: .5rem; } - .glyphicon { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + height: 24px; position: relative; top: 1px; - display: inline-block; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; width: 24px; - height: 24px; } .rating-symbol-background { @@ -681,9 +758,9 @@ pre { .rating-symbol-foreground { background-image: url('/static/img/starred_24.svg'); background-repeat: no-repeat; + margin-top: 0; position: relative; top: 1px; - margin-top: 0; } #tryit_feedback_submit > .p-form__group span + span { @@ -696,12 +773,12 @@ pre { } .js-collapsable { - cursor: pointer; background-image: url('/static/img/chevron_up.svg'); - background-repeat: no-repeat; background-position: right center; - padding-right: 22px; + background-repeat: no-repeat; background-size: 14px; + cursor: pointer; + padding-right: 22px; } .js-collapsable.is-hidden { From b10795092f6bba09b63f79e1c4f20c77e74e760b Mon Sep 17 00:00:00 2001 From: deadlight <k...@deadlight.net> Date: Wed, 13 Feb 2019 13:05:46 +0000 Subject: [PATCH 5/7] Styling, javascript and markup for the navigation menus --- static/css/local.css | 691 ++++--------------------------- static/js/navigation.js | 82 ++++ templates/common/base.tpl.html | 101 +++-- templates/common/header.tpl.html | 155 +++---- 4 files changed, 277 insertions(+), 752 deletions(-) create mode 100644 static/js/navigation.js diff --git a/static/css/local.css b/static/css/local.css index ccf3fed..c0be8b5 100644 --- a/static/css/local.css +++ b/static/css/local.css @@ -2,11 +2,6 @@ body { padding-top: 0 !important; } -.hover-menu li { - color: #999; - cursor: auto; -} - /* paragraph anchors as generated by markdown toc */ a.headerlink { color:inherit; @@ -16,7 +11,7 @@ a.headerlink { h1:hover a.headerlink, h2:hover a.headerlink, h3:hover a.headerlink { - visibility:visible; + visibility:visible; } .divider { @@ -46,607 +41,10 @@ h3:hover a.headerlink { display: block; } - -@media only screen and (min-width: 768px) { - .dropdown-submenu .dropdown-menu { - background: #f7f7f7; - border-radius: 10px; - border: 1px solid #cdcdcd; - box-shadow: 0 2px 2px -1px #cdcdcd; - display: none; - left: 90%; - margin-top: -30px; - padding-bottom: .8rem; - padding-top: .3rem; - position: absolute; - width: 200px; - } - - .dropdown-submenu .dropdown-menu.columns { - width: 300px; - } - - .dropdown-submenu .dropdown-menu.columns li { - float: left; - margin-top: 0; - width: 140px; - } - - .dropdown-menu::after { - left: -48px !important; - top: 0 !important; - transform: rotate(-90deg); - width: 90px !important; - } -} - html { overflow-x: hidden !important; } - -/* Navigation */ -.p-navigation::after { - clear: both; - content: ''; - display: block; -} - -.p-navigation { - background-color: #e95420; - border-bottom: 1px solid transparent; - color: #f7f7f7; - font-weight: 400; - margin-bottom: 0; - margin-top: 0; - position: relative; - width: 100%; -} - -.p-navigation .row { - padding: 0; -} - -@media (max-width: 768px) { - .p-navigation .p-navigation__banner { - overflow: hidden; - position: relative; - } -} - -.p-navigation .p-navigation__toggle--open, -.p-navigation .p-navigation__toggle--close, -.p-navigation .p-navigation__link { - color: #f7f7f7; -} - -.p-navigation .p-navigation__toggle--open:hover, -.p-navigation .p-navigation__toggle--close:hover, -.p-navigation .p-navigation__link:hover { - border-bottom: 0; - text-decoration: underline; -} - -.p-navigation .p-navigation__toggle--open:visited, -.p-navigation .p-navigation__toggle--close:visited, -.p-navigation .p-navigation__link:visited { - color: #f7f7f7; -} - -.p-navigation .p-navigation__toggle--close { - display: none; -} - -.p-navigation .p-navigation__toggle--open, -.p-navigation .p-navigation__toggle--close { - margin: 0; - position: absolute; - right: 1rem; - top: calc(50% - .75rem); -} - -@media (min-width: 769px) { - .p-navigation .p-navigation__toggle--open, - .p-navigation .p-navigation__toggle--close { - display: none; - } -} - -.p-navigation .p-navigation__logo { - align-items: center; - -ms-flex-align: center; - -webkit-align-items: center; - -webkit-box-align: center; - display: -ms-flexbox; - display: -webkit-box; - display: -webkit-flex; - display: flex; - float: left; - font-size: 1.375rem; - font-weight: 300; - line-height: 1.364; - margin: 0.75rem 0.5rem; -} - -@media only screen and (min-width: 1030px) { - .p-navigation .p-navigation__logo { - font-size: 1.5rem; - line-height: 1.25; - } -} - -@media (min-width: 769px) { - .p-navigation .p-navigation__logo { - margin: 0.5rem 1.25rem; - } -} - -.p-navigation .p-navigation__image { - float: left; - height: 2rem; -} - -.p-navigation .p-navigation__link { - border-bottom: 0; - display: block; - margin-top: 0; -} - -@media (min-width: 769px) { - .p-navigation .p-navigation__link { - display: block; - float: left; - width: auto; - } -} - -.p-navigation .p-navigation__link, -.p-navigation .p-navigation__link > a { - border-bottom: 0; - display: block; -} - -.p-navigation .p-navigation__link:hover, -.p-navigation .p-navigation__link > a:hover { - text-decoration: none; -} - -.p-navigation .p-navigation__link:last-child { - margin-bottom: 0; -} - -.p-navigation .p-navigation__links { - background-color: #cdcdcd; - clear: both; - margin: 0; - padding: 0; -} - -@media (min-width: 769px) { - .p-navigation .p-navigation__links { - background-color: transparent; - clear: none; - float: left; - } -} - -.p-navigation .p-navigation__links .p-navigation__link { - border-left: 1px solid #cdcdcd; -} - -@media (max-width: 768px) { - .p-navigation .p-navigation__links .p-navigation__link { - background-color: #f7f7f7; - border-left: 0; - border-top: 1px solid #cdcdcd; - color: #111; - text-align: left; - } - - .p-navigation .p-navigation__links .p-navigation__link:last-child { - border-bottom: 1px solid #cdcdcd; - } -} - -.p-navigation .p-navigation__links .p-navigation__link > a, -.p-navigation .p-navigation__links > a { - color: #111; - font-size: .875rem; - padding: 0.84375rem 0.5rem; -} - -@media (min-width: 769px) { - .p-navigation .p-navigation__links .p-navigation__link > a, - .p-navigation .p-navigation__links > a { - color: #f7f7f7; - padding-left: 1.25rem; - padding-right: 1.25rem; - } -} - -.p-navigation .p-navigation__links:last-of-type { - border-color: #ee784e; -} - -@media (max-width: 769px) { - .p-navigation .p-navigation__links { - border-right: 1px solid #cdcdcd; - } -} - -@media (max-width: 768px) { - .p-navigation .p-navigation__links:last-of-type { - border-bottom: 0; - border-right: 0; - } -} - -.p-navigation .p-navigation__nav { - display: none; - margin-top: 0; -} - -@media (min-width: 769px) { - .p-navigation .p-navigation__nav { - display: block; - } -} - -.p-navigation:target .p-navigation__toggle--open { - display: none; -} - -@media (max-width: 768px) { - .p-navigation:target .p-navigation__toggle--close { - display: inline-block; - } -} - -.p-navigation:target .p-navigation__nav { - display: block; -} - -@media (max-width: 768px) { - .p-navigation { - border-bottom: 1px solid #f7f7f7; - font-weight: 300; - } -} - -@media (max-width: 768px) { - .p-navigation .p-navigation__toggle--open, - .p-navigation .p-navigation__toggle--close { - top: .875rem; - } -} - -.p-navigation__logo { - margin: 0; - padding: 0; -} - -@media (min-width: 768px) and (max-width: 1030px) { - .p-navigation__logo { - margin-left: 0; - padding-left: 0; - } -} - -@media (min-width: 1030px) { - .p-navigation__row { - position: relative; - } -} - -.p-navigation .p-navigation__links .p-navigation__link { - border-right: 1px solid #cdcdcd; - font-size: .875rem; - padding: 0; - position: relative; -} - -@media (min-width: 768px) { - .p-navigation .p-navigation__links .p-navigation__link { - border-color: #ee784e; - border-right: 0; - } -} - -.p-navigation .p-navigation__links .p-navigation__link:hover { - cursor: pointer; -} - -@media (max-width: 767px) { - .p-navigation .p-navigation__links .p-navigation__link > a { - padding: 0.75rem 1rem; - } - - .p-navigation .p-navigation__links .p-navigation__link > a.is-active { - background-color: #cdcdcd; - } -} - -@media (min-width: 768px) { - .p-navigation .p-navigation__links .p-navigation__link > a { - display: inline-block; - padding: 1rem 0.75rem; - } - - .p-navigation .p-navigation__links .p-navigation__link > a.is-active { - background-color: #c34113; - } - - .p-navigation .p-navigation__links .p-navigation__link:hover { - background-color: #ee784e; - } -} - -.p-navigation .p-navigation__logo { - margin: 0.75rem 0.75rem 0.5rem 1rem; - padding: 0; -} - -.nav-secondary .p-inline-list__link { - display: inline-block; -} - -@media (min-width: 768px) and (max-width: 1030px) { - .nav-secondary { - border-top: 1px solid #cdcdcd; - white-space: nowrap; - } -} - -@media (max-width: 767px) { - .nav-secondary__row.row { - padding: 0; - } -} - -@media (min-width: 768px) { - .nav-secondary__row { - padding: 0 0.75rem; - } -} - -.nav-secondary .p-inline-list__link, -.nav-secondary .p-breadcrumbs__link{ - font-size: .875rem; - font-weight: 300; -} - -@media (max-width: 767px) { - .nav-secondary { - background: #fff; - } - - .nav-secondary .p-breadcrumbs { - -ms-transform: translate(-50%, 0); - -webkit-transform: translate(-50%, 0); - border-bottom: 1px solid #cdcdcd; - left: 50%; - overflow-x: hidden; - padding: 0 20px; - position: relative; - transform: translate(-50%, 0); - width: 100vw; - } - - .nav-secondary .p-breadcrumbs__item { - -ms-transform: translate(-50%, 0); - -webkit-transform: translate(-50%, 0); - left: 50%; - margin-left: 0; - padding: .5rem 0; - position: relative; - transform: translate(-50%, 0); - width: 100%; - } - - .nav-secondary .p-breadcrumbs__link { - border-bottom: 1px solid #cdcdcd; - color: #111; - display: inline-block; - margin-bottom: 0.5rem; - padding: 0.75rem 1rem; - width: 100%; - } - - .nav-secondary__menu { - width: 100%; - } - - .nav-secondary__menu .p-inline-list__item { - float: left; - margin-right: 0; - margin-top: 0; - padding-left: 0.5rem; - width: 50%; - } - - .nav-secondary__menu .p-inline-list__item .is-active { - font-weight: bold; - } - - .nav-secondary__menu .p-inline-list__link { - color: #000; - display: inline-block; - padding: 0.5rem; - } - - .p-breadcrumbs__item:not(:first-of-type):before { - top: .5rem; - } -} - -.nav-secondary__menu { - display: inline-block; - margin-top: 0; - position: relative; -} - -@media (min-width: 768px) { - .nav-secondary__menu { - margin-left: 1.5rem; - vertical-align: top; - } -} - -.nav-secondary a { - color: #111; -} - -.nav-secondary a.is-active { - color: #e95420; -} - -@media (min-width: 768px) { - .nav-secondary { - -ms-transform: translate(-50%, 0); - -webkit-transform: translate(-50%, 0); - background: #f7f7f7; - border-bottom: 1px solid #cdcdcd; - left: 50%; - padding: 0.5rem 0 0.75rem; - position: relative; - transform: translate(-50%, 0); - white-space: nowrap; - } - - .nav-secondary .p-breadcrumbs__item { - margin-bottom: 0; - } - - .nav-secondary__menu::before { - color: #666; - content: '\203A'; - font-weight: 400; - left: -0.75rem; - position: absolute; - top: 0; - } - - .nav-secondary .p-breadcrumbs__link { - color: #666; - } -} - -@media (min-width: 768px) { - .nav-secondary .p-breadcrumbs__link + .second-level-nav { - position: relative; - } - - .nav-secondary .p-breadcrumbs__link + .second-level-nav::before { - color: #666; - content: '\203A'; - font-weight: 400; - left: -0.5rem; - position: absolute; - top: 0; - } -} - -@media (min-width: 1030px) { - .nav-secondary__row { - padding: 0 0.75rem; - } -} - -.nav-secondary .p-navigation__row { - padding-left: 0.5rem; - padding-right: 0.5rem; -} - -.hover-menu { - background: #f7f7f7; - border: 1px solid #cdcdcd; - display: none; - float: none; - margin: 0; - padding: 0.5rem 0 1rem; -} - -@media (min-width: 769px) { - .p-navigation__link:hover .hover-menu { - display: block; - } - - .p-navigation__link:hover .hover-menu .p-inline-list__item { - display: block; - } - - .p-navigation .p-navigation__nav ul li:hover ul::after { - background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QYODgYVPPJJpQAAAT9JREFUKM+dkD9IAnEUx7+/IkVxFaxoKYxIWhqKwJw0JAJ315Yac8+1tUFo6HCp34XRdRp11z+J4BzckqShPzdEQ5G/EhPO6V5Tcg3G0QcePHjvffjygB4oXAIApFMxyPlcWM7nwulU7NfMNQqXGABsZNcCCpcKtapBtapBCpcK2fXlAAAcy3vMlUxTdgEAO9ubybPiPjWFoE6nQ5ZlUfNDULl0RAdSPuncddL30+gnCgOAlngLaocyn4nG9fmFJXj9fhARAMDr82MuEcfk7LSuFQu8DTvovO1SuTxlAKCqPFO5Ov/6FIIsy/qzROOdrst6S1V5xunomo0LrT4yOh4JDg6BMXfvIdvGs/mExutLPZpYnAIAdmNUVuwBbI1NRODxePEf2u0WHu9u4ev3rTLTfKBQaNh1qp5piWCa9/gGBheo3r6AmYcAAAAASUVORK5CYII=") 1.5rem bottom no-repeat; - content: ''; - display: block; - height: 0.5rem; - left: 0; - position: absolute; - top: -0.5rem; - width: 200px; - z-index: 999; - } - - .hover-menu { - background: #f7f7f7; - border-radius: 10px; - border: 1px solid #cdcdcd; - box-shadow: 0 2px 2px -1px #cdcdcd; - display: none; - float: none; - left: 0; - margin: 0; - min-width: 200px; - padding: 0.5rem 0 1rem; - position: absolute; - top: 58px; - width: auto; - z-index: 1; - } - - .hover-menu::before { - display: none; - } - - .hover-menu li { - font-size: .875rem; - padding: 0.5rem 0.75rem 0 0.75rem; - } - - .hover-menu li:last-child { - padding-bottom: 0; - } - - .hover-menu a { - color: #111 !important; - white-space: nowrap; - } - - .hover-menu .is-active a { - color: #e95420 !important; - } - - .u-float-right .hover-menu { - left: auto; - right: 0; - text-align: right; - } - - .p-navigation .p-navigation__nav.u-float-right ul li:hover ul::after { - background-position-x: 90%; - } -} - -@media (max-width: 767px) { - .p-navigation__links > .p-navigation__link:hover .hover-menu { - display: block; - } - - .hover-menu li { - padding: .25rem 1rem; - } -} - .p-breadcrumbs__link + .second-level-nav, .p-breadcrumbs__link + .second-level-nav .p-breadcrumbs__link { display: inline-block; margin-bottom: 0; @@ -792,3 +190,90 @@ pre { #tryit_feedback .js-collapsable.is-hidden ~ .panel-body { display: none; } + +/* NAVIGATION */ +.p-navigation__logo { + font-size: 1.5rem; + line-height: 3rem; +} + +.p-navigation__link { + position: relative; +} + +.p-navigation__sub-links { + background-color: #fff; + opacity: 0; + padding: 0; + transition: all 0.5s ease; + z-index: 100; +} + +.p-dropdown { + display: none; + margin: 0; + visibility: hidden; +} + +@media (min-width: 769px) { + .p-navigation__sub-links { + border-color: #cdcdcd; + border-style: solid; + border-width: 0 1px 1px; + left: 0; + position: absolute; + width: 20rem; + } + + .p-navigation__sub-links.is-split { + -moz-column-count: 2; + -moz-column-gap: 0; + -webkit-column-count: 2; + -webkit-column-gap: 0; + column-count: 2; + column-gap: 0; + } + + .p-navigation__sub-links.is-split li { + -webkit-column-break-inside: avoid; + page-break-inside: avoid; + break-inside: avoid; + } + + .p-navigation__sub-links .p-navigation__sub-links { + border-width: 1px; + left: 19.875rem; + top: 0; + } +} + +.p-dropdown__toggle { + position: relative; +} + +.p-dropdown__toggle.is-active > .p-dropdown { + display: block; + opacity: 1; + visibility: visible; +} + +.p-navigation__sub-link { + display: block; + font-size: .875rem; + padding: .5rem 1rem; +} + +@media (max-width: 768px) { + .p-navigation__sub-link { + padding: .5rem 1.5rem; + } +} + +.p-navigation__sub-link:not(.p-heading--five):hover { + background-color: #f7f7f7; +} + +/* Custom strip */ +.is-x-shallow { + padding: .5rem 0; +} diff --git a/static/js/navigation.js b/static/js/navigation.js new file mode 100644 index 0000000..4f5d1b8 --- /dev/null +++ b/static/js/navigation.js @@ -0,0 +1,82 @@ +var dropdownToggles = document.querySelectorAll('.p-dropdown__toggle'); +var dropdownToggleLinks = document.querySelectorAll('.p-dropdown__toggle-link'); + +function isDescendant(parent, child) { + var node = child.parentNode; + while (node != null) { + if (node == parent) { + return true; + } + node = node.parentNode; + } + return false; +} + +dropdownToggleLinks.forEach(function(dropdownToggleLink) { + dropdownToggleLink.addEventListener('click', function(event) { + event.preventDefault(); + }); +}); + +dropdownToggles.forEach(function(dropdownToggle) { + dropdownToggle.addEventListener('click', function(event) { + event.stopPropagation(); + + var clickedDropdown = this; + + dropdownToggles.forEach(function(dropdownToggle) { + var dropdownContent = document.getElementById(dropdownToggle.id + "-menu"); + + if (dropdownToggle === clickedDropdown) { + if (dropdownToggle.classList.contains('is-active')) { + closeMenu(dropdownToggle, dropdownContent); + } else { + dropdownToggle.classList.add('is-active'); + dropdownContent.classList.remove('u-hide'); + + if (window.history.pushState) { + window.history.pushState(null, null, '#' + dropdownToggle.id); + } + } + } else { + if (!isDescendant(dropdownContent, clickedDropdown)) { + dropdownToggle.classList.remove('is-active'); + dropdownContent.classList.add('u-hide'); + } + } + }); + }); +}); + +function closeMenu(dropdownToggle, dropdownContent) { + dropdownToggle.classList.remove('is-active'); + if (window.history.pushState) { + window.history.pushState(null, null, window.location.href.split('#')[0]); + } +} + +if (window.location.hash) { + var tabId = window.location.hash.split('#')[1]; + var tab = document.getElementById(tabId); + var tabContent = document.getElementById(tabId + '-menu'); + + if (tab) { + setTimeout(function() { + document.getElementById(tabId).click(); + }, 0); + } +} + +function closeMainMenu() { + var navigationLinks = document.querySelectorAll('.p-dropdown__toggle'); + + navigationLinks.forEach(function(navLink) { + navLink.classList.remove('is-active'); + }); +} + +document.addEventListener('click', function(event) { + if (!event.target.closest('.p-dropdown__link') && !event.target.closest('.p-dropdown__toggle a')) { + closeMainMenu(); + } +}); diff --git a/templates/common/base.tpl.html b/templates/common/base.tpl.html index 8dc2ef6..ca4fcba 100644 --- a/templates/common/base.tpl.html +++ b/templates/common/base.tpl.html @@ -1,60 +1,59 @@ <!DOCTYPE html> <html lang="en"> - <head> -{% block head %} - <meta charset="utf-8"/> - <meta name="viewport" content="width=device-width, initial-scale=1.0"/> - <link rel="icon" href="/static/img/favicon.ico"/> - -{% if page_title %} - <title>Linux Containers - {{ page_title }}</title> -{% else %} - <title>Linux Containers</title> -{% endif %} - <link rel="stylesheet" href="https://assets.ubuntu.com/v1/vanilla-framework-version-1.8.0.min.css" /> - <link href="/static/css/local.css" rel="stylesheet"/> - <link href="/static/css/pygments.css" rel="stylesheet"/> - - <!-- Analytics --> - <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-45204001-1', 'auto'); - ga('send', 'pageview'); - </script> -{% endblock %} - </head> - - <body role="document"> -{% include "common/header.tpl.html" %} - -<div class="p-breadcrumbs nav-secondary clearfix"> - <div class="row nav-secondary__row"> - <div class="col-12 u-no-margin--bottom"> - <ul class="p-breadcrumbs u-no-margin--bottom"> -{% if page_menu %} - {% for entry in page_menu %} - <li class="p-breadcrumbs__item">{{ entry }}</li> - {% endfor %} -{% endif %} - </ul> - </div> +<head> + {% block head %} + <meta charset="utf-8"/> + <meta name="viewport" content="width=device-width, initial-scale=1.0"/> + <link rel="icon" href="/static/img/favicon.ico"/> + + {% if page_title %} + <title>Linux Containers - {{ page_title }}</title> + {% else %} + <title>Linux Containers</title> + {% endif %} + <link rel="stylesheet" href="https://assets.ubuntu.com/v1/vanilla-framework-version-1.8.0.min.css" /> + <link href="/static/css/local.css" rel="stylesheet"/> + <link href="/static/css/pygments.css" rel="stylesheet"/> + + <!-- Analytics --> + <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-45204001-1', 'auto'); + ga('send', 'pageview'); + </script> + {% endblock %} +</head> + +<body role="document"> + {% include "common/header.tpl.html" %} + + <section class="p-strip--light is-x-shallow"> + <div class="row"> + <ul class="p-breadcrumbs u-no-margin--bottom"> + {% if page_menu %} + {% for entry in page_menu %} + <li class="p-breadcrumbs__item">{{ entry }}</li> + {% endfor %} + {% endif %} + </ul> </div> -</div> + </section> -<div class="wrapper u-no-margin--top"> + <div class="wrapper u-no-margin--top"> <div class="inner-wrapper" id="main-content"> - {% block content %}{% endblock %} + {% block content %}{% endblock %} </div> -</div> + </div> -{% include ["common/footer." + page_language[0] + ".tpl.html", "common/footer.tpl.html"] %} + {% include ["common/footer." + page_language[0] + ".tpl.html", "common/footer.tpl.html"] %} - <script src="/static/js/jquery.min.js"></script> - <script src="/static/js/bootstrap-rating.min.js"></script> - </div> - </body> + <script src="/static/js/jquery.min.js"></script> + <script src="/static/js/bootstrap-rating.min.js"></script> + <script src="/static/js/navigation.js"></script> +</div> +</body> </html> diff --git a/templates/common/header.tpl.html b/templates/common/header.tpl.html index 639d403..35b9071 100644 --- a/templates/common/header.tpl.html +++ b/templates/common/header.tpl.html @@ -1,107 +1,66 @@ -<div id="navigation" class="p-navigation"> - <div class="row"> - <div class="p-navigation__logo"> - <a class="p-navigation__link" href="/">Linux Containers</a> - </div> +<header id="navigation" class="p-navigation"> + <div class="row"> + <div class="p-navigation__banner"> + <div class="p-navigation__logo"> + <a class="p-navigation__link" href="/"> + Linux containers + </a> + </div> + {% if menu %} <a href="#navigation" class="p-navigation__toggle--open" title="menu">Menu</a> <a href="#navigation-closed" class="p-navigation__toggle--close" title="close menu">Close menu</a> + {% endif %} + </div> - <nav class="p-navigation__nav"> - <span class="u-off-screen"> - <a href="#main-content">Jump to main content</a> - </span> -{% if menu %} - <ul class="p-navigation__links"> - {% for entry in menu %} - {% if entry[0] is string %} - {% if page_path == entry[0] %} - <li class="p-navigation__link is-active"><a href="#">{{ entry[1] }}</a></li> - {% else %} - <li class="p-navigation__link"><a href="{{ entry[0] }}">{{ entry[1] }}</a></li> - {% endif %} - {% else %} - {% if page_menu and page_menu[0] == entry[1] %} - <li class="p-navigation__link is-active"> + {% if menu %} + <nav class="p-navigation__nav" role="menubar"> + <span class="u-off-screen"> + <a href="#main-content">Jump to main content</a> + </span> + <ul class="p-navigation__links" role="menu"> + {% for entry in menu %} + {% if entry[0] is string %} + <li class="p-navigation__link{% if page_menu and page_menu[0] == entry[1] %} is-selected{% endif %}"> + <a href="{{ entry[0] }}">{{ entry[1] }}</a> + </li> {% else %} - <li class="p-navigation__link"> - {% endif %} - <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ entry[1] }}</a> - - <ul class="hover-menu " role="menu"> - - {% for sub_entry in entry[0] %} - {% if not sub_entry[0] %} - <li class="divider"></li> - {% if sub_entry[1] %} - <li>{{ sub_entry[1] }}</li> - {% endif %} - {% else %} - {% if sub_entry[0] is string %} - {% if page_path == sub_entry[0] %} - <li><a href="#">{{ sub_entry[1] }}</a></li> - {% else %} - <li><a href="{{ sub_entry[0] }}">{{ sub_entry[1] }}</a></li> + <li class="p-navigation__link p-dropdown__toggle {% if page_menu and page_menu[0] == entry[1] %} is-selected{% endif %}" id="{{ entry[1] }}"> + <a href="#{{ entry[1] }}-menu" class="p-dropdown__toggle-link">{{ entry[1] }}</a> + <ul class="p-navigation__sub-links p-dropdown" id="{{ entry[1] }}-menu"> + {% for sub_entry in entry[0] %} + {% if not sub_entry[0] and sub_entry[0] is string %} + <!-- SEPARATOR / HEADING --> + <li> + <hr class="u-no-margin--bottom"> + {% if sub_entry[1] %} + <h3 class="p-heading--five p-navigation__sub-link u-no-margin--bottom">{{ sub_entry[1] }}</h3> {% endif %} + </li> {% else %} - {% if page_menu[1] == sub_entry[1] %} - <li class="is-active dropdown-submenu"> - {% else %} - <li class="dropdown-submenu"> - {% endif %} - <a href="#">{{ sub_entry[1] }}</a> - - {% if sub_entry[0]|length > 15 %} - <ul class="dropdown-menu columns" role="menu"> - {% else %} - <ul class="dropdown-menu" role="menu"> - {% endif %} - {% for sub_sub_entry in sub_entry[0] %} - {% if not sub_sub_entry[0] %} - {% if sub_sub_entry[1] %} - <li class="dropdown-header">{{ sub_sub_entry[1] }}</li> - {% endif %} - {% else %} - {% if page_path == sub_sub_entry[0] %} - <li class="is-active"><a href="#">{{ sub_sub_entry[1] }}</a></li> - {% else %} - <li><a href="{{ sub_sub_entry[0] }}">{{ sub_sub_entry[1] }}</a></li> - {% endif %} - {% endif %} - {% endfor %} - </ul> + {% if sub_entry[0] is string %} + <li> + <a href="{{ sub_entry[0] }}" class="p-navigation__sub-link{% if page_menu[1] == sub_entry[1] %} is-selected{% endif %} p-dropdown__link">{{ sub_entry[1] }}</a> + </li> + {% else %} + <li class="p-dropdown__toggle" id="{{ entry[1] }}-{{ sub_entry[1] }}"> + <a class="p-navigation__sub-link{% if page_menu[1] == sub_entry[1] %} is-selected{% endif %} p-dropdown__toggle-link" href="#{{ entry[1] }}-{{ sub_entry[1] }}-menu">{{ sub_entry[1] }}</a> + <ul class="p-navigation__sub-links p-dropdown is-split" id="{{ entry[1] }}-{{ sub_entry[1] }}-menu"> + {% for sub_sub_entry in sub_entry[0] %} + <li> + <a class="p-navigation__sub-link p-dropdown__link" href="{{ sub_sub_entry[0] }}">{{ sub_sub_entry[1] }}</a> + </li> + {% endfor %} + </ul> </li> + {% endif %} {% endif %} - {% endif %} - {% endfor %} - </ul> - </li> - {% endif %} - {% endfor %} - </ul> -{% endif %} - -{% if languages %} - <nav class="p-navigation__nav u-float-right"> - <ul class="p-navigation__links"> - <li class="p-navigation__link"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ page_language[2] }} <span class="caret"></span></a> - <ul class="hover-menu" role="menu"> - {% for language in languages %} - {% if page_language[0] == language[0] %} - <li class="is-active"><a href="#">{{ language[1] }}</a></li> - {% else %} - {% if language[0] %} - <li><a href="/{{ language[0] }}{{ page_raw_path }}">{{ language[1] }}</a></li> - {% else %} - <li><a href="{{ page_raw_path }}">{{ language[1] }}</a></li> - {% endif %} - {% endif %} - {% endfor %} - </ul> - </li> + {% endfor %} </ul> - </nav> -{% endif %} - </div> - </div> -</nav> + </li> + {% endif %} + {% endfor %} + {% endif %} + </ul> + </nav> + </div> +</header> From f36fdbc5f2ba1d3198906cee2a42a52d32aa344a Mon Sep 17 00:00:00 2001 From: deadlight <k...@deadlight.net> Date: Wed, 13 Feb 2019 13:06:44 +0000 Subject: [PATCH 6/7] Update classes of Try It markup to latest Vanilla patterns --- content/lxd/try-it.html | 899 ++++++++++++++++------------------------ 1 file changed, 347 insertions(+), 552 deletions(-) diff --git a/content/lxd/try-it.html b/content/lxd/try-it.html index a219761..46f1ed7 100644 --- a/content/lxd/try-it.html +++ b/content/lxd/try-it.html @@ -3,577 +3,372 @@ <script src="/static/js/term.js" type="text/javascript"></script> <script src="/static/js/bootstrap-rating.min.js" type="text/javascript"></script> <script src="/static/js/tryit.js" type="text/javascript"></script> -<div class="p-strip--shallow"> - <div class="row"> - <div class="col-12"> - <noscript> - <div class="p-notification--negative"> - <div> - <span class="p-notification__status">JavaScript required</span> - - <div class="p-notification__body"> - <p>The LXD demo service client is entirely JavaScript based.</p> - <p>It appears the your web browser doesn't support JavaScript or - that you or an extension you installed is disabling - JavaScript for this site.</p> - <p>To use this service, you will need to enable JavaScript support - and refresh the page.</p> - </div> - </div> - </div> - </noscript> - - <div class="p-notification--negative" id="tryit_status_panel" style="display:none"> - <p> - <span class="p-notification__status">Server status</span> - <span class="p-notification__body" id="tryit_online_message" style="display:none"> - You are connected over: <span id="tryit_protocol"></span> (<span id="tryit_address"></span>)<br/> - The demo server is currently running <span id="tryit_count"></span> user sessions out of <span id="tryit_max"></span> - </span> - - <span class="p-notification__body" id="tryit_maintenance_message" style="display:none"> - The demo service is currently down for maintenance and should be - back online in a few minutes. - </span> - - <span class="p-notification__body" id="tryit_unreachable_message" style="display:none"> - Your browser couldn't reach the demo server.<br /> - This is either (most likely) because of a firewall or proxy - issue on your side or because of a network, power or other catastrophic - server side failure. - </span> - </p> - </div> - - <div class="p-notification--information" id="tryit_terms_panel" style="display:none"> - <p> - <span class="p-notification__status">Terms of service</span> - <div class="p-notification__body" id="tryit_terms"></div> - </p> - </div> - - <div class="p-notification--caution" id="tryit_start_panel" style="display:none"> - <p> - <span class="p-notification__status">Start</span> - <div class="p-notification__body"> - <button class="p-button" id="tryit_accept" type="button"> - <i aria-hidden="true" class="p-icon--success"></i> - I have read and accept the terms of service above - </button> - - <div id="tryit_progress" style="display:none;width:100%;text-align:center;"> - <p class="p-heading--four">Starting the container...</p> - <p> - <i class="p-icon--spinner u-animation--spin"></i> - </p> - </div> - </div> - </p> - </div> - - <div class="p-notification--positive" id="tryit_info_panel" style="display:none"> - <div> - <span class="p-notification__status">Container information</span> - <div class="p-notification__body"> - <table class="table"> - <tr id="tryit_lxd_row"> - <th>Remote LXD</th> - <td>lxc remote add tryit <span class="tryit_container_ip"></span> --password=<span class="tryit_container_password"></span></td> - </tr> - - <tr id="tryit_clock"> - <th>Remaining time</th> - <td><span class="minutes"></span> minutes, <span class="seconds"></span> seconds</td> - </tr> - </table> - </div> - </div> - </div> - - <div class="p-notification" id="tryit_console_panel" style="display:none"> - <div> - <span class="p-notification__status">Terminal</span> - <div id="tryit_console" style="background-color:black;"></div> - - <button class="p-button" id="tryit_console_reconnect" type="button" style="display:none"> - Reconnect - </button> - </div> - </div> - - <div class="p-notification--caution" id="tryit_examples_panel" style="display:none"> - <div> - <span class="p-notification__status js-collapsable">Step by step instructions</span> - - <ul class="nav nav-tabs" style="display:none"> - <li class="active"><a href="#introduction" data-toggle="tab">Introduction</a></li> - <li><a href="#first-container" data-toggle="tab">Your first container</a></li> - <li><a href="#limiting-resources" data-toggle="tab">Limiting resources</a></li> - <li><a href="#snapshots" data-toggle="tab">Snapshots</a></li> - <li><a href="#creating-images" data-toggle="tab">Creating images</a></li> - <li><a href="#container-files" data-toggle="tab">Accessing files from the container</a></li> - <li><a href="#image-server" data-toggle="tab">Use a remote image server</a></li> - <li><a href="#remote-lxd" data-toggle="tab">Interact with remote LXD servers</a></li> - <li><a href="#conclusion" data-toggle="tab">Conclusion</a></li> - </ul> - <div class="tab-content" id="introduction"> - <h3>Introduction</h3> - <p>You are now root inside a LXD container with a - nested LXD installed inside it. - </p> - - <p>Initial startup can take a few seconds due to - having to generate SSL keys on a rather busy system. - <br /> - Further commands should then be near instantaneous. - </p> - - <p>You're welcome to just poke around and - discover LXD through its manpage and --help - option. - <br /> - Or you can follow this step by step tutorial - instead which will get you through LXD's - main features. - </p> - - <nav aria-label="..."> - <ul class="p-inline-list u-align--center"> - <li class="p-inline-list__item"> - <a href="#" class="p-button is--disabled" aria-disabled="true">Previous</a> - </li> - <li class="p-inline-list__item"> - <a href="#first-container" class="p-button js-tab-button tabNext">Next</a> - </li> - </ul> - </nav> - </div> - - <div class="tab-content" id="first-container"> - <h3>Your first container</h3> - - <p>LXD is image based, however by default no - images are loaded into the image store as can - be seen with: <pre>lxc image list</pre> - </p> - - <p>LXD knows about 3 default image servers: - <ul> - <li>ubuntu: (for Ubuntu stable images)</li> - <li>ubuntu-daily: (for Ubuntu daily images)</li> - <li>images: (for a bunch of other distributions)</li> - </ul> - </p> +<div class="p-strip is-shallow"> + <div class="row"> + <div class="col-12"> + <noscript> + <div class="p-notification--negative"> + <div class="p-notification__response"> + <span class="p-notification__status">JavaScript required: </span> + <p>The LXD demo service client is entirely JavaScript based.</p> + <p>It appears the your web browser doesn't support JavaScript or that you or an extension you installed is disabling JavaScript for this site.</p> + <p>To use this service, you will need to enable JavaScript support and refresh the page.</p> + </div> + </div> + </noscript> - <p>The stable Ubuntu images can be listed with: - <pre>lxc image list ubuntu: | less</pre> - </p> + <div class="p-notification--information" id="tryit_status_panel" style="display:none"> + <div class="p-notification__response"> + <h2 class="p-heading--four">Server status</h2> + <span class="p-notification__body" id="tryit_online_message" style="display:none">You are connected over: <span id="tryit_protocol"></span> (<span id="tryit_address"></span>)<br/>The demo server is currently running <span id="tryit_count"></span> user sessions out of <span id="tryit_max"></span></span> - <p>To launch a first container called "first" - using the Ubuntu 18.04 image, use: - <pre>lxc launch ubuntu:18.04 first</pre> - </p> + <span class="p-notification__body" id="tryit_maintenance_message" style="display:none">The demo service is currently down for maintenance and should be back online in a few minutes.</span> - <p>Your new container will now be visible in: - <pre>lxc list</pre> - </p> + <span class="p-notification__body" id="tryit_unreachable_message" style="display:none">Your browser couldn't reach the demo server.<br />This is either (most likely) because of a firewall or proxy issue on your side or because of a network, power or other catastrophic server side failure.</span> + </div> + </div> - <p>Running state details and configuration can - be queried with: - <pre>lxc info first + <div class="p-notification--information" id="tryit_terms_panel" style="display:none"> + <div class="p-notification__response"> + <h2 class="p-heading--four">Terms of service</h2> + <span id="tryit_terms"></span> + </div> + </div> + + <div class="p-notification--information" id="tryit_start_panel" style="display:none"> + <div class="p-notification__response"> + <h2 class="p-heading--four">Start</h2> + <button class="p-button" id="tryit_accept" type="button"> + <i aria-hidden="true" class="p-icon--success"></i> + I have read and accept the terms of service above + </button> + <div id="tryit_progress" style="display:none;width:100%;text-align:center;"> + <p class="p-heading--four">Starting the container <i class="p-icon--spinner u-animation--spin"></i></p> + </div> + </div> + </div> + + <div class="p-notification--information" id="tryit_info_panel" style="display:none"> + <div class="p-notification__response"> + <h2 class="p-heading--four">Container information</h2> + <table class="table"> + <tr id="tryit_lxd_row"> + <th>Remote LXD</th> + <td>lxc remote add tryit <span class="tryit_container_ip"></span> --password=<span class="tryit_container_password"></span></td> + </tr> + <tr id="tryit_clock"> + <th>Remaining time</th> + <td><span class="minutes"></span> minutes, <span class="seconds"></span> seconds</td> + </tr> + </table> + </div> + </div> + + <div class="p-notification" id="tryit_console_panel" style="display:none"> + <div class="p-notification__response"> + <h2 class="p-heading--four">Terminal</h2> + <div style="padding-right: 1rem; overflow: auto; background-color: #000;"> + <div id="tryit_console" style="background-color:black;"></div> + </div> + <button class="p-button" id="tryit_console_reconnect" type="button" style="display:none">Reconnect</button> + </div> + </div> + + <div class="p-notification--information" id="tryit_examples_panel" style="display:none"> + <div class="p-notification__response"> + <span class="p-notification__status js-collapsable">Step by step instructions</span> + <ul class="nav nav-tabs" style="display:none"> + <li class="active"><a href="#introduction" data-toggle="tab">Introduction</a></li> + <li><a href="#first-container" data-toggle="tab">Your first container</a></li> + <li><a href="#limiting-resources" data-toggle="tab">Limiting resources</a></li> + <li><a href="#snapshots" data-toggle="tab">Snapshots</a></li> + <li><a href="#creating-images" data-toggle="tab">Creating images</a></li> + <li><a href="#container-files" data-toggle="tab">Accessing files from the container</a></li> + <li><a href="#image-server" data-toggle="tab">Use a remote image server</a></li> + <li><a href="#remote-lxd" data-toggle="tab">Interact with remote LXD servers</a></li> + <li><a href="#conclusion" data-toggle="tab">Conclusion</a></li> + </ul> + <div class="tab-content" id="introduction"> + <h3>Introduction</h3> + <p>You are now root inside a LXD container with a nested LXD installed inside it.</p> + <p>Initial startup can take a few seconds due to having to generate SSL keys on a rather busy system.<br />Further commands should then be near instantaneous.</p> + <p>You're welcome to just poke around and discover LXD through its manpage and --help option.<br />Or you can follow this step by step tutorial instead which will get you through LXD's main features.</p> + + <nav aria-label="..."> + <ul class="p-inline-list u-align--center u-no-margin--bottom"> + <li class="p-inline-list__item"> + <a href="#" class="p-button is--disabled u-no-margin--bottom" aria-disabled="true">Previous</a> + </li> + <li class="p-inline-list__item"> + <a href="#first-container" class="p-button js-tab-button tabNext u-no-margin--bottom">Next</a> + </li> + </ul> + </nav> + </div> + + <div class="tab-content" id="first-container"> + <h3>Your first container</h3> + <p>LXD is image based, however by default no images are loaded into the image store as can be seen with:</p> + <pre>lxc image list</pre> + <p>LXD knows about 3 default image servers:</p> + <ul> + <li>ubuntu: (for Ubuntu stable images)</li> + <li>ubuntu-daily: (for Ubuntu daily images)</li> + <li>images: (for a bunch of other distributions)</li> + </ul> + <p>The stable Ubuntu images can be listed with:</p> + <pre>lxc image list ubuntu: | less</pre> + <p>To launch a first container called "first" using the Ubuntu 18.04 image, use:</p> + <pre>lxc launch ubuntu:18.04 first</pre> + <p>Your new container will now be visible in:</p> + <pre>lxc list</pre> + <p>Running state details and configuration can be queried with:</p> + <pre>lxc info first lxc config show first</pre> - </p> - - <nav aria-label="..."> - <ul class="p-inline-list u-align--center"> - <li class="p-inline-list__item"> - <a href="#introduction" class="p-button js-tab-button tabPrevious">Previous</a> - </li> - <li class="p-inline-list__item"> - <a href="#limiting-resources" class="p-button js-tab-button tabNext">Next</a> - </li> - </ul> - </nav> - </div> - - <div class="tab-content" id="limiting-resources"> - <h3>Limiting resources</h3> - - <p>By default your container comes with no - resource limitation and inherits from its - parent environment. You can confirm it with: - <pre>free -m + <nav aria-label="..."> + <ul class="p-inline-list u-align--center u-no-margin--bottom"> + <li class="p-inline-list__item"> + <a href="#introduction" class="p-button js-tab-button tabPrevious u-no-margin--bottom">Previous</a> + </li> + <li class="p-inline-list__item"> + <a href="#limiting-resources" class="p-button js-tab-button tabNext u-no-margin--bottom">Next</a> + </li> + </ul> + </nav> + </div> + + <div class="tab-content" id="limiting-resources"> + <h3>Limiting resources</h3> + <p>By default your container comes with no resource limitation and inherits from its parent environment. You can confirm it with:</p> + <pre>free -m lxc exec first -- free -m</pre> - </p> - - <p>To apply a memory limit to your container, do: - <pre>lxc config set first limits.memory 128MB</pre> - </p> - - <p>And confirm that it's been applied with: - <pre>lxc exec first -- free -m</pre> - </p> - - <nav aria-label="..."> - <ul class="p-inline-list u-align--center"> - <li class="p-inline-list__item"> - <a href="#first-container" class="p-button js-tab-button tabPrevious">Previous</a> - </li> - <li class="p-inline-list__item"> - <a href="#snapshots" class="p-button js-tab-button tabNext">Next</a> - </li> - </ul> - </nav> - </div> - - <div class="tab-content" id="snapshots"> - <h3>Snapshots</h3> + <p>To apply a memory limit to your container, do:</p> + <pre>lxc config set first limits.memory 128MB</pre> + <p>And confirm that it's been applied with:</p> + <pre>lxc exec first -- free -m</pre> + <nav aria-label="..."> + <ul class="p-inline-list u-align--center u-no-margin--bottom"> + <li class="p-inline-list__item"> + <a href="#first-container" class="p-button js-tab-button tabPrevious u-no-margin--bottom">Previous</a> + </li> + <li class="p-inline-list__item"> + <a href="#snapshots" class="p-button js-tab-button tabNext u-no-margin--bottom">Next</a> + </li> + </ul> + </nav> + </div> - <p>LXD supports snapshoting and restoring - container snapshots. - <br /> - Before making a snapshot, lets do some - changes to the container, for example, updating it: - <pre>lxc exec first -- apt-get update + <div class="tab-content" id="snapshots"> + <h3>Snapshots</h3> + <p>LXD supports snapshoting and restoring container snapshots. <br /> Before making a snapshot, lets do some changes to the container, for example, updating it:</p> + <pre>lxc exec first -- apt-get update lxc exec first -- apt-get dist-upgrade -y lxc exec first -- apt-get autoremove --purge -y</pre> - </p> - - <p>Now that the container is all updated and - cleaned, let's make a snapshot called "clean": - <pre>lxc snapshot first clean</pre> - </p> - - <p>Let's break our container: - <pre>lxc exec first -- rm -Rf /etc /usr</pre> - </p> - - <p>Confirm the breakage with (then exit): - <pre>lxc exec first -- bash</pre> - </p> - - <p>And restore everything to the snapshotted state: - <pre>lxc restore first clean</pre> - </p> - - <p>And confirm everything's back to normal (then exit): - <pre>lxc exec first -- bash</pre> - </p> - - <nav aria-label="..."> - <ul class="p-inline-list u-align--center"> - <li class="p-inline-list__item"> - <a href="#limiting-resources" class="p-button js-tab-button tabPrevious">Previous</a> - </li> - <li class="p-inline-list__item"> - <a href="#creating-images" class="p-button js-tab-button tabNext">Next</a> - </li> - </ul> - </nav> - </div> - - <div class="tab-content" id="creating-images"> - <h3>Creating images</h3> - - <p>As your probably noticed earlier, LXD is - image based, that is, all containers must be - created from either a copy of an existing - container or from an image.</p> - - <p>You can create new images from an existing - container or a container snapshot.</p> - - <p>To publish our "clean" snapshot from earlier - as a new image with a user friendly alias of - "clean-ubuntu", run: - <pre>lxc publish first/clean --alias clean-ubuntu</pre> - </p> + <p>Now that the container is all updated and cleaned, let's make a snapshot called "clean":</p> + <pre>lxc snapshot first clean</pre> + <p>Let's break our container:</p> + <pre>lxc exec first -- rm -Rf /etc /usr</pre> + <p>Confirm the breakage with (then exit):</p> + <pre>lxc exec first -- bash</pre> + <p>And restore everything to the snapshotted state:</p> + <pre>lxc restore first clean</pre> + <p>And confirm everything's back to normal (then exit):</p> + <pre>lxc exec first -- bash</pre> + <nav aria-label="..."> + <ul class="p-inline-list u-align--center u-no-margin--bottom"> + <li class="p-inline-list__item"> + <a href="#limiting-resources" class="p-button js-tab-button tabPrevious u-no-margin--bottom">Previous</a> + </li> + <li class="p-inline-list__item"> + <a href="#creating-images" class="p-button js-tab-button tabNext u-no-margin--bottom">Next</a> + </li> + </ul> + </nav> + </div> - <p>At which point we won't need our "first" - container, so just delete it with: - <pre>lxc stop first + <div class="tab-content" id="creating-images"> + <h3>Creating images</h3> + <p>As your probably noticed earlier, LXD is image based, that is, all containers must be created from either a copy of an existing container or from an image.</p> + <p>You can create new images from an existing container or a container snapshot.</p> + <p>To publish our "clean" snapshot from earlier as a new image with a user friendly alias of "clean-ubuntu", run:</p> + <pre>lxc publish first/clean --alias clean-ubuntu</pre> + <p>At which point we won't need our "first" container, so just delete it with:</p> + <pre>lxc stop first lxc delete first</pre> - </p> - - <p>And lastly we can start a new container from - our image with: - <pre>lxc launch clean-ubuntu second</pre> - </p> - - <nav aria-label="..."> - <ul class="p-inline-list u-align--center"> - <li class="p-inline-list__item"> - <a href="#snapshots" class="p-button js-tab-button tabPrevious">Previous</a> - </li> - <li class="p-inline-list__item"> - <a href="#container-files" class="p-button js-tab-button tabNext">Next</a> - </li> - </ul> - </nav> - </div> - - <div class="tab-content" id="container-files"> - <h3>Accessing files from the container</h3> - - <p>To pull a file from the container you can use - the "lxc file pull" command: - <pre>lxc file pull second/etc/hosts .</pre> - </p> - - <p>Let's add an entry to it: - <pre>echo "1.2.3.4 my-example" >> hosts</pre> - </p> - - <p>And push it back where it came from: - <pre>lxc file push hosts second/etc/hosts</pre> - </p> - - <p>You can also use this mechanism to access log files: - <pre>lxc file pull second/var/log/syslog - | less</pre> - </p> - - <p>We won't be needing that container anymore, - so stop and delete it with: - <pre>lxc delete --force second</pre> - </p> - - <nav aria-label="..."> - <ul class="p-inline-list u-align--center"> - <li class="p-inline-list__item"> - <a href="#creating-images" class="p-button js-tab-button tabPrevious">Previous</a> - </li> - <li class="p-inline-list__item"> - <a href="#image-server" class="p-button js-tab-button tabNext">Next</a> - </li> - </ul> - </nav> - </div> - - <div class="tab-content" id="image-server"> - <h3>Use a remote image server</h3> - - <p>The lxc client tool supports multiple - "remotes", those remotes can be read-only - image servers or other LXD hosts.</p> - - <p>LXC upstream runs one such server at - <a href="https://images.linuxcontainers.org">https://images.linuxcontainers.org</a> - which serves a set of automatically generated - images for various Linux distributions. - </p> - - <p>It comes pre-added with default LXD but you - can remove it or change it if you don't want it. - </p> - - <p>You can list the available images with: - <pre>lxc image list images: | less</pre> - </p> - - <p>And spawn a new Centos 7 container with: - <pre>lxc launch images:centos/7 third</pre> - </p> - - <p>Confirm it's indeed Centos 7 with: - <pre>lxc exec third -- cat /etc/redhat-release</pre> - </p> - - <p>And delete it: - <pre>lxc delete -f third</pre> - </p> - - <p>The list of all configured remotes can be - obtained with: - <pre>lxc remote list</pre> - </p> - - <nav aria-label="..."> - <ul class="p-inline-list u-align--center"> - <li class="p-inline-list__item"> - <a href="#container-files" class="p-button js-tab-button tabPrevious">Previous</a> - </li> - <li class="p-inline-list__item"> - <a href="#remote-lxd" class="p-button js-tab-button tabNext">Next</a> - </li> - </ul> - </nav> - </div> - - <div class="tab-content" id="remote-lxd"> - <h3>Interact with remote LXD servers</h3> - - <p>For this step, you'll need a second demo - session, so open a new one - <a href="/lxd/try-it/" target="_blank">here</a></p> - - <p>Copy/paste the "lxc remote add" command from - the top of the page of that new session into - the shell of your old session. - <br /> - Then confirm the server fingerprint for the remote - server.</p> - - <p>Note that it may take a few seconds for the - new LXD daemon to listen to the network, just - retry the command until it answers.</p> - - <p>At this point you can list the remote - containers with: <pre>lxc list tryit:</pre></p> - - <p>And its images with: - <pre>lxc image list tryit:</pre> - </p> - - <p>Now, let's start a new container on the remote - LXD using the local image we created earlier. - <pre>lxc launch clean-ubuntu tryit:fourth</pre> - </p> - - <p>You now have a container called "fourth" - running on the remote host "tryit". You can - spawn a shell inside it with (then exit): - <pre>lxc exec tryit:fourth bash</pre> - </p> + <p>And lastly we can start a new container from our image with:</p> + <pre>lxc launch clean-ubuntu second</pre> + <nav aria-label="..."> + <ul class="p-inline-list u-align--center u-no-margin--bottom"> + <li class="p-inline-list__item"> + <a href="#snapshots" class="p-button js-tab-button tabPrevious u-no-margin--bottom">Previous</a> + </li> + <li class="p-inline-list__item"> + <a href="#container-files" class="p-button js-tab-button tabNext u-no-margin--bottom">Next</a> + </li> + </ul> + </nav> + </div> - <p>Now let's copy that container into a new one - called "fifth": - <pre>lxc copy tryit:fourth tryit:fifth</pre> - </p> + <div class="tab-content" id="container-files"> + <h3>Accessing files from the container</h3> + <p>To pull a file from the container you can use the "lxc file pull" command:</p> + <pre>lxc file pull second/etc/hosts .</pre> + <p>Let's add an entry to it:</p> + <pre>echo "1.2.3.4 my-example" >> hosts</pre> + <p>And push it back where it came from:</p> + <pre>lxc file push hosts second/etc/hosts</pre> + <p>You can also use this mechanism to access log files:</p> + <pre>lxc file pull second/var/log/syslog - | less</pre> + <p>We won't be needing that container anymore, so stop and delete it with:</p> + <pre>lxc delete --force second</pre> + <nav aria-label="..."> + <ul class="p-inline-list u-align--center u-no-margin--bottom"> + <li class="p-inline-list__item"> + <a href="#creating-images" class="p-button js-tab-button tabPrevious u-no-margin--bottom">Previous</a> + </li> + <li class="p-inline-list__item"> + <a href="#image-server" class="p-button js-tab-button tabNext u-no-margin--bottom">Next</a> + </li> + </ul> + </nav> + </div> - <p>And just for fun, move it back to our local - lxd while renaming it to "sixth": - <pre>lxc move tryit:fifth sixth</pre> - </p> + <div class="tab-content" id="image-server"> + <h3>Use a remote image server</h3> + <p>The lxc client tool supports multiple "remotes", those remotes can be read-only image servers or other LXD hosts.</p> + <p>LXC upstream runs one such server at <a href="https://images.linuxcontainers.org">https://images.linuxcontainers.org</a> which serves a set of automatically generated images for various Linux distributions.</p> + <p>It comes pre-added with default LXD but you can remove it or change it if you don't want it.</p> + <p>You can list the available images with:</p> + <pre>lxc image list images: | less</pre> + <p>And spawn a new Centos 7 container with:</p> + <pre>lxc launch images:centos/7 third</pre> + <p>Confirm it's indeed Centos 7 with:</p> + <pre>lxc exec third -- cat /etc/redhat-release</pre> + <p>And delete it:</p> + <pre>lxc delete -f third</pre> + <p>The list of all configured remotes can be obtained with:</p> + <pre>lxc remote list</pre> + <nav aria-label="..."> + <ul class="p-inline-list u-align--center u-no-margin--bottom"> + <li class="p-inline-list__item"> + <a href="#container-files" class="p-button js-tab-button tabPrevious u-no-margin--bottom">Previous</a> + </li> + <li class="p-inline-list__item"> + <a href="#remote-lxd" class="p-button js-tab-button tabNext u-no-margin--bottom">Next</a> + </li> + </ul> + </nav> + </div> - <p>And confirm it's all still working (then exit): - <pre>lxc start sixth + <div class="tab-content" id="remote-lxd"> + <h3>Interact with remote LXD servers</h3> + <p>For this step, you'll need a second demo session, so open a new one <a href="/lxd/try-it/" target="_blank">here</a></p> + <p>Copy/paste the "lxc remote add" command from the top of the page of that new session into the shell of your old session. <br /> Then confirm the server fingerprint for the remote server.</p> + <p>Note that it may take a few seconds for the new LXD daemon to listen to the network, just retry the command until it answers.</p> + <p>At this point you can list the remote containers with: <pre>lxc list tryit:</pre></p> + <p>And its images with:</p> + <pre>lxc image list tryit:</pre> + <p>Now, let's start a new container on the remote LXD using the local image we created earlier.</p> + <pre>lxc launch clean-ubuntu tryit:fourth</pre> + <p>You now have a container called "fourth" running on the remote host "tryit". You can spawn a shell inside it with (then exit):</p> + <pre>lxc exec tryit:fourth bash</pre> + <p>Now let's copy that container into a new one called "fifth":</p> + <pre>lxc copy tryit:fourth tryit:fifth</pre> + <p>And just for fun, move it back to our local lxd while renaming it to "sixth":</p> + <pre>lxc move tryit:fifth sixth</pre> + <p>And confirm it's all still working (then exit):</p> + <pre>lxc start sixth lxc exec sixth -- bash</pre> - </p> - - <p>Then clean everything up: - <pre>lxc delete -f sixth + <p>Then clean everything up:</p> + <pre>lxc delete -f sixth lxc delete -f tryit:fourth lxc image delete clean-ubuntu</pre> - </p> - - <nav aria-label="..."> - <ul class="p-inline-list u-align--center"> - <li class="p-inline-list__item"> - <a href="#image-server" class="p-button js-tab-button tabPrevious">Previous</a> - </li> - <li class="p-inline-list__item"> - <a href="#conclusion" class="p-button js-tab-button tabNext">Next</a> - </li> - </ul> - </nav> - </div> - - - <div class="tab-content" id="conclusion"> - <h3>Conclusion</h3> - - <p>We hope this gave you a good introduction to - LXD, its capabilities and how easy it is to - use.</p> - - <p>You're welcome to use the demo service as - long as you want to try LXD and play with the - latest features.</p> - - <p>Enjoy!</p> - - <nav aria-label="..."> - <ul class="p-inline-list u-align--center"> - <li class="p-inline-list__item"> - <a href="#remote-lxd" class="p-button js-tab-button tabPrevious">Previous</a> - </li> - <li class="p-inline-list__item"> - <a href="#conclusion" class="p-button is--disabled" aria-disabled="true">Next</a> - </li> - </ul> - </nav> - </div> - </div> - </div> - - <div class="p-notification--information" id="tryit_feedback" style="display:none"> - <div> - <span class="p-notification__status js-collapsable">Feedback</span> - <div class="panel-body"> - <form class="p-form" id="tryit_feedback_submit"> - <div class="p-form__group"> - <label for="feedbackRating">Rate your experience</label> - <input type="hidden" class="rating rating-tooltip" id="feedbackRating" /> - </div> - - <div class="p-form__group"> - <label for="feedbackEmail">Email address (optional)</label> - <input type="email" class="form-control" id="feedbackEmail" placeholder="f...@bar.com"/> - <small id="feedbackEmailHelp" class="form-text text-muted">Fill this to allow us to contact you about your feedback.</small> - - <div class="form-check"> - <label class="form-check-label"> - <input type="checkbox" class="form-check-input" id="feedbackEmailUse"/> - I'm interested in hearing more about LXD and related products from Canonical. - </label> - </div> - </div> - - <div class="p-form__group"> - <label for="feedbackText">Feedback (optional)</label> - <textarea class="form-control" id="feedbackText" rows="5"></textarea> - </div> - - <button type="submit" class="p-button--positive">Send feedback</button> - </form> - </div> - </div> - </div> - - <div class="p-notification--negative" id="tryit_error_panel" style="display:none"> - <div> - <span class="p-notification__status" id="tryit_error_panel_create" style="display:none">Unable to create a new container</span> - <span class="p-notification__status" id="tryit_error_panel_access" style="display:none">Unable to access the container</span> - - <div class="panel-body" id="tryit_error_full" style="display:none"> - <p>The server is currently full, please try again in a few minutes.</p> - - <p><button class="p-button tryit_goback" type="button"> - Start over - </button></p> - </div> - - <div class="panel-body" id="tryit_error_quota" style="display:none"> - <p>You have reached the maximum number of concurrent sessions, - please wait for some to expire before starting more of them.</p> - - <p><button class="p-button tryit_goback" type="button"> - Start over - </button></p> - </div> - - <div class="panel-body" id="tryit_error_banned" style="display:none"> - <p>You have been banned from this service due to a failure to - respect the terms of service.</p> - </div> - - <div class="panel-body" id="tryit_error_unknown" style="display:none"> - <p>An unknown error occured. Please try again in a few minutes.</p> - - <p><button class="p-button tryit_goback" type="button"> - Start over - </button></p> - </div> - - <div class="panel-body" id="tryit_error_missing" style="display:none"> - <p>The container you're trying to connect to doesn't exist anymore.</p> + <nav aria-label="..."> + <ul class="p-inline-list u-align--center u-no-margin--bottom"> + <li class="p-inline-list__item"> + <a href="#image-server" class="p-button js-tab-button tabPrevious u-no-margin--bottom">Previous</a> + </li> + <li class="p-inline-list__item"> + <a href="#conclusion" class="p-button js-tab-button tabNext u-no-margin--bottom">Next</a> + </li> + </ul> + </nav> + </div> - <p><button class="p-button tryit_goback" type="button"> - Start over - </button></p> - </div> + <div class="tab-content" id="conclusion"> + <h3>Conclusion</h3> + <p>We hope this gave you a good introduction to LXD, its capabilities and how easy it is to use.</p> + <p>You're welcome to use the demo service as long as you want to try LXD and play with the latest features.</p> + <p>Enjoy!</p> + <nav aria-label="..."> + <ul class="p-inline-list u-align--center u-no-margin--bottom"> + <li class="p-inline-list__item"> + <a href="#remote-lxd" class="p-button js-tab-button tabPrevious u-no-margin--bottom">Previous</a> + </li> + <li class="p-inline-list__item"> + <a href="#conclusion" class="p-button is--disabled u-no-margin--bottom" aria-disabled="true">Next</a> + </li> + </ul> + </nav> + </div> + </div> + </div> + + <div class="p-notification--information" id="tryit_feedback" style="display:none"> + <div class="p-notification__response"> + <span class="p-notification__status js-collapsable">Feedback</span> + <div class="panel-body"> + <form class="p-form" id="tryit_feedback_submit"> + <div class="p-form__group"> + <label for="feedbackRating">Rate your experience</label> + <input type="hidden" class="rating rating-tooltip" id="feedbackRating" /> + </div> + <div class="p-form__group"> + <label for="feedbackEmail">Email address (optional)</label> + <input type="email" class="form-control" id="feedbackEmail" placeholder="f...@bar.com"/> + <small id="feedbackEmailHelp" class="form-text text-muted">Fill this to allow us to contact you about your feedback.</small> + <div class="form-check"> + <label class="form-check-label"> + <input type="checkbox" class="form-check-input" id="feedbackEmailUse"/> + <label for="feedbackEmailUse">I'm interested in hearing more about LXD and related products from Canonical</label> + </label> </div> - </div> + </div> + <div class="p-form__group"> + <label for="feedbackText">Feedback (optional)</label> + <textarea class="form-control" id="feedbackText" rows="5"></textarea> + </div> + <button type="submit" class="p-button--positive">Send feedback</button> + </form> + </div> + </div> + </div> + + <div class="p-notification--negative" id="tryit_error_panel" style="display:none"> + <div> + <span class="p-notification__status" id="tryit_error_panel_create" style="display:none">Unable to create a new container</span> + <span class="p-notification__status" id="tryit_error_panel_access" style="display:none">Unable to access the container</span> + <div class="panel-body" id="tryit_error_full" style="display:none"> + <p>The server is currently full, please try again in a few minutes.</p> + <p><button class="p-button tryit_goback" type="button">Start over</button></p> + </div> + <div class="panel-body" id="tryit_error_quota" style="display:none"> + <p>You have reached the maximum number of concurrent sessions, please wait for some to expire before starting more of them.</p> + <p><button class="p-button tryit_goback" type="button">Start over</button></p> + </div> + <div class="panel-body" id="tryit_error_banned" style="display:none"> + <p>You have been banned from this service due to a failure to respect the terms of service.</p> + </div> + <div class="panel-body" id="tryit_error_unknown" style="display:none"> + <p>An unknown error occured. Please try again in a few minutes.</p> + <p><button class="p-button tryit_goback" type="button">Start over</button></p> + </div> + <div class="panel-body" id="tryit_error_missing" style="display:none"> + <p>The container you're trying to connect to doesn't exist anymore.</p> + <p><button class="p-button tryit_goback" type="button">Start over</button></p> + </div> </div> + </div> </div> + </div> </div> From e2431dd5f53caaf9d2a50b56d8613d1a1aa5d698 Mon Sep 17 00:00:00 2001 From: deadlight <k...@deadlight.net> Date: Wed, 13 Feb 2019 15:09:59 +0000 Subject: [PATCH 7/7] Add language switcher --- static/css/local.css | 6 ++++++ templates/common/header.tpl.html | 20 ++++++++++++++++++++ 2 files changed, 26 insertions(+) diff --git a/static/css/local.css b/static/css/local.css index c0be8b5..de6cc73 100644 --- a/static/css/local.css +++ b/static/css/local.css @@ -273,6 +273,12 @@ pre { background-color: #f7f7f7; } +@media (min-width: 769px) { + .p-language-switcher { + margin-left: auto; + } +} + /* Custom strip */ .is-x-shallow { padding: .5rem 0; diff --git a/templates/common/header.tpl.html b/templates/common/header.tpl.html index 35b9071..c4b03cd 100644 --- a/templates/common/header.tpl.html +++ b/templates/common/header.tpl.html @@ -61,6 +61,26 @@ <h3 class="p-heading--five p-navigation__sub-link u-no-margin--bottom">{{ sub_en {% endfor %} {% endif %} </ul> + <ul class="p-navigation__links p-language-switcher" role="menu"> + {% if languages %} + <li class="p-navigation__link p-dropdown__toggle"> + <a href="#languages" class="p-dropdown__toggle-link">{{ page_language[2] }}</a> + <ul class="p-navigation__sub-links p-dropdown" role="menu" id="languages"> + {% for language in languages %} + {% if page_language[0] == language[0] %} + <li><a href="#" class="p-navigation__sub-link p-dropdown__link is-active">{{ language[1] }}</a></li> + {% else %} + {% if language[0] %} + <li><a href="/{{ language[0] }}{{ page_raw_path }}" class="p-navigation__sub-link p-dropdown__link">{{ language[1] }}</a></li> + {% else %} + <li><a href="{{ page_raw_path }}" class="p-navigation__sub-link p-dropdown__link">{{ language[1] }}</a></li> + {% endif %} + {% endif %} + {% endfor %} + </ul> + </li> + {% endif %} + </ul> </nav> </div> </header>
_______________________________________________ lxc-devel mailing list lxc-devel@lists.linuxcontainers.org http://lists.linuxcontainers.org/listinfo/lxc-devel