Skip to content

Commit 21f6c43

Browse files
butschsterbutschster
committed
Updates buggregator preview
1 parent 458d899 commit 21f6c43

File tree

2 files changed

+150
-4
lines changed

2 files changed

+150
-4
lines changed

‎public/app.css‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
2+
.device-desktop {
3+
border-width: 1px;
4+
height: 1024px;
5+
}
6+
7+
.device-desktop, .device-desktop > div {
8+
border-radius: .375rem;
9+
width: 100%
10+
}
11+
12+
.device-desktop > div {
13+
--tw-bg-opacity: 1;
14+
background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
15+
height: 100%;
16+
}
17+
18+
.device-tablet {
19+
border-radius: 1.5rem;
20+
border-width: 2px;
21+
justify-content: center;
22+
padding-left: 1.25rem;
23+
padding-right: 1.25rem
24+
}
25+
26+
.device-tablet > div {
27+
height: 1024px;
28+
width: 768px
29+
}
30+
31+
.device-tablet:after {
32+
--tw-bg-opacity: 1;
33+
background-color: rgba(245, 245, 245, var(--tw-bg-opacity));
34+
border-radius: 9999px;
35+
border-width: 1px;
36+
content: "";
37+
display: block;
38+
height: 3rem;
39+
margin-bottom: 1rem;
40+
margin-top: 1rem;
41+
width: 3rem
42+
}
43+
44+
.device-mobile {
45+
border-radius: 1.5rem;
46+
border-width: 2px;
47+
justify-content: center;
48+
padding-left: .75rem;
49+
padding-right: .75rem
50+
}
51+
52+
.device-mobile > div {
53+
height: 568px;
54+
width: 320px
55+
}
56+
57+
.device-mobile:before, .device-tablet:before {
58+
height: .75rem;
59+
margin-bottom: .5rem;
60+
margin-top: .5rem;
61+
width: .75rem
62+
}
63+
64+
.device-mobile:after, .device-mobile:before, .device-tablet:before {
65+
--tw-bg-opacity: 1;
66+
background-color: rgba(245, 245, 245, var(--tw-bg-opacity));
67+
border-radius: 9999px;
68+
border-width: 1px;
69+
content: "";
70+
display: block
71+
}
72+
73+
.device-mobile:after {
74+
height: 2rem;
75+
margin-bottom: .75rem;
76+
margin-top: .75rem;
77+
width: 2rem
78+
}
79+
80+
.device-desktop, .device-mobile, .device-tablet {
81+
--tw-bg-opacity: 1;
82+
align-items: center;
83+
background-color: rgba(250, 250, 250, var(--tw-bg-opacity));
84+
display: flex;
85+
flex-direction: column;
86+
transition-duration: .15s;
87+
transition-duration: .3s;
88+
transition-property: all;
89+
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
90+
transition-timing-function: cubic-bezier(.4, 0, 1, 1)
91+
}
92+
93+
.device-mobile > div, .device-tablet > div {
94+
--tw-bg-opacity: 1;
95+
background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
96+
border-radius: .375rem;
97+
border-width: 1px
98+
}
99+
100+
.device-desktop iframe, .device-mobile iframe, .device-tablet iframe {
101+
border-radius: .375rem;
102+
height: 100%;
103+
width: 100%
104+
}

‎resources/views/welcome.blade.php‎

Lines changed: 46 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
66
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
7+
<link href="/app.css" rel="stylesheet">
78
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
89

910
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
@@ -83,9 +84,10 @@ class="mb-2 w-full bg-white text-gray-400 font-semibold hover:text-gray-700 font
8384

8485
<div class="relative">
8586
@if(config('app.buggregator_url'))
86-
<div class="sticky top-0 p-0 lg:px-10" id="demo">
87-
<iframe src="{{ config('app.buggregator_url') }}" frameborder="0" height="600px" class="transform sm:scale-75 lg:scale-100 w-full bg-white border-4 border-blue-600 rounded-lg sticky top-0 w-full shadow-2xl">
88-
</iframe>
87+
<div class="p-0 lg:px-10" id="demo">
88+
<preview >
89+
<iframe src="{{ config('app.buggregator_url') }}" frameborder="0"></iframe>
90+
</preview>
8991
</div>
9092
@endif
9193

