Ui cleanup (#5)

* UI-cleanup * Ui-cleanup
eHealthAfrica · Oct 15, 2020 · f4f2f5d · f4f2f5d
1 parent 2ce2346
commit f4f2f5d
Show file tree

Hide file tree

Showing 5 changed files with 4,046 additions and 30 deletions.
diff --git a/ckanext/biskit/fanstatic/styles/biskit.css b/ckanext/biskit/fanstatic/styles/biskit.css
@@ -481,8 +481,7 @@ body {
   margin-bottom: 0;
 }
 .account-masthead {
-  background-color: #CB200C;
-  background: #CB200C;
+  background: #383838;
 }
 .masthead {
   background-color: #222222;
@@ -582,7 +581,7 @@ body {
   color: #CB200C;
   text-align: center;
   width: 60%;
-  margin: 0 auto;
+  margin: 40px auto;
 }
 .title p {
   color: #222;
@@ -602,7 +601,7 @@ body {
   margin: 20px 0px;
 }
 .row2 {
-  margin: 0 auto !important;
+  margin: 40px auto !important;
 }
 .card {
   border: 1px solid #d6d6d6;
@@ -618,18 +617,29 @@ body {
   width: 80%;
   min-width: 300px;
   margin: 20px auto;
+  position: relative;
+}
+.card::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 100%;
+  bottom: 0;
+  left: 0;
+  background-color: #CB200C11;
+  transition: right 250ms;
+}
+.card:hover::after {
+  right: 0;
 }
 .card h4 {
   color: #CB200C;
   padding: 10px;
 }
-.card.dark {
-  color: white !important;
-  background: #CB200C;
-  border: none;
-}
-.card.dark h4 {
-  color: white;
+.card h4,
+.card img,
+.card p {
+  z-index: 1;
 }
 .sec {
   background: #CB200C11;
@@ -646,6 +656,12 @@ body {
   flex-direction: row;
   padding: 10px;
   margin: 20px auto;
+  transition: all 0.3s;
+}
+.card-2:hover {
+  -webkit-box-shadow: 0px 6px 12px rgba(152, 54, 39, 0.3);
+  -moz-box-shadow: 0px 6px 12px rgba(152, 54, 39, 0.3);
+  box-shadow: 0px 6px 12px rgba(152, 54, 39, 0.3);
 }
 .card-2 h4 {
   margin-top: 20px;
@@ -661,6 +677,10 @@ body {
   align-self: center;
   border-radius: 5px;
   margin-right: 20px;
+  transition: all 0.3s;
+}
+.card-2 .card-2-con:hover {
+  background: #cb1f0c1b;
 }
 .card-2 .card-2-img {
   width: 40px;
@@ -680,11 +700,18 @@ body {
   padding: 10px 20px;
   background-color: #CB200C;
   color: white;
+  transition: all 0.3s;
+}
+.show-all button:hover {
+  background-color: #b11b0b;
 }
 .side-rule {
   border-top: 1px solid #CB200C;
   width: 30%;
 }
+.partners {
+  margin: 50px auto;
+}
 .pat-img {
   margin: 20px auto;
 }
@@ -694,6 +721,14 @@ body {
   align-content: center;
   align-items: center;
 }
+.pat-img-con img {
+  transition: all 0.2s;
+  filter: grayscale(100%);
+}
+.pat-img-con img:hover {
+  filter: grayscale(0%);
+  transform: scale(1.1);
+}
 .top-desc {
   background: #CB200C;
   min-height: 400px;
@@ -749,6 +784,7 @@ body {
     font-size: 1.5em;
     padding-top: 150px;
     width: 90%;
+    margin: 10px auto;
   }
   .search-container {
     padding-bottom: 200px;

diff --git a/ckanext/biskit/fanstatic/styles/less/biskit.less b/ckanext/biskit/fanstatic/styles/less/biskit.less
@@ -27,8 +27,8 @@ body {
 }
 
 .account-masthead {
-  background-color: #CB200C;
-  background: #CB200C;
+  // background-color: #222222;
+  background: #383838;
 }
 
 .masthead {
@@ -143,7 +143,7 @@ body {
   color: #CB200C;
   text-align: center;
   width: 60%;
-  margin: 0 auto;
+  margin: 40px auto;
 
   & p {
     color: #222;
@@ -168,7 +168,7 @@ body {
 }
 
 .row2{
-  margin: 0 auto !important;
+  margin: 40px auto !important;
 }
 
 .card {
@@ -185,19 +185,32 @@ body {
   width: 80%;
   min-width: 300px;
   margin: 20px auto;
+  position: relative;
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 100%;
+    bottom: 0;
+    left: 0;
+    background-color:#CB200C11;
+    transition: right 250ms;
+  }
+
+  &:hover {
+    &::after {
+      right: 0;
+    }
+  }
 
   & h4 {
     color: #CB200C;
     padding: 10px;
   }
-  &.dark {
-    color: white !important;
-    background: #CB200C;
-    border: none;
 
-    & h4 {
-      color: white;
-    }
+  h4, img, p {
+    z-index: 1;
   }
 }
 
@@ -217,6 +230,13 @@ body {
   flex-direction: row;
   padding: 10px;
   margin: 20px auto;
+  transition: all .3s;
+
+  &:hover {
+    -webkit-box-shadow: 0px 6px 12px rgba(152, 54, 39, 0.3);
+    -moz-box-shadow: 0px 6px 12px rgba(152, 54, 39, 0.3);
+    box-shadow: 0px 6px 12px rgba(152, 54, 39, 0.3);
+  }
 
   & h4 {
     margin-top: 20px;
@@ -233,6 +253,11 @@ body {
     align-self: center;
     border-radius: 5px;
     margin-right: 20px;
+    transition: all .3s;
+
+    &:hover {
+      background: #cb1f0c1b;
+    }
   }
 
   & .card-2-img {
@@ -255,6 +280,11 @@ body {
     padding: 10px 20px;
     background-color: #CB200C;
     color: white;
+    transition: all .3s;
+
+    &:hover {
+      background-color: #b11b0b;
+    }
   }
 }
 
@@ -263,6 +293,10 @@ body {
   width: 30%;
 }
 
+.partners {
+  margin: 50px auto;
+}
+
 .pat-img {
   margin: 20px auto;
 }
@@ -272,6 +306,16 @@ body {
   justify-content: center;
   align-content: center;
   align-items: center;
+
+  img {
+    transition: all 0.2s;
+    filter: grayscale(100%);
+
+    &:hover {
+      filter: grayscale(0%);
+      transform: scale(1.1);
+    }
+  }
 }
 
 
@@ -340,6 +384,7 @@ body {
     font-size: 1.5em;
     padding-top: 150px;
     width: 90%;
+    margin: 10px auto;
   }
   .search-container {
     padding-bottom: 200px;
@@ -348,10 +393,11 @@ body {
 
   .title {
     width: 80%;
+
   }
 
   .top-desc {
-    
+
     & h2 {
       width: 90%;
       font-weight: 300;

diff --git a/ckanext/biskit/public/img/blood1.png b/ckanext/biskit/public/img/blood1.png
diff --git a/ckanext/biskit/templates/home/layout1.html b/ckanext/biskit/templates/home/layout1.html
@@ -2,7 +2,7 @@
   <div class="container">
     <div class="row row1">
       <p class="hero-title">
-        Blood Information System for Krisis Intervention and Management.
+        Blood Information System for Crisis Intervention and Management.
       </p>
     </div>
     <div class="row row1">
@@ -24,7 +24,7 @@ <h3>Accessiblity features</h3>
     </div> -->
     <div class="row row2">
       <div class="col-md-6">
-        <div class="card dark">
+        <div class="card">
           <img width="50px" src="/img/blood1.png">
           <h4>Blood Transfusion</h4>
           <p>All relevant data related to the South African blood transfusion system.</p>
@@ -45,9 +45,7 @@ <h4>Crisis Management</h4>
       <div class="title">
         <hr class="top-rule" />
         <h3>
-          Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet
-          sint. Velit officia consequat duis enim velit mollit. Exercitation
-          veniam consequat sunt nostrud amet.
+          The answers to your basic questions and even more complex questions can be mined from our datasets. Here is the number of datasets, organisations & groups available for mining.
         </h3>
       </div>
       <div class="row row2">
@@ -85,9 +83,9 @@ <h4>50</h4>
       </div>
     </div>
   </div>
-
 
-  <div class="container">
+
+  <div class="container partners">
     <div class="title">
       <hr class="top-rule" />
       <h3>