Commit e29ee8c3fc3fc27a6c429fe825e47da406523565
1 parent
86c67be6
containers style updates
Showing
1 changed file
with
23 additions
and
15 deletions
controllets/generic-cards-container-controllet/generic-cards-container-controllet.html
| @@ -64,7 +64,7 @@ Example: | @@ -64,7 +64,7 @@ Example: | ||
| 64 | top: 8px; | 64 | top: 8px; |
| 65 | } | 65 | } |
| 66 | 66 | ||
| 67 | - .card-grid | 67 | + .card_grid |
| 68 | { | 68 | { |
| 69 | width: 100%; | 69 | width: 100%; |
| 70 | z-index: 0; | 70 | z-index: 0; |
| @@ -72,39 +72,41 @@ Example: | @@ -72,39 +72,41 @@ Example: | ||
| 72 | padding: 5%; | 72 | padding: 5%; |
| 73 | } | 73 | } |
| 74 | 74 | ||
| 75 | - .card-grid:after { | 75 | + .card_grid:after { |
| 76 | content: ''; | 76 | content: ''; |
| 77 | display: block; | 77 | display: block; |
| 78 | clear: both; | 78 | clear: both; |
| 79 | } | 79 | } |
| 80 | 80 | ||
| 81 | ::content .card{ | 81 | ::content .card{ |
| 82 | - /* ms-transform: scale(0.80); | ||
| 83 | - -moz-transform: scale(0.80); | ||
| 84 | - -o-transform: scale(0.80); | ||
| 85 | - -webkit-transform: scale(0.80); | ||
| 86 | - transform: scale(0.80); | ||
| 87 | - -ms-transform-origin: 0 0; | ||
| 88 | - -moz-transform-origin: 0 0; | ||
| 89 | - -o-transform-origin: 0 0; | ||
| 90 | - -webkit-transform-origin: 0 0; | ||
| 91 | - transform-origin: 0 0;*/ | ||
| 92 | margin: 10px; | 82 | margin: 10px; |
| 93 | float: left; | 83 | float: left; |
| 94 | } | 84 | } |
| 95 | 85 | ||
| 96 | - ::content .card-grid .fullscreen{ | 86 | + ::content .card_grid .fullscreen{ |
| 97 | display: none; | 87 | display: none; |
| 98 | } | 88 | } |
| 99 | 89 | ||
| 100 | - ::content .card-grid .delete{ | 90 | + ::content .card_grid .delete{ |
| 101 | display: none; | 91 | display: none; |
| 102 | } | 92 | } |
| 103 | 93 | ||
| 94 | + ::content .empty{ | ||
| 95 | + position: absolute; | ||
| 96 | + right: 0; | ||
| 97 | + left: 27%; | ||
| 98 | + top: 40%; | ||
| 99 | + margin-right: auto; | ||
| 100 | + margin-left: auto; | ||
| 101 | + font-family: 'Roboto', sans-serif; | ||
| 102 | + font-weight: 500; | ||
| 103 | + font-size: large; | ||
| 104 | + } | ||
| 105 | + | ||
| 104 | </style> | 106 | </style> |
| 105 | 107 | ||
| 106 | <div id="container" class="layout vertical"> | 108 | <div id="container" class="layout vertical"> |
| 107 | - <div class="card-grid"> | 109 | + <div class="card_grid" id="card_grid"> |
| 108 | <content></content> | 110 | <content></content> |
| 109 | </div> | 111 | </div> |
| 110 | </div> | 112 | </div> |
| @@ -138,6 +140,12 @@ Example: | @@ -138,6 +140,12 @@ Example: | ||
| 138 | ready : function(){ | 140 | ready : function(){ |
| 139 | var _this = this; | 141 | var _this = this; |
| 140 | var cards = document.querySelectorAll('paper-card-controllet'); | 142 | var cards = document.querySelectorAll('paper-card-controllet'); |
| 143 | + | ||
| 144 | + if(cards.length == 0){ | ||
| 145 | + | ||
| 146 | + this.$.card_grid.innerHTML += "<div class='empty'>There is nothing to show.</div>"; | ||
| 147 | + } | ||
| 148 | + | ||
| 141 | for(var i = 0; i < cards.length; i++){ | 149 | for(var i = 0; i < cards.length; i++){ |
| 142 | cards[i].addEventListener('click', function(e){ | 150 | cards[i].addEventListener('click', function(e){ |
| 143 | _this._cardClick(e) | 151 | _this._cardClick(e) |