Toggle Display & TextContent
When a user is signed in on Liberty Hawk, the search page has a history panel that shows the user’s last 10 searches. There are two history panels used (each for a different view
width). One panel is visible only in view width ≥ 769px. The other panel, panel-history-small, is only visible in view width ≤ 768px. The display of these panels is updated at the breakpoints using CSS. panel-history-small can have the display of its body contents (history) toggled. By default, history is not displayed. A link in the panel-heading allows users to show and hide it.
Responding to Scroll & Viewport
As mentioned in Responsive Design, at breakpoint ≤ 767px, the Devise forms on the landing page are displayed at the top of the view, and their display is toggled with buttons.
The toggle feature required several considerations.
Displaying the forms and hiding the toggle bottons at breakpoint ≥ 768px
Hiding the forms and displaying the toggle buttons at breakpoint ≤ 767px
Showing a form when the user is linking to the landing page
1. & 2. Displaying the forms according to breakpoint
HTML for buttons (to toggle forms) & CSS to update their display
3. Display form when linking to landing page
The password recovery and resend confirmation pages have links to the log in and sign up forms. These links lead back to the landing page. I wanted the respective forms to show when each link is clicked. This is achieved by creating a global variable called showTab, and setting the value of the variable in an onclick event for each link. Using $('#tab2show').show() or $('#tab1show').show() in the onclick does not work, as the event needs to fire after the page load. Instead of using a method for triggering the event after the page load, showTab is set, and used to show the corresponding tab-content (sign in or sign up form).
showTab variable declaration & conditional to show element
link with onclick to set showTab value
When a user leaves the landing page, after showTab has been set from a log in or sign up link, I do not want the form to remain displayed when they go back to the landing page. There were several was to do this, but I just chose to set showTab=0 in an onclick event in links that direct to the landing page.