Implement design for the footer

ckanext/kepa/assets/scss/kepa.scss

@@ -6,6 +6,15 @@
     align-items: center;
 }
 
+.align-center {
+    text-align: center;
+}
+
+.column {
+    display: flex;
+    flex-direction: column;
+}
+
 .masthead {
     padding: 0 !important;
     background-color: $primary-color;
@@ -45,7 +54,7 @@
     background: url(/main-kepa-img.jpg) center/cover no-repeat;
 }
 
-.homepage .hero-placeholder .container{
+.homepage .hero-placeholder .container {
     min-height: 600px;
     width: 50%;
     display: flex;
@@ -55,10 +64,16 @@
     text-align: center;
 }
 
-.homepage .hero-placeholder .container img{
+.homepage .hero-placeholder .container img {
     max-height: 300px;
 }
 
+@media screen and (max-width: 600px) {
+    .homepage .hero-placeholder .container img {
+        max-height: 150px;
+    }
+}
+
 .heading {
     color: $white;
     font-size: $xxl-size;
@@ -84,7 +99,7 @@
     border-radius: 0;
 }
 
-.search-form{
+.search-form {
     margin-bottom: 0;
     padding: 0;
 }
@@ -94,41 +109,41 @@
     border-radius: 0;
 }
 
-.tags{
+.tags {
     background-color: $white;
     height: 55px;
     padding: 0;
     display: flex;
     align-items: center;
 }
 
-.tags h4{
+.tags h4 {
     margin: 0 !important;
     padding-left: 10px;
 }
 
-.tags a{
+.tags a {
     margin-bottom: 0 !important;
     margin-left: 10px;
 }
 
-.card{
+.card {
     width: 200px;
     align-items: center;
     text-align: center;
     background-color: $secondary-color;
 }
 
-.card a{
+.card a {
     color: $white;
     height: 100%;
     display: flex;
     flex-direction: column;
-    justify-content: center;;
+    justify-content: center;
     text-decoration: none;
 }
 
-.card a h1{
+.card a h1 {
     font-size: $xxxl-size;
     margin-bottom: 0;
 }
@@ -139,11 +154,68 @@
     height: 100%;
 }
 
+@media screen and (max-width: 650px) {
+    .module-stats-center-flex {
+        flex-direction: column;
+        align-items: center; 
+    }
+
+    .module-feeds {
+        min-height: 500px !important;
+    }
+}
+
 .module-feeds {
     min-height: 300px;
     background-color: $tertiary-color !important;
 }
 
-.module-feeds .container{
+.module-feeds .container {
     height: 200px;
-}
+}
+
+.attribution {
+    color: $white;
+    margin-top: 20px;
+}
+
+.attribution h2 {
+    margin-bottom: 20px;
+}
+
+.address {
+    display: flex;
+    justify-content: end;
+    width: 100%;
+    padding-right: 30px;
+    align-items: center;
+    color: $white;
+    font-weight: $bold;
+}
+
+.address img {
+    padding-right: 20px;
+    height: 50px;
+}
+
+.column a {
+    font-size: medium;
+}
+
+.btn-primary {
+    background-color: $secondary-color;
+    border: none;
+    outline: none;
+}
+
+.breadcrumb .home a i {
+    color: $secondary-color;
+}
+
+.site-footer {
+    padding: 40px;
+}
+
+.item-count {
+    background-color: $secondary-color !important;
+}

ckanext/kepa/templates/footer.html

@@ -2,32 +2,67 @@
   <div class="container">
     {% block footer_content %}
     <div class="row">
-      <div class="col-md-8 footer-links">
-        {% block footer_nav %}
-          <ul class="list-unstyled">
-            {% block footer_links %}
-              <li><a href="{{ h.url_for('home.about') }}">{{ _('About {0}').format(g.site_title) }}</a></li>
-            {% endblock %}
-          </ul>
-          <ul class="list-unstyled">
-            {% block footer_links_ckan %}
-              {% set api_url = 'http://docs.ckan.org/en/{0}/api/'.format(g.ckan_doc_version) %}
-              <li><a href="{{ api_url }}">{{ _('CKAN API') }}</a></li>
-              <li><a href="http://www.ckan.org/">{{ _('CKAN Association 1234') }}</a></li>
-              <li><a href="http://www.opendefinition.org/okd/"><img src="{{ h.url_for_static('/base/images/od_80x15_blue.png') }}" alt="Open Data"></a></li>
-            {% endblock %}
-          </ul>
-        {% endblock %}
+      <div class="col-md-4 attribution">
+        <h2>{{_('The Kosovo dataportal')}} </h2>
+        <div class="column">
+          <a class="" href="http://ckan.org">{{_('About this website')}}</a>
+          <a class="" href="http://ckan.org">{{_('Open source on GitHub')}}</a>
+          <a class="" href="http://ckan.org">{{_('Feedback on dataportal.xk')}}</a>
+          <a class="" href="http://ckan.org">{{_('[email protected]')}}</a>
+        </div>
+      </div>
+      <div class="col-md-4 attribution">
+        <h2>{{_('Toolbox for sharing data')}}</h2>
+        <div class="column">
+          <a class="" href="http://ckan.org">{{_('Documentation and services - Kosovo`s data portal')}}</a>
+          <a class="" href="http://ckan.org">{{_('Guidance for open and shared data')}}</a>
+        </div>
       </div>
       <div class="col-md-4 attribution">
-        {% block footer_attribution %}
-          <p>{% trans %}<strong>Powered by</strong> <a class="hide-text ckan-footer-logo" href="http://ckan.org">CKAN</a>{% endtrans %}</p>
-        {% endblock %}
-        {% block footer_lang %}
-          {% snippet "snippets/language_selector.html" %}
-        {% endblock %}
+        <h2>{{_('Social')}}</h2>
+        <div class="column">
+          <a class="" href="http://ckan.org">{{_('Network Open Source and Data')}}</a>
+          <a class="" href="http://ckan.org">{{_('Facebook')}}</a>
+          <a class="" href="http://ckan.org">{{_('Twitter')}}</a>
+        </div>
       </div>
     </div>
-    {% endblock %}
+
+  </div>
+  <div class="address">
+    <img src="/republic-kosovo.png" />
+    <span>
+      {{_('Republika e Kosovës')}} <br>
+      {{_('Republika Kosova - Republic of Kosovo')}}<br>
+      {{_('Qeveria – Vlada - Government')}}<br>
+    </span>
   </div>
 </footer>
+
+
+<script>
+  console.log("ovde");
+
+  document.addEventListener("DOMContentLoaded", function () {
+    calculateSpaceToBottom();
+  });
+
+  window.addEventListener("resize", function () {
+    calculateSpaceToBottom();
+  });
+
+  function calculateSpaceToBottom() {
+
+    const siteFooter = document.getElementsByClassName("site-footer");
+    const main = document.getElementsByClassName("main")
+    const masthead = document.getElementsByClassName("masthead")
+    const accountmasthead = document.getElementsByClassName("account-masthead")
+
+    if (siteFooter) {
+      const height = window.innerHeight - (siteFooter[0].clientHeight + masthead[0].clientHeight);
+
+      main[0].style.minHeight = height + "px"
+    }
+  }
+</script>
+{% endblock %}

ckanext/kepa/templates/header.html

@@ -102,13 +102,13 @@ <h2>{{ g.site_description }}</h2>
           {% set group_type = h.default_group_type('group') %}
 
           {{ h.build_nav_main(
-          (dataset_type ~ '.search', h.humanize_entity_type('package', dataset_type, 'main nav') or _('DATASETS'),
+          (dataset_type ~ '.search', h.humanize_entity_type('package', dataset_type, 'main nav') or _('datasets').upper(),
           ["dataset", "resource"]),
           (org_type ~ '.index',
-          h.humanize_entity_type('organization', org_type, 'main nav') or _('ORGANIZATIONS'), ['organization']),
+          h.humanize_entity_type('organization', org_type, 'main nav') or _('organizations').upper(), ['organization']),
           (group_type ~ '.index',
-          h.humanize_entity_type('group', group_type, 'main nav') or _('GROUPS'), ['group']),
-          ('home.about', _('ABOUT US')) ) }}
+          h.humanize_entity_type('group', group_type, 'main nav') or _('groups').upper(), ['group']),
+          ('home.about', _('about us').upper()) ) }}
           {% endblock %}
         </ul>