From 6235c11ac2e4c2f9c343edfa1073a041cd75c709 Mon Sep 17 00:00:00 2001 From: Chineta Adinnu Date: Fri, 4 Oct 2024 10:44:52 +0100 Subject: [PATCH 1/2] add accordion to faq page --- specimen/contexts/faq-page.html | 320 ++++++++++++++++++++++++++++++++ specimen/style.css | 105 +++++++++++ src/js/accordion.js | 43 +++++ 3 files changed, 468 insertions(+) create mode 100644 specimen/contexts/faq-page.html create mode 100644 src/js/accordion.js diff --git a/specimen/contexts/faq-page.html b/specimen/contexts/faq-page.html new file mode 100644 index 0000000..3655771 --- /dev/null +++ b/specimen/contexts/faq-page.html @@ -0,0 +1,320 @@ + + + +Default Page - Context + + + + + + + + + + + + + + + +
+
+

+ + + + +
+ + + +
+ + + + + +
+ +
+ +
+

Join us in celebrating 100 years of the Commons this Fall.

+
+ +
+ +
+ +

Frequently Asked Questions

+ + + +

lead in paragraph

+ + + + + + +
+ + + + +
+ + + + + +

What are the barriers to open culture? What challenges do cultural heritage institutions — such as galleries, libraries, archives, and museums (GLAMs) — face in making their collections openly accessible online? How could Creative Commons support institutions in addressing these challenges and taking part in better sharing of cultural heritage?

+ +

In search of answers, we looked at past research, notably Andrea Wallace's Barriers to Open Access — Open GLAM, and asked more than 30 experts in the open culture movement. You can watch what they told us in our CC Open Culture VOICES vlog series. Here's a small sample of what we heard:

+

About CC

+
+

+ +

+
+
+ +

Absolutely not. CC has responded to claims to the contrary. CC licenses are copyright licenses, and depend on the existence of copyright to work. CC licenses are legal tools that creators and other rights holders can use to offer certain usage rights to the public, while reserving other rights. Those who want to make their work available to the public for limited kinds of uses while preserving their copyright may want to consider using CC licenses. Others who want to reserve all of their rights under copyright law should not use CC licenses.

+
+
+

+ +

+ +

+ +

+ +
+ +

General License Information

+ +

Along The Way We Try

+ + +

Along with 600 million people, nine-year-old Chris Hadfield is glued to his television—watching intently as American astronaut Neil Armstrong glides down the ladder of the Lunar Module, and in one swift pounce, touches the dust of a familiar yet alien world. His words forever immortalized, "That's one small step for man, one giant leap for mankind."

+ +
    +
  • Assemble module
    • +
  • Launch aircraft
    • +
  • Land safely
    • +
+ +

“To see that successfully carried out against what seemed like impossible odds for the first time in human history,” Hadfield recalled in 2012, “was hugely inspiring.” That moment sparked his lifelong journey to become an astronaut; which he did, becoming the first Canadian to walk in space in 2001. In the 1990s, Haley Harrison first heard Armstrong's words on an educational tape about space. “I was very young, probably 4 or 5 years old,” she recollected, “I just listened to the tape over and over. I would imagine myself on the shuttle…and I would pretend I was going up to space.” Harrison is now a Ph.D. candidate studying nanoscience at The University of North Carolina at Greensboro, with goals of working in the space industry.

+ + +
+

NASA is not only required by law (e.g. the U.S. Copyright Act of 1976) to give the public access to many of its materials, the Agency really wants people to use them.

+
+ +
+ + + "The More We Share, The More We Have (series 1/2)" by Pietro Soldi for Creative Commons & Fine Acts is licensed under CC BY-SA 4.0 +
+ +

Footage and audio of the Apollo 11 Commander Neil Armstrong and lunar module pilot Buzz Aldrin hopping on the Moon's surface in 1969 have been remixed, remastered, and reshared countless times—inspiring generations of everyday citizens, like Hadfield and Harrison, to engage with space science and exploration. In fact, the use of materials created by the National Aeronautics and Space Administration (NASA) to create new works for the public doesn't end with Armstrong's history-making first steps.

+ +

Steps to launch

+
    +
  1. Assemble module
    2. +
  2. Launch aircraft
    3. +
  3. Land safely
    4. +
+ +

For example, Alex G. Orphanos, a science communicator, engineer, and host of the Today in Space podcast, has put NASA's materials to use for over six years. In particular, he has used images from the Hubble Space Telescope and information from NASA Procurement to better explain space-related issues to his audience. Rachael Eidson, a business development specialist for Trenton Systems and social media influencer also routinely uses NASA's images in her collaborations with eco-fashion and accessory companies. In fact, it's hard to miss the resurgence of space-themed items, including t-shirts, mugs, bags, etc. featuring NASA's “meatball” logo. As the L.A. Times reported in 2019, “The NASA logo is having a moment.”

