[lxc-devel] [linuxcontainers.org/master] Vanilla 1.8
deadlight on Github
lxc-bot at linuxcontainers.org
Wed Feb 13 15:13:50 UTC 2019
A non-text attachment was scrubbed...
Name: not available
Type: text/x-mailbox
Size: 548 bytes
Desc: not available
URL: <http://lists.linuxcontainers.org/pipermail/lxc-devel/attachments/20190213/fc63133b/attachment-0001.bin>
-------------- next part --------------
From 892d7862ea47e09355af03b834f9f96940c9ee46 Mon Sep 17 00:00:00 2001
From: deadlight <karl at 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 <karl at 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 <karl at 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 <karl at 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 <karl at 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;
}
-
- at 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;
-}
-
- at 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);
-}
-
- at 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;
-}
-
- at media only screen and (min-width: 1030px) {
- .p-navigation .p-navigation__logo {
- font-size: 1.5rem;
- line-height: 1.25;
- }
-}
-
- at 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;
-}
-
- at 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;
-}
-
- at 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;
-}
-
- at 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;
-}
-
- at 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;
-}
-
- at media (max-width: 769px) {
- .p-navigation .p-navigation__links {
- border-right: 1px solid #cdcdcd;
- }
-}
-
- at 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;
-}
-
- at media (min-width: 769px) {
- .p-navigation .p-navigation__nav {
- display: block;
- }
-}
-
-.p-navigation:target .p-navigation__toggle--open {
- display: none;
-}
-
- at media (max-width: 768px) {
- .p-navigation:target .p-navigation__toggle--close {
- display: inline-block;
- }
-}
-
-.p-navigation:target .p-navigation__nav {
- display: block;
-}
-
- at media (max-width: 768px) {
- .p-navigation {
- border-bottom: 1px solid #f7f7f7;
- font-weight: 300;
- }
-}
-
- at 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;
-}
-
- at media (min-width: 768px) and (max-width: 1030px) {
- .p-navigation__logo {
- margin-left: 0;
- padding-left: 0;
- }
-}
-
- at 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;
-}
-
- at 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;
-}
-
- at 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;
- }
-}
-
- at 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;
-}
-
- at media (min-width: 768px) and (max-width: 1030px) {
- .nav-secondary {
- border-top: 1px solid #cdcdcd;
- white-space: nowrap;
- }
-}
-
- at media (max-width: 767px) {
- .nav-secondary__row.row {
- padding: 0;
- }
-}
-
- at 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;
-}
-
- at 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;
-}
-
- at 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;
-}
-
- at 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;
- }
-}
-
- at 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;
- }
-}
-
- at 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;
-}
-
- at 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%;
- }
-}
-
- at 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;
+}
+
+ at 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;
+}
+
+ at 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 <karl at 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="foo at 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="foo at 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 <karl at 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;
}
+ at 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>
More information about the lxc-devel
mailing list