[dpdk-web] [PATCH] download: add icons to main 3 links

[dpdk-web] [PATCH] download: add icons to main 3 links

[Harry van Haaren]

This patch integrates icons from the Google material icon set
for the download, quick-start, and web-browsing links.

The links are layed out using panes horizontally, and re-ordered:
Download | Quick Start | Older versions and Web interface

Defines a new .well CSS attribute for panes behind icons.

Signed-off-by: Harry van Haaren <harry.van.haaren@intel.com>
---

There are multiple ways to link to the Google icons, this patch
includes the stylesheet, as it its the most flexible for using
multiple icons.

Other options are to save the SVG code directly in the page
(cannot resize icon easily) or save the .svg to a file and
display it (requires adding each icon to be used manually).
Unless you feel strongly against including the stylesheet,
this is the most effective solution.


 download.html | 22 +++++++++++++++++++---
 layout.css    | 12 ++++++++++++
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/download.html b/download.html
index 2a1dedf..a86dd2e 100644
--- a/download.html
+++ b/download.html
@@ -7,6 +7,7 @@
 		<link rel="stylesheet" href="/reset.css" />
 		<link rel="stylesheet" href="/layout.css" />
 		<link rel="stylesheet" href="/content.css" />
+		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 		<script type="text/javascript">
 			var _gaq = _gaq || [];
 			_gaq.push(['_setAccount', 'UA-39229303-1']);
@@ -38,9 +39,24 @@
 		</header>
 		<section>
 			<h2>Download</h2>
-			<p>Latest version: <a href="/browse/dpdk/snapshot/dpdk-2.2.0.tar.gz">2.2.0</a>.</p>
-			<p>Other versions and formats are available from the <a href="/browse/dpdk/refs/">browsing interface</a>.</p>
-			<p>Once downloaded, follow the <a href="/doc/quick-start">quick start instructions</a> to build and run a first test.</p>
+			<div style="position: relative;">
+				<a href="/browse/dpdk/snapshot/dpdk-2.2.0.tar.gz">
+					<div style="position: relative; width: 33%; float: left;"><div class="well">
+						<i class="material-icons" style="font-size: 4em;">archive</i><br/>
+						Latest Version: 2.2.0</div></div>
+				</a>
+				<a href="/doc/quick-start">
+					<div  style="position: relative; width: 33%; float: left;"><div class="well">
+						<i class="material-icons" style="font-size: 4em;">access_time</i><br/>
+						Quick Start Instructions</div></div>
+				</a>
+				<a href="/browse/dpdk/refs/">
+					<div style="position: relative; width: 33%; float: left;"><div class="well">
+						<i class="material-icons" style="font-size: 4em;">view_list</i><br/>
+						Web Interface and Old Versions</div></div>
+				</a>
+			</div>
+
 			<h3>Applications</h3>
 			<ul>
 				<li><a href="/browse/apps/pktgen-dpdk/refs/">pktgen-dpdk (traffic generator)</a></li>
diff --git a/layout.css b/layout.css
index df9e220..252370b 100644
--- a/layout.css
+++ b/layout.css
@@ -82,3 +82,15 @@ footer {
 	color: #aaa;
 	text-shadow: 1px 1px 1px #fff;
 }
+
+.well {
+	background-color: rgba(0, 35, 60, 0.07);
+	text-align: center;
+	padding-top: 1em;
+	padding-bottom: 1em;
+	margin-left: 0.7em;
+	margin-right: 0.7em;
+	box-shadow: inset 2px 2px 2px rgba(0,0,0,0.3);
+	border-radius: 0.7em 0.7em 0.7em 0.7em;
+	color : #00233b;
+}
-- 
2.5.0

Re: [dpdk-web] [PATCH] download: add icons to main 3 links

[Thomas Monjalon]

2016-02-19 14:35, Harry van Haaren:
> This patch integrates icons from the Google material icon set
> for the download, quick-start, and web-browsing links.

I agree on the idea.

