Sidenav based on screen resize #164
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
|
psvenk
force-pushed
the
screensize-hamburger
branch
3 times, most recently
from
153e24b to
98f1a1d
Compare
psvenk
force-pushed
the
screensize-hamburger
branch
4 times, most recently
from
19f253c to
567e467
Compare
|
Closed
|
@andOrlando Looks good. The only remaining blocker is that there is no visual indication of the currently selected tab (as there is in the status quo). We also thought that it would be nice to have an animation when the sidenav changes size, but this can be addressed in a separate pull request (#197). |
psvenk
reviewed
Dec 13, 2020
psvenk
requested changes
Dec 13, 2020
There was a problem hiding this comment.
Here are some code style changes. In general, a couple more things:
- Be more consistent in your usage of single vs. double quotes. The convention for this codebase is to use double quotes (at least in the frontend), so it would be good to go with that.
- It would be good to avoid jQuery for new code, but my view is that this code is already written and so it is not as much of a priority here.
psvenk
force-pushed
the
screensize-hamburger
branch
3 times, most recently
from
a0cb9aa to
1c1415c
Compare
Adds the hamburger and stuff inside of it. Adds media tags to all the tab buttons. Currently the "Current GPA" dropdown only displays in the sidenav menu
just moves the one gpa dropdown in and out of the navbar, removes the gpa dropdown in the navbar, and updates the order of the elements in the .tab also does some visual changes like the positioning of the dropdown arrow in the sidenav (sorry psvenk for not doing multiple commits lol)
updates the inaccessible color to make it contrast a little less updates the dropdown items so that they actually fit correctly. There's a small padding issue with this if someone feels like fixing this makes everything 270px and float right in the sidenav so it can have a consistant animation makes the activated item thing for the side nav a little different as to better fit with its theme also, this one is super important, makes it so that whenever you open one dropdown menu it closes all others becuase otherwise the sidenav freaks out when you have multiple open at once, also this is just a nice ux change
psvenk
force-pushed
the
screensize-hamburger
branch
from
1c1415c to
95c55e0
Compare
makes it look a little better
removes hardcoded media queries, instead initializes the resize things later in home.js. Side note: I now love jQuery
*facepalm*
makes it less of a mess in terms of readability, separating ui changes into functions (like switch_hamburger) improves performance by only updating ui when it changes from one bracket of screensizes to the next improves css a little for consistancy (in ui not css, the css is a mess) and some nicer colors.
.... I have nothing to say
Since it only detected changes in state 1 apart from eachother it couldn't detect it from 0 to 2 or 2 to 0, which was an oversight on my part. Fixed now
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
ugly, but apparently consistant with the codebase. Also changes ==s into ===s
changes lets to consts and vars to lets
psvenk
force-pushed
the
screensize-hamburger
branch
from
95c55e0 to
e9271f2
Compare
- removes "close" text and separates close button from rest of sidenav - moves hamburger over to the far left - makes hamburger switch exempt - fixes bug with moving elements in and out of sidenav
- Fixes a weird bug where it would reorder the sidenav sometimes - Makes the right items not duplicated in the sidenav - Seriously cleans up the code for switch_right_items - Cleans up the code a little for switch_left_items
- makes it so that the width of the tableData dropdown is 210px normally and 270px in the sidenav - removes the last-child thing which was a bandaid for a problem that was fixed in an earlier commit - darkens basically all sidenav colors - makes x a little smaller - makes colors variables - gives x button's background color a variable in the style attribute - makes sidenav-overlay have a normal pointer
It still doesn't work in the sidenav, but I think I prefer it that way
Co-authored-by: psvenk <45520974+psvenk@users.noreply.github.com>
I accidentally deleted some code during code review; this restores that code.
psvenk
force-pushed
the
screensize-hamburger
branch
from
e9271f2 to
1fdc66b
Compare
also changes some of the variable names which were unused outside of sidenav to be more sidenav oriented (all the lightgrays were only used in sidenav)
psvenk
approved these changes
Dec 16, 2020
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #152
Adds a hamburger with different contents based on screensize. Also comes with a couple css changes for dropdown-related things. For more specific details, see commits
Importantly, this doesn't work dynamically so should we add tabs or change tab sizes, we're going to reconfigure the exact screensizes in both the css and the javascriptfixed that