Browse Source

layout and css

master
zeroth 4 years ago
parent
commit
c0102f5bf8
  1. 93
      static/css/main.css
  2. 154
      templates/layout.html

93
static/css/main.css

@ -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%;
}

154
templates/layout.html

@ -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…
Cancel
Save