WebCompDev / COMPONENTS

Commit c94733d2990aa5312f64a9baf897ad025de00075

Authored by Renato De Donato
1 parent 4f3cbd94

paper-card modify

Inline Side-by-side
Showing 7 changed files with 46 additions and 55 deletions
controllets/paper-card-controllet/paper-card-controllet.html
  View file @c94733d
... ... @@ -17,41 +17,40 @@
17 17 #paper_card_container {
18 18 font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
19 19 font-size: 16px;
20   - background-color: white;
21   - position: relative;
22   - float: left;
23   - margin: 40px;
  20 + line-height: 16px;
24 21 }
25 22  
26 23 #content {
27   - padding: 4px 4px 0px 4px;
28   - position:relative;
  24 + width: 100%;
  25 + height: calc(100% - 64px);
  26 + overflow: hidden;
  27 + }
  28 +
  29 + #content.text {
  30 + background-color: #FFFFCC;
  31 + padding: 4px;
  32 + width: calc(100% - 8px);
  33 + height: calc(100% - 72px);
29 34 }
30 35  
31   - .legend {
  36 + #paper_card_container .legend {
32 37 position: relative;
33   - top: -48px;
  38 + bottom: 48px;
34 39 height: 32px;
35 40 padding: 16px 0px 0px 8px;
36   - /*z-index: 1000;*/
37   - background: rgba(0,0,0,0.8);
  41 + background-color: rgba(0, 0, 0, 0.8);
38 42 color: white;
39 43 font-weight: 700;
40 44 word-wrap: break-word;
41 45 }
42 46  
43   - .footer {
44   - height: 16px;
45   - }
46   -
47   - .comment {
  47 + #paper_card_container .footer {
  48 + height: 64px;
  49 + width: 100%;
48 50 position: relative;
49   - top: -50px;
50   - height: 50px;
51   - background-color: white;
52   - padding: 8px;
53   - font-size: small;
54   - color: #727272;
  51 + bottom: 48px;
  52 + padding: 4px;
  53 + font-size: 12px;
55 54 word-wrap: break-word;
56 55 overflow: hidden;
57 56 }
... ... @@ -63,7 +62,6 @@
63 62 }
64 63  
65 64 paper-fab.open {
66   - /*bottom: 28px;*/
67 65 bottom: -20px;
68 66 right: 8px;
69 67 }
... ... @@ -114,7 +112,7 @@
114 112 </style>
115 113  
116 114  
117   - <paper-material id="paper_card_container" elevation="{{elevation}}">
  115 + <paper-material id="paper_card_container" elevation="3">
118 116  
119 117 <paper-fab id="card_modify" class="modify" mini icon="create" on-click="_handleModifyClick"></paper-fab>
120 118  
... ... @@ -149,7 +147,7 @@
149 147 </div>
150 148  
151 149 <div class="footer">
152   - <div class="comment">{{comment}}</div>
  150 + {{comment}}
153 151 </div>
154 152  
155 153 <paper-dialog id="fullscreen_container" entry-animation="scale-up-animation" exit-animation="fade-out-animation">
... ... @@ -170,22 +168,17 @@
170 168  
171 169 width: {
172 170 type: Number,
173   - observer: "_changeWidth"
  171 + value: 200
174 172 },
175 173  
176 174 height: {
177 175 type: Number,
178   - observer: "_changeHeight"
179   - },
180   -
181   - elevation:{
182   - type: Number,
183   - value: 3
  176 + value: 200
184 177 },
185 178  
186 179 cardType:{
187 180 type: String,
188   - value: "text"
  181 + value: ""
189 182 },
190 183  
191 184 cardTitle:{
... ... @@ -200,10 +193,14 @@
200 193  
201 194 },
202 195  
  196 + ready: function(){
  197 + this._resize();
  198 + },
  199 +
