Widget: Compass: Difference between revisions

From LINKS Community Center
Jump to: navigation, search
Eschmidt (talk | contribs)
No edit summary
Eschmidt (talk | contribs)
No edit summary
 
(27 intermediate revisions by 2 users not shown)
Line 22: Line 22:
         #cmp-container h1,
         #cmp-container h1,
         #cmp-container h2,
         #cmp-container h2,
         #cmp-container h3,
         #cmp-container h3 {
        #cmp-container h4 {
             font-family: 'Raleway';
             font-family: 'Raleway';
             font-weight: 300;
             font-weight: 300;
             letter-spacing: .06em;
             letter-spacing: .06em;
             position: relative;
             position: relative;
        }
        #cmp-container h4 {
            font-size: 1em;
            font-weight: 300;
            transition: all 0.4s ease;
        }
        #cmp-container h4.opened {
            font-size: 1em;
            font-weight: 500;
         }
         }


Line 45: Line 55:
             color: var(--compass-color);
             color: var(--compass-color);
             cursor: pointer;
             cursor: pointer;
            transition: all 0.4s ease;
         }
         }


Line 51: Line 62:
             display: block;
             display: block;
             position: absolute;
             position: absolute;
             left: 0;
             left: 1.2em;
             bottom: 0;
             bottom: 0;
             width: 100%;
             width: 100%;
Line 73: Line 84:
         .subtheme {
         .subtheme {
             margin-bottom: 2em;
             margin-bottom: 2em;
            margin-left: 2em;
         }
         }


         .question {
         .question {
             font-size: 1.1em;
             font-size: 1.1em;
             padding-left: 2em;
             padding-left: 1.65em;
             cursor: pointer;
             cursor: pointer;
             margin-bottom: 1em;
             margin-bottom: 1em;
Line 83: Line 95:


         .answer {
         .answer {
             margin: 1.4em;
             margin: 1em 1.8em;
             font-size: 1.2rem;
             font-size: 1.2rem;
         }
         }
Line 120: Line 132:
             align-items: center;
             align-items: center;
             padding: 1em;
             padding: 1em;
             border: 1px solid currentColor;
            color: #fff;
             border: 1px solid;
            /* border-radius: 10px; */
         }
         }


Line 151: Line 165:
         .choice.safe {
         .choice.safe {
             color: var(--safe-color);
             color: var(--safe-color);
        }
        .choice.tech .button {
            background-color: var(--links-blue);
            border-color: var(--links-blue);
        }
        .choice.guide .button {
            background-color: var(--links-orange);
            border-color: var(--links-orange);
        }
        .choice.case .button {
            background-color: var(--links-cyan);
            border-color: var(--links-cyan);
        }
        .choice.handbook .button {
            background-color: var(--handbook-color);
            border-color: var(--handbook-color);
        }
        .choice.safe .button {
            background-color: var(--safe-color);
            border-color: var(--safe-color);
        }
        .choice:hover .button {
            background-color: #fff;
         }
         }


         .choice.tech:hover .button {
         .choice.tech:hover .button {
             background-color: var(--links-blue);
             color: var(--links-blue);
            color: #fff;
         }
         }


         .choice.guide:hover .button {
         .choice.guide:hover .button {
             background-color: var(--links-orange);
             color: var(--links-orange);
            color: #fff;
         }
         }


         .choice.case:hover .button {
         .choice.case:hover .button {
             background-color: var(--links-cyan);
             color: var(--links-cyan);
            color: #fff;
         }
         }


         .choice.handbook:hover .button {
         .choice.handbook:hover .button {
             background-color: var(--handbook-color);
             color: var(--handbook-color);
            color: #fff;
         }
         }


         .choice.safe:hover .button {
         .choice.safe:hover .button {
             background-color: var(--safe-color);
             color: var(--safe-color);
            color: #fff;
         }
         }
     </style>
     </style>
Line 240: Line 278:
                 main themes &ndash; Engaging with Citizens and Improving Communication &ndash; so that disaster
                 main themes &ndash; Engaging with Citizens and Improving Communication &ndash; so that disaster
                 management
                 management
                 organizations and relevant stakeholders can take more informed decisions on the uses of SMCS through the
                 organizations and relevant stakeholders can take more informed decisions on the uses of Social Media and
                Crowdsourcing through the
                 LINKS products. Orientation is supported by pre-defined questions that guide users towards the LINKS
                 LINKS products. Orientation is supported by pre-defined questions that guide users towards the LINKS
                 products.
                 products.