> The links are layed out using panes horizontally, and re-ordered:
> Download | Quick Start | Older versions and Web interface

"Web interface" does not well describe the cgit link.
What about this kind of title? "Other Versions & git"

> Defines a new .well CSS attribute for panes behind icons.

What means "well"? Why not button?

> Signed-off-by: Harry van Haaren <harry.van.haaren@intel.com>
> ---
> 
> There are multiple ways to link to the Google icons, this patch
> includes the stylesheet, as it its the most flexible for using
> multiple icons.
> 
> Other options are to save the SVG code directly in the page
> (cannot resize icon easily) or save the .svg to a file and
> display it (requires adding each icon to be used manually).
> Unless you feel strongly against including the stylesheet,
> this is the most effective solution.

Yes the stylesheet include looks good.

> +.well {
> +	background-color: rgba(0, 35, 60, 0.07);
> +	text-align: center;
> +	padding-top: 1em;
> +	padding-bottom: 1em;
> +	margin-left: 0.7em;
> +	margin-right: 0.7em;
> +	box-shadow: inset 2px 2px 2px rgba(0,0,0,0.3);
> +	border-radius: 0.7em 0.7em 0.7em 0.7em;
> +	color : #00233b;
> +}

I think the orange hover effect is missing.

Thanks Harry for bringing some fresh air :)

Re: [dpdk-web] [PATCH] download: add icons to main 3 links

[Thomas Monjalon]

2016-02-19 16:36, Thomas Monjalon:
> 2016-02-19 14:35, Harry van Haaren:
> > This patch integrates icons from the Google material icon set
> > for the download, quick-start, and web-browsing links.
> 
> I agree on the idea.
> 
> > The links are layed out using panes horizontally, and re-ordered:
> > Download | Quick Start | Older versions and Web interface
> 
> "Web interface" does not well describe the cgit link.
> What about this kind of title? "Other Versions & git"
> 
> > Defines a new .well CSS attribute for panes behind icons.
> 
> What means "well"? Why not button?
> 
> > Signed-off-by: Harry van Haaren <harry.van.haaren@intel.com>
> > ---
> > 
> > There are multiple ways to link to the Google icons, this patch
> > includes the stylesheet, as it its the most flexible for using
> > multiple icons.
> > 
> > Other options are to save the SVG code directly in the page
> > (cannot resize icon easily) or save the .svg to a file and
> > display it (requires adding each icon to be used manually).
> > Unless you feel strongly against including the stylesheet,
> > this is the most effective solution.
> 
> Yes the stylesheet include looks good.
> 
> > +.well {
> > +	background-color: rgba(0, 35, 60, 0.07);
> > +	text-align: center;
> > +	padding-top: 1em;
> > +	padding-bottom: 1em;
> > +	margin-left: 0.7em;
> > +	margin-right: 0.7em;
> > +	box-shadow: inset 2px 2px 2px rgba(0,0,0,0.3);
> > +	border-radius: 0.7em 0.7em 0.7em 0.7em;
> > +	color : #00233b;
> > +}
> 
> I think the orange hover effect is missing.

I forgot to say that a margin is missing below the big buttons.
 
> Thanks Harry for bringing some fresh air :)

[dpdk-web] [PATCH v2] download: add icons to main 3 links

[Harry van Haaren]

This patch integrates icons from the Google material icon set
for the download, quick-start, and web-browsing links.

The links are layed out using panes horizontally, and re-ordered:
Download | Quick Start | Older versions and Web interface

defines a new .well CSS attribute for panes behind icons.

Signed-off-by: Harry van Haaren <harry.van.haaren@intel.com>
---

v2:
-Renamed well to button
-Updated "Other Version & Git" name
-Added Orange hover effect
-Added margin below buttons

 download.html | 22 +++++++++++++++++++---
 layout.css    | 22 ++++++++++++++++++++++
 2 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/download.html b/download.html
