bullet_train-themes-testing 1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (61) hide show
  1. checksums.yaml +7 -0
  2. data/.bt-link +0 -0
  3. data/MIT-LICENSE +20 -0
  4. data/README.md +28 -0
  5. data/Rakefile +8 -0
  6. data/app/assets/config/bullet_train_themes_testing_manifest.js +0 -0
  7. data/app/assets/stylesheets/tailwindcss/base.css +1 -0
  8. data/app/assets/stylesheets/tailwindcss/components.css +1 -0
  9. data/app/assets/stylesheets/tailwindcss/utilities.css +1 -0
  10. data/app/assets/stylesheets/testing/actiontext.css +26 -0
  11. data/app/assets/stylesheets/testing/application.css +33 -0
  12. data/app/assets/stylesheets/testing/electron.css +46 -0
  13. data/app/assets/stylesheets/testing/fields/cloudinary_image.css +58 -0
  14. data/app/assets/stylesheets/testing/fields/date_field.css +19 -0
  15. data/app/assets/stylesheets/testing/fields/index.css +5 -0
  16. data/app/assets/stylesheets/testing/fields/phone_field.css +7 -0
  17. data/app/assets/stylesheets/testing/fields/super_select.css +103 -0
  18. data/app/assets/stylesheets/testing/fields/trix_editor.css +90 -0
  19. data/app/assets/stylesheets/testing/mailer.scss +359 -0
  20. data/app/assets/stylesheets/testing/tailwind/colors.css +100 -0
  21. data/app/assets/stylesheets/testing/tailwind/components.css +151 -0
  22. data/app/assets/stylesheets/testing/tailwind/dark-mode.css +218 -0
  23. data/app/assets/stylesheets/testing/tailwind/utilities.css +49 -0
  24. data/app/assets/stylesheets/testing/turn.css +44 -0
  25. data/app/assets/stylesheets/testing.tailwind.css +5 -0
  26. data/app/javascript/application.testing.js +0 -0
  27. data/app/views/themes/testing/_alert.html.erb +13 -0
  28. data/app/views/themes/testing/_box.html.erb +66 -0
  29. data/app/views/themes/testing/_breadcrumb.html.erb +23 -0
  30. data/app/views/themes/testing/_cell.html.erb +41 -0
  31. data/app/views/themes/testing/_decision_line.html.erb +12 -0
  32. data/app/views/themes/testing/_line.html.erb +3 -0
  33. data/app/views/themes/testing/_notices.html.erb +15 -0
  34. data/app/views/themes/testing/_page.html.erb +12 -0
  35. data/app/views/themes/testing/_title.html.erb +18 -0
  36. data/app/views/themes/testing/attributes/_base.html.erb +30 -0
  37. data/app/views/themes/testing/attributes/_block.html.erb +9 -0
  38. data/app/views/themes/testing/breadcrumbs/_actions.html.erb +22 -0
  39. data/app/views/themes/testing/commentary/_box.html.erb +13 -0
  40. data/app/views/themes/testing/conversations/_card.html.erb +21 -0
  41. data/app/views/themes/testing/conversations/_comment.html.erb +26 -0
  42. data/app/views/themes/testing/conversations/_message.html.erb +136 -0
  43. data/app/views/themes/testing/conversations/_thread_border.html.erb +3 -0
  44. data/app/views/themes/testing/fields/_field.html.erb +81 -0
  45. data/app/views/themes/testing/forms/_errors.html.erb +14 -0
  46. data/app/views/themes/testing/layouts/_account.html.erb +138 -0
  47. data/app/views/themes/testing/layouts/_devise.html.erb +11 -0
  48. data/app/views/themes/testing/layouts/_head.html.erb +8 -0
  49. data/app/views/themes/testing/layouts/_mailer.html.erb +429 -0
  50. data/app/views/themes/testing/memberships/_photos.html.erb +18 -0
  51. data/app/views/themes/testing/menu/_heading.html.erb +3 -0
  52. data/app/views/themes/testing/menu/_item.html.erb +16 -0
  53. data/app/views/themes/testing/menu/_section.html.erb +7 -0
  54. data/app/views/themes/testing/workflow/_box.html.erb +30 -0
  55. data/config/routes.rb +2 -0
  56. data/lib/bullet_train/themes/testing/engine.rb +12 -0
  57. data/lib/bullet_train/themes/testing/version.rb +7 -0
  58. data/lib/bullet_train/themes/testing.rb +16 -0
  59. data/lib/tasks/bullet_train/themes/testing_tasks.rake +53 -0
  60. data/tailwind.testing.config.js +80 -0
  61. metadata +132 -0
