diff options
| author | Terry Truong <terry06890@gmail.com> | 2022-10-19 18:16:45 +1100 |
|---|---|---|
| committer | Terry Truong <terry06890@gmail.com> | 2022-10-19 18:16:45 +1100 |
| commit | 00012d3285dbc960001b6c341906af918b27960a (patch) | |
| tree | 36543796fc01b46d5759b028016078a928ebb3f8 | |
| parent | 4f56fa40db652f5f7b3e42f5a1a4905c0b3787ea (diff) | |
Use shape-outside to wrap event text in circleswrap-in-event-circle
| -rw-r--r-- | src/components/TimeLine.vue | 4 |
1 files changed, 4 insertions, 0 deletions
diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue index b3bab51..4832cfd 100644 --- a/src/components/TimeLine.vue +++ b/src/components/TimeLine.vue @@ -42,6 +42,10 @@ <div v-for="id in idToPos.keys()" :key="id" class="absolute bg-black text-white rounded-full border border-yellow-500 animate-fadein text-sm text-center" :style="eventStyles(id)"> + <div class="w-1/2 h-full float-left" + style="shape-outside: radial-gradient(farthest-side at right, transparent 100%, #fff 0%)"></div> + <div class="w-1/2 h-full float-right" + style="shape-outside: radial-gradient(farthest-side at left, transparent 100%, #fff 0%)"></div> {{idToEvent.get(id)!.title}} </div> <!-- Buttons --> |