better_ui 0.1.0
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.
- checksums.yaml +7 -0
- data/MIT-LICENSE +20 -0
- data/README.md +195 -0
- data/Rakefile +8 -0
- data/app/assets/stylesheets/better_ui/application.css +371 -0
- data/app/controllers/better_ui/application_controller.rb +4 -0
- data/app/controllers/better_ui/docs_controller.rb +41 -0
- data/app/helpers/better_ui/application_helper.rb +183 -0
- data/app/jobs/better_ui/application_job.rb +4 -0
- data/app/mailers/better_ui/application_mailer.rb +6 -0
- data/app/models/better_ui/application_record.rb +5 -0
- data/app/views/better_ui/docs/component.html.erb +365 -0
- data/app/views/better_ui/docs/index.html.erb +100 -0
- data/app/views/better_ui/docs/show.html.erb +60 -0
- data/app/views/layouts/better_ui/application.html.erb +135 -0
- data/config/routes.rb +10 -0
- data/lib/better_ui/engine.rb +29 -0
- data/lib/better_ui/version.rb +3 -0
- data/lib/better_ui.rb +25 -0
- data/lib/tasks/better_ui_tasks.rake +4 -0
- metadata +151 -0
checksums.yaml
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
---
|
|
2
|
+
SHA256:
|
|
3
|
+
metadata.gz: 8c59e86ef83ec560909908edbbbecd0c33a3663df87de94e99fff0475be5b23d
|
|
4
|
+
data.tar.gz: dc7a3b578f0b2cc70f3e25c843dbc918723bf4d0b7d9bdb4b511e2ad073cc5fd
|
|
5
|
+
SHA512:
|
|
6
|
+
metadata.gz: 66fdc7a9f14ff11b0d79caaff30d1b35ba4878dbbfcbddca7571684eb3628c62288a4fff4a33416b285c479ab96ca22ed271949184c472cb36f4131270a15552
|
|
7
|
+
data.tar.gz: abaf0df7af66450518ab1620ca0fe165e411c2b96a6accfc3a49acb91a93b82c64c7093bacbb7e5e272040275b96063dee0253608a08f406d2e1122ff78cb8c3
|
data/MIT-LICENSE
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
Copyright alessiobussolari
|
|
2
|
+
|
|
3
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
|
4
|
+
a copy of this software and associated documentation files (the
|
|
5
|
+
"Software"), to deal in the Software without restriction, including
|
|
6
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
|
7
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
|
8
|
+
permit persons to whom the Software is furnished to do so, subject to
|
|
9
|
+
the following conditions:
|
|
10
|
+
|
|
11
|
+
The above copyright notice and this permission notice shall be
|
|
12
|
+
included in all copies or substantial portions of the Software.
|
|
13
|
+
|
|
14
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
|
15
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
|
16
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
|
17
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
|
18
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
|
19
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
|
20
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
|
@@ -0,0 +1,195 @@
|
|
|
1
|
+
# BetterUI 🎨
|
|
2
|
+
|
|
3
|
+
[](https://badge.fury.io/rb/better_ui)
|
|
4
|
+
[](LICENSE)
|
|
5
|
+
|
|
6
|
+
> Componenti UI eleganti, coerenti e facilmente integrabili per le tue applicazioni Rails
|
|
7
|
+
|
|
8
|
+
BetterUI è una gemma Rails che fornisce componenti UI riutilizzabili con documentazione integrata. Progettata per essere leggera, personalizzabile e facile da usare, ti aiuta a costruire interfacce belle e consistenti senza JavaScript.
|
|
9
|
+
|
|
10
|
+
## ✨ Caratteristiche principali
|
|
11
|
+
|
|
12
|
+
- **Design puro** - Componenti UI eleganti e completamente CSS, senza JavaScript
|
|
13
|
+
- **Facile integrazione** - Engine Rails montabile che si integra perfettamente con la tua app
|
|
14
|
+
- **Documentazione integrata** - Visualizza esempi e documentazione direttamente nel browser
|
|
15
|
+
- **Altamente personalizzabile** - Adatta facilmente lo stile al tuo brand
|
|
16
|
+
- **Componenti modulari** - Usa solo ciò di cui hai bisogno
|
|
17
|
+
|
|
18
|
+
## 📦 Componenti disponibili
|
|
19
|
+
|
|
20
|
+
| Componente | Descrizione |
|
|
21
|
+
|------------|-------------|
|
|
22
|
+
| **Button** | Pulsanti stilizzati con varianti primary, secondary, success, danger |
|
|
23
|
+
| **Alert** | Messaggi informativi, successi, avvisi ed errori |
|
|
24
|
+
| **Card** | Contenitori flessibili con header, body e footer |
|
|
25
|
+
| **Modal** | Finestre di dialogo modali |
|
|
26
|
+
| **Tabs** | Navigazione a schede |
|
|
27
|
+
| **Form Elements** | Campi di input stilizzati (in arrivo) |
|
|
28
|
+
|
|
29
|
+
## 🚀 Installazione
|
|
30
|
+
|
|
31
|
+
Aggiungi questa riga al Gemfile della tua applicazione:
|
|
32
|
+
|
|
33
|
+
```ruby
|
|
34
|
+
gem 'better_ui', '~> 0.1.0'
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
E poi esegui:
|
|
38
|
+
|
|
39
|
+
```bash
|
|
40
|
+
$ bundle install
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
## ⚙️ Configurazione
|
|
44
|
+
|
|
45
|
+
### Monta l'engine
|
|
46
|
+
|
|
47
|
+
Aggiungi questo al tuo file `config/routes.rb`:
|
|
48
|
+
|
|
49
|
+
```ruby
|
|
50
|
+
Rails.application.routes.draw do
|
|
51
|
+
mount BetterUi::Engine => '/better_ui'
|
|
52
|
+
|
|
53
|
+
# ... altre tue route
|
|
54
|
+
end
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
### Includi gli assets
|
|
58
|
+
|
|
59
|
+
In `app/assets/stylesheets/application.css`:
|
|
60
|
+
|
|
61
|
+
```css
|
|
62
|
+
/*
|
|
63
|
+
*= require better_ui/application
|
|
64
|
+
*/
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
## 🎮 Utilizzo
|
|
68
|
+
|
|
69
|
+
Una volta installato, puoi iniziare ad usare i componenti:
|
|
70
|
+
|
|
71
|
+
```erb
|
|
72
|
+
<%# Button %>
|
|
73
|
+
<%= better_ui_button("Salva", type: "primary") %>
|
|
74
|
+
|
|
75
|
+
<%# Alert %>
|
|
76
|
+
<%= better_ui_alert("Operazione completata", type: "success") %>
|
|
77
|
+
|
|
78
|
+
<%# Card %>
|
|
79
|
+
<%= better_ui_card do %>
|
|
80
|
+
<%= better_ui_card_header("Titolo Card") %>
|
|
81
|
+
<%= better_ui_card_body do %>
|
|
82
|
+
<p>Contenuto della card...</p>
|
|
83
|
+
<% end %>
|
|
84
|
+
<% end %>
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
Visita `/better_ui` nella tua applicazione per vedere la documentazione completa e gli esempi.
|
|
88
|
+
|
|
89
|
+
## 🎨 Personalizzazione
|
|
90
|
+
|
|
91
|
+
### Usa l'inizializzatore
|
|
92
|
+
|
|
93
|
+
Crea un file `config/initializers/better_ui.rb`:
|
|
94
|
+
|
|
95
|
+
```ruby
|
|
96
|
+
BetterUi.configure do |config|
|
|
97
|
+
config.button_defaults = {
|
|
98
|
+
class: 'rounded-lg text-sm'
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
config.alert_defaults = {
|
|
102
|
+
dismissible: true
|
|
103
|
+
}
|
|
104
|
+
end
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
### Personalizza gli stili
|
|
108
|
+
|
|
109
|
+
Sovrascrivi gli stili CSS nel tuo foglio di stile:
|
|
110
|
+
|
|
111
|
+
```css
|
|
112
|
+
.better-ui-button-primary {
|
|
113
|
+
background-color: #8b5cf6; /* Viola personalizzato */
|
|
114
|
+
border-color: #8b5cf6;
|
|
115
|
+
}
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
## 🛠 Sviluppo
|
|
119
|
+
|
|
120
|
+
BetterUI utilizza una app dummy integrata per lo sviluppo e i test. Ecco come iniziare:
|
|
121
|
+
|
|
122
|
+
### Setup iniziale
|
|
123
|
+
|
|
124
|
+
```bash
|
|
125
|
+
# Clona il repository
|
|
126
|
+
git clone https://github.com/alessiobussolari/better_ui.git
|
|
127
|
+
cd better_ui
|
|
128
|
+
|
|
129
|
+
# Installa le dipendenze
|
|
130
|
+
bin/setup
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
### Avvia l'applicazione di test
|
|
134
|
+
|
|
135
|
+
Per vedere i componenti in azione e lavorare sulla documentazione:
|
|
136
|
+
|
|
137
|
+
```bash
|
|
138
|
+
# Avvia il server di test
|
|
139
|
+
cd test/dummy
|
|
140
|
+
bin/rails server
|
|
141
|
+
|
|
142
|
+
# Oppure dalla directory principale
|
|
143
|
+
bin/rails server -b 0.0.0.0
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
Visita `http://localhost:3000/better_ui` nel tuo browser per vedere la documentazione e testare i componenti.
|
|
147
|
+
|
|
148
|
+
### Flusso di sviluppo
|
|
149
|
+
|
|
150
|
+
1. **Crea un branch**: `git checkout -b feature/nuovo-componente`
|
|
151
|
+
2. **Implementa il componente**: Aggiungi helper in `app/helpers/better_ui/application_helper.rb`
|
|
152
|
+
3. **Aggiungi CSS**: Inserisci gli stili in `app/assets/stylesheets/better_ui/application.css`
|
|
153
|
+
4. **Documenta**: Crea file Markdown in `docs/components/`
|
|
154
|
+
5. **Testa**: Verifica nell'app dummy che tutto funzioni correttamente
|
|
155
|
+
6. **Esegui i test**: `rake test`
|
|
156
|
+
|
|
157
|
+
### Build e rilascio
|
|
158
|
+
|
|
159
|
+
Per buildare la gemma localmente:
|
|
160
|
+
|
|
161
|
+
```bash
|
|
162
|
+
bundle exec rake build
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
Per installare la versione in sviluppo:
|
|
166
|
+
|
|
167
|
+
```bash
|
|
168
|
+
bundle exec rake install
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
## 🤝 Contribuire
|
|
172
|
+
|
|
173
|
+
I contributi sono benvenuti e apprezzati! Ecco come puoi aiutare:
|
|
174
|
+
|
|
175
|
+
1. **Fork** il repository su GitHub
|
|
176
|
+
2. **Clona** il tuo fork: `git clone https://github.com/TUO-USERNAME/better_ui.git`
|
|
177
|
+
3. **Crea** un branch per la tua feature: `git checkout -b feature/incredibile-miglioramento`
|
|
178
|
+
4. **Committa** i tuoi cambiamenti: `git commit -am 'Aggiunge una funzionalità incredibile'`
|
|
179
|
+
5. **Pusha** al branch: `git push origin feature/incredibile-miglioramento`
|
|
180
|
+
6. Invia una **Pull Request**
|
|
181
|
+
|
|
182
|
+
### Linee guida
|
|
183
|
+
|
|
184
|
+
- Segui lo stile di codice esistente
|
|
185
|
+
- Scrivi test per le nuove funzionalità
|
|
186
|
+
- Aggiorna la documentazione
|
|
187
|
+
- Crea componenti che funzionano senza JavaScript
|
|
188
|
+
|
|
189
|
+
## 📄 Licenza
|
|
190
|
+
|
|
191
|
+
BetterUI è disponibile come open source sotto i termini della [Licenza MIT](https://opensource.org/licenses/MIT).
|
|
192
|
+
|
|
193
|
+
---
|
|
194
|
+
|
|
195
|
+
Realizzato con ❤️ da [Alessio Bussolari](https://github.com/alessiobussolari)
|
data/Rakefile
ADDED
|
@@ -0,0 +1,371 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* This is a manifest file that'll be compiled into application.css, which will include all the files
|
|
3
|
+
* listed below.
|
|
4
|
+
*
|
|
5
|
+
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
|
|
6
|
+
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
|
|
7
|
+
*
|
|
8
|
+
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
|
|
9
|
+
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
|
|
10
|
+
* files in this directory. Styles in this file should be added after the last require_* statement.
|
|
11
|
+
* It is generally better to create a new file per style scope.
|
|
12
|
+
*
|
|
13
|
+
*= require_tree .
|
|
14
|
+
*= require_self
|
|
15
|
+
*/
|
|
16
|
+
|
|
17
|
+
/*
|
|
18
|
+
* Better UI - Componenti UI per Rails
|
|
19
|
+
*
|
|
20
|
+
*= require_self
|
|
21
|
+
*/
|
|
22
|
+
|
|
23
|
+
:root {
|
|
24
|
+
/* Colori principali */
|
|
25
|
+
--better-ui-primary: #007bff;
|
|
26
|
+
--better-ui-secondary: #6c757d;
|
|
27
|
+
--better-ui-success: #28a745;
|
|
28
|
+
--better-ui-danger: #dc3545;
|
|
29
|
+
--better-ui-warning: #ffc107;
|
|
30
|
+
--better-ui-info: #17a2b8;
|
|
31
|
+
|
|
32
|
+
/* Colori di sfondo */
|
|
33
|
+
--better-ui-bg-light: #ffffff;
|
|
34
|
+
--better-ui-bg-dark: #343a40;
|
|
35
|
+
|
|
36
|
+
/* Colori di testo */
|
|
37
|
+
--better-ui-text-dark: #343a40;
|
|
38
|
+
--better-ui-text-light: #f8f9fa;
|
|
39
|
+
|
|
40
|
+
/* Bordi */
|
|
41
|
+
--better-ui-border-color: #dee2e6;
|
|
42
|
+
--better-ui-border-radius: 0.25rem;
|
|
43
|
+
|
|
44
|
+
/* Spaziature */
|
|
45
|
+
--better-ui-spacer: 1rem;
|
|
46
|
+
--better-ui-spacer-sm: 0.5rem;
|
|
47
|
+
--better-ui-spacer-lg: 1.5rem;
|
|
48
|
+
|
|
49
|
+
/* Transizioni */
|
|
50
|
+
--better-ui-transition: all 0.2s ease-in-out;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
/*
|
|
54
|
+
* Button
|
|
55
|
+
*/
|
|
56
|
+
.better-ui-button {
|
|
57
|
+
display: inline-block;
|
|
58
|
+
font-weight: 400;
|
|
59
|
+
text-align: center;
|
|
60
|
+
white-space: nowrap;
|
|
61
|
+
vertical-align: middle;
|
|
62
|
+
user-select: none;
|
|
63
|
+
border: 1px solid transparent;
|
|
64
|
+
padding: var(--better-ui-spacer-sm) var(--better-ui-spacer);
|
|
65
|
+
font-size: 1rem;
|
|
66
|
+
line-height: 1.5;
|
|
67
|
+
border-radius: var(--better-ui-border-radius);
|
|
68
|
+
transition: var(--better-ui-transition);
|
|
69
|
+
cursor: pointer;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.better-ui-button:focus {
|
|
73
|
+
outline: 0;
|
|
74
|
+
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.better-ui-button-primary {
|
|
78
|
+
color: var(--better-ui-text-light);
|
|
79
|
+
background-color: var(--better-ui-primary);
|
|
80
|
+
border-color: var(--better-ui-primary);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.better-ui-button-primary:hover {
|
|
84
|
+
background-color: #0069d9;
|
|
85
|
+
border-color: #0062cc;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.better-ui-button-secondary {
|
|
89
|
+
color: var(--better-ui-text-light);
|
|
90
|
+
background-color: var(--better-ui-secondary);
|
|
91
|
+
border-color: var(--better-ui-secondary);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.better-ui-button-secondary:hover {
|
|
95
|
+
background-color: #5a6268;
|
|
96
|
+
border-color: #545b62;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.better-ui-button-success {
|
|
100
|
+
color: var(--better-ui-text-light);
|
|
101
|
+
background-color: var(--better-ui-success);
|
|
102
|
+
border-color: var(--better-ui-success);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.better-ui-button-success:hover {
|
|
106
|
+
background-color: #218838;
|
|
107
|
+
border-color: #1e7e34;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.better-ui-button-danger {
|
|
111
|
+
color: var(--better-ui-text-light);
|
|
112
|
+
background-color: var(--better-ui-danger);
|
|
113
|
+
border-color: var(--better-ui-danger);
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.better-ui-button-danger:hover {
|
|
117
|
+
background-color: #c82333;
|
|
118
|
+
border-color: #bd2130;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.better-ui-button:disabled {
|
|
122
|
+
opacity: 0.65;
|
|
123
|
+
cursor: not-allowed;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
/*
|
|
127
|
+
* Alert
|
|
128
|
+
*/
|
|
129
|
+
.better-ui-alert {
|
|
130
|
+
position: relative;
|
|
131
|
+
padding: var(--better-ui-spacer);
|
|
132
|
+
margin-bottom: var(--better-ui-spacer);
|
|
133
|
+
border: 1px solid transparent;
|
|
134
|
+
border-radius: var(--better-ui-border-radius);
|
|
135
|
+
transition: var(--better-ui-transition);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.better-ui-alert-message {
|
|
139
|
+
margin-right: 2rem;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.better-ui-alert-close {
|
|
143
|
+
position: absolute;
|
|
144
|
+
top: var(--better-ui-spacer-sm);
|
|
145
|
+
right: var(--better-ui-spacer-sm);
|
|
146
|
+
background: transparent;
|
|
147
|
+
border: none;
|
|
148
|
+
font-size: 1.25rem;
|
|
149
|
+
font-weight: 700;
|
|
150
|
+
line-height: 1;
|
|
151
|
+
cursor: pointer;
|
|
152
|
+
opacity: 0.5;
|
|
153
|
+
transition: var(--better-ui-transition);
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.better-ui-alert-close:hover {
|
|
157
|
+
opacity: 1;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.better-ui-alert-info {
|
|
161
|
+
color: #0c5460;
|
|
162
|
+
background-color: #d1ecf1;
|
|
163
|
+
border-color: #bee5eb;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.better-ui-alert-success {
|
|
167
|
+
color: #155724;
|
|
168
|
+
background-color: #d4edda;
|
|
169
|
+
border-color: #c3e6cb;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.better-ui-alert-warning {
|
|
173
|
+
color: #856404;
|
|
174
|
+
background-color: #fff3cd;
|
|
175
|
+
border-color: #ffeeba;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.better-ui-alert-danger {
|
|
179
|
+
color: #721c24;
|
|
180
|
+
background-color: #f8d7da;
|
|
181
|
+
border-color: #f5c6cb;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.better-ui-alert-closing {
|
|
185
|
+
opacity: 0;
|
|
186
|
+
transform: translateY(-10px);
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
/*
|
|
190
|
+
* Card
|
|
191
|
+
*/
|
|
192
|
+
.better-ui-card {
|
|
193
|
+
position: relative;
|
|
194
|
+
display: flex;
|
|
195
|
+
flex-direction: column;
|
|
196
|
+
min-width: 0;
|
|
197
|
+
word-wrap: break-word;
|
|
198
|
+
background-color: var(--better-ui-bg-light);
|
|
199
|
+
background-clip: border-box;
|
|
200
|
+
border: 1px solid var(--better-ui-border-color);
|
|
201
|
+
border-radius: var(--better-ui-border-radius);
|
|
202
|
+
margin-bottom: var(--better-ui-spacer);
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
.better-ui-card-header {
|
|
206
|
+
padding: 0.75rem 1.25rem;
|
|
207
|
+
margin-bottom: 0;
|
|
208
|
+
background-color: rgba(0, 0, 0, 0.03);
|
|
209
|
+
border-bottom: 1px solid var(--better-ui-border-color);
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
.better-ui-card-title {
|
|
213
|
+
margin: 0;
|
|
214
|
+
font-size: 1.25rem;
|
|
215
|
+
font-weight: 500;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
.better-ui-card-body {
|
|
219
|
+
flex: 1 1 auto;
|
|
220
|
+
padding: 1.25rem;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.better-ui-card-footer {
|
|
224
|
+
padding: 0.75rem 1.25rem;
|
|
225
|
+
background-color: rgba(0, 0, 0, 0.03);
|
|
226
|
+
border-top: 1px solid var(--better-ui-border-color);
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
/*
|
|
230
|
+
* Tabs
|
|
231
|
+
*/
|
|
232
|
+
.better-ui-tabs {
|
|
233
|
+
margin-bottom: var(--better-ui-spacer);
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
.better-ui-tab-list {
|
|
237
|
+
display: flex;
|
|
238
|
+
flex-wrap: wrap;
|
|
239
|
+
padding-left: 0;
|
|
240
|
+
margin-bottom: 0;
|
|
241
|
+
list-style: none;
|
|
242
|
+
border-bottom: 1px solid var(--better-ui-border-color);
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
.better-ui-tab-item {
|
|
246
|
+
display: block;
|
|
247
|
+
padding: 0.5rem 1rem;
|
|
248
|
+
border: 1px solid transparent;
|
|
249
|
+
border-top-left-radius: var(--better-ui-border-radius);
|
|
250
|
+
border-top-right-radius: var(--better-ui-border-radius);
|
|
251
|
+
cursor: pointer;
|
|
252
|
+
background: none;
|
|
253
|
+
margin-bottom: -1px;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
.better-ui-tab-item:hover {
|
|
257
|
+
border-color: #e9ecef #e9ecef var(--better-ui-border-color);
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
.better-ui-tab-active {
|
|
261
|
+
color: var(--better-ui-primary);
|
|
262
|
+
background-color: var(--better-ui-bg-light);
|
|
263
|
+
border-color: var(--better-ui-border-color) var(--better-ui-border-color) var(--better-ui-bg-light);
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
.better-ui-tab-content {
|
|
267
|
+
padding: var(--better-ui-spacer);
|
|
268
|
+
border: 1px solid var(--better-ui-border-color);
|
|
269
|
+
border-top: 0;
|
|
270
|
+
border-bottom-right-radius: var(--better-ui-border-radius);
|
|
271
|
+
border-bottom-left-radius: var(--better-ui-border-radius);
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
/*
|
|
275
|
+
* Modal
|
|
276
|
+
*/
|
|
277
|
+
.better-ui-modal {
|
|
278
|
+
position: fixed;
|
|
279
|
+
top: 0;
|
|
280
|
+
left: 0;
|
|
281
|
+
width: 100%;
|
|
282
|
+
height: 100%;
|
|
283
|
+
z-index: 1050;
|
|
284
|
+
display: none;
|
|
285
|
+
overflow: hidden;
|
|
286
|
+
align-items: center;
|
|
287
|
+
justify-content: center;
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
.better-ui-modal-background {
|
|
291
|
+
position: fixed;
|
|
292
|
+
top: 0;
|
|
293
|
+
left: 0;
|
|
294
|
+
width: 100%;
|
|
295
|
+
height: 100%;
|
|
296
|
+
background-color: rgba(0, 0, 0, 0.5);
|
|
297
|
+
opacity: 0;
|
|
298
|
+
transition: opacity 0.3s ease;
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
.better-ui-modal-background-visible {
|
|
302
|
+
opacity: 1;
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
.better-ui-modal-dialog {
|
|
306
|
+
position: relative;
|
|
307
|
+
width: 100%;
|
|
308
|
+
max-width: 500px;
|
|
309
|
+
margin: 1.75rem auto;
|
|
310
|
+
background-color: var(--better-ui-bg-light);
|
|
311
|
+
border-radius: var(--better-ui-border-radius);
|
|
312
|
+
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
|
313
|
+
transform: translateY(-20px);
|
|
314
|
+
opacity: 0;
|
|
315
|
+
transition: transform 0.3s ease, opacity 0.3s ease;
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
.better-ui-modal-dialog-visible {
|
|
319
|
+
transform: translateY(0);
|
|
320
|
+
opacity: 1;
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
.better-ui-modal-header {
|
|
324
|
+
display: flex;
|
|
325
|
+
align-items: flex-start;
|
|
326
|
+
justify-content: space-between;
|
|
327
|
+
padding: 1rem;
|
|
328
|
+
border-bottom: 1px solid var(--better-ui-border-color);
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
.better-ui-modal-title {
|
|
332
|
+
margin: 0;
|
|
333
|
+
font-size: 1.25rem;
|
|
334
|
+
font-weight: 500;
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
.better-ui-modal-close {
|
|
338
|
+
background: transparent;
|
|
339
|
+
border: 0;
|
|
340
|
+
font-size: 1.5rem;
|
|
341
|
+
font-weight: 700;
|
|
342
|
+
line-height: 1;
|
|
343
|
+
color: var(--better-ui-text-dark);
|
|
344
|
+
opacity: 0.5;
|
|
345
|
+
cursor: pointer;
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
.better-ui-modal-close:hover {
|
|
349
|
+
opacity: 1;
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
.better-ui-modal-body {
|
|
353
|
+
position: relative;
|
|
354
|
+
padding: 1rem;
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
.better-ui-modal-footer {
|
|
358
|
+
display: flex;
|
|
359
|
+
align-items: center;
|
|
360
|
+
justify-content: flex-end;
|
|
361
|
+
padding: 1rem;
|
|
362
|
+
border-top: 1px solid var(--better-ui-border-color);
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
.better-ui-modal-footer > .better-ui-button {
|
|
366
|
+
margin-left: 0.5rem;
|
|
367
|
+
}
|
|
368
|
+
|
|
369
|
+
body.better-ui-modal-open {
|
|
370
|
+
overflow: hidden;
|
|
371
|
+
}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
module BetterUi
|
|
2
|
+
class DocsController < ApplicationController
|
|
3
|
+
def index
|
|
4
|
+
@components = [
|
|
5
|
+
{ name: 'Button', path: better_ui.docs_component_path('button') },
|
|
6
|
+
{ name: 'Alert', path: better_ui.docs_component_path('alert') },
|
|
7
|
+
{ name: 'Card', path: better_ui.docs_component_path('card') },
|
|
8
|
+
{ name: 'Modal', path: better_ui.docs_component_path('modal') },
|
|
9
|
+
{ name: 'Tabs', path: better_ui.docs_component_path('tabs') },
|
|
10
|
+
{ name: 'Form Elements', path: better_ui.docs_component_path('form_elements') }
|
|
11
|
+
]
|
|
12
|
+
end
|
|
13
|
+
|
|
14
|
+
def show
|
|
15
|
+
doc_file = Rails.root.join('docs', "#{params[:page]}.md")
|
|
16
|
+
|
|
17
|
+
if File.exist?(doc_file)
|
|
18
|
+
@content = File.read(doc_file)
|
|
19
|
+
else
|
|
20
|
+
@content = "# Documentazione non trovata\nLa pagina richiesta non è stata trovata."
|
|
21
|
+
end
|
|
22
|
+
end
|
|
23
|
+
|
|
24
|
+
def component
|
|
25
|
+
component_name = params[:component]
|
|
26
|
+
|
|
27
|
+
# Percorso relativo ai file di documentazione dei componenti
|
|
28
|
+
doc_file = BetterUi::Engine.root.join('docs', 'components', "#{component_name}.md")
|
|
29
|
+
|
|
30
|
+
if File.exist?(doc_file)
|
|
31
|
+
@content = File.read(doc_file)
|
|
32
|
+
else
|
|
33
|
+
@content = "# Componente non trovato\nLa documentazione per il componente '#{component_name}' non è stata trovata."
|
|
34
|
+
end
|
|
35
|
+
|
|
36
|
+
# Decidere quali esempi mostrare in base al componente
|
|
37
|
+
@component_name = component_name
|
|
38
|
+
render :component
|
|
39
|
+
end
|
|
40
|
+
end
|
|
41
|
+
end
|