cm-admin 0.1.0 → 0.2.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (37) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +12 -2
  3. data/lib/cm_admin/version.rb +1 -1
  4. data/lib/generators/cm_admin/install_generator.rb +9 -1
  5. data/lib/generators/cm_admin/templates/assets/images/cm.png +0 -0
  6. data/lib/generators/cm_admin/templates/assets/stylesheets/application.css.scss +16 -13
  7. data/lib/generators/cm_admin/templates/assets/stylesheets/{_variable.scss → base/_variable.scss} +5 -2
  8. data/lib/generators/cm_admin/templates/assets/stylesheets/base/auth.scss +75 -0
  9. data/lib/generators/cm_admin/templates/assets/stylesheets/base/form.scss +125 -0
  10. data/lib/generators/cm_admin/templates/assets/stylesheets/base/input-styles.scss +72 -0
  11. data/lib/generators/cm_admin/templates/assets/stylesheets/base/main-nav.scss +79 -0
  12. data/lib/generators/cm_admin/templates/assets/stylesheets/base/scaffold.scss +95 -0
  13. data/lib/generators/cm_admin/templates/assets/stylesheets/base/show.scss +88 -0
  14. data/lib/generators/cm_admin/templates/assets/stylesheets/base/sidebar.scss +69 -0
  15. data/lib/generators/cm_admin/templates/assets/stylesheets/base/table.scss +246 -0
  16. data/lib/generators/cm_admin/templates/layouts/_navbar.html.slim +7 -8
  17. data/lib/generators/cm_admin/templates/layouts/_side_navbar.html.slim +7 -11
  18. data/lib/generators/cm_admin/templates/layouts/application.html.slim +3 -8
  19. data/lib/generators/cm_admin/templates/views/_form.erb +58 -29
  20. data/lib/generators/cm_admin/templates/views/_table.erb +20 -12
  21. data/lib/generators/cm_admin/templates/views/edit.erb +10 -0
  22. data/lib/generators/cm_admin/templates/views/index.erb +5 -5
  23. data/lib/generators/cm_admin/templates/views/new.erb +10 -0
  24. data/lib/generators/cm_admin/templates/views/reset_password.erb +12 -0
  25. data/lib/generators/cm_admin/templates/views/show.erb +17 -7
  26. data/lib/generators/cm_admin/templates/views/sign_in.erb +18 -0
  27. data/lib/generators/cm_admin/view_generator.rb +23 -2
  28. metadata +15 -11
  29. data/lib/generators/cm_admin/templates/assets/images/same-logo.png +0 -0
  30. data/lib/generators/cm_admin/templates/assets/stylesheets/alignment.scss +0 -111
  31. data/lib/generators/cm_admin/templates/assets/stylesheets/devise.scss +0 -98
  32. data/lib/generators/cm_admin/templates/assets/stylesheets/form.scss +0 -131
  33. data/lib/generators/cm_admin/templates/assets/stylesheets/products.scss +0 -21
  34. data/lib/generators/cm_admin/templates/assets/stylesheets/scaffold.scss +0 -241
  35. data/lib/generators/cm_admin/templates/assets/stylesheets/table.scss +0 -90
  36. data/lib/generators/cm_admin/templates/assets/stylesheets/user.scss +0 -25
  37. data/lib/generators/cm_admin/templates/views/_filters.html.slim +0 -0
