GNU bug report logs - #38008
[PATCH] website: home: Fix contrast issue in video boxes.

Previous Next

Full log

View this message in rfc822 format

From: help-debbugs <at> gnu.org (GNU bug Tracking System)
To: sirgazil <sirgazil <at> zoho.com>
Subject: bug#38008: closed (Re: [bug#38008] [PATCH] website: home: Fix
 contrast issue in video boxes.)
Date: Fri, 01 Nov 2019 07:20:02 +0000

[Message part 1 (text/plain, inline)]

Your bug report

#38008: [PATCH] website: home: Fix contrast issue in video boxes.

which was filed against the guix-patches package, has been closed.

The explanation is attached below, along with your original report.
If you require more details, please reply to 38008 <at> debbugs.gnu.org.

-- 
38008: http://debbugs.gnu.org/cgi/bugreport.cgi?bug=38008
GNU Bug Tracking System
Contact help-debbugs <at> gnu.org with problems

[Message part 2 (message/rfc822, inline)]

From: "pelzflorian (Florian Pelz)" <pelzflorian <at> pelzflorian.de>
To: sirgazil <sirgazil <at> zoho.com>
Cc: 38008-done <at> debbugs.gnu.org
Subject: Re: [bug#38008] [PATCH] website: home: Fix contrast issue in video
 boxes.
Date: Fri, 1 Nov 2019 08:19:08 +0100

On Thu, Oct 31, 2019 at 02:11:50PM -0500, sirgazil via Guix-patches via wrote:
> This commit changes the white text on yellow background when hovering
> over the featured video boxes to conform to WCAG 2.0 Level AA
> guidelines. Instead, only the title of the video is changed to yellow
> on hover.
> 
> * website/static/media/css/video-preview.css: New style sheet.
> * website/static/base/css/elements.css (video): New rule set.
> * website/static/base/css/index.css:
>   (.video-preview): Move to the new video preview style sheet.
> * website/apps/base/templates/home.scm:
>   (home-t): Use the new video and video preview styles.
> * website/apps/media/templates/components.scm:
>   (video-preview): Use new video preview style.
>   (video->shtml): Use the new video style instead of the style defined
>   for the .video-preview class.

Pushed.  It is much prettier.  Thank you!

Perhaps the link-light I added should be deleted now that there is a
video-link CSS rule, but I’m not sure.  Shall I delete it?

Regards,
Florian

[Message part 3 (message/rfc822, inline)]

From: sirgazil <sirgazil <at> zoho.com>
To: guix-patches <at> gnu.org
Cc: sirgazil <sirgazil <at> zoho.com>
Subject: [PATCH] website: home: Fix contrast issue in video boxes.
Date: Thu, 31 Oct 2019 14:11:50 -0500

This commit changes the white text on yellow background when hovering
over the featured video boxes to conform to WCAG 2.0 Level AA
guidelines. Instead, only the title of the video is changed to yellow
on hover.

* website/static/media/css/video-preview.css: New style sheet.
* website/static/base/css/elements.css (video): New rule set.
* website/static/base/css/index.css:
  (.video-preview): Move to the new video preview style sheet.
* website/apps/base/templates/home.scm:
  (home-t): Use the new video and video preview styles.
* website/apps/media/templates/components.scm:
  (video-preview): Use new video preview style.
  (video->shtml): Use the new video style instead of the style defined
  for the .video-preview class.
---
 website/apps/base/templates/home.scm        |  6 ++--
 website/apps/media/templates/components.scm | 11 +++----
 website/static/base/css/elements.css        | 10 +++++-
 website/static/base/css/index.css           |  8 -----
 website/static/media/css/video-preview.css  | 34 +++++++++++++++++++++
 5 files changed, 51 insertions(+), 18 deletions(-)
 create mode 100644 website/static/media/css/video-preview.css

diff --git a/website/apps/base/templates/home.scm b/website/apps/base/templates/home.scm
index 2aaac7a..8b81b82 100644
--- a/website/apps/base/templates/home.scm
+++ b/website/apps/base/templates/home.scm
@@ -29,7 +29,8 @@
    #:active-menu-item "Overview"
    #:css (list
 	  (guix-url "static/base/css/item-preview.css")
-	  (guix-url "static/base/css/index.css"))
+	  (guix-url "static/base/css/index.css")
+          (guix-url "static/media/css/video-preview.css"))
    #:content
    `(main
      ;; Featured content.
@@ -182,8 +183,7 @@
       (div
        (@ (class "info-box"))
        (video
-	(@ (class "video-preview")
-	   (src "https://audio-video.gnu.org/video/misc/2016-07__GNU_Guix_Demo_2.webm")
+	(@ (src "https://audio-video.gnu.org/video/misc/2016-07__GNU_Guix_Demo_2.webm")
 	   (poster ,(guix-url "static/media/img/guix-demo.png"))
 	   (controls "controls"))
 	(p
diff --git a/website/apps/media/templates/components.scm b/website/apps/media/templates/components.scm
index 598ede8..945b9db 100644
--- a/website/apps/media/templates/components.scm
+++ b/website/apps/media/templates/components.scm
@@ -61,8 +61,7 @@ top."
    VIDEO (<video>)
      A video object as defined in (apps media types)."
   `(video
-     (@ (class "video-preview")
-        (src ,(video-url video))
+     (@ (src ,(video-url video))
         (poster ,(video-poster video))
         (controls "controls"))
       ;; TODO: Insert missing video-tracks.
@@ -80,11 +79,11 @@ object.
    VIDEO (<video>)
      A video object as defined in (apps media types)."
   `(div
-    (@ (class "item-preview"))
+    (@ (class "video-preview"))
     ,(video->shtml video)
-    ,(link-light
-      #:label (video-title video)
-      #:url (guix-url (video->url video)))))
+    (a
+     (@ (class "video-link") (href ,(guix-url (video->url video))))
+     ,(video-title video))))
 
 
 (define (video-content video)
diff --git a/website/static/base/css/elements.css b/website/static/base/css/elements.css
index 42e99ca..27127fd 100644
--- a/website/static/base/css/elements.css
+++ b/website/static/base/css/elements.css
@@ -87,4 +87,12 @@ td {
 
 th {
     background-color: #F5F5F5;
-}
\ No newline at end of file
+}
+
+video {
+    border-color: black;
+    border-style: solid;
+    border-width: thin;
+    box-shadow: 0 0 4px black;
+    max-width: 100%;
+}
diff --git a/website/static/base/css/index.css b/website/static/base/css/index.css
index e029e2d..ea52a6d 100644
--- a/website/static/base/css/index.css
+++ b/website/static/base/css/index.css
@@ -110,14 +110,6 @@ h3 {
     vertical-align: top;
 }
 
-.video-preview {
-    border-color: black;
-    border-style: solid;
-    border-width: thin;
-    box-shadow: 0 0 4px black;
-    width: 100%;
-}
-
 .contact-box {
     background-color: #F5F5F5;
     background-image: url("../img/h-separator-dark.png"),
diff --git a/website/static/media/css/video-preview.css b/website/static/media/css/video-preview.css
new file mode 100644
index 0000000..9848a54
--- /dev/null
+++ b/website/static/media/css/video-preview.css
@@ -0,0 +1,34 @@
+/* Public domain 2019. All rights waived */
+
+.video-preview {
+    color: white;
+    display: block;
+    padding: 10px 15px;
+    text-align: center;
+}
+
+.video-link:link,
+.video-link:visited {
+    display: block;
+    border-style: none;
+    color: white;
+    margin-top: 0.5em;
+}
+
+.video-link:active,
+.video-link:focus,
+.video-link:hover {
+    border-style: none;
+    color: #F4BB15;
+}
+
+
+
+@media screen and (min-width: 1024px) {
+    .video-preview {
+        display: inline-block;
+        margin: 10px 0px 15px 0px;
+        vertical-align: top;
+        width: 270px;
+    }
+}
-- 
2.23.0

Previous Next

GNU bug tracking system
Copyright (C) 1999 Darren O. Benham, 1997,2003 nCipher Corporation Ltd, 1994-97 Ian Jackson.