Line 253: Line 292:
             <h2>Engaging with Citizens</h2>
             <h2>Engaging with Citizens</h2>
             <div class="subtheme">
             <div class="subtheme">
                 <h3>Collecting and Analysing Information from SMCS</h3>
                 <h3>Collecting and Analysing Information from Social Media and Crowdsourcing</h3>
                 <div class="question" data-aspect="Social">
                 <div class="question" data-aspect="Social">
                     <h4>
                     <h4>
Line 265: Line 304:
                                 <div class="button">Use Cases</div>
                                 <div class="button">Use Cases</div>
                                 <div class="desc">
                                 <div class="desc">
                                     It provides helpful information from social media and crowdsourcing
                                     Helpful examples around the theme “Collecting and Analysing Information
                                    examples around the theme “Collecting and Analysing Information from SMCS”. Also the
                                     from Social Media and Crowdsourcing”.
                                     question, which vulnerable groups (disabled, migrants, minorities,…) were
                                    specifically involved in social media and crowdsourcing activities is answered.
                                 </div>
                                 </div>
                             </div>
                             </div>
Line 274: Line 311:
                                 <div class="button">Guidelines</div>
                                 <div class="button">Guidelines</div>
                                 <div class="desc">
                                 <div class="desc">
                                     The Guidelines Library will provide guidance to all interested
                                     Guidance for all interested
                                     stakeholders, including disaster management organisations and practitioners, on how
                                     stakeholders, including disaster management organisations and practitioners, on how
                                     to collect, analyse and use information from social media and crowdsourcing.
                                     to collect, analyse and use information from Social Media and Crowdsourcing.
                                 </div>
                                 </div>
                             </div>
                             </div>
Line 292: Line 329:
                                 <div class="button">Technologies</div>
                                 <div class="button">Technologies</div>
                                 <div class="desc">
                                 <div class="desc">
                                     It allows filtering for software that covers the functions Search &
                                     Technologies that cover the functions “Search & Monitor” and “Analysis”
                                     Monitor and Analysis of information from social media.
                                     of information from Social Media and Crowdsourcing.
                                 </div>
                                 </div>
                             </div>
                             </div>
Line 299: Line 336:
                                 <div class="button">Guidelines</div>
                                 <div class="button">Guidelines</div>
                                 <div class="desc">
                                 <div class="desc">
                                     Several thematic search filters integrated within the Guidelines
                                     Several thematic search filters integrated within the Guidelines Library will help
                                    Library will help stakeholders retrieve relevant SMCS guidelines to better mobilise
                                    stakeholders retrieve relevant Social Media and Crowdsourcing guidelines to better
                                     and engage citizens, for instance, the "crowdsourcing" search filter.
                                     mobilise and engage citizens, for instance, the "crowdsourcing" search filter.
                                 </div>
                                 </div>
                             </div>
                             </div>
Line 307: Line 344:
                                 <div class="button">Use Cases</div>
                                 <div class="button">Use Cases</div>
                                 <div class="desc">
                                 <div class="desc">
                                     It provides helpful information from social media and crowdsourcing
                                     Helpful examples around the theme “Collecting and Analysing Information
                                    examples around the theme “Collecting and Analysing Information from SMCS”. Also the
                                     from Social Media and Crowdsourcing”.
                                     question, which specific functionality SMCS has been used for and how (e.g.
                                    gathering of information) is answered.
                                 </div>
                                 </div>
                             </div>
                             </div>
Line 329: Line 364:
                                 <div class="button">Use Cases</div>
                                 <div class="button">Use Cases</div>
                                 <div class="desc">
                                 <div class="desc">
                                     It provides helpful information from social media and crowdsourcing
                                     Helpful information from Social Media and Crowdsourcing
                                     examples around the theme “Mobilising Citizens”.
                                     examples around the theme “Mobilising Citizens”.
                                 </div>
                                 </div>