@@ -129,6 +131,42 @@ class="mb-2 w-full bg-white text-gray-400 font-semibold hover:text-gray-700 font
129131
</div>
130132
@verbatim
131133
<script>
134+
Vue.component('preview', {
135+
props: {
136+
device: {
137+
default() {
138+
return 'desktop'
139+
}
140+
}
141+
},
142+
computed: {
143+
deviceClass() {
144+
return `device-${this.device}`
145+
}
146+
},
147+
template: `
148+
<div class="flex flex-col items-center h-full">
149+
<div class="flex justify-center mb-5">
150+
<button class="p-1 rounded" @click="device = 'mobile'" :class="{'bg-blue-50 text-blue-600': device == 'mobile'}">
151+
<svg class="w-10 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 53"><path fill-rule="evenodd" clip-rule="evenodd" d="M9 1H2a1 1 0 0 0-1 1v49c0 .6.4 1 1 1h24c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1h-7c0 .6-.4 1-1 1h-8a1 1 0 0 1-1-1ZM2 0a2 2 0 0 0-2 2v49c0 1.1.9 2 2 2h24a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2Zm14 49a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z" /></svg>
152+
</button>
153+
<button @click="device = 'tablet'" class="p-1 rounded" :class="{'bg-blue-50 text-blue-600': device == 'tablet'}">
154+
<svg class="w-10 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 53"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 1H2a1 1 0 0 0-1 1v49c0 .6.4 1 1 1h34c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1H24c0 .6-.4 1-1 1h-8a1 1 0 0 1-1-1ZM2 0a2 2 0 0 0-2 2v49c0 1.1.9 2 2 2h34a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2Zm32 4H4a1 1 0 0 0-1 1v39c0 .6.4 1 1 1h30c.6 0 1-.4 1-1V5c0-.6-.4-1-1-1ZM4 3a2 2 0 0 0-2 2v39c0 1.1.9 2 2 2h30a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H4Zm15 48a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" /></svg>
155+
</button>
156+
<button @click="device = 'desktop'" class="p-1 rounded" :class="{'bg-blue-50 text-blue-600': device == 'desktop'}">
157+
<svg class="w-10 h-7 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 58 53"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 1h54c.6 0 1 .4 1 1v36.5H1V2c0-.6.4-1 1-1ZM1 39.5V43c0 .6.4 1 1 1h54c.6 0 1-.4 1-1v-3.5H1Zm57 0V43a2 2 0 0 1-2 2H36.5l1 4.9v.1H40c.6 0 1 .4 1 1v1c0 .6-.4 1-1 1H19a1 1 0 0 1-1-1v-1c0-.6.4-1 1-1h2.5v-.1l1-4.9H2a2 2 0 0 1-2-2V2C0 .9.9 0 2 0h54a2 2 0 0 1 2 2v37.5ZM36.5 50l-1-4.9V45h-12v.1l-1 4.9h14ZM54 42a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-35 9h21v1H19v-1Z" /></svg>
158+
</button>
159+
</div>
160+
161+
<div :class="deviceClass">
162+
<div>
163+
<slot></slot>
164+
</div>
165+
</div>
166+
</div>
167+
`
168+
})
169+
132170
Vue.component('button-action', {
133171
props: {
134172
action: String
@@ -145,7 +183,11 @@ class="mb-2 w-full bg-white text-gray-400 font-semibold hover:text-gray-700 font
145183
.then(data => console.log(data));
146184
}
147185
},
148-
template: '<button @click="callAction" type="button" class="border rounded-full text-blue-600 md:py-1 md:px-3 px-2 lg:px-3 border-blue-400 hover:bg-blue-500 hover:text-white transition-all duration-300"><slot></slot></button>'
186+
template: `
187+
<button @click="callAction" type="button" class="border rounded-full text-blue-600 md:py-1 md:px-3 px-2 lg:px-3 border-blue-400 hover:bg-blue-500 hover:text-white transition-all duration-300">
188+
<slot></slot>
189+
</button>
190+
`
149191
})
150192
151193
new Vue({

0 commit comments

Comments
 (0)