Widget: CrisisCommunicationList: Difference between revisions

From LINKS Community Center
Jump to: navigation, search
Eschmidt (talk | contribs)
(Created page with "<noinclude>Crisis Communication list widget.<br><span style="color: red; font-weight: bold;">Currently in use – do not modify!</span></noinclude> <includeonly></includeo...")
 
Marterer (talk | contribs)
No edit summary
 
(23 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<noinclude>Crisis Communication list widget.<br><span style="color: red; font-weight: bold;">Currently in use &ndash; do not modify!</span></noinclude>
<noinclude>Current version of the Crisis Communication Library.<br><strong style="color:red;">Currently in use &ndash; do not modify!</strong>
<includeonly></includeonly>
</noinclude>
<includeonly>
    <link href="/resources/assets/tabulator/dist/css/tabulator.min.css" rel="stylesheet">
    <script type="text/javascript" src="/resources/assets/tabulator/dist/js/tabulator.min.js"></script>
 
    <!-- STYLES BEGIN -->
    <link rel="stylesheet" href="https://assets.links.communitycenter.eu/v2/links/lib?q=cc_list.css">
    <!-- STYLES END -->
 
    <!-- SCRIPT BEGIN -->
    <script type="text/javascript" src="https://assets.links.communitycenter.eu/v2/links/lib?q=cc_list.js"></script>
    <!-- SCRIPT END -->
 
    <div id="cc-list-wrapper">
        <h1>
            <img src="https://assets.links.communitycenter.eu/v2/links/lib?q=4-cc_list.svg">
            <div>
                <div>Crisis Communication</div>
                <div style="font-size:small; letter-spacing:.03em; margin-left: .35em;">Social Media and Crowdsourcing Library</div>
            </div>
        </h1>
        <div id="intro">
            <p>
                The best way to cope with a disaster is an efficient crisis communication before, during and after such
                situation. Risk awareness, preparedness and appropriate behaviour during and after a disaster is key to mitigate
                its effects on people. The purpose of this library is to ease communication with the public via Social Media
                text messages taken from trustful resources.
            </p>
            <p>
                The user can narrow down the results via filters and may either use (part of) the content and/or provide the
                link to the source via the own Social Media account. The use of the translation tools available in the various
                browsers allow for easy transfer of the texts into own messages.
            </p>
        </div>
 
        <!-- FILTERS -->
        <div id="filter-bar">
            <div style="display: flex; justify-content: space-between;">
                <div style="flex: 1 1;">
                    <h2 style="margin-bottom: 1rem;">Selected Filters</h2>
                    <div id="filter-summary">No filter. Showing all results.</div>
                </div>
                <div>
                    <button class="large-button" type="button" onclick="toggleFilter()">Open Filters</button>
                </div>
            </div>
 
            <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 2.5rem;">
                <h2 style="margin-bottom: 0;">Results: <span id="result-count"></span></h2>
                <div><a href="/index.php/Form:Crisis_Communication" style="font-size: 1.5em; font-variant:small-caps; color: var(--ccl-color)">Add new Crisis Communication</a></div>
            </div>
 
            <div id="cc-filters">
                <h2 style="display: flex; justify-content: space-between;">
                    <div>
                        <img src="https://assets.links.communitycenter.eu/v2/links/lib?q=filters.svg">
                        <span>Filters</span>
                    </div>
                    <a onclick="toggleFilter()" id="close-filter-button">&times;</a>
                </h2>
 
                <div style="text-align: center;">
                    <button class="large-button" type="button" onclick="clearFilters()">Clear Filters</button>
                </div>
 
                <div class="filter-wrapper">
                    <h4 class="filter-toggle">Type <div class="plus icon"></div></h4>
                    <div class="filter-container">
                        <div class="filter-button-wrapper">
                            <button type="button" onclick="selectAll('#type-filter')">Select all</button> |
                            <button type="button" onclick="deselectAll('#type-filter')">Clear all</button>
                        </div>
                        <div class="filter-content" id="type-filter"></div>
                    </div>
                </div>
 
                <div class="filter-wrapper">
                    <h4 class="filter-toggle">Scenario <div class="plus icon"></div></h4>
                    <div class="filter-container">
                        <div class="filter-button-wrapper">
                            <button type="button" onclick="selectAll('#scenario-filter')">Select all</button> |
                            <button type="button" onclick="deselectAll('#scenario-filter')">Clear all</button>
                        </div>
                        <div class="filter-content" id="scenario-filter"></div>
                    </div>
                </div>
 
                <div class="filter-wrapper">
                    <h4 class="filter-toggle">Disaster Management Phase <div class="plus icon"></div></h4>
                    <div class="filter-container">
                        <div class="filter-button-wrapper">
                            <button type="button" onclick="selectAll('#phases-filter')">Select all</button> |
                            <button type="button" onclick="deselectAll('#phases-filter')">Clear all</button>
                        </div>
                        <div class="filter-content" id="phases-filter"></div>
                    </div>
                </div>
 
                <div class="filter-wrapper">
                    <h4 class="filter-toggle">Language <div class="plus icon"></div></h4>
                    <div class="filter-container">
                        <div class="filter-button-wrapper">
                            <button type="button" onclick="selectAll('#language-filter')">Select all</button> |
                            <button type="button" onclick="deselectAll('#language-filter')">Clear all</button>
                        </div>
                        <div class="filter-content" id="language-filter"></div>
                    </div>
                </div>
            </div>
        </div>
 
        <div id="tabulator-table"></div>
    </div>
 
</includeonly>

Latest revision as of 09:50, 2 October 2024

Current version of the Crisis Communication Library.
Currently in use – do not modify!