Merge pull request #94 from OpenGuides/responsive-openguides

Add CSS hooks and make template changes to allow responsive sites.

Build.PL

@@ -88,7 +88,7 @@ my %yn_vars = map { $_ => 1 }
       enable_common_locales recent_changes_on_home_page use_leaflet
       random_page_omits_locales random_page_omits_categories use_lucy
       content_above_navbar_in_html show_gmap_in_node_display force_wgs84
-      send_moderation_notifications read_only);
+      send_moderation_notifications read_only responsive);
 
 my $skip_config = $force || $ENV{AUTOMATED_TESTING} ? 'y' : Module::Build->y_n("Skip OpenGuides configuration?", "n");
 if ( $skip_config ) {
@@ -156,7 +156,7 @@ foreach my $var ( qw(
    licence_name licence_url licence_info_url moderation_requires_password
    enable_node_image enable_common_categories enable_common_locales
    spam_detector_module host_checker_module static_path static_url
-   send_moderation_notifications read_only custom_macro_module
+   send_moderation_notifications read_only responsive custom_macro_module
    website_link_max_chars
   ) ) {
     my $q_method = $var . "__qu";

Changes

@@ -3,6 +3,12 @@
 More detailed changelogs can be found at
 <http://github.com/OpenGuides/OpenGuides>
 
+0.82
+        Add some extra CSS hooks to the templates.  Add new base stylesheet
+          rules for a responsive version.  Make a few changes in core templates
+          to facilitate the responsive version.  To get all these shiny new
+          features, you need to set the "responsive" config variable to true.
+
 0.81    10 January 2016
         Trim leading/trailing whitespace from the fax field (so those of us
           using this field to store the Twitter username don't get broken

INSTALL

@@ -349,6 +349,22 @@ input the URL the content will be visible at here.
 For spam avoidance, you can configure certain nodes to require moderation.
 To ensure that such edits are noticed, OpenGuides can email you.
 
+  "Should the guide be read-only (no edits permitted)?"
+
+If you want to switch your guide to read-only, either temporarily (e.g. all
+the moderators are going on holiday) or permanently (e.g. the guide is now
+just an archive), answer "y" here.  You can reverse this decision at any time.
+
+  "Should the site be mobile-friendly (responsive)?"
+
+As of version 0.82, fresh OpenGuides installs are mobile-friendly.  If
+you have an existing site and wish to make it mobile-friendly, you should
+answer "y" here AND make sure any of the templates you've overridden with
+custom versions are brought up to date with the current core templates.
+The easiest way to do this is to run diffs between the main templates and
+your own versions, and make sure there are no differences other than the
+ones you intend.
+
   "Distance calculation methods available are:
       1) British National Grid
       2) Irish National Grid

README.CSS

@@ -16,6 +16,16 @@ div.admin_completed_action
     Used in: admin_home.tt
     Purpose: Display a message confirming the action just taken.
 
+div.confirm_deletion_text
+    Used in: delete_confirm.tt
+    Purpose: Display text asking user to confirm they want to delete a
+             node/version.
+
+div.confirm_moderation_text
+    Used in: moderate_confirm.tt
+    Purpose: Display text asking user to confirm they want to moderate a
+             node/version.
+
 div.disallowed_characters_note
     Used in: newpage.tt
     Purpose: Contains text explaining that some characters aren't allowed in
@@ -64,6 +74,15 @@ div.jump_to_edit_form
     Purpose: Contains a link to jump up or down the page to the edit form,
              when previewing one's edits.
 
+div.latlong_search
+div.local_coord_search
+div.location_search
+div.text_search
+    Used in: search.tt
+    Purpose: Display inputs for different types of search criteria.  Only
+             appear if the config variable "responsive" is set to true;
+             otherwise, a table is used instead.
+
 div.licence_and_moderation_notes
     Used in: edit_form.tt
     Purpose: Contains a description of the guide's licence and details of any
@@ -101,10 +120,30 @@ div.warning_text
     Used in: edit_form.tt
     Purpose: Warns the user that there is an edit conflict
 
+form.confirm_deletion
+    Used in: delete_confirm.tt
+    Purpose: Form for the user to input the moderation password when deleting
+             a node/version.
+
+form.confirm_moderation
+    Used in: moderate_confirm.tt
+    Purpose: Form for the user to input the moderation password when
+             moderating a node.
+
+form.index_nodes
+    Used in: index_form.tt
+    Purpose: Form for user to choose which category and local to display when
+             doing a map or list index.
+
 h1.edit_form_title
     Used in: edit_form.tt
     Purpose: Display the main heading on the edit form - e.g. Edit "My Node"
 
+h2.map_index_header
+    Used in: map_index_leaflet.tt
+    Purpose: Display the subheading showing which category and/or locale we're
+             indexing, in the map view.
+
 input.form_button
     Used in: differences.tt, edit_form.tt, footer.tt, navbar_search.tt,
              newpage.tt, node.tt, preferences.tt, search.tt
@@ -130,11 +169,20 @@ h2.node_name
     Used in: node.tt
     Purpose: Displays the node name
 
+h2.recentchanges_section_header
+    Used in: recent_changes.tt
+    Purpose: Sub-header for section showing changes within a given time span.
+
 input.hidden
     Used in: navbar_search.tt
     Purpose: Defines content that will be hidden for users with a
              CSS-conforming user agent
 
+ol.index_node_list
+    Used in: site_index.tt
+    Purpose: List of nodes in given category/locale or within given distance
+             of given point.
+
 span.current_version_title_link
     Used in: node.tt
     Purpose: On display of historical versions of nodes, provides a link to
@@ -146,6 +194,10 @@ span.node_name
     Purpose: Inlines a node name in a snippet of explanatory text,
              without linking to it.
 
+table.recentchanges_section
+    Used in: recent_changes.tt
+    Purpose: Display recent changes within a given timespan.
+
 td.admin_action
     Used in: admin_home.tt
     Purpose: Display possible actions for a node, locale, or category in
@@ -180,6 +232,14 @@ td.label
     Used in: edit_form.tt
     Purpose: Defines a label for a field
 
+td.newer_version
+td.older_version
+th.newer_version
+th.older_version
+    Used in: differences.tt
+    Purpose: Table cells for displaying chunks of diffs between two versions
+             of a node.
+
 td.recentchanges_comment
     Used in: recent_changes.tt
     Purpose: The user's comment on a change
@@ -200,9 +260,29 @@ div.hit_summary
     Used in: search.tt
     Purpose: One-line summary of individual search result.
 
+ul.node_history
+    Used in: node_history.tt
+    Purpose: List all versions of a node.
+
 IDs
 ---
-
+
+a#banner_home_link
+    Used in: banner.tt
+    Purpose: A link to the home page in the site banner.
+
+a#banner_navbar_link
+    Used in: banner.tt
+    Purpose: An internal link to the #navbar anchor, appearing in the site
+             banner.  This only appears if the "responsive" config variable is
+             set to true, and should be set to hidden (via CSS) except in
+             narrow-viewport versions which put the navbar at the bottom of the
+             page.
+
+div#backlink_search_results
+    Used in: backlink_results.tt
+    Purpose: Container for the list of nodes which link to a given node.
+
 div#banner
     Used in: banner.tt
     Purpose: The site banner/title
@@ -240,6 +320,11 @@ div#node_location_search
     Purpose: A section of the node display that contains location based 
              searches. 
 
+div#node_map_and_image
+    Used in: edit_form_preview.tt, node.tt
+    Purpose: A container for the node map (if shown) and image.  Only appears
+             if the config variable "responsive" is set to true.
+
 div#footer
     Used in: footer.tt
     Purpose: The bottom portion of the page
@@ -253,6 +338,12 @@ div#header
     Used in: search_results.tt
     Purpose: The first part of the page, containing the site name
 
+div#last_five_edits_by_user
+div#rss_feeds_for_user
+div#userstats
+    Used in: userstats.tt
+    Purpose: Containers for various types of user stats.
+
 div#metadata
     Used in: display_metadata.tt
     Purpose: The section of the node display with a list of metadata
@@ -313,10 +404,6 @@ div#nonexistent_node_message
     Used in: node.tt
     Purpose: Display message when someone tries to view a nonexistent node.
 
-div#rdf_link
-    Used in: node.tt
-    Purpose: Link to an RDF version of the node
-
 div#recent
     Used in: home_node.tt
     Purpose: Recent changes summary box on the home node
@@ -335,6 +422,10 @@ div#search_form
     Used in: footer.tt
     Purpose: The search form at the bottom of the page
 
+div#search_results
+    Used in: search.tt
+    Purpose: Container for the list of search results.
+
 div#title_edit_link
     Used in: node.tt
     Purpose: Display an "edit this page" link near the node name.
@@ -394,10 +485,18 @@ fieldset#openguides_information
     Used in: openguides_information_boxes.tt
     Purpose: Contains input widgets for username, comment, and edit type.
 
+form#advanced_search
+    Used in: search.tt
+    Purpose: Form for the user to enter search terms (text and geodata).
+
 form#new_page_form
     Used in: newpage.tt
     Purpose: The form for typing in the new page name.
 
+form#preferences_form
+    Used in: preferences.tt
+    Purpose: Form for setting the user's preferences.
+
 input#address
     Used in: edit_form.tt
     Purpose: An input field for the address of the node
@@ -453,6 +552,10 @@ input#pagename
     Used in: newpage.tt
     Purpose: An input field for choosing the name of a new page
 
+input#password
+    Used in: delete_confirm.tt
+    Purpose: Password field in form for confirming deletion of a node/version.
+
 input#phone
     Used in: edit_form.tt
     Purpose: An input field for the telephone number of the node
@@ -527,6 +630,10 @@ table#recentchanges
     Used in: recent_changes.tt
     Purpose: The main display table of the recent changes page
 
+table#version_diffs
+    Used in: differences.tt
+    Purpose: A table to display diffs between two versions of a node.
+
 textarea#categories
     Used in: edit_form.tt
     Purpose: An box to enter the categories of the node
@@ -552,3 +659,7 @@ table#wanted_pages
 div#banner
     Used in: node.tt
     Purpose: A one-line summary of what the node is
+
+ul#prefs_saved_extra_nav
+    Used in: preferences.tt
+    Purpose: Offer links to return to site or to edit preferences again.

lib/OpenGuides.pm

@@ -14,7 +14,7 @@ use URI::Escape;
 
 use vars qw( $VERSION );
 
-$VERSION = '0.81';
+$VERSION = '0.82';
 
 =head1 NAME
 

lib/OpenGuides/CGI.pm

@@ -529,6 +529,7 @@ sub _make_dropdown_html {
 
     my $q = CGI->new( "" );
     return $q->popup_menu( -name => $field_name,
+                           -class => "$args{type}_index",
                            -values => [ "", @values ],
                            -labels => { "" => $any_label, %labels },
                            -default => $default );

lib/OpenGuides/Config.pm

@@ -28,7 +28,7 @@ my @variables = qw(
    enable_node_image enable_common_categories enable_common_locales
    spam_detector_module host_checker_module custom_macro_module
    static_path static_url
-   send_moderation_notifications website_link_max_chars read_only
+   send_moderation_notifications website_link_max_chars read_only responsive
 );
 my @questions = map { $_ . "__qu" } @variables;
 OpenGuides::Config->mk_accessors( @variables );
@@ -125,6 +125,7 @@ sub _init {
                      send_moderation_notifications => 1,
                      website_link_max_chars => 25,
                      read_only => 0,
+                     responsive => 0,
                    );
 
     # See if we already have some config variables set.
@@ -217,6 +218,7 @@ sub _init {
         website_link_max_chars => "How many characters of the URL of node websites should be displayed?",
         moderate_whitelist => "Enter a comma-separated list of IP addresses able to make changes to moderated nodes and have them show up immediately",
         read_only => "Should the guide be read-only (no edits permitted)?",
+        responsive => "Should the site be mobile-friendly (responsive)?",
     );
 
     foreach my $var ( keys %questions ) {
@@ -375,6 +377,8 @@ sub static_url {
 
 =item * read_only
 
+=item * responsive
+
 =back
 
 =head1 AUTHOR

lib/OpenGuides/Template.pm

@@ -184,7 +184,8 @@ sub output {
         gmaps_api_key         => $config->gmaps_api_key,
         licence_name          => $config->licence_name,
         licence_url           => $config->licence_url,
-        licence_info_url      => $config->licence_info_url
+        licence_info_url      => $config->licence_info_url,
+        responsive            => $config->responsive,
     };
 
     if ($args{node}) {