lookbook 0.3.1 → 0.3.2

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: e1f01b55ea75634f7e4cf2f7fe438ce6b56042daa5d7f178e50d0db7c267a644
4
- data.tar.gz: 81fddb93ab9aed2d51a59ecd00deced19c97a395ced5de3223db0d229f3a57dd
3
+ metadata.gz: 7079abdbe93ab54ba45d95752d1506c90d7aa0734afff9fc4bd947984d2dede9
4
+ data.tar.gz: ff9f78726cb4b6686ced040eca344e8585ea8ec16931d670591692400e7307ff
5
5
  SHA512:
6
- metadata.gz: 535340241df2352ba1c0fa5983f178cdb76d5fc39f0b4c9bcc8c34e4dc782177a4110f85a47ac6632064ac52b064f6936fe9cb764d5a5f2a8b527c9a80342bff
7
- data.tar.gz: 1d580f19491db04693d6e31941c198c4b1416665836d90436e84ddf4dadad7e325612be88c959fd2fff1900c061e2e54e2b8cbf82cda5ce947addcdba7bd251d
6
+ metadata.gz: edcf8e461252b4d18101019c6636bb4a2b298691abac0d8154a4eb30a66a8cb836c3b60b9e63533c66753fc336005ef78e9e8cabac11330c3db0447ec22a9475
7
+ data.tar.gz: fd329c551311cf634c92544226fb5c5fe6104146945e1498cae010a18694fba46b01ce0fc3d86ae1a4b9ff51cb9a10030f4223e0fff601d7b081dc687f3b62d5
@@ -95,7 +95,7 @@ module Lookbook
95
95
  html: preview_controller.render_example_to_string(@preview, example.name)
96
96
  }
97
97
  end
98
- joined = render_to_string "./preview_group", locals: {examples: examples}, layout: nil
98
+ joined = render_to_string "lookbook/preview_group", locals: {examples: examples}, layout: nil
99
99
  preview_controller.render_in_layout_to_string(joined, @preview.lookbook_layout)
100
100
  else
101
101
  preview_controller.request.params[:path] = "#{@preview.preview_name}/#{@example.name}".chomp("/")
@@ -1,5 +1,5 @@
1
1
  <div class="flex flex-col h-full min-h-fill w-full">
2
- <%= render "./shared/header" %>
2
+ <%= render "shared/header" %>
3
3
  <div class="flex flex-col items-center justify-center h-full min-h-fill">
4
4
  <div class="p-4 text-center">
5
5
  <svg class="feather w-10 h-10 text-gray-300 mx-auto">
@@ -8,4 +8,4 @@
8
8
  <h5 class="mt-4 text-gray-400 text-base">Select a preview to get started</h5>
9
9
  </div>
10
10
  </div>
11
- </div>
11
+ </div>
@@ -1 +1 @@
1
- <%= render "./workbench" %>
1
+ <%= render "shared/workbench" %>
@@ -21,14 +21,14 @@
21
21
  <div
22
22
  x-data="page"
23
23
  x-effect="updateTitle"
24
- @refresh.document="fetchHTML().then(doc => $dispatch('document:updated', {doc}))"
24
+ @refresh.document="fetchHTML().then(doc => $dispatch('document:updated', {doc}))"
25
25
  @popstate.window="fetchHTML().then(doc => { $dispatch('document:loaded', {doc}); sidebarOpenMobile = false})"
26
26
  @sidebar:toggle.window="sidebarOpenMobile = !sidebarOpenMobile"
27
27
  :style="`grid-template-columns: ${$store.nav.width}px 1px 1fr;`"
28
28
  class="md:grid w-screen h-screen"
29
29
  >
30
30
  <div class="h-full bg-gray-100 overflow-hidden" x-show="$screen('md') || sidebarOpenMobile" x-cloak>
31
- <%= render "./sidebar" %>
31
+ <%= render "shared/sidebar" %>
32
32
  </div>
33
33
  <div x-data="split(splitProps)" class="h-full gutter border-r border-gray-300 relative" x-show="$screen('md')" x-cloak>
34
34
  <div class="w-[9px] h-full bg-transparent hover:bg-indigo-100 hover:bg-opacity-20 transition absolute top-0 bottom-0 transform -translate-x-1/2 cursor-[col-resize] z-10"></div>
