Commit 382c7e5d authored by colmoneill's avatar colmoneill

last bits for the expansion of the filters area

parent 0c97e1f4
......@@ -107,8 +107,10 @@ $(".toggle-EN").on("click", function(){
$(".language-English").toggle();
});
$(document).ready(function(){
$('.expand-filters').click(function(){
$(".main-area").toggleClass("ANYTHING");
});
$('.expand-filt').click(function(){
$(".main-area").toggleClass("white-row white-row-collapsed");
$("#myChart").css("height", "100px");
});
$('.expand-filters-right').click(function(){
$(".main-area").toggleClass("white-row white-row-collapsed");
});
......@@ -223,6 +223,11 @@ div.whiterow ::-webkit-scrollbar-thumb:vertical, div.white-row ::-webkit-scrollb
background-color: black;
}
div.white-row-collapsed {
height: 60vh;
background-color: white;
}
.collection-page {
color: black;
}
......@@ -238,6 +243,11 @@ div.whiterow ::-webkit-scrollbar-thumb:vertical, div.white-row ::-webkit-scrollb
margin-bottom: 2.2em;
}
.collection-select div.embedded-list {
padding-left: 10px;
font-size: 0.8em;
}
.whiterowsmaller {
height: 60vh;
}
......@@ -343,9 +353,9 @@ div.reg-page-container a {
.lower-nav {
font-size: 0.8em;
background-color: black;
padding-top: 0.55em;
position: fixed;
width: 100%;
margin-top: 0.55em;
/* Hide the browser's default checkbox */
/* Create a custom checkbox */
/* On mouse-over, add a grey background color */
......@@ -362,6 +372,14 @@ div.reg-page-container a {
font-size: 1em;
}
}
.lower-nav .uncertain-list {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
column-gap: 20px;
}
.lower-nav .row {
width: 100%;
}
......@@ -374,8 +392,25 @@ div.reg-page-container a {
.lower-nav .language-select {
text-align: right;
}
.lower-nav .expand-filters a {
.lower-nav .expand-filters {
transform: rotate(-90deg);
position: fixed;
bottom: 52px;
left: -10px;
}
.lower-nav .expand-filters a.expand-filt {
text-align: left;
color: #e6e619;
}
.lower-nav .expand-filters-right {
transform: rotate(-90deg);
position: fixed;
bottom: 52px;
right: -10px;
}
.lower-nav .expand-filters-right a.expand-filt-right {
text-align: left;
color: #e6e619;
}
.lower-nav .container {
display: block;
......
......@@ -140,6 +140,11 @@ div.whiterow, div.white-row{
}
}
div.white-row-collapsed{
height: 60vh;
background-color: white;
}
.collection-page{
color: black;
b{
......@@ -155,6 +160,13 @@ div.whiterow, div.white-row{
}
}
.collection-select{
div.embedded-list{
padding-left: 10px;
font-size: 0.8em;
}
}
.whiterowsmaller{
height: 60vh;
}
......@@ -255,12 +267,20 @@ div.reg-page-container{
.lower-nav{
font-size: 0.8em;
background-color: black;
@include padding-leader(2);
position: fixed;
width: 100%;
@include respond-to($f-vp){
font-size: 1em;
}
position: fixed;
width: 100%;
@include leader(2);
.uncertain-list{
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
column-gap: 20px;
}
.row{
width: 100%;
}
......@@ -274,9 +294,24 @@ div.reg-page-container{
text-align: right;
}
.expand-filters{
a{
a.expand-filt{
text-align: left;
color: $project-yellow;
}
transform: rotate(-90deg);
position: fixed;
bottom: 52px;
left: -10px;
}
.expand-filters-right{
a.expand-filt-right{
text-align: left;
color: $project-yellow;
}
transform: rotate(-90deg);
position: fixed;
bottom: 52px;
right: -10px;
}
.container {
display: block;
......
......@@ -53,16 +53,16 @@
{% block footer %}
<div class="lower-nav row-parent">
<div class="row">
<!-- <div class="colspan12-1 as-grid expand-filters">
<a class="expand-filters" href="#">expand filters</a>
</div> -->
<div class="expand-filters">
<a class="expand-filt">filters →</a>
</div>
<div class="colspan12-1 as-grid ">
<ul>
<li id="inventoryNb">current item: </li>
<li id="itemTitle">item title: </li>
</ul>
</div>
<div class="colspan12-2 as-grid with-gutter">
<div class="colspan12-2 as-grid with-gutter uncertain-list">
<a href="/collection">current list of words:</a>
<ul>
{% for item in uncertainlist %}
......@@ -79,23 +79,49 @@
-->
<canvas id="myChart" height="100"></canvas>
</div>
<div title="collection selection is not yet an active feature of the collection" class="colspan12-2 as-grid with-gutter collection-select">
<label class="container">Musée du Cinquantenaire
<div class="colspan12-4 as-grid with-gutter collection-select" title="collection selection is not yet an active feature of the collection">
<label class="container">Royal Museums of Art and History, Brussels (Carmentis Online Collection Database)
<input type="checkbox" checked="checked" disabled>
<span class="checkmark"></span>
</label>
<label class="container">Musée d’Extrême-Orient
<div class="embedded-list">
<label class="container">Art & History Museum
<input type="checkbox" checked="checked" disabled>
<span class="checkmark"></span>
</label>
<label class="container">Musical Instruments Museum
<input type="checkbox" checked="checked" disabled>
<span class="checkmark"></span>
</label>
<label class="container">Halle Gate, Brussels
<input type="checkbox" checked="checked" disabled>
<span class="checkmark"></span>
</label>
<label class="container">Museums of the Far East
<input type="checkbox" checked="checked" disabled>
<span class="checkmark"></span>
</label>
</div>
<label class="container">Royal Institute for Cultural Heritage, Brussels (BALaT KIK-IRPA Online Collection Database)
<input type="checkbox" disabled>
<span class="checkmark"></span>
</label>
<label class="container">Porte de Hal
<div class="embedded-list">
<label class="container">Photo library
<input type="checkbox" disabled>
<span class="checkmark"></span>
</label>
</div>
<label class="container">Africa Museum, Tervuren
<input type="checkbox" disabled>
<span class="checkmark"></span>
</label>
<label class="container">Musée des Instruments de Musique
<input type="checkbox" disabled >
<span class="checkmark"></span>
</label>
<div class="embedded-list">
<label class="container">Cultural Anthropology and History (Human Sciences Online Collection Database)
<input type="checkbox" disabled >
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="colspan12-1 as-grid with-gutter">
<ul>
......@@ -106,14 +132,16 @@
</ul>
</div>
<div class="colspan12-2 as-grid with-gutter language-select">
<div class="colspan12-1 as-grid with-gutter language-select">
<ul>
<li> <a class="toggle-DE striked" href="#">DE</a> </li>
<li> <a class="toggle-DE striked" href="#">DE</a></li>
<li> <a class="toggle-EN" href="#">EN</a> </li>
<li> <a class="toggle-FR" href="#">FR</a> </li>
<li> <a class="toggle-NL" href="#">NL</a> </li>
</ul>
</div>
<div class="expand-filters-right">
<a class="expand-filt-right">filters →</a>
</div>
</div>
</div>
......
{% extends "base.html" %}
{% block content %}
<div id="main-area" class="main-area row-parent white-row">
<div id="main-area" class="main-area row-parent whiterow white-row">
<div class="row">
<div class="as-grid hp-half hp-half-left">
{% for word, results in full_dict.items() %}
{% for result in results[1:] %}
{% for result in results[1:50] %}
{% if result[11] == "item has no description" %}
{% else %}
<div class="vignette vignette{{result[1]}} language-{{result[12]}}">
......@@ -20,7 +20,7 @@
<div class="as-grid hp-half hp-half-right">
<div class="text-container">
{% for word, results in full_dict.items() %}
{% for result in results[1:] %}
{% for result in results[1:50] %}
{% if result[11] == "item has no description" %}
{% else %}
<a class="language-{{result[12]}}" href="#passepartout-{{result[1]}}"><span id="description-{{result[1]}}" class="{{result[1]}} description">{{result[11]|safe}}</span></a>
......
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