| Message ID | 20201027132015.621733-7-berrange@redhat.com |
|---|---|
| State | New |
| Headers | show |
| Series | Re-design the QEMU home page to better present information | expand |
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 %} (<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> > -- > 2.26.2 > >
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> >
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>
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(-)