From a86232db6d6cde3f6bb18c49bfde3901a29e7cd2 Mon Sep 17 00:00:00 2001 From: wavehunter1715 Date: Sun, 29 Dec 2024 14:13:53 +0530 Subject: [PATCH 01/10] Add 'Skip to Content' link for accessibility in Info, Landing, and Table pages --- apps/Info.html | 30 ++++++ apps/landing/landing.html | 209 ++++++++++++++++++++------------------ apps/landing/main.css | 18 ++++ apps/table.css | 19 ++++ apps/table.html | 32 +++++- 5 files changed, 208 insertions(+), 100 deletions(-) diff --git a/apps/Info.html b/apps/Info.html index 7f964f635..ce4ba309b 100644 --- a/apps/Info.html +++ b/apps/Info.html @@ -38,9 +38,39 @@ + + +
+ + +
+
+
+
+

caMicroscope

+
+
+ +
+
+ +
+

caMicroscope

+

Use camicroscope to explore and mark slides uploaded. If this is a restricted access + deployment, you will be prompted to log in here.

+ More +
+
+
+ +
+

Documentation

+

Read documentation for using and developing caMicroscope.

+ More +
+
+
-
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - + + + +
+ + + + + + + + + + + - diff --git a/apps/landing/main.css b/apps/landing/main.css index ebd3c424e..695edac41 100644 --- a/apps/landing/main.css +++ b/apps/landing/main.css @@ -10,6 +10,24 @@ /* Reset */ /* addind loader animation */ +.skip-to-content { + position: absolute; + top: 10px; + left: 10px; + background-color: #000; + color: #fff; + padding: 10px; + z-index: 1000; + text-decoration: none; + font-size: 1rem; + transform: translateY(-100%); + transition: transform 0.3s ease-in-out; + } + + .skip-to-content:focus { + transform: translateY(0); + } + .loader { width: 50px; height: 50px; diff --git a/apps/table.css b/apps/table.css index d11cd8d75..2b5c3b1e5 100644 --- a/apps/table.css +++ b/apps/table.css @@ -161,6 +161,25 @@ nav li:not(.active):hover { z-index: 1000; } +.skip-to-content { + position: absolute; + top: 10px; + left: 10px; + background-color: #000; + color: #fff; + padding: 10px; + z-index: 1000; + text-decoration: none; + transform: translateY(-100%); + transition: transform 0.3s ease-in-out; +} + +.skip-to-content:focus { + transform: translateY(0); +} + + + .notification-box { padding: 10px 0px; color: black; diff --git a/apps/table.html b/apps/table.html index ae8075125..4090801d1 100644 --- a/apps/table.html +++ b/apps/table.html @@ -40,9 +40,39 @@ + + +