mirror of https://github.com/ascribe/wp-theme
prototype stateful login/signup nav, ref #45
This commit is contained in:
parent
94712bf4de
commit
47d3f75dbd
|
|
@ -0,0 +1,57 @@
|
|||
|
||||
var SessionState = (function(w, d, $) {
|
||||
|
||||
'use strict'
|
||||
|
||||
var app, _private, _config
|
||||
|
||||
_config = {
|
||||
url: 'https://www.ascribe.io/api/users/',
|
||||
appLinksDefault: $('.app-links--default'),
|
||||
appLinksActive: $('.app-links--active')
|
||||
}
|
||||
|
||||
_private = {
|
||||
getCookie: function(name) {
|
||||
var parts = document.cookie.split(';');
|
||||
|
||||
for(var i = 0; i < parts.length; i++) {
|
||||
if(parts[i].indexOf(name + '=') > -1) {
|
||||
return parts[i].split('=').pop();
|
||||
}
|
||||
}
|
||||
},
|
||||
checkSession: function() {
|
||||
$.ajax({
|
||||
method: 'GET',
|
||||
url: _config.url,
|
||||
headers: {
|
||||
'csrf-token': _private.getCookie('csrftoken2') // be sure to NOT forget the `2` here!!!
|
||||
}
|
||||
}).done(function() {
|
||||
|
||||
_config.appLinksDefault.addClass('hide');
|
||||
_config.appLinksActive.removeClass('hide');
|
||||
|
||||
console.log('active and valid session');
|
||||
|
||||
}).fail(function() {
|
||||
|
||||
_config.appLinksDefault.addClass('hide');
|
||||
_config.appLinksActive.removeClass('hide');
|
||||
|
||||
console.log('no session active');
|
||||
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
app = {
|
||||
init: function() {
|
||||
_private.checkSession()
|
||||
}
|
||||
}
|
||||
|
||||
return app
|
||||
|
||||
})(window, document, jQuery)
|
||||
|
|
@ -1,6 +1,10 @@
|
|||
|
||||
//=include _sessionstate.js
|
||||
|
||||
$(document).ready(function(){
|
||||
|
||||
SessionState.init();
|
||||
|
||||
slider();
|
||||
featuredFAQ();
|
||||
marketplaces();
|
||||
|
|
|
|||
|
|
@ -176,6 +176,8 @@
|
|||
color: @pink;
|
||||
}
|
||||
}
|
||||
|
||||
nav { display: inline-block; }
|
||||
}
|
||||
|
||||
.mobile-nav {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,14 @@
|
|||
|
||||
|
||||
.hide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.show {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
|
||||
// CLEARFIX
|
||||
// Apply .clearfix to a non-floated container element with floated elements in it
|
||||
// to ensure the container has a height. Use .no-clearfix to reset a clearfix
|
||||
|
|
|
|||
|
|
@ -29,68 +29,6 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
nav {
|
||||
float: left;
|
||||
margin-top: 9px;
|
||||
.tourNavText;
|
||||
|
||||
ul {
|
||||
&:extend(.list-unstyled all);
|
||||
padding: 0 35px;
|
||||
position: absolute;
|
||||
|
||||
&.active {
|
||||
li {
|
||||
display: block;
|
||||
&.current-menu-item {
|
||||
a {
|
||||
&:after {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
display: none;
|
||||
text-align: right;
|
||||
|
||||
&.current-menu-item {
|
||||
display: block;
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
font-size: 25px;
|
||||
|
||||
&:before {
|
||||
content: 'for ';
|
||||
display: inline-block;
|
||||
margin-right: 6px;
|
||||
}
|
||||
&:after {
|
||||
content: '';
|
||||
background-image: url(../../img/arrow.png);
|
||||
background-repeat: no-repeat;
|
||||
width: 10px;
|
||||
height: 8px;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: -25px;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
a {
|
||||
width: 100%;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
.description {
|
||||
clear: both;
|
||||
width: 80%;
|
||||
|
|
@ -157,3 +95,67 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.tour-switcher {
|
||||
float: left;
|
||||
margin-top: 9px;
|
||||
.tourNavText;
|
||||
|
||||
ul {
|
||||
&:extend(.list-unstyled all);
|
||||
padding: 0 35px;
|
||||
position: absolute;
|
||||
|
||||
&.active {
|
||||
li {
|
||||
display: block;
|
||||
&.current-menu-item {
|
||||
a {
|
||||
&:after {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
display: none;
|
||||
text-align: right;
|
||||
|
||||
&.current-menu-item {
|
||||
display: block;
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
font-size: 25px;
|
||||
|
||||
&:before {
|
||||
content: 'for ';
|
||||
display: inline-block;
|
||||
margin-right: 6px;
|
||||
}
|
||||
&:after {
|
||||
content: '';
|
||||
background-image: url(../../img/arrow.png);
|
||||
background-repeat: no-repeat;
|
||||
width: 10px;
|
||||
height: 8px;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: -25px;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
a {
|
||||
width: 100%;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,9 @@ require 'controller/init.php';
|
|||
<a href="<?php echo get_bloginfo('wpurl');?>"><img src="<?php echo WPTHEME_TEMPLATE_URL; ?>/images/logo/logo-white.png" class="logo phone-and-up"></a>
|
||||
<a href="<?php echo get_bloginfo('wpurl');?>"><img src="<?php echo WPTHEME_TEMPLATE_URL; ?>/images/logo/ascribeicon-white.svg" class="logo phone-only"></a>
|
||||
<div class="app-links">
|
||||
<a href="<?php echo $signInLink; ?>">Log In</a> / <a href="<?php echo $signUpLink; ?>">Sign Up</a>
|
||||
<nav class="app-links--default"><a href="<?php echo $signInLink; ?>">Log In</a> / <a href="<?php echo $signUpLink; ?>">Sign Up</a></nav>
|
||||
<nav class="app-links--active hide"><a href="/app">Web App</a></nav>
|
||||
|
||||
<img src="<?php echo WPTHEME_TEMPLATE_URL; ?>/images/svg/hamburger.svg" class="phone-only hamburger">
|
||||
</div>
|
||||
<nav class="tour-switcher"><?php wp_nav_menu( array(
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ require 'controller/init.php';
|
|||
<a href="<?php echo get_bloginfo('wpurl');?>">
|
||||
<img
|
||||
src="<?php echo WPTHEME_TEMPLATE_URL; ?>/images/logo/logo-black.png"
|
||||
srcset="<?php echo WPTHEME_TEMPLATE_URL; ?>/images/logo/logo-black.png 1x, <?php echo WPTHEME_TEMPLATE_URL; ?>/images/logo/logo-black@2x.png 2x"
|
||||
srcset="<?php echo WPTHEME_TEMPLATE_URL; ?>/images/logo/logo-black.png 1x, <?php echo WPTHEME_TEMPLATE_URL; ?>/images/logo/logo-black@2x.png 2x"
|
||||
alt="ascribe logo"
|
||||
class="logo phone-and-up">
|
||||
</a>
|
||||
|
|
@ -26,7 +26,9 @@ require 'controller/init.php';
|
|||
class="logo phone-only">
|
||||
</a>
|
||||
<div class="app-links">
|
||||
<a href="<?php echo $signInLink; ?>">Log In</a> / <a href="<?php echo $signUpLink; ?>">Sign Up</a>
|
||||
|
||||
<nav class="app-links--default"><a href="<?php echo $signInLink; ?>">Log In</a> / <a href="<?php echo $signUpLink; ?>">Sign Up</a></nav>
|
||||
<nav class="app-links--active hide"><a href="/app">Web App</a></nav>
|
||||
|
||||
<button class="hamburger phone-only">
|
||||
<span></span>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,8 @@ $controller = new Controller();
|
|||
</a>
|
||||
|
||||
<div class="app-links">
|
||||
<a href="<?php echo $signInLink; ?>">Log In</a> / <a href="<?php echo $signUpLink; ?>">Sign Up</a>
|
||||
<nav class="app-links--default"><a href="<?php echo $signInLink; ?>">Log In</a> / <a href="<?php echo $signUpLink; ?>">Sign Up</a></nav>
|
||||
<nav class="app-links--active hide"><a href="/app">Web App</a></nav>
|
||||
|
||||
<button class="hamburger phone-only">
|
||||
<span></span>
|
||||
|
|
|
|||
Loading…
Reference in New Issue