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

Added responsive css for various resolutions, more work needed

Browse Source
This commit is contained in:
Raelon Masters
2020-06-27 23:30:52 -04:00
parent 83c32d44c2
commit 0e4bb4b5f7
5 changed files with 134 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,18 +1,18 @@
body { body {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
background-color: #FFF; background-color: #676767;
background-image: url(/static/img/bookshelf.jpg);
background-size: cover;
background-repeat: no-repeat;
color: #000; color: #000;
} }
#app { #app {
display: grid; display: grid;
grid-template-areas: "nav" "main"; grid-template-areas: "nav" "main";
background-image: url(/static/img/fractal-bg-dark.png);
background-size: cover;
background-repeat: no-repeat;
/* background-origin: unset; */ /* background-origin: unset; */
grid-row-gap: 20px; margin: 10px auto;
} }
.clear { .clear {
@@ -20,7 +20,6 @@ body {
} }
.app_header { .app_header {
grid-area: app_header;
margin: 0px; margin: 0px;
display: grid; display: grid;
grid-template-areas: "title nav_left_top nav_center_top nav_right_top"; grid-template-areas: "title nav_left_top nav_center_top nav_right_top";
@@ -59,7 +58,7 @@ body {
font-size: 17px; font-size: 17px;
text-align: center; text-align: center;
padding: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;
color: deepskyblue; color: #ffffffc7;
} }
.shadow { .shadow {
@@ -88,8 +87,6 @@ body {
/* grid-template-rows: auto; */ /* grid-template-rows: auto; */
grid-template-areas: "nav_l shelf"; grid-template-areas: "nav_l shelf";
grid-template-columns: min-content auto; grid-template-columns: min-content auto;
background-color: white;
background-image: url(/static/img/fractal-bg-dark.png);
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
@@ -230,7 +227,7 @@ body {
.nav_search { .nav_search {
/* margin: 0px 5px 0px 0px; */ /* margin: 0px 5px 0px 0px; */
/* border-radius: 5px; */ /* border-radius: 5px; */
border: 1px solid deepskyblue; border: 1px solid #ffffffc7;
/* max-height: 17px; */ /* max-height: 17px; */
/* padding: 0px 5px; */ /* padding: 0px 5px; */
/* margin-left: 0px; */ /* margin-left: 0px; */
@@ -264,15 +261,16 @@ body {
display: flex; display: flex;
grid-area: horiz_nav_main; grid-area: horiz_nav_main;
align-items: center; align-items: center;
/* justify-content: center; */ justify-content: center;
padding: 5px 5px 0px 5px; padding: 5px 5px 0px 5px;
min-width: max-content; min-width: max-content;
color: deepskyblue; color: #ffffffc7;
font-size: smaller; font-size: smaller;
} }
#hdr_branding { #hdr_branding {
grid-area: left_col; grid-area: left_col;
display: none;
} }
#hdr_nav_center { #hdr_nav_center {
@@ -283,26 +281,27 @@ body {
#hdr_nav_right { #hdr_nav_right {
grid-area: right_col; grid-area: right_col;
color: deepskyblue; color: #ffffffc7;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.nav_icon { .nav_icon {
font-size: larger; font-size: larger;
color: deepskyblue; color: #ffffffc7;
} }
.input_box { .input_box {
border: 1px solid deepskyblue; border: 1px solid #ffffffc7;
background-color: #f0ffff00; background-color: #0000006e;
color: deepskyblue; color: #ffffffc7;
padding: 0px 5px; padding: 0px 5px;
text-align: center; text-align: center;
font-size: medium;
} }
.ui_btn_w_icon { .ui_btn_w_icon {
background-color: deepskyblue; background-color: #ffffffc7;
/* border-radius: 5px; */ /* border-radius: 5px; */
padding: 0px 5px; padding: 0px 5px;
font-size: small; font-size: small;
@@ -320,28 +319,31 @@ body {
list-style-type: none; list-style-type: none;
display: flex; display: flex;
background-color: #00000045; background-color: #00000045;
padding: 0px 5px 0px 5px; padding: 0px;
margin: 0px auto -1px 0px; margin: 0px auto;
} }
.active_tab { .active_tab {
background-color: deepskyblue; background-color: #ffffffc7 !important;
color: black !important; color: #000000 !important;
border-bottom: 1px solid black !important; border-bottom: 1px solid #000000 !important;
/* border-right: 1px dashed white; */ -webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
} }
.nav_menu_tab { .nav_menu_tab {
min-width: 5vw; min-width: 8vw;
margin: 0px auto; margin: 0px auto;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
padding: 0px 0px 0px 5px; padding: 0px 0px 0px 5px;
font-size: smaller; font-size: medium;
border-bottom: 1px solid; border-bottom: 1px solid;
color: deepskyblue; background-color: #282828;
cursor: pointer; color: #ffffff;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
} }
.search_button { .search_button {
@@ -354,9 +356,7 @@ body {
#shelf_nav { #shelf_nav {
display: grid; display: grid;
grid-template-areas: grid-template-areas: "horiz_nav_hdr" "horiz_nav_main";
"horiz_nav_hdr"
"horiz_nav_main";
grid-area: nav; grid-area: nav;
list-style-type: none; list-style-type: none;
/* background-color: #6767677a; */ /* background-color: #6767677a; */
@@ -366,7 +366,7 @@ body {
padding-inline-start: 0px; padding-inline-start: 0px;
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
/* min-width: 1645px; */ min-width: 1645px;
/* position: fixed; */ /* position: fixed; */
} }
@@ -409,10 +409,13 @@ p {
} }
.shelf_item { .shelf_item {
background-color: #ffffff2e; background-color: #0000006e;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
display: grid; display: grid;
grid-template-columns: 1fr 5fr; grid-template-columns: 1fr 5fr;
grid-template-areas: "thumb details"; grid-template-areas:
"thumb details";
/* grid-template-rows: auto; */ /* grid-template-rows: auto; */
margin: 0 10px 25px 10px; margin: 0 10px 25px 10px;
border: 0px solid #ffffff2e; border: 0px solid #ffffff2e;
@@ -450,9 +453,10 @@ a.book_link {
/* justify-content: center; */ /* justify-content: center; */
align-items: center; align-items: center;
/* text-align: center; */ /* text-align: center; */
font-family: "Ubuntu Mono", monospace; font-family: "Ubuntu", monospace;
font-size: medium; font-size: medium;
padding: 0px 5px 0px; padding: 0px 5px 0px;
margin: 5px 0px 0px 0px;
/* background-color: #676767; */ /* background-color: #676767; */
} }
@@ -460,7 +464,7 @@ a.book_link {
grid-area: book_author; grid-area: book_author;
font-family: serif; font-family: serif;
font-style: oblique; font-style: oblique;
font-size: medium; font-size: small;
padding: 0px 5px 0px; padding: 0px 5px 0px;
margin: 0px 0px 0px 5px; margin: 0px 0px 0px 5px;
} }
@@ -476,7 +480,7 @@ a.book_link {
grid-area: book_tags; grid-area: book_tags;
font-size: small; font-size: small;
padding: 0px 5px 0px; padding: 0px 5px 0px;
color: deepskyblue; color: #ffffffc7;
font-style: italic; font-style: italic;
font-size: xx-small; font-size: xx-small;
margin-bottom: 5px; margin-bottom: 5px;

55
src/interface/static/css/main.scss vendored
View File

@@ -1,9 +1,17 @@
$ui-color-1: deepskyblue; $ui-color-1: #ffffffc7;
$ui-background-img: url(/static/img/fractal-bg-dark.png); $ui-color-2: #282828;
$ui-color-3: #676767;
$ui-font-color-1: #000000;
$ui-font-color-2: #ffffff;
$ui-shelf-item-color: #0000006e;
$ui-background-img: url(/static/img/bookshelf.jpg);
body { body {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
background-color: #FFF; background-color: $ui-color-3;
background-image: $ui-background-img;
background-size: cover;
background-repeat: no-repeat;
color: #000; color: #000;
} }
@@ -12,11 +20,10 @@ body {
grid-template-areas: grid-template-areas:
"nav" "nav"
"main"; "main";
background-image: $ui-background-img; //background-image: $ui-background-img;
background-size: cover;
background-repeat: no-repeat;
/* background-origin: unset; */ /* background-origin: unset; */
grid-row-gap: 20px; // grid-row-gap: 20px;
margin: 10px auto;
} }
.clear { .clear {
@@ -24,7 +31,7 @@ body {
} }
.app_header { .app_header {
grid-area: app_header; //grid-area: a#282828;
margin: 0px; margin: 0px;
display: grid; display: grid;
grid-template-areas: grid-template-areas:
@@ -94,8 +101,8 @@ body {
grid-template-areas: grid-template-areas:
"nav_l shelf"; "nav_l shelf";
grid-template-columns: min-content auto; grid-template-columns: min-content auto;
background-color: white; //background-color: white;
background-image: $ui-background-img; //background-image: $ui-background-img;
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
@@ -289,6 +296,7 @@ body {
} }
#hdr_branding{ #hdr_branding{
grid-area: left_col; grid-area: left_col;
display: none;
} }
#hdr_nav_center{ #hdr_nav_center{
display: flex; display: flex;
@@ -310,10 +318,11 @@ body {
} }
.input_box{ .input_box{
border: 1px solid $ui-color-1; border: 1px solid $ui-color-1;
background-color: #f0ffff00; background-color: $ui-shelf-item-color;
color: $ui-color-1; color: $ui-color-1;
padding: 0px 5px; padding: 0px 5px;
text-align: center; text-align: center;
font-size: medium;
} }
.ui_btn_w_icon{background-color: $ui-color-1;/* border-radius: 5px; */padding: 0px 5px;font-size: small;display: flex;justify-content: center;align-items: center;/* min-width: 55px; */} .ui_btn_w_icon{background-color: $ui-color-1;/* border-radius: 5px; */padding: 0px 5px;font-size: small;display: flex;justify-content: center;align-items: center;/* min-width: 55px; */}
.ui_icon_notxt{ .ui_icon_notxt{
@@ -327,9 +336,11 @@ body {
margin: 0px auto; margin: 0px auto;
} }
.active_tab{ .active_tab{
background-color: $ui-color-1; background-color: $ui-color-1 !important;
color: black !important; color: $ui-font-color-1 !important;
border-bottom: 1px solid black !important; border-bottom: 1px solid $ui-font-color-1 !important;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
} }
.nav_menu_tab{ .nav_menu_tab{
min-width: 8vw; min-width: 8vw;
@@ -338,9 +349,12 @@ body {
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
padding: 0px 0px 0px 5px; padding: 0px 0px 0px 5px;
font-size: smaller; font-size: medium;
border-bottom: 1px solid; border-bottom: 1px solid;
color: $ui-color-1; background-color: $ui-color-2;
color: $ui-font-color-2;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
} }
.search_button{ .search_button{
/* color: aliceblue; */ /* color: aliceblue; */
@@ -406,7 +420,9 @@ p {
} }
.shelf_item { .shelf_item {
background-color: #ffffff2e; background-color: $ui-shelf-item-color;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
display: grid; display: grid;
grid-template-columns: 1fr 5fr; grid-template-columns: 1fr 5fr;
grid-template-areas: grid-template-areas:
@@ -452,16 +468,17 @@ a.book_link {
/* justify-content: center; */ /* justify-content: center; */
align-items: center; align-items: center;
/* text-align: center; */ /* text-align: center; */
font-family: 'Ubuntu Mono', monospace; font-family: 'Ubuntu', monospace;
font-size: medium; font-size: medium;
padding: 0px 5px 0px; padding: 0px 5px 0px;
margin: 5px 0px 0px 0px;
/* background-color: #676767; */ /* background-color: #676767; */
} }
.book_author { .book_author {
grid-area: book_author; grid-area: book_author;
font-family: serif; font-family: serif;
font-style: oblique; font-style: oblique;
font-size: medium; font-size: small;
padding: 0px 5px 0px; padding: 0px 5px 0px;
margin: 0px 0px 0px 5px; margin: 0px 0px 0px 5px;
} }

58
src/interface/static/css/mobile.css vendored
View File

@@ -1,4 +1,38 @@
@media only screen and (max-width: 600px) { @media only screen and (max-width: 1366px) {
#vert-nav{
display: none;
}
.book_description{
font-size: xx-small;
}
#shelf_nav{
min-width: auto;
}
.nav_menu_tab{
font-size: small;
}
.shelf_item{
}
}
@media only screen and (max-width: 1024px) {
#vert-nav{
display: none;
}
.book_description{
font-size: xx-small;
}
#shelf_nav{
min-width: auto;
}
.nav_menu_tab{
font-size: small;
}
.shelf_item{
max-width: min-content;
}
}
@media only screen and (max-width: 400px) {
.vert-nav{ .vert-nav{
list-style: None; list-style: None;
padding: 0px; padding: 0px;
@@ -8,7 +42,7 @@
.vert-nav-item {} .vert-nav-item {}
#vert-nav { #vert-nav {
display: initial; display: none;
list-style: None; list-style: None;
padding: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;
margin: 0px; margin: 0px;
@@ -17,4 +51,24 @@
/* border-right: 1px solid; */ /* border-right: 1px solid; */
background: linear-gradient(to right, #333 51%, #7d7a7aed 181%); background: linear-gradient(to right, #333 51%, #7d7a7aed 181%);
} }
#shelf_nav {
min-width: auto;
}
.shelf_item {
grid-template-areas:
"thumb details";
max-width: initial;
min-width: -webkit-fill-available;
margin: 0px 0px 40px auto;
}
.book_thumb {
max-width: -webkit-fill-available;
}
.app_body{
margin: 0px 50px;
}
#book_shelf{
display: grid;
grid-template-columns: auto auto;
}
} }

BIN
src/interface/static/img/bookshelf.jpg vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 544 KiB

2
src/interface/templates/index.html vendored
View File

@@ -10,7 +10,7 @@
<link type="text/css" rel="stylesheet" href="/static/css/mobile.css" /> <link type="text/css" rel="stylesheet" href="/static/css/mobile.css" />
<link type="text/css" rel="stylesheet" href="/static/css/all-fa.css" /> <link type="text/css" rel="stylesheet" href="/static/css/all-fa.css" />
<title>pyShelf E-Book Server</title> <title>pyShelf E-Book Server</title>
<link href="https://fonts.googleapis.com/css?family=Audiowide&family=Montserrat:wght@300&family=Gruppo&family=Cinzel+Decorative&family=Ubuntu+Mono&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Gruppo&family=Montserrat&family=Ubuntu&display=swap" rel="stylesheet">
<script src="/static/js/jquery-3.4.1.min.js" type="text/javascript"></script> <script src="/static/js/jquery-3.4.1.min.js" type="text/javascript"></script>
<!-- Place this tag in your head or just before your close body tag. --> <!-- Place this tag in your head or just before your close body tag. -->
<script async defer src="https://buttons.github.io/buttons.js"></script> <script async defer src="https://buttons.github.io/buttons.js"></script>