nolanlawson
/
pinafore
forked from cybrespace/pinafore
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add placeholder to "add instance" input (#427)

This commit is contained in:
Nolan Lawson 2018-08-16 22:15:22 -07:00 committed by GitHub
parent b8863e684e
commit 37cc2c2df7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
routes/_pages/settings/instances/add.html
View File

@ -15,13 +15,13 @@
</div> </div>
</noscript> </noscript>
<label for="instanceInput">Instance:</label> <label class="add-new-instance-label" for="instanceInput">Instance:</label>
<input class="new-instance-input" type="text" id="instanceInput" <input class="add-new-instance-input" type="text" id="instanceInput"
bind:value='$instanceNameInSearch' placeholder='' required bind:value='$instanceNameInSearch' placeholder="Enter instance name" required
> >
<button class="primary" type="submit" id="submitButton" <button class="primary add-new-instance-button" type="submit" id="submitButton"
disabled={!$instanceNameInSearch || $logInToInstanceLoading}> disabled={!$instanceNameInSearch || $logInToInstanceLoading}>
Add instance Log in
</button> </button>
</form> </form>
@ -38,12 +38,12 @@
margin: 5px; margin: 5px;
background-color: var(--main-bg); background-color: var(--main-bg);
} }
input.new-instance-input { .add-new-instance-input {
min-width: 60%; min-width: 70%;
max-width: 100%; max-width: 100%;
} }
form.add-new-instance { .add-new-instance {
background: var(--form-bg); background: var(--form-bg);
padding: 5px 10px 15px; padding: 5px 10px 15px;
margin: 20px auto; margin: 20px auto;
@ -51,10 +51,17 @@
border-radius: 4px; border-radius: 4px;
} }
form.add-new-instance label, form.add-new-instance input, form.add-new-instance button { .add-new-instance-label, .add-new-instance-input, .add-new-instance-button {
display: block; display: block;
margin: 20px 5px; margin: 20px 5px;
} }
@media (max-width: 767px) {
.add-new-instance-input {
min-width: 95%;
}
}
</style> </style>
<script> <script>
import SettingsLayout from '../../../_components/settings/SettingsLayout.html' import SettingsLayout from '../../../_components/settings/SettingsLayout.html'