203 200 attached: function(){
204   - if(this.cardType == "text"){
205   - this.$.content.style.backgroundColor = "#FFFFCC";
206   - }
  201 + if(this.cardType == "text")
  202 + this.$.content.className += this.$.content.className ? ' text' : 'text';
  203 +
207 204 $(this.$.fullscreen_container).perfectScrollbar();
208 205  
209 206 this._translate();
... ... @@ -225,17 +222,9 @@
225 222 this.$$("#card_open_datalet").setAttribute("title", paper_ln["open_"+paper_ln["ln"]]);
226 223 },
227 224  
228   - _changeWidth: function(){
229   - this.style.width = this.width + "px";
230   - this.$.content.style.width = this.width - 8 + "px";
231   - this.$.paper_card_container.style.width = this.width + "px";
232   - },
233   -
234   - _changeHeight: function(){
235   - this.style.height = this.height + 64 + "px";
236   - this.$.content.style.height = this.height - 4 + "px";
237   - this.$.paper_card_container.style.height = this.height + "px";
238   - $(this.$.content).perfectScrollbar();
  225 + _resize: function(){
  226 + $(this.$.paper_card_container).height(this.height);
  227 + $(this.$.paper_card_container).width(this.width);
239 228 },
240 229  
241 230 checkType: function(type, check){
... ...
datalets/barchart-datalet/barchart-datalet.html
  View file @c94733d
... ... @@ -73,13 +73,13 @@ Example:
73 73 xAxis: {
74 74 categories: this.properties.categories.value,
75 75 title: {
76   - text: this._component.yAxisLabel
  76 + text: this._component.xAxisLabel
77 77 }
78 78 },
79 79 yAxis: {
80 80 min: 0,
81 81 title: {
82   - text: this._component.xAxisLabel,
  82 + text: this._component.yAxisLabel,
83 83 }
84 84 },
85 85 tooltip: {
... ...
datalets/barchart_stacked-datalet/barchart_stacked-datalet.html
  View file @c94733d
... ... @@ -73,13 +73,13 @@ Example:
73 73 xAxis: {
74 74 categories: this.properties.categories.value,
75 75 title: {
76   - text: this._component.yAxisLabel
  76 + text: this._component.xAxisLabel
77 77 }
78 78 },
79 79 yAxis: {
80 80 min: 0,
81 81 title: {
82   - text: this._component.xAxisLabel,
  82 + text: this._component.yAxisLabel,
83 83 },
84 84 },
85 85 tooltip: {
... ...
datalets/base-datalet/base-datalet.html
  View file @c94733d
... ... @@ -67,6 +67,7 @@ Example :
67 67 font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
68 68 padding-top: 2px;
69 69 border-top: 2px solid #B6B6B6;
  70 + margin-top: 8px;
70 71 }
71 72 #base_datalet_rtp {
72 73 display: flex;
... ... @@ -75,7 +76,7 @@ Example :
75 76 #rtp {
76 77 padding-top: 8px;
77 78 padding-right: 8px;
78   - font-size: small;
  79 + font-size: 12px;
79 80 }
80 81 #rtpalogo {
81 82 height: 32px;
... ... @@ -191,6 +192,7 @@ Example :
191 192  
192 193 hideFooter: function() {
193 194 this.$.base_datalet_container.innerHTML = "";
  195 + this.$.base_datalet_container.style.margin = 0;
194 196 this.$.base_datalet_container.style.border = 0;
195 197 }
196 198 });
... ...
datalets/datatable-datalet/js/DataTables/datatables.css
  View file @c94733d
... ... @@ -1722,7 +1722,7 @@ table.dataTable tfoot th.ui-state-default:last-child {
1722 1722 font-weight: normal;
1723 1723 }
1724 1724 .dataTables_wrapper .ui-toolbar {
1725   - padding: 16px;
  1725 + padding: 8px;/*16*/
1726 1726 }
1727 1727 .dataTables_wrapper.no-footer .dataTables_scrollBody {
1728 1728 border-bottom: none;
... ...
datalets/dynamic-datatable-datalet/js/DataTables/datatables.css
  View file @c94733d
... ... @@ -1722,7 +1722,7 @@ table.dataTable tfoot th.ui-state-default:last-child {
1722 1722 font-weight: normal;
1723 1723 }
1724 1724 .dataTables_wrapper .ui-toolbar {
1725   - padding: 16px;
  1725 + padding: 8px;/*16*/
1726 1726 }
1727 1727 .dataTables_wrapper.no-footer .dataTables_scrollBody {
1728 1728 border-bottom: none;
... ...
datalets/scatterchart-datalet/scatterchart-datalet.html
  View file @c94733d
... ... @@ -96,12 +96,12 @@ Example:
96 96 },
97 97 xAxis: {
98 98 title: {
99   - text: this._component.yAxisLabel
  99 + text: this._component.xAxisLabel
100 100 }
101 101 },
102 102 yAxis: {
103 103 title: {
104   - text: this._component.xAxisLabel,
  104 + text: this._component.yAxisLabel,
105 105 }
106 106 },
107 107 credits: {
... ...