Line 336: Line 371:
                                 <div class="button">Including Citizens Handbook</div>
                                 <div class="button">Including Citizens Handbook</div>
                                 <div class="desc">
                                 <div class="desc">
                                     It provides a toolkit that targets communication to citizens with diverse needs for
                                     Toolkit that targets communication to citizens with diverse needs for
                                     information on disaster management processes.
                                     information on disaster management processes.
                                 </div>
                                 </div>
Line 353: Line 388:
                                 <div class="button">Technologies</div>
                                 <div class="button">Technologies</div>
                                 <div class="desc">
                                 <div class="desc">
                                     It allows filtering for software that covers the function Post &
                                     Technologies that cover the function "Post &
                                     Schedule, which aims at publishing information on social media.
                                     Schedule" which aims at publishing information on social media.
                                 </div>
                                 </div>
                             </div>
                             </div>
Line 360: Line 395:
                                 <div class="button">Guidelines</div>
                                 <div class="button">Guidelines</div>
                                 <div class="desc">
                                 <div class="desc">
                                     This Guidelines Library includes relevant guidelines that will support all
                                     Guidelines that will support all
                                     interested stakeholders, including disaster management organisations and
                                     interested stakeholders, including disaster management organisations and
                                     practitioners, in mobilising citizens. It also includes search filters that will
                                     practitioners, in mobilising citizens. It also includes search filters that will
Line 370: Line 405:
                                 <div class="button">Use Cases</div>
                                 <div class="button">Use Cases</div>
                                 <div class="desc">
                                 <div class="desc">
                                     It provides helpful information from social media and crowdsourcing
                                     Social Media and Crowdsourcing
                                     examples around the theme “Mobilising Citizens”.
                                     examples around the theme “Mobilising Citizens”.
                                 </div>
                                 </div>
Line 377: Line 412:
                                 <div class="button">Feel Safe</div>
                                 <div class="button">Feel Safe</div>
                                 <div class="desc">
                                 <div class="desc">
                                     It is an educational platform promoting the use of social media, digital education
                                     Educational platform promoting the use of social media, digital education
                                     and information accessibility to enhance children engagement in disaster prevention
                                     and information accessibility to enhance children engagement in disaster prevention
                                     and preparedness.
                                     and preparedness.
Line 399: Line 434:
                                 <div class="button">Guidelines</div>
                                 <div class="button">Guidelines</div>
                                 <div class="desc">
                                 <div class="desc">
                                     This Guidelines Library offers guidance to all interested stakeholders on a wide
                                     Guidance for all interested stakeholders on a wide
                                     range of disaster management issues, including guidance on how to further mobilise
                                     range of disaster management issues, including guidance on how to further mobilise
                                     volunteers.
                                     volunteers.
Line 407: Line 442:
                                 <div class="button">Use Cases</div>
                                 <div class="button">Use Cases</div>
                                 <div class="desc">
                                 <div class="desc">
                                     It provides helpful information from social media and crowdsourcing
                                     Social Media and Crowdsourcing
                                     examples around the theme “Mobilising Volunteers”.
                                     examples around the theme “Mobilising Volunteers”.
                                 </div>
                                 </div>
Line 414: Line 449:
                                 <div class="button">Including Citizens Handbook</div>
                                 <div class="button">Including Citizens Handbook</div>
                                 <div class="desc">
                                 <div class="desc">
                                     It provides a toolkit that targets communication to citizens with diverse needs for
                                     Toolkit that targets communication to citizens with diverse needs for
                                     information on disaster management processes.
                                     information on disaster management processes.
                                 </div>
                                 </div>
Line 421: Line 456:
                                 <div class="button">Feel Safe</div>
                                 <div class="button">Feel Safe</div>
                                 <div class="desc">
                                 <div class="desc">
                                     It is an educational platform promoting the use of social media, digital education
                                     Educational platform promoting the use of social media, digital education
                                     and information accessibility to enhance children engagement in disaster prevention
                                     and information accessibility to enhance children engagement in disaster prevention
                                     and preparedness.
                                     and preparedness.
Line 439: Line 474:
                                 <div class="button">Technologies</div>
                                 <div class="button">Technologies</div>
                                 <div class="desc">
                                 <div class="desc">
                                     It allows filtering for software that covers the function Post &
                                     Technologies that cover the function "Post &
                                     Schedule, which aims at publishing information on social media.
                                     Schedule", which aims at publishing information on social media.
                                 </div>
                                 </div>
                             </div>
                             </div>
