mumuki-styles 1.15.4 → 1.16.0

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: c65478d557b613940dca203ca016311eda27705d
4
- data.tar.gz: 98bca0f1fe8efbc3e197f27ca9ae5583c87970f6
3
+ metadata.gz: be68b6e7dfd8f64ebb70ec61bd231a17c7e2305d
4
+ data.tar.gz: 78168fc6c2dab46df2e1ef2153a1a0951fefedb3
5
5
  SHA512:
6
- metadata.gz: 5ad43da0b54a1cc192908b048c0c306adb0d46bc16bc629e1f72b7d3f44fbb74265ceafb2bc1020a67a63bc573278379f1680cb0be7e58ab14fedf5ba15ff3e4
7
- data.tar.gz: ee84a9392c5dcb03912b57e990d2f8e5eb35a70347a941e756e3c459d4dd7e32fc62b1892ec155ca83e02825b52144f8fb8646188a4425f0551ac4db44202daa
6
+ metadata.gz: a32fc8d4b753f4c7ddc5eea52f1e96741acb36872d24db591b1bf671ec96d997da7b4ec2d85b0a8f388d5e19d8d04024571e70617719fed6806b64652293246c
7
+ data.tar.gz: 21c3d4e8c140ad56739242d50a190f537285158adbe4aabe27f3f7388fc3cf944094ee1e3148c20e4d839d08486bc2096b0789a77d4f0f979cfbf90eff9f8dfa
data/README.md CHANGED
@@ -4,9 +4,10 @@
4
4
 
5
5
  ### mu-file-browser
6
6
 