@@ -0,0 +1,95 @@
1
+ @import "_variable.scss";
2
+
3
+ //main-layout-styles
4
+ .admin-panel {
5
+ display: flex;
6
+ width: 100%;
7
+ height: 100%;
8
+
9
+ // sidebar styles are in sidebar.scss
10
+
11
+ .main {
12
+ width: calc(100% - 250px);
13
+ margin-left: 250px;
14
+ background-color: $main-background;
15
+ overflow-y: auto;
16
+ overflow-x: hidden;
17
+ }
18
+ }
19
+
20
+ //custom-styles
21
+ body {
22
+ box-sizing: border-box;
23
+ width: 100%;
24
+ margin: 0px;
25
+ padding: 0px;
26
+ font-family: "Lato", sans-serif;
27
+ }
28
+
29
+ .circular-border {
30
+ border-radius: 50%;
31
+ }
32
+
33
+ .f12 {
34
+ font-size: 12px;
35
+ }
36
+
37
+ .f14 {
38
+ font-size: 14px;
39
+ }
40
+
41
+ .f16 {
42
+ font-size: 16px;
43
+ }
44
+
45
+ .f20 {
46
+ font-size: 20px;
47
+ }
48
+ .f24 {
49
+ font-size: 24px;
50
+ }
51
+
52
+ //Line Height
53
+ .lh-32 {
54
+ line-height: 32px;
55
+ }
56
+
57
+ a:hover,
58
+ a {
59
+ text-decoration: none !important;
60
+ }
61
+
62
+ .border-top {
63
+ border-top: 1px solid #ccc;
64
+ }
65
+ .border-bottom {
66
+ border-bottom: 1px solid #ccc;
67
+ }
68
+
69
+ h6 a {
70
+ color: white !important;
71
+ }
72
+ a:hover {
73
+ color: lightgrey !important;
74
+ }
75
+
76
+ .breadcrumb-nav {
77
+ margin: 0;
78
+ a {
79
+ color: lightgrey !important;
80
+ }
81
+ }
82
+
83
+ .active {
84
+ a {
85
+ color: white !important;
86
+ }
87
+ }
88
+
89
+ .hidden {
90
+ display: none !important;
91
+ }
92
+
93
+ .pointer {
94
+ cursor: pointer;
95
+ }
@@ -0,0 +1,88 @@
1
+ @import "_variable.scss";
2
+
3
+ .show-wrapper {
4
+ margin-top: 60px;
5
+
6
+ &__tab-bar {
7
+ position: fixed;
8
+ top: 60px;
9
+ left: 250px;
10
+ display: flex;
11
+ justify-content: space-between;
12
+ align-items: center;
13
+ width: calc(100% - 250px);
14
+ height: 60px;
15
+ padding: 0 20px;
16
+ background-color: $white;
17
+ box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.06);
18
+ z-index: 9;
19
+
20
+ .tab-menu {
21
+ display: flex;
22
+ .tab-item {
23
+ color: #172b4d;
24
+ font-size: 14px;
25
+ font-weight: 600;
26
+ padding: 18px 0;
27
+ margin-right: 24px;
28
+ cursor: pointer;
29
+ &.active {
30
+ border-bottom: 2px solid #0099ff;
31
+ }
32
+ }
33
+ }
34
+
35
+ .edit-btn {
36
+ padding: 5px 10px;
37
+ color: $white;
38
+ background-color: #0099ff;
39
+ border-radius: 4px;
40
+ transition: all 0.2s linear;
41
+ cursor: pointer;
42
+ &:hover {
43
+ box-shadow: 0px 37px 20px -20px rgba(0, 0, 0, 0.2);
44
+ transform: scale(1.2);
45
+ }
46
+ }
47
+ }
48
+
49
+ &__info-inner {
50
+ margin-top: 120px;
51
+ padding: 20px;
52
+
53
+ .paper {
54
+ padding: 20px;
55
+ background-color: $white;
56
+ box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
57
+ border: 1px solid #ebecf0;
58
+ border-radius: 4px;
59
+ }
60
+
61
+ .info-flex {
62
+ display: flex;
63
+ margin-bottom: 24px;
64
+ &:nth-last-child(1) {
65
+ margin-bottom: 0;
66
+ }
67
+ &__lhs {
68
+ width: 20%;
69
+ p {
70
+ color: #172b4d;
71
+ font-size: 14px;
72
+ line-height: 19px;
73
+ opacity: 0.6;
74
+ margin: 0;
75
+ }
76
+ }
77
+ &__rhs {
78
+ width: 80%;
79
+ p {
80
+ color: #172b4d;
81
+ font-size: 14px;
82
+ line-height: 19px;
83
+ margin: 0;
84
+ }
85
+ }
86
+ }
87
+ }
88
+ }
@@ -0,0 +1,69 @@
1
+ @import "_variable.scss";
2
+
3
+ .sidebar-menu {
4
+ position: fixed;
5
+ top: 0;
6
+ left: 0;
7
+ width: 250px;
8
+ height: 100%;
9
+ background-color: $elephant-black;
10
+ overflow: hidden;
11
+ z-index: 1;
12
+
13
+ &__logo-header {
14
+ display: flex;
15
+ justify-content: center;
16
+ align-items: center;
17
+ height: 60px;
18
+ padding: 8px;
19
+ background-color: $active-bg;
20
+ img {
21
+ width: 100%;
22
+ object-fit: cover;
23
+ }
24
+ }
25
+
26
+ &__tabs-wrapper {
27
+ height: calc(100vh - 115px);
28
+ padding: 20px 0;
29
+ overflow-y: auto;
30
+
31
+ .tab-link {
32
+ padding: 0;
33
+ text-decoration: none;
34
+ color: $nav-text-color;
35
+ cursor: pointer;
36
+ .tab-item {
37
+ position: relative;
38
+ padding: 10px 0;
39
+ transition: all 0.2s linear;
40
+ cursor: pointer;
41
+ &:hover {
42
+ background-color: #4b4b4b;
43
+ }
44
+ &.active {
45
+ background-color: $active-bg;
46
+ border-left: 4px solid #0099ff;
47
+ }
48
+ .tab-name {
49
+ color: $nav-text-color;
50
+ }
51
+ }
52
+ }
53
+ }
54
+
55
+ &__footer {
56
+ position: absolute;
57
+ bottom: 5px;
58
+ width: 100%;
59
+ .auth-link {
60
+ display: block;
61
+ color: $white;
62
+ padding: 10px 0;
63
+ transition: all 0.2s linear;
64
+ &:hover {
65
+ background-color: #000000;
66
+ }
67
+ }
68
+ }
69
+ }
@@ -0,0 +1,246 @@
1
+ @import "_variable.scss";
2
+
3
+ .main-body {
4
+ margin-top: 60px;
5
+
6
+ .top-bar {
7
+ position: fixed;
8
+ top: 60px;
9
+ left: 250px;
10
+ width: calc(100% - 250px);
11
+ height: 60px;
12
+ padding: 10px 20px;
13
+ background-color: $white;
14
+ box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.06);
15
+ z-index: 9;
16
+ @media screen and (max-width: 1280px) {
17
+ min-height: 60px;
18
+ }
19
+ }
20
+
21
+ .table-container {
22
+ margin-top: 120px;
23
+ padding: 20px;
24
+ }
25
+
26
+ //filter-styles-starts-here
27
+ .filter-section {
28
+ display: flex;
29
+ justify-content: space-between;
30
+ align-items: center;
31
+ width: 100%;
32
+ height: 100%;
33
+ @media screen and (max-width: 1280px) {
34
+ flex-wrap: wrap;
35
+ }
36
+ &__lhs {
37
+ display: flex;
38
+ align-items: center;
39
+ width: 75%;
40
+ .filter-field {
41
+ position: relative;
42
+ width: 250px;
43
+ margin-right: 10px;
44
+ @media screen and (max-width: 1280px) {
45
+ margin-bottom: 10px;
46
+ }
47
+
48
+ //input-styles
49
+ input {
50
+ width: 100%;
51
+ height: 39px;
52
+ border: 1px solid #ccc;
53
+ border-radius: 4px;
54
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
55
+ &:focus {
56
+ border-color: #66afe9 !important;
57
+ outline: 0 !important;
58
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6) !important;
59
+ }
60
+ }
61
+
62
+ //select2 styles
63
+ .select2 {
64
+ width: 100% !important;
65
+ .selection {
66
+ //single-select-styles
67
+ .select2-selection--single {
68
+ height: 39px;
69
+ border: 1px solid #ccc;
70
+ border-radius: 4px;
71
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
72
+ &:focus {
73
+ border-color: #66afe9;
74
+ outline: 0;
75
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
76
+ }
77
+ .select2-selection__rendered {
78
+ color: #555555;
79
+ line-height: 36px;
80
+ .select2-search--inline {
81
+ .select2-search__field {
82
+ height: 26px !important;
83
+ }
84
+ }
85
+ }
86
+ .select2-selection__arrow {
87
+ top: 7px;
88
+ b {
89
+ border-color: #0099ff transparent transparent transparent;
90
+ }
91
+ }
92
+ }
93
+ //multi-select-styles
94
+ .select2-selection--multiple {
95
+ max-height: 39px;
96
+ border: 1px solid #ccc;
97
+ border-radius: 4px;
98
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
99
+ overflow-y: auto;
100
+ .select2-selection__rendered {
101
+ .select2-search--inline {
102
+ .select2-search__field {
103
+ height: 26px !important;
104
+ border: none;
105
+ }
106
+ }
107
+ }
108
+ }
109
+ }
110
+ }
111
+
112
+ //single-select-arrow-styles
113
+ .select2-container--open {
114
+ .selection {
115
+ .select2-selection--single {
116
+ .select2-selection__arrow {
117
+ top: 7px;
118
+ b {
119
+ border-color: transparent transparent #0099ff transparent;
120
+ }
121
+ }
122
+ }
123
+ }
124
+ }
125
+
126
+ .filter-rangepicker {
127
+ padding: 6px 12px;
128
+ color: #172b4d;
129
+ font-size: 16px;
130
+ }
131
+
132
+ .field-area {
133
+ display: block;
134
+ padding: 6px 12px;
135
+ font-size: 16px;
136
+ color: #555555;
137
+ }
138
+ .search-icon {
139
+ position: absolute;
140
+ top: 10px;
141
+ right: 15px;
142
+ color: #0099ff;
143
+ }
144
+ .down-arrow-icon {
145
+ position: absolute;
146
+ top: 10px;
147
+ right: 15px;
148
+ font-size: 20px;
149
+ color: #0099ff;
150
+ }
151
+ }
152
+ }
153
+ &__rhs {
154
+ width: 25%;
155
+ text-align: right;
156
+ .filter-btn {
157
+ padding: 5px 10px;
158
+ color: $white;
159
+ font-size: 16px;
160
+ background-color: #0099ff;
161
+ border: none;
162
+ border-radius: 4px;
163
+ transition: all .2s linear;
164
+ &:hover {
165
+ box-shadow: 0px 37px 20px -20px rgba(0, 0, 0, 0.2);
166
+ transform: scale(1.2);
167
+ }
168
+ span {
169
+ margin-right: 5px;
170
+ }
171
+ }
172
+ }
173
+ }
174
+
175
+ .admin-table {
176
+ background-color: $white;
177
+ border-radius: 5px;
178
+ .record-found {
179
+ padding: 10px;
180
+ color: #31383d;
181
+ font-size: 14px;
182
+ opacity: 0.5;
183
+ }
184
+ .cm-table {
185
+ width: 100%;
186
+ &__header {
187
+ tr > th {
188
+ width: 20%;
189
+ color: #172b4d;
190
+ background-color: #fafbfc;
191
+ box-shadow: inset 0 1px 0 0 #ebecf0;
192
+ font-weight: 600;
193
+ font-size: 14px;
194
+ border-bottom: none;
195
+ height: 40px;
196
+ padding: 0 10px;
197
+ }
198
+ }
199
+
200
+ &__body {
201
+ tr {
202
+ transition: all 0.2s linear;
203
+ &:hover {
204
+ background-color: #dfe4e7;
205
+ }
206
+ }
207
+
208
+ tr > td {
209
+ color: #172b4d;
210
+ font-size: 14px;
211
+ padding: 8px 10px;
212
+ }
213
+ .edit-icon {
214
+ font-size: 20px;
215
+ cursor: pointer;
216
+ transition: all .2s linear;
217
+ &:hover {
218
+ box-shadow: 0px 37px 20px -20px rgba(0, 0, 0, 0.2);
219
+ transform: scale(1.2);
220
+ }
221
+ }
222
+ }
223
+ }
224
+ }
225
+
226
+ .cm-pagination {
227
+ display: flex;
228
+ justify-content: center;
229
+ margin: 30px 0;
230
+ &__item {
231
+ padding: 5px 10px;
232
+ font-size: 16px;
233
+ background-color: $white;
234
+ border: 1px solid #cbdcde;
235
+ border-radius: 4px;
236
+ &:nth-child(2) {
237
+ margin-left: 16px;
238
+ transition: all 0.2s linear;
239
+ cursor: pointer;
240
+ &:hover {
241
+ box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
242
+ }
243
+ }
244
+ }
245
+ }
246
+ }