Line 446: Line 481:
                                 <div class="button">Guidelines</div>
                                 <div class="button">Guidelines</div>
                                 <div class="desc">
                                 <div class="desc">
                                     This Guidelines Library includes relevant guidelines that will support interested
                                     Guidelines that will support interested
                                     stakeholders in mobilising volunteers, and search filters that will allow users to
                                     stakeholders in mobilising volunteers, and search filters that will allow users to
                                     identify relevant sources more easily, such as the search filters "VOST" and
                                     identify relevant sources more easily, such as the search filters "VOST" and
                                     "unaffiliated volunteers"
                                     "unaffiliated volunteers".
                                 </div>
                                 </div>
                             </div>
                             </div>
Line 455: Line 490:
                                 <div class="button">Use Cases</div>
                                 <div class="button">Use Cases</div>
                                 <div class="desc">
                                 <div class="desc">
                                     It provides helpful information from social media and crowdsourcing
                                     Social Media and Crowdsourcing
                                     examples around the theme “Mobilising Volunteers”.
                                     examples around the theme “Mobilising Volunteers”.
                                 </div>
                                 </div>
Line 462: Line 497:
                                 <div class="button">Feel Safe</div>
                                 <div class="button">Feel Safe</div>
                                 <div class="desc">
                                 <div class="desc">
                                     It is an educational platform promoting the use of social media, digital education
                                     Educational platform promoting the use of social media, digital education
                                     and information accessibility to enhance children engagement in disaster prevention
                                     and information accessibility to enhance children engagement in disaster prevention
                                     and preparedness.
                                     and preparedness.
Line 487: Line 522:
                                 <div class="button">Use Cases</div>
                                 <div class="button">Use Cases</div>
                                 <div class="desc">
                                 <div class="desc">
                                     It provides helpful information from social media and crowdsourcing
                                     Social Media and Crowdsourcing
                                     examples around the theme “Making Information Accessible”.
                                     examples around the theme “Making Information Accessible”.
                                 </div>
                                 </div>
Line 494: Line 529:
                                 <div class="button">Including Citizens Handbook</div>
                                 <div class="button">Including Citizens Handbook</div>
                                 <div class="desc">
                                 <div class="desc">
                                     It provides a toolkit that targets communication to citizens with diverse needs for
                                     Toolkit that targets communication to citizens with diverse needs for
                                     information on disaster management processes.
                                     information on disaster management processes.
                                 </div>
                                 </div>
Line 501: Line 536:
                                 <div class="button">Feel Safe</div>
                                 <div class="button">Feel Safe</div>
                                 <div class="desc">
                                 <div class="desc">
                                     It is an educational platform promoting the use of social media, digital education
                                     Educational platform promoting the use of social media, digital education
                                     and information accessibility to enhance children engagement in disaster prevention
                                     and information accessibility to enhance children engagement in disaster prevention
                                     and preparedness.
                                     and preparedness.
Line 519: Line 554:
                                 <div class="button">Technologies</div>
                                 <div class="button">Technologies</div>
                                 <div class="desc">
                                 <div class="desc">
                                     It allows filtering for software that covers the function Post &
                                     Technologies that cover the function "Post &
                                     Schedule, which aims at publishing information on social media.
                                     Schedule", which aims at publishing information on social media.
                                 </div>
                                 </div>
                             </div>
                             </div>
Line 526: Line 561:
                                 <div class="button">Use Cases</div>
                                 <div class="button">Use Cases</div>
                                 <div class="desc">
                                 <div class="desc">
                                     It provides helpful information from social media and crowdsourcing
                                     Social Media and Crowdsourcing
                                     examples around the theme “Making Information Accessible”.
                                     examples around the theme “Making Information Accessible”.
                                 </div>
                                 </div>
Line 533: Line 568:
                                 <div class="button">Including Citizens Handbook</div>
                                 <div class="button">Including Citizens Handbook</div>
                                 <div class="desc">
                                 <div class="desc">
                                     It provides a toolkit that targets communication to citizens with diverse needs for
                                     Toolkit that targets communication to citizens with diverse needs for
                                     information on disaster management processes.
                                     information on disaster management processes.
                                 </div>
                                 </div>