index 2a1dedf..262cfe7 100644
--- a/download.html
+++ b/download.html
@@ -7,6 +7,7 @@
 		<link rel="stylesheet" href="/reset.css" />
 		<link rel="stylesheet" href="/layout.css" />
 		<link rel="stylesheet" href="/content.css" />
+		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 		<script type="text/javascript">
 			var _gaq = _gaq || [];
 			_gaq.push(['_setAccount', 'UA-39229303-1']);
@@ -38,9 +39,24 @@
 		</header>
 		<section>
 			<h2>Download</h2>
-			<p>Latest version: <a href="/browse/dpdk/snapshot/dpdk-2.2.0.tar.gz">2.2.0</a>.</p>
-			<p>Other versions and formats are available from the <a href="/browse/dpdk/refs/">browsing interface</a>.</p>
-			<p>Once downloaded, follow the <a href="/doc/quick-start">quick start instructions</a> to build and run a first test.</p>
+			<div style="position: relative;">
+				<a href="/browse/dpdk/snapshot/dpdk-2.2.0.tar.gz">
+					<div style="position: relative; width: 33%; float: left;"><div class="button">
+						<i class="material-icons" style="font-size: 4em;">archive</i><br/>
+						Latest Version: 2.2.0</div></div>
+				</a>
+				<a href="/doc/quick-start">
+					<div  style="position: relative; width: 33%; float: left;"><div class="button">
+						<i class="material-icons" style="font-size: 4em;">access_time</i><br/>
+						Quick Start Instructions</div></div>
+				</a>
+				<a href="/browse/dpdk/refs/">
+					<div style="position: relative; width: 33%; float: left;"><div class="button">
+						<i class="material-icons" style="font-size: 4em;">view_list</i><br/>
+						Other Versions & Git</div></div>
+				</a>
+			</div>
+
 			<h3>Applications</h3>
 			<ul>
 				<li><a href="/browse/apps/pktgen-dpdk/refs/">pktgen-dpdk (traffic generator)</a></li>
diff --git a/layout.css b/layout.css
index df9e220..b06650e 100644
--- a/layout.css
+++ b/layout.css
@@ -82,3 +82,25 @@ footer {
 	color: #aaa;
 	text-shadow: 1px 1px 1px #fff;
 }
+
+.button {
+	background-color: rgba(0, 35, 60, 0.07);
+	text-align: center;
+	padding-top: 1em;
+	padding-bottom: 1em;
+	margin-left: 0.7em;
+	margin-right: 0.7em;
+	margin-bottom: 1.4em;
+	box-shadow: inset 2px 2px 2px rgba(0,0,0,0.3);
+	border-radius: 0.7em 0.7em 0.7em 0.7em;
+	color : #00233b;
+}
+
+.button:hover {
+	color: #fff;
+	background-color: #ef4e22;
+	-webkit-transition: background-color .08s linear;
+	-moz-transition: background-color .08s linear;
+	-o-transition: background-color .08s linear;
+	transition: background-color .08s linear;
+}
-- 
2.5.0

[dpdk-web] [PATCH v3] add icons in download page

[Thomas Monjalon]

From: Harry van Haaren <harry.van.haaren@intel.com>

This patch integrates icons from the Google material icon set
for the download, quick-start, and cgit links.

The links are layed out using panes horizontally, and re-ordered:
Download | Quick Start | Older Versions

Defines a new .button CSS attribute for panes behind icons.

Signed-off-by: Harry van Haaren <harry.van.haaren@intel.com>
Signed-off-by: Thomas Monjalon <thomas.monjalon@6wind.com>
---
 content.css   | 20 ++++++++++++++++++++
 download.html | 19 ++++++++++++++++---
 2 files changed, 36 insertions(+), 3 deletions(-)

v2:
-Renamed well to button
-Updated "Other Version & Git" name
-Added Orange hover effect
-Added margin below buttons

v3:
- Moved button style from layout.css to content.css
- Used inline-block instead of nested float divs
- Removed margins before the first and after the last button

