help modal exclude description and updated header style, fix #309, PR #…

…310

R/ui_helpModal.R

@@ -36,7 +36,7 @@ helpModal <- function(id, trigger) {
           class = "modal-content",
           ## header
           htmltools::tags$div(
-            class = "modal-header",
+            class = "modal-header help-modal-header",
             ### close button
             htmltools::tags$button(
               type = "button",
@@ -46,7 +46,7 @@ helpModal <- function(id, trigger) {
             ),
             htmltools::tags$div(
               class = "modal-header-content",
-              htmltools::h4("Help")
+              htmltools::h4("Where To Work Help", class = "help-modal-title")
             )
           ),
           ## body

inst/app/text/help.md

@@ -2,14 +2,16 @@ The Where to Work tool is a web-based, decision support tool for building and so
 
 #### Data
 
-The tool uses spatially explicit data to identify priorities for conservation. These data can include themes, weights, and includes. We describe each of these different data types below.
+The tool uses spatially explicit data to identify priorities for conservation. These data can include themes, weights, includes and excludes. We describe each of these different data types below.
 
 **Themes:** Themes describe facets of biodiversity that are important for conservation (e.g., species, habitats, ecosystems). To help safeguard Themes, you can set goals to ensure a minimum level of coverage by solutions (also known as targets under systematic conservation planning terminology). For example, setting a goal of 20% ensures that 20% of the overall spatial extent of the theme is covered by the solution. Some Themes can contain multiple components that are termed Features. For example, a Theme pertaining to Threatened Species may contain Features, wherein each Feature corresponds to a different species.
 
 **Weights:** A weight describes properties of places that can impede or improve conservation efforts. Set the weight factor between –100 and 100 to indicate how important is to avoid or cover (respectively) a given weight in the solution. To completely avoid a weight (e.g., to avoid all areas with mining leases), use a value of -100 (i.e., ensure that planning units with the lowest possible values in the weight dataset are selected). To include as much of the weight as possible (e.g., to include all areas of cultural significance), use a value of 100 (i.e., ensure that planning units with the highest possible values in the weight dataset are selected). Setting a value of zero (deselecting the weight using the toggle) means that it is not considered at all in the prioritization.
 
 **Includes:** An Include refers to areas that are already managed for conservation. By toggling on an Include, this ensures that solutions will select places that are already managed for conservation (similar to locking in certain places under systematic conservation planning terminology). This is important to consider so that solutions build on the current reserve network. It can also be useful to generate solutions that do not consider current reserves, such as to explore counterfactuals and management plans generated using other processes (e.g., what if we built a new system from scratch?).
 
+**Excludes:** An Exclude refers to areas that are not functional for conservation. By toggling on an Exclude, this ensures that solutions will not select sites within those places (similar to locking out certain places under systematic conservation planning terminology). An example of excludes could be industrial and residential land use areas.
+
 #### User interface
 
 The tool has three main components that comprise the user interface. These components include (i) buttons on the top of the map, (ii) a left sidebar for visualizing and downloading data, and (iii) a right sidebar for generating and evaluating solutions. We cover each of these components below.
@@ -23,7 +25,7 @@ The tool has three main components that comprise the user interface. These compo
 
 <li><div><span class = "leaflet-touch"><span class = "history-control leaflet-bar leaflet-control horizontal"><a class = "history-back-button"><icon class = "fa fa-xs fa-caret-left"></a><a class = "history-forward-button"><icon class = "fa fa-xs fa-caret-right"></a></span></span><p>Switch between previous spatial extents on the map.</p></div></li>
 
-<li><div><span class = "leaflet-touch"><span class = "leaflet-bar easy-button-container leaflet-control"><button class = "easy-button-button leaflet-interactive leaflet-bar-part hide-all-layers"><icon class = "fa fa-xs fa-eye-slash"></button><button class = "easy-button-button leaflet-interactive leaflet-bar-part show-all-layers"><icon class = "fa fa-xs fa-eye"></button></span></span><p>Hide or show all data on the map.</p></div></li>
+<li><div><span class = "leaflet-touch"><span class = "leaflet-bar easy-button-container leaflet-control"><button class = "easy-button-button leaflet-interactive leaflet-bar-part hide-all-layers"><icon class = "fa fa-xs fa-eye-slash"></button></span></span><p>Hide all data on the map.</p></div></li>
 
 <li><div><span class = "leaflet-touch"><span class = "leaflet-bar easy-button-container leaflet-control"><button class = "easy-button-button leaflet-interactive leaflet-bar-part"><icon class = "fa fa-xs fa-print"></button></span></span><p>Save the map as an image.</p></div></li>
 
@@ -34,7 +36,7 @@ The tool has three main components that comprise the user interface. These compo
 
 **Left sidebar:** The left sidebar primarily contains panes for visualizing the data. It also contains panes that provide contact details for the development team, and acknowledgments for individuals, organizations, and underlying software that have contributed to the tool. We will describe each of these panes below. To open one of these panes, click on the matching icon in the sidebar.
 <ul class = "middle-icon">
-<li><div><span class = "leaflet-touch"><span class = "leaflet-bar easy-button-container leaflet-control"><button class = "easy-button-button leaflet-interactive leaflet-bar-part"><icon class = "fa fa-xs fa-layer-group"></button></span></span><p>The <em>Table of contents pane</em> is used to interactively visualize data on the map. Each layer corresponds to a theme (<icon class = "fa fa-xs fa-star"></icon>), weight (<icon class = "fa fa-xs fa-weight-hanging"></icon>), or include (<icon class = "fa fa-xs fa-lock"></icon>) (as indicated by the icons). These layers can be re-ordered by dragging and dropping them, and toggled to show or hide them (using the <icon class = "fa fa-xs fa-eye"></icon>/<icon class = "fa fa-xs fa-eye-slash" style="color:red"></icon> buttons).</p></div></li>
+<li><div><span class = "leaflet-touch"><span class = "leaflet-bar easy-button-container leaflet-control"><button class = "easy-button-button leaflet-interactive leaflet-bar-part"><icon class = "fa fa-xs fa-layer-group"></button></span></span><p>The <em>Table of contents pane</em> is used to interactively visualize data on the map. Each layer corresponds to a theme (<icon class = "fa fa-xs fa-star"></icon>), weight (<icon class = "fa fa-xs fa-weight-hanging"></icon>), include (<icon class = "fa fa-xs fa-lock"></icon>), or exclude (<icon class = "fa fa-xs fa-ban"></icon>) (as indicated by the icons). These layers can be re-ordered by dragging and dropping them, and toggled to show or hide them (using the <icon class = "fa fa-xs fa-eye"></icon>/<icon class = "fa fa-xs fa-eye-slash" style="color:red"></icon> buttons).</p></div></li>
 <li><div><span class = "leaflet-touch"><span class = "leaflet-bar easy-button-container leaflet-control"><button class = "easy-button-button leaflet-interactive leaflet-bar-part"><icon class = "fa fa-xs fa-download"></button></span></span><p>The <em>Download pane</em> can be used to download data and results. Specifically, spatially explicit datasets for the themes, weights, and includes can be downloaded (e.g., in raster or vector format). Additionally, solutions can be downloaded too, along with statistics summarizing their performance.</p></div></li>
 <li><div><span class = "leaflet-touch"><span class = "leaflet-bar easy-button-container leaflet-control"><button class = "easy-button-button leaflet-interactive leaflet-bar-part"><icon class = "fa fa-xs fa-envelope"></button></span></span><p>The <em>Contact pane</em> provides information for contacting the development team.</p></div></li>
 <li><div><span class = "leaflet-touch"><span class = "leaflet-bar easy-button-container leaflet-control"><button class = "easy-button-button leaflet-interactive leaflet-bar-part"><icon class = "fa fa-xs fa-heart"></button></span></span><p>The <em>Acknowledgments pane</em> details all the contributions and support provided by various individuals and organizations. Additionally, this pane describes all the open source software that underpins the tool.</p></div></li>

inst/app/www/modal.css

@@ -30,3 +30,15 @@
 .sbs-modal-backdrop {
   z-index: 999998;
 }
+
+/* -- help modal */
+.help-modal-header {
+  background-color: #0074d9;
+}
+
+.help-modal-title {
+  text-align: center;
+  color: #fff;
+  font-size: 30px;
+  margin: 0;
+}