Line 540: Line 575:
                                 <div class="button">Feel Safe</div>
                                 <div class="button">Feel Safe</div>
                                 <div class="desc">
                                 <div class="desc">
                                     It is an educational platform promoting the use of social media, digital education
                                     Educational platform promoting the use of social media, digital education
                                     and information accessibility to enhance children engagement in disaster prevention
                                     and information accessibility to enhance children engagement in disaster prevention
                                     and preparedness.
                                     and preparedness.
Line 561: Line 596:
                                 <div class="button">Use Cases</div>
                                 <div class="button">Use Cases</div>
                                 <div class="desc">
                                 <div class="desc">
                                     It provides helpful information from social media and crowdsourcing
                                     Social Media and Crowdsourcing
                                     examples around the theme “Targeting Communication”.
                                     examples around the theme “Targeting Communication”.
                                 </div>
                                 </div>
Line 568: Line 603:
                                 <div class="button">Including Citizens Handbook</div>
                                 <div class="button">Including Citizens Handbook</div>
                                 <div class="desc">
                                 <div class="desc">
                                     It provides a toolkit that targets communication to citizens with diverse needs for
                                     Toolkit that targets communication to citizens with diverse needs for
                                     information on disaster management processes.
                                     information on disaster management processes.
                                 </div>
                                 </div>
Line 575: Line 610:
                                 <div class="button">Feel Safe</div>
                                 <div class="button">Feel Safe</div>
                                 <div class="desc">
                                 <div class="desc">
                                     It is an educational platform promoting the use of social media, digital education
                                     Educational platform promoting the use of social media, digital education
                                     and information accessibility to enhance children engagement in disaster prevention
                                     and information accessibility to enhance children engagement in disaster prevention
                                     and preparedness.
                                     and preparedness.
Line 593: Line 628:
                                 <div class="button">Technologies</div>
                                 <div class="button">Technologies</div>
                                 <div class="desc">
                                 <div class="desc">
                                     It allows filtering for software that covers the function Post &
                                     Technologies that cover the function "Post &
                                     Schedule, which aims at publishing information on social media. It is also possible
                                     Schedule", which aims at publishing information on social media.
                                    to filter by different platforms.
                                 </div>
                                 </div>
                             </div>
                             </div>
Line 612: Line 646:
                                 <div class="button">Use Cases</div>
                                 <div class="button">Use Cases</div>
                                 <div class="desc">
                                 <div class="desc">
                                     It provides helpful information from social media and crowdsourcing
                                     Social Media and Crowdsourcing
                                     examples around the theme “Targeting Communication”.
                                     examples around the theme “Targeting Communication”.
                                 </div>
                                 </div>
Line 619: Line 653:
                                 <div class="button">Feel Safe</div>
                                 <div class="button">Feel Safe</div>
                                 <div class="desc">
                                 <div class="desc">
                                     It is an educational platform promoting the use of social media, digital education
                                     Educational platform promoting the use of social media, digital education
                                     and information accessibility to enhance children engagement in disaster prevention
                                     and information accessibility to enhance children engagement in disaster prevention
                                     and preparedness.
                                     and preparedness.
Line 641: Line 675:
                                 <div class="button">Use Cases</div>
                                 <div class="button">Use Cases</div>
                                 <div class="desc">
                                 <div class="desc">
                                     It provides helpful information from social media and crowdsourcing
                                     Social Media and Crowdsourcing
                                     examples around the theme “Ensuring Credible Information”.
                                     examples around the theme “Ensuring Credible Information”.
                                 </div>
                                 </div>
Line 648: Line 682:
                                 <div class="button">Feel Safe</div>
                                 <div class="button">Feel Safe</div>
                                 <div class="desc">
                                 <div class="desc">
                                     It is an educational platform promoting the use of social media, digital education
                                     Educational platform promoting the use of social media, digital education
                                     and information accessibility to enhance children engagement in disaster prevention
                                     and information accessibility to enhance children engagement in disaster prevention
                                     and preparedness.
                                     and preparedness.
Line 666: Line 700:
                                 <div class="button">Technologies</div>
                                 <div class="button">Technologies</div>
                                 <div class="desc">
                                 <div class="desc">
                                     There are no mature technologies on the market yet that can examine
                                     There are technologies that could help with assessing credible information
                                     information for credibility.
                                     by collecting various metrics.
                                 </div>
                                 </div>
                             </div>
                             </div>
