Skip to content

Commit f9014b2

Browse files
adumesnyadumesny
authored
Merge pull request #2772 from adumesny/master
fix angular demo styles
2 parents 5febc5a + 4111b14 commit f9014b2

File tree

2 files changed

+159
-14
lines changed

2 files changed

+159
-14
lines changed

‎angular/angular.json‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -54,14 +54,15 @@
5454
"projects/demo/src/assets"
5555
],
5656
"styles": [
57+
"node_modules/gridstack/dist/gridstack.min.css",
58+
"node_modules/gridstack/dist/gridstack-extra.min.css",
5759
"projects/demo/src/styles.css"
5860
],
5961
"scripts": []
6062
},
6163
"configurations": {
6264
"production": {
63-
"budgets": [
64-
{
65+
"budgets": [{
6566
"type": "initial",
6667
"maximumWarning": "500kb",
6768
"maximumError": "1mb"
@@ -72,12 +73,10 @@
7273
"maximumError": "4kb"
7374
}
7475
],
75-
"fileReplacements": [
76-
{
77-
"replace": "projects/demo/src/environments/environment.ts",
78-
"with": "projects/demo/src/environments/environment.prod.ts"
79-
}
80-
],
76+
"fileReplacements": [{
77+
"replace": "projects/demo/src/environments/environment.ts",
78+
"with": "projects/demo/src/environments/environment.prod.ts"
79+
}],
8180
"outputHashing": "all"
8281
},
8382
"development": {
@@ -121,6 +120,8 @@
121120
"projects/demo/src/assets"
122121
],
123122
"styles": [
123+
"node_modules/gridstack/dist/gridstack.min.css",
124+
"node_modules/gridstack/dist/gridstack-extra.min.css",
124125
"projects/demo/src/styles.css"
125126
],
126127
"scripts": []

‎angular/projects/demo/src/styles.css‎

Lines changed: 150 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,79 @@
1-
/* re-use existing demo css file we already use for the plain demos - that include gridstack.css which is required */
2-
@import "../../../../demo/demo.css";
3-
/* required file for gridstack 2-11 column */
4-
@import "../../../../dist/gridstack-extra.css";
1+
/* Optional styles for demos */
2+
.btn-primary {
3+
color: #fff;
4+
background-color: #007bff;
5+
}
6+
7+
.btn {
8+
display: inline-block;
9+
padding: .375rem .75rem;
10+
line-height: 1.5;
11+
border-radius: .25rem;
12+
}
13+
14+
a {
15+
text-decoration: none;
16+
}
17+
18+
h1 {
19+
font-size: 2.5rem;
20+
margin-bottom: .5rem;
21+
}
22+
23+
.grid-stack {
24+
background: #FAFAD2;
25+
}
26+
27+
.grid-stack-item-content {
28+
text-align: center;
29+
background-color: #18bc9c;
30+
}
31+
32+
.grid-stack-item-removing {
33+
opacity: 0.5;
34+
}
35+
36+
.trash {
37+
height: 100px;
38+
background: rgba(255, 0, 0, 0.1) center center url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDQzOC41MjkgNDM4LjUyOSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDM4LjUyOSA0MzguNTI5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTQxNy42ODksNzUuNjU0Yy0xLjcxMS0xLjcwOS0zLjkwMS0yLjU2OC02LjU2My0yLjU2OGgtODguMjI0TDMwMi45MTcsMjUuNDFjLTIuODU0LTcuMDQ0LTcuOTk0LTEzLjA0LTE1LjQxMy0xNy45ODkgICAgQzI4MC4wNzgsMi40NzMsMjcyLjU1NiwwLDI2NC45NDUsMGgtOTEuMzYzYy03LjYxMSwwLTE1LjEzMSwyLjQ3My0yMi41NTQsNy40MjFjLTcuNDI0LDQuOTQ5LTEyLjU2MywxMC45NDQtMTUuNDE5LDE3Ljk4OSAgICBsLTE5Ljk4NSw0Ny42NzZoLTg4LjIyYy0yLjY2NywwLTQuODUzLDAuODU5LTYuNTY3LDIuNTY4Yy0xLjcwOSwxLjcxMy0yLjU2OCwzLjkwMy0yLjU2OCw2LjU2N3YxOC4yNzQgICAgYzAsMi42NjQsMC44NTUsNC44NTQsMi41NjgsNi41NjRjMS43MTQsMS43MTIsMy45MDQsMi41NjgsNi41NjcsMi41NjhoMjcuNDA2djI3MS44YzAsMTUuODAzLDQuNDczLDI5LjI2NiwxMy40MTgsNDAuMzk4ICAgIGM4Ljk0NywxMS4xMzksMTkuNzAxLDE2LjcwMywzMi4yNjQsMTYuNzAzaDIzNy41NDJjMTIuNTY2LDAsMjMuMzE5LTUuNzU2LDMyLjI2NS0xNy4yNjhjOC45NDUtMTEuNTIsMTMuNDE1LTI1LjE3NCwxMy40MTUtNDAuOTcxICAgIFYxMDkuNjI3aDI3LjQxMWMyLjY2MiwwLDQuODUzLTAuODU2LDYuNTYzLTIuNTY4YzEuNzA4LTEuNzA5LDIuNTctMy45LDIuNTctNi41NjRWODIuMjIxICAgIEM0MjAuMjYsNzkuNTU3LDQxOS4zOTcsNzcuMzY3LDQxNy42ODksNzUuNjU0eiBNMTY5LjMwMSwzOS42NzhjMS4zMzEtMS43MTIsMi45NS0yLjc2Miw0Ljg1My0zLjE0aDkwLjUwNCAgICBjMS45MDMsMC4zODEsMy41MjUsMS40Myw0Ljg1NCwzLjE0bDEzLjcwOSwzMy40MDRIMTU1LjMxMUwxNjkuMzAxLDM5LjY3OHogTTM0Ny4xNzMsMzgwLjI5MWMwLDQuMTg2LTAuNjY0LDguMDQyLTEuOTk5LDExLjU2MSAgICBjLTEuMzM0LDMuNTE4LTIuNzE3LDYuMDg4LTQuMTQxLDcuNzA2Yy0xLjQzMSwxLjYyMi0yLjQyMywyLjQyNy0yLjk5OCwyLjQyN0gxMDAuNDkzYy0wLjU3MSwwLTEuNTY1LTAuODA1LTIuOTk2LTIuNDI3ICAgIGMtMS40MjktMS42MTgtMi44MS00LjE4OC00LjE0My03LjcwNmMtMS4zMzEtMy41MTktMS45OTctNy4zNzktMS45OTctMTEuNTYxVjEwOS42MjdoMjU1LjgxNVYzODAuMjkxeiIgZmlsbD0iI2ZmOWNhZSIvPgoJCTxwYXRoIGQ9Ik0xMzcuMDQsMzQ3LjE3MmgxOC4yNzFjMi42NjcsMCw0Ljg1OC0wLjg1NSw2LjU2Ny0yLjU2N2MxLjcwOS0xLjcxOCwyLjU2OC0zLjkwMSwyLjU2OC02LjU3VjE3My41ODEgICAgYzAtMi42NjMtMC44NTktNC44NTMtMi41NjgtNi41NjdjLTEuNzE0LTEuNzA5LTMuODk5LTIuNTY1LTYuNTY3LTIuNTY1SDEzNy4wNGMtMi42NjcsMC00Ljg1NCwwLjg1NS02LjU2NywyLjU2NSAgICBjLTEuNzExLDEuNzE0LTIuNTY4LDMuOTA0LTIuNTY4LDYuNTY3djE2NC40NTRjMCwyLjY2OSwwLjg1NCw0Ljg1MywyLjU2OCw2LjU3QzEzMi4xODYsMzQ2LjMxNiwxMzQuMzczLDM0Ny4xNzIsMTM3LjA0LDM0Ny4xNzJ6IiBmaWxsPSIjZmY5Y2FlIi8+CgkJPHBhdGggZD0iTTIxMC4xMjksMzQ3LjE3MmgxOC4yNzFjMi42NjYsMCw0Ljg1Ni0wLjg1NSw2LjU2NC0yLjU2N2MxLjcxOC0xLjcxOCwyLjU2OS0zLjkwMSwyLjU2OS02LjU3VjE3My41ODEgICAgYzAtMi42NjMtMC44NTItNC44NTMtMi41NjktNi41NjdjLTEuNzA4LTEuNzA5LTMuODk4LTIuNTY1LTYuNTY0LTIuNTY1aC0xOC4yNzFjLTIuNjY0LDAtNC44NTQsMC44NTUtNi41NjcsMi41NjUgICAgYy0xLjcxNCwxLjcxNC0yLjU2OCwzLjkwNC0yLjU2OCw2LjU2N3YxNjQuNDU0YzAsMi42NjksMC44NTQsNC44NTMsMi41NjgsNi41N0MyMDUuMjc0LDM0Ni4zMTYsMjA3LjQ2NSwzNDcuMTcyLDIxMC4xMjksMzQ3LjE3MnogICAgIiBmaWxsPSIjZmY5Y2FlIi8+CgkJPHBhdGggZD0iTTI4My4yMiwzNDcuMTcyaDE4LjI2OGMyLjY2OSwwLDQuODU5LTAuODU1LDYuNTctMi41NjdjMS43MTEtMS43MTgsMi41NjItMy45MDEsMi41NjItNi41N1YxNzMuNTgxICAgIGMwLTIuNjYzLTAuODUyLTQuODUzLTIuNTYyLTYuNTY3Yy0xLjcxMS0xLjcwOS0zLjkwMS0yLjU2NS02LjU3LTIuNTY1SDI4My4yMmMtMi42NywwLTQuODUzLDAuODU1LTYuNTcxLDIuNTY1ICAgIGMtMS43MTEsMS43MTQtMi41NjYsMy45MDQtMi41NjYsNi41Njd2MTY0LjQ1NGMwLDIuNjY5LDAuODU1LDQuODUzLDIuNTY2LDYuNTdDMjc4LjM2NywzNDYuMzE2LDI4MC41NSwzNDcuMTcyLDI4My4yMiwzNDcuMTcyeiIgZmlsbD0iI2ZmOWNhZSIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=) no-repeat;
39+
}
40+
41+
.sidebar {
42+
background: rgba(0, 255, 0, 0.1);
43+
padding: 25px 0;
44+
height: 100px;
45+
text-align: center;
46+
}
47+
48+
.sidebar .grid-stack-item {
49+
width: 120px;
50+
height: 50px;
51+
border: 2px dashed green;
52+
text-align: center;
53+
line-height: 35px;
54+
background: rgba(0, 255, 0, 0.1);
55+
cursor: default;
56+
display: inline-block;
57+
}
58+
59+
.sidebar .grid-stack-item .grid-stack-item-content {
60+
background: none;
61+
}
62+
63+
/* make nested grid have slightly darker bg take almost all space (need some to tell them apart) so items inside can have similar to external size+margin */
64+
.grid-stack>.grid-stack-item.grid-stack-sub-grid>.grid-stack-item-content {
65+
background: rgba(0, 0, 0, 0.1);
66+
inset: 0 2px;
67+
}
68+
69+
.grid-stack.grid-stack-nested {
70+
background: none;
71+
/* background-color: red; */
72+
/* take entire space */
73+
position: absolute;
74+
inset: 0;
75+
/* TODO change top: if you have content in nested grid */
76+
}
577

678
/* for two.html example from bootstrap.min.css */
779
.row {
@@ -13,29 +85,101 @@
1385
margin-left: -15px;
1486
box-sizing: border-box;
1587
}
88+
1689
.col-md-3 {
1790
-ms-flex: 0 0 25%;
1891
flex: 0 0 25%;
1992
max-width: 25%;
2093
box-sizing: border-box;
2194
}
95+
2296
.col-md-9 {
2397
-ms-flex: 0 0 75%;
2498
flex: 0 0 75%;
2599
max-width: 75%;
26100
box-sizing: border-box;
27101
}
102+
28103
.col-md-6 {
29104
-ms-flex: 0 0 50%;
30105
flex: 0 0 50%;
31106
max-width: 50%;
32107
box-sizing: border-box;
33108
}
34-
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
109+
110+
.col,
111+
.col-1,
112+
.col-10,
113+
.col-11,
114+
.col-12,
115+
.col-2,
116+
.col-3,
117+
.col-4,
118+
.col-5,
119+
.col-6,
120+
.col-7,
121+
.col-8,
122+
.col-9,
123+
.col-auto,
124+
.col-lg,
125+
.col-lg-1,
126+
.col-lg-10,
127+
.col-lg-11,
128+
.col-lg-12,
129+
.col-lg-2,
130+
.col-lg-3,
131+
.col-lg-4,
132+
.col-lg-5,
133+
.col-lg-6,
134+
.col-lg-7,
135+
.col-lg-8,
136+
.col-lg-9,
137+
.col-lg-auto,
138+
.col-md,
139+
.col-md-1,
140+
.col-md-10,
141+
.col-md-11,
142+
.col-md-12,
143+
.col-md-2,
144+
.col-md-3,
145+
.col-md-4,
146+
.col-md-5,
147+
.col-md-6,
148+
.col-md-7,
149+
.col-md-8,
150+
.col-md-9,
151+
.col-md-auto,
152+
.col-sm,
153+
.col-sm-1,
154+
.col-sm-10,
155+
.col-sm-11,
156+
.col-sm-12,
157+
.col-sm-2,
158+
.col-sm-3,
159+
.col-sm-4,
160+
.col-sm-5,
161+
.col-sm-6,
162+
.col-sm-7,
163+
.col-sm-8,
164+
.col-sm-9,
165+
.col-sm-auto,
166+
.col-xl,
167+
.col-xl-1,
168+
.col-xl-10,
169+
.col-xl-11,
170+
.col-xl-12,
171+
.col-xl-2,
172+
.col-xl-3,
173+
.col-xl-4,
174+
.col-xl-5,
175+
.col-xl-6,
176+
.col-xl-7,
177+
.col-xl-8,
178+
.col-xl-9,
179+
.col-xl-auto {
35180
position: relative;
36181
width: 100%;
37182
padding-right: 15px;
38183
padding-left: 15px;
39184
box-sizing: border-box;
40185
}
41-

0 commit comments

Comments
 (0)