julien/miniminu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

little style tweaks for the form

Browse Source
This commit is contained in:
Julien Calixte
2023-03-17 16:51:47 +01:00
parent b46c107580
commit 60991e08da
1 changed files with 13 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/ResponsiveTimeUntil.vue
View File

@@ -88,7 +88,6 @@ const copyUrl = () => {
<section v-else>No target set.</section> <section v-else>No target set.</section>
<section v-if="targetDate" class="target-date">{{ targetDate }}</section> <section v-if="targetDate" class="target-date">{{ targetDate }}</section>
<form @submit.prevent> <form @submit.prevent>
<section>
<div> <div>
<label for="title">Title:</label> <label for="title">Title:</label>
<input type="text" id="title" v-model="projectTitle" /> <input type="text" id="title" v-model="projectTitle" />
@@ -97,7 +96,6 @@ const copyUrl = () => {
<label for="target">Target date:</label> <label for="target">Target date:</label>
<input type="date" id="target" v-model="targetInput" /> <input type="date" id="target" v-model="targetInput" />
</div> </div>
</section>
<div> <div>
<button @click="copyUrl">copy url</button> <button @click="copyUrl">copy url</button>
</div> </div>
@@ -138,15 +136,13 @@ div.responsive-time-until {
form { form {
display: none; display: none;
padding: 1rem; padding: 1rem;
} justify-content: center;
align-items: center;
form section {
display: flex;
justify-content: space-between;
gap: 1rem; gap: 1rem;
max-width: 500px; max-width: 800px;
margin: auto; margin: auto;
padding: 1rem; padding: 1rem;
flex-wrap: wrap;
} }
label { label {
@@ -159,7 +155,7 @@ input {
@media (min-width: 600px) { @media (min-width: 600px) {
form { form {
display: block; display: flex;
} }
} }
</style> </style>