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

Reformed horiz_nav_bar, added pop-over layer with preliminary styling,

Browse Source 
moved login inputs to hidden pop-over layer, added onclick for btn_login
This commit is contained in:
Raelon Masters
2020-06-29 13:41:42 -04:00
parent ff1344c53d
commit 9070a3a558
4 changed files with 84 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,6 +8,16 @@ body {
color: #000;
}
#pop_over_0 {
display: none;
position: fixed;
top: 0px;
min-width: 100%;
min-height: 100%;
background-color: #000000;
z-index: 100;
}
#app {
display: grid;
grid-template-areas: "nav" "main";
@@ -252,22 +262,22 @@ body {
#horiz_nav_hdr {
display: grid;
grid-area: horiz_nav_hdr;
grid-template-areas:
"left_col middle_col";
grid-template-areas: "left_col middle_col right_col";
grid-template-columns: max-content auto max-content;
padding: 0px 5px 0px;
padding: 0px;
}
#horiz_nav_main {
display: grid;
grid-template-columns: auto auto;
grid-template-areas: "horiz_nav_left horiz_nav_right";
grid-template-columns: 7fr auto;
background-color: #282828;
grid-area: horiz_nav_main;
align-items: center;
justify-content: center;
padding: 5px 5px 0px 5px;
padding: 1px 0px 1px 5px;
min-width: max-content;
color: #fefefeb3;
font-size: smaller;
border-bottom: 1px solid #fefefeb3;
}
#hdr_branding {
@@ -278,16 +288,21 @@ body {
#hdr_nav_center {
display: flex;
grid-area: middle_col;
margin: 0px 0px 0px 10px;
margin: 0px;
}
#hdr_nav_right {
grid-area: right_col;
#hdr_nav_login {
display: none;
grid-template-columns: auto;
grid-area: horiz_nav_right;
color: #fefefeb3;
display: flex;
align-items: center;
}
.horiz_nav_stats {
display: grid;
}
.nav_icon {
font-size: larger;
color: #fefefeb3;
@@ -302,6 +317,10 @@ body {
font-size: medium;
}
.noborder {
border: 0px !important;
}
.ui_btn_w_icon {
background-color: #fefefeb3;
/* border-radius: 5px; */
@@ -321,7 +340,8 @@ body {
display: flex;
background-color: #00000045;
padding: 0px;
margin: 0px auto 0px 5px;
margin: 0px auto 0px 1px;
cursor: pointer;
}
.active_tab {
@@ -333,8 +353,8 @@ body {
}
.nav_menu_tab {
min-width: 8vw;
margin: 0px auto;
min-width: 5vw;
margin: 0px 1px 0px 1px;
display: flex;
align-items: center;
justify-content: flex-start;
@@ -360,14 +380,10 @@ body {
grid-template-areas: "horiz_nav_hdr" "horiz_nav_main";
grid-area: nav;
list-style-type: none;
/* background-color: #6767677a; */
margin: 0px auto;
padding: 5px 0px 5px 0px;
/* position: fixed; */
background-color: #000000;
margin: 0px auto 10px auto;
padding: 0px;
padding-inline-start: 0px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
/* position: fixed; */
}
.shelf_contents {

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

@@ -14,7 +14,15 @@ body {
background-repeat: no-repeat;
color: #000;
}
#pop_over_0{
display: none;
position: fixed;
top: 0px;
min-width: 100%;
min-height: 100%;
background-color: #000000;
z-index: 100;
}
#app {
display: grid;
grid-template-areas:
@@ -282,17 +290,19 @@ body {
grid-template-areas:
"left_col middle_col right_col";
grid-template-columns: max-content auto max-content;
padding: 0px 5px 0px;
padding: 0px;
}
#horiz_nav_main{
display: flex;
display: grid;
grid-template-areas: "horiz_nav_left horiz_nav_right";
grid-template-columns: 7fr auto;
background-color: $ui-color-2;
grid-area: horiz_nav_main;
align-items: center;
justify-content: center;
padding: 5px 5px 0px 5px;
padding: 1px 0px 1px 5px;
min-width: max-content;
color: $ui-color-1;
font-size: smaller;
border-bottom: 1px solid $ui-color-1;
}
#hdr_branding{
grid-area: left_col;
@@ -301,14 +311,18 @@ body {
#hdr_nav_center{
display: flex;
grid-area: middle_col;
margin: 0px 0px 0px 10px;
margin: 0px;
}
#hdr_nav_right{
grid-area: right_col;
#hdr_nav_login{
display: none;
grid-template-columns: auto;
grid-area: horiz_nav_right;
color: $ui-color-1;
display: flex;
align-items: center;
}
.horiz_nav_stats{
display: grid;
}
#username{}
#password{}
.nav_login{}
@@ -324,6 +338,7 @@ body {
text-align: center;
font-size: medium;
}
.noborder {border: 0px !important;}
.ui_btn_w_icon{
background-color: $ui-color-1;
/* border-radius: 5px; */
@@ -340,7 +355,8 @@ body {
display: flex;
background-color: #00000045;
padding: 0px;
margin: 0px auto 0px 5px;
margin: 0px auto 0px 1px;
cursor: pointer;
}
.active_tab{
background-color: $ui-color-2 !important;
@@ -350,8 +366,8 @@ body {
backdrop-filter: blur(10px);
}
.nav_menu_tab{
min-width: 8vw;
margin: 0px auto;
min-width: 5vw;
margin: 0px 1px 0px 1px;
display: flex;
align-items: center;
justify-content: flex-start;
@@ -377,15 +393,10 @@ body {
"horiz_nav_main";
grid-area: nav;
list-style-type: none;
/* background-color: #6767677a; */
margin: 0px auto;
padding: 5px 0px 5px 0px;
/* position: fixed; */
background-color: #000000;
margin: 0px auto 10px auto;
padding: 0px;
padding-inline-start: 0px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
// min-width: 1645px;
/* position: fixed; */
}
.shelf_contents {
grid-area: shelf_main;

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

@@ -71,4 +71,7 @@ $(document).ready(function(){
$(this).attr("value", p_string);
}
});
$('#btn_login').on('click', function(){
$('#hdr_nav_login').toggle();
});
});