+ + +
    + +
  • Top Level Item
    • + +
      +
    • Second Level Item
      • + +
        +
      • Third Level Item
        • +
      +
    + +
  • Top Level Item
    • +
+ +
+ + + + + + + diff --git a/specimen/style.css b/specimen/style.css index 2231bd9..1f7287a 100644 --- a/specimen/style.css +++ b/specimen/style.css @@ -1,2 +1,107 @@ @import '../src/css/vocabulary.css' layer(vocabulary); @import '../specimen/tests/grid-test.css' layer(vocabulary); + +.accordion { + margin: 0; + padding: 0; +} + +.accordion h3 { + margin: 0; + padding: 0; +} + +.accordion > * + * { + border-top: 1px solid hsl(0deg 0% 52%); +} + +.accordion-trigger { + background: none; + color: hsl(0deg 0% 13%); + display: block; + margin: 0; + padding: 1em 0em; + position: relative; + text-align: left; + width: 100%; + outline: none; + cursor: pointer; + display: flex; + align-items: center; + transition: background-color 0.3s ease; +} +.accordion-open { + max-height: 500px; + padding: 15px; +} +.accordion-trigger:focus, +.accordion-trigger:hover { + background: #f5f5f5; +} + +.accordion-trigger:focus { + outline: 4px solid transparent; +} + +.accordion > *:first-child .accordion-trigger, +.accordion > *:first-child { + border-radius: 5px 5px 0 0; +} + +.accordion > *:last-child .accordion-trigger, +.accordion > *:last-child { + border-radius: 0 0 5px 5px; +} + +button { + border-style: none; +} + +.accordion button::-moz-focus-inner { + border: 0; +} + +.accordion-title { + font-size: 1.75rem; + color: #333; + font-family: roboto condensed, sans-serif; + font-weight: 700; + text-transform: none; + line-height: 1.3; + letter-spacing: 0.02rem; +} + +.accordion-icon { + border: solid currentcolor; + border-width: 0 2px 2px 0; + height: 0.5rem; + pointer-events: none; + position: absolute; + right: 2em; + top: 50%; + transform: translateY(-60%) rotate(45deg); + width: 0.5rem; + transition: transform 0.3s ease; +} + +.accordion-trigger[aria-expanded='true'] .accordion-icon { + transform: translateY(-50%) rotate(-135deg); +} +.accordion-trigger[aria-expanded='true'] { + background-color: #f5f5f5; +} +.accordion-panel { + margin: 0; + padding: 1em 0em; + overflow: hidden; + transition: max-height 0.3s ease, padding 0.3s ease; + max-height: 0; +} +.accordion-open { + max-height: 1000px; + padding: 15px; +} + +.accordion-panel[hidden] { + display: none; +} diff --git a/src/js/accordion.js b/src/js/accordion.js new file mode 100644 index 0000000..a2ab39f --- /dev/null +++ b/src/js/accordion.js @@ -0,0 +1,43 @@ +const accordion = (accordionHeader) => { + const button = accordionHeader.querySelector('button[aria-expanded]'); + const contentId = button.getAttribute('aria-controls'); + const contentPanel = document.getElementById(contentId); + + let isOpen = button.getAttribute('aria-expanded') === 'true'; + + // Show the content if the accordion is open by default + if (isOpen) { + contentPanel.removeAttribute('hidden'); + contentPanel.classList.add('accordion-open'); + } + + const handleButtonClick = () => toggleAccordion(!isOpen); + + const toggleAccordion = (newState) => { + if (newState === isOpen) return; + + isOpen = newState; + button.setAttribute('aria-expanded', `${isOpen}`); + + // Toggle hidden attribute based on new state + if (isOpen) { + contentPanel.removeAttribute('hidden'); + contentPanel.classList.add('accordion-open'); + } else { + contentPanel.setAttribute('hidden', ''); + contentPanel.classList.remove('accordion-open'); + } + }; + + button.addEventListener('click', handleButtonClick); + + return { + open: () => toggleAccordion(true), + close: () => toggleAccordion(false), + }; +}; + +// Initialize accordions +document.querySelectorAll('.accordion-header').forEach((header) => { + accordion(header); +}); From 8fc600cf3b8ca269b9433d130e3525f58e67cafe Mon Sep 17 00:00:00 2001 From: Chineta Adinnu Date: Fri, 4 Oct 2024 11:06:57 +0100 Subject: [PATCH 2/2] remove padding x so that the accordion content is aligned with the title --- specimen/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/specimen/style.css b/specimen/style.css index 1f7287a..22f7e18 100644 --- a/specimen/style.css +++ b/specimen/style.css @@ -99,7 +99,7 @@ button { } .accordion-open { max-height: 1000px; - padding: 15px; + padding: 15px 0; } .accordion-panel[hidden] {