Skip to content

Commit

Permalink
puts items on the left directly into the sidenav
Browse files Browse the repository at this point in the history 
instead of having dupilcates it hides/shows in the sidenav, it just removes displaces them altogether.

also:
- fixes overcomplicated jquerys
- improves a couple comments
- removes tabs in sidenav
- removes weird unecessary init if tree
  • Loading branch information
@andOrlando @psvenk
andOrlando authored and psvenk committed Nov 25, 2020
1 parent f3da1b5 commit fdfabf3
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 41 deletions.
12 changes: 3 additions & 9 deletions public/home.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,18 +66,12 @@ <h4 id="title">Aspine</h4>

<!-- SIDENAV STUFF -->
<div id="sidenav" class="sidenav">
<button onclick="closeSideNav()" class="tablinks">
<!-- switch-exempt makes the switch out of navbar pass over this -->
<button onclick="closeSideNav()" class="tablinks switch-exempt">
<i class="fa fa-times" style="position: absolute; top: 20px; left: 20px;"></i>
Close
</button>
<button class="tablinks left-item hide" onclick="openTab(event, 'grades');closeSideNav()">Grades</button>
<button class="tablinks left-item hide" onclick="openTab(event, 'recent');closeSideNav()">Recent Activity</button>
<button class="tablinks left-item hide" onclick="openTab(event, 'schedule');closeSideNav()">Schedule</button>
<button class="tablinks left-item hide" onclick="openTab(event, 'clock');closeSideNav()">Clock</button>
<!--<button class="tablinks" onclick="openTab(event, 'calendar-tab');closeSideNav()">Calendar</button>-->
<button class="tablinks left-item hide" onclick="openTab(event, 'reports');closeSideNav()" id="reports_open">Reports</button>
<button class="tablinks left-item hide" onclick="openTab(event, 'information')" id="information_open">Info</button>
<div class="GPA tableData_custom-select custom-select", id="navbar_tableData_div" style="width: 270px;">
<div class="GPA tableData_custom-select custom-select tablinks-right", id="navbar_tableData_div" style="width: 270px;">
<select id="tableData_select">
<option value="0">Current Year</option>
<option value="0">Current Year</option>
Expand Down
49 changes: 17 additions & 32 deletions public/js/extraFunctions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -664,45 +664,49 @@ let initialize_resize_hamburger = function() {
let left_width = 44.25 + $('#logout_button').outerWidth()

//gets all non-tablinks-right elements and adds their width to total_width and also left_width
$('.tab > *:not([class*="tablinks-right"])').outerWidth(function(i, w) {total_width += w; left_width += w;});
$('.tab .tablinks:not(.tablinks-right)').outerWidth(function(i, w) {total_width += w; left_width += w;});

//gets all tablinks-right elements and adds their width to total_width
$('.tab > *[class*="tablinks-right"]').outerWidth(function(i, w) {total_width += w;})
$('.tab .tablinks-right').outerWidth(function(i, w) {total_width += w;})

let switch_left_items = function() {
//checks if left items are in sidenav
const in_sidenav = $('.tab > *:not([class*="tablinks-right"])').first().hasClass("hide")
const in_sidenav = $('.tab .tablinks:not(.tablinks-right)').length == 0

if (in_sidenav) {
//hides left-items in sidenav and shows left-items in tab
$('#sidenav > *[class*="left-item"]').addClass("hide")
$('.tab > *:not([class*="tablinks-right"])').removeClass("hide")
//moves items from sidenav to tab
$('#sidenav .tablinks:not(.tablinks-right, .switch-exempt)').detach().appendTo($(".tab"));
} else {
//shows left-items in sidenav and hides left-items in tab
$('#sidenav > *[class*="left-item"]').removeClass("hide")
$('.tab > *:not([class*="tablinks-right"])').addClass("hide")
//moves items from tab to sidenav
$('.tab .tablinks:not(.tablinks-right, .switch-exempt)').detach().appendTo($("#sidenav"));
//puts all the tablinks-right things below the non-tablinks-right things
const children = $('#sidenav .tablinks-right');
for (i=0; i<children.length; i++) {
$('#sidenav').append(children[i]);
}
}
}

let switch_right_items = function() {
//checks if right-items (more specifically buttons) are hidden
const in_sidenav = $('.tab > button[class*="tablinks-right"]:not(#hamburger_button, #logout_button)').first().hasClass("hide")

const in_sidenav = $('.tab .gpa_custom-select').length == 0

if (in_sidenav) {
//takes gpa_custom-select out of the sidebar and puts it in the tab,
$(".gpa_custom-select").detach().appendTo($(".tab"));

//reorders right items becuase the gpa_custom-select is now the last item in the list
//puts it at the third position from the top
const children = $('.tab > *[class*="tablinks-right"]')
const children = $('.tab .tablinks-right')
for (i=0; i<children.length; i++) {
if (i <= 1) $(".tab").append(children[i]);
if (i == 2) $(".tab").append(children[children.length-1]);
else $(".tab").append(children[i-1]);
}

//shows other tablinks-right items
$('.tab > *[class*="tablinks-right"]:not(#logout_button, #hamburger_button, gpa_custom-select)').removeClass("hide")
$('.tab .tablinks-right:not(#logout_button, #hamburger_button, .gpa_custom-select)').removeClass("hide")

//also closes the sidebar
closeSideNav();
Expand All @@ -712,7 +716,7 @@ let initialize_resize_hamburger = function() {
$(".gpa_custom-select").detach().appendTo($("#gpa_sidenav_container"));
//hides all the right items that need to be hidden
//doesn't hide the gpa_custom-select because it needs to move it
$('.tab > *[class*="tablinks-right"]:not(#logout_button, #hamburger_button, gpa_custom-select)').addClass("hide")
$('.tab .tablinks-right:not(#logout_button, #hamburger_button, .gpa_custom-select)').addClass("hide")
}
}

Expand Down Expand Up @@ -785,25 +789,6 @@ let initialize_resize_hamburger = function() {

});

//initially sets stuff
if ($(".tab").width() <= left_width) {
//shows left-items in sidenav
$('#sidenav > *[class*="left-item"]').removeClass("hide")
//hides left-items in tab
$('.tab > *:not([class*="tablinks-right"])').addClass("hide")
}
if ($(".tab").width() <= total_width) {
//moves gpa_custom-select
$(".gpa_custom-select").detach().appendTo($("#sidenav"));
//shows hamburger
$("#hamburger_button").removeClass("hide")
//hides gpa type button
$('.tab > button[class*="tablinks-right"]:not(#logout_button, #hamburger_button)').addClass("hide")
//hides tableData_custom-select
$('.tab > .tableData_custom-select').addClass("hide")
}


}


Expand Down

0 comments on commit fdfabf3

Please sign in to comment.