diff --git a/content.css b/content.css
index 103fbf4..8cfcbeb 100644
--- a/content.css
+++ b/content.css
@@ -63,3 +63,23 @@ section#ml td {
 section#ml th {
 	text-align: right;
 }
+
+section .button {
+	display: inline-block;
+	background-color: rgba(0, 35, 60, 0.07);
+	text-align: center;
+	padding-top: 1em;
+	padding-bottom: 1em;
+	box-shadow: inset 2px 2px 2px rgba(0,0,0,0.3);
+	border-radius: 0.7em 0.7em 0.7em 0.7em;
+	color : #00233b;
+}
+
+section .button:hover {
+	color: #fff;
+	background-color: #ef4e22;
+	-webkit-transition: background-color .08s linear;
+	-moz-transition: background-color .08s linear;
+	-o-transition: background-color .08s linear;
+	transition: background-color .08s linear;
+}
diff --git a/download.html b/download.html
index 2a1dedf..0c79b1c 100644
--- a/download.html
+++ b/download.html
@@ -7,6 +7,7 @@
 		<link rel="stylesheet" href="/reset.css" />
 		<link rel="stylesheet" href="/layout.css" />
 		<link rel="stylesheet" href="/content.css" />
+		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 		<script type="text/javascript">
 			var _gaq = _gaq || [];
 			_gaq.push(['_setAccount', 'UA-39229303-1']);
@@ -38,9 +39,21 @@
 		</header>
 		<section>
 			<h2>Download</h2>
-			<p>Latest version: <a href="/browse/dpdk/snapshot/dpdk-2.2.0.tar.gz">2.2.0</a>.</p>
-			<p>Other versions and formats are available from the <a href="/browse/dpdk/refs/">browsing interface</a>.</p>
-			<p>Once downloaded, follow the <a href="/doc/quick-start">quick start instructions</a> to build and run a first test.</p>
+			<a class="button" style="width: 30%; margin-right: 4%;"
+				href="/browse/dpdk/snapshot/dpdk-2.2.0.tar.gz">
+				<i class="material-icons" style="font-size: 4em;">archive</i><br>
+				Latest Version: 2.2.0
+			</a>
+			<a class="button" style="width: 30%; margin-right: 4%;"
+				href="/doc/quick-start">
+				<i class="material-icons" style="font-size: 4em;">access_time</i><br>
+				Quick Start Instructions
+			</a>
+			<a class="button" style="width: 30%;"
+				href="/browse/dpdk/refs/">
+				<i class="material-icons" style="font-size: 4em;">view_list</i><br>
+				Other Versions & Git
+			</a>
 			<h3>Applications</h3>
 			<ul>
 				<li><a href="/browse/apps/pktgen-dpdk/refs/">pktgen-dpdk (traffic generator)</a></li>
-- 
2.7.0

[dpdk-web] [PATCH v4 1/2] add icons in download page

[Thomas Monjalon]

From: Harry van Haaren <harry.van.haaren@intel.com>

This patch integrates icons from the Google material icon set
for the download, quick-start, and cgit links.

The links are layed out using panes horizontally, and re-ordered:
Download | Quick Start | Older Versions

Defines a new .button CSS attribute for panes behind icons.

Signed-off-by: Harry van Haaren <harry.van.haaren@intel.com>
Signed-off-by: Thomas Monjalon <thomas.monjalon@6wind.com>
---
 content.css   | 20 ++++++++++++++++++++
 download.html | 16 +++++++++++++---
 2 files changed, 33 insertions(+), 3 deletions(-)

v2:
-Renamed well to button
-Updated "Other Version & Git" name
-Added Orange hover effect
-Added margin below buttons

v3:
- Moved button style from layout.css to content.css
- Used inline-block instead of nested float divs
- Removed margins before the first and after the last button

v4:
- Removed underline in button hover
- Removed whitespace pixels between buttons
- Reduced size of buttons
- Used whole width for buttons

diff --git a/content.css b/content.css
index 103fbf4..0069355 100644
--- a/content.css
+++ b/content.css
@@ -63,3 +63,23 @@ section#ml td {
 section#ml th {
 	text-align: right;
 }
