Skip to content

Commit 787c974

Browse files
cezaraugustocezaraugusto
committed
Move Open options below both columns in the framework templates
1 parent 59c4f63 commit 787c974

4 files changed

Lines changed: 54 additions & 35 deletions

File tree

‎examples/content-preact/src/content/ContentApp.tsx‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ function OpenHint({
3636
}) {
3737
return (
3838
<div className="mx-auto max-w-7xl md:px-0 lg:p-6">
39-
<div className="relative isolate overflow-hidden bg-gray-900 px-6 pt-16 shadow-2xl lg:rounded-3xl md:pt-24 md:h-full sm:h-[100vh] lg:flex lg:gap-x-20 lg:px-24 lg:pt-0">
39+
<div className="relative isolate overflow-hidden bg-gray-900 px-6 pt-16 shadow-2xl lg:rounded-3xl md:pt-24 md:h-full sm:h-[100vh] lg:flex lg:flex-wrap lg:gap-x-20 lg:px-24 lg:pt-0">
4040
<div className="absolute z-20 top-0 inset-x-0 flex justify-center overflow-hidden pointer-events-none">
4141
<div className="w-[108rem] flex-none flex justify-end">
4242
<picture>
@@ -85,15 +85,6 @@ function OpenHint({
8585
</button>
8686
.
8787
</p>
88-
<div className="mt-6">
89-
<button
90-
onClick={onOpenOptions}
91-
aria-label="Open options"
92-
className="bg-white rounded-md p-3 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
93-
>
94-
Open options
95-
</button>
96-
</div>
9788
</div>
9889

9990
<div className="relative mt-16 h-80 lg:mt-8">
@@ -105,6 +96,19 @@ function OpenHint({
10596
height="1080"
10697
/>
10798
</div>
99+
{/* Last child of the card, full width so it wraps below both columns
100+
rather than becoming a third one. Every other content template ends
101+
on this button, and the framework ones used to bury it beside the
102+
screenshot. */}
103+
<div className="w-full pb-12 text-center lg:pb-16">
104+
<button
105+
onClick={onOpenOptions}
106+
aria-label="Open options"
107+
className="bg-white rounded-md p-3 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
108+
>
109+
Open options
110+
</button>
111+
</div>
108112
</div>
109113
</div>
110114
)

‎examples/content-react/src/content/ContentApp.tsx‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export default function ContentApp() {
2323

2424
return (
2525
<div className="mx-auto max-w-7xl md:px-0 lg:p-6">
26-
<div className="relative isolate overflow-hidden bg-gray-900 px-6 pt-16 shadow-2xl lg:rounded-3xl md:pt-24 md:h-full sm:h-[100vh] lg:flex lg:gap-x-20 lg:px-24 lg:pt-0">
26+
<div className="relative isolate overflow-hidden bg-gray-900 px-6 pt-16 shadow-2xl lg:rounded-3xl md:pt-24 md:h-full sm:h-[100vh] lg:flex lg:flex-wrap lg:gap-x-20 lg:px-24 lg:pt-0">
2727
<div className="absolute z-20 top-0 inset-x-0 flex justify-center overflow-hidden pointer-events-none">
2828
<div className="w-[108rem] flex-none flex justify-end">
2929
<picture>
@@ -70,15 +70,6 @@ export default function ContentApp() {
7070
</button>
7171
.
7272
</p>
73-
<div className="mt-8">
74-
<button
75-
onClick={() => chrome.runtime.sendMessage({type: 'open-options'})}
76-
aria-label="Open options"
77-
className="rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
78-
>
79-
Open options
80-
</button>
81-
</div>
8273
</div>
8374
<div className="relative mt-16 h-80 lg:mt-8">
8475
<img
@@ -89,6 +80,19 @@ export default function ContentApp() {
8980
height="1080"
9081
/>
9182
</div>
83+
{/* Last child of the card, full width so it wraps below both columns
84+
rather than becoming a third one. Every other content template ends
85+
on this button, and the framework ones used to bury it beside the
86+
screenshot. */}
87+
<div className="w-full pb-12 text-center lg:pb-16">
88+
<button
89+
onClick={() => chrome.runtime.sendMessage({type: 'open-options'})}
90+
aria-label="Open options"
91+
className="rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
92+
>
93+
Open options
94+
</button>
95+
</div>
9296
</div>
9397
</div>
9498
)

‎examples/content-svelte/src/content/ContentApp.svelte‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ function openOptions() {
2929
</div>
3030
{:else}
3131
<div class="mx-auto max-w-7xl md:px-0 lg:p-6">
32-
<div class="relative isolate overflow-hidden bg-gray-900 px-6 pt-16 shadow-2xl lg:rounded-3xl md:pt-24 md:h-full sm:h-[100vh] lg:flex lg:gap-x-20 lg:px-24 lg:pt-0">
32+
<div class="relative isolate overflow-hidden bg-gray-900 px-6 pt-16 shadow-2xl lg:rounded-3xl md:pt-24 md:h-full sm:h-[100vh] lg:flex lg:flex-wrap lg:gap-x-20 lg:px-24 lg:pt-0">
3333
<div class="absolute z-20 top-0 inset-x-0 flex justify-center overflow-hidden pointer-events-none">
3434
<div class="w-[108rem] flex-none flex justify-end">
3535
<picture>
@@ -52,17 +52,23 @@ function openOptions() {
5252
Learn more about creating cross-browser extensions by
5353
<button on:click={toggleDialog} class="underline hover:no-underline">closing this hint</button>.
5454
</p>
55+
</div>
56+
<div class="relative mt-16 h-80 lg:mt-8">
57+
<img class="absolute left-0 top-0 w-[57rem] max-w-none rounded-md bg-white/5 ring-1 ring-white/10" src={chromeWindowBg} alt="Chrome window screenshot" width="1824" height="1080" />
58+
</div>
59+
<!-- Last child of the card, full width so it wraps below both columns
60+
rather than becoming a third one. Every other content template ends
61+
on this button, and the framework ones used to bury it beside the
62+
screenshot. -->
63+
<div class="w-full pb-12 text-center lg:pb-16">
5564
<button
5665
on:click={openOptions}
5766
aria-label="Open options"
58-
class="mt-6 rounded-md bg-white/10 px-4 py-2 text-sm font-semibold text-white ring-1 ring-white/20 hover:bg-white/20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
67+
class="rounded-md bg-white/10 px-4 py-2 text-sm font-semibold text-white ring-1 ring-white/20 hover:bg-white/20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
5968
>
6069
Open options
6170
</button>
6271
</div>
63-
<div class="relative mt-16 h-80 lg:mt-8">
64-
<img class="absolute left-0 top-0 w-[57rem] max-w-none rounded-md bg-white/5 ring-1 ring-white/10" src={chromeWindowBg} alt="Chrome window screenshot" width="1824" height="1080" />
65-
</div>
6672
</div>
6773
</div>
6874
{/if}

‎examples/content-vue/src/content/ContentApp.vue‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ function openOptions() {
1313
<div v-if="isdialogOpen">
1414
<div class="mx-auto max-w-7xl md:px-0 lg:p-6">
1515
<div
16-
class="relative isolate overflow-hidden bg-gray-900 px-6 pt-16 shadow-2xl lg:rounded-3xl md:pt-24 md:h-full sm:h-[100vh] lg:flex lg:gap-x-20 lg:px-24 lg:pt-0"
16+
class="relative isolate overflow-hidden bg-gray-900 px-6 pt-16 shadow-2xl lg:rounded-3xl md:pt-24 md:h-full sm:h-[100vh] lg:flex lg:flex-wrap lg:gap-x-20 lg:px-24 lg:pt-0"
1717
>
1818
<div
1919
class="absolute z-20 top-0 inset-x-0 flex justify-center overflow-hidden pointer-events-none"
@@ -70,15 +70,6 @@ function openOptions() {
7070
</button>
7171
.
7272
</p>
73-
<div class="mt-8 flex justify-center lg:justify-start">
74-
<button
75-
@click="openOptions"
76-
aria-label="Open options"
77-
class="bg-white rounded-md px-4 py-2 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
78-
>
79-
Open options
80-
</button>
81-
</div>
8273
</div>
8374

8475
<div class="relative mt-16 h-80 lg:mt-8">
@@ -90,6 +81,20 @@ function openOptions() {
9081
height="1080"
9182
/>
9283
</div>
84+
85+
<!-- Last child of the card, full width so it wraps below both columns
86+
rather than becoming a third one. Every other content template ends
87+
on this button, and the framework ones used to bury it beside the
88+
screenshot. -->
89+
<div class="w-full pb-12 text-center lg:pb-16">
90+
<button
91+
@click="openOptions"
92+
aria-label="Open options"
93+
class="bg-white rounded-md px-4 py-2 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
94+
>
95+
Open options
96+
</button>
97+
</div>
9398
</div>
9499
</div>
95100
</div>

0 commit comments

Comments
 (0)