@@ -1,5 +1,5 @@
1
- <%= render "./nav/node", node: node do %>
1
+ <%= render "nav/node", node: node do %>
2
2
  <% node.items.each do |item| %>
3
- <%= render "./nav/#{item.type.to_s}", node: item %>
4
- <% end %>
5
- <% end %>
3
+ <%= render "nav/#{item.type.to_s}", node: item %>
4
+ <% end %>
5
+ <% end %>
@@ -1,11 +1,11 @@
1
1
  <% examples = node.get_examples %>
2
2
  <% if examples.many? %>
3
- <%= render "./nav/node", node: node, path: show_path(examples.first.path) do %>
3
+ <%= render "nav/node", node: node, path: show_path(examples.first.path) do %>
4
4
  <% examples.each do |example| %>
5
- <%= render "./nav/leaf", leaf: example, depth: example.hierarchy_depth + 1 %>
5
+ <%= render "nav/leaf", leaf: example, depth: example.hierarchy_depth + 1 %>
6
6
  <% end %>
7
7
  <% end %>
8
8
  <% else %>
9
9
  <% example = examples.first %>
10
- <%= render "./nav/leaf", leaf: example, depth: example.hierarchy_depth, label: node.label, display: :node %>
11
- <% end %>
10
+ <%= render "nav/leaf", leaf: example, depth: example.hierarchy_depth, label: node.label, display: :node %>
11
+ <% end %>
@@ -5,4 +5,4 @@
5
5
  </svg>
6
6
  </button>
7
7
  <%= yield %>
8
- </header>
8
+ </header>
@@ -27,7 +27,7 @@
27
27
  <% if @nav.items.any? %>
28
28
  <ul x-ref="items">
29
29
  <% @nav.items.each do |item| %>
30
- <%= render "./nav/#{item.type.to_s}", node: item %>
30
+ <%= render "nav/#{item.type.to_s}", node: item %>
31
31
  <% end %>
32
32
  </ul>
33
33
  <div class="p-4 text-center" x-show="hidden" x-cloak>
@@ -41,5 +41,5 @@
41
41
  <% end %>
42
42
  </nav>
43
43
  </div>
44
- </div>
45
- </div>
44
+ </div>
45
+ </div>
@@ -1,12 +1,12 @@
1
1
  <div id="workbench" class="bg-gray-50 h-screen flex flex-col" x-data="workbench">
2
- <%= render "./workbench/header" %>
2
+ <%= render "workbench/header" %>
3
3
  <div class="md:grid flex-grow" :style="`grid-template-rows: 1fr 1px ${$store.inspector.height}px`">
4
- <%= render "./workbench/preview" %>
4
+ <%= render "workbench/preview" %>
5
5
  <div class="w-full gutter border-t border-gray-300 relative" x-data="split(splitProps)" x-show="$screen('md')">
6
6
  <div class="h-[11px] w-full bg-transparent hover:bg-indigo-100 hover:bg-opacity-20 transition absolute left-0 right-0 transform -translate-y-1/2 cursor-[row-resize]"></div>
7
7
  </div>
8
8
  <% if @inspector %>
9
- <%= render "./workbench/inspector", **@inspector %>
9
+ <%= render "workbench/inspector", **@inspector %>
10
10
  <% end %>
11
- </div>
12
- </div>
11
+ </div>
12
+ </div>
@@ -1,4 +1,4 @@
1
- <%= render "./shared/header" do %>
1
+ <%= render "shared/header" do %>
2
2
  <div class="flex items-center">
3
3
  <div class="flex items-center space-x-1">
4
4
  <strong class="whitespace-nowrap truncate"><%= @preview.label %></strong>
@@ -36,4 +36,4 @@
36
36
  </svg>
37
37
  </a>
38
38
  </div>
39
- <% end %>
39
+ <% end %>
@@ -21,12 +21,12 @@
21
21
  <% panes.each do |key, props| %>
22
22
  <div class="flex flex-col h-full relative" x-show="active('<%= key %>')" x-cloak>
23
23
  <% if props[:clipboard].present? %>
24
- <%= render "./shared/clipboard" do %><%= h props[:clipboard].strip %><% end %>
24
+ <%= render "shared/clipboard" do %><%= h props[:clipboard].strip %><% end %>
25
25
  <% end %>
26
26
  <div class="flex flex-col h-full overflow-auto">
