WebCompDev / COMPONENTS

Commit d0de5d86f3f14fa41ddc85384d72424dcf7a1f07

Authored by isisadmin
1 parent fcc0fee3

public room

Inline Side-by-side
Showing 2 changed files with 57 additions and 35 deletions
controllets/animated-grid-controllet/animated-grid-controllet.html
  View file @d0de5d8
... ... @@ -30,41 +30,47 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
30 30 /* ---- grid-item ---- */
31 31  
32 32  
33   - .grid-item
  33 + ::content .grid-item {float: left;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;border: 3px solid white;}
  34 + ::content .grid-sizer {width: 200px;}
  35 + ::content .grid-item-w20 {width: 200px;}
  36 + ::content .grid-item-w40 {width: 400px;}
  37 + ::content .grid-item-w60 {width: 600px;}
  38 + ::content .grid-item-w80 {width: 80%;}
  39 + ::content .grid-item-w100 {width: 100%;}
  40 +
  41 + ::content .grid-item-h200 {height: 200px;}
  42 + ::content .grid-item-h400 {height: 400px;}
  43 + ::content .grid-item-h600 {height: 600px;}
  44 + ::content .grid-item-h800 {height: 800px;}
  45 +
  46 + ::content .grid-item-c0 {background-color: #0D47A1;}
  47 + ::content .grid-item-c1 {background-color: #1976D2;}
  48 + ::content .grid-item-c2 {background-color: #2196F3;}
  49 + ::content .grid-item-c3 {background-color: #64B5F6;}
  50 + ::content .grid-item-c4 {background-color: #BBDEFB;}
  51 +
  52 + ::content .room-body {background-color: #BBDEFB;}
  53 +
  54 + ::content .room-subject
34 55 {
35   - float: left;
36   - box-sizing: border-box;
37   - -moz-box-sizing: border-box;
38   - -webkit-box-sizing: border-box;
39   - border: 4px solid white;
  56 + position: absolute;
  57 + width: 100%;
  58 + height: 30px;
  59 + bottom: 20px;
  60 + background-color: rgba(0,0,0,0.6);
  61 + vertical-align: middle;
  62 + color: #FFFFFF;
40 63 }
41 64  
42   - .grid-sizer {width: 200px;}
43   - .grid-item-w20 {width: 200px;}
44   - .grid-item-w40 {width: 400px;}
45   - .grid-item-w60 {width: 600px;}
46   - .grid-item-w80 {width: 80%;}
47   - .grid-item-w100 {width: 100%;}
48   -
49   - .grid-item-h200 {height: 200px;}
50   - .grid-item-h400 {height: 400px;}
51   - .grid-item-h600 {height: 600px;}
52   - .grid-item-h800 {height: 800px;}
53   -
54   - .grid-item-c0 {background-color: #0D47A1;}
55   - .grid-item-c1 {background-color: #1976D2;}
56   - .grid-item-c2 {background-color: #2196F3;}
57   - .grid-item-c3 {background-color: #64B5F6;}
58   - .grid-item-c4 {background-color: #BBDEFB;}
59   -
60 65 </style>
61 66  
62 67 <template>
63 68  
64   - <div class="grid">
65   - <template is="dom-repeat" items="{{data}}">
  69 + <div id="grid-container" class="grid">
  70 + <!--<template is="dom-repeat" items="{{data}}">
66 71 <div class$="{{item.b}} {{item.w}} {{item.h}} {{item.c}}">{{index}}</div>
67   - </template>
  72 + </template>-->
  73 + <content></content>
68 74 </div>
69 75  
70 76 <div class="grid-sizer"></div>
... ... @@ -104,7 +110,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
104 110  
105 111 ready : function()
106 112 {
107   - var randW = 0;
  113 + /*var randW = 0;
108 114 var randH = 0;
109 115 var randC = 0;
110 116 this.data = [];
... ... @@ -121,7 +127,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
121 127 h: 'grid-item-h'+((randH*200)+200),
122 128 c: 'grid-item-c'+randC});
123 129  
124   - }
  130 + }*/
125 131 },
126 132  
127 133 attached : function()
... ... @@ -152,7 +158,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
152 158  
153 159 this.fire('tile-click', {
154 160 tile: target,
155   - data: {color: target._templateInstance.item.c}
  161 + //data: {color: target._templateInstance.item.c}
  162 + data: {color: target.classList[3], id:target.id}
156 163 });
157 164  
158 165 }
... ...
controllets/fullsize-page-with-card-controllet/fullsize-page-with-card-controllet.html
  View file @d0de5d8
... ... @@ -9,7 +9,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
9 9 <link rel="import" href="../../bower_components/polymer/polymer.html">
10 10 <link rel="import" href="../../bower_components/neon-animation/neon-shared-element-animatable-behavior.html">
11 11  
12   -<dom-module id="fullsize-page-with-card">
  12 +<dom-module id="fullsize-page-with-card-controllet">
13 13  
14 14 <style>
15 15  
... ... @@ -21,14 +21,14 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
21 21 position: absolute;
22 22 top: 0;
23 23 left: 0;
24   - height: 100vh;
  24 + height: 100%;
25 25 width: 100vw;
26 26 }
27 27  
28 28 .card {
29 29 position: relative;
30 30 margin: 20px 20px 20px 20px;
31   - height: 700px;
  31 + height: 90%;
32 32 }
33 33  
34 34 .grid-item-c0 {background-color: #0D47A1;}
... ... @@ -48,7 +48,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
48 48 <template>
49 49  
50 50 <div id="fixed" class$="[[_computeFixedBackgroundClass(color)]]"></div>
51   - <div id="card" class$="[[_computeCardClass(color)]]"></div>
  51 + <div id="card" class$="[[_computeCardClass(color)]]">
  52 + <template is="dom-if" if="{{_checkUndefined(publicRoom)}}">
  53 + <iframe src="/public-room/{{publicRoom}}" width="100%" height="100%"></iframe>
  54 + </template>
  55 + </div>
52 56  
53 57 </template>
54 58  
... ... @@ -58,7 +62,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
58 62  
59 63 Polymer({
60 64  
61   - is: 'fullsize-page-with-card',
  65 + is: 'fullsize-page-with-card-controllet',
62 66  
63 67 behaviors: [
64 68 Polymer.NeonSharedElementAnimatableBehavior
... ... @@ -66,6 +70,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
66 70  
67 71 properties: {
68 72  
  73 + publicRoom : {
  74 + type: String
  75 + },
  76 +
69 77 color: {
70 78 type: String
71 79 },
... ... @@ -111,6 +119,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
111 119  
112 120 },
113 121  
  122 + _checkUndefined: function(variable)
  123 + {
  124 + if(typeof variable === 'undefined')
  125 + return false;
  126 + return true;
  127 + },
  128 +
114 129 _computeCardClass: function(color) {
115 130 var cls = 'card';
116 131 return cls + ' ' + color;
... ...