Difference between revisions of "Widget:DevGuidelines"

From LINKS Community Center
Jump to: navigation, search
Line 30: Line 30:
 
             margin-right: .5em;
 
             margin-right: .5em;
 
         }
 
         }
 
+
         #filter-bar { position: relative; margin: 1em 0 2em 0; }
         #filter-bar {
 
            position: relative;
 
            margin: 1em 0 2em 0;
 
        }
 
 
 
 
         #dct-filters {
 
         #dct-filters {
 
             position: absolute;
 
             position: absolute;
Line 49: Line 44:
 
             transition: all 400ms ease-in-out;
 
             transition: all 400ms ease-in-out;
 
         }
 
         }
 
 
         #gl-filters.open {
 
         #gl-filters.open {
 
             clip-path: inset(0 0 -50px -50px);
 
             clip-path: inset(0 0 -50px -50px);
Line 108: Line 102:
 
         }
 
         }
  
         .filter-wrapper .filter-container {
+
         .filter-wrapper .filter-container { display: none; }
            display: none;
+
         .filter-wrapper.open .filter-container { display: block; }
        }
 
 
 
         .filter-wrapper.open .filter-container {
 
            display: block;
 
        }
 
  
 
         .filter-wrapper h4 {
 
         .filter-wrapper h4 {
Line 184: Line 173:
 
             border: 0 none;
 
             border: 0 none;
 
         }
 
         }
 
+
       
 
         #guideline-tabulator.tabulator .tabulator-header .tabulator-col {
 
         #guideline-tabulator.tabulator .tabulator-header .tabulator-col {
 
             border-bottom: 4px double var(--links-orange);
 
             border-bottom: 4px double var(--links-orange);
Line 222: Line 211:
 
         }
 
         }
  
         #guideline-tabulator.tabulator .guideline-title a,
+
         #guideline-tabulator.tabulator .guideline-title a,  
 
         #guideline-tabulator.tabulator .tabulator-responsive-collapse table a {
 
         #guideline-tabulator.tabulator .tabulator-responsive-collapse table a {
 
             color: var(--links-orange);
 
             color: var(--links-orange);
 
         }
 
         }
 +
  
 
     </style>
 
     </style>
Line 337: Line 327:
  
 
         });
 
         });
 
 
  
  
Line 377: Line 365:
 
         </h1>
 
         </h1>
 
         <div id="guideline-intro">
 
         <div id="guideline-intro">
             <p>The guidelines library gathers and structures existing guiding documents (guidelines, legal documents,
+
             <p>The guidelines library gathers and structures existing guiding documents (guidelines, legal documents, Standard Operation Procedures) that support the implementation and use of social media and crowdsourcing in disaster management organisations.
                Standard Operation Procedures) that support the implementation and use of social media and crowdsourcing
+
</p>
                in disaster management organisations.
 
            </p>
 
 
             <ul>
 
             <ul>
 
                 <li>Building a communication strategy for social media and consideration of the main elements (e.g.
 
                 <li>Building a communication strategy for social media and consideration of the main elements (e.g.
Line 409: Line 395:
  
 
         <h2 style="margin-top: 2.5rem; margin-bottom: 0;">Results: <span id="result-count"></span></h2>
 
         <h2 style="margin-top: 2.5rem; margin-bottom: 0;">Results: <span id="result-count"></span></h2>
 
+
   
 
         <div id="gl-filters">
 
         <div id="gl-filters">
 
             <h2 style="display: flex; justify-content: space-between;">
 
             <h2 style="display: flex; justify-content: space-between;">
Line 421: Line 407:
 
                         <g clip-path="url(#b)" transform="translate(-592 -312)">
 
                         <g clip-path="url(#b)" transform="translate(-592 -312)">
 
                             <path
 
                             <path
                                d="M636 356.012v38.011l8-8v-30.011L674 326h-68Zm6.588-1.412-.588.584v30.008l-4 4v-34.008l-.585-.586L610.828 328h58.348Z" />
+
                            d="M636 356.012v38.011l8-8v-30.011L674 326h-68Zm6.588-1.412-.588.584v30.008l-4 4v-34.008l-.585-.586L610.828 328h58.348Z" />
 
                         </g>
 
                         </g>
 
                     </svg>
 
                     </svg>
Line 432: Line 418:
 
             </div>
 
             </div>
 
             <div class="filter-wrapper">
 
             <div class="filter-wrapper">
                 <h4>Covers Thematic <span class="filter-toggle"><svg>
+
                 <h4>Covers Thematic <span class="filter-toggle"><svg><use href="#chevron-down"/></svg></span></h4>
                            <use href="#chevron-down" />
 
                        </svg></span></h4>
 
 
                 <div class="filter-container">
 
                 <div class="filter-container">
 
                     <div class="filter-button-wrapper">
 
                     <div class="filter-button-wrapper">
Line 444: Line 428:
 
             </div>
 
             </div>
 
             <div class="filter-wrapper">
 
             <div class="filter-wrapper">
                 <h4>Audience experience level<span class="filter-toggle"><svg>
+
                 <h4>Audience experience level<span class="filter-toggle"><svg><use href="#chevron-down"/></svg></span></h4>
                            <use href="#chevron-down" />
 
                        </svg></span></h4>
 
 
                 <div class="filter-container">
 
                 <div class="filter-container">
 
                     <div class="filter-button-wrapper">
 
                     <div class="filter-button-wrapper">
Line 456: Line 438:
 
             </div>
 
             </div>
 
             <div class="filter-wrapper">
 
             <div class="filter-wrapper">
                 <h4>Language<span class="filter-toggle"><svg>
+
                 <h4>Language<span class="filter-toggle"><svg><use href="#chevron-down"/></svg></span></h4>
                            <use href="#chevron-down" />
 
                        </svg></span></h4>
 
 
                 <div class="filter-container">
 
                 <div class="filter-container">
 
                     <div class="filter-button-wrapper">
 
                     <div class="filter-button-wrapper">
Line 468: Line 448:
 
             </div>
 
             </div>
 
             <div class="filter-wrapper">
 
             <div class="filter-wrapper">
                 <h4>Target audience<span class="filter-toggle"><svg>
+
                 <h4>Target audience<span class="filter-toggle"><svg><use href="#chevron-down"/></svg></span></h4>
                            <use href="#chevron-down" />
 
                        </svg></span></h4>
 
 
                 <div class="filter-container">
 
                 <div class="filter-container">
 
                     <div class="filter-button-wrapper">
 
                     <div class="filter-button-wrapper">

Revision as of 15:11, 22 November 2022

Development version of the List of Guidelines.
Not ready for production!