Skip to content

Commit 6bf1326

Browse files
zhangmo8zhangmo8
committed
feat: copy button
1 parent ab6d861 commit 6bf1326

File tree

4 files changed

+537
-0
lines changed

4 files changed

+537
-0
lines changed

‎demo2.html‎

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
<style>
9+
/* Styled after the GitLens commit graph */
10+
11+
.circle-component {
12+
position: absolute;
13+
z-index: 40;
14+
height: 1.2rem;
15+
width: 1.2rem;
16+
border-radius: 9999px;
17+
border-width: 2px;
18+
}
19+
20+
/* use the classes below together with .circle-component */
21+
22+
.circle-upper-left {
23+
top: 0px;
24+
transform: translate(-11px, -1px);
25+
}
26+
27+
.circle-upper-right {
28+
top: 0px;
29+
transform: translate(12px, -1px);
30+
}
31+
32+
td:hover{
33+
background: red;
34+
}
35+
</style>
36+
<script src="https://cdn.tailwindcss.com/3.4.5"></script>
37+
</head>
38+
39+
<body>
40+
<div>
41+
<div
42+
class="container md:border-2 border-slate-200 dark:border-slate-800 rounded-lg px-7 pb-5 pt-12 mx-auto max-w-screen-md">
43+
<table class="table-fixed border-separate border-spacing-0 ms-2">
44+
<thead>
45+
<tr>
46+
<th class="w-0 table-cell md:hidden"></th> <!-- Simplified git tree -->
47+
<th class="w-[25px] hidden md:table-cell"></th> <!-- Commit branches 1-2 of full git tree -->
48+
<th class="w-[25px] hidden md:table-cell"></th> <!-- Commit branches 2-3 of full git tree -->
49+
<th class="w-auto"></th> <!-- Text content -->
50+
</tr>
51+
</thead>
52+
<tbody>
53+
<tr class="relative h-12">
54+
<td class="border-s-2 border-s-sky-300 border-dashed table-cell md:hidden">
55+
<div
56+
class="circle-component bg-white circle-upper-left border-dashed border-sky-300 ">
57+
</div>
58+
</td>
59+
<td
60+
class="border-t-[1rem] border-t-sky-100 border-s-2 border-s-sky-300 border-dashed hidden md:table-cell">
61+
<div
62+
class="circle-component bg-white circle-upper-left border-dashed border-sky-300 ">
63+
</div>
64+
</td>
65+
<td class="border-t-[1rem] border-t-sky-100 hidden md:table-cell">
66+
</td>
67+
<td>
68+
<p class="relative -top-4 ps-6 ">Hello world! 👋</p>
69+
</td>
70+
</tr>
71+
<tr class="relative h-12">
72+
<td class="border-s-2 border-s-indigo-300 table-cell md:hidden">
73+
<div
74+
class="circle-component bg-white circle-upper-left border-dashed border-indigo-300 ">
75+
</div>
76+
</td>
77+
<td class="border-s-2 border-s-sky-300 border-dashed hidden md:table-cell">
78+
</td>
79+
<td
80+
class="border-s-2 border-s-indigo-300 border-t-[1rem] border-t-indigo-100 hidden md:table-cell">
81+
<div
82+
class="circle-component bg-white circle-upper-left border-dashed border-indigo-300 ">
83+
</div>
84+
</td>
85+
<td>
86+
<p class="relative -top-4 ps-6 ">Publish on CodePen! 🚀</p>
87+
</td>
88+
</tr>
89+
<tr class="relative h-14">
90+
<td class="border-s-2 border-s-sky-300 table-cell md:hidden">
91+
<div
92+
class="circle-component bg-white circle-upper-left border-sky-300 ">
93+
</div>
94+
</td>
95+
<td
96+
class="border-s-2 border-s-sky-300 border-t-[1rem] border-t-sky-100 hidden md:table-cell">
97+
<div
98+
class="circle-component bg-white circle-upper-left border-sky-300 ">
99+
</div>
100+
</td>
101+
<td
102+
class="border-s-2 border-s-indigo-300 border-t-[1rem] border-t-sky-100 hidden md:table-cell">
103+
</td>
104+
<td>
105+
<p class="relative -top-5 ps-6 ">Add dark mode support</p>
106+
</td>
107+
</tr>
108+
<tr class="relative h-10">
109+
<td class="border-s-2 border-s-teal-300 table-cell md:hidden">
110+
<div
111+
class="circle-component bg-white circle-upper-right border-teal-300 translate-x-[-11px] translate-y-[-9px]">
112+
</div>
113+
</td>
114+
<td
115+
class="border-t-2 border-t-teal-300 border-s-2 border-s-sky-300 hidden md:table-cell">
116+
<div
117+
class="circle-component bg-white circle-upper-left translate-x-[-11px] translate-y-[-9px] border-sky-300 ">
118+
</div>
119+
</td>
120+
<td
121+
class="rounded-tr-lg border-t-2 border-t-teal-300 border-s-2 border-s-indigo-300 border-e-2 border-e-teal-300 hidden md:table-cell">
122+
</td>
123+
<td>
124+
<p class="relative -top-5 ps-6 ">Merge branch 'feature/styles' into 'main'</p>
125+
</td>
126+
</tr>
127+
<tr class="relative h-12">
128+
<td class="border-s-2 border-s-teal-300 table-cell md:hidden">
129+
<div
130+
class="circle-component bg-white circle-upper-left border-teal-300 ">
131+
</div>
132+
</td>
133+
<td class="border-s-2 border-s-sky-300 hidden md:table-cell">
134+
</td>
135+
<td
136+
class="border-s-2 border-s-indigo-300 border-e-2 border-e-teal-300 hidden md:table-cell">
137+
<div
138+
class="circle-component bg-white circle-upper-right border-teal-300 ">
139+
</div>
140+
</td>
141+
<td>
142+
<p class="relative -top-4 ps-6 ">Resize to 1 branch on small screens</p>
143+
</td>
144+
</tr>
145+
<tr class="relative h-14">
146+
<td class="border-s-2 border-s-teal-300 table-cell md:hidden">
147+
<div
148+
class="circle-component bg-white circle-upper-left border-teal-300 ">
149+
</div>
150+
</td>
151+
<td
152+
class="border-s-2 border-s-sky-300 border-b-2 border-b-teal-300 hidden md:table-cell">
153+
</td>
154+
<td
155+
class="rounded-br-lg border-s-2 border-s-indigo-300 border-b-2 border-b-teal-300 border-e-2 border-e-teal-300 hidden md:table-cell">
156+
<div
157+
class="circle-component bg-white circle-upper-right border-teal-300 ">
158+
</div>
159+
</td>
160+
<td>
161+
<p class="relative -top-5 ps-6 ">Create commit graph styles</p>
162+
</td>
163+
</tr>
164+
<tr class="relative h-10">
165+
<td class="border-s-2 border-s-sky-300 table-cell md:hidden">
166+
<div
167+
class="circle-component bg-white circle-upper-left translate-x-[-11px] translate-y-[-9px] border-sky-300 ">
168+
</div>
169+
</td>
170+
<td class="border-s-2 border-s-sky-300 hidden md:table-cell">
171+
<div
172+
class="circle-component bg-white circle-upper-left translate-x-[-11px] translate-y-[-11px] border-sky-300 ">
173+
</div>
174+
</td>
175+
<td class="border-s-2 border-s-indigo-300 hidden md:table-cell">
176+
</td>
177+
<td>
178+
<p class="relative -top-5 ps-6 ">Scaffold commit graph table</p>
179+
</td>
180+
</tr>
181+
<tr class="relative h-12">
182+
<td class="table-cell md:hidden">
183+
<div
184+
class="circle-component bg-white circle-upper-left border-sky-300 translate-x-[-9px] translate-y-[-1px]">
185+
</div>
186+
</td>
187+
<td class="border-t-[1rem] border-t-sky-100 hidden md:table-cell">
188+
<div
189+
class="circle-component bg-white circle-upper-left border-sky-300 translate-x-[-9px] translate-y-[-1px]">
190+
</div>
191+
</td>
192+
<td class="border-t-[1rem] border-t-sky-100 hidden md:table-cell">
193+
</td>
194+
<td>
195+
<p class="relative -top-4 ps-6 ">Initial commit</p>
196+
</td>
197+
</tr>
198+
</tbody>
199+
</table>
200+
</div>
201+
</div>
202+
</body>
203+
204+
</html>

0 commit comments

Comments
 (0)