Menu icon Foundation

My Posts



My Comments

Mauricio Ruiz commented on Mauricio Ruiz's post about 3 years

 
In fact that question on stackoverflow made me think of my own, if foundation for apps had something similar. But from what i understan F4A uses UI-Router and doesn't use $routeprovider, i'm right?
In fact already solved, using UI-Router can call $state.current and $state.includes(),
here is an example of my code
<div class="grid-frame vertical">
<!-- Header -->
<div id="header" class="title-bar" ng-hide="$state.includes('home')"><!-- hide when template name: home -->
<span class="title center">Title</span>
<span class="left" zf-if="small only">
<a href="#" zf-toggle="navBar"><img src="assets/img/hamburger.svg" class="hamburger"></a>
</span>
</div>

<!-- Content -->
<div class="grid-block">
<!-- Sidebar Nav -->
<div class="sidebar" ng-class="{'show-sidebar': $state.$current.data.vars.showSidebar}"><!-- add class when showSidebar: true, is in the template -->
<ul class="menu-bar dark vertical">
<li><a ui-sref="portfolio">Portfolio</a></li>
<li><a ui-sref="about">About</a></li>
<li><a ui-sref="contact">Contact</a></li>
</ul>
</div>
<!-- uiView -->
<div class="mainContent grid-block">
<div ui-view></div>
</div>
</div>
</div>
EXPLANATION: what i needed was to hide the header only in the home, then use ng-hide="$state.incluides ('home')".
The sidebar also needed to hide but several subpages as portfolio/project01, portfolio/project02 etc., and $state.includes() did not work for me. Instead I used $state.$current.data.vars.showSidebar, and in each template i added showSidebar and defined true or false.
---
name: project01
url: portfolio/project01

showSidebar: false <!-- true or false -->

<h1>This Is My Project 01 Template</h1>
in the end i only add css transitions between .sidebar and .show-sidebar classes
.sidebar{
width: 100px;
height: 100vh;
tranform: translate3d(-100px, 0, 0)
transition: tranform 1s ease;
}

.sidebar.show-sidebar {
transform: translate3d(0, 0, 0);
}
 

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Mauricio Ruiz's post about 3 years

 
In fact that question on stackoverflow made me think of my own, if foundation for apps had something similar. But from what i understan F4A uses UI-Router and doesn't use $routeprovider, i'm right?
In fact already solved, using UI-Router can call $state.current and $state.includes(),
here is an example of my code
<div class="grid-frame vertical">
<!-- Header -->
<div id="header" class="title-bar" ng-hide="$state.includes('home')"><!-- hide when template name: home -->
<span class="title center">Title</span>
<span class="left" zf-if="small only">
<a href="#" zf-toggle="navBar"><img src="assets/img/hamburger.svg" class="hamburger"></a>
</span>
</div>

<!-- Content -->
<div class="grid-block">
<!-- Sidebar Nav -->
<div class="sidebar" ng-class="{'show-sidebar': $state.$current.data.vars.showSidebar}"><!-- add class when showSidebar: true, is in the template -->
<ul class="menu-bar dark vertical">
<li><a ui-sref="portfolio">Portfolio</a></li>
<li><a ui-sref="about">About</a></li>
<li><a ui-sref="contact">Contact</a></li>
</ul>
</div>
<!-- uiView -->
<div class="mainContent grid-block">
<div ui-view></div>
</div>
</div>
</div>
EXPLANATION: what i needed was to hide the header only in the home, then use ng-hide="$state.incluides ('home')".
The sidebar also needed to hide but several subpages as portfolio/project01, portfolio/project02 etc., and $state.includes() did not work for me. Instead I used $state.$current.data.vars.showSidebar, and in each template i added showSidebar and defined true or false.
---
name: project01
url: portfolio/project01

showSidebar: false <!-- true or false -->

<h1>This Is My Project 01 Template</h1>
in the end i only add css transitions between .sidebar and .show-sidebar classes
.sidebar{
width: 100px;
height: 100vh;
tranform: translate3d(-100px, 0, 0)
transition: tranform 1s ease;
}

.sidebar.show-sidebar {
transform: translate3d(0, 0, 0);
}
 

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content