From 2ab9eef1bf2874e9d0ec42958c4cb9898ec4c2e8 Mon Sep 17 00:00:00 2001 From: Jay George Date: Mon, 15 Sep 2025 16:02:23 +0100 Subject: [PATCH 1/8] Add missing architectural lines to navigation > getting started screen --- resources/views/navigation/show.blade.php | 1 + 1 file changed, 1 insertion(+) diff --git a/resources/views/navigation/show.blade.php b/resources/views/navigation/show.blade.php index c493d533ce1..dca622dc6a2 100644 --- a/resources/views/navigation/show.blade.php +++ b/resources/views/navigation/show.blade.php @@ -1,6 +1,7 @@ @inject('str', 'Statamic\Support\Str') @extends('statamic::layout') @section('title', Statamic::crumb($nav->title(), 'Navigation')) +@section('content-card-modifiers', 'bg-architectural-lines') @section('content') Date: Mon, 15 Sep 2025 17:34:08 +0100 Subject: [PATCH 2/8] Progress --- packages/ui/src/Button/Button.vue | 2 +- resources/css/core/utilities.css | 6 ++++++ resources/svg/architectural-lines-simple.svg | 1 + resources/views/nav/edit.blade.php | 2 ++ resources/views/navigation/show.blade.php | 2 +- 5 files changed, 11 insertions(+), 2 deletions(-) create mode 100644 resources/svg/architectural-lines-simple.svg diff --git a/packages/ui/src/Button/Button.vue b/packages/ui/src/Button/Button.vue index 313dad0d2c1..83443d021bc 100644 --- a/packages/ui/src/Button/Button.vue +++ b/packages/ui/src/Button/Button.vue @@ -37,7 +37,7 @@ const buttonClasses = computed(() => { 'bg-linear-to-b from-primary/90 to-primary hover:bg-primary-hover text-white border border-primary-border shadow-ui-md inset-shadow-2xs inset-shadow-white/25 [&_svg]:text-white [&_svg]:opacity-60', ], danger: 'btn-danger bg-linear-to-b from-red-600/90 to-red-600 hover:bg-red-600/90 text-white border border-red-600 inset-shadow-2xs inset-shadow-red-300 [&_svg]:text-red-200 disabled:text-red-200', - filled: 'bg-black/5 hover:bg-black/10 hover:text-gray-900 dark:hover:text-white dark:bg-white/15 dark:hover:bg-white/20 [&_svg]:opacity-70', + filled: 'bg-gray-100 hover:bg-black/10 hover:text-gray-900 dark:hover:text-white dark:bg-white/15 dark:hover:bg-white/20 [&_svg]:opacity-70', ghost: 'bg-transparent hover:bg-gray-400/10 text-gray-900 dark:text-gray-300 dark:hover:bg-white/15 dark:hover:text-gray-200', 'ghost-pressed': 'bg-transparent hover:bg-gray-400/10 text-black dark:text-white dark:hover:bg-white/15 dark:hover:text-white [&_svg]:opacity-100', subtle: 'bg-transparent hover:bg-gray-400/10 text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:bg-white/15 dark:hover:text-gray-200 [&_svg]:opacity-35', diff --git a/resources/css/core/utilities.css b/resources/css/core/utilities.css index 2a64356cff3..368ab75bbaa 100644 --- a/resources/css/core/utilities.css +++ b/resources/css/core/utilities.css @@ -309,6 +309,12 @@ } } } +/* This as a couple less */ +@utility bg-architectural-lines--simple { + &::before { + background-image: url('../../svg/architectural-lines-simple.svg'); + } +} /* UTILITIES / DECORATION / CHECKERBOARD =================================================== */ diff --git a/resources/svg/architectural-lines-simple.svg b/resources/svg/architectural-lines-simple.svg new file mode 100644 index 00000000000..a44d61bc92e --- /dev/null +++ b/resources/svg/architectural-lines-simple.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/resources/views/nav/edit.blade.php b/resources/views/nav/edit.blade.php index 0a999ee436c..0bc44041988 100644 --- a/resources/views/nav/edit.blade.php +++ b/resources/views/nav/edit.blade.php @@ -1,6 +1,8 @@ @extends('statamic::layout') @section('content') +@section('content-card-modifiers', 'bg-architectural-lines') + title(), 'Navigation')) -@section('content-card-modifiers', 'bg-architectural-lines') +@section('content-card-modifiers', 'bg-architectural-lines bg-architectural-lines--simple') @section('content') Date: Mon, 15 Sep 2025 17:52:25 +0100 Subject: [PATCH 3/8] Revert some changes --- packages/ui/src/Button/Button.vue | 2 +- resources/views/nav/edit.blade.php | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/ui/src/Button/Button.vue b/packages/ui/src/Button/Button.vue index 83443d021bc..313dad0d2c1 100644 --- a/packages/ui/src/Button/Button.vue +++ b/packages/ui/src/Button/Button.vue @@ -37,7 +37,7 @@ const buttonClasses = computed(() => { 'bg-linear-to-b from-primary/90 to-primary hover:bg-primary-hover text-white border border-primary-border shadow-ui-md inset-shadow-2xs inset-shadow-white/25 [&_svg]:text-white [&_svg]:opacity-60', ], danger: 'btn-danger bg-linear-to-b from-red-600/90 to-red-600 hover:bg-red-600/90 text-white border border-red-600 inset-shadow-2xs inset-shadow-red-300 [&_svg]:text-red-200 disabled:text-red-200', - filled: 'bg-gray-100 hover:bg-black/10 hover:text-gray-900 dark:hover:text-white dark:bg-white/15 dark:hover:bg-white/20 [&_svg]:opacity-70', + filled: 'bg-black/5 hover:bg-black/10 hover:text-gray-900 dark:hover:text-white dark:bg-white/15 dark:hover:bg-white/20 [&_svg]:opacity-70', ghost: 'bg-transparent hover:bg-gray-400/10 text-gray-900 dark:text-gray-300 dark:hover:bg-white/15 dark:hover:text-gray-200', 'ghost-pressed': 'bg-transparent hover:bg-gray-400/10 text-black dark:text-white dark:hover:bg-white/15 dark:hover:text-white [&_svg]:opacity-100', subtle: 'bg-transparent hover:bg-gray-400/10 text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:bg-white/15 dark:hover:text-gray-200 [&_svg]:opacity-35', diff --git a/resources/views/nav/edit.blade.php b/resources/views/nav/edit.blade.php index 0bc44041988..dc70da0e014 100644 --- a/resources/views/nav/edit.blade.php +++ b/resources/views/nav/edit.blade.php @@ -1,7 +1,6 @@ @extends('statamic::layout') @section('content') -@section('content-card-modifiers', 'bg-architectural-lines') Date: Mon, 15 Sep 2025 18:04:45 +0100 Subject: [PATCH 4/8] Navigation > Getting Started > only show architectural lines if the navigation isn't already in place --- resources/css/core/utilities.css | 2 +- resources/views/navigation/show.blade.php | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/resources/css/core/utilities.css b/resources/css/core/utilities.css index 368ab75bbaa..5d5f4011e2b 100644 --- a/resources/css/core/utilities.css +++ b/resources/css/core/utilities.css @@ -309,7 +309,7 @@ } } } -/* This as a couple less */ +/* This as a couple less vertical lines. You may wish to use this if there is text to the left/right of the main panel that overlay the lines */ @utility bg-architectural-lines--simple { &::before { background-image: url('../../svg/architectural-lines-simple.svg'); diff --git a/resources/views/navigation/show.blade.php b/resources/views/navigation/show.blade.php index 2a91ce82f47..0b7091429c2 100644 --- a/resources/views/navigation/show.blade.php +++ b/resources/views/navigation/show.blade.php @@ -1,7 +1,7 @@ @inject('str', 'Statamic\Support\Str') @extends('statamic::layout') @section('title', Statamic::crumb($nav->title(), 'Navigation')) -@section('content-card-modifiers', 'bg-architectural-lines bg-architectural-lines--simple') +@section('content-card-modifiers', $nav->in($site)->pages()->all()->isEmpty() ? 'bg-architectural-lines bg-architectural-lines--simple' : '') @section('content') Date: Mon, 15 Sep 2025 18:08:07 +0100 Subject: [PATCH 5/8] Remove extra line I accidentally added --- resources/views/nav/edit.blade.php | 1 - 1 file changed, 1 deletion(-) diff --git a/resources/views/nav/edit.blade.php b/resources/views/nav/edit.blade.php index dc70da0e014..0a999ee436c 100644 --- a/resources/views/nav/edit.blade.php +++ b/resources/views/nav/edit.blade.php @@ -1,7 +1,6 @@ @extends('statamic::layout') @section('content') - Date: Tue, 16 Sep 2025 10:27:29 +0100 Subject: [PATCH 6/8] Prevent architectural lines showing when there is a .page-tree-branch present --- resources/css/core/utilities.css | 117 ++++++++++++++++--------------- 1 file changed, 59 insertions(+), 58 deletions(-) diff --git a/resources/css/core/utilities.css b/resources/css/core/utilities.css index 5d5f4011e2b..d1e830978d0 100644 --- a/resources/css/core/utilities.css +++ b/resources/css/core/utilities.css @@ -233,78 +233,79 @@ */ @utility bg-architectural-lines { - overflow: hidden; - &::before { - content: ''; - pointer-events: none; - position: absolute; - inset: 0; - background-image: url('../../svg/architectural-lines.svg'); - background-size: 100%; - /* Reduce the chances of the background circles overlapping the button */ - @media (width < 1300px) { - background-position-y: 130%; - } - @media (width > 2000px) { - /* The lines become thicker because the svg gets stretched, so reduce opacity to compensate for this */ - opacity: 0.7; - } - } - .dark &::before { - filter: invert(100%); - } - /* Central horizontal line */ - [data-ui-panel] { - > * { - position: relative; - z-index: 1; - } - - &::after { - --height: 1px; - --line-color: hsl(0deg 0% 95%); + &:not(:has(.page-tree-branch)) { + &::before { content: ''; pointer-events: none; position: absolute; inset: 0; - height: var(--height); - border-image: conic-gradient(var(--line-color) 0 0) fill 0//0 100vw; - top: calc(50% - var(--height)); + background-image: url('../../svg/architectural-lines.svg'); + background-size: 100%; + /* Reduce the chances of the background circles overlapping the button */ + @media (width < 1300px) { + background-position-y: 130%; + } + @media (width > 2000px) { + /* The lines become thicker because the svg gets stretched, so reduce opacity to compensate for this */ + opacity: 0.7; + } } - .dark &::after { - --line-color: hsl(240deg 2.56% 15%); + .dark &::before { + filter: invert(100%); } - } - footer { - position: relative; - &::before { - content: ''; - pointer-events: none; - position: absolute; - border-block-end: 1px solid black; - opacity: 0.06; - width: 100vw; - top: 50%; - transform: translateY(50%); + /* Central horizontal line */ + [data-ui-panel] { + > * { + position: relative; + z-index: 1; + } + + &::after { + --height: 1px; + --line-color: hsl(0deg 0% 95%); + content: ''; + pointer-events: none; + position: absolute; + inset: 0; + height: var(--height); + border-image: conic-gradient(var(--line-color) 0 0) fill 0//0 100vw; + top: calc(50% - var(--height)); + } + .dark &::after { + --line-color: hsl(240deg 2.56% 15%); + } } - button:only-child { + footer { position: relative; - &::before, &::after { + &::before { content: ''; pointer-events: none; position: absolute; - inset: 0; - border: 1px solid black; + border-block-end: 1px solid black; opacity: 0.06; - width: 60%; - aspect-ratio: 1; - left: 50%; + width: 100vw; top: 50%; - transform: translate(-50%, -50%); - border-radius: 50%; + transform: translateY(50%); } - &::before { - width: 45%; + button:only-child { + position: relative; + &::before, &::after { + content: ''; + pointer-events: none; + position: absolute; + inset: 0; + border: 1px solid black; + opacity: 0.06; + width: 60%; + aspect-ratio: 1; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + border-radius: 50%; + } + &::before { + width: 45%; + } } } } From 68d650af091b8c90ad5da6b77e8f8ed8e80d71f0 Mon Sep 17 00:00:00 2001 From: Jay George Date: Tue, 16 Sep 2025 10:52:34 +0100 Subject: [PATCH 7/8] Remove "simple" architectural lines in favour of a background behind left-aligned icons so the architectural lines do not pass through the icon --- packages/ui/src/Header.vue | 2 +- resources/css/core/utilities.css | 6 ------ resources/svg/architectural-lines-simple.svg | 1 - resources/views/navigation/show.blade.php | 2 +- 4 files changed, 2 insertions(+), 9 deletions(-) delete mode 100644 resources/svg/architectural-lines-simple.svg diff --git a/packages/ui/src/Header.vue b/packages/ui/src/Header.vue index 5ce00e4c8d6..1e880dcfd67 100644 --- a/packages/ui/src/Header.vue +++ b/packages/ui/src/Header.vue @@ -11,7 +11,7 @@ const props = defineProps({

-
+
{{ title }} diff --git a/resources/css/core/utilities.css b/resources/css/core/utilities.css index d1e830978d0..985196b304c 100644 --- a/resources/css/core/utilities.css +++ b/resources/css/core/utilities.css @@ -310,12 +310,6 @@ } } } -/* This as a couple less vertical lines. You may wish to use this if there is text to the left/right of the main panel that overlay the lines */ -@utility bg-architectural-lines--simple { - &::before { - background-image: url('../../svg/architectural-lines-simple.svg'); - } -} /* UTILITIES / DECORATION / CHECKERBOARD =================================================== */ diff --git a/resources/svg/architectural-lines-simple.svg b/resources/svg/architectural-lines-simple.svg deleted file mode 100644 index a44d61bc92e..00000000000 --- a/resources/svg/architectural-lines-simple.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/resources/views/navigation/show.blade.php b/resources/views/navigation/show.blade.php index 0b7091429c2..aafa4d6a671 100644 --- a/resources/views/navigation/show.blade.php +++ b/resources/views/navigation/show.blade.php @@ -1,7 +1,7 @@ @inject('str', 'Statamic\Support\Str') @extends('statamic::layout') @section('title', Statamic::crumb($nav->title(), 'Navigation')) -@section('content-card-modifiers', $nav->in($site)->pages()->all()->isEmpty() ? 'bg-architectural-lines bg-architectural-lines--simple' : '') +@section('content-card-modifiers', $nav->in($site)->pages()->all()->isEmpty() ? 'bg-architectural-lines' : '') @section('content') Date: Wed, 17 Sep 2025 14:47:33 +0100 Subject: [PATCH 8/8] Fix buttons appearing behind architectural lines --- packages/ui/src/Button/Button.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/Button/Button.vue b/packages/ui/src/Button/Button.vue index 313dad0d2c1..3b42a861df4 100644 --- a/packages/ui/src/Button/Button.vue +++ b/packages/ui/src/Button/Button.vue @@ -26,7 +26,7 @@ const iconOnly = computed(() => (props.icon && !hasDefaultSlot && !props.text) | const buttonClasses = computed(() => { const classes = cva({ - base: 'inline-flex items-center justify-center whitespace-nowrap shrink-0 font-medium antialiased cursor-pointer no-underline disabled:text-gray-400 dark:disabled:text-gray-600 disabled:cursor-not-allowed [&_svg]:shrink-0 [&_svg]:text-black [&_svg]:opacity-60 dark:[&_svg]:text-white', + base: 'relative inline-flex items-center justify-center whitespace-nowrap shrink-0 font-medium antialiased cursor-pointer no-underline disabled:text-gray-400 dark:disabled:text-gray-600 disabled:cursor-not-allowed [&_svg]:shrink-0 [&_svg]:text-black [&_svg]:opacity-60 dark:[&_svg]:text-white', variants: { variant: { default: [