Commit 5e7029d2 authored by Matt Mascarenhas's avatar Matt Mascarenhas

cinera: Tweak filter

Introduce nullTopic, visually represent the media in annotations and
default to "exclusive" mode
parent 78861a1c
This diff is collapsed.
...@@ -239,11 +239,14 @@ ...@@ -239,11 +239,14 @@
z-index: 1; z-index: 1;
} }
.cineraMenus > .menu .refs, .cineraMenus > .menu .refs {
.cineraMenus > .menu .filter_container {
width: 350px; width: 350px;
} }
.cineraMenus > .menu .filter_container {
min-width: 350px;
}
.cineraMenus > .menu .credits_container { .cineraMenus > .menu .credits_container {
min-width: 240px; min-width: 240px;
} }
...@@ -370,25 +373,41 @@ ...@@ -370,25 +373,41 @@
.cineraMenus > .menu > .filter_container .filters > * { .cineraMenus > .menu > .filter_container .filters > * {
width: 50%; width: 50%;
flex-grow: 1;
} }
.cineraMenus > .menu > .filter_container .filter_content { .cineraDefaultMediumIndicator {
color: #FEF697;
}
.cineraMenus > .menu > .filter_container .filter_content,
.cineraPlayerContainer .markers_container > .marker .cineraContent .cineraCategories {
cursor: pointer; cursor: pointer;
display: flex;
align-items: center;
} }
.cineraMenus > .menu > .filter_container .filter_content .icon { .cineraMenus > .menu > .filter_container .filter_content .icon,
margin: 0 4px; .cineraPlayerContainer .markers_container > .marker .cineraContent .cineraCategories .categoryMedium {
font-style: normal;
margin-left: 4px;
}
.cineraPlayerContainer .markers_container > .marker .cineraContent .cineraCategories .categoryMedium + .categoryMedium {
margin-left: 2px;
} }
.cineraMenus > .menu > .filter_container .filter_content.off .icon { .cineraMenus > .menu > .filter_container .filter_content.off .icon {
background: transparent; background: transparent;
} }
.cineraMenus > .menu > .filter_container .filter_content.rant .icon { .cineraMenus > .menu > .filter_container .filter_content.rant .icon,
color: #F00; .cineraPlayerContainer .markers_container > .marker .cineraContent .cineraCategories .categoryMedium.rant {
color: #BA0001;
} }
.cineraMenus > .menu > .filter_container .filter_media .filter_content.off .icon { .cineraMenus > .menu > .filter_container .filter_media .filter_content.off .icon,
.cineraPlayerContainer .markers_container > .marker .cineraContent .cineraCategories .categoryMedium.off {
opacity: 0.32; opacity: 0.32;
} }
...@@ -447,12 +466,7 @@ ...@@ -447,12 +466,7 @@
.cineraMenus .filter_content.authored .cineraText, .cineraMenus .filter_content.authored .cineraText,
.cineraPlayerContainer .markers_container > .marker.authored, .cineraPlayerContainer .markers_container > .marker.authored,
.cineraPlayerContainer .markers_container > .marker.off_authored { .cineraPlayerContainer .markers_container > .marker.off_authored {
font-style: oblique; font-style: oblique !important;
}
.cineraPlayerContainer .markers_container > .marker.off_authored,
.cineraPlayerContainer .markers_container > .marker.off_rant {
opacity: 0.5;
} }
.cineraPlayerContainer .markers_container > .marker .cineraContent sup { .cineraPlayerContainer .markers_container > .marker .cineraContent sup {
...@@ -477,7 +491,7 @@ ...@@ -477,7 +491,7 @@
top: -2px; top: -2px;
} }
.cineraPlayerContainer .markers_container > .marker .cineraContent .categories { .cineraPlayerContainer .markers_container > .marker .cineraContent .cineraCategories {
display: inline-flex; display: inline-flex;
margin: 4px; margin: 4px;
} }
...@@ -487,18 +501,18 @@ ...@@ -487,18 +501,18 @@
} }
.cineraMenus > .menu > .filter_container .filter_content .category, .cineraMenus > .menu > .filter_container .filter_content .category,
.cineraPlayerContainer .markers_container > .marker .cineraContent .categories .category { .cineraPlayerContainer .markers_container > .marker .cineraContent .cineraCategories .category {
border-radius: 50%; border-radius: 50%;
height: 5px; height: 5px;
width: 5px; width: 5px;
} }
.cineraMenus > .menu > .filter_container .filter_content .category.off, .cineraMenus > .menu > .filter_container .filter_content .category.off,
.cineraPlayerContainer .markers_container > .marker .cineraContent .categories .category.off { .cineraPlayerContainer .markers_container > .marker .cineraContent .cineraCategories .category.off {
background: transparent; background: transparent;
} }
.cineraPlayerContainer .markers_container > .marker .cineraContent .categories .category { .cineraPlayerContainer .markers_container > .marker .cineraContent .cineraCategories .category {
margin-left: 2px; margin-left: 2px;
} }
......
...@@ -875,7 +875,7 @@ function filterItemToggle(filterItem) { ...@@ -875,7 +875,7 @@ function filterItemToggle(filterItem) {
{ {
filterItem.querySelector(".icon").style.backgroundColor = "transparent"; filterItem.querySelector(".icon").style.backgroundColor = "transparent";
} }
var testMarkers = document.querySelectorAll(".marker." + selectedCategory + ", .marker.cat_" + selectedCategory); var testMarkers = playerContainer.querySelectorAll(".marker." + selectedCategory + ", .marker.cat_" + selectedCategory);
for(var j = 0; j < testMarkers.length; ++j) for(var j = 0; j < testMarkers.length; ++j)
{ {
if(filterState[selectedCategory].type == "topic") if(filterState[selectedCategory].type == "topic")
...@@ -894,6 +894,14 @@ function filterItemToggle(filterItem) { ...@@ -894,6 +894,14 @@ function filterItemToggle(filterItem) {
} }
else else
{ {
var markerCategories = testMarkers[j].querySelectorAll(".categoryMedium." + selectedCategory);
for(var k = 0; k < markerCategories.length; ++k)
{
if(markerCategories[k].classList.contains(selectedCategory))
{
markerCategories[k].classList.add("off");
}
}
testMarkers[j].classList.remove(selectedCategory); testMarkers[j].classList.remove(selectedCategory);
testMarkers[j].classList.add("off_" + selectedCategory); testMarkers[j].classList.add("off_" + selectedCategory);
} }
...@@ -951,6 +959,14 @@ function filterItemToggle(filterItem) { ...@@ -951,6 +959,14 @@ function filterItemToggle(filterItem) {
{ {
testMarkers[j].classList.remove("off_" + selectedCategory); testMarkers[j].classList.remove("off_" + selectedCategory);
testMarkers[j].classList.add(selectedCategory); testMarkers[j].classList.add(selectedCategory);
var markerCategories = testMarkers[j].querySelectorAll(".categoryMedium." + selectedCategory);
for(var k = 0; k < markerCategories.length; ++k)
{
if(markerCategories[k].classList.contains(selectedCategory))
{
markerCategories[k].classList.remove("off");
}
}
} }
Skipping = 0; Skipping = 0;
...@@ -990,7 +1006,7 @@ function resetFilter() { ...@@ -990,7 +1006,7 @@ function resetFilter() {
} }
} }
if(filterMode == "exclusive") if(filterMode == "inclusive")
{ {
toggleFilterMode(); toggleFilterMode();
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment