[tor-commits] [nyx/master] Drop wrapper 'panes' div
atagar at torproject.org
atagar at torproject.org
Sat Aug 5 01:18:26 UTC 2017
commit 981e666340bea021408c1a9aebe23b05514f1e98
Author: Damian Johnson <atagar at torproject.org>
Date: Fri Jul 28 16:49:52 2017 -0700
Drop wrapper 'panes' div
Oh. Thought this was necessary for tabs to work but that turns out not to be
the case. Neat.
---
web/index.html | 252 ++++++++++++++++++++++++++++-----------------------------
web/styles.css | 4 +-
2 files changed, 127 insertions(+), 129 deletions(-)
diff --git a/web/index.html b/web/index.html
index e1c3c6d..5da37bf 100644
--- a/web/index.html
+++ b/web/index.html
@@ -25,167 +25,165 @@
</div>
</div>
- <div class="panes">
- <div id="home" class="content">
- <div id="welcome" class="section"></div>
- <a href="#welcome" class="section-title">Welcome to Nyx</a>
+ <div id="home" class="page">
+ <div id="welcome" class="section"></div>
+ <a href="#welcome" class="section-title">Welcome to Nyx</a>
- <p>Nyx is a command-line monitor for <a href="https://www.torproject.org/">Tor</a>. With this you can get detailed real-time information about your relay such as bandwidth usage, connections, logs, and much more.</p>
+ <p>Nyx is a command-line monitor for <a href="https://www.torproject.org/">Tor</a>. With this you can get detailed real-time information about your relay such as bandwidth usage, connections, logs, and much more.</p>
- <p>Nyx's latest version is <b>1.4.5</b>, released April 28th, 2012. Prior to our upcoming release this application went under the name of '<b>arm</b>'. Sorry for the confusion!</p>
+ <p>Nyx's latest version is <b>1.4.5</b>, released April 28th, 2012. Prior to our upcoming release this application went under the name of '<b>arm</b>'. Sorry for the confusion!</p>
- <div id="features" class="section"></div>
- <a href="#features" class="section-title">What does Nyx provide?</a>
+ <div id="features" class="section"></div>
+ <a href="#features" class="section-title">What does Nyx provide?</a>
- <div class="feature">
- <a id="bandwidth"></a>
- <a href="images/screenshots/front_page.png"><img src="images/features/bandwidth.png" alt="bandwidth" /></a>
- <span class="feature-arrow">«</span><a href="#bandwidth" class="feature-title">Bandwidth Graph</a>
- <p>Bandwidth used by Tor. You can press 'i' to pick the graphing <b>interval</b>, or 's' to show other usage <b>statistics</b>.</p>
- </div>
+ <div class="feature">
+ <a id="bandwidth"></a>
+ <a href="images/screenshots/front_page.png"><img src="images/features/bandwidth.png" alt="bandwidth" /></a>
+ <span class="feature-arrow">«</span><a href="#bandwidth" class="feature-title">Bandwidth Graph</a>
+ <p>Bandwidth used by Tor. You can press 'i' to pick the graphing <b>interval</b>, or 's' to show other usage <b>statistics</b>.</p>
+ </div>
- <div class="feature">
- <a id="events"></a>
- <a href="images/screenshots/front_page.png"><img src="images/features/events.png" alt="event log" /></a>
- <span class="feature-arrow">«</span><a href="#events" class="feature-title">Event Log</a>
- <p>Tor logs a wealth of information about itself. We present it, colorized and deuplicated. Press 'e' to select what <b>events</b> are logged and 'f' to <b>filter</b> to just what you want.</p>
- </div>
+ <div class="feature">
+ <a id="events"></a>
+ <a href="images/screenshots/front_page.png"><img src="images/features/events.png" alt="event log" /></a>
+ <span class="feature-arrow">«</span><a href="#events" class="feature-title">Event Log</a>
+ <p>Tor logs a wealth of information about itself. We present it, colorized and deuplicated. Press 'e' to select what <b>events</b> are logged and 'f' to <b>filter</b> to just what you want.</p>
+ </div>
- <div class="feature">
- <a id="connections"></a>
- <a href="images/screenshots/connections.png"><img src="images/features/connections.png" alt="connections" /></a>
- <span class="feature-arrow">«</span><a href="#connections" class="feature-title">Connections</a>
- <p>Connection data similar to netstat or lsof, but correlated with Tor relay information to make it much richer. Press 'enter' for more <b>details</b>, 's' to <b>sort</b>, and 'd' to see raw <b>descriptor</b> data.</p>
- </div>
+ <div class="feature">
+ <a id="connections"></a>
+ <a href="images/screenshots/connections.png"><img src="images/features/connections.png" alt="connections" /></a>
+ <span class="feature-arrow">«</span><a href="#connections" class="feature-title">Connections</a>
+ <p>Connection data similar to netstat or lsof, but correlated with Tor relay information to make it much richer. Press 'enter' for more <b>details</b>, 's' to <b>sort</b>, and 'd' to see raw <b>descriptor</b> data.</p>
+ </div>
- <div class="feature">
- <a id="config_editor"></a>
- <a href="images/screenshots/config_editor.png"><img src="images/features/config_editor.png" alt="configuration editor" /></a>
- <span class="feature-arrow">«</span><a href="#config_editor" class="feature-title">Configuration Editor</a>
- <p>Editor to change Tor's setting on the fly, with usage information from its manual. Press 'enter' to <b>change</b> Tor settings and 'w' to <b>write</b> your changes to disk.</p>
- </div>
+ <div class="feature">
+ <a id="config_editor"></a>
+ <a href="images/screenshots/config_editor.png"><img src="images/features/config_editor.png" alt="configuration editor" /></a>
+ <span class="feature-arrow">«</span><a href="#config_editor" class="feature-title">Configuration Editor</a>
+ <p>Editor to change Tor's setting on the fly, with usage information from its manual. Press 'enter' to <b>change</b> Tor settings and 'w' to <b>write</b> your changes to disk.</p>
+ </div>
- <div class="feature">
- <a id="torrc"></a>
- <a href="images/screenshots/torrc.png"><img src="images/features/torrc.png" alt="torrc" /></a>
- <span class="feature-arrow">«</span><a href="#torrc" class="feature-title">Torrc</a>
- <p>Provides your torrc with line numbers and syntax highlighting. Comments can be <b>stripped</b> by pressing 's'.</p>
- </div>
+ <div class="feature">
+ <a id="torrc"></a>
+ <a href="images/screenshots/torrc.png"><img src="images/features/torrc.png" alt="torrc" /></a>
+ <span class="feature-arrow">«</span><a href="#torrc" class="feature-title">Torrc</a>
+ <p>Provides your torrc with line numbers and syntax highlighting. Comments can be <b>stripped</b> by pressing 's'.</p>
+ </div>
- <div class="feature">
- <a id="interpreter"></a>
- <a href="images/screenshots/interpreter.png"><img src="images/features/interpreter.png" alt="interpreter" /></a>
- <span class="feature-arrow">«</span><a href="#interpreter" class="feature-title">Interpreter</a>
- <p>Integration with <a href="https://stem.torproject.org/">Stem's</a> <a href="https://stem.torproject.org/tutorials/down_the_rabbit_hole.html">interpreter</a>, providing <a href="https://gitweb.torproject.org/torspec.git/tree/control-spec.txt">raw controller access</a>, irc-style commands like <b>/help</b>, tab completion, history scrollback, and a python prompt.</p>
- </div>
+ <div class="feature">
+ <a id="interpreter"></a>
+ <a href="images/screenshots/interpreter.png"><img src="images/features/interpreter.png" alt="interpreter" /></a>
+ <span class="feature-arrow">«</span><a href="#interpreter" class="feature-title">Interpreter</a>
+ <p>Integration with <a href="https://stem.torproject.org/">Stem's</a> <a href="https://stem.torproject.org/tutorials/down_the_rabbit_hole.html">interpreter</a>, providing <a href="https://gitweb.torproject.org/torspec.git/tree/control-spec.txt">raw controller access</a>, irc-style commands like <b>/help</b>, tab completion, history scrollback, and a python prompt.</p>
+ </div>
- <div class="feature">
- <a id="and_more"></a>
- <img src="images/features/menu.png" alt="menu" />
- <span class="feature-arrow">«</span><a href="#and_more" class="feature-title">... and more!</a>
- <p>That's just the tip of the iceburg. All pages within Nyx provide <b>help</b> information when you press 'h' and <b>menu</b> in response to 'm'. So go explore!</p>
- </div>
+ <div class="feature">
+ <a id="and_more"></a>
+ <img src="images/features/menu.png" alt="menu" />
+ <span class="feature-arrow">«</span><a href="#and_more" class="feature-title">... and more!</a>
+ <p>That's just the tip of the iceburg. All pages within Nyx provide <b>help</b> information when you press 'h' and <b>menu</b> in response to 'm'. So go explore!</p>
</div>
+ </div>
- <div id="faq" class="content">
- <div class="section"></div>
- <a href="#faq" class="section-title">Fact & Question</a>
+ <div id="faq" class="page">
+ <div class="section"></div>
+ <a href="#faq" class="section-title">Fact & Question</a>
- <br /><br />
+ <br /><br />
- <div class="question" id="what_is_nyx">
- <span>What is Nyx?</span>
- <div class="answer">
- <a href="images/screenshots/front_page.png"><img src="images/faq/front_page.png" alt="screenshot" /></a>
- <p>Nyx is a command-line application for monitoring real time <a href="https://www.torproject.org/">Tor</a> status information. This includes bandwidth usage, logs, connections, configuration, and more.</p>
- <p>As a curses interface Nyx is particularly well suited for ssh connections, tty terminals, and command-line aficionados.</p>
- </div>
+ <div class="question" id="what_is_nyx">
+ <span>What is Nyx?</span>
+ <div class="answer">
+ <a href="images/screenshots/front_page.png"><img src="images/faq/front_page.png" alt="screenshot" /></a>
+ <p>Nyx is a command-line application for monitoring real time <a href="https://www.torproject.org/">Tor</a> status information. This includes bandwidth usage, logs, connections, configuration, and more.</p>
+ <p>As a curses interface Nyx is particularly well suited for ssh connections, tty terminals, and command-line aficionados.</p>
</div>
+ </div>
- <div class="question" id="why_is_it_called_nyx">
- <span>Why is it called Nyx?</span>
- <div class="answer">
- <a href="http://fallenlights.net/"><img src="images/faq/shadowgirl.jpg" alt="greek goddess" title="Nyx by Shadowgirl, used with permission." /></a>
- <p style="min-height: 340px">Simple - because the <a href="https://en.wikipedia.org/wiki/Nyx">Greek goddess of night</a> is short and memorable. Terminal applications are handiest when they're brief and easy to type. Top, ssh, scp - anything longer is just begging to be aliased down.</p>
- </div>
+ <div class="question" id="why_is_it_called_nyx">
+ <span>Why is it called Nyx?</span>
+ <div class="answer">
+ <a href="http://fallenlights.net/"><img src="images/faq/shadowgirl.jpg" alt="greek goddess" title="Nyx by Shadowgirl, used with permission." /></a>
+ <p style="min-height: 340px">Simple - because the <a href="https://en.wikipedia.org/wiki/Nyx">Greek goddess of night</a> is short and memorable. Terminal applications are handiest when they're brief and easy to type. Top, ssh, scp - anything longer is just begging to be aliased down.</p>
</div>
</div>
+ </div>
- <div id="download" class="content">
- <div class="section"></div>
- <a href="#download" class="section-title">Download</a>
+ <div id="download" class="page">
+ <div class="section"></div>
+ <a href="#download" class="section-title">Download</a>
- <p>Nyx is available Mac OSX, Linux, and BSD but <a href="#windows">not Windows</a>. Find your platform below to get started.</p>
+ <p>Nyx is available Mac OSX, Linux, and BSD but <a href="#windows">not Windows</a>. Find your platform below to get started.</p>
- <br />
+ <br />
- <div class="platform">
- <a href="https://pypi.python.org/pypi/nyx/" id="pypi"><img src="images/download/pypi.png" alt="PyPI" /></a>
- <a href="https://pypi.python.org/pypi/nyx/" class="platform-title">Python Package Index</a>
- <p>Signed releases and instructions for both Python 2.x and 3.x. You can easily install from its <a href="https://www.atagar.com/arm/resources/static/arm-1.4.5.0.tar.bz2">tarball</a> (<a href="https://www.atagar.com/arm/resources/static/arm-1.4.5.0.tar.bz2.asc">sig</a>), or with <b>pip</b>...</p>
- <pre>
+ <div class="platform">
+ <a href="https://pypi.python.org/pypi/nyx/" id="pypi"><img src="images/download/pypi.png" alt="PyPI" /></a>
+ <a href="https://pypi.python.org/pypi/nyx/" class="platform-title">Python Package Index</a>
+ <p>Signed releases and instructions for both Python 2.x and 3.x. You can easily install from its <a href="https://www.atagar.com/arm/resources/static/arm-1.4.5.0.tar.bz2">tarball</a> (<a href="https://www.atagar.com/arm/resources/static/arm-1.4.5.0.tar.bz2.asc">sig</a>), or with <b>pip</b>...</p>
+ <pre>
% sudo easy_install pip
% sudo pip install nyx
</pre>
- </div>
+ </div>
- <div class="platform">
- <a id="osx"><img src="images/download/osx.png" alt="OSX" /></a>
- <span class="platform-title">Mac OSX</span>
- <p>As of OSX 10.8 the platform bundles Python 2.7 by default. This makes installation easy...</p>
- <pre>
+ <div class="platform">
+ <a id="osx"><img src="images/download/osx.png" alt="OSX" /></a>
+ <span class="platform-title">Mac OSX</span>
+ <p>As of OSX 10.8 the platform bundles Python 2.7 by default. This makes installation easy...</p>
+ <pre>
% sudo easy_install pip
% sudo pip install nyx
</pre>
- </div>
+ </div>
- <div class="platform">
- <a href="http://packages.debian.org/sid/tor-arm" id="debian"><img src="images/download/debian.png" alt="Debian" /></a>
- <a href="http://packages.debian.org/sid/tor-arm" class="platform-title">Debian</a>
- <p>Package maintained by Dererk for Debian.</p>
- <pre>% sudo apt-get install tor-arm</pre>
- </div>
+ <div class="platform">
+ <a href="http://packages.debian.org/sid/tor-arm" id="debian"><img src="images/download/debian.png" alt="Debian" /></a>
+ <a href="http://packages.debian.org/sid/tor-arm" class="platform-title">Debian</a>
+ <p>Package maintained by Dererk for Debian.</p>
+ <pre>% sudo apt-get install tor-arm</pre>
+ </div>
- <div class="platform">
- <a href="https://launchpad.net/ubuntu/+source/tor-arm" id="ubuntu"><img src="images/download/ubuntu.png" alt="Ubuntu" /></a>
- <a href="https://launchpad.net/ubuntu/+source/tor-arm" class="platform-title">Ubuntu</a>
- <p>Package derived from Debian for Ubuntu.</p>
- <pre>% sudo apt-get install tor-arm</pre>
- </div>
+ <div class="platform">
+ <a href="https://launchpad.net/ubuntu/+source/tor-arm" id="ubuntu"><img src="images/download/ubuntu.png" alt="Ubuntu" /></a>
+ <a href="https://launchpad.net/ubuntu/+source/tor-arm" class="platform-title">Ubuntu</a>
+ <p>Package derived from Debian for Ubuntu.</p>
+ <pre>% sudo apt-get install tor-arm</pre>
+ </div>
- <div class="platform">
- <a href="https://apps.fedoraproject.org/packages/tor-arm" id="fedora"><img src="images/download/fedora.png" alt="Fedora" /></a>
- <a href="https://apps.fedoraproject.org/packages/tor-arm" class="platform-title">Fedora</a>
- <p>Packages maintained by Juan for Fedora.</p>
- <pre>% sudo yum install tor-arm</pre>
- </div>
+ <div class="platform">
+ <a href="https://apps.fedoraproject.org/packages/tor-arm" id="fedora"><img src="images/download/fedora.png" alt="Fedora" /></a>
+ <a href="https://apps.fedoraproject.org/packages/tor-arm" class="platform-title">Fedora</a>
+ <p>Packages maintained by Juan for Fedora.</p>
+ <pre>% sudo yum install tor-arm</pre>
+ </div>
- <div class="platform">
- <a href="http://packages.gentoo.org/package/net-misc/arm" id="gentoo"><img src="images/download/gentoo.png" alt="Gentoo" /></a>
- <a href="http://packages.gentoo.org/package/net-misc/arm" class="platform-title">Gentoo</a>
- <p>Package maintained by Jesse for Gentoo.</p>
- <pre>% sudo emerge arm</pre>
- </div>
+ <div class="platform">
+ <a href="http://packages.gentoo.org/package/net-misc/arm" id="gentoo"><img src="images/download/gentoo.png" alt="Gentoo" /></a>
+ <a href="http://packages.gentoo.org/package/net-misc/arm" class="platform-title">Gentoo</a>
+ <p>Package maintained by Jesse for Gentoo.</p>
+ <pre>% sudo emerge arm</pre>
+ </div>
- <div class="platform">
- <a href="https://slackbuilds.org/repository/13.37/network/arm/" id="slackware"><img src="images/download/slackware.png" alt="Slackware" /></a>
- <a href="https://slackbuilds.org/repository/13.37/network/arm/" class="platform-title">Slackware</a>
- <p>Package maintained by pyllyukko for <a href="http://slackbuilds.org/howto/">Slackware</a>.</p>
- </div>
+ <div class="platform">
+ <a href="https://slackbuilds.org/repository/13.37/network/arm/" id="slackware"><img src="images/download/slackware.png" alt="Slackware" /></a>
+ <a href="https://slackbuilds.org/repository/13.37/network/arm/" class="platform-title">Slackware</a>
+ <p>Package maintained by pyllyukko for <a href="http://slackbuilds.org/howto/">Slackware</a>.</p>
+ </div>
- <div class="platform">
- <a href="http://www.freshports.org/security/arm" id="freebsd"><img src="images/download/freebsd.png" alt="FreeBSD" /></a>
- <a href="http://www.freshports.org/security/arm" class="platform-title">FreeBSD</a>
- <p>Port maintained by Carlo for <a href="http://www.freebsd.org/doc/en_US.ISO8859-1/books/handbook/ports.html">FreeBSD</a>.</p>
- <pre>% pkg install security/arm</pre>
- </div>
+ <div class="platform">
+ <a href="http://www.freshports.org/security/arm" id="freebsd"><img src="images/download/freebsd.png" alt="FreeBSD" /></a>
+ <a href="http://www.freshports.org/security/arm" class="platform-title">FreeBSD</a>
+ <p>Port maintained by Carlo for <a href="http://www.freebsd.org/doc/en_US.ISO8859-1/books/handbook/ports.html">FreeBSD</a>.</p>
+ <pre>% pkg install security/arm</pre>
+ </div>
- <div class="platform">
- <a href="https://gitweb.torproject.org/nyx.git" id="git"><img src="images/download/git.png" alt="Git" /></a>
- <a href="https://gitweb.torproject.org/nyx.git" class="platform-title">Source Repository</a>
- <p>For those that want to live on the bleeding edge or contribute, Nyx's git repository can be fetched with...</p>
- <pre>% git clone https://git.torproject.org/nyx.git</pre>
- </div>
+ <div class="platform">
+ <a href="https://gitweb.torproject.org/nyx.git" id="git"><img src="images/download/git.png" alt="Git" /></a>
+ <a href="https://gitweb.torproject.org/nyx.git" class="platform-title">Source Repository</a>
+ <p>For those that want to live on the bleeding edge or contribute, Nyx's git repository can be fetched with...</p>
+ <pre>% git clone https://git.torproject.org/nyx.git</pre>
</div>
</div>
@@ -194,10 +192,10 @@
// when provided an anchor select the tab it resides within
var anchor = window.location.hash;
- $(".tabs").tabs(".panes > .content", { history: true });
+ $(".tabs").tabs(".page", { history: true });
if (anchor) {
- $(".panes").children().each(function () {
+ $(".page").each(function () {
if ($(this).find(anchor).length) {
$(".tabs").data("tabs").click(this.id);
document.getElementById(anchor.substr(1)).scrollIntoView();
diff --git a/web/styles.css b/web/styles.css
index 081ff27..617b74b 100644
--- a/web/styles.css
+++ b/web/styles.css
@@ -91,7 +91,7 @@ Header Bar (logo and nav)
Common Page Attributes
============================================================*/
-.content {
+.page {
background: white;
border-radius: 10px;
box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.80);
@@ -102,7 +102,7 @@ Common Page Attributes
text-align: center;
}
-.content p {
+.page p {
margin: 20px 0px 0px;
text-align: justify;
}
More information about the tor-commits
mailing list