@@ -0,0 +1,218 @@
1
+ @layer utilities {
2
+ @media (prefers-color-scheme: dark) {
3
+ /**
4
+ * Color overrides
5
+ **/
6
+ .bg-primary-900 {
7
+ /* TODO We can't really do this. We need to just append a transparency class to these elements. */
8
+ background-color: rgba(0, 0, 0, 0.15);
9
+ }
10
+
11
+ .bg-dark-gradient {
12
+ &:before {
13
+ background: linear-gradient(to bottom right, var(--dark-gradient-from), var(--dark-gradient-to) 100%);
14
+ }
15
+ background: linear-gradient(to bottom right, var(--dark-gradient-from), var(--dark-gradient-to) 100%);
16
+ }
17
+
18
+ /**
19
+ * General
20
+ **/
21
+ .button {
22
+ @apply ring-offset-darkPrimary-700;
23
+ }
24
+
25
+ .table {
26
+ th {
27
+ @apply text-darkPrimary-400;
28
+ }
29
+
30
+ tbody {
31
+ @apply border-gray-500;
32
+
33
+ tr {
34
+ border-top: 1px solid theme('colors.darkPrimary.500');
35
+ }
36
+
37
+ td {
38
+ @apply text-gray-400;
39
+
40
+ a,
41
+ input[type="submit"] {
42
+ @apply text-darkAccent-200;
43
+ }
44
+ }
45
+ }
46
+ }
47
+
48
+ /**
49
+ * Form components
50
+ **/
51
+ .button-secondary {
52
+ @apply text-darkAccent-200;
53
+ }
54
+
55
+ .button-alternative {
56
+ @apply bg-black-400 border-black-400 text-white;
57
+
58
+ &:hover {
59
+ @apply bg-black-300 border-black-200 text-white;
60
+ }
61
+ }
62
+
63
+ /**
64
+ * Custom components
65
+ **/
66
+ /* Color picker */
67
+ .pcr-app {
68
+ @apply bg-darkPrimary-800 border border-solid border-darkPrimary-900;
69
+
70
+ .pcr-interaction .pcr-result {
71
+ @apply text-darkPrimary-300 border border-solid border-darkPrimary-900 bg-darkPrimary-800;
72
+
73
+ &:focus {
74
+ box-shadow: 0 0 0 1px theme('colors.primary.500'), 0 0 0 3px theme('colors.primary.500');
75
+ }
76
+ }
77
+ }
78
+
79
+ /* Date range picker */
80
+ .daterangepicker {
81
+ @apply bg-darkPrimary-800 border-darkPrimary-900;
82
+
83
+ &::before {
84
+ border-bottom-color: theme('colors.darkPrimary.900');
85
+ }
86
+
87
+ &::after {
88
+ border-bottom-color: theme('colors.darkPrimary.800');
89
+ }
90
+
91
+ .calendar-table {
92
+ @apply bg-darkPrimary-800 text-darkPrimary-300;
93
+
94
+ /* navigation arrows */
95
+ .available {
96
+ span {
97
+ @apply border-primary-500;
98
+ }
99
+ }
100
+ }
101
+
102
+ /* Clear and Apply buttons wrapper */
103
+ .drp-buttons {
104
+ border-top-color: theme('colors.darkPrimary.900');
105
+ @apply text-darkPrimary-300;
106
+ }
107
+
108
+ th {
109
+ &.available:hover {
110
+ @apply bg-darkPrimary-600;
111
+ }
112
+ }
113
+
114
+ td {
115
+ &.off {
116
+ @apply bg-darkPrimary-800 text-white;
117
+ }
118
+
119
+ &.available:hover {
120
+ @apply bg-darkPrimary-600;
121
+ }
122
+ }
123
+
124
+ .hourselect, .minuteselect, .ampmselect {
125
+ @apply text-darkPrimary-300 border-darkPrimary-900 bg-darkPrimary-800 !important;
126
+ }
127
+ }
128
+
129
+ /* Phone field */
130
+ .iti__country-list {
131
+ @apply bg-darkPrimary-800 border border-solid border-darkPrimary-900;
132
+ }
133
+
134
+ /* Select2 */
135
+ .select2-container {
136
+ .select2-selection__rendered {
137
+ @apply text-darkPrimary-300 !important;
138
+ }
139
+
140
+ .select2-dropdown {
141
+ @apply bg-darkPrimary-700;
142
+ }
143
+
144
+ .select2-search__field {
145
+ @apply bg-darkPrimary-800 border-darkPrimary-900 !important;
146
+ }
147
+
148
+ .select2-selection--multiple, .select2-selection--single {
149
+ @apply bg-darkPrimary-800 focus:ring-primary-500 border-darkPrimary-900 !important;
150
+ @apply text-darkPrimary-300;
151
+ }
152
+
153
+ /* For the selected options in the multiple select2 component */
154
+ .select2-selection__choice {
155
+ @apply bg-primary-500 border-primary-500 !important;
156
+ @apply text-white;
157
+
158
+ .select2-selection__choice__remove {
159
+ @apply text-white;
160
+
161
+ &:hover {
162
+ @apply text-white;
163
+ }
164
+ }
165
+ }
166
+
167
+ .select2-results__option {
168
+ @apply text-darkPrimary-300;
169
+ }
170
+ }
171
+
172
+ /* Trix Editor */
173
+ trix-editor {
174
+ @apply bg-darkPrimary-800 border-darkPrimary-900 !important;
175
+
176
+ &:focus, &:active {
177
+ @apply border-primary-500 !important;
178
+ }
179
+ }
180
+
181
+ trix-toolbar {
182
+ .trix-button-group, .trix-button {
183
+ @apply border-darkPrimary-900 !important;
184
+ }
185
+ }
186
+
187
+ .tribute-container {
188
+ ul {
189
+ @apply bg-darkPrimary-800 border-darkPrimary-900 !important;
190
+ }
191
+ }
192
+
193
+ .trix-dialogs {
194
+ @apply bg-darkPrimary-800 border-darkPrimary-900 !important;
195
+ }
196
+
197
+ .trix-content a[href^="bullettrain://"] {
198
+ @apply text-white bg-darkPrimary-500;
199
+ }
200
+
201
+ /* CKEditor */
202
+ .ck {
203
+ --ck-color-base-background: theme('colors.darkPrimary.800');
204
+ --ck-color-base-border: theme('colors.darkPrimary.900');
205
+ --ck-color-toolbar-background: theme('colors.darkPrimary.800');
206
+ --ck-color-toolbar-border: theme('colors.darkPrimary.900');
207
+ --ck-color-text: theme('colors.darkPrimary.300');
208
+
209
+ .ck-editor__editable:not(.ck-editor__nested-editable) {
210
+ @apply shadow-none;
211
+
212
+ &.ck-focused {
213
+ @apply shadow-none;
214
+ }
215
+ }
216
+ }
217
+ }
218
+ }
@@ -0,0 +1,49 @@
1
+ @layer utilities {
2
+ .text-2xs {
3
+ @apply uppercase;
4
+ font-size: 0.65rem;
5
+ line-height: 0.9rem;
6
+ letter-spacing: 1px;
7
+ }
8
+
9
+ .space-y {
10
+ @apply space-y-5;
11
+ }
12
+
13
+ .space-x {
14
+ @apply space-x-3;
15
+ }
16
+
17
+ .gap-y {
18
+ @apply gap-y-5;
19
+ }
20
+
21
+ .gap-x {
22
+ @apply gap-x-4;
23
+ }
24
+
25
+ .bg-dark-gradient {
26
+ background-image: linear-gradient(to bottom, var(--primary-700) 0%, var(--primary-800) 100%);
27
+ }
28
+
29
+ .bg-dark-awesome-gradient {
30
+ background-image: linear-gradient(to bottom right, darken(#D7BBEA, 45%) 10%, #0e369a 100%);
31
+ }
32
+
33
+ .bg-light-gradient {
34
+ &:before {
35
+ content: "";
36
+ position: fixed;
37
+ z-index: -1;
38
+ background: linear-gradient(to bottom right, var(--light-gradient-from), var(--light-gradient-to));
39
+ top: 0px;
40
+ left: 0px;
41
+ bottom: 0px;
42
+ right: 0px;
43
+ }
44
+ }
45
+
46
+ [hidden] {
47
+ display: none !important;
48
+ }
49
+ }
@@ -0,0 +1,44 @@
1
+ [data-turn-exit],
2
+ [data-turn-enter] {
3
+ animation-timing-function: cubic-bezier(0.65, 0.05, 0.35, 1);
4
+ animation-fill-mode: forwards;
5
+ }
6
+
7
+ html.turn-exit [data-turn-exit] {
8
+ animation-name: fade-out-up;
9
+ animation-duration: .3s;
10
+ }
11
+
12
+ html.turn-enter [data-turn-enter] {
13
+ animation-name: fade-in-up;
14
+ animation-duration: .6s;
15
+ }
16
+
17
+ html.turn-before-exit [data-turn-exit],
18
+ html.turn-exit [data-turn-exit] {
19
+ will-change: transform, opacity;
20
+ }
21
+
22
+ @keyframes fade-out-up {
23
+ 0% {
24
+ opacity: 1;
25
+ transform: translateZ(0)
26
+ }
27
+
28
+ 100% {
29
+ opacity: 0;
30
+ transform: translate3d(0, -4rem, 0)
31
+ }
32
+ }
33
+
34
+ @keyframes fade-in-up {
35
+ 0% {
36
+ opacity: 0;
37
+ transform: translate3d(0, 4rem, 0)
38
+ }
39
+
40
+ 100% {
41
+ opacity: 1;
42
+ transform: translateZ(0)
43
+ }
44
+ }
@@ -0,0 +1,5 @@
1
+ @import "tailwindcss/base";
2
+ @import "tailwindcss/components";
3
+ @import "tailwindcss/utilities";
4
+
5
+ @import "testing/application";
File without changes
@@ -0,0 +1,13 @@
1
+ <% color ||= 'yellow' %>
2
+
3
+ <div class="rounded-md bg-<%= color %>-400 border border-<%= color %>-500 py-4 px-5 mb-3">
4
+ <h3 class="text-sm text-<%= color %>-900 font-light">
5
+ <%= yield %>
6
+ </h3>
7
+ </div>
8
+
9
+ <% # we have to list out the evaluations we want possible above so purgecss includes them in production. %>
10
+ <% if false %>
11
+ <div class="bg-yellow-400 border-yellow-500 text-yellow-900"></div>
12
+ <div class="bg-red-400 border-red-500 text-red-900"></div>
13
+ <% end %>
@@ -0,0 +1,66 @@
1
+ <% yield p = np %>
2
+
3
+ <% divider ||= nil %>
4
+ <% no_background ||= false %>
5
+ <% title_size ||= "text-xl" %>
6
+ <% body = p.content_for(:body) || p.content_for(:raw_body) %>
7
+ <% pagy ||= nil %>
8
+
9
+ <div class="<%= "bg-white rounded-md shadow dark:bg-darkPrimary-700" unless no_background %> overflow-hidden">
10
+ <div class="py-6 px-8 space-y-2 <%= 'border-b shadow-sm dark:border-darkPrimary-600' if divider %>">
11
+ <% if p.content_for? :title %>
12
+ <h2 class="<%= title_size %> font-semibold dark:text-white">
13
+ <%= p.content_for :title %>
14
+ </h2>
15
+ <% end %>
16
+
17
+ <% if p.content_for? :description %>
18
+ <p class="text-gray-400 font-light leading-normal">
19
+ <%= p.content_for :description %>
20
+ </p>
21
+ <% end %>
22
+ </div>
23
+
24
+ <div class="space-y-4">
25
+ <% if p.content_for? :table %>
26
+ <div class="box-table <%= divider ? 'mt-4' : '-mt-1' %> pb-0.5">
27
+ <%= p.content_for :table %>
28
+ </div>
29
+ <% end %>
30
+
31
+ <% if body %>
32
+ <div class="<%= "pt-7 px-8 space-y-7 #{p.content_for?(:actions) ? 'pb-3' : 'pb-7'}" unless p.content_for?(:raw_body) %>">
33
+ <div class="space-y-4 <%= '-mt-4' unless divider %>">
34
+ <%= body %>
35
+ </div>
36
+ </div>
37
+ <% end %>
38
+
39
+ <% if p.content_for? :actions || pagy %>
40
+ <div class="pb-7 px-8 space-y-7">
41
+ <div class="sm:flex">
42
+ <div class="flex-1 space-x">
43
+ <%= p.content_for :actions %>
44
+ </div>
45
+ <% if pagy && pagy.pages > 1 %>
46
+ <div class="flex-0 mt-3 sm:mt-0">
47
+ <%== pagy_nav(pagy) %>
48
+ </div>
49
+ <% end %>
50
+ </div>
51
+ </div>
52
+ <% end %>
53
+ </div>
54
+
55
+ <% if p.content_for? :footer %>
56
+ <div class="py-4 px-8 bg-gray-50 border-t dark:bg-darkPrimary-800 dark:border-darkPrimary-600">
57
+ <%= p.content_for :footer %>
58
+ </div>
59
+ <% end %>
60
+
61
+ <% if p.content_for? :raw_footer %>
62
+ <div class="bg-gray-50 dark:bg-darkPrimary-800">
63
+ <%= p.content_for :raw_footer %>
64
+ </div>
65
+ <% end %>
66
+ </div>
@@ -0,0 +1,23 @@
1
+ <% first ||= false %>
2
+ <% url ||= nil %>
3
+
4
+ <% # convert [:account, model] "urls" to strings. %>
5
+ <% url = url.is_a?(String) ? url : main_app.url_for(url) if url %>
6
+
7
+ <li>
8
+ <div class="flex items-center">
9
+ <!-- Heroicon name: chevron-right -->
10
+ <svg class="flex-shrink-0 h-3 w-3 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
11
+ <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
12
+ </svg>
13
+
14
+ <% item_style = "ml-3 text-gray-500 uppercase text-2xs tracking-widest" %>
15
+
16
+ <% # don't link to the same page we're already on. %>
17
+ <% if url && url != request.url %>
18
+ <%= link_to label, url, class: "#{item_style} hover:text-gray-700 hover:underline dark:text-primary-300" %>
19
+ <% else %>
20
+ <span class="<%= item_style %>"><%= label %></span>
21
+ <% end %>
22
+ </div>
23
+ </li>
@@ -0,0 +1,41 @@
1
+ <% yield p = np %>
2
+
3
+ <% completion_percent ||= nil %>
4
+
5
+ <div class="py-4 px-8 w-full space-y-3">
6
+ <div class="flex space-x-4">
7
+ <% if p.content_for? :memberships %>
8
+ <div class="flex-0">
9
+ <%= p.content_for :memberships %>
10
+ </div>
11
+ <% end %>
12
+
13
+ <div class="flex-1">
14
+ <div class="flex">
15
+ <div class="flex-1 space-y-4 py-1">
16
+ <div>
17
+ <%= p.content_for :title %>
18
+ </div>
19
+ </div>
20
+
21
+ <% if p.content_for? :actions %>
22
+ <div class="flex-0">
23
+ <%= p.content_for :actions %>
24
+ </div>
25
+ <% end %>
26
+ </div>
27
+
28
+ <% if completion_percent %>
29
+ <div class="mt-3 h-4 bg-gray-100 shadow-inner rounded w-full">
30
+ <div class="h-4 animate-pulse bg-primary-500 rounded" style="width: <%= completion_percent %>%"></div>
31
+ </div>
32
+ <% end %>
33
+
34
+ <% if p.content_for? :status %>
35
+ <div class="<% "mt-2" if completion_percent %> uppercase text-xs text-gray-400">
36
+ <%= p.content_for :status %>
37
+ </div>
38
+ <% end %>
39
+ </div>
40
+ </div>
41
+ </div>
@@ -0,0 +1,12 @@
1
+ <% label ||= t('global.or') %>
2
+
3
+ <div class="relative">
4
+ <div class="absolute inset-0 flex items-center">
5
+ <div class="w-full border-t border-gray-300 dark:border-gray-500"></div>
6
+ </div>
7
+ <div class="relative flex justify-center">
8
+ <span class="px-2 bg-white text-gray-500 uppercase text-xs dark:text-gray-300 dark:bg-darkPrimary-700">
9
+ <%= label %>
10
+ </span>
11
+ </div>
12
+ </div>
@@ -0,0 +1,3 @@
1
+ <div class="border-b border-gray-200 pb-4 dark:border-gray-500" style="position: relative;">
2
+ <div style="background-color: var(--primary-500); width: 26px; height: 4px; position: absolute; left: 0; bottom: -2px; border: 1px solid var(--primary-500); border-radius: 1px;"></div>
3
+ </div>
@@ -0,0 +1,15 @@
1
+ <% attributes ||= [] %>
2
+ <% attributes.select! { |attribute| form.object.errors[attribute].any? } %>
3
+
4
+ <% if notice.present? %>
5
+ <%= render 'account/shared/alert' do %>
6
+ <%= notice %>
7
+ <% end %>
8
+ <% end %>
9
+
10
+ <% if alert.present? || flash[:error] %>
11
+ <%= render 'account/shared/alert', color: 'red' do %>
12
+ <%= alert %>
13
+ <%= flash[:error] %>
14
+ <% end %>
15
+ <% end %>
@@ -0,0 +1,12 @@
1
+ <% yield p = np %>
2
+
3
+ <%= render 'account/shared/title' do |cp| %>
4
+ <% cp.content_for :title, p.content_for(:title) %>
5
+ <% cp.content_for :actions, p.content_for(:actions) %>
6
+ <% end %>
7
+
8
+ <%= render 'account/shared/notices' %>
9
+
10
+ <div class="space-y-8 py-4 xl:py-8 xl:px-8">
11
+ <%= p.yield :body %>
12
+ </div>
@@ -0,0 +1,18 @@
1
+ <% yield p = np %>
2
+
3
+ <div class="flex flex-row items-center">
4
+ <div class="flex-auto">
5
+ <h1 class="font-semibold text-base dark:text-white">
6
+ <%= p.content_for(:title) %>
7
+ </h1>
8
+ </div>
9
+ <div class="flex-auto text-right leading-none">
10
+ <% if p.content_for? :actions %>
11
+ <%= p.content_for :actions %>
12
+ <% end %>
13
+ </div>
14
+ </div>
15
+
16
+ <div class="mb-4">
17
+ <%= render "shared/line" %>
18
+ </div>
@@ -0,0 +1,30 @@
1
+ <% yield p = np %>
2
+
3
+ <% url ||= nil %>
4
+ <% strategy ||= current_attributes_strategy || :none %>
5
+
6
+ <% body = capture do %>
7
+ <% if url.present? %>
8
+ <% link_to url do %>
9
+ <%= p.content_for :body %>
10
+ <% end %>
11
+ <% else %>
12
+ <%= p.content_for :body %>
13
+ <% end %>
14
+ <% end %>
15
+
16
+ <% case strategy %>
17
+ <% when :label %>
18
+ <div>
19
+ <label class="block text-2xs font-semibold py-2 dark:text-white">
20
+ <%= p.content_for :heading %>
21
+ </label>
22
+ <div class="dark:text-gray-400">
23
+ <%= body %>
24
+ </div>
25
+ </div>
26
+
27
+ <% else %>
28
+ <%= body %>
29
+
30
+ <% end %>
@@ -0,0 +1,9 @@
1
+ <% object ||= current_attributes_object %>
2
+ <% strategy ||= current_attributes_strategy || :none %>
3
+ <% url ||= nil %>
4
+
5
+ <% if object.send(attribute).present? %>
6
+ <%= render 'shared/attributes/attribute', object: object, attribute: attribute, strategy: strategy, url: url do %>
7
+ <pre><%= object.send(attribute) %></pre>
8
+ <% end %>
9
+ <% end %>
@@ -0,0 +1,22 @@
1
+ <% yield p = np %>
2
+
3
+ <% p.helpers do
4
+ def account_controller_name_with_namespace
5
+ params[:controller].gsub(/^account\//, '')
6
+ end
7
+ end %>
8
+
9
+ <%
10
+ # don't add controller-specific actions in this file. instead, include them right below where this partial is
11
+ # included. see `app/views/account/teams/_breadcrumbs.html.erb` for an example.
12
+ %>
13
+
14
+ <% if p.account_controller_name_with_namespace == only_for %>
15
+ <% label = if action_name == 'edit'
16
+ ot("#{p.account_controller_name_with_namespace}.breadcrumbs.edit") || t('breadcrumbs.actions.edit')
17
+ elsif action_name == 'new'
18
+ ot("#{p.account_controller_name_with_namespace}.breadcrumbs.new") || t('breadcrumbs.actions.new')
19
+ end %>
20
+
21
+ <%= render 'account/shared/breadcrumb', label: label if label %>
22
+ <% end %>
@@ -0,0 +1,13 @@
1
+ <% yield p = np %>
2
+
3
+ <div class="-m-0.5">
4
+ <div class="border-2 border-dashed rounded-lg border-yellow-300 bg-yellow-100 dark:bg-opacity-10 dark:border-yellow-200 dark:border-opacity-70 -m-3 p-3 xl:py-4 xl:px-4 xl:-mx-4">
5
+ <%= p.content_for :content %>
6
+
7
+ <div class="py-3 px-3 space-y-2 pt-6">
8
+ <p class="text-yellow-600 dark:text-yellow-200 font-light leading-normal">
9
+ <%= p.content_for :commentary %>
10
+ </p>
11
+ </div>
12
+ </div>
13
+ </div>
@@ -0,0 +1,21 @@
1
+ <% conversation ||= subscription.conversation %>
2
+
3
+ <div class="<%= 'border-l-primary-500 border-l-4 border-primary-600' if subscription.unread? %>">
4
+
5
+ <%= link_to [:account, current_user, :conversations, :subscriptions, conversation_id: subscription.conversation.id], class: "#{current_conversation ? 'bg-gray-100 border-l ' : 'bg-white'} h-28 p-1 flex border-b-2 cursor-pointer hover:no-underline hover:bg-gray-50 relative items-center" do %>
6
+ <div class="md:w-1/4 w-1/5 lg:inline-block md:hidden flex-shrink-0">
7
+ <img src="<%= membership_profile_photo_url(conversation.last_message&.membership || current_membership) %>" title="<%= current_membership.name %>" alt="<%= current_membership.name %>" class="md:w-14 md:h-14 w-12 h-12 rounded-full mx-auto border-1 border-white border-2 flex-none">
8
+ </div>
9
+ <div class="w-4/5 md:w-full lg:w-4/5 pl-4 pr-1 flex-initial truncate">
10
+ <p class="text-xs text-gray-300 text-right hover:no-underline"><%= "#{time_ago_in_words conversation.last_message.created_at} ago" unless conversation.last_message.nil? %></p>
11
+ <h2 class="<%= subscription.unread? ? 'font-bold text-gray-800' : 'font-semibold text-gray-600' %> "><%= conversation.subject&.label_string %></h2>
12
+ <div class="text-gray-300">
13
+ <%= conversation.last_message&.user&.label_string %>
14
+ </div>
15
+ <div class="h-8 text-gray-400 text-sm pt-1 hover:no-underline truncate">
16
+ <%= Nokogiri::HTML.fragment(conversation.last_message.body).text unless conversation.last_message.nil? %>
17
+ </div>
18
+ </div>
19
+
20
+ <% end %>
21
+ </div>
@@ -0,0 +1,26 @@
1
+ <% new_message ||= false %>
2
+ <% current_user_message = message.membership.user == current_user %>
3
+ <% avatar = capture do %>
4
+ <img src="<%= membership_profile_photo_url(message.membership) %>" title="<%= message.membership.name %>" alt="<%= message.membership.name %>" class="w-10 h-10 rounded-full <%= current_user_message ? 'order-2' : 'order-1' %>">
5
+ <% end %>
6
+
7
+ <div class="flex py-3 px-2 text-gray-700 <%= message.reply? ? 'border w-full bg-gray-50 rounded-md' : 'border-b' %> <%= 'opacity-30' if new_message %>">
8
+ <div class="mr-3 min-w-max"><%= avatar %></div>
9
+ <div class="flex flex-col w-full">
10
+ <div class=""><span class="uppercase font-bold text-gray-500"><%= message.user.name %></span><span class="font-extralight text-xs text-gray-400"> &bull; <%= time_ago_in_words message.created_at %> ago</span></div>
11
+ <div class="py-2"><%= trix_sanitize message.body %></div>
12
+ <% if message.replies.any? %>
13
+ <div class="space-y-2 mt-2 mb-2">
14
+ <% message.replies.oldest.each do |reply| %>
15
+ <%= render 'account/shared/comment', message: reply %>
16
+ <% end %>
17
+ </div>
18
+ <% end %>
19
+ <% unless message.reply? %>
20
+ <%= turbo_frame_tag "reply_#{message.id}" do %>
21
+ <%= link_to "Reply", [:reply, :account, message], class: "font-light text-sm text-gray-400 hover:text-gray-500 pt-2" %>
22
+ <% end %>
23
+ <% end %>
24
+ </div>
25
+
26
+ </div>