LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

  

Objects ( {{ items.length }} )

    • {{ item.name }}
    • {{ item.user.name }} Updated by {{ item.user.name }}
    • {{ item.date }}

Me playing with a mockup for a searchable collection of objects using angularjs.

CSS
@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;
}
JS
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 (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]);
              }
          }
      };
      

      scope.range = function (start, end) {
          var ret = [];
          if (!end) {
              end = start;
              start = 0;
          }
          for (var i = start; i < end; i++) {
              ret.push(i);
          }
          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');
    
  }]);

Description

This is a mockup for a paginated angularjs object view. It uses unordered lists instead of tables to allow animation, and easier transition to thumbnails.
Term
Mon, 11/27/2017 - 21:28

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv