|
|
| Line 2: |
Line 2: |
| </noinclude> | | </noinclude> |
| <includeonly> | | <includeonly> |
| <style>
| |
| :root {
| |
| --compass-color: #C31980;
| |
| --handbook-color: #C2902D;
| |
| --safe-color: #80C319;
| |
| }
| |
|
| |
|
| h2.opened .plus.icon::after,
| | <!-- STYLES BEGIN --> |
| h3.opened .plus.icon::after,
| | <link rel="stylesheet" href="https://www.safetyinnovation.center/lcc/user_guidance/styles.css"> |
| h4.opened .plus.icon::after {
| | <!-- STYLES END --> |
| transform: rotate(0);
| |
| }
| |
| | |
| #cmp-container {
| |
| font-family: 'Open Sans';
| |
| font-size: 120%;
| |
| }
| |
| | |
| #cmp-container h1,
| |
| #cmp-container h2,
| |
| #cmp-container h3 {
| |
| font-family: 'Raleway';
| |
| font-weight: 300;
| |
| letter-spacing: .06em;
| |
| 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;
| |
| }
| |
| | |
| #cmp-container h1 {
| |
| letter-spacing: .06em;
| |
| color: var(--compass-color);
| |
| }
| |
| | |
| #cmp-intro h1 svg {
| |
| height: 2em;
| |
| fill: var(--compass-color);
| |
| }
| |
| | |
| #cmp-container h2 {
| |
| margin-top: 1.5em;
| |
| padding-bottom: 5px;
| |
| color: var(--compass-color);
| |
| cursor: pointer;
| |
| transition: all 0.4s ease;
| |
| }
| |
| | |
| #cmp-container h2::before {
| |
| content: '';
| |
| display: block;
| |
| position: absolute;
| |
| left: 1.2em;
| |
| bottom: 0;
| |
| width: 100%;
| |
| height: 1px;
| |
| background-color: currentColor;
| |
| letter-spacing: .06em;
| |
| transition: all 0.4s ease;
| |
| transform: scaleX(0);
| |
| transform-origin: bottom left;
| |
| }
| |
| | |
| #cmp-container h2.opened::before {
| |
| transform: scaleX(1);
| |
| }
| |
| | |
| #cmp-container h3 {
| |
| font-size: 1.4em;
| |
| cursor: pointer;
| |
| }
| |
| | |
| .subtheme {
| |
| margin-bottom: 2em;
| |
| margin-left: 2em;
| |
| }
| |
| | |
| .question {
| |
| font-size: 1.1em;
| |
| padding-left: 1.65em;
| |
| cursor: pointer;
| |
| margin-bottom: 1em;
| |
| }
| |
| | |
| .answer {
| |
| margin: 1em 1.8em;
| |
| font-size: 1.2rem;
| |
| }
| |
| | |
| .subtheme,
| |
| .question,
| |
| .answer {
| |
| display: none;
| |
| }
| |
| | |
| .subtheme.opened,
| |
| .question.opened,
| |
| .answer.opened {
| |
| display: block;
| |
| }
| |
| | |
| .answer-wrapper {
| |
| display: grid;
| |
| grid-template-columns: 1fr 1fr 1fr;
| |
| gap: 1em;
| |
| margin-bottom: 2em;
| |
| }
| |
| | |
| .choice {
| |
| display: flex;
| |
| flex-flow: column nowrap;
| |
| align-items: center;
| |
| border: 2px solid;
| |
| border-radius: 5px;
| |
| }
| |
| | |
| .choice:hover .button {
| |
| font-weight: 600;
| |
| }
| |
| | |
| .choice .button {
| |
| width: 100%;
| |
| transition: all 250ms;
| |
| display: flex;
| |
| justify-content: center;
| |
| align-items: center;
| |
| padding: .75em;
| |
| color: #fff;
| |
| border-bottom: 2px solid;
| |
| border-radius: 2px 2px 0 0;
| |
| }
| |
| | |
| .choice .desc {
| |
| font-size: 75%;
| |
| padding: 1em;
| |
| transition: all 250ms;
| |
| }
| |
| | |
| .choice.tech {
| |
| color: var(--links-blue);
| |
| }
| |
| | |
| .choice.guide {
| |
| color: var(--links-orange);
| |
| }
| |
| | |
| .choice.case {
| |
| color: var(--links-cyan);
| |
| }
| |
| | |
| .choice.handbook {
| |
| color: var(--handbook-color);
| |
| }
| |
| | |
| .choice.safe {
| |
| 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 {
| |
| color: var(--links-blue);
| |
| }
| |
| | |
| .choice.guide:hover .button {
| |
| color: var(--links-orange);
| |
| }
| |
| | |
| .choice.case:hover .button {
| |
| color: var(--links-cyan);
| |
| }
| |
| | |
| .choice.handbook:hover .button {
| |
| color: var(--handbook-color);
| |
| }
| |
| | |
| .choice.safe:hover .button {
| |
| color: var(--safe-color);
| |
| }
| |
| | |
| .rw-wrap {
| |
| padding: 1em;
| |
| background-color: #f3f3f3;
| |
| border-radius: 5px;
| |
| }
| |
| | |
| .rw small {
| |
| display: inline-block;
| |
| padding-bottom: .5em;
| |
| font-size: smaller;
| |
| }
| |
| | |
| .rw-link {
| |
| padding-top: .5em;
| |
| }
| |
| </style>
| |
|
| |
|
| <div id="cmp-container"> | | <div id="cmp-container"> |
| Line 631: |
Line 404: |
| </div> | | </div> |
|
| |
|
| <script> | | <!-- SCRIPT BEGIN --> |
| // Attach plus icon to the title of expandable blocks.
| | <script type="text/javascript" src="https://www.safetyinnovation.center/lcc/user_guidance/script.js"></script> |
| document.querySelectorAll('.theme > h2, .subtheme > h3, .question > h4').forEach(el => {
| | <!-- SCRIPT END --> |
| const icon = document.createElement('div');
| |
| icon.classList.add('plus', 'icon');
| |
| el.insertBefore(icon, el.firstChild);
| |
| });
| |
| | |
| // Set up toggles for expandable blocks.
| |
| document.getElementById('cmp-container').addEventListener('click', event => {
| |
| if (event.target.tagName === 'H2') {
| |
| document.querySelectorAll('H2').forEach(el => {
| |
| 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') {
| |
| document.querySelectorAll('H3').forEach(el => {
| |
| 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') {
| |
| document.querySelectorAll('H4').forEach(el => {
| |
| if (el === event.target && !el.classList.contains('rw')) 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');
| |
| });
| |
| }
| |
| });
| |
| | |
| const search = 'Search and Monitor',
| |
| post = 'Post and Schedule',
| |
| analysis = 'Analysis',
| |
| metrics = 'Metrics',
| |
| report = 'Report',
| |
| collab = 'Collaboration',
| |
| interop = 'Interoperability',
| |
| meta = 'Meta';
| |
| | |
| // Click actions.
| |
| const actions = {
| |
| 'eci-acc-tech': {
| |
| filter: {
| |
| functions: {
| |
| 'Posting content': true
| |
| }
| |
| }
| |
| },
| |
| 'ewc-sam-tech': {
| |
| filter: {
| |
| functions: {
| |
| 'Hashtag search': true,
| |
| 'Hashtag monitoring': true,
| |
| 'Keyword search': true,
| |
| 'Keyword monitoring': true
| |
| }
| |
| }
| |
| },
| |
| 'ewc-ca-tech': {
| |
| filter: {
| |
| functions: {
| |
| 'Hashtag search': true,
| |
| 'Hashtag monitoring': true,
| |
| 'Keyword search': true,
| |
| 'Keyword monitoring': true,
| |
| 'Text analysis': true
| |
| }
| |
| }
| |
| },
| |
| 'tc-who-cit-guide': {
| |
| filter: {
| |
| 'Covers Thematic': {
| |
| 'Crisis communication': true
| |
| },
| |
| 'Target Audience': {
| |
| 'Policy Makers': true,
| |
| 'Practitioners': true
| |
| }
| |
| }
| |
| },
| |
| 'tc-who-cit-handbook-mob': {
| |
| url: '/index.php/Including_Citizens_Handbook#mobilizing_citizens'
| |
| },
| |
| 'tc-who-cit-handbook-risk': {
| |
| url: '/index.php/Including_Citizens_Handbook#communicating_risk'
| |
| },
| |
| 'tc-who-cit-safe': {
| |
| url: '/index.php/Feel_Safe#stories'
| |
| },
| |
| 'tc-who-vg-guide': {
| |
| filter: {
| |
| 'Covers Thematic': {
| |
| 'Vulnerable groups': true
| |
| }
| |
| }
| |
| },
| |
| 'tc-who-vg-handbook-comm': {
| |
| url: '/index.php/Including_Citizens_Handbook#making_information_accessible'
| |
| },
| |
| 'tc-who-vg-handbook-acc': {
| |
| url: '/index.php/Including_Citizens_Handbook#making_information_accessible'
| |
| },
| |
| 'tc-who-vg-handbook-act': {
| |
| url: '/index.php/Including_Citizens_Handbook#making_information_accessible'
| |
| },
| |
| 'eci-how-guide': {
| |
| filter: {
| |
| 'Covers Thematic': {
| |
| 'Verification': true
| |
| }
| |
| }
| |
| },
| |
| 'eci-how-safe': {
| |
| url: '/index.php/Feel_Safe#communication'
| |
| },
| |
| 'eci-how-handbook': {
| |
| url: '/index.php/Including_Citizens_Handbook#mobilizing_citizens'
| |
| },
| |
| 'eci-acc-guide': {
| |
| filter: {
| |
| 'Covers Thematic': {
| |
| 'Crisis communication': true,
| |
| 'Content creation': true,
| |
| },
| |
| 'Target Audience': {
| |
| 'Policy Makers': true,
| |
| 'Practitioners': true
| |
| }
| |
| }
| |
| },
| |
| 'eci-acc-handbook-acc': {
| |
| url: '/index.php/Including_Citizens_Handbook#making_information_accessible'
| |
| },
| |
| 'eci-acc-handbook-risk': {
| |
| url: '/index.php/Including_Citizens_Handbook#communicating_risk'
| |
| },
| |
| 'ewc-ca-guide': {
| |
| filter: {
| |
| 'Covers Thematic': {
| |
| 'Verification': true
| |
| }
| |
| }
| |
| },
| |
| 'ewc-mob-guide': {
| |
| filter: {
| |
| 'Covers Thematic': {
| |
| 'Crowdsourcing': true
| |
| }
| |
| }
| |
| },
| |
| 'ewc-mob-safe': {
| |
| url: '/index.php/Feel_Safe#library'
| |
| },
| |
| 'ewc-mob-handbook-mob': {
| |
| url: '/index.php/Including_Citizens_Handbook#mobilizing_citizens'
| |
| },
| |
| 'ewc-mob-handbook-risk': {
| |
| url: '/index.php/Including_Citizens_Handbook#communicating_risk'
| |
| },
| |
| 'ewc-vol-guide': {
| |
| filter: {
| |
| 'Covers Thematic': {
| |
| 'Unaffiliated volunteers': true
| |
| },
| |
| 'Target Audience': {
| |
| 'Policy Makers': true,
| |
| 'Practitioners': true
| |
| }
| |
| }
| |
| },
| |
| 'tc-who-cit-case': {
| |
| filter: {
| |
| 'Use cases thematic': {
| |
| 'Targeting Communication': true
| |
| },
| |
| 'Type': {
| |
| 'Social Media': true
| |
| }
| |
| }
| |
| },
| |
| 'eci-how-case': {
| |
| filter: {
| |
| 'Use cases thematic': {
| |
| 'Ensuring Credible Information': true
| |
| }
| |
| }
| |
| },
| |
| 'eci-acc-case': {
| |
| filter: {
| |
| 'Use cases thematic': {
| |
| 'Making Information Accessible': true
| |
| }
| |
| }
| |
| },
| |
| 'ewc-mob-case': {
| |
| filter: {
| |
| 'Use cases thematic': {
| |
| 'Mobilising Citizens': true
| |
| }
| |
| }
| |
| },
| |
| 'ewc-vol-case': {
| |
| filter: {
| |
| 'Use cases thematic': {
| |
| 'Mobilising Volunteers': true
| |
| }
| |
| }
| |
| },
| |
| 'ewc-sam-case': {
| |
| filter: {
| |
| 'Use cases thematic': {
| |
| 'Collecting and Analysing Information from SMCS': true
| |
| }
| |
| }
| |
| },
| |
| 'ewc-ca-case': {
| |
| filter: {
| |
| 'Use cases thematic': {
| |
| 'Collecting and Analysing Information from SMCS': true
| |
| }
| |
| }
| |
| },
| |
| 'ewc-vol-handbook': {
| |
| url: '/index.php/Including_Citizens_Handbook#mobilizing_volunteers'
| |
| }
| |
| };
| |
| | |
| const handler = event => {
| |
| const answerId = event.currentTarget.id;
| |
| const act = actions[answerId];
| |
| | |
| if (!actions) return;
| |
| | |
| if (answerId.indexOf('tech') !== -1) {
| |
| const enc = btoa(encodeURIComponent(JSON.stringify(act)));
| |
| window.location.assign('/index.php/List_of_Disaster_Community_Technologies' + (act ? '?do=' + enc : ''));
| |
| }
| |
| | |
| if (answerId.indexOf('case') !== -1) {
| |
| const enc = btoa(encodeURIComponent(JSON.stringify(act)));
| |
| window.location.assign('/index.php/List_of_Use_Cases' + (act ? '?do=' + enc : ''));
| |
| }
| |
| | |
| if (answerId.indexOf('guide') !== -1) {
| |
| const enc = btoa(encodeURIComponent(JSON.stringify(act)));
| |
| window.location.assign('/index.php/List_of_Guidelines' + (act ? '?do=' + enc : ''));
| |
| }
| |
| | |
| if (answerId.indexOf('safe') !== -1) {
| |
| if (act?.url) window.location.assign(act.url)
| |
| else window.location.assign('/index.php/Feel_Safe');
| |
| }
| |
| | |
| if (answerId.indexOf('handbook') !== -1) {
| |
| if (act?.url) window.location.assign(act.url)
| |
| else window.location.assign('/index.php/Including_Citizens_Handbook_-_Accessibility');
| |
| }
| |
| }
| |
| | |
| document.querySelectorAll('.choice').forEach(el => el.addEventListener('click', handler, { passive: true }));
| |
|
| |
|
| </script>
| |
| </includeonly> | | </includeonly> |