Skip to content

Commit ad338ce

Browse files
lucasleandro1lucasleandro1
committed
feat: setup assets pipeline, styling and comprehensive documentation
- Bootstrap integration with custom SCSS components - JavaScript modules for Action Cable and interactive features - Importmap configuration for modern JS module loading - Simple Form configuration with Bootstrap styling - Complete README with installation and usage instructions - RSpec test structure and factories for development - Production deployment configuration and optimization
1 parent 6a562f2 commit ad338ce

63 files changed

Lines changed: 2325 additions & 67 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎README.md‎

Lines changed: 382 additions & 67 deletions
Large diffs are not rendered by default.

‎app/assets/builds/.keep‎

Whitespace-only changes.

‎app/assets/builds/application.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/assets/images/.keep‎

Whitespace-only changes.

‎app/assets/stylesheets/_custom.scss‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
// Custom variables
2+
:root {
3+
--primary-color: #007bff;
4+
--secondary-color: #6c757d;
5+
--success-color: #28a745;
6+
--danger-color: #dc3545;
7+
--warning-color: #ffc107;
8+
--info-color: #17a2b8;
9+
--light-color: #f8f9fa;
10+
--dark-color: #343a40;
11+
}
12+
13+
// Global styles
14+
body {
15+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
16+
background-color: #f8f9fa;
17+
}
18+
19+
.main-content {
20+
margin-top: 2rem;
21+
margin-bottom: 2rem;
22+
}
23+
24+
// Utility classes
25+
.text-truncate-2 {
26+
overflow: hidden;
27+
text-overflow: ellipsis;
28+
display: -webkit-box;
29+
-webkit-line-clamp: 2;
30+
line-clamp: 2; // Standard property for compatibility
31+
-webkit-box-orient: vertical;
32+
}
33+
34+
.avatar-sm {
35+
width: 32px;
36+
height: 32px;
37+
object-fit: cover;
38+
}
39+
40+
.avatar-md {
41+
width: 64px;
42+
height: 64px;
43+
object-fit: cover;
44+
}
45+
46+
.avatar-lg {
47+
width: 128px;
48+
height: 128px;
49+
object-fit: cover;
50+
}
51+
52+
// Flash messages
53+
.flash-messages {
54+
.alert {
55+
margin-bottom: 1rem;
56+
border-radius: 0.5rem;
57+
}
58+
}
59+
60+
// Loading spinner
61+
.spinner-wrapper {
62+
display: flex;
63+
justify-content: center;
64+
align-items: center;
65+
min-height: 200px;
66+
}
67+
68+
// Progress bars
69+
.progress-import {
70+
height: 2rem;
71+
72+
.progress-bar {
73+
font-size: 0.875rem;
74+
line-height: 2rem;
75+
}
76+
}

‎app/assets/stylesheets/application.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/*
2+
* This is a manifest file that'll be compiled into application.css.
3+
*
4+
* With Propshaft, assets are served efficiently without preprocessing steps. You can still include
5+
* application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
6+
* cascading order, meaning styles declared later in the document or manifest will override earlier ones,
7+
* depending on specificity.
8+
*
9+
* Consider organizing styles into separate files for maintainability.
10+
*/

‎app/assets/stylesheets/application.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// Custom styles (Bootstrap loaded via CDN in layout)
2+
@use "custom";
3+
@use "components/navbar";
4+
@use "components/forms";
5+
@use "components/cards";
6+
@use "components/tables";
7+
8+
// Layout styles
9+
@use "layouts/dashboard";
10+
@use "layouts/authentication";