Line 680: Line 714:
                                 <div class="button">Use Cases</div>
                                 <div class="button">Use Cases</div>
                                 <div class="desc">
                                 <div class="desc">
                                     It provides helpful information from social media and crowdsourcing
                                     Social Media and Crowdsourcing
                                     examples around the theme “Ensuring Credible Information”.
                                     examples around the theme “Ensuring Credible Information”.
                                 </div>
                                 </div>
Line 687: Line 721:
                                 <div class="button">Feel Safe</div>
                                 <div class="button">Feel Safe</div>
                                 <div class="desc">
                                 <div class="desc">
                                     It is an educational platform promoting the use of social media, digital education
                                     Educational platform promoting the use of social media, digital education
                                     and information accessibility to enhance children engagement in disaster prevention
                                     and information accessibility to enhance children engagement in disaster prevention
                                     and preparedness.
                                     and preparedness.
Line 703: Line 737:
             const icon = document.createElement('div');
             const icon = document.createElement('div');
             icon.classList.add('plus', 'icon');
             icon.classList.add('plus', 'icon');
             el.appendChild(icon);
             el.insertBefore(icon, el.firstChild);
         });
         });


Line 709: Line 743:
         document.getElementById('cmp-container').addEventListener('click', event => {
         document.getElementById('cmp-container').addEventListener('click', event => {
             if (event.target.tagName === 'H2') {
             if (event.target.tagName === 'H2') {
                 event.target.classList.toggle('opened');
                 document.querySelectorAll('H2').forEach(el => {
                 event.target.closest('.theme').querySelectorAll('.subtheme').forEach(el => el.classList.toggle('opened'));
                    if (el === event.target) el.classList.toggle('opened');
                    else el.classList.remove('opened');
                 });
 
                const group = event.target.closest('.theme');
                document.querySelectorAll('.subtheme').forEach(el => {
                    if (group.contains(el)) el.classList.toggle('opened');
                    else el.classList.remove('opened');
                });
             }
             }
             if (event.target.tagName === 'H3') {
             if (event.target.tagName === 'H3') {
                 event.target.classList.toggle('opened');
                 document.querySelectorAll('H3').forEach(el => {
                 event.target.closest('.subtheme').querySelectorAll('.question').forEach(el => el.classList.toggle('opened'));
                    if (el === event.target) el.classList.toggle('opened');
                    else el.classList.remove('opened');
                 });
 
                const group = event.target.closest('.subtheme');
                document.querySelectorAll('.question').forEach(el => {
                    if (group.contains(el)) el.classList.toggle('opened');
                    else el.classList.remove('opened');
                });
             }
             }
             if (event.target.tagName === 'H4') {
             if (event.target.tagName === 'H4') {
                 event.target.classList.toggle('opened');
                 document.querySelectorAll('H4').forEach(el => {
                 event.target.closest('.question').querySelector('.answer').classList.toggle('opened');
                    if (el === event.target) el.classList.toggle('opened');
                    else el.classList.remove('opened');
                });
 
                 const group = event.target.closest('.question');
                document.querySelectorAll('.answer').forEach(el => {
                    if (group.contains(el)) el.classList.toggle('opened');
                    else el.classList.remove('opened');
                });
             }
             }
            // if (event.target.classList.contains('question')) {
            //    event.target.querySelector('.answer')?.classList.toggle('opened');
            // }
         });
         });


Line 799: Line 854:
                         [post]: true,
                         [post]: true,
                         [metrics]: false,
                         [metrics]: false,
                        [report]: false,
                        [collab]: false,
                        [interop]: false,
                        [meta]: false,
                    }
                }
            },
            'q12-tech': {
                filter: {
                    functions: {
                        [search]: false,
                        [analysis]: false,
                        [post]: false,
                        [metrics]: true,
                         [report]: false,
                         [report]: false,
                         [collab]: false,
                         [collab]: false,

Latest revision as of 16:14, 9 December 2022

Development version of the Compass.
Not ready for production!


Retrieved from "https://links.communitycenter.eu/index.php?title=Widget:Compass&oldid=9533"