change home2 scss

1682d305 · Luthfi Dzaky Saifuddin · 9d33e555 · 1682d305 · 1682d305 · 1682d305
Commit 1682d305 authored Oct 09, 2019 by Luthfi Dzaky Saifuddin
--- a/README.md
+++ b/README.md
@@ -55,7 +55,7 @@ Kemudian, saya juga belajar untuk melakukan testing pada bentuk
 layout. Sehingga bisa memastikan apakah style yang saya gunakan (dengan <b>SASS</b>)
 berhasil masuk. Untuk file yang saya gunakan adalah `home1.scss` sedangkan
 jika saya menggunakan `home2.scss` akan menimbulkan `functional test` error
-karena pada test tersebut saya mengecek layout apakah input berada di tengah atau tidak.
+karena pada test tersebut saya mengecek layout apakah card berada di tengah atau tidak.
 Ada perubahan pada `functional_test` dimana saya harus memakai
 `StaticLiveServerTestCase` untuk mengetes layout karena ketika saya menggunakan
 `LiveServerTestCase` style yang saya gunakan tidak tampil. Namun, penggunaannya tetap sama.

--- a/functional_tests/tests.py
+++ b/functional_tests/tests.py
@@ -65,6 +65,14 @@ class NewVisitorTest(StaticLiveServerTestCase):
            delta=10
        )

+        # She notices the card is centered
+        card = self.browser.find_element_by_id('card-luthfi')
+        self.assertAlmostEqual(
+            card.location['x'] + card.size['width'] / 2,
+            512,
+            delta=10
+        )
+
        # She starts a new list and sees the input is nicely
        # centered there too
        inputbox.send_keys('testing')

--- a/lists/static/home2.scss
+++ b/lists/static/home2.scss
@@ -2,27 +2,64 @@ body {
    .container-fluid {
        width: 100%;
        padding: 20px;
+        text-align: center;
        background: #517880;
        font-family: monospace;
    }
 }

-table {
-  border-collapse: collapse;
-  width: 50%;
-    margin-left: auto;
-    margin-right: auto;
-}
-
 th, td {
  text-align: left;
  padding: 8px;
 }

+tr:nth-child(even) {
+  background-color: #f2f2f2
+}
+
+tr:nth-child(odd) {
+  background-color: #d5d0bc
+}
+
 tr:nth-child(even){background-color: #f2f2f2}
 tr:nth-child(odd){background-color: #d5d0bc}

+
 th {
  background-color: #4CAF50;
  color: white;
+}
+
+.card {
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+  max-width: 300px;
+  font-family: arial;
+}
+
+.title {
+  color: grey;
+  font-size: 18px;
+}
+
+button {
+  border: none;
+  outline: 0;
+  display: inline-block;
+  padding: 8px;
+  color: white;
+  background-color: #000;
+  text-align: center;
+  cursor: pointer;
+  width: 100%;
+  font-size: 18px;
+}
+
+a {
+  text-decoration: none;
+  font-size: 22px;
+  color: black;
+}
+
+button:hover, a:hover {
+  opacity: 0.7;
 }
\ No newline at end of file
--- a/lists/templates/base.html
+++ b/lists/templates/base.html
@@ -12,7 +12,7 @@
 </head>
 <body>

-<div class="card">
+<div class="card" id="card-luthfi">
    <img src="https://assets.gitlab-static.net/uploads/-/system/user/avatar/1572360/avatar.png?width=90" alt="Luthfi"
         style="width:100%">
    <h1>Luthfi Dzaky Saifuddin</h1>