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

From Open Energy Information

m (Adjust column widths and padding)
(Changed "isDisabled" to "active", tweaked style of active element)
Line 126: Line 126:
 
   cursor: pointer;
 
   cursor: pointer;
 
   display: inline-block;
 
   display: inline-block;
  text-decoration: underline;
 
 
}
 
}
 
.view-filter .filter-link:hover,
 
.view-filter .filter-link:hover,
Line 134: Line 133:
 
}
 
}
  
.view-filter .isDisabled,
+
.view-filter .active,
.view-filter .isDisabled:hover,
+
.view-filter .active:hover,
.view-filter .isDisabled:active,
+
.view-filter .active:active,
.view-filter .isDisabled:focus {
+
.view-filter .active:focus {
   color: #000 !important;
+
   color: #005a7b;
  opacity: 0.5;
 
 
   cursor: default;
 
   cursor: default;
 
   text-decoration: none;
 
   text-decoration: none;
 +
  font-weight: bold;
 +
  border-bottom: 2px solid #005a7b;
 
}
 
}
  
Line 163: Line 163:
 
     controlForm.className = "view-filter";
 
     controlForm.className = "view-filter";
 
     controlForm.setAttribute('id','sort-filter');
 
     controlForm.setAttribute('id','sort-filter');
     controlForm.innerHTML = '<span>Sort By:&nbsp;&nbsp;</span><div id="startdate" class="filter-link isDisabled">Date</div><span>&nbsp;&nbsp;|&nbsp;&nbsp;</span><div id="eventname" class="filter-link">Event Name</div>';
+
     controlForm.innerHTML = '<span>Sort By:&nbsp;&nbsp;</span><div id="startdate" class="filter-link active">Date</div><span>&nbsp;&nbsp;|&nbsp;&nbsp;</span><div id="eventname" class="filter-link">Event Name</div>';
  
 
     /*--Search Form--*/
 
     /*--Search Form--*/
Line 173: Line 173:
 
     viewContainer.className = "view-filter";
 
     viewContainer.className = "view-filter";
 
     viewContainer.setAttribute('id','view-filter');
 
     viewContainer.setAttribute('id','view-filter');
     viewContainer.innerHTML = '<span>View:&nbsp;&nbsp;</span><div id="upcoming-events" class="filter-link isDisabled">Upcoming</div><span>&nbsp;&nbsp;|&nbsp;&nbsp;</span><div id="all-events" class="filter-link">All</div>';
+
     viewContainer.innerHTML = '<span>View:&nbsp;&nbsp;</span><div id="upcoming-events" class="filter-link active">Upcoming</div><span>&nbsp;&nbsp;|&nbsp;&nbsp;</span><div id="all-events" class="filter-link">All</div>';
  
 
     document.getElementById("filter-events").appendChild(controlForm);
 
     document.getElementById("filter-events").appendChild(controlForm);
Line 189: Line 189:
 
     /*--View Filter Controls--*/
 
     /*--View Filter Controls--*/
 
     $('#view-filter .filter-link').on('click', function() {
 
     $('#view-filter .filter-link').on('click', function() {
       if ($(this).hasClass('isDisabled')) {
+
       if ($(this).hasClass('active')) {
 
         return;
 
         return;
 
       }
 
       }
Line 195: Line 195:
 
       var date = new Date().getTime();
 
       var date = new Date().getTime();
  
       $('#view-filter .filter-link').eq(linkIndex).removeClass('isDisabled');
+
       $('#view-filter .filter-link').eq(linkIndex).removeClass('active');
       $(this).addClass('isDisabled');
+
       $(this).addClass('active');
  
 
       $("#EventList .event-results").filter(function() {
 
       $("#EventList .event-results").filter(function() {
Line 296: Line 296:
  
 
     $('#sort-filter .filter-link').click(function(event) {
 
     $('#sort-filter .filter-link').click(function(event) {
       if ($(this).hasClass('isDisabled')) { return; }
+
       if ($(this).hasClass('active')) { return; }
 
       var linkIndex = $('#sort-filter .filter-link').index(this) == 1 ? 0 : 1;
 
       var linkIndex = $('#sort-filter .filter-link').index(this) == 1 ? 0 : 1;
  
       $('#sort-filter .filter-link').eq(linkIndex).removeClass('isDisabled');
+
       $('#sort-filter .filter-link').eq(linkIndex).removeClass('active');
       $(this).addClass('isDisabled');
+
       $(this).addClass('active');
  
 
       var filter = $(event.target).attr('id');
 
       var filter = $(event.target).attr('id');

Revision as of 16:10, 25 March 2019

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

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