[lxc-devel] [linuxcontainers.org/master] Implement collapsible sections in try-it
anthonydillon on Github
lxc-bot at linuxcontainers.org
Wed Nov 22 01:39:35 UTC 2017
A non-text attachment was scrubbed...
Name: not available
Type: text/x-mailbox
Size: 726 bytes
Desc: not available
URL: <http://lists.linuxcontainers.org/pipermail/lxc-devel/attachments/20171122/0e4d14a0/attachment.bin>
-------------- next part --------------
From 9ea284fcdd17b9cf5b8d8c370476216c089ada23 Mon Sep 17 00:00:00 2001
From: Anthony Dillon <me at anthonydillon.com>
Date: Wed, 22 Nov 2017 01:36:34 +0000
Subject: [PATCH] Implement collapsible sections in try-it
---
content/lxd/try-it.html | 4 ++--
content/lxd/try-it.ja.html | 16 ++++++++--------
static/css/local.css | 23 ++++++++++++++++++++++-
static/img/chevron_down.svg | 10 ++++++++++
static/img/chevron_up.svg | 10 ++++++++++
static/js/tryit.js | 4 ++++
6 files changed, 56 insertions(+), 11 deletions(-)
create mode 100644 static/img/chevron_down.svg
create mode 100644 static/img/chevron_up.svg
diff --git a/content/lxd/try-it.html b/content/lxd/try-it.html
index 28c416b..b280900 100644
--- a/content/lxd/try-it.html
+++ b/content/lxd/try-it.html
@@ -103,7 +103,7 @@
<div class="p-notification--caution" id="tryit_examples_panel" style="display:none">
<div>
- <span class="p-notification__status">Step by step instructions</span>
+ <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>
@@ -498,7 +498,7 @@ <h3>Conclusion</h3>
<div class="p-notification--information" id="tryit_feedback" style="display:none">
<div>
- <span class="p-notification__status">Feedback</span>
+ <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">
diff --git a/content/lxd/try-it.ja.html b/content/lxd/try-it.ja.html
index b5460ae..9f8b1bd 100644
--- a/content/lxd/try-it.ja.html
+++ b/content/lxd/try-it.ja.html
@@ -6,7 +6,7 @@
<div class="row">
<div class="col-12">
<div class="p-notification--negative" id="tryit_status_panel" style="display:none">
- <p class="p-notification__response">
+ <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/>
@@ -35,14 +35,14 @@
</div>
<div class="p-notification--information" id="tryit_terms_panel" style="display:none">
- <p class="p-notification__response">
+ <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 class="p-notification__response">
+ <p>
<span class="p-notification__status">試用開始 <!-- Start --></span>
<div class="p-notification__body">
<button class="p-button" id="tryit_accept" type="button">
@@ -61,7 +61,7 @@
</div>
<div class="p-notification--positive" id="tryit_info_panel" style="display:none">
- <div class="p-notification__response">
+ <div>
<span class="p-notification__status">コンテナの情報 <!-- Container information --></span>
<div class="p-notification__body">
<table class="table">
@@ -80,7 +80,7 @@
</div>
<div class="p-notification" id="tryit_console_panel" style="display:none">
- <div class="p-notification__response">
+ <div>
<span class="p-notification__status">コンソール <!-- Console --></span>
<div id="tryit_console" style="background-color:black;"></div>
@@ -91,8 +91,8 @@
</div>
<div class="p-notification--caution" id="tryit_examples_panel" style="display:none">
- <div class="p-notification__response">
- <span class="p-notification__status"><a href="#introduction">ステップバイステップでの入門</a></span> <!-- Step by step introduction -->
+ <div>
+ <span class="p-notification__status js-collapsable">ステップバイステップでの入門</span> <!-- Step by step introduction -->
<ul class="nav nav-tabs" style="display:none">
<li class="active"><a href="#introduction" data-toggle="tab">Introduction</a></li>
@@ -536,7 +536,7 @@ <h3>9. さいごに <!-- Conclusion --></h3>
</div>
<div class="p-notification--negative" id="tryit_error_panel" style="display:none">
- <div class="p-notification__response">
+ <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>
diff --git a/static/css/local.css b/static/css/local.css
index 0e0acfd..732f39d 100644
--- a/static/css/local.css
+++ b/static/css/local.css
@@ -694,4 +694,25 @@ pre {
.rating-symbol {
cursor: pointer;
margin-top: 1rem;
-}
\ No newline at end of file
+}
+
+.js-collapsable {
+ cursor: pointer;
+ background-image: url('/static/img/chevron_up.svg');
+ background-repeat: no-repeat;
+ background-position: right center;
+ padding-right: 22px;
+ background-size: 14px;
+}
+
+.js-collapsable.is-hidden {
+ background-image: url('/static/img/chevron_down.svg');
+}
+
+.js-collapsable.is-hidden ~ .tab-content {
+ display: none;
+}
+
+#tryit_feedback .js-collapsable.is-hidden ~ .panel-body {
+ display: none;
+}
diff --git a/static/img/chevron_down.svg b/static/img/chevron_down.svg
new file mode 100644
index 0000000..c27b8c8
--- /dev/null
+++ b/static/img/chevron_down.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns="http://www.w3.org/2000/svg" height="4px" width="10px" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 10 4"><!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
+ <title>accordion-open</title>
+ <desc>Created with Sketch.</desc>
+ <g id="filter-panel" fill-rule="evenodd" sketch:type="MSPage" fill="none">
+ <g id="accordion-open" fill="#888" sketch:type="MSArtboardGroup">
+ <path id="chevron" sketch:type="MSShapeGroup" d="m6.361 0.8623c0.518 0.365 1.052 0.7781 1.601 1.238 0.549 0.4585 1.089 0.9518 1.621 1.4772 0.142 0.1404 0.281 0.2821 0.415 0.4225h-1.541c-0.304-0.2888-0.62-0.5709-0.947-0.8463-0.1379-0.1161-0.2768-0.2297-0.4168-0.3408-0.1636-0.1297-0.3286-0.2558-0.4954-0.3783-0.0852-0.0625-0.1708-0.1241-0.2568-0.1846-0.397-0.2821-0.935-0.6257-1.315-0.8476h-0.054c-0.38 0.2219-0.918 0.5655-1.315 0.8476-0.398 0.2807-0.788 0.5829-1.169 0.9037-0.327 0.2754-0.643 0.5575-0.947 0.8463h-1.541c0.135-0.1404 0.273-0.2821 0.415-0.4225 0.532-0.5254 1.072-1.0187 1.621-1.4772 0.55-0.4599 1.083-0.873 1.601-1.238 0.519-0.36497 0.973-0.65241 1.362-0.8623 0.39 0.20989 0.844 0.49733 1.362 0.8623z" transform="translate(4.999 2) rotate(180) translate(-4.999 -2)"/>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/static/img/chevron_up.svg b/static/img/chevron_up.svg
new file mode 100644
index 0000000..be2f201
--- /dev/null
+++ b/static/img/chevron_up.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns="http://www.w3.org/2000/svg" height="4px" width="10px" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 10 4"><!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
+ <title>accordion-close</title>
+ <desc>Created with Sketch.</desc>
+ <g id="filter-panel" fill-rule="evenodd" sketch:type="MSPage" fill="none">
+ <g id="accordion-close" fill="#888" sketch:type="MSArtboardGroup">
+ <path id="chevron" sketch:type="MSShapeGroup" d="m6.361 0.8623c0.518 0.365 1.052 0.7781 1.601 1.238 0.549 0.4585 1.089 0.9518 1.621 1.4772 0.142 0.1404 0.281 0.2821 0.415 0.4225h-1.541c-0.304-0.2888-0.62-0.5709-0.947-0.8463-0.1379-0.1161-0.2768-0.2297-0.4168-0.3408-0.1636-0.1297-0.3286-0.2558-0.4954-0.3783-0.0852-0.0625-0.1708-0.1241-0.2568-0.1846-0.397-0.2821-0.935-0.6257-1.315-0.8476h-0.054c-0.38 0.2219-0.918 0.5655-1.315 0.8476-0.398 0.2807-0.788 0.5829-1.169 0.9037-0.327 0.2754-0.643 0.5575-0.947 0.8463h-1.541c0.135-0.1404 0.273-0.2821 0.415-0.4225 0.532-0.5254 1.072-1.0187 1.621-1.4772 0.55-0.4599 1.083-0.873 1.601-1.238 0.519-0.36497 0.973-0.65241 1.362-0.8623 0.39 0.20989 0.844 0.49733 1.362 0.8623z"/>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/static/js/tryit.js b/static/js/tryit.js
index 6cfa070..df890bb 100644
--- a/static/js/tryit.js
+++ b/static/js/tryit.js
@@ -321,6 +321,10 @@ $(document).ready(function() {
}
});
+ $('.js-collapsable').click(function(){
+ $(this).toggleClass('is-hidden');
+ });
+
$('#tryit_feedback_submit').submit(function(event) {
event.preventDefault();
More information about the lxc-devel
mailing list