‎app/assets/stylesheets/components/_cards.scss‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
// Card components
2+
.card {
3+
border: none;
4+
border-radius: 0.75rem;
5+
box-shadow: 0 2px 4px rgba(0,0,0,.1);
6+
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
7+
8+
&:hover {
9+
transform: translateY(-2px);
10+
box-shadow: 0 4px 8px rgba(0,0,0,.15);
11+
}
12+
13+
.card-header {
14+
background-color: white;
15+
border-bottom: 1px solid #dee2e6;
16+
border-radius: 0.75rem 0.75rem 0 0 !important;
17+
padding: 1.25rem;
18+
19+
.card-title {
20+
margin-bottom: 0;
21+
font-weight: 600;
22+
color: #495057;
23+
}
24+
}
25+
26+
.card-body {
27+
padding: 1.25rem;
28+
}
29+
30+
.card-footer {
31+
background-color: #f8f9fa;
32+
border-top: 1px solid #dee2e6;
33+
border-radius: 0 0 0.75rem 0.75rem !important;
34+
padding: 1rem 1.25rem;
35+
}
36+
}
37+
38+
// Stats cards
39+
.stats-card {
40+
.card-body {
41+
display: flex;
42+
align-items: center;
43+
padding: 1.5rem;
44+
}
45+
46+
.stats-icon {
47+
width: 60px;
48+
height: 60px;
49+
border-radius: 50%;
50+
display: flex;
51+
align-items: center;
52+
justify-content: center;
53+
font-size: 1.5rem;
54+
margin-right: 1rem;
55+
56+
&.stats-primary {
57+
background-color: rgba(0,123,255,0.1);
58+
color: var(--primary-color);
59+
}
60+
61+
&.stats-success {
62+
background-color: rgba(40,167,69,0.1);
63+
color: var(--success-color);
64+
}
65+
66+
&.stats-warning {
67+
background-color: rgba(255,193,7,0.1);
68+
color: var(--warning-color);
69+
}
70+
}
71+
72+
.stats-content {
73+
flex: 1;
74+
75+
.stats-number {
76+
font-size: 2rem;
77+
font-weight: 700;
78+
margin-bottom: 0;
79+
color: #495057;
80+
}
81+
82+
.stats-label {
83+
font-size: 0.875rem;
84+
color: #6c757d;
85+
margin-bottom: 0;
86+
}
87+
}
88+
}
89+
90+
// User card
91+
.user-card {
92+
.user-avatar {
93+
width: 80px;
94+
height: 80px;
95+
border-radius: 50%;
96+
object-fit: cover;
97+
border: 4px solid #fff;
98+
box-shadow: 0 2px 4px rgba(0,0,0,.1);
99+
}
100+
101+
.user-info {
102+
.user-name {
103+
font-size: 1.25rem;
104+
font-weight: 600;
105+
margin-bottom: 0.25rem;
106+
color: #495057;
107+
}
108+
109+
.user-email {
110+
color: #6c757d;
111+
margin-bottom: 0.5rem;
112+
}
113+
114+
.user-role {
115+
display: inline-block;
116+
padding: 0.25rem 0.75rem;
117+
border-radius: 0.5rem;
118+
font-size: 0.75rem;
119+
font-weight: 600;
120+
text-transform: uppercase;
121+
122+
&.role-admin {
123+
background-color: rgba(220,53,69,0.1);
124+
color: var(--danger-color);
125+
}
126+
127+
&.role-user {
128+
background-color: rgba(0,123,255,0.1);
129+
color: var(--primary-color);
130+
}
131+
}
132+
}
133+
}

‎app/assets/stylesheets/components/_forms.scss‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
// Form styles
2+
.form-container {
3+
max-width: 500px;
4+
margin: 0 auto;
5+
padding: 2rem;
6+
background: white;
7+
border-radius: 0.75rem;
8+
box-shadow: 0 4px 6px rgba(0,0,0,.1);
9+
}
10+
11+
.form-group {
12+
margin-bottom: 1.5rem;
13+
}
14+
15+
.form-control {
16+
border-radius: 0.5rem;
17+
border: 1px solid #dee2e6;
18+
padding: 0.75rem 1rem;
19+
20+
&:focus {
21+
border-color: var(--primary-color);
22+
box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
23+
}
24+
}
25+
26+
.form-label {
27+
font-weight: 600;
28+
margin-bottom: 0.5rem;
29+
color: #495057;
30+
}
31+
32+
.form-text {
33+
font-size: 0.875rem;
34+
color: #6c757d;
35+
}
36+
37+
// File input styling
38+
.form-file {
39+
.form-file-input {
40+
border-radius: 0.5rem;
41+
}
42+
43+
.form-file-label {
44+
border-radius: 0.5rem;
45+
}
46+
}
47+
48+
// Checkbox and radio styling
49+
.form-check {
50+
padding-left: 1.75rem;
51+
52+
.form-check-input {
53+
&:checked {
54+
background-color: var(--primary-color);
55+
border-color: var(--primary-color);
56+
}
57+
}
58+
59+
.form-check-label {
60+
font-weight: 500;
61+
}
62+
}
63+
64+
// Error states
65+
.is-invalid {
66+
border-color: var(--danger-color);
67+
68+
&:focus {
69+
border-color: var(--danger-color);
70+
box-shadow: 0 0 0 0.2rem rgba(220,53,69,.25);
71+
}
72+
}
73+
74+
.invalid-feedback {
75+
display: block;
76+
font-size: 0.875rem;
77+
color: var(--danger-color);
78+
margin-top: 0.25rem;
79+
}

‎app/assets/stylesheets/components/_navbar.scss‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
// Navbar styles
2+
.navbar {
3+
box-shadow: 0 2px 4px rgba(0,0,0,.1);
4+
5+
.navbar-brand {
6+
font-weight: 600;
7+
font-size: 1.25rem;
8+
}
9+
10+
.navbar-nav {
11+
.nav-link {
12+
font-weight: 500;
13+
padding: 0.5rem 1rem;
14+
15+
&:hover {
16+
background-color: rgba(255,255,255,0.1);
17+
border-radius: 0.25rem;
18+
}
19+
}
20+
}
21+
22+
.dropdown-menu {
23+
border: none;
24+
box-shadow: 0 4px 6px rgba(0,0,0,.1);
25+
border-radius: 0.5rem;
26+
}
27+
28+
.navbar-toggler {
29+
border: none;
30+
31+
&:focus {
32+
box-shadow: none;
33+
}
34+
}
35+
}
36+
37+
// User avatar in navbar
38+
.navbar-avatar {
39+
width: 32px;
40+
height: 32px;
41+
border-radius: 50%;
42+
object-fit: cover;
43+
border: 2px solid rgba(255,255,255,0.2);
44+
}

0 commit comments

Comments
 (0)