mirror of
https://github.com/th3r00t/pyShelf.git
synced 2026-04-28 01:59:35 -04:00
Reformed horiz_nav_bar, added pop-over layer with preliminary styling,
moved login inputs to hidden pop-over layer, added onclick for btn_login
This commit is contained in:
Raelon Masters
58
src/interface/static/css/main.css
vendored
58
src/interface/static/css/main.css
vendored
@@ -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
53
src/interface/static/css/main.scss
vendored
@@ -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
3
src/interface/static/js/pyshelf_ux.js
vendored
@@ -71,4 +71,7 @@ $(document).ready(function(){
|
||||
$(this).attr("value", p_string);
|
||||
}
|
||||
});
|
||||
$('#btn_login').on('click', function(){
|
||||
$('#hdr_nav_login').toggle();
|
||||
});
|
||||
});
|
||||
|
||||
57
src/interface/templates/index.html
vendored
57
src/interface/templates/index.html
vendored
@@ -22,6 +22,14 @@
|
||||
|
||||
<body>
|
||||
<input type="hidden" id="_set" name="_set" value="{{ Set }}" />
|
||||
<div id="pop_over_0">
|
||||
<!-- Login Form -->
|
||||
<div class="hdr_nav" id="hdr_nav_login">
|
||||
<input id="username" class="nav_login input_box noborder" type="text" size="8" value="Username">
|
||||
<input id="password" class="nav_login input_box noborder" type="text" size="8" value="Password">
|
||||
</div>
|
||||
<!-- End Login Form -->
|
||||
</div>
|
||||
<div id="app">
|
||||
<ul id="shelf_nav">
|
||||
<div id="horiz_nav_hdr">
|
||||
@@ -34,52 +42,18 @@
|
||||
<li class="nav_menu_tab"><i class="fas fa-layer-group"></i> Collections</li>
|
||||
<li class="nav_menu_tab"><i class="fas fa-star"></i> Favorites</li>
|
||||
<li class="nav_menu_tab"><i class="fas fa-bug"></i> Bug report</li>
|
||||
<li class="nav_menu_tab"> <i class="fa fa-user-circle" aria-hidden="true"></i> Login</li>
|
||||
<li class="nav_menu_tab" id="btn_login"> <i class="fa fa-user-circle" aria-hidden="true"></i> Login</li>
|
||||
</div>
|
||||
</div>
|
||||
<div id="horiz_nav_main">
|
||||
<!--<i class="fas fa-chevron-left nav_icon prev_page" onclick="window.location.href = '/prev_page/{{ Set }}'"></i>-->
|
||||
{{ BookStats }} books | <script type="text/javascript">document.write(collections.length)</script> collections
|
||||
<div class="horiz_nav_stats">
|
||||
{{ BookStats }} books | <script type="text/javascript">document.write(collections.length)</script> collections
|
||||
</div>
|
||||
<!--<i class="fas fa-chevron-right nav_icon next_page" onclick="window.location.href = '/next_page/{{ Set }}'"></i>-->
|
||||
<div class="hdr_nav" id="hdr_nav_right">
|
||||
<input id="username" class="nav_login input_box" type="text" size="8" value="Username">
|
||||
<input id="password" class="nav_login input_box" type="text" size="8" value="Password">
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
<div class="app_body">
|
||||
<div class="nav_l">
|
||||
<p class="popover"></p>
|
||||
<ul id="vert-nav">
|
||||
<li class="vert-nav-item nav_l_hdr">
|
||||
<h1 class="app_hdr">pyShelf {{Version}}</h1>
|
||||
</li>
|
||||
<li class="vert-nav-item nav_l_hdr">
|
||||
<input class="nav_search" type="text" size="10" value="">
|
||||
</li>
|
||||
<li class="vert-nav-item nav_l_hdr btn" id="btn_collections">Collections</li>
|
||||
<ul class="hidden vert-nav collections">
|
||||
{% for row in LeftNavCollections %}
|
||||
<a href="{% url 'show_collection' _collection=row.link _colset=Set%}" class="nav_link" alt="{{row.link}}">
|
||||
<li class="nav_l_{{row.class}} btn">
|
||||
{{ row.string }}
|
||||
</li>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<ul class="vert-nav dynnav">
|
||||
{% if LeftNavMenu0 %}
|
||||
{% for row in LeftNavMenu0 %}
|
||||
<a href="{{ row.link }}"><li class="vert-nav-item nav_l_hdr btn">{{ row.title }}</li></a>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</ul>
|
||||
<li class="vert-nav-item nav_l_hdr btn" id="btn_pyshelf">pyshelf.com</li>
|
||||
<a href="irc://freenode.net/pyshelf" class="web_footer_link"><li class="vert-nav-item nav_l_hdr" id="btn_discord">discord</li></a>
|
||||
<li class="vert-nav-item nav_l_hdr btn" id="btn_github">github</li>
|
||||
<li class="vert-nav-item nav_l_hdr btn" id="btn_irc">irc</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="shelf">
|
||||
<div class="shelf_contents">
|
||||
<ul id="book_shelf">
|
||||
@@ -104,25 +78,18 @@
|
||||
{% endif %}
|
||||
<li class="book_tags">Tags: {{ book.tags }}</li>
|
||||
<li class="book_controls">
|
||||
|
||||
<span class="favorite-button controls">
|
||||
<a href="{% url 'favorite' pk=book.pk %}" class="book_link"><i class="fas fa-thumbs-up icon"></i></a>
|
||||
</span>
|
||||
|
||||
|
||||
<span class="download-button controls">
|
||||
<a href="{% url 'download' pk=book.pk %}" class="book_link"><i class="fas fa-book icon"></i></a>
|
||||
</span>
|
||||
|
||||
|
||||
<span class="share-button controls">
|
||||
<a href="{% url 'share' pk=book.pk %}" class="book_link"><i class="fas fa-share icon"></i></a>
|
||||
</span>
|
||||
|
||||
<span class="info-button controls">
|
||||
<a href="{% url 'info' pk=book.pk %}" class="book_link"><i class="fas fa-info icon"></i></a>
|
||||
</span>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
Reference in New Issue
Block a user