ba/SMK_Kelulusan
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improving view

Browse Source
This commit is contained in:
Gregorio Chiko Putra 2019-05-09 13:27:37 +07:00
parent efe0a14018
commit b1ab965f11
3 changed files with 54 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
public/css/main.css vendored
View File

@ -7602,7 +7602,6 @@ html, body {
width: 100%; width: 100%;
background-color: #edf2f7; background-color: #edf2f7;
border-width: 1px; border-width: 1px;
border-color: #edf2f7;
border-radius: 0.25rem; border-radius: 0.25rem;
padding-top: 0.75rem; padding-top: 0.75rem;
padding-bottom: 0.75rem; padding-bottom: 0.75rem;
@ -7624,9 +7623,8 @@ html, body {
} }
.form .form-grid .form-submit { .form .form-grid .form-submit {
color: #fff; background-color: #cbd5e0;
font-weight: 700; border-width: 1px;
background-color: #7f9cf5;
border-radius: 0.25rem; border-radius: 0.25rem;
padding-top: 0.75rem; padding-top: 0.75rem;
padding-bottom: 0.75rem; padding-bottom: 0.75rem;
@ -7638,11 +7636,31 @@ html, body {
} }
.form .form-grid .form-submit:hover { .form .form-grid .form-submit:hover {
background-color: #667eea; border-color: #a0aec0;
background-color: #fff;
} }
.form .form-grid .form-submit:focus { .form .form-grid .form-submit:focus {
outline: 0; 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; background-color: #5a67d8;
} }
@ -7672,7 +7690,7 @@ html, body {
} }
@media print { @media print {
.container > .header, .container > .form { .container > .header, .container > .form, .print-button {
display: none; display: none;
} }

22
resources/sass/main.scss vendored
View File

@ -44,7 +44,7 @@ html, body {
} }
.form-input { .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 { &:focus {
@apply outline-none bg-white border-gray-500; @apply outline-none bg-white border-gray-500;
@ -57,19 +57,31 @@ html, body {
} }
.form-submit { .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 { &:hover {
@apply bg-indigo-500; @apply border-gray-500 bg-white;
} }
&:focus { &: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 { .letter {
@apply mx-auto p-1; @apply mx-auto p-1;
max-width: 66ch; max-width: 66ch;
@ -92,7 +104,7 @@ html, body {
} }
@screen print { @screen print {
.container > .header, .container > .form { .container > .header, .container > .form, .print-button {
@apply hidden; @apply hidden;
} }

20
resources/views/main.blade.php
View File

@ -10,7 +10,8 @@
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<!-- Styles --> <!-- Styles -->
<link rel="stylesheet" href="css/main.css"> </head> <link rel="stylesheet" href="css/main.css">
</head>
<body> <body>
<div class="container"> <div class="container">
<div class="header"> <div class="header">
@ -18,23 +19,26 @@
<span>Silahkan masukkan Nama Lengkap dan NISN kamu di bawah ini:</span> <span>Silahkan masukkan Nama Lengkap dan NISN kamu di bawah ini:</span>
</div> </div>
<form class="form"> <form class="form" onsubmit="showLetter()">
<div class="form-grid"> <div class="form-grid">
<div class="form-group"> <div class="form-group">
<label class="form-label">Nama Lengkap</label> <label class="form-label" for="input-name">Nama Lengkap</label>
<input class="form-input input-text" type="text"> <input class="form-input input-text" id="input-name" type="text" autocomplete="off" required>
<p class="input-helper">Nama lengkap sesuai dengan absensi.</p> <p class="input-helper">Nama lengkap sesuai dengan absensi.</p>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="form-label">NISN</label> <label class="form-label" for="input-nisn">NISN</label>
<input class="form-input input-text" type="text"> <input class="form-input input-text"id="input-nisn" type="text" autocomplete="off" required>
<p class="input-helper">Nomor Induk Siswa Nasional</p> <p class="input-helper">Nomor Induk Siswa Nasional</p>
</div> </div>
<button type="submit" class="form-submit">Lihat</button> <button type="submit" class="form-submit">Lihat</button>
</div> </div>
</form> </form>
<div class="letter"> <div class="letter hidden">
<button type="button" class="print-button" onclick="window.print()">
&#9113; Print
</button>
<div class="letter__header"> <div class="letter__header">
<p><strong>SMK BHAKTI ANINDYA</strong></p> <p><strong>SMK BHAKTI ANINDYA</strong></p>
<p>Jl. K.S. Tubun No. 11, Karawaci, Tangerang</p> <p>Jl. K.S. Tubun No. 11, Karawaci, Tangerang</p>
@ -73,5 +77,7 @@
</div> </div>
</div> </div>
</div> </div>
<script src="js/app.js"></script>
</body> </body>
</html> </html>