"layout"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/Reklino/pen/KwqwXP?limit=all&page=95&q=form" /> <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/Reklino/munkey-icons/master/munkey.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'> <style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700); .no-select, .grid-toggle, ul.grid.grid-list .grid-head ul li { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } ::-webkit-input-placeholder { color: #5d7592; } :-moz-placeholder { color: #5d7592; } ::-moz-placeholder { color: #5d7592; } :-ms-input-placeholder { color: #5d7592; } .m { font-size: 28px; } body { text-align: center; background: #f9fcfe; color: #38405e; font-size: 16px; font-family: 'Open Sans', sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } header { width: 100%; background: #38405e; padding: 3em 0; color: white; } header h1 { font-weight: 300; font-size: 36px; margin: 0.75em 0; } header h1 span { font-size: 90%; color: #1bbbef; } main { padding: 1.5em 0 0; } footer, main { max-width: 960px; margin: 0 auto; } footer:after, main:after { content: ''; display: block; clear: both; } footer { padding: 2em 0; } footer p { color: #5d7592; font-size: 14px; } .ctrls { margin-bottom: 1em; } .ctrls:after { content: ''; clear: both; display: block; } .filter { float: left; width: 75%; padding-left: 2.5em; } .filter .m { color: #5d7592; position: absolute; margin-left: -1.25em; } .filter input { width: 100%; vertical-align: top; height: 2em; border: none; background: #f9fcfe; font-size: 16px; font-weight: 300; color: #5d7592; outline: none; padding: 0 0.5em; } .grid-toggle { cursor: pointer; float: right; } .grid-toggle a span { color: #5d7592; } .grid-toggle a span:first-child { color: #38405e; margin-right: 12px; } .grid-toggle a.active span:first-child { color: #5d7592; } .grid-toggle a.active span:last-child { color: #38405e; } .btn { text-decoration: none; text-transform: uppercase; font-weight: 600; color: #5d7592; } ul.grid .grid-body ul li span { display: inline-block; line-height: normal; vertical-align: middle; } ul.grid .grid-body ul li span.grid-icon { color: #476283; } ul.grid .grid-body ul li span.grid-title a { font-size: 16px; font-weight: 500; color: #38405e; text-decoration: none; } ul.grid .grid-body ul li span.grid-title a:hover { text-decoration: underline; } ul.grid .grid-body ul li span.grid-usericon { margin-right: 12px; font-size: 0; width: 36px; height: 36px; line-height: 36px; text-align: center; background: #1bbbef; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; } ul.grid .grid-body ul li span.grid-usericon:first-letter { color: white; font-size: 16px; } ul.grid .grid-body ul li span.grid-date, ul.grid .grid-body ul li span.grid-user { color: #5d7592; font-size: 14px; } ul.grid .grid-body ul li span a .m { color: #5d7592; } ul.grid.grid-thumb:after { content: ''; display: block; clear: both; } ul.grid.grid-thumb .grid-head { display: none; } ul.grid.grid-thumb .grid-body { width: 50%; float: left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin-bottom: 2em; } ul.grid.grid-thumb .grid-body:nth-child(even) { padding-right: 1em; } ul.grid.grid-thumb .grid-body:nth-child(odd) { padding-left: 1em; } ul.grid.grid-thumb .grid-body ul { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: white; border: 1px solid #dde8f0; padding: 1em 1.5em .75em; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; float: left; width: 100%; } ul.grid.grid-thumb .grid-body ul:after { content: ''; display: block; clear: both; } ul.grid.grid-thumb .grid-body ul li { position: relative; } ul.grid.grid-thumb .grid-body ul li span.grid-icon { display: block; font-size: 56px; margin: 0 0 12px; } ul.grid.grid-thumb .grid-body ul li span.grid-title { display: block; margin-bottom: 1em; } ul.grid.grid-thumb .grid-body ul li span.grid-user { margin-bottom: 2px; } ul.grid.grid-thumb .grid-body ul li span.grid-user .grid-usericon { position: absolute; left: 0; bottom: -37px; } ul.grid.grid-thumb .grid-body ul li span.grid-date { display: block; } ul.grid.grid-thumb .grid-body ul li span.grid-options { float: right; } ul.grid.grid-list { background: white; border: 1px solid #dde8f0; padding: 0 2em; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } ul.grid.grid-list li.grid-body { border-bottom: 1px solid #dde8f0; } ul.grid.grid-list li.grid-body:last-child, ul.grid.grid-list li.grid-body.last { border-bottom: none; } ul.grid.grid-list .grid-head ul:after { content: ''; display: block; clear: both; } ul.grid.grid-list .grid-head ul li { font-size: 16px; border: none; text-align: left; padding: 2em 0 1em; float: left; } ul.grid.grid-list .grid-head ul li a { cursor: pointer; color: #1bbbef; font-weight: 600; } ul.grid.grid-list .grid-head ul li a:hover { text-decoration: underline; } ul.grid.grid-list .grid-body ul:after { content: ''; display: block; clear: both; } ul.grid.grid-list .grid-body ul li { border: none; text-align: left; height: 5em; line-height: 5em; padding: 0; float: left; } ul.grid.grid-list .grid-body ul li:first-child { text-align: left; width: 40%; } ul.grid.grid-list .grid-body ul li:nth-child(2) { width: 30%; } ul.grid.grid-list .grid-body ul li:nth-child(3) { width: 15%; } ul.grid.grid-list .grid-body ul li:last-child { text-align: right; width: 15%; } ul.grid.grid-list .grid-body ul li span.grid-icon { margin-right: 0.5em; } ul.grid.grid-list .grid-body ul li span.grid-username { width: 100px; } li.clear-fix { display: block; clear: both; } li.pagination { padding: 1em 0 2em; } li.pagination p { font-size: 14px; } li.pagination ul.pager { margin: 2em 0; } li.pagination ul.pager li { display: inline; } li.pagination ul.pager li:first-child { margin-right: 1em; } li.pagination ul.pager li a { color: #1bbbef; text-decoration: none; padding: 0.5em 1.5em; border: 1px solid #1bbbef; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; } .animate-repeat { list-style: none; box-sizing: border-box; overflow: hidden; } .animate-repeat.ng-move, .animate-repeat.ng-enter, .animate-repeat.ng-leave { -webkit-transition: all ease-in-out 0.4s; transition: all ease-in-out 0.4s; } .animate-repeat.ng-leave.ng-leave-active, .animate-repeat.ng-move, .animate-repeat.ng-enter { opacity: 0; } .animate-repeat.ng-leave, .animate-repeat.ng-move.ng-move-active, .animate-repeat.ng-enter.ng-enter-active { opacity: 1; } .grid-thumb .animate-repeat.ng-move, .grid-thumb .animate-repeat.ng-enter, .grid-thumb .animate-repeat.ng-leave { -webkit-transition: none; transition: none; } .grid-list .animate-repeat { line-height: 5em; } .grid-list .animate-repeat.ng-leave.ng-leave-active, .grid-list .animate-repeat.ng-move, .grid-list .animate-repeat.ng-enter { height: 0; } .grid-list .animate-repeat.ng-leave, .grid-list .animate-repeat.ng-move.ng-move-active, .grid-list .animate-repeat.ng-enter.ng-enter-active { height: 5em; } </style></head><body> <body ng-app="app" ng-controller="main"> <header> <h1>Objects <span>( {{ items.length }} )</span></h1> </header> <main> <div class="ctrls"> <div class="filter"> <span class="m m-search"></span> <input type="text" ng-model="searchies" ng-change="onQueryChange(searchies)" class="form-control" placeholder="Filter"> </div> <div class="grid-toggle"> <a ng-click="gridToggle = !gridToggle" ng-class="{ 'active' : gridToggle }"> <span class="m m-squares"></span> <span class="m m-form"></span> </a> </div> </div> <div class="container"> <ul class="grid" ng-class="{ 'grid-list' : gridToggle, 'grid-thumb' : !gridToggle }"> <li class="grid-head"> <ul> <li style="width:40%"><a ng-click="sort_by('name')">Name</a></li> <li style="width:30%"><a ng-click="sort_by('user.name')">User</a></li> <li style="width:15%"><a ng-click="sort_by('date')">Date</a></li> <li style="width:15%"></li> </ul> </li> <li class="grid-body animate-repeat" ng-repeat="item in pagedItems[currentPage - 1] | orderBy:sortingOrder:reverse" ng-class="{'last':$last}"> <ul> <li> <span class="grid-icon m" ng-class="item.icon"></span> <span class="grid-title"><a href="#">{{ item.name }}</a></span> </li> <li> <span class="grid-user"> <span class="grid-usericon" ng-style="{ 'background' : item.user.color }">{{ item.user.name }}</span> <span class="grid-username">Updated by {{ item.user.name }}</span> </span> </li> <li> <span class="grid-date">{{ item.date }}</span> </li> <li> <span class="grid-options"><a href="#"><span class="m m-ellipsis"></span></a></span> </li> </ul> </li> <li class="clear-fix"></li> <li class="pagination"> <pager total-items="totalItems" items-per-page="itemsPerPage" ng-model="currentPage" max-size="maxSize" ng-change="pageChanged()"></pager> <p ng-if="itemsPerPage * currentPage < totalItems"> Showing {{ itemsPerPage * currentPage - itemsPerPage + 1 }} - {{ itemsPerPage * currentPage }} of {{ totalItems }} total items </p> <p ng-if="itemsPerPage * currentPage >= totalItems"> Showing {{ itemsPerPage * currentPage - itemsPerPage + 1 }} - {{ totalItems }} of {{ totalItems }} total items </p> </li> </ul> </div> </main> <footer> <p>Me playing with a mockup for a searchable collection of objects using angularjs.</p> </footer> </body> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js'></script><script src='//ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular-animate.js'></script> <script >angular.module('app', ['ui.bootstrap', 'ngAnimate']) .factory('sortable', ['$filter', '$rootScope', function($filter, $rootScope){ return function (scope, data, itemsPerPage, initSortingOrder) { scope.sortingOrder = initSortingOrder; scope.reverse = false; scope.filteredItems = []; scope.groupedItems = []; scope.itemsPerPage = itemsPerPage; scope.pagedItems = []; scope.currentPage = 1; scope.items = data; scope.maxSize = 5; var searchMatch = function (haystack, needle) { if (!needle) { return true; } return haystack.toLowerCase().indexOf(needle.toLowerCase()) !== -1; }; // init the filtered items scope.search = function () { scope.filteredItems = $filter('filter')(scope.items, $rootScope.query); // take care of the sorting order if (scope.sortingOrder !== '') { scope.filteredItems = $filter('orderBy')(scope.filteredItems, scope.sortingOrder, scope.reverse); } scope.currentPage = 1; // now group by pages scope.groupToPages(); // reset the total items for the pagination buttons scope.totalItems = scope.filteredItems.length; }; // calculate page in place scope.groupToPages = function () { scope.pagedItems = []; for (var i = 0; i < scope.filteredItems.length; i++) {if (window.CP.shouldStopExecution(1)){break;} if (i % scope.itemsPerPage === 0) { scope.pagedItems[Math.floor(i / scope.itemsPerPage)] = [ scope.filteredItems[i] ]; } else { scope.pagedItems[Math.floor(i / scope.itemsPerPage)].push(scope.filteredItems[i]); } } window.CP.exitedLoop(1); }; scope.range = function (start, end) { var ret = []; if (!end) { end = start; start = 0; } for (var i = start; i < end; i++) {if (window.CP.shouldStopExecution(2)){break;} ret.push(i); } window.CP.exitedLoop(2); return ret; }; // functions have been described process the data for display scope.search(); // change sorting order scope.sort_by = function(newSortingOrder) { if (scope.sortingOrder == newSortingOrder) scope.reverse = !scope.reverse; scope.sortingOrder = newSortingOrder; // call search again to make sort affect whole query scope.search(); }; scope.sort_by(initSortingOrder); scope.totalItems = scope.filteredItems.length; } }]) .controller('main', [ '$scope', '$rootScope', 'sortable', function($scope, $rootScope, sortable) { $rootScope.query = ''; $scope.gridToggle = true; $scope.onQueryChange = function(val){ $rootScope.query = val; $scope.search(); }; var items = [ { 'icon' : 'm-munkey', 'name' : 'A Munkey Page', 'date' : 'Yesterday at Noon', 'user' : { 'name' : 'Munkey', 'color' : '#07D5E5'} }, { 'icon' : 'm-bug', 'name' : 'Mobile Splash Page', 'date' : 'Yesterday at 4:30pm', 'user' : { 'name' : 'Munkey', 'color' : '#07D5E5'} }, { 'icon' : 'm-photo', 'name' : 'Some Other Site', 'date' : 'Today at 3:35am', 'user' : { 'name' : 'Someone', 'color' : '#456183'} }, { 'icon' : 'm-desktop', 'name' : 'Jerry\'s Blog', 'date' : 'Thursday at 7:15pm', 'user' : { 'name' : 'Jerry', 'color' : '#4677A7'} }, { 'icon' : 'm-form', 'name' : 'Ape\'s Capture Form', 'date' : 'Today at Noon', 'user' : { 'name' : 'Ape', 'color' : '#09ABC5'} }, { 'icon' : 'm-phone', 'name' : 'Some Mobile Site', 'date' : 'Thursday at 1:27pm', 'user' : { 'name' : 'Someone', 'color' : '#456183'} }, { 'icon' : 'm-bell', 'name' : 'Fish\'s Wordpress Site', 'date' : 'Yesterday at Noon', 'user' : { 'name' : 'Fish', 'color' : '#1CB7BB'} }, { 'icon' : 'm-group', 'name' : 'Kitty Kat Kapture Form', 'date' : 'Wednesday at 7:15pm', 'user' : { 'name' : 'Kitty', 'color' : '#1D9D9D'} } ]; sortable($scope, items, 6, 'updated_at'); }]); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: