Skip to content

Instantly share code, notes, and snippets.

@JBreit

JBreit/bbrmko.markdown

Created November 25, 2016 02:25
Show Gist options
  • Save JBreit/a7ce3764db95ba53f9736a961a952835 to your computer and use it in GitHub Desktop.
Save JBreit/a7ce3764db95ba53f9736a961a952835 to your computer and use it in GitHub Desktop.
Download ZIP
bBRMKo
Raw
index.html
<body ng-app="app" ng-controller="top" ng-cloak>
<script type="text/ng-template" id="/style.html">
<section class="lattice-row-padding">
<div class="lattice-col-4">
<label>Label</label>
<input class="input--txt" type="text" />
</div>
</section>
</script>
<svg style="position: absolute; width: 0; height: 0;" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-calendar" viewBox="0 0 1024 1024">
<title>calendar</title>
<path class="path1" d="M320 384h128v128h-128zM512 384h128v128h-128zM704 384h128v128h-128zM128 768h128v128h-128zM320 768h128v128h-128zM512 768h128v128h-128zM320 576h128v128h-128zM512 576h128v128h-128zM704 576h128v128h-128zM128 576h128v128h-128zM832 0v64h-128v-64h-448v64h-128v-64h-128v1024h960v-1024h-128zM896 960h-832v-704h832v704z"></path>
</symbol>
<symbol id="icon-home2" viewBox="0 0 1024 1024">
<title>home2</title>
<path class="path1" d="M512 32l-512 512 96 96 96-96v416h256v-192h128v192h256v-416l96 96 96-96-512-512zM512 448c-35.346 0-64-28.654-64-64s28.654-64 64-64c35.346 0 64 28.654 64 64s-28.654 64-64 64z"></path>
</symbol>
<symbol id="icon-file-text" viewBox="0 0 1024 1024">
<title>file-text</title>
<path class="path1" d="M864 0h-768c-52.8 0-96 43.2-96 96v832c0 52.8 43.2 96 96 96h768c52.8 0 96-43.2 96-96v-832c0-52.8-43.2-96-96-96zM832 896h-704v-768h704v768zM256 448h448v64h-448zM256 576h448v64h-448zM256 704h448v64h-448zM256 320h448v64h-448z"></path>
</symbol>
<symbol id="icon-user" viewBox="0 0 1024 1024">
<title>user</title>
<path class="path1" d="M576 706.612v-52.78c70.498-39.728 128-138.772 128-237.832 0-159.058 0-288-192-288s-192 128.942-192 288c0 99.060 57.502 198.104 128 237.832v52.78c-217.102 17.748-384 124.42-384 253.388h896c0-128.968-166.898-235.64-384-253.388z"></path>
</symbol>
<symbol id="icon-cog" viewBox="0 0 1024 1024">
<title>cog</title>
<path class="path1" d="M933.79 610.25c-53.726-93.054-21.416-212.304 72.152-266.488l-100.626-174.292c-28.75 16.854-62.176 26.518-97.846 26.518-107.536 0-194.708-87.746-194.708-195.99h-201.258c0.266 33.41-8.074 67.282-25.958 98.252-53.724 93.056-173.156 124.702-266.862 70.758l-100.624 174.292c28.97 16.472 54.050 40.588 71.886 71.478 53.638 92.908 21.512 211.92-71.708 266.224l100.626 174.292c28.65-16.696 61.916-26.254 97.4-26.254 107.196 0 194.144 87.192 194.7 194.958h201.254c-0.086-33.074 8.272-66.57 25.966-97.218 53.636-92.906 172.776-124.594 266.414-71.012l100.626-174.29c-28.78-16.466-53.692-40.498-71.434-71.228zM512 719.332c-114.508 0-207.336-92.824-207.336-207.334 0-114.508 92.826-207.334 207.336-207.334 114.508 0 207.332 92.826 207.332 207.334-0.002 114.51-92.824 207.334-207.332 207.334z"></path>
</symbol>
<symbol id="icon-question" viewBox="0 0 1024 1024">
<title>question</title>
<path class="path1" d="M448 704h128v128h-128zM704 256c35.346 0 64 28.654 64 64v192l-192 128h-128v-64l192-128v-64h-320v-128h384zM512 96c-111.118 0-215.584 43.272-294.156 121.844s-121.844 183.038-121.844 294.156c0 111.118 43.272 215.584 121.844 294.156s183.038 121.844 294.156 121.844c111.118 0 215.584-43.272 294.156-121.844s121.844-183.038 121.844-294.156c0-111.118-43.272-215.584-121.844-294.156s-183.038-121.844-294.156-121.844zM512 0v0c282.77 0 512 229.23 512 512s-229.23 512-512 512c-282.77 0-512-229.23-512-512s229.23-512 512-512z"></path>
</symbol>
</defs>
</svg>
<div class="view">
<nav class="nav__primary">
<ul>
<li class="nav" ui-sref="{{nav.defaultState}}" ng-click="updatePrimaryView(nav)" ng-repeat="nav in navs">
<svg class="icon icon--nav">
<use xlink:href="{{nav.svgLink}}"></use>
</svg>
<span>{{nav.label}}</span>
</li>
</ul>
<div class="version">0.1.4</div>
</nav>
<div class="content__wrapper">
<header>
<div class="app-logo"></div>
<div class="app-name">{{appName}}</div>
<div class="app-context"></div>
<div class="username">
<div class="logout"><a href="#">logout</a></div>
<div>{{currentUser.name}}</div>
</div>
<svg class="icon icon--user">
<use xlink:href="#icon-user"></use>
</svg>
</header>
<nav class="nav__secondary">
<ul class="nav__secondary--horizontal">
<li ui-sref="{{nav.state}}" ng-repeat="nav in subNavs">{{nav.label}}</li>
</ul>
<div class="nav__secondary--drawer">
<input type="checkbox" class="check" id="checked">
<label class="menu-btn" for="checked">
<span class="bar top"></span>
<span class="bar middle"></span>
<span class="bar bottom"></span>
<span class="menu-btn__text">MENU</span>
</label>
<div class="list">
<ul>
<li class="nav" ng-repeat="nav in subNavs" ui-sref="{{nav.state}}">{{nav.label}}</li>
</ul>
</div>
</div>
</nav>
<div ui-view class="content"></div>
<div class="footer">
<span>
<a href="http://codepen.io/bradyhullopeter/pen/BjWRQR" target="_blank">see light theme</a>
</span>
<span>created by brady hullopeter</span>
<span class="saved-msg" ng-if="lastSaved">Last refreshed {{lastSaved}}</span>
</div>
</div>
</div>
</body>
Raw
script.js
angular.module('app', ['ui.router', 'ngAnimate'])
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/app/home/home1");
$stateProvider
.state('app', {
abstract: true,
url: '/app',
template: '<div ui-view></div>',
controller: 'top'
})
/* VIEWS ROUTING */
.state('app.home', {
abstract: true,
url: '/home',
template: '<div ui-view></div>'
})
.state('app.home.home1', {
url: "/home1",
template: "hello, i'm home 1 {{smiley}}"
})
/* /app/home/home2 */
.state('app.home.home2', {
url: "/home2",
template: "hello, i'm home 2 {{smiley}}"
})
/* SCHEDULING ROUTING*/
.state('app.scheduling', {
url: '/scheduling',
templateUrl: "/style.html"
})
/* REPORTING ROUTING*/
.state('app.reporting', {
abstract: true,
url: '/reporting',
template: '<div ui-view></div>'
})
.state('app.reporting.reporting1', {
url: "/reporting1",
template: "hello, i'm reporting 1 {{smiley}}"
})
.state('app.reporting.reporting2', {
url: "/reporting2",
template: "hello, i'm reporting 2 {{smiley}}"
})
/* ADMIN ROUTING*/
.state('app.admin', {
abstract: true,
url: '/admin',
template: '<div ui-view></div>'
})
.state('app.admin.admin1', {
url: "/admin1",
template: "hello, i'm admin 1 {{smiley}}"
})
.state('app.admin.admin2', {
url: "/admin2",
template: "hello, i'm admin 2 {{smiley}}"
})
})
.run(function ($rootScope, $log) {
$rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
$('.content__wrapper').find('[ui-sref="' + toState.name +'"]').addClass('selected');
$('.content__wrapper').find('[ui-sref="' + fromState.name +'"]').removeClass('selected');
});
})
.controller('top', function($scope, $interval, $log) {
$scope.smiley = ':)';
$scope.primaryNav = 'HOME';
$scope.appName = 'Super Clever App Name';
$scope.currentUser = {
name: 'User, Name'
}
$scope.navs = [{
defaultState:'app.home.home1',
svgLink: '#icon-home2',
label: 'Home',
subNavs: [{
state: 'app.home.home1',
label: 'home 1'
}, {
state: 'app.home.home2',
label: 'home 2'
}]
}, {
defaultState:'app.scheduling',
svgLink: '#icon-calendar',
label: 'Scheduling'
}, {
defaultState:'app.reporting.reporting1',
svgLink: '#icon-file-text',
label: 'Reporting',
subNavs: [{
state: 'app.reporting.reporting1',
label: 'reporting 1'
}, {
state: 'app.reporting.reporting2',
label: 'reporting 2'
}]
}, {
defaultState:'app.admin.admin1',
svgLink: '#icon-cog',
label: 'System Administration',
subNavs: [{
state: 'app.admin.admin1',
label: 'admin 1'
}, {
state: 'app.admin.admin2',
label: 'admin 2'
}]
}, {
defaultState: '#',
svgLink: '#icon-question',
label: 'Support'
}];
var now = moment();
$(document).on('click', '.nav', function() {
$(this).siblings('.selected').removeClass('selected');
$(this).addClass('selected');
});
$scope.updatePrimaryView = function(nav) {
$scope.subNavs = nav.subNavs;
};
var updateLastSaved = (function fn() {
$scope.lastSaved = moment(now).fromNow();
return fn;
})();
$('.nav').first().addClass('selected');
$scope.updatePrimaryView($scope.navs[0]);
$interval(updateLastSaved, 10000);
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-touch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment.min.js"></script>
Raw
style.scss
html,
body {
height: 100%;
padding: 0;
margin: 0;
font-family: 'Open Sans', sans-serif;
background-color: #333;
overflow: hidden;
}
a {
color: #e74c3c;
padding: 0 2em;
&:visited {
color: #e74c3c;
}
}
ul {
margin: 0;
padding: 0;
}
.version {
font-size: .75em;
flex-shrink: 0;
text-align: center;
color: #fefefe;
padding: .55em 0;
}
.view {
display: flex;
height: 100%;
.nav {
&__primary {
width: 50px;
background-color: #333;
transition: all .4s ease;
display: flex;
flex-direction: column;
ul {
flex-grow: 1;
}
&:hover {
width: 225px;
}
li {
white-space: nowrap;
overflow: hidden;
color: #fff;
padding: 10px;
cursor: pointer;
transition: transform .3s ease;
&:hover {
background-color: #2990cf;
transform: translate(7px,0);
color: #eee;
svg {
color: #eee;
}
}
&:first-child {
margin-top: 5px;
}
> span {
position: relative;
padding-left: 5px;
top: -.5em;
}
}
.selected {
color: #2990cf;
svg {
color: #2990cf;
}
}
}
&__secondary {
color: #eee;
&--drawer {
position: absolute;
right: 0;
height: calc(100vh - 93px);
.list {
display: flex;
flex-direction: column;
height: 100%;
width: 0;
padding-top: 5em;
background-color: #2990cf;
transition: all .3s ease;
transition-delay: .3s;
border-bottom-left-radius: 0vh;
border-top-left-radius: 0vh;
ul {
flex: 1;
}
li {
list-style: none;
color: #fefefe;
text-align: right;
padding: .45em 1em;
cursor: pointer;
white-space: nowrap;
transition: transform .3s ease;
border-right: 5px solid transparent;
&:hover {
background-color: #2172a4;
transform: translate(-7px,0);
}
&:last-child {
margin-bottom: .5em;
}
}
.selected {
border-right: 5px solid #fefefe;
background-color: #2172a4;
}
}
}
&--horizontal {
display: flex;
border-bottom: 1px solid #333;
li {
list-style: none;
padding: .4em 1em 0;
border-bottom: 2px solid transparent;
cursor: pointer;
&:after {
display: block;
position: relative;
content: '';
border-bottom: 4px solid #fff;
top: 4px;
width: 0;
transition: all 0.4s;
margin-right: auto;
margin-left: auto;
}
&:hover {
border-bottom-color: #ccc;
&:after {
width: 100%;
border-color: #2990cf;
}
}
}
.selected {
border-bottom: 2px solid #2990cf;
}
}
}
}
}
header {
display: flex;
flex-shrink: 0;
justify-content: flex-end;
border-bottom: 1px solid #222;
box-shadow: 3px 1px 3px rgba(0,0,0,1), 2px 1px 2px rgba(0,0,0,1);
.logout {
align-self: flex-end;
a {
padding: 0;
width: 100%;
font-size: .8em;
}
}
.username, .app-name {
align-self: flex-end;
padding-bottom: 10px;
color: #eee;
}
.app-name {
padding-left: 1em;
font-size: 1.1em;
}
.app-logo {
}
.username {
display: flex;
flex-direction: column;
}
.app-context {
flex: 1;
color: #eee;
}
}
.content {
flex: 1;
padding: 1em;
color: #eee;
&__wrapper {
flex: 1;
display: flex;
flex-direction: column;
background-color: #222;
}
}
.icon {
display: inline-block;
width: 1em;
height: 1em;
fill: currentColor;
&--user {
font-size: 60px;
color: #eee;
padding: 10px;
}
&--nav {
font-size: 2em;
color: #eee;
}
}
.footer {
background-color: #333;
padding: .3em 1em;
color: #eee;
box-shadow: 3px -3px 3px rgba(0,0,0,0.1), 2px -1px 2px rgba(0,0,0,0.2);
display: flex;
justify-content: flex-end;
flex-shrink: 0;
.saved-msg {
padding-left: 2rem;
}
}
.check {
display: none;
}
.check:checked ~ .list {
width: 250px;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
.menu-btn {
position: absolute;
top: 2em;
right: 2em;
display: block;
width: 40px;
height: 40px;
font-size: 10px;
text-align: center;
cursor: pointer;
z-index: 3;
}
.bar {
position: absolute;
top: 0;
left: 0;
display: block;
width: 40px;
height: 3px;
background: #eee;
transition: all .5s;
transform-origin: left top;
}
.bar.middle {
top: 15px;
opacity: 1;
}
.bar.bottom {
top: 30px;
transform-origin: left bottom;
}
.menu-btn__text {
position: absolute;
bottom: -15px;
left: 0;
right: 0;
margin: auto;
transition: all .5s;
display: block;
visibility: visible;
opacity: 1;
}
.menu-btn:hover .bar {
background: #999;
}
.menu-btn:hover .menu-btn__text {
color: #999;
}
/* checked */
.check:checked ~ .drawer-menu {
transition-delay: .3s;
transform: none;
opacity: 1;
z-index: 2;
}
.check:checked ~ .menu-btn {
&:hover {
.menu-btn__text {
color: #fefefe;
}
}
.bar.top {
width: 57px;
transform: rotate(45deg);
background-color: #fefefe;
}
.bar.middle {
transform: translate(100px, 0);
}
.bar.bottom {
width: 57px;
top: 40px;
transform: rotate(-45deg);
background-color: #fefefe;
}
.menu-btn__text {
transform-origin: left bottom;
transform: rotate(-90deg) translate(12px, -10px);
}
}
@media screen and (min-width: 1200px) {
.nav__secondary--drawer {
display: none !important;
}
}
@media screen and (max-width: 1199px) {
.nav__secondary--horizontal {
display: none !important;
}
}
[ui-view].ng-enter, [ui-view].ng-leave {
position: absolute;
/*transition: all 246ms ease;*/
}
[ui-view].ng-enter {
opacity: 0;
}
[ui-view].ng-enter-active {
opacity: 1;
}
[ui-view].ng-leave {
opacity: 1;
}
[ui-view].ng-leave-active {
opacity: 0;
}
.input {
width: 100%;
background-color: #eee;
border: 1px solid #000;
border-radius: 3px;
padding: .25em;
box-shadow: inset 0 10px 15px -10px rgba(0,0,0,0.45);
color: #222;
transition: all .3s ease;
font-weight: 400;
&--txt {
@extend .input;
}
}
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
Raw
styles
<link href="http://codepen.io/bradyhullopeter/pen/jWEKKK" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment