Improving view
This commit is contained in:
Gregorio Chiko Putra
parent
efe0a14018
commit
b1ab965f11
30
public/css/main.css
vendored
30
public/css/main.css
vendored
@ -7602,7 +7602,6 @@ html, body {
|
||||
width: 100%;
|
||||
background-color: #edf2f7;
|
||||
border-width: 1px;
|
||||
border-color: #edf2f7;
|
||||
border-radius: 0.25rem;
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
@ -7624,9 +7623,8 @@ html, body {
|
||||
}
|
||||
|
||||
.form .form-grid .form-submit {
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
background-color: #7f9cf5;
|
||||
background-color: #cbd5e0;
|
||||
border-width: 1px;
|
||||
border-radius: 0.25rem;
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
@ -7638,11 +7636,31 @@ html, body {
|
||||
}
|
||||
|
||||
.form .form-grid .form-submit:hover {
|
||||
background-color: #667eea;
|
||||
border-color: #a0aec0;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.form .form-grid .form-submit:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.print-button {
|
||||
font-size: 0.75rem;
|
||||
color: #fff;
|
||||
background-color: #7f9cf5;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.print-button:hover {
|
||||
background-color: #667eea;
|
||||
}
|
||||
|
||||
.print-button:focus {
|
||||
outline: 0;
|
||||
background-color: #5a67d8;
|
||||
}
|
||||
|
||||
@ -7672,7 +7690,7 @@ html, body {
|
||||
}
|
||||
|
||||
@media print {
|
||||
.container > .header, .container > .form {
|
||||
.container > .header, .container > .form, .print-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
22
resources/sass/main.scss
vendored
22
resources/sass/main.scss
vendored
@ -44,7 +44,7 @@ html, body {
|
||||
}
|
||||
|
||||
.form-input {
|
||||
@apply appearance-none block w-full bg-gray-200 border border-gray-200 rounded py-3 px-4 leading-tight;
|
||||
@apply appearance-none block w-full bg-gray-200 border rounded py-3 px-4 leading-tight;
|
||||
|
||||
&:focus {
|
||||
@apply outline-none bg-white border-gray-500;
|
||||
@ -57,19 +57,31 @@ html, body {
|
||||
}
|
||||
|
||||
.form-submit {
|
||||
@apply text-white font-bold bg-indigo-400 rounded py-3 px-4 leading-tight uppercase self-center;
|
||||
@apply bg-gray-400 border rounded py-3 px-4 leading-tight uppercase self-center;
|
||||
|
||||
&:hover {
|
||||
@apply bg-indigo-500;
|
||||
@apply border-gray-500 bg-white;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@apply outline-none bg-indigo-600;
|
||||
@apply outline-none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.print-button {
|
||||
@apply text-xs text-white bg-indigo-400 px-2 py-1 rounded;
|
||||
|
||||
&:hover {
|
||||
@apply bg-indigo-500;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@apply outline-none bg-indigo-600
|
||||
}
|
||||
}
|
||||
|
||||
.letter {
|
||||
@apply mx-auto p-1;
|
||||
max-width: 66ch;
|
||||
@ -92,7 +104,7 @@ html, body {
|
||||
}
|
||||
|
||||
@screen print {
|
||||
.container > .header, .container > .form {
|
||||
.container > .header, .container > .form, .print-button {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
|
||||
@ -10,7 +10,8 @@
|
||||
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
|
||||
|
||||
<!-- Styles -->
|
||||
<link rel="stylesheet" href="css/main.css"> </head>
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
@ -18,23 +19,26 @@
|
||||
<span>Silahkan masukkan Nama Lengkap dan NISN kamu di bawah ini:</span>
|
||||
</div>
|
||||
|
||||
<form class="form">
|
||||
<form class="form" onsubmit="showLetter()">
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Nama Lengkap</label>
|
||||
<input class="form-input input-text" type="text">
|
||||
<label class="form-label" for="input-name">Nama Lengkap</label>
|
||||
<input class="form-input input-text" id="input-name" type="text" autocomplete="off" required>
|
||||
<p class="input-helper">Nama lengkap sesuai dengan absensi.</p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">NISN</label>
|
||||
<input class="form-input input-text" type="text">
|
||||
<label class="form-label" for="input-nisn">NISN</label>
|
||||
<input class="form-input input-text"id="input-nisn" type="text" autocomplete="off" required>
|
||||
<p class="input-helper">Nomor Induk Siswa Nasional</p>
|
||||
</div>
|
||||
<button type="submit" class="form-submit">Lihat</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="letter">
|
||||
<div class="letter hidden">
|
||||
<button type="button" class="print-button" onclick="window.print()">
|
||||
⎙ Print
|
||||
</button>
|
||||
<div class="letter__header">
|
||||
<p><strong>SMK BHAKTI ANINDYA</strong></p>
|
||||
<p>Jl. K.S. Tubun No. 11, Karawaci, Tangerang</p>
|
||||
@ -73,5 +77,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user