+
+section .button {
+	display: inline-block;
+	background-color: rgba(0, 35, 60, 0.07);
+	text-align: center;
+	padding: 1em 0;
+	box-shadow: inset 2px 2px 2px rgba(0,0,0,0.3);
+	border-radius: 0.7em 0.7em 0.7em 0.7em;
+	color : #00233b;
+}
+
+section .button:hover {
+	text-decoration: none;
+	color: #fff;
+	background-color: #ef4e22;
+	-webkit-transition: background-color .08s linear;
+	-moz-transition: background-color .08s linear;
+	-o-transition: background-color .08s linear;
+	transition: background-color .08s linear;
+}
diff --git a/download.html b/download.html
index 2a1dedf..6a4e5ae 100644
--- a/download.html
+++ b/download.html
@@ -7,6 +7,7 @@
 		<link rel="stylesheet" href="/reset.css" />
 		<link rel="stylesheet" href="/layout.css" />
 		<link rel="stylesheet" href="/content.css" />
+		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 		<script type="text/javascript">
 			var _gaq = _gaq || [];
 			_gaq.push(['_setAccount', 'UA-39229303-1']);
@@ -38,9 +39,18 @@
 		</header>
 		<section>
 			<h2>Download</h2>
-			<p>Latest version: <a href="/browse/dpdk/snapshot/dpdk-2.2.0.tar.gz">2.2.0</a>.</p>
-			<p>Other versions and formats are available from the <a href="/browse/dpdk/refs/">browsing interface</a>.</p>
-			<p>Once downloaded, follow the <a href="/doc/quick-start">quick start instructions</a> to build and run a first test.</p>
+			<a href="/browse/dpdk/snapshot/dpdk-2.2.0.tar.gz" class="button" style="width: 28%;">
+				<i class="material-icons" style="font-size: 4em;">archive</i><br>
+				Latest Version: 2.2.0
+			</a><!-- no whitespace
+			--><a href="/doc/quick-start" class="button" style="width: 28%; margin: 0 8%;">
+				<i class="material-icons" style="font-size: 4em;">access_time</i><br>
+				Quick Start Instructions
+			</a><!-- no whitespace
+			--><a href="/browse/dpdk/refs/" class="button" style="width: 28%;">
+				<i class="material-icons" style="font-size: 4em;">view_list</i><br>
+				Other Versions & Git
+			</a>
 			<h3>Applications</h3>
 			<ul>
 				<li><a href="/browse/apps/pktgen-dpdk/refs/">pktgen-dpdk (traffic generator)</a></li>
-- 
2.7.0

[dpdk-web] [PATCH v4 2/2] indent apps and tools

[Thomas Monjalon]

In the doc and download pages, there are sub-lists which
can be indented to better share the blank space.

Signed-off-by: Thomas Monjalon <thomas.monjalon@6wind.com>
---
 doc.html      | 2 +-
 download.html | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

v4:
- Introduced this patch

diff --git a/doc.html b/doc.html
index 397daea..2af2640 100644
--- a/doc.html
+++ b/doc.html
@@ -52,7 +52,6 @@
 					are formatted with <a href="http://sphinx-doc.org/">sphinx</a>.
 				<li>The guides are also available as
 					<a href="/doc/pdf-guides/">PDF files</a>.
-			</ul>
 			<h3>Applications</h3>
 			<ul>
 				<li><a href="http://pktgen.readthedocs.org">pktgen-dpdk (traffic generator)</a>
@@ -67,6 +66,7 @@
 				<li>Unmaintained driver for QEMU IVSHMEM: <a href="/doc/memnic-pmd">memnic-pmd</a>.
 				<li>Unmaintained driver for VMware ESXi vmxnet3 without uio: <a href="/doc/vmxnet3-usermap">vmxnet3-usermap</a>.
 			</ul>
+			</ul>
 		</section>
 	</body>
 </html>
