Difference between revisions of "Widget:Compass"

From LINKS Community Center
Jump to: navigation, search
Line 13: Line 13:
 
             font-family: 'Raleway';
 
             font-family: 'Raleway';
 
             font-weight: 300;
 
             font-weight: 300;
 +
            letter-spacing: .06em;
 +
        }
 +
 +
        #cmp-container h1 {
 
             letter-spacing: .06em;
 
             letter-spacing: .06em;
 
         }
 
         }
Line 28: Line 32:
 
             transform: rotate(90deg);
 
             transform: rotate(90deg);
 
             margin-left: .5em;
 
             margin-left: .5em;
            transition: all 300ms linear;
 
 
         }
 
         }
  
Line 53: Line 56:
  
 
         .subtheme,
 
         .subtheme,
         .question {
+
         .question,
 +
        .answer {
 
             display: none;
 
             display: none;
 
         }
 
         }
  
 
         .subtheme.opened,
 
         .subtheme.opened,
         .question.opened {
+
         .question.opened,
 +
        .answer.opened {
 
             display: block;
 
             display: block;
 
         }
 
         }
Line 71: Line 76:
 
                     Whom do you want to include in your collection and analysis of information, and from whom do you
 
                     Whom do you want to include in your collection and analysis of information, and from whom do you
 
                     want to collect and analyse information?
 
                     want to collect and analyse information?
 +
 +
                    <div class="answer">Answers</div>
 
                 </div>
 
                 </div>
 
                 <div class="question" data-aspect="Socio-/Technical">
 
                 <div class="question" data-aspect="Socio-/Technical">
Line 136: Line 143:
 
             }
 
             }
 
             if (event.target.tagName === 'H3') {
 
             if (event.target.tagName === 'H3') {
 +
                event.target.classList.toggle('opened');
 
                 event.target.closest('.subtheme').querySelectorAll('.question').forEach(el => el.classList.toggle('opened'));
 
                 event.target.closest('.subtheme').querySelectorAll('.question').forEach(el => el.classList.toggle('opened'));
 +
            }
 +
            if (event.target.classList.contains('question')) {
 +
                event.target.classList.toggle('opened');
 +
                event.target.querySelector('.answer').classList.toggle('opened');
 
             }
 
             }
 
         });
 
         });
 
     </script>
 
     </script>
 
</includeonly>
 
</includeonly>

Revision as of 16:41, 22 November 2022

Development version of the Compass.
Not ready for production!