Difference between revisions of "Widget:PRIMRE-Event-Filter"

From Open Energy Information

(Add icon/css to the search text input.)
 
Line 10: Line 10:
 
<style>
 
<style>
 
/*--Event search, sort, and filter controls--*/
 
/*--Event search, sort, and filter controls--*/
 +
#search-icon {
 +
  background-color: #005a7b;
 +
  border-radius: 3px 0 0 3px;
 +
  color: whitesmoke;
 +
  padding: 6px 6px;
 +
}
 +
#search-text-filter {
 +
  padding-left: 2px;
 +
}
 
.event-filters {
 
.event-filters {
 
   display:flex;
 
   display:flex;
Line 86: Line 95:
  
 
   /*--Search by Text--*/
 
   /*--Search by Text--*/
     var $searchControl = $('<form></form>').addClass('event-filters');
+
     var $searchControl = $('<div class="event-filters"><i id="search-icon" class="fa fa-search"></i></div>');
     $searchControl.html('<input id="search-text-filter" type="text" placeholder="Search events..." style="width:250px;">');
+
    var $searchInput = $('<input></input>');
 +
     $searchInput.attr({'id': 'search-text-filter', 'placeholder': 'Search events...', 'style': 'width:250px;', 'type': 'text'});
 +
    $searchControl.append($searchInput);
  
 
   /*--Filter by Upcoming or All--*/
 
   /*--Filter by Upcoming or All--*/

Latest revision as of 15:34, 10 February 2020

This widget is used to filter events for the PRIMRE Events page.

{{#Widget:PRIMRE-Event-Filter}}