diff --git a/download.html b/download.html
index 6a4e5ae..d07f3cb 100644
--- a/download.html
+++ b/download.html
@@ -51,6 +51,7 @@
 				<i class="material-icons" style="font-size: 4em;">view_list</i><br>
 				Other Versions & Git
 			</a>
+			<ul>
 			<h3>Applications</h3>
 			<ul>
 				<li><a href="/browse/apps/pktgen-dpdk/refs/">pktgen-dpdk (traffic generator)</a></li>
@@ -64,6 +65,7 @@
 				<li><a href="/browse/memnic/refs/">memnic</a> &mdash; latest: <a href="/browse/memnic/snapshot/memnic-1.3.tar.gz">1.3</a>
 				<li><a href="/browse/vmxnet3-usermap/refs/">vmxnet3-usermap</a> &mdash; latest: <a href="/browse/vmxnet3-usermap/snapshot/vmxnet3-usermap-1.2.tar.gz">1.2</a>
 			</ul>
+			</ul>
 		</section>
 	</body>
 </html>
-- 
2.7.0

Re: [dpdk-web] [PATCH v4 1/2] add icons in download page

[Van Haaren, Harry]

> From: Thomas Monjalon [mailto:thomas.monjalon@6wind.com]
> Sent: Sunday, February 21, 2016 9:18 AM
> To: Van Haaren, Harry <harry.van.haaren@intel.com>
> Cc: web@dpdk.org
> Subject: [PATCH v4 1/2] add icons in download page
> 
> From: Harry van Haaren <harry.van.haaren@intel.com>
> 
> This patch integrates icons from the Google material icon set
> for the download, quick-start, and cgit links.
> 
> The links are layed out using panes horizontally, and re-ordered:
> Download | Quick Start | Older Versions
> 
> Defines a new .button CSS attribute for panes behind icons.
> 
> Signed-off-by: Harry van Haaren <harry.van.haaren@intel.com>
> Signed-off-by: Thomas Monjalon <thomas.monjalon@6wind.com>

Thomas' updates / changes:
Acked-by: Harry van Haaren <harry.van.haaren@intel.com>

Re: [dpdk-web] [PATCH v4 2/2] indent apps and tools

[Van Haaren, Harry]

> From: Thomas Monjalon [mailto:thomas.monjalon@6wind.com]
> Sent: Sunday, February 21, 2016 9:18 AM
> To: Van Haaren, Harry <harry.van.haaren@intel.com>
> Cc: web@dpdk.org
> Subject: [PATCH v4 2/2] indent apps and tools
> 
> In the doc and download pages, there are sub-lists which
> can be indented to better share the blank space.
> 
> Signed-off-by: Thomas Monjalon <thomas.monjalon@6wind.com>

Acked-by: Harry van Haaren <harry.van.haaren@intel.com>

Re: [dpdk-web] [PATCH v4 1/2] add icons in download page

[Thomas Monjalon]

2016-02-22 11:50, Van Haaren, Harry:
> > From: Thomas Monjalon [mailto:thomas.monjalon@6wind.com]
> > Sent: Sunday, February 21, 2016 9:18 AM
> > To: Van Haaren, Harry <harry.van.haaren@intel.com>
> > Cc: web@dpdk.org
> > Subject: [PATCH v4 1/2] add icons in download page
> > 
> > From: Harry van Haaren <harry.van.haaren@intel.com>
> > 
> > This patch integrates icons from the Google material icon set
> > for the download, quick-start, and cgit links.
> > 
> > The links are layed out using panes horizontally, and re-ordered:
> > Download | Quick Start | Older Versions
> > 
> > Defines a new .button CSS attribute for panes behind icons.
> > 
> > Signed-off-by: Harry van Haaren <harry.van.haaren@intel.com>
> > Signed-off-by: Thomas Monjalon <thomas.monjalon@6wind.com>
> 
> Thomas' updates / changes:
> Acked-by: Harry van Haaren <harry.van.haaren@intel.com>

Applied, thanks