27
- <%= render "./workbench/inspector/#{props[:template]}", key: key, **props %>
27
+ <%= render "workbench/inspector/#{props[:template]}", key: key, **props %>
28
28
  </div>
29
29
  </div>
30
30
  <% end %>
31
31
  </div>
32
- </div>
32
+ </div>
@@ -1,3 +1,3 @@
1
1
  module Lookbook
2
- VERSION = "0.3.1"
2
+ VERSION = "0.3.2"
3
3
  end
@@ -1456,28 +1456,28 @@ pre[class*="language-"] {
1456
1456
  bottom: 0px;
1457
1457
  }
1458
1458
 
1459
- .top-1\/2 {
1460
- top: 50%;
1461
- }
1462
-
1463
- .right-2 {
1464
- right: 0.5rem;
1459
+ .top-0 {
1460
+ top: 0px;
1465
1461
  }
1466
1462
 
1467
- .left-0 {
1468
- left: 0px;
1463
+ .bottom-0 {
1464
+ bottom: 0px;
1469
1465
  }
1470
1466
 
1471
1467
  .right-0 {
1472
1468
  right: 0px;
1473
1469
  }
1474
1470
 
1475
- .top-0 {
1476
- top: 0px;
1471
+ .top-1\/2 {
1472
+ top: 50%;
1477
1473
  }
1478
1474
 
1479
- .bottom-0 {
1480
- bottom: 0px;
1475
+ .right-2 {
1476
+ right: 0.5rem;
1477
+ }
1478
+
1479
+ .left-0 {
1480
+ left: 0px;
1481
1481
  }
1482
1482
 
1483
1483
  .left-4 {
@@ -1493,14 +1493,6 @@ pre[class*="language-"] {
1493
1493
  margin-right: auto;
1494
1494
  }
1495
1495
 
1496
- .ml-4 {
1497
- margin-left: 1rem;
1498
- }
1499
-
1500
- .mb-1 {
1501
- margin-bottom: 0.25rem;
1502
- }
1503
-
1504
1496
  .mt-4 {
1505
1497
  margin-top: 1rem;
1506
1498
  }
@@ -1529,6 +1521,14 @@ pre[class*="language-"] {
1529
1521
  margin-right: 0.75rem;
1530
1522
  }
1531
1523
 
1524
+ .ml-4 {
1525
+ margin-left: 1rem;
1526
+ }
1527
+
1528
+ .mb-1 {
1529
+ margin-bottom: 0.25rem;
1530
+ }
1531
+
1532
1532
  .ml-auto {
1533
1533
  margin-left: auto;
1534
1534
  }
@@ -1553,6 +1553,10 @@ pre[class*="language-"] {
1553
1553
  display: none;
1554
1554
  }
1555
1555
 
1556
+ .h-screen {
1557
+ height: 100vh;
1558
+ }
1559
+
1556
1560
  .h-full {
1557
1561
  height: 100%;
1558
1562
  }
@@ -1561,40 +1565,28 @@ pre[class*="language-"] {
1561
1565
  height: 2.5rem;
1562
1566
  }
1563
1567
 
1564
- .h-5 {
1565
- height: 1.25rem;
1568
+ .h-3\.5 {
1569
+ height: 0.875rem;
1566
1570
  }
1567
1571
 
1568
1572
  .h-3 {
1569
1573
  height: 0.75rem;
1570
1574
  }
1571
1575
 
1572
- .h-screen {
1573
- height: 100vh;
1574
- }
1575
-
1576
- .h-\[11px\] {
1577
- height: 11px;
1578
- }
1579
-
1580
- .h-3\.5 {
1581
- height: 0.875rem;
1582
- }
1583
-
1584
1576
  .h-4 {
1585
1577
  height: 1rem;
1586
1578
  }
1587
1579
 
1588
- .w-5 {
1589
- width: 1.25rem;
1580
+ .h-5 {
1581
+ height: 1.25rem;
1590
1582
  }
1591
1583
 
1592
- .w-full {
1593
- width: 100%;
1584
+ .h-\[11px\] {
1585
+ height: 11px;
1594
1586
  }
1595
1587
 
1596
- .w-3 {
1597
- width: 0.75rem;
1588
+ .w-full {
1589
+ width: 100%;
1598
1590
  }
1599
1591
 
1600
1592
  .w-10 {
@@ -1613,10 +1605,18 @@ pre[class*="language-"] {
1613
1605
  width: 0.875rem;
1614
1606
  }
1615
1607
 
1608
+ .w-3 {
1609
+ width: 0.75rem;
1610
+ }
1611
+
1616
1612
  .w-4 {
1617
1613
  width: 1rem;
1618
1614
  }
1619
1615
 
1616
+ .w-5 {
1617
+ width: 1.25rem;
1618
+ }
1619
+
1620
1620
  .max-w-xs {
1621
1621
  max-width: 20rem;
1622
1622
  }
@@ -1633,22 +1633,18 @@ pre[class*="language-"] {
1633
1633
  flex-grow: 1;
1634
1634
  }
1635
1635
 
1636
- .-translate-y-1\/2 {
1637
- --tw-translate-y: -50%;
1638
- transform: var(--tw-transform);
1639
- }
1640
-
1641
1636
  .-translate-x-1\/2 {
1642
1637
  --tw-translate-x: -50%;
1643
1638
  transform: var(--tw-transform);
1644
1639
  }
1645
1640
 
1646
- .transform {
1641
+ .-translate-y-1\/2 {
1642
+ --tw-translate-y: -50%;
1647
1643
  transform: var(--tw-transform);
1648
1644
  }
1649
1645
 
1650
- .cursor-\[row-resize\] {
1651
- cursor: row-resize;
1646
+ .transform {
1647
+ transform: var(--tw-transform);
1652
1648
  }
1653
1649
 
1654
1650
  .cursor-\[col-resize\] {
@@ -1659,6 +1655,10 @@ pre[class*="language-"] {
1659
1655
  cursor: pointer;
1660
1656
  }
1661
1657
 
1658
+ .cursor-\[row-resize\] {
1659
+ cursor: row-resize;
1660
+ }
1661
+
1662
1662
  .cursor-auto {
1663
1663
  cursor: auto;
1664
1664
  }
@@ -1754,22 +1754,22 @@ pre[class*="language-"] {
1754
1754
  border-width: 1px;
1755
1755
  }
1756
1756
 
1757
- .border-b {
1758
- border-bottom-width: 1px;
1759
- }
1760
-
1761
- .border-t {
1762
- border-top-width: 1px;
1763
- }
1764
-
1765
1757
  .border-r {
1766
1758
  border-right-width: 1px;
1767
1759
  }
1768
1760
 
1761
+ .border-b {
1762
+ border-bottom-width: 1px;
1763
+ }
1764
+
1769
1765
  .border-l {
1770
1766
  border-left-width: 1px;
1771
1767
  }
1772
1768
 
1769
+ .border-t {
1770
+ border-top-width: 1px;
1771
+ }
1772
+
1773
1773
  .border-b-2 {
1774
1774
  border-bottom-width: 2px;
1775
1775
  }
@@ -1802,25 +1802,25 @@ pre[class*="language-"] {
1802
1802
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
1803
1803
  }
1804
1804
 
1805
- .bg-transparent {
1806
- background-color: transparent;
1807
- }
1808
-
1809
- .bg-gray-50 {
1810
- --tw-bg-opacity: 1;
1811
- background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
1812
- }
1813
-
1814
1805
  .bg-gray-100 {
1815
1806
  --tw-bg-opacity: 1;
1816
1807
  background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
1817
1808
  }
1818
1809
 
1810
+ .bg-transparent {
1811
+ background-color: transparent;
1812
+ }
1813
+
1819
1814
  .\!bg-indigo-100 {
1820
1815
  --tw-bg-opacity: 1 !important;
1821
1816
  background-color: rgba(224, 231, 255, var(--tw-bg-opacity)) !important;
1822
1817
  }
1823
1818
 
1819
+ .bg-gray-50 {
1820
+ --tw-bg-opacity: 1;
1821
+ background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
1822
+ }
1823
+
1824
1824
  .p-4 {
1825
1825
  padding: 1rem;
1826
1826
  }
@@ -1833,11 +1833,6 @@ pre[class*="language-"] {
1833
1833
  padding: 0.25rem;
1834
1834
  }
1835
1835
 
1836
- .px-4 {
1837
- padding-left: 1rem;
1838
- padding-right: 1rem;
1839
- }
1840
-
1841
1836
  .py-\[5px\] {
1842
1837
  padding-top: 5px;
1843
1838
  padding-bottom: 5px;
@@ -1853,6 +1848,11 @@ pre[class*="language-"] {
1853
1848
  padding-bottom: 0.5rem;
1854
1849
  }
1855
1850
 
1851
+ .px-4 {
1852
+ padding-left: 1rem;
1853
+ padding-right: 1rem;
1854
+ }
1855
+
1856
1856
  .px-1 {
1857
1857
  padding-left: 0.25rem;
1858
1858
  padding-right: 0.25rem;
@@ -1896,6 +1896,11 @@ pre[class*="language-"] {
1896
1896
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
1897
1897
  }
1898
1898
 
1899
+ .text-base {
1900
+ font-size: 1rem;
1901
+ line-height: 1.5rem;
1902
+ }
1903
+
1899
1904
  .text-sm {
1900
1905
  font-size: 0.875rem;
1901
1906
  line-height: 1.25rem;
@@ -1906,11 +1911,6 @@ pre[class*="language-"] {
1906
1911
  line-height: 1rem;
1907
1912
  }
1908
1913
 
1909
- .text-base {
1910
- font-size: 1rem;
1911
- line-height: 1.5rem;
1912
- }
1913
-
1914
1914
  .text-\[11px\] {
1915
1915
  font-size: 11px;
1916
1916
  }
@@ -1919,19 +1919,14 @@ pre[class*="language-"] {
1919
1919
  font-weight: 700;
1920
1920
  }
1921
1921
 
1922
- .text-gray-400 {
1923
- --tw-text-opacity: 1;
1924
- color: rgba(156, 163, 175, var(--tw-text-opacity));
1925
- }
1926
-
1927
- .text-gray-500 {
1922
+ .text-gray-300 {
1928
1923
  --tw-text-opacity: 1;
1929
- color: rgba(107, 114, 128, var(--tw-text-opacity));
1924
+ color: rgba(209, 213, 219, var(--tw-text-opacity));
1930
1925
  }
1931
1926
 
1932
- .text-gray-300 {
1927
+ .text-gray-400 {
1933
1928
  --tw-text-opacity: 1;
1934
- color: rgba(209, 213, 219, var(--tw-text-opacity));
1929
+ color: rgba(156, 163, 175, var(--tw-text-opacity));
1935
1930
  }
1936
1931
 
1937
1932
  .text-red-300 {
@@ -1944,6 +1939,11 @@ pre[class*="language-"] {
1944
1939
  color: rgba(55, 65, 81, var(--tw-text-opacity));
1945
1940
  }
1946
1941
 
1942
+ .text-gray-500 {
1943
+ --tw-text-opacity: 1;
1944
+ color: rgba(107, 114, 128, var(--tw-text-opacity));
1945
+ }
1946
+
1947
1947
  .text-gray-800 {
1948
1948
  --tw-text-opacity: 1;
1949
1949
  color: rgba(31, 41, 55, var(--tw-text-opacity));
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: lookbook
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.3.1
4
+ version: 0.3.2
5
5
  platform: ruby
6
6
  authors:
7
7
  - Mark Perkins
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2021-10-02 00:00:00.000000000 Z
11
+ date: 2021-10-05 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: rails
@@ -207,8 +207,6 @@ files:
207
207
  - app/channels/lookbook/reload_channel.rb
208
208
  - app/controllers/lookbook/app_controller.rb
209
209
  - app/helpers/lookbook/application_helper.rb
210
- - app/views/lookbook/_sidebar.html.erb
211
- - app/views/lookbook/_workbench.html.erb
212
210
  - app/views/lookbook/app/error.html.erb
213
211
  - app/views/lookbook/app/index.html.erb
214
212
  - app/views/lookbook/app/not_found.html.erb
@@ -221,6 +219,8 @@ files:
221
219
  - app/views/lookbook/preview_group.html.erb
222
220
  - app/views/lookbook/shared/_clipboard.html.erb
223
221
  - app/views/lookbook/shared/_header.html.erb
222
+ - app/views/lookbook/shared/_sidebar.html.erb
223
+ - app/views/lookbook/shared/_workbench.html.erb
224
224
  - app/views/lookbook/workbench/_header.html.erb
225
225
  - app/views/lookbook/workbench/_inspector.html.erb
226
226
  - app/views/lookbook/workbench/_preview.html.erb