layout and css
This commit is contained in:
parent
a18584698c
commit
c0102f5bf8
@ -16,12 +16,13 @@ a {
|
||||
background: #a99f8a;
|
||||
}
|
||||
|
||||
/*padding to be moved to the sub stuff */
|
||||
.main-column-left {
|
||||
padding: 1.7em 0em;
|
||||
/*padding: 1.7em 0em;*/
|
||||
float: left;
|
||||
width: 50%;
|
||||
background: #ea4f2b;
|
||||
overflow-y: scroll;
|
||||
/*overflow-y: scroll;*/
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
@ -101,27 +102,60 @@ span.librarian-names:hover, span.file-names:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/**********************************/
|
||||
/* container for names and files */
|
||||
/********************************/
|
||||
|
||||
#nav-container {
|
||||
/*width: 50%;*/
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 25% 75%;
|
||||
grid-column-gap: 0px;
|
||||
grid-row-gap: 0px;
|
||||
height: inherit;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/***********************/
|
||||
/* Block list of names*/
|
||||
/*********************/
|
||||
|
||||
#listofpeople{
|
||||
/*border-bottom: black 1px solid;*/
|
||||
padding: 1.7em 0em;
|
||||
overflow-y: scroll;
|
||||
/* border: lime 1px solid; */
|
||||
position: fixed;
|
||||
width: 50%;
|
||||
padding: 0em;
|
||||
top: 25px;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
/*position: fixed;*/
|
||||
/*width: 50%;*/
|
||||
/*padding: 0em;*/
|
||||
/*top: 25px;*/
|
||||
/*left: 0;*/
|
||||
/*z-index: 1;*/
|
||||
}
|
||||
/***********************/
|
||||
/* Block list of files*/
|
||||
/*********************/
|
||||
|
||||
#listoffiles{
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
|
||||
.file-names-container {
|
||||
/* IE 9 */
|
||||
-ms-transform: rotate(-90deg) translate(-78%, 0%);
|
||||
/* Safari */
|
||||
-webkit-transform: rotate(-90deg) translate(-78%, 0%);
|
||||
/* Standard syntax */
|
||||
/*overflow: scroll;*/
|
||||
/*IE 9 */
|
||||
-ms-transform: rotate(-90deg) translate(-78%, 0%);
|
||||
/*Safari */
|
||||
-webkit-transform: rotate(-90deg) translate(-78%, 0%);
|
||||
/*Standard syntax */
|
||||
transform: rotate(-90deg) translate(-0%, 0%);
|
||||
transform-origin: top left;
|
||||
/* border:blue 1px solid; */
|
||||
/*border:blue 1px solid; */
|
||||
height: 50vw;
|
||||
width: 40vw;
|
||||
width: 34vw;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
position: absolute;
|
||||
@ -130,6 +164,35 @@ span.librarian-names:hover, span.file-names:hover {
|
||||
|
||||
}
|
||||
|
||||
/**************/
|
||||
/* scROLLBARS*/
|
||||
/*************/
|
||||
|
||||
|
||||
/* The emerging W3C standard
|
||||
that is currently Firefox-only */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #8048b7 #ea4f2b;
|
||||
}
|
||||
|
||||
/* Works on Chrome/Edge/Safari */
|
||||
*::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
}
|
||||
*::-webkit-scrollbar-track {
|
||||
background: #ea4f2b;
|
||||
}
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background-color: #8048b7;
|
||||
border-radius: 20px;
|
||||
border: 3px solid #ea4f2b;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
img.listed-images {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -12,6 +12,68 @@
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
|
||||
|
||||
|
||||
|
||||
// // COOKIE
|
||||
// function setCookie(cname,cvalue,exdays) {
|
||||
// var d = new Date();
|
||||
// d.setTime(d.getTime() + (exdays*24*60*60*1000));
|
||||
// var expires = "expires=" + d.toGMTString();
|
||||
// document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
|
||||
// }
|
||||
|
||||
// function getCookie(cname) {
|
||||
// var name = cname + "=";
|
||||
// var decodedCookie = decodeURIComponent(document.cookie);
|
||||
// var ca = decodedCookie.split(';');
|
||||
// for(var i = 0; i < ca.length; i++) {
|
||||
// var c = ca[i];
|
||||
// while (c.charAt(0) == ' ') {
|
||||
// c = c.substring(1);
|
||||
// }
|
||||
// if (c.indexOf(name) == 0) {
|
||||
// return c.substring(name.length, c.length);
|
||||
// }
|
||||
// }
|
||||
// return "";
|
||||
// }
|
||||
|
||||
// function checkCookie() {
|
||||
// var cookiecontent=getCookie("bundleselection");
|
||||
// if (cookiecontent != "") {
|
||||
// alert("your selection is " + cookiecontent);
|
||||
// } else {
|
||||
// alert("You haven't selected anything");
|
||||
// if (cookiecontent != "" && cookiecontent != null) {
|
||||
// setCookie("bundleselection", cookiecontent, 30);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
function setCookie(name,value,days) {
|
||||
var expires = "";
|
||||
if (days) {
|
||||
var date = new Date();
|
||||
date.setTime(date.getTime() + (days*24*60*60*1000));
|
||||
expires = "; expires=" + date.toUTCString();
|
||||
}
|
||||
document.cookie = name + "=" + (value || "") + expires + "; path=/";
|
||||
}
|
||||
function getCookie(name) {
|
||||
var nameEQ = name + "=";
|
||||
var ca = document.cookie.split(';');
|
||||
for(var i=0;i < ca.length;i++) {
|
||||
var c = ca[i];
|
||||
while (c.charAt(0)==' ') c = c.substring(1,c.length);
|
||||
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
///////URLS/////////////
|
||||
|
||||
// setting up variables that we will use for the url later
|
||||
@ -200,14 +262,23 @@ var flag = true;
|
||||
///////////CHECKBOXES////////////////
|
||||
|
||||
var listofselecteddocs = [];
|
||||
var storedincookie = ["1","2","3"];
|
||||
|
||||
setCookie("cookiecontent",storedincookie,30); //set "user_email" cookie, expires in 30 days
|
||||
var cookiecontent=getCookie("cookiecontent");//the list in the cookie
|
||||
|
||||
$(document.body).on("click", "input[type='checkbox']", function() {
|
||||
|
||||
var self=$(this);
|
||||
if(self.is(":checked")){
|
||||
theid = self.attr("id");
|
||||
alert("checkbox id ="+theid +"is checked ");
|
||||
listofselecteddocs.push(theid);
|
||||
alert(listofselecteddocs.length);
|
||||
// push to cookie
|
||||
$.cookie("cookiecontent", $.cookie('cookiecontent') + '&' + theid);
|
||||
alert(cookiecontent);
|
||||
|
||||
// alert(listofselecteddocs.length);
|
||||
}else {
|
||||
theid = self.attr("id");
|
||||
alert("id = "+theid +"is Unchecked ");
|
||||
@ -220,6 +291,7 @@ var flag = true;
|
||||
});
|
||||
|
||||
|
||||
|
||||
//THE SENDING OF THE LIST TO PYTHON ///////////////////
|
||||
|
||||
$("#listoffiles").click(function(){
|
||||
@ -277,17 +349,61 @@ var flag = true;
|
||||
<div class="main">
|
||||
<div class="main-column-left">
|
||||
|
||||
<div id="nav-container">
|
||||
<!-- UP-->
|
||||
<div id="listofpeople">
|
||||
{% for librarian in librarians %}
|
||||
<span class="librarian-names" id={{librarian}}>{{librarian}}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<!-- END UP -->
|
||||
|
||||
<!-- submit data -->
|
||||
<!-- DOWN -->
|
||||
<div id="listoffiles">
|
||||
<div class="file-names-container">
|
||||
<!--librarians-focused-->
|
||||
{% for querylibrarian in urllibrarian %}
|
||||
{% for file in filetoname_dict %}
|
||||
{% for item in file['librarian'] %}
|
||||
{% if item == querylibrarian and urlmethod == []%}
|
||||
{% set show_file = file['debrisname'] %}
|
||||
<span class="file-names" id="{{show_file}}">{{show_file}}</span><br>
|
||||
{% elif item == querylibrarian %}
|
||||
{% for urlmeth in urlmethod %}
|
||||
{% if urlmeth.lower() == file['method'].lower() %}
|
||||
{% set show_file = file['debrisname'] %}
|
||||
<span class="file-names" id="{{show_file}}">{{show_file}}</span><br>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
|
||||
<!--method-focused-->
|
||||
{% for querymethod in urlmethod %}
|
||||
{% for file in filetoname_dict %}
|
||||
{% if querymethod.lower() == file['method'].lower() and urllibrarian==[] %}
|
||||
{% set show_file = file['debrisname'] %}
|
||||
<span class="file-names" id="{{show_file}}">{{show_file}}</span><br>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<!-- END DOWN -->
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- submit data and buttons-->
|
||||
<button id="about">About</button>
|
||||
<a href="/test/" target="_blank"><button id="listoffiles">Print</button></a>
|
||||
<a href="/"><button id="reset">Reset</button></a>
|
||||
<button id="showall">Show All</button>
|
||||
|
||||
|
||||
<!-- ABOUT -->
|
||||
<div id="intro">
|
||||
<div id="closeintro">x</div>
|
||||
<h1>author</h1>
|
||||
@ -355,44 +471,16 @@ var flag = true;
|
||||
|
||||
<p>Please consider our absent studio in these following sonic (add term when we have the sound files).</p>
|
||||
</div>
|
||||
<!-- -->
|
||||
|
||||
<!-- HOW TO -->
|
||||
<div id="howto">
|
||||
<div id="closehowto">x</div>
|
||||
<h1>how to</h1>
|
||||
<p>this text will follow soon</p>
|
||||
</div>
|
||||
<!-- -->
|
||||
|
||||
<br>
|
||||
<div class="file-names-container">
|
||||
<!--librarians-focused-->
|
||||
{% for querylibrarian in urllibrarian %}
|
||||
{% for file in filetoname_dict %}
|
||||
{% for item in file['librarian'] %}
|
||||
{% if item == querylibrarian and urlmethod == []%}
|
||||
{% set show_file = file['debrisname'] %}
|
||||
<span class="file-names" id="{{show_file}}">{{show_file}}</span><br>
|
||||
{% elif item == querylibrarian %}
|
||||
{% for urlmeth in urlmethod %}
|
||||
{% if urlmeth.lower() == file['method'].lower() %}
|
||||
{% set show_file = file['debrisname'] %}
|
||||
<span class="file-names" id="{{show_file}}">{{show_file}}</span><br>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
|
||||
<!--method-focused-->
|
||||
{% for querymethod in urlmethod %}
|
||||
{% for file in filetoname_dict %}
|
||||
{% if querymethod.lower() == file['method'].lower() and urllibrarian==[] %}
|
||||
{% set show_file = file['debrisname'] %}
|
||||
<span class="file-names" id="{{show_file}}">{{show_file}}</span><br>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-column-right">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user