7
+ ![image](https://user-images.githubusercontent.com/1039278/34626522-c15fc584-f23b-11e7-81a4-dd5403a2e6f0.png)
8
+
7
9
  ```html
8
- <div
9
- class="mu-file-browser"
10
+ <div class="mu-file-browser"
10
11
  data-can-browse="true"
11
12
  data-on-file-open="console.log"
12
13
  data-file='{
@@ -37,14 +38,15 @@
37
38
  * `data-on-file-open`: (Function) receives 2 params, file name and file content. If no function given user can't open files.
38
39
  * `data-file`: (Hash) hash `keys` are the names of the resources and hash `values` are theirs contents (sub-hash for a folder and a string for a file).
39
40
 
40
- With jQuery you can use function `$('.mu-file-browser').renderFileBrowser()`;
41
+ With jQuery you can manually render this component using `$('.mu-file-browser').renderFileBrowser()`;
41
42
 
42
43
 
43
44
  ### mu-erd
44
45
 
46
+ ![image](https://user-images.githubusercontent.com/1039278/34626539-df245f30-f23b-11e7-9b21-1456c63105c9.png)
47
+
45
48
  ```html
46
- <div
47
- class='mu-erd'
49
+ <div class='mu-erd'
48
50
  data-entities='{
49
51
  "Entity_1": {
50
52
  "ent1_id": {
@@ -103,13 +105,14 @@ With jQuery you can use function `$('.mu-file-browser').renderFileBrowser()`;
103
105
  * `to`: (`Object`) { entity: (Foreign entity), column: (Foreign column name) }
104
106
  * `type`: (`String`) one\_to\_one | one\_to\_many | many\_to\_one | many\_to\_many
105
107
 
106
- With jQuery you can use function `$('.mu-erd').renderERD()`;
108
+ With jQuery you can manually render this component using `$('.mu-erd').renderERD()`;
107
109
 
108
110
  ### mu-browser
109
111
 
112
+ ![image](https://user-images.githubusercontent.com/1039278/34626588-1829fbb4-f23c-11e7-89ec-540a23a41240.png)
113
+
110
114
  ```html
111
- <div
112
- class='mu-browser'
115
+ <div class='mu-browser'
113
116
  data-url='https://mi-sitio.mumuki.io'
114
117
  data-title='Mumuki - Aprender a programar'
115
118
  data-favicon='https://mumuki.io/logo-alt.png'
@@ -124,7 +127,91 @@ With jQuery you can use function `$('.mu-erd').renderERD()`;
124
127
  * `data-title`: (Optional) Title of the browser's tab (default: `Mumuki`)
125
128
  * `data-favicon`: (Optional) Favicon of the brower's tab (default: `https://mumuki.io/logo-alt.png`)
126
129
 
127
- With jQuery you can use function `$('.mu-erd').renderWebBrowser()`;
130
+ With jQuery you can manually render this component using `$('.mu-browser').renderWebBrowser()`;
131
+
132
+
133
+ ### mu-sql-table
134
+
135
+ ![image](https://user-images.githubusercontent.com/1039278/34626563-f531ec3e-f23b-11e7-8534-fd6855fea0b1.png)
136
+
137
+ ```html
138
+ <div class='mu-sql-table'
139
+ data-name='Personas'
140
+ data-columns='[{"name": "id_persona", "pk": true}, "Nombre", "Apellido", {"name": "Pareja", "fk": true}]'
141
+ data-rows='[
142
+ [1, "Homero", "Simpson", 2],
143
+ [2, "Marge", "Bouvier", 1],
144
+ [3, "Moe", "Szyslak", null]
145
+ ]'>
146
+ </div>
147
+ ```
148
+
149
+ #### mu-sql-table attributes
150
+
151
+ * `data-name`: (String) Entity name
152
+ * `data-columns`: (String|Hash):
153
+ * if `String`: Column name
154
+ * if `Hash`: you need the next keys
155
+ * `name`: (String) Column name
156
+ * `pk`: (Bool) if column is PK or part of one
157
+ * `fk`: (Bool) if column is FK or part of one
158
+ * `data-rows`: (Array<Array<Value>>)
159
+
160
+ With jQuery you can manually render this component using `$('.mu-sql-table').renderSqlTable()`;
161
+
162
+ ### mu-sql-table-rendered
163
+
164
+ ![image](https://user-images.githubusercontent.com/1039278/34626563-f531ec3e-f23b-11e7-8534-fd6855fea0b1.png)
165
+
166
+ ```html
167
+ <div class="mu-sql-table-rendered">
168
+ <header>Personas</header>
169
+ <table>
170
+ <thead>
171
+ <tr>
172
+ <th class="mu-sql-table-pk">id_persona</th>
173
+ <th>Nombre</th>
174
+ <th>Apellido</th>
175
+ <th class="mu-sql-table-fk">Pareja</th>
176
+ </tr>
177
+ </thead>
178
+ <tbody>
179
+ <tr>
180
+ <td>1</td>
181
+ <td>Homero</td>
182
+ <td>Simpson</td>
183
+ <td>2</td>
184
+ </tr>
185
+ <tr>
186
+ <td>2</td>
187
+ <td>Marge</td>
188
+ <td>Bouvier</td>
189
+ <td>1</td>
190
+ </tr>
191
+ <tr>
192
+ <td>3</td>
193
+ <td>Moe</td>
194
+ <td>Szyslak</td>
195
+ <td>NULL</td>
196
+ </tr>
197
+ </tbody>
198
+ </table>
199
+ </div>
200
+ ```
201
+
202
+ #### mu-sql-table-rendered attributes
203
+
204
+ You don't need any data attribute - just follow this convention:
205
+
206
+ * `div` (with `mu-sql-table-rendered` class)
207
+ * `div > header`
208
+ * `div > table`
209
+ * `div > table > thead`
210
+ * `div > table > thead > tr > th` (th tag can have `mu-sql-table-pk` and/or `mu-sql-table-fk`)
211
+ * `div > table > tbody`
212
+ * `div > table > tbody > tr > td`
213
+
214
+ With jQuery you can manually render this component using `$('.mu-sql-table-rendered').renderPrerenderedSqlTable()`;
128
215
 
129
216
 
130
217
  ## Installing
@@ -13088,12 +13088,113 @@ mumuki.load(function () {
13088
13088
 
13089
13089
  });
13090
13090
 
13091
+ mumuki.load(function () {
13092
+
13093
+ function getHeader(name) {
13094
+ return '<header>' + name + '</header>';
13095
+ }
13096
+
13097
+ function getMain(columns, rows) {
13098
+ return [
13099
+ '<table>',
13100
+ ' <thead>', getTableHead(columns), '</thead>',
13101
+ ' <tbody>', getTableBody(rows), '</tbody>',
13102
+ '</table>',
13103
+ ].join('');
13104
+ }
13105
+
13106
+ function getTableHead(columns) {
13107
+ var cols = '';
13108
+ cols += '<tr>';
13109
+ columns.forEach(function (col) {
13110
+ cols += '<th style="width: calc(100% / ' + columns.length + ')">' + getColumnName(col) + '</th>';
13111
+ });
13112
+ cols += '</tr>';
13113
+ return cols;
13114
+ }
13115
+
13116
+ function getTableBody(rows) {
13117
+ var rowstr = '';
13118
+ rows.forEach(function (row) {
13119
+ rowstr += '<tr>';
13120
+ row.forEach(function (data) {
13121
+ rowstr += '<td style="width: calc(100% / ' + row.length + ')">' + (data === null ? 'NULL' : data) + '</td>';
13122
+ });
13123
+ rowstr += '</tr>';
13124
+ });
13125
+ return rowstr;
13126
+ }
13127
+
13128
+ function getColumnName(column) {
13129
+ var obj = typeof column === 'string' ? {name: column} : column;
13130
+ return [
13131
+ keyIconFor(obj, 'pk'),
13132
+ keyIconFor(obj, 'fk'),
13133
+ '<span>', obj.name, '</span>',
13134
+ ].join('');
13135
+ }
13136
+
13137
+ function keyIconFor(column, field) {
13138
+ return !!column[field] ? '<i class="fa fa-fw fa-key mu-sql-table-' + field + '"></i>' : '';
13139
+ }
13140
+
13141
+ $.fn.renderSqlTable = function () {
13142
+ var self = this;
13143
+ self.empty();
13144
+ self.each(function (i) {
13145
+ var $table = $(self[i]);
13146
+ var name = $table.data('name');
13147
+ var rows = $table.data('rows');
13148
+ var columns = $table.data('columns');
13149
+
13150
+ var $header = getHeader(name);
13151
+ var $main = getMain(columns, rows);
13152
+
13153
+ $table.append($header);
13154
+ $table.append($main);
13155
+ });
13156
+ return self;
13157
+ }
13158
+
13159
+ function generatePKsAndFKs($trs) {
13160
+ var $ths = $trs.find('[class^="mu-sql-table-"]');
13161
+ $ths.each(function (i) {
13162
+ var $th = $($ths[i]);
13163
+ var text = $th.text();
13164
+ $th.empty();
13165
+ if ($th.children('i').length == 0) {
13166
+ $th.prepend('<i class="fa fa-fw fa-key ' + $th.attr('class') + '"></i>');
13167
+ }
13168
+ $th.append('<span>' + text + '</span>');
13169
+ });
13170
+ }
13171
+
13172
+ $.fn.renderPrerenderedSqlTable = function () {
13173
+ var self = this;
13174
+ self.each(function (i) {
13175
+ var $table = $(self[i]).find('table');
13176
+ var $trs = $table.find('thead > tr');
13177
+ $table.find('td, th').css({ width: (100 / $trs.children('th').length) + '%' })
13178
+ generatePKsAndFKs($trs);
13179
+ });
13180
+ return self;
13181
+ }
13182
+
13183
+ mumuki.resize(function () {
13184
+ $('.mu-sql-table').renderSqlTable();
13185
+ $('.mu-sql-table-rendered').renderPrerenderedSqlTable();
13186
+ });
13187
+
13188
+ });
13189
+
13091
13190
  mumuki.load(function () {
13092
13191
 
13093
13192
  $.fn.renderMuComponents = function () {
13094
13193
  this.find('.mu-erd').renderERD();
13095
13194
  this.find('.mu-browser').renderWebBrowser();
13195
+ this.find('.mu-sql-table').renderSqlTable();
13096
13196
  this.find('.mu-file-browser').renderFileBrowser();
13197
+ this.find('.mu-sql-table-rendered').renderPrerenderedSqlTable();
13097
13198
  }
13098
13199
 
13099
13200
  });
@@ -0,0 +1,74 @@
1
+ $mu-color-sql-table-title: darken($mu-color-component-title-background, 5%);
2
+
3
+ .mu-sql-table,
4
+ .mu-sql-table-rendered {
5
+ position: relative;
6
+ width: 100%;
7
+ display: flex;
8
+ flex-flow: column;
9
+ flex-wrap: wrap;
10
+ justify-content: space-around;
11
+ align-items: center;
12
+
13
+ z-index: 1;
14
+ border: $mu-component-border;
15
+ border-top-left-radius: 15px;
16
+ border-top-right-radius: 15px;
17
+
18
+ header {
19
+ padding: 5px 10px;
20
+ width: 100%;
21
+ text-align: center;
22
+ border-bottom: $mu-component-border;
23
+ border-top-left-radius: 15px;
24
+ border-top-right-radius: 15px;
25
+ background-color: $mu-color-sql-table-title;
26
+ margin: 0;
27
+ }
28
+
29
+ table {
30
+ width: 100%;
31
+ thead,
32
+ tbody {
33
+ width: 100%;
34
+ display: flex;
35
+ flex-flow: column;
36
+ flex-wrap: wrap;
37
+ justify-content: space-between;
38
+ align-items: center;
39
+ margin: 0;
40
+ tr {
41
+ width: 100%;
42
+ padding: 5px 10px;
43
+ margin: 0;
44
+ background-color: white;
45
+ display: flex;
46
+ flex-flow: row;
47
+ flex-wrap: wrap;
48
+ justify-content: center;
49
+ align-items: center;
50
+ border-bottom: 1px dashed $mu-color-component-border;
51
+ &:last-child { border-bottom: none }
52
+ td,
53
+ th {
54
+ text-align: center;
55
+ overflow: hidden;
56
+ text-overflow: ellipsis;
57
+ span { margin-left: 5px }
58
+ .mu-sql-table-pk,
59
+ .mu-sql-table-fk { font-size: 75% };
60
+ .mu-sql-table-pk { color: rgb(196, 173, 44) }
61
+ .mu-sql-table-fk { color: rgb(184, 184, 184) }
62
+ border-right: 1px dashed $mu-color-component-border;
63
+ &:last-child { border-right: none }
64
+ }
65
+ }
66
+ }
67
+ thead {
68
+ border-bottom: $mu-component-border;
69
+ tr {
70
+ background-color: $mu-color-component-title-background;
71
+ }
72
+ }
73
+ }
74
+ }
@@ -6,4 +6,5 @@ $mu-component-border-radius: 15px;
6
6
 
7
7
  @import 'browser';
8
8
  @import 'mu-erd';
9
+ @import 'mu-sql-table';
9
10
  @import 'mu-file-browser';
@@ -9556,6 +9556,134 @@ pre code {
9556
9556
  .mu-erd-entity-columns .mu-erd-entity-column .mu-erd-entity-column-type {
9557
9557
  text-align: right; }
9558
9558
 
9559
+ .mu-sql-table,
9560
+ .mu-sql-table-rendered {
9561
+ position: relative;
9562
+ width: 100%;
9563
+ display: flex;
9564
+ flex-flow: column;
9565
+ flex-wrap: wrap;
9566
+ justify-content: space-around;
9567
+ align-items: center;
9568
+ z-index: 1;
9569
+ border: 2px solid #cfd9db;
9570
+ border-top-left-radius: 15px;
9571
+ border-top-right-radius: 15px; }
9572
+ .mu-sql-table header,
9573
+ .mu-sql-table-rendered header {
9574
+ padding: 5px 10px;
9575
+ width: 100%;
9576
+ text-align: center;
9577
+ border-bottom: 2px solid #cfd9db;
9578
+ border-top-left-radius: 15px;
9579
+ border-top-right-radius: 15px;
9580
+ background-color: #dde4e6;
9581
+ margin: 0; }
9582
+ .mu-sql-table table,
9583
+ .mu-sql-table-rendered table {
9584
+ width: 100%; }
9585
+ .mu-sql-table table thead,
9586
+ .mu-sql-table table tbody,
9587
+ .mu-sql-table-rendered table thead,
9588
+ .mu-sql-table-rendered table tbody {
9589
+ width: 100%;
9590
+ display: flex;
9591
+ flex-flow: column;
9592
+ flex-wrap: wrap;
9593
+ justify-content: space-between;
9594
+ align-items: center;
9595
+ margin: 0; }
9596
+ .mu-sql-table table thead tr,
9597
+ .mu-sql-table table tbody tr,
9598
+ .mu-sql-table-rendered table thead tr,
9599
+ .mu-sql-table-rendered table tbody tr {
9600
+ width: 100%;
9601
+ padding: 5px 10px;
9602
+ margin: 0;
9603
+ background-color: white;
9604
+ display: flex;
9605
+ flex-flow: row;
9606
+ flex-wrap: wrap;
9607
+ justify-content: center;
9608
+ align-items: center;
9609
+ border-bottom: 1px dashed #cfd9db; }
9610
+ .mu-sql-table table thead tr:last-child,
9611
+ .mu-sql-table table tbody tr:last-child,
9612
+ .mu-sql-table-rendered table thead tr:last-child,
9613
+ .mu-sql-table-rendered table tbody tr:last-child {
9614
+ border-bottom: none; }
9615
+ .mu-sql-table table thead tr td,
9616
+ .mu-sql-table table thead tr th,
9617
+ .mu-sql-table table tbody tr td,
9618
+ .mu-sql-table table tbody tr th,
9619
+ .mu-sql-table-rendered table thead tr td,
9620
+ .mu-sql-table-rendered table thead tr th,
9621
+ .mu-sql-table-rendered table tbody tr td,
9622
+ .mu-sql-table-rendered table tbody tr th {
9623
+ text-align: center;
9624
+ overflow: hidden;
9625
+ text-overflow: ellipsis;
9626
+ border-right: 1px dashed #cfd9db; }
9627
+ .mu-sql-table table thead tr td span,
9628
+ .mu-sql-table table thead tr th span,
9629
+ .mu-sql-table table tbody tr td span,
9630
+ .mu-sql-table table tbody tr th span,
9631
+ .mu-sql-table-rendered table thead tr td span,
9632
+ .mu-sql-table-rendered table thead tr th span,
9633
+ .mu-sql-table-rendered table tbody tr td span,
9634
+ .mu-sql-table-rendered table tbody tr th span {
9635
+ margin-left: 5px; }
9636
+ .mu-sql-table table thead tr td .mu-sql-table-pk,
9637
+ .mu-sql-table table thead tr td .mu-sql-table-fk,
9638
+ .mu-sql-table table thead tr th .mu-sql-table-pk,
9639
+ .mu-sql-table table thead tr th .mu-sql-table-fk,
9640
+ .mu-sql-table table tbody tr td .mu-sql-table-pk,
9641
+ .mu-sql-table table tbody tr td .mu-sql-table-fk,
9642
+ .mu-sql-table table tbody tr th .mu-sql-table-pk,
9643
+ .mu-sql-table table tbody tr th .mu-sql-table-fk,
9644
+ .mu-sql-table-rendered table thead tr td .mu-sql-table-pk,
9645
+ .mu-sql-table-rendered table thead tr td .mu-sql-table-fk,
9646
+ .mu-sql-table-rendered table thead tr th .mu-sql-table-pk,
9647
+ .mu-sql-table-rendered table thead tr th .mu-sql-table-fk,
9648
+ .mu-sql-table-rendered table tbody tr td .mu-sql-table-pk,
9649
+ .mu-sql-table-rendered table tbody tr td .mu-sql-table-fk,
9650
+ .mu-sql-table-rendered table tbody tr th .mu-sql-table-pk,
9651
+ .mu-sql-table-rendered table tbody tr th .mu-sql-table-fk {
9652
+ font-size: 75%; }
9653
+ .mu-sql-table table thead tr td .mu-sql-table-pk,
9654
+ .mu-sql-table table thead tr th .mu-sql-table-pk,
9655
+ .mu-sql-table table tbody tr td .mu-sql-table-pk,
9656
+ .mu-sql-table table tbody tr th .mu-sql-table-pk,
9657
+ .mu-sql-table-rendered table thead tr td .mu-sql-table-pk,
9658
+ .mu-sql-table-rendered table thead tr th .mu-sql-table-pk,
9659
+ .mu-sql-table-rendered table tbody tr td .mu-sql-table-pk,
9660
+ .mu-sql-table-rendered table tbody tr th .mu-sql-table-pk {
9661
+ color: #c4ad2c; }
9662
+ .mu-sql-table table thead tr td .mu-sql-table-fk,
9663
+ .mu-sql-table table thead tr th .mu-sql-table-fk,
9664
+ .mu-sql-table table tbody tr td .mu-sql-table-fk,
9665
+ .mu-sql-table table tbody tr th .mu-sql-table-fk,
9666
+ .mu-sql-table-rendered table thead tr td .mu-sql-table-fk,
9667
+ .mu-sql-table-rendered table thead tr th .mu-sql-table-fk,
9668
+ .mu-sql-table-rendered table tbody tr td .mu-sql-table-fk,
9669
+ .mu-sql-table-rendered table tbody tr th .mu-sql-table-fk {
9670
+ color: #b8b8b8; }
9671
+ .mu-sql-table table thead tr td:last-child,
9672
+ .mu-sql-table table thead tr th:last-child,
9673
+ .mu-sql-table table tbody tr td:last-child,
9674
+ .mu-sql-table table tbody tr th:last-child,
9675
+ .mu-sql-table-rendered table thead tr td:last-child,
9676
+ .mu-sql-table-rendered table thead tr th:last-child,
9677
+ .mu-sql-table-rendered table tbody tr td:last-child,
9678
+ .mu-sql-table-rendered table tbody tr th:last-child {
9679
+ border-right: none; }
9680
+ .mu-sql-table table thead,
9681
+ .mu-sql-table-rendered table thead {
9682
+ border-bottom: 2px solid #cfd9db; }
9683
+ .mu-sql-table table thead tr,
9684
+ .mu-sql-table-rendered table thead tr {
9685
+ background-color: #ecf0f1; }
9686
+
9559
9687
  .mu-file-browser {
9560
9688
  width: 100%;
9561
9689
  position: relative; }
@@ -1,5 +1,5 @@
1
1
  module Mumuki
2
2
  module Styles
3
- VERSION = "1.15.4"
3
+ VERSION = "1.16.0"
4
4
  end
5
5
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: mumuki-styles
3
3
  version: !ruby/object:Gem::Version
4
- version: 1.15.4
4
+ version: 1.16.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Federico Scarpa
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2018-01-02 00:00:00.000000000 Z
11
+ date: 2018-01-05 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: bundler
@@ -99,9 +99,10 @@ files:
99
99
  - app/assets/stylesheets/bootswatch/_bootswatch.scss
100
100
  - app/assets/stylesheets/bootswatch/_variables.scss
101
101
  - app/assets/stylesheets/components/_browser.scss
102
- - app/assets/stylesheets/components/_components.scss
103
102
  - app/assets/stylesheets/components/_mu-erd.scss
104
103
  - app/assets/stylesheets/components/_mu-file-browser.scss
104
+ - app/assets/stylesheets/components/_mu-sql-table.scss
105
+ - app/assets/stylesheets/components/components.scss
105
106
  - app/assets/stylesheets/modules/_breadcrumb.scss
106
107
  - app/assets/stylesheets/modules/_callout.scss
107
108
  - app/assets/stylesheets/modules/_checkbox.scss