th3r00t/pyShelf
1
0
Fork 0
mirror of https://github.com/th3r00t/pyShelf.git synced 2026-04-28 01:59:35 -04:00
Code Issues Packages Projects Releases Wiki Activity

Massive UI changes, and updates to the collection system

Browse Source
This commit is contained in:
Raelon Masters
2020-03-22 01:05:42 -04:00
parent 72e54ab001
commit 53e9a1d222
10 changed files with 183 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/interface/static/css/main.css vendored
View File

@@ -12,7 +12,7 @@ body {
"app_body"
"app_footer";
grid-template-rows: auto auto auto;
max-height: 100%;
/*max-height: 100%;*/
}
.clear {
@@ -84,23 +84,61 @@ body {
grid-area: app_body;
grid-template-rows: auto;
grid-template-areas: "nav_l shelf";
grid-template-columns: 13vw auto;
justify-items: center;
grid-template-columns: 15vw 85vw;
background-color: dimgray;
}
.nav_l {
display: grid;
grid-area: nav_l;
font-family: 'Gruppo', cursive;
font-size: 20px;
max-height: 500px;
overflow-y: scroll;
padding: 0px 10px;
}
.nav_l_hdr {}
.popover{
display: none;
z-index: 100;
background-color: #000;
/*min-width: 200px;*/
min-height: 30px;
position: fixed;
text-align: center;
font-weight: bold;
align-items: center;
justify-content:center;
justify-items: center;
padding: 0px 10px;
}
.nav_l_hdr {
text-align: center;
padding: 5px;
background-color: #292f35;
border-bottom: 2px solid #000;
}
.nav_l_0 {background-color: #2b2b2b; font-size: 15px; padding: 5px;}
.nav_l_0 {
background-color: #2b2b2b;
padding: 5px;
text-align: center;
border-bottom: 1px solid #000;
}
.nav_l_1 {font-size: 15px; padding: 5px;}
.nav_l_1 {
padding: 5px;
text-align: center;
border-bottom: 1px solid #000;
}
.nav_link {}
#vert-nav {list-style: None; padding: 0px;}
#vert-nav {
list-style: None;
padding: 0px;
margin: 10px 0px;
border-left: 5px solid #292f35;
border-right: 5px solid #292f35;
}
.vert-nav-item {}
@@ -208,6 +246,8 @@ body {
margin: 0px 0px;
padding: 10px 0px 10px;
list-style-type: none;
overflow-y: scroll;
overflow-x: hidden;
}
.shelf_contents {}
@@ -234,7 +274,7 @@ p {
#book_shelf {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
grid-template-columns: 21% 21% 21% 21%;
list-style-type: none;
font-family: 'Audiowide', cursive;
font-size: 25px;
@@ -247,14 +287,14 @@ p {
display: grid;
background-color: burlywood;
margin: 0 10px 10px 10px;
max-width: 23vw;
max-height: 75vh;
max-width: 20vw;
max-height: 70vh;
text-align: center;
}
.book_thumb {
width: 23vw;
height: 50vh;
width: 20vw;
height: 70vh;
}
a.book_link {

65
src/interface/static/js/pyshelf_ux.js vendored
View File

@@ -1,15 +1,54 @@
$(document).ready(function(){
$(".search_submit").click(function(){
var query = $('.nav_search').val();
console.log(query);
window.location.href = '/search/'+query;
});
$('.nav_search').on('keypress', function (e) {
if(e.which === 13){
$(this).attr("disabled", "disabled");
var query = $('.nav_search').val();
window.location.href = '/search/'+query;
$(this).removeAttr("disabled");
}
});
function customlog(outstream) {
/* Gather my variables and output them */
for (var i = 0; i < outstream.length; i++){
console.log(">> "+outstream[i]);
};
};
/* Initialize ui variables */
var outstream = []; // put customlog messages here
var win_height = window.innerHeight; // Get the displays height
var win_width = window.innwerWidth; // Get the displays width
var scr_height = window.outerHeight;
var scr_width = window.outerWidth;
var hdr_height = $('.app_hdr').height(); // Get our header height
var ftr_height = $('.app_footer').height(); // Get our footer height
var nav_width = $('.nav_l').width(); // Get the width of our nav items
var cmp_height = window.screen.availHeight;
var max_height = win_height - (hdr_height + ftr_height) - (scr_height - win_height); // Set our available height
customlog([cmp_height]);
$(".search_submit").click(function(){
var query = $('.nav_search').val();
console.log(query);
window.location.href = '/search/'+query;
});
$('.nav_search').on('keypress', function (e) {
if(e.which === 13){
$(this).attr("disabled", "disabled");
var query = $('.nav_search').val();
window.location.href = '/search/'+query;
$(this).removeAttr("disabled");
}
});
$('#app').css("height", max_height);
$('.nav_l').css("max-height", max_height);
$('div.shelf').css("max-height", max_height);
$('.nav_link').on('mouseover', function (e){
var popover_str = $(this).attr('alt');
x = $(this).offset().left
y = $(this).offset().top
$('.popover').html(popover_str);
$('.popover').css('left', x+nav_width);
$('.popover').css('top', y);
$('.popover').css('display','flex');
});
$('.nav_link').on('mouseout', function (e){
var popover_str = $(this).attr('alt');
x = $(this).offset().left
y = $(this).offset().top
$('.popover').html(popover_str);
$('.popover').css('left', x);
$('.popover').css('top', y);
$('.popover').css('display','none');
});
})