maggicl/SA3
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Mandatory stuff done

Browse source
This commit is contained in:
Claudio Maggioni 2019-09-22 16:09:08 +02:00
parent 2a022fa6a4
commit 49f86c8a5b
2 changed files with 94 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
hw1/claudio_maggioni/3d_print_service.html
View file

@ -34,20 +34,32 @@
<fieldset>
<legend>Customer details</legend>
<label for="username">Username</label>
<input type="text" name="username" maxlength="100" placeholder="Username">
<input type="text" name="username" maxlength="100" placeholder="Username" required>
<label for="email">Email</label>
<input type="email" name="email" maxlength="100" placeholder="Email">
<input type="email" name="email" maxlength="100" placeholder="Email" required>
<label for="address">Address</label>
<textarea name="address" maxlength="500" placeholder="Address"></textarea>
<textarea name="address" maxlength="500" placeholder="Address" required></textarea>
</fieldset>
<fieldset>
<legend>Work order</legend>
<label for="file">File to print</label>
<input type="file" name="file">
<label for="file">File to print (OBJ)</label>
<input type="file" name="file" accept=".obj" required>
<label for="urgent">Urgency</label>
<input type="checkbox" name="urgency">
<label for="copies"># of copies</label>
<input type="range" name="copies" min="1" max="10" step="1">
<div class="range-10">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<input type="range" name="copies" min="1" max="10" step="1" list="tickmarks">
</div>
</fieldset>
<button type="submit">Send the order</button>
</form>

83
hw1/claudio_maggioni/css/form.css
View file

@ -1,21 +1,90 @@
/* vim: set ts=2 sw=2 tw=80 et: */
input, textarea {
width: 20rem;
display: block;
padding: .1rem;
margin: .25rem 0;
border: 1px solid #ccc;
}
input::placeholder, textarea::placeholder {
color: #ccc;
}
fieldset {
display: grid;
grid-template-columns: 7em 1fr;
grid-gap: 1rem;
border: none;
margin: .5rem 0;
background: #eee;
border-radius: .5rem;
}
label {
font-size: .7rem;
@media screen and (max-width: 768px) {
fieldset {
grid-template-columns: 1fr;
grid-gap: .5rem;
}
}
textarea[name="address"] {
fieldset legend {
position: relative;
top: 10%;
background: #333;
color: white;
padding: .25rem .5rem;
border-radius: .25rem;
}
fieldset label {
font-weight: bold;
font-size: .9rem;
}
fieldset label::after {
content: ":";
}
fieldset input, fieldset textarea {
padding: .5rem;
font-family: 'Fira Sans', sans-serif;
font-size: .85rem;
border-radius: .5rem;
background: white;
}
fieldset textarea[name="address"] {
height: 4em;
}
fieldset input[type="checkbox"] {
margin-left: 0;
padding-left: 0;
max-width: 1em;
}
form button {
color: #333;
background: #ccc;
font-size: 1em;
padding: .5rem 1rem;
border-radius: .5rem;
outline: none;
border: 0 none;
}
.range-10 {
display: grid;
justify-items: center;
grid-template-columns: repeat(20, 1fr);
}
.range-10 div {
grid-column: span 2;
font-size: .9rem;
}
.range-10 input[type="range"] {
grid-column: 2 / 20;
justify-self: stretch;
margin: 0 -10px;
}