@things-factory/grist-ui 4.0.40 → 4.0.44

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,41 @@
1
+ body {
2
+ --grist-padding: 0;
3
+ --record-view-footer-height: 36px;
4
+ --record-view-footer-button-height: 36px;
5
+ }
6
+
7
+ @media only screen and (max-width: 460px) {
8
+ body {
9
+ --grist-padding: 0;
10
+ --record-view-footer-height: 50px;
11
+ --record-view-footer-button-height: var(--record-view-footer-height);
12
+ --record-view-footer-iconbutton-margin: -2px;
13
+ --record-view-footer-iconbutton-display: block;
14
+ }
15
+ }
16
+
17
+ @media print {
18
+ body {
19
+ --grist-input-zoom: 0.7;
20
+ }
21
+ }
22
+
23
+ @media only screen and (max-width: 460px) {
24
+ body {
25
+ --data-card-template: repeat(1, minmax(auto, 100%));
26
+ }
27
+ }
28
+ @media (min-width: 461px) and (max-width: 700px) {
29
+ body {
30
+ --grist-input-zoom: 0.7;
31
+ }
32
+ }
33
+ @media (min-width: 461px) and (max-width: 1024px) {
34
+ body {
35
+ --grist-padding: 0;
36
+ --record-view-footer-height: 50px;
37
+ --record-view-footer-button-height: var(--record-view-footer-height);
38
+ --record-view-footer-iconbutton-margin: -2px;
39
+ --record-view-footer-iconbutton-display: block;
40
+ }
41
+ }
@@ -3,7 +3,6 @@ body {
3
3
  --grid-container-border-width: 1px 0;
4
4
 
5
5
  --grist-background-color: var(--main-section-background-color);
6
- --grist-padding: var(--padding-wide);
7
6
  --grist-title-margin: 0 0 0 10px;
8
7
  --grist-title-border: none;
9
8
  --grist-title-font: bold 16px var(--theme-font);
@@ -33,11 +32,15 @@ body {
33
32
  --grid-header-splitter-border-hover: 1px solid var(--primary-color);
34
33
  --grid-header-color: rgba(var(--secondary-color-rgb), 0.8);
35
34
  --grid-header-font: bold var(--fontsize-small) var(--theme-font);
35
+ --grid-header-filter-title-color: var(--primary-text-color);
36
+ --grid-header-filter-title-font: normal 12px var(--theme-font);
37
+ --grid-header-filter-title-icon-color: var(--primary-color);
36
38
 
37
39
  --grid-record-background-color: var(--theme-white-color);
38
40
  --grid-record-odd-background-color: rgba(255, 255, 255, 0.4);
39
41
  --grid-record-padding: var(--padding-default) 0 var(--padding-default) var(--padding-default);
40
42
  --grid-record-color: var(--secondary-color);
43
+ --grid-record-color-hover: var(--primary-color);
41
44
  --grid-record-wide-fontsize: var(--fontsize-small);
42
45
  --grid-record-selected-background-color: #f1f8e9;
43
46
  --grid-record-selected-color: var(--grid-record-color);
@@ -86,6 +89,40 @@ body {
86
89
  --data-list-fab-color: var(--primary-color);
87
90
  --data-list-fab-shadow: var(--box-shadow);
88
91
 
92
+ --data-card-background-color: var(--main-section-background-color);
93
+ --data-card-record-card-background-color: var(--theme-white-color);
94
+ --data-card-record-card-border: var(--border-dark-color);
95
+ --data-card-record-card-border-hover: 1px solid var(--primary-color);
96
+ --data-card-record-card-boxshadow-hover: 1px 1px 2px 1px rgba(0, 0, 0, 0.15);
97
+ --data-card-record-card-selected-border: 1px solid var(--primary-color);
98
+ --data-card-record-card-border-radius: var(--border-radius);
99
+ --data-card-item-margin: var(--margin-default) 0 var(--margin-default) var(--margin-wide);
100
+ --data-card-item-padding: var(--padding-default) var(--padding-wide);
101
+ --data-card-item-border-bottom: var(--grid-container-border-color);
102
+ --data-card-item-name-font: bold 1.2em/1em var(--theme-font);
103
+ --data-card-item-name-color: var(--secondary-text-color);
104
+ --data-card-item-name-label-font: normal 0.65em/0.8em var(--theme-font);
105
+ --data-card-item-name-label-color: rgba(var(--secondary-color-rgb), 0.8);
106
+ --data-card-item-disc-font: normal 0.9em/1em var(--theme-font);
107
+ --data-card-item-disc-color: var(--primary-color);
108
+ --data-card-item-etc-label-font: normal 1em/1em var(--theme-font);
109
+ --data-card-item-etc-font: bold 0.8em/1em var(--theme-font);
110
+ --data-card-item-etc-color: var(--secondary-color);
111
+ --data-card-item-icon-font: normal 1em/1em;
112
+ --data-card-item-icon-color: var(--secondary-text-color);
113
+ --data-card-item-btn-border: var(--border-dark-color);
114
+ --data-card-item-btn-border-radius: var(--border-radius);
115
+ --data-card-item-btn-padding: var(--padding-narrow);
116
+ --data-card-selected-background-color: var(--grid-record-selected-background-color);
117
+ --data-card-fab-position-horizontal: 15px;
118
+ --data-card-fab-position-vertical: 15px;
119
+ --data-card-fab-color: var(--primary-color);
120
+ --data-card-fab-shadow: var(--box-shadow);
121
+ --data-card-template: repeat(3, minmax(auto, 100%));
122
+ --data-card-thumbnail-height: 140px;
123
+ --data-card-thumbnail-border-bottom: var(--border-dark-color);
124
+ --data-card-attachimg-height: 70px;
125
+
89
126
  --record-view-background-color: var(--main-section-background-color);
90
127
  --record-view-gap: var(--margin-narrow) 0;
91
128
  --record-view-padding: var(--padding-default);
@@ -99,42 +136,60 @@ body {
99
136
  --record-view-edit-border-bottom: 2px solid var(--primary-color);
100
137
  --record-view-item-padding: var(--padding-default);
101
138
 
102
- --record-view-footer-height: 36px;
103
139
  --record-view-footer-background: #586272;
104
140
  --record-view-footer-button-border: 1px solid rgba(0, 0, 0, 0.3);
105
141
  --record-view-footer-button-border-width: 0 0 0 1px;
106
- --record-view-footer-button-height: 36px;
107
142
  --record-view-footer-button-font: 17px;
108
143
  --record-view-footer-button-color: var(--theme-white-color);
109
- --record-view-footer-iconbutton-size: var(--fontsize-large);
144
+ --record-view-footer-iconbutton-size: 35px;
110
145
  --record-view-footer-focus-background: var(--primary-color);
111
146
  }
112
147
 
113
148
  @media only screen and (max-width: 460px) {
114
149
  body {
115
- --grist-padding: 0;
150
+ --record-view-label-font: bold 15px/32px var(--theme-font);
116
151
  --record-view-font: normal 15px/32px var(--theme-font);
117
- --record-view-footer-height: 50px;
118
- --record-view-footer-button-height: var(--record-view-footer-height);
119
- --record-view-footer-iconbutton-size: 35px;
120
- --record-view-footer-iconbutton-margin: -2px;
121
- --record-view-footer-iconbutton-display: block;
122
152
  }
123
153
  }
124
154
 
125
- @media (min-width: 461px) and (max-width: 1024px) {
155
+ @media print {
126
156
  body {
127
- --grist-padding: 0;
157
+ --grist-input-zoom: 0.7;
158
+ }
159
+ }
128
160
 
129
- --record-view-footer-height: 50px;
130
- --record-view-footer-button-height: var(--record-view-footer-height);
131
- --record-view-footer-iconbutton-size: 35px;
132
- --record-view-footer-iconbutton-margin: -2px;
133
- --record-view-footer-iconbutton-display: block;
161
+ @media only screen and (max-width: 460px) {
162
+ body {
163
+ --data-card-template: repeat(1, minmax(auto, 100%));
134
164
  }
135
165
  }
136
- @media print {
166
+ @media (min-width: 461px) and (max-width: 700px) {
137
167
  body {
138
- --grist-input-zoom: 0.7;
168
+ --data-card-template: repeat(2, minmax(auto, 100%));
169
+ }
170
+ }
171
+ @media (min-width: 461px) and (max-width: 1024px) {
172
+ body {
173
+ --data-card-create-form-padding: 7px;
174
+ }
175
+ }
176
+ @media (min-width: 1025px) and (max-width: 1400px) {
177
+ body {
178
+ --data-card-template: repeat(4, minmax(auto, 100%));
179
+ }
180
+ }
181
+ @media (min-width: 1401px) and (max-width: 1800px) {
182
+ body {
183
+ --data-card-template: repeat(5, minmax(auto, 100%));
184
+ }
185
+ }
186
+ @media (min-width: 1801px) and (max-width: 2200px) {
187
+ body {
188
+ --data-card-template: repeat(6, minmax(auto, 100%));
189
+ }
190
+ }
191
+ @media only screen and (min-width: 2201px) {
192
+ body {
193
+ --data-card-template: repeat(7, minmax(auto, 100%));
139
194
  }
140
195
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@things-factory/grist-ui",
3
- "version": "4.0.40",
3
+ "version": "4.0.44",
4
4
  "main": "dist-server/index.js",
5
5
  "browser": "client/index.js",
6
6
  "things-factory": true,
@@ -25,13 +25,13 @@
25
25
  },
26
26
  "dependencies": {
27
27
  "@material/mwc-icon": "^0.25.3",
28
- "@operato/data-grist": "^0.3.20",
29
- "@operato/headroom": "^0.3.20",
30
- "@things-factory/i18n-base": "^4.0.40",
31
- "@things-factory/styles": "^4.0.40",
32
- "@things-factory/utils": "^4.0.40",
28
+ "@operato/data-grist": "^0.3.27",
29
+ "@operato/headroom": "^0.3.27",
30
+ "@things-factory/i18n-base": "^4.0.44",
31
+ "@things-factory/styles": "^4.0.44",
32
+ "@things-factory/utils": "^4.0.44",
33
33
  "lit": "^2.0.2",
34
34
  "underscore": "^1.11.0"
35
35
  },
36
- "gitHead": "f0697b5ab411e4aa1a52de19a6c135f39686eca1"
36
+ "gitHead": "286a037443bfb38c65db964dbfa6c5f2d141d9ac"
37
37
  }