Re: [qemu-web PATCH v2 06/16] Rework display of screenshots to use a carousel slider

[Kashyap Chamarthy <kchamart@redhat.com>]

On Tue, Oct 27, 2020 at 01:20:05PM +0000, Daniel P. Berrangé wrote:
> We have a number of screenshots to display, with three fitted across the
> width of the screen. The screenshots dominate the usage of screen real
> estate on the front page, with other relevant information off the bottom
> of the page.
> 
> As a step towards increasing the information density of the home screen
> replace the horizontally presented screenshots with a rotating carousel
> of images.
> 
> Signed-off-by: Daniel P. Berrangé <berrange@redhat.com>
> ---
>  _data/screenshots.yml     | 14 ++++++++++++--
>  _includes/screenshot.html |  8 ++++++--
>  assets/css/style.css      | 10 +++++++---
>  index.html                | 36 ++++++++++++++++--------------------
>  4 files changed, 41 insertions(+), 27 deletions(-)

The carousel slider looks effective; also makes the page a little more
cleaner.  And I also noticed -- if I click on an image, conveniently
enough, the slider lets me rotate through the images manually as well.

Reviewed-by: Kashyap Chamarthy <kchamart@redhat.com>    

> 
> diff --git a/_data/screenshots.yml b/_data/screenshots.yml
> index 3b8b6a5..2811244 100644
> --- a/_data/screenshots.yml
> +++ b/_data/screenshots.yml
> @@ -3,18 +3,28 @@
>    author: "Screenshot by [User:Nurnware](https://commons.wikimedia.org/wiki/User:Nurnware)"
>    description: "QEMU running the ReactOS operating system on Linux."
>    description_md: "QEMU running the [ReactOS](http://www.reactos.org) operating system on Linux."
> -- file: qemu-arm.png
> -  description: "QEMU running a 32-bit ARM binary on a 64-bit Linux system."
> +  heading: Full-system emulation
> +  blurb: Run operating systems for any machine, on any supported architecture
>  - file: qemu-advent-calendar-osv-redis.png
>    source: http://www.qemu-advent-calendar.org/#day-11
>    author: "Courtesy of Dor Laor"
>    description: "The dashboard of the OSv operating system, running in the background as a QEMU/KVM process."
>    description_md: "The dashboard of the [OSv](http://osv.io) operating system, running in the background as a QEMU/KVM process."
> +  heading: Virtualization
> +  blurb: Run KVM and Xen virtual machines with near native performance
> +- file: qemu-arm.png
> +  description: "QEMU running a 32-bit ARM binary on a 64-bit Linux system."
> +  heading: User-mode emulation
> +  blurb: Run programs for another Linux/BSD target, on any supported architecture
>  - file: qemu-advent-calendar-s390-moon-buggy.png
>    source: http://www.qemu-advent-calendar.org/#day-22
>    author: "Courtesy of Alexander Graf"
>    description: "QEMU emulating an ASCII art game for the System z (s390) mainframe."
> +  heading: Full-system emulation
> +  blurb: Run operating systems for non-native architectures
>  - file: qemu-advent-calendar-second-reality.png
>    source: http://www.qemu-advent-calendar.org/#day-13
>    author: "Courtesy of Paolo Bonzini"
>    description: "QEMU running Second Reality, a well-known PC demo from 1993, inside the FreeDOS operating system."
> +  heading: Full-system emulation
> +  blurb: Run demos written for classic / obsolete operating systems
> diff --git a/_includes/screenshot.html b/_includes/screenshot.html
> index 70b0d11..fb79e5d 100644
> --- a/_includes/screenshot.html
> +++ b/_includes/screenshot.html
> @@ -1,9 +1,13 @@
>  {% for screenshot in site.data.screenshots offset: {{include.offset}} limit: {{include.limit}} %}
> -<a href="screenshots/{{screenshot.file}}" class="colorbox"
> +<section>
> +  {% if screenshot.heading %}<h3>{{ screenshot.heading }}</h3>{% endif %}
> +  <div class="pennant"><a href="screenshots/{{screenshot.file}}" class="colorbox"
>     title="{{screenshot.description}}"
>     data-title="{% if screenshot.description_md %}{{screenshot.description_md | markdownify | remove: '<p>' | remove: '</p>' | strip_newlines | escape}}{%
>     else %}{{screenshot.description}}{%endif %}{%
>     if screenshot.author %} {{screenshot.author | markdownify | remove: '<p>' | remove: '</p>' | strip_newlines | escape}} {% endif %}{%
>     if screenshot.source %} (&lt;a href=&quot;{{screenshot.source}}&quot;&gt;Source&lt;/a&gt;){%endif %}"><img
> -   src="screenshots/{{screenshot.file}}" alt="Screenshot: {{screenshot.description}}"/></a>
> +   src="screenshots/{{screenshot.file}}" alt="Screenshot: {{screenshot.description}}"/></a></div>
> +  {% if screenshot.blurb %}<p>{{ screenshot.blurb }}</p>{% endif %}
> +</section>
>  {% endfor %}
> diff --git a/assets/css/style.css b/assets/css/style.css
> index e09b383..855217b 100644
> --- a/assets/css/style.css
> +++ b/assets/css/style.css
> @@ -557,13 +557,14 @@
>  	#featured header
>  	{
>  		border-bottom: 1px solid #333333;
> +		margin-bottom: 0.5em;
>  	}
>  	#featured h2
>  	{
>  		margin-bottom: 0em;
>  	}
>  
> -	#featured h3
> +	#featured .screenshots h3
>  	{
>  		padding: 1.5em 0em;
>  		font-size: 1.6em;
> @@ -573,12 +574,15 @@
>  		margin: 0em 0em 1em 0em;
>  	}
>  
> -	#featured .pennant
> +	#featured .screenshots .pennant
>  	{
>  		font-size: 4em;
> +		width: 40%;
> +		margin-left: auto;
> +		margin-right: auto;
>  	}
>  
> -	#featured .pennant img
> +	#featured .screenshots .pennant img
>  	{
>  		width: 100%;
>  		object-fit: contain;
> diff --git a/index.html b/index.html
> index e52868d..48304c8 100644
> --- a/index.html
> +++ b/index.html
> @@ -2,6 +2,7 @@
>  title: QEMU
>  layout: home
>  colorbox: True
> +bxslider: True
>  ---
>  {% include relative_root.html %}
>  	<!-- Header -->
> @@ -19,25 +20,9 @@ colorbox: True
>  			<h2>What is QEMU?</h2>
>  			<p>QEMU is a generic and open source machine emulator and virtualizer.</p>
>  		</header>
> -		<div class="row">
> -			<section class="4u">
> -				<div class="pennant">{% include screenshot.html offset=0 limit=1 %}</div>
> -				<h3>Full-system<br class="only-desktop"> emulation</h3>
> -				<p>Run operating systems for any machine, on any supported architecture</p>
> -			</section>
> -			<section class="4u">
> -				<div class="pennant">{% include screenshot.html offset=1 limit=1 %}</div>
> -				<h3>User-mode<br class="only-desktop"> emulation</h3>
> -				<p>Run programs for another Linux/BSD target, on any supported architecture</p>
> -			</section>
> -			<section class="4u">
> -				<div class="pennant">{% include screenshot.html offset=2 limit=1 %}</div>
> -				<h3>Virtualization</h3>
> -				<p>Run KVM and Xen virtual machines with near native performance</p>
> -			</section>
> -			<section style="display: none;">
> -			{% include screenshot.html offset=3 limit=10 %}
> -			</section>
> +		<div class="row slider screenshots">
> +			{% include screenshot.html %}
> +		</div>
>  
>  <script src="{{ relative_root }}/assets/js/object-fit.js"></script>
>  <script>
> @@ -59,9 +44,20 @@ $(window).on("load resize", function() {
>  $('.colorbox').on("click.random-namespace", function() {
>      return window.hasColorBox;
>  })
> +
> +$(document).ready(function(){
> +    $('.slider').bxSlider({
> +        auto: true,
> +        autoHover: true,
> +        mode: "fade",
> +        infiniteLoop: true,
> +        controls: false,
> +        speed: 500,
> +        pause: 5000,
> +    });
> +});
>  </script>
>  
> -		</div>
>  		<hr>
>  		<p>QEMU is a member of <a href="{{ relative_root }}/conservancy/">Software Freedom Conservancy</a>.</p>
>  	</div>
> -- 
> 2.26.2
> 
> 

-- 
/kashyap