[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
Re: [qemu-web PATCH v2 06/16] Rework display of screenshots to use a car
From: |
Paolo Bonzini |
Subject: |
Re: [qemu-web PATCH v2 06/16] Rework display of screenshots to use a carousel slider |
Date: |
Tue, 27 Oct 2020 19:45:50 +0100 |
User-agent: |
Mozilla/5.0 (X11; Linux x86_64; rv:78.0) Gecko/20100101 Thunderbird/78.3.1 |
On 27/10/20 14:20, 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.
Looks good, but the left and right columns are a bit unbalanced.
Since you are at it, perhaps you could organize the part below the red
strip a bit like the Dolphin home page (https://dolphin-emu.org/):
----------------------------------------------------------
QEMU
Generic, open source emulator and virtualizer
----------------------------------------------------------
Latest release: CAROUSEL
.... . . .
Contribute Recent posts
..... ....
Advent calendar
Blog planet
KVM
Libguestfs
Libvirt
Xen
---------------------------------------------------------
Also, possibly include the excerpt of the first post ({{post.excerpt}}).
Thanks!
Paolo
> 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(-)
>
> 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 %} (<a
> href="{{screenshot.source}}">Source</a>){%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>
>
- [qemu-web PATCH v2 00/16] Re-design the QEMU home page to better present information, Daniel P . Berrangé, 2020/10/27
- [qemu-web PATCH v2 02/16] gitlab: introduce a CI job to publish the site content, Daniel P . Berrangé, 2020/10/27
- [qemu-web PATCH v2 04/16] Make page header nav narrower, Daniel P . Berrangé, 2020/10/27
- [qemu-web PATCH v2 03/16] make all links be relative to the root, Daniel P . Berrangé, 2020/10/27
- [qemu-web PATCH v2 01/16] Convert files to UNIX line endings, Daniel P . Berrangé, 2020/10/27
- [qemu-web PATCH v2 06/16] Rework display of screenshots to use a carousel slider, Daniel P . Berrangé, 2020/10/27
- [qemu-web PATCH v2 05/16] Introduce support for "bxslider" jquery add on, Daniel P . Berrangé, 2020/10/27
- [qemu-web PATCH v2 07/16] Compress the two front page headings into one, Daniel P . Berrangé, 2020/10/27
- [qemu-web PATCH v2 08/16] Simplify copyright and integrate into footer, Daniel P . Berrangé, 2020/10/27
- [qemu-web PATCH v2 09/16] Put a full SFC membership blurb in footer of every page, Daniel P . Berrangé, 2020/10/27
- [qemu-web PATCH v2 10/16] Use two column layout to display screenshots and releases, Daniel P . Berrangé, 2020/10/27
- [qemu-web PATCH v2 11/16] Bring contribution links out of the footer into the home page, Daniel P . Berrangé, 2020/10/27
- [qemu-web PATCH v2 12/16] Add recent blog posts to the front page featured content, Daniel P . Berrangé, 2020/10/27
- [qemu-web PATCH v2 13/16] Move wiki link from footer into the header navbar, Daniel P . Berrangé, 2020/10/27
- [qemu-web PATCH v2 14/16] Simplify and restructure the page footer, Daniel P . Berrangé, 2020/10/27