lesli_view 1.1.3 → 1.1.5
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 +4 -4
- data/app/assets/stylesheets/lesli_view/view.tailwind.css +4362 -0
- data/lib/lesli_view/components/header.html.erb +5 -5
- data/lib/lesli_view/components/tabs.html.erb +59 -26
- data/lib/lesli_view/components/tabs.rb +7 -7
- data/lib/lesli_view/components/timeline.html.erb +28 -25
- data/lib/lesli_view/elements/avatar.html.erb +3 -3
- data/lib/lesli_view/elements/avatar.rb +8 -8
- data/lib/lesli_view/forms/inputs.rb +0 -1
- data/lib/lesli_view/items/activities.html.erb +4 -6
- data/lib/lesli_view/items/discussion.html.erb +6 -5
- data/lib/lesli_view/items/discussions.html.erb +8 -6
- data/lib/lesli_view/items/task.html.erb +16 -11
- data/lib/lesli_view/items/tasks.html.erb +8 -13
- data/lib/lesli_view/partials/engine_spec.html.erb +28 -41
- data/lib/lesli_view/version.rb +2 -2
- data/readme.md +82 -55
- metadata +11 -13
- data/lib/lesli_view/components/tabs.scss +0 -49
- data/lib/lesli_view/components/tabs_spec.rb +0 -0
- data/lib/lesli_view/components/timeline.scss +0 -216
- data/lib/lesli_view/elements/avatar.scss +0 -50
- data/lib/lesli_view/items/activities.scss +0 -39
- data/lib/lesli_view/items/discussions.scss +0 -47
data/readme.md
CHANGED
|
@@ -26,78 +26,96 @@
|
|
|
26
26
|
|
|
27
27
|
<br />
|
|
28
28
|
|
|
29
|
-
|
|
29
|
+
## Introduction
|
|
30
|
+
|
|
31
|
+
LesliView is the official user-interface library for the [Lesli Framework](https://github.com/LesliTech/Lesli). It packages the framework's shared interface patterns as ViewComponent-powered components, Rails form builders, and domain-oriented views.
|
|
32
|
+
|
|
33
|
+
Use LesliView to build consistent server-rendered interfaces without recreating common layouts, controls, forms, and application states in every Lesli engine.
|
|
30
34
|
|
|
31
35
|
<br />
|
|
32
36
|
|
|
33
|
-
##
|
|
37
|
+
## Why LesliView?
|
|
34
38
|
|
|
35
|
-
LesliView
|
|
39
|
+
LesliView provides:
|
|
36
40
|
|
|
37
|
-
|
|
41
|
+
- A shared visual language across Lesli applications and engines
|
|
42
|
+
- Composable, testable components built with ViewComponent
|
|
43
|
+
- Rails-native form builders with consistent labels, controls, messages, and actions
|
|
44
|
+
- Reusable views for common product concepts such as activities, attachments, discussions, and tasks
|
|
45
|
+
- Responsive presentation based on Tailwind CSS utility classes
|
|
46
|
+
- Accessible defaults for labels, button states, navigation, and page actions
|
|
38
47
|
|
|
39
48
|
<br />
|
|
40
49
|
|
|
41
|
-
##
|
|
50
|
+
## Quick Start
|
|
42
51
|
|
|
43
|
-
|
|
44
|
-
- Form builders with consistent fields, inputs, and fieldsets
|
|
45
|
-
- Application layout and navigation components
|
|
46
|
-
- Buttons, tables, avatars, and empty states
|
|
47
|
-
- Charts, calendars, counters, dates, and weather widgets
|
|
48
|
-
- Tasks, discussions, activities, and attachment interfaces
|
|
49
|
-
- Shared Tailwind-based presentation for Lesli applications
|
|
52
|
+
### Requirements
|
|
50
53
|
|
|
51
|
-
|
|
54
|
+
The current development baseline is:
|
|
55
|
+
|
|
56
|
+
- Ruby 3.2 or newer
|
|
57
|
+
- Rails 8.1
|
|
58
|
+
- LesliAssets, configured in the host application's asset build
|
|
52
59
|
|
|
53
|
-
|
|
60
|
+
ViewComponent and Lexxy are installed as runtime dependencies of LesliView.
|
|
54
61
|
|
|
55
|
-
|
|
62
|
+
### Install with Lesli
|
|
63
|
+
|
|
64
|
+
LesliView and LesliAssets are installed automatically with the main `lesli` gem. No additional gem or asset configuration is required in a standard Lesli application.
|
|
65
|
+
|
|
66
|
+
### Install in another Rails application
|
|
67
|
+
|
|
68
|
+
Add LesliView to the application:
|
|
56
69
|
|
|
57
70
|
```shell
|
|
58
71
|
bundle add lesli_view
|
|
59
72
|
```
|
|
60
73
|
|
|
61
|
-
|
|
74
|
+
For the complete Lesli presentation layer, also install the shared assets package:
|
|
75
|
+
|
|
76
|
+
```shell
|
|
77
|
+
bundle add lesli_assets
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
The host application must configure LesliAssets in its asset build so the Lesli styles and icon fonts are available before rendering the components.
|
|
62
81
|
|
|
63
82
|
<br />
|
|
64
83
|
|
|
65
84
|
## Usage
|
|
66
85
|
|
|
67
|
-
###
|
|
86
|
+
### Build a page header
|
|
68
87
|
|
|
69
|
-
|
|
88
|
+
Compose a layout and header directly from an ERB template:
|
|
70
89
|
|
|
71
90
|
```erb
|
|
72
|
-
<%= render
|
|
73
|
-
<%= render
|
|
91
|
+
<%= render LesliView::Layout::Container.new("tickets") do %>
|
|
92
|
+
<%= render LesliView::Components::Header.new(
|
|
93
|
+
"Tickets",
|
|
94
|
+
"Manage customer requests and follow-up work.",
|
|
95
|
+
new_path: new_ticket_path,
|
|
96
|
+
new_label: "Create ticket"
|
|
97
|
+
) %>
|
|
74
98
|
<% end %>
|
|
75
99
|
```
|
|
76
100
|
|
|
77
|
-
### Render an
|
|
101
|
+
### Render an action
|
|
78
102
|
|
|
79
|
-
Elements provide
|
|
103
|
+
Elements provide focused interface primitives with consistent behavior and styling:
|
|
80
104
|
|
|
81
105
|
```erb
|
|
82
|
-
<%= render(
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
solid: true,
|
|
87
|
-
url: new_ticket_path
|
|
88
|
-
)
|
|
106
|
+
<%= render LesliView::Elements::Button.new(
|
|
107
|
+
"Create ticket",
|
|
108
|
+
icon: "add",
|
|
109
|
+
url: new_ticket_path
|
|
89
110
|
) %>
|
|
90
111
|
```
|
|
91
112
|
|
|
92
|
-
###
|
|
113
|
+
### Build a form
|
|
93
114
|
|
|
94
|
-
Pass the LesliView builder to Rails form helpers:
|
|
115
|
+
Pass the LesliView builder to the standard Rails form helpers:
|
|
95
116
|
|
|
96
117
|
```erb
|
|
97
|
-
<%= form_with(
|
|
98
|
-
model: @ticket,
|
|
99
|
-
builder: LesliView::Forms::Builder
|
|
100
|
-
) do |form| %>
|
|
118
|
+
<%= form_with(model: @ticket, builder: LesliView::Forms::Builder) do |form| %>
|
|
101
119
|
<%= form.field_control_text :subject %>
|
|
102
120
|
<%= form.field_control_textarea :description %>
|
|
103
121
|
<%= form.field_control_submit "Save ticket" %>
|
|
@@ -108,18 +126,27 @@ Pass the LesliView builder to Rails form helpers:
|
|
|
108
126
|
|
|
109
127
|
## Library
|
|
110
128
|
|
|
111
|
-
LesliView organizes its interface
|
|
129
|
+
LesliView organizes its public interface into focused groups:
|
|
130
|
+
|
|
131
|
+
| Group | Included building blocks |
|
|
132
|
+
| --- | --- |
|
|
133
|
+
| Charts | Bar, line, and general chart rendering |
|
|
134
|
+
| Components | Headers, panels, tabs, timelines, and toolbars |
|
|
135
|
+
| Elements | Avatars, buttons, empty states, and tables |
|
|
136
|
+
| Forms | Standard and horizontal builders, fields, inputs, and fieldsets |
|
|
137
|
+
| Items | Actions, activities, attachments, discussions, and tasks |
|
|
138
|
+
| Layouts | Shared application containers |
|
|
139
|
+
| Partials | Reusable engine information |
|
|
140
|
+
| Widgets | Calendars, charts, counters, dates, and weather |
|
|
112
141
|
|
|
113
|
-
|
|
114
|
-
- **Components:** headers, panels, tabs, timelines, and toolbars
|
|
115
|
-
- **Elements:** avatars, buttons, empty states, and tables
|
|
116
|
-
- **Forms:** standard and horizontal builders, fields, inputs, and fieldsets
|
|
117
|
-
- **Items:** actions, activities, attachments, discussions, and tasks
|
|
118
|
-
- **Layouts:** shared application containers
|
|
119
|
-
- **Partials:** reusable engine information
|
|
120
|
-
- **Widgets:** calendars, charts, counters, dates, and weather
|
|
142
|
+
See the [LesliView documentation](https://www.lesli.dev/gems/view/) for component options and additional examples.
|
|
121
143
|
|
|
122
|
-
|
|
144
|
+
- [Installation](https://www.lesli.dev/gems/view/about/installation)
|
|
145
|
+
- [Components](https://www.lesli.dev/gems/view/components)
|
|
146
|
+
- [Elements](https://www.lesli.dev/gems/view/elements)
|
|
147
|
+
- [Forms](https://www.lesli.dev/gems/view/forms)
|
|
148
|
+
- [Charts](https://www.lesli.dev/gems/view/charts)
|
|
149
|
+
- [Widgets](https://www.lesli.dev/gems/view/widgets)
|
|
123
150
|
|
|
124
151
|
<br />
|
|
125
152
|
|
|
@@ -133,27 +160,27 @@ cd LesliView
|
|
|
133
160
|
bundle install
|
|
134
161
|
```
|
|
135
162
|
|
|
136
|
-
|
|
163
|
+
Run the default test suite:
|
|
137
164
|
|
|
138
|
-
```
|
|
139
|
-
|
|
165
|
+
```shell
|
|
166
|
+
bundle exec rake
|
|
140
167
|
```
|
|
141
168
|
|
|
142
|
-
|
|
169
|
+
To develop LesliView inside a local Lesli workspace, reference the repository from the host application's `Gemfile`:
|
|
143
170
|
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
```shell
|
|
147
|
-
bundle exec rake
|
|
171
|
+
```ruby
|
|
172
|
+
gem "lesli_view", path: "gems/LesliView"
|
|
148
173
|
```
|
|
149
174
|
|
|
175
|
+
Then run `bundle install` from the host application so changes to the local gem are loaded immediately.
|
|
176
|
+
|
|
150
177
|
<br />
|
|
151
178
|
|
|
152
179
|
## Documentation
|
|
153
180
|
|
|
154
181
|
- [Lesli website](https://www.lesli.dev/)
|
|
155
|
-
- [
|
|
156
|
-
- [
|
|
182
|
+
- [LesliView documentation](https://www.lesli.dev/gems/view/)
|
|
183
|
+
- [Releases and changelog](https://github.com/LesliTech/LesliView/releases)
|
|
157
184
|
- [Issue tracker](https://github.com/LesliTech/LesliView/issues)
|
|
158
185
|
- [Source code](https://github.com/LesliTech/LesliView)
|
|
159
186
|
|
metadata
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: lesli_view
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 1.1.
|
|
4
|
+
version: 1.1.5
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- The Lesli Development Team
|
|
8
|
+
autorequire:
|
|
8
9
|
bindir: exe
|
|
9
10
|
cert_chain: []
|
|
10
|
-
date:
|
|
11
|
+
date: 2026-10-20 00:00:00.000000000 Z
|
|
11
12
|
dependencies:
|
|
12
13
|
- !ruby/object:Gem::Dependency
|
|
13
14
|
name: view_component
|
|
@@ -15,28 +16,28 @@ dependencies:
|
|
|
15
16
|
requirements:
|
|
16
17
|
- - "~>"
|
|
17
18
|
- !ruby/object:Gem::Version
|
|
18
|
-
version: 4.
|
|
19
|
+
version: 4.15.0
|
|
19
20
|
type: :runtime
|
|
20
21
|
prerelease: false
|
|
21
22
|
version_requirements: !ruby/object:Gem::Requirement
|
|
22
23
|
requirements:
|
|
23
24
|
- - "~>"
|
|
24
25
|
- !ruby/object:Gem::Version
|
|
25
|
-
version: 4.
|
|
26
|
+
version: 4.15.0
|
|
26
27
|
- !ruby/object:Gem::Dependency
|
|
27
28
|
name: lexxy
|
|
28
29
|
requirement: !ruby/object:Gem::Requirement
|
|
29
30
|
requirements:
|
|
30
31
|
- - "~>"
|
|
31
32
|
- !ruby/object:Gem::Version
|
|
32
|
-
version: 0.
|
|
33
|
+
version: 1.0.1
|
|
33
34
|
type: :runtime
|
|
34
35
|
prerelease: false
|
|
35
36
|
version_requirements: !ruby/object:Gem::Requirement
|
|
36
37
|
requirements:
|
|
37
38
|
- - "~>"
|
|
38
39
|
- !ruby/object:Gem::Version
|
|
39
|
-
version: 0.
|
|
40
|
+
version: 1.0.1
|
|
40
41
|
description: "LesliView is a ViewComponent-powered UI library for The Lesli Framework,
|
|
41
42
|
\nproviding reusable Rails components and form builders to create consistent, \nscalable,
|
|
42
43
|
and maintainable application interfaces.\n"
|
|
@@ -47,6 +48,7 @@ extensions: []
|
|
|
47
48
|
extra_rdoc_files: []
|
|
48
49
|
files:
|
|
49
50
|
- Rakefile
|
|
51
|
+
- app/assets/stylesheets/lesli_view/view.tailwind.css
|
|
50
52
|
- lib/lesli_view.rb
|
|
51
53
|
- lib/lesli_view/charts/bar.rb
|
|
52
54
|
- lib/lesli_view/charts/general.html.erb
|
|
@@ -59,17 +61,13 @@ files:
|
|
|
59
61
|
- lib/lesli_view/components/panel.scss
|
|
60
62
|
- lib/lesli_view/components/tabs.html.erb
|
|
61
63
|
- lib/lesli_view/components/tabs.rb
|
|
62
|
-
- lib/lesli_view/components/tabs.scss
|
|
63
|
-
- lib/lesli_view/components/tabs_spec.rb
|
|
64
64
|
- lib/lesli_view/components/timeline.html.erb
|
|
65
65
|
- lib/lesli_view/components/timeline.rb
|
|
66
|
-
- lib/lesli_view/components/timeline.scss
|
|
67
66
|
- lib/lesli_view/components/toolbar.css
|
|
68
67
|
- lib/lesli_view/components/toolbar.html.erb
|
|
69
68
|
- lib/lesli_view/components/toolbar.rb
|
|
70
69
|
- lib/lesli_view/elements/avatar.html.erb
|
|
71
70
|
- lib/lesli_view/elements/avatar.rb
|
|
72
|
-
- lib/lesli_view/elements/avatar.scss
|
|
73
71
|
- lib/lesli_view/elements/button.css
|
|
74
72
|
- lib/lesli_view/elements/button.html.erb
|
|
75
73
|
- lib/lesli_view/elements/button.rb
|
|
@@ -91,14 +89,12 @@ files:
|
|
|
91
89
|
- lib/lesli_view/items/actions.rb
|
|
92
90
|
- lib/lesli_view/items/activities.html.erb
|
|
93
91
|
- lib/lesli_view/items/activities.rb
|
|
94
|
-
- lib/lesli_view/items/activities.scss
|
|
95
92
|
- lib/lesli_view/items/attachments.html.erb
|
|
96
93
|
- lib/lesli_view/items/attachments.rb
|
|
97
94
|
- lib/lesli_view/items/discussion.html.erb
|
|
98
95
|
- lib/lesli_view/items/discussion.rb
|
|
99
96
|
- lib/lesli_view/items/discussions.html.erb
|
|
100
97
|
- lib/lesli_view/items/discussions.rb
|
|
101
|
-
- lib/lesli_view/items/discussions.scss
|
|
102
98
|
- lib/lesli_view/items/task.html.erb
|
|
103
99
|
- lib/lesli_view/items/task.rb
|
|
104
100
|
- lib/lesli_view/items/tasks.html.erb
|
|
@@ -129,6 +125,7 @@ metadata:
|
|
|
129
125
|
source_code_uri: https://github.com/LesliTech/LesliView
|
|
130
126
|
bug_tracker_uri: https://github.com/LesliTech/LesliView/issues
|
|
131
127
|
documentation_uri: https://www.lesli.dev/gems/view/
|
|
128
|
+
post_install_message:
|
|
132
129
|
rdoc_options: []
|
|
133
130
|
require_paths:
|
|
134
131
|
- lib
|
|
@@ -143,7 +140,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
143
140
|
- !ruby/object:Gem::Version
|
|
144
141
|
version: '0'
|
|
145
142
|
requirements: []
|
|
146
|
-
rubygems_version: 3.
|
|
143
|
+
rubygems_version: 3.5.16
|
|
144
|
+
signing_key:
|
|
147
145
|
specification_version: 4
|
|
148
146
|
summary: A Rails ViewComponent-based UI library for The Lesli Framework.
|
|
149
147
|
test_files: []
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
.lesli-tabs.is-vertical {
|
|
3
|
-
display: flex;
|
|
4
|
-
|
|
5
|
-
.tabs {
|
|
6
|
-
display: flex;
|
|
7
|
-
flex-direction: column;
|
|
8
|
-
align-items: flex-start;
|
|
9
|
-
|
|
10
|
-
ul {
|
|
11
|
-
display: flex;
|
|
12
|
-
flex-direction: column;
|
|
13
|
-
border-bottom: none;
|
|
14
|
-
border-right: 1px solid #dbdbdb;
|
|
15
|
-
margin-right: 1.5rem;
|
|
16
|
-
min-width: 150px;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
li {
|
|
20
|
-
width: 100%;
|
|
21
|
-
margin-bottom: 0.5rem;
|
|
22
|
-
|
|
23
|
-
&:last-child {
|
|
24
|
-
margin-bottom: 0;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
a {
|
|
28
|
-
justify-content: flex-start;
|
|
29
|
-
padding: 0.75em 1em;
|
|
30
|
-
border-bottom: none;
|
|
31
|
-
border-right: 2px solid transparent;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
&.is-active a {
|
|
35
|
-
border-right-color: var(--color-primary);
|
|
36
|
-
border-bottom-color: transparent;
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
.tab-content {
|
|
41
|
-
flex-grow: 1;
|
|
42
|
-
padding: 1rem;
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
.tab-items {
|
|
47
|
-
flex: 1;
|
|
48
|
-
}
|
|
49
|
-
}
|
|
File without changes
|
|
@@ -1,216 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
.lesli-timelines {
|
|
3
|
-
|
|
4
|
-
.lesli-timeline {
|
|
5
|
-
line-height: 1.4em;
|
|
6
|
-
list-style: none;
|
|
7
|
-
margin: 0;
|
|
8
|
-
padding: 0;
|
|
9
|
-
width: 100%;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
/*----- TIMELINE ITEM -----*/
|
|
13
|
-
.lesli-timeline-item {
|
|
14
|
-
padding-left: 40px;
|
|
15
|
-
position: relative;
|
|
16
|
-
}
|
|
17
|
-
.lesli-timeline-item:last-child {
|
|
18
|
-
padding-bottom: 0;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
/*----- TIMELINE INFO -----*/
|
|
22
|
-
.lesli-timeline-info {
|
|
23
|
-
font-size: 12px;
|
|
24
|
-
font-weight: 700;
|
|
25
|
-
letter-spacing: 3px;
|
|
26
|
-
margin: 0 0 0.5em 0;
|
|
27
|
-
text-transform: uppercase;
|
|
28
|
-
white-space: nowrap;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
/*----- TIMELINE MARKER -----*/
|
|
32
|
-
.lesli-timeline-marker {
|
|
33
|
-
position: absolute;
|
|
34
|
-
top: 0;
|
|
35
|
-
bottom: 0;
|
|
36
|
-
left: 0;
|
|
37
|
-
width: 15px;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
.lesli-timeline-marker:before2 {
|
|
41
|
-
background: #ff6b6b;
|
|
42
|
-
border: 3px solid transparent;
|
|
43
|
-
border-radius: 100%;
|
|
44
|
-
content: "";
|
|
45
|
-
display: block;
|
|
46
|
-
height: 15px;
|
|
47
|
-
position: absolute;
|
|
48
|
-
top: 4px;
|
|
49
|
-
left: 0;
|
|
50
|
-
width: 15px;
|
|
51
|
-
transition: background 0.3s ease-in-out, border 0.3s ease-in-out;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
.lesli-timeline-marker:after {
|
|
55
|
-
content: "";
|
|
56
|
-
width: 2px;
|
|
57
|
-
background: #ccd5db;
|
|
58
|
-
display: block;
|
|
59
|
-
position: absolute;
|
|
60
|
-
top: 24px;
|
|
61
|
-
bottom: 0;
|
|
62
|
-
left: 0;
|
|
63
|
-
right: 0;
|
|
64
|
-
margin-left: auto;
|
|
65
|
-
margin-right: auto;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
.lesli-timeline-item:last-child .lesli-timeline-marker:after {
|
|
69
|
-
content: none;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
.lesli-timeline-item:not(.period):hover .lesli-timeline-marker:before {
|
|
73
|
-
background: transparent;
|
|
74
|
-
border: 3px solid #ff6b6b;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
/*----- TIMELINE CONTENT -----*/
|
|
78
|
-
.lesli-timeline-content {
|
|
79
|
-
padding-bottom: 40px;
|
|
80
|
-
}
|
|
81
|
-
.lesli-timeline-content p:last-child {
|
|
82
|
-
margin-bottom: 0;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
/*----- TIMELINE PERIOD -----*/
|
|
86
|
-
.period {
|
|
87
|
-
padding: 0;
|
|
88
|
-
}
|
|
89
|
-
.period .lesli-timeline-info {
|
|
90
|
-
display: none;
|
|
91
|
-
}
|
|
92
|
-
.period .lesli-timeline-marker:before {
|
|
93
|
-
background: transparent;
|
|
94
|
-
content: "";
|
|
95
|
-
width: 15px;
|
|
96
|
-
height: auto;
|
|
97
|
-
border: none;
|
|
98
|
-
border-radius: 0;
|
|
99
|
-
top: 0;
|
|
100
|
-
bottom: 30px;
|
|
101
|
-
position: absolute;
|
|
102
|
-
border-top: 3px solid #ccd5db;
|
|
103
|
-
border-bottom: 3px solid #ccd5db;
|
|
104
|
-
}
|
|
105
|
-
.period .lesli-timeline-marker:after {
|
|
106
|
-
content: "";
|
|
107
|
-
height: 32px;
|
|
108
|
-
top: auto;
|
|
109
|
-
}
|
|
110
|
-
.period .lesli-timeline-content {
|
|
111
|
-
padding: 40px 0 70px;
|
|
112
|
-
}
|
|
113
|
-
.period .timeline-title {
|
|
114
|
-
margin: 0;
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
/*----------------------------------------------
|
|
118
|
-
MOD: TIMELINE SPLIT
|
|
119
|
-
----------------------------------------------*/
|
|
120
|
-
@media (min-width: 768px) {
|
|
121
|
-
.lesli-timeline-split .timeline, .timeline-centered .lesli-timeline {
|
|
122
|
-
display: table;
|
|
123
|
-
}
|
|
124
|
-
.lesli-timeline-split .lesli-timeline-item, .timeline-centered .lesli-timeline-item {
|
|
125
|
-
display: table-row;
|
|
126
|
-
padding: 0;
|
|
127
|
-
}
|
|
128
|
-
.lesli-timeline-split .lesli-timeline-info, .timeline-centered .lesli-timeline-info,
|
|
129
|
-
.lesli-timeline-split .lesli-timeline-marker,
|
|
130
|
-
.timeline-centered .lesli-timeline-marker,
|
|
131
|
-
.lesli-timeline-split .lesli-timeline-content,
|
|
132
|
-
.timeline-centered .lesli-timeline-content,
|
|
133
|
-
.lesli-timeline-split .period .lesli-timeline-info {
|
|
134
|
-
display: table-cell;
|
|
135
|
-
vertical-align: top;
|
|
136
|
-
}
|
|
137
|
-
.lesli-timeline-split .lesli-timeline-marker, .timeline-centered .lesli-timeline-marker {
|
|
138
|
-
position: relative;
|
|
139
|
-
}
|
|
140
|
-
.lesli-timeline-split .lesli-timeline-content, .timeline-centered .lesli-timeline-content {
|
|
141
|
-
padding-left: 30px;
|
|
142
|
-
}
|
|
143
|
-
.lesli-timeline-split .lesli-timeline-info, .timeline-centered .lesli-timeline-info {
|
|
144
|
-
padding-right: 30px;
|
|
145
|
-
}
|
|
146
|
-
.lesli-timeline-split .period .timeline-title, .timeline-centered .period .timeline-title {
|
|
147
|
-
position: relative;
|
|
148
|
-
left: -45px;
|
|
149
|
-
}
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
/*----------------------------------------------
|
|
153
|
-
MOD: TIMELINE CENTERED
|
|
154
|
-
----------------------------------------------*/
|
|
155
|
-
@media (min-width: 992px) {
|
|
156
|
-
.timeline-centered,
|
|
157
|
-
.timeline-centered .lesli-timeline-item,
|
|
158
|
-
.timeline-centered .lesli-timeline-info,
|
|
159
|
-
.timeline-centered .lesli-timeline-marker,
|
|
160
|
-
.timeline-centered .lesli-timeline-content {
|
|
161
|
-
display: block;
|
|
162
|
-
margin: 0;
|
|
163
|
-
padding: 0;
|
|
164
|
-
}
|
|
165
|
-
.timeline-centered .lesli-timeline-item {
|
|
166
|
-
padding-bottom: 40px;
|
|
167
|
-
overflow: hidden;
|
|
168
|
-
}
|
|
169
|
-
.timeline-centered .lesli-timeline-marker {
|
|
170
|
-
position: absolute;
|
|
171
|
-
left: 50%;
|
|
172
|
-
margin-left: -7.5px;
|
|
173
|
-
}
|
|
174
|
-
.timeline-centered .lesli-timeline-info,
|
|
175
|
-
.timeline-centered .lesli-timeline-content {
|
|
176
|
-
width: 50%;
|
|
177
|
-
}
|
|
178
|
-
.timeline-centered > .lesli-timeline-item:nth-child(odd) .lesli-timeline-info {
|
|
179
|
-
float: left;
|
|
180
|
-
text-align: right;
|
|
181
|
-
padding-right: 30px;
|
|
182
|
-
}
|
|
183
|
-
.timeline-centered > .lesli-timeline-item:nth-child(odd) .lesli-timeline-content {
|
|
184
|
-
float: right;
|
|
185
|
-
text-align: left;
|
|
186
|
-
padding-left: 30px;
|
|
187
|
-
}
|
|
188
|
-
.timeline-centered > .lesli-timeline-item:nth-child(even) .lesli-timeline-info {
|
|
189
|
-
float: right;
|
|
190
|
-
text-align: left;
|
|
191
|
-
padding-left: 30px;
|
|
192
|
-
}
|
|
193
|
-
.timeline-centered > .lesli-timeline-item:nth-child(even) .lesli-timeline-content {
|
|
194
|
-
float: left;
|
|
195
|
-
text-align: right;
|
|
196
|
-
padding-right: 30px;
|
|
197
|
-
}
|
|
198
|
-
.timeline-centered > .lesli-timeline-item.period .lesli-timeline-content {
|
|
199
|
-
float: none;
|
|
200
|
-
padding: 0;
|
|
201
|
-
width: 100%;
|
|
202
|
-
text-align: center;
|
|
203
|
-
}
|
|
204
|
-
.timeline-centered .lesli-timeline-item.period {
|
|
205
|
-
padding: 50px 0 90px;
|
|
206
|
-
}
|
|
207
|
-
.timeline-centered .period .lesli-timeline-marker:after {
|
|
208
|
-
height: 30px;
|
|
209
|
-
bottom: 0;
|
|
210
|
-
top: auto;
|
|
211
|
-
}
|
|
212
|
-
.timeline-centered .period .timeline-title {
|
|
213
|
-
left: auto;
|
|
214
|
-
}
|
|
215
|
-
}
|
|
216
|
-
}
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
|
|
3
|
-
Lesli
|
|
4
|
-
|
|
5
|
-
Copyright (c) 2023, Lesli Technologies, S. A.
|
|
6
|
-
|
|
7
|
-
This program is free software: you can redistribute it and/or modify
|
|
8
|
-
it under the terms of the GNU General Public License as published by
|
|
9
|
-
the Free Software Foundation, either version 3 of the License, or
|
|
10
|
-
(at your option) any later version.
|
|
11
|
-
|
|
12
|
-
This program is distributed in the hope that it will be useful,
|
|
13
|
-
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
14
|
-
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
15
|
-
GNU General Public License for more details.
|
|
16
|
-
|
|
17
|
-
You should have received a copy of the GNU General Public License
|
|
18
|
-
along with this program. If not, see http://www.gnu.org/licenses/.
|
|
19
|
-
|
|
20
|
-
Lesli · Ruby on Rails SaaS development platform.
|
|
21
|
-
|
|
22
|
-
Made with ♥ by https://www.lesli.tech
|
|
23
|
-
Building a better future, one line of code at a time.
|
|
24
|
-
|
|
25
|
-
@contact hello@lesli.tech
|
|
26
|
-
@website https://www.lesli.tech
|
|
27
|
-
@license GPLv3 http://www.gnu.org/licenses/gpl-3.0.en.html
|
|
28
|
-
|
|
29
|
-
// · ~·~ ~·~ ~·~ ~·~ ~·~ ~·~ ~·~ ~·~ ~·~
|
|
30
|
-
// ·
|
|
31
|
-
*/
|
|
32
|
-
|
|
33
|
-
.lesli-element-avatar {
|
|
34
|
-
display: flex;
|
|
35
|
-
justify-content: center;
|
|
36
|
-
align-items: center;
|
|
37
|
-
border-radius: 50%;
|
|
38
|
-
background-color: lesli-css-color(silver, 100);
|
|
39
|
-
|
|
40
|
-
& > img {
|
|
41
|
-
width: 100%;
|
|
42
|
-
height: 100%;
|
|
43
|
-
object-fit: cover;
|
|
44
|
-
border-radius: 50%;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
& > span {
|
|
48
|
-
color: lesli-css-color(silver, 700);
|
|
49
|
-
}
|
|
50
|
-
}
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
|
|
3
|
-
Lesli
|
|
4
|
-
|
|
5
|
-
Copyright (c) 2025, Lesli Technologies, S. A.
|
|
6
|
-
|
|
7
|
-
This program is free software: you can redistribute it and/or modify
|
|
8
|
-
it under the terms of the GNU General Public License as published by
|
|
9
|
-
the Free Software Foundation, either version 3 of the License, or
|
|
10
|
-
(at your option) any later version.
|
|
11
|
-
|
|
12
|
-
This program is distributed in the hope that it will be useful,
|
|
13
|
-
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
14
|
-
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
15
|
-
GNU General Public License for more details.
|
|
16
|
-
|
|
17
|
-
You should have received a copy of the GNU General Public License
|
|
18
|
-
along with this program. If not, see http://www.gnu.org/licenses/.
|
|
19
|
-
|
|
20
|
-
Lesli · Ruby on Rails SaaS Development Framework.
|
|
21
|
-
|
|
22
|
-
Made with ♥ by LesliTech
|
|
23
|
-
Building a better future, one line of code at a time.
|
|
24
|
-
|
|
25
|
-
@contact hello@lesli.tech
|
|
26
|
-
@website https://www.lesli.tech
|
|
27
|
-
@license GPLv3 http://www.gnu.org/licenses/gpl-3.0.en.html
|
|
28
|
-
|
|
29
|
-
// · ~·~ ~·~ ~·~ ~·~ ~·~ ~·~ ~·~ ~·~ ~·~
|
|
30
|
-
// ·
|
|
31
|
-
*/
|
|
32
|
-
|
|
33
|
-
@use "lesli-css" as lesli;
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
.lesli-items-activities {
|
|
37
|
-
background-color: white;
|
|
38
|
-
padding: 2rem;
|
|
39
|
-
}
|