Commit d0de5d86f3f14fa41ddc85384d72424dcf7a1f07
1 parent
fcc0fee3
public room
Showing
2 changed files
with
57 additions
and
35 deletions
controllets/animated-grid-controllet/animated-grid-controllet.html
... | ... | @@ -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
... | ... | @@ -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; |
... | ... |