Merge pull request #1 from keitaroinc/design-header

Design the header

ckanext/kepa/assets/css/kepa.css

@@ -0,0 +1,27 @@
+.masthead {
+  padding: 0 !important;
+  background-color: #1C768F; }
+
+.masthead .logo-text {
+  color: white;
+  font-weight: bolder;
+  font-size: larger; }
+
+.logo-container {
+  display: flex;
+  align-items: center; }
+
+.logo-image {
+  max-width: 70px;
+  height: auto; }
+
+.vertical-line {
+  height: 60px;
+  border-left: 3px solid white;
+  margin: 0 10px; }
+
+.logo-text {
+  font-size: 18px; }
+
+.navbar-nav.ms-auto.mb-2.mb-lg-0 li {
+  text-transform: capitalize; }

ckanext/kepa/assets/scss/_variables.scss

@@ -0,0 +1,8 @@
+$primary-color: #1C768F;
+$secondary-color: #FA991C;
+$text-primary: #032539;
+$neutral: #FBF3F2;
+$white: white;
+
+$bold: bolder;
+$bold-size: larger;

ckanext/kepa/assets/scss/kepa.scss

@@ -0,0 +1,35 @@
+@import "variables";
+
+.masthead {
+    padding: 0 !important;
+    background-color: $primary-color;
+}
+
+.masthead .logo-text {
+    color: $white;
+    font-weight: $bold;
+    font-size: $bold-size;
+}
+
+.logo-container {
+    display: flex;
+    align-items: center;
+}
+
+.logo-image {
+    max-width: 70px;
+    height: auto;
+}
+
+.vertical-line {
+    height: 60px;
+    border-left: 3px solid $white;
+    margin: 0 10px;
+}
+
+.logo-text {
+    font-size: 18px;
+}
+.navbar-nav.ms-auto.mb-2.mb-lg-0 li {
+    text-transform: capitalize;
+  }

ckanext/kepa/templates/base.html

@@ -0,0 +1,9 @@
+{% ckan_extends %}
+
+{% block styles %}
+
+{{ super() }}
+
+{% asset 'kepa/kepa-css' %}
+
+{% endblock %}

ckanext/kepa/templates/footer.html

@@ -0,0 +1,33 @@
+<footer class="site-footer">
+  <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>
+      <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 %}
+      </div>
+    </div>
+    {% endblock %}
+  </div>
+</footer>

ckanext/kepa/templates/header.html

@@ -0,0 +1,131 @@
+{% set dataset_type = h.default_package_type() %}
+
+{% block header_wrapper %} {% block header_account %}
+<div class="account-masthead">
+  <div class="container">
+    {% block header_account_container_content %} {% if c.userobj %}
+    <div class="account avatar authed" data-module="me" data-me="{{ c.userobj.id }}">
+      <ul class="list-unstyled">
+        {% block header_account_logged %} {% if c.userobj.sysadmin %}
+        <li>
+          <a href="{{ h.url_for('admin.index') }}" title="{{ _('Sysadmin settings') }}">
+            <i class="fa fa-gavel" aria-hidden="true"></i>
+            <span class="text">{{ _('Admin') }}</span>
+          </a>
+        </li>
+        {% endif %}
+        {% block header_account_profile %}
+        <li>
+          <a href="{{ h.url_for('user.read', id=c.userobj.name) }}" class="image" title="{{ _('View profile') }}">
+            {{ h.user_image((c.user if c and c.user else ''), size=22) }}
+            <span class="username">{{ c.userobj.display_name }}</span>
+          </a>
+        </li>
+        {% endblock %}
+        {% block header_dashboard %}
+        <li>
+          <a href="{{ h.url_for('dashboard.datasets') }}" title="{{ _(" View dashboard") }}">
+            <i class="fa fa-tachometer" aria-hidden="true"></i>
+            <span class="text">{{ _('Dashboard') }}</span>
+          </a>
+        </li>
+        {% endblock %}
+        {% block header_account_settings_link %}
+        <li>
+          <a href="{{ h.url_for('user.edit', id=c.userobj.name) }}" title="{{ _('Profile settings') }}">
+            <i class="fa fa-cog" aria-hidden="true"></i>
+            <span class="text">{{ _('Profile settings') }}</span>
+          </a>
+        </li>
+        {% endblock %} {% block header_account_log_out_link %}
+        <li>
+          <a href="{{ h.url_for('user.logout') }}" title="{{ _('Log out') }}">
+            <i class="fa fa-sign-out" aria-hidden="true"></i>
+            <span class="text">{{ _('Log out') }}</span>
+          </a>
+        </li>
+        {% endblock %} {% endblock %}
+      </ul>
+    </div>
+    {% else %}
+    <nav class="account not-authed" aria-label="{{ _('Account') }}">
+      <ul class="list-unstyled">
+        {% block header_account_notlogged %}
+        <li>{% link_for _('Log in'), named_route='user.login' %}</li>
+        {% if h.check_access('user_create') %}
+        <li>{% link_for _('Register'), named_route='user.register', class_='sub' %}</li>
+        {% endif %} {% endblock %}
+      </ul>
+    </nav>
+    {% endif %} {% endblock %}
+  </div>
+</div>
+{% endblock %}
+<header class="masthead">
+  <div class="container">
+    {% block header_debug %} {% if g.debug and not g.debug_supress_header %}
+    <div class="debug">Blueprint : {{ g.blueprint }}<br />View : {{ g.view }}</div>
+    {% endif %} {% endblock %}
+    <nav class="navbar navbar-expand-lg navbar-light">
+      <hgroup class="{{ g.header_class }} navbar-left">
+
+        {% block header_logo %}
+        {% if g.site_logo %}
+        <a class="logo" href="{{ h.url_for('home.index') }}">
+          <div class="logo-container">
+            <img src="/kepa-logo.png" alt="{{ g.site_title }}" title="{{ g.site_title }}" class="logo-image" />
+            <div class="vertical-line"></div>
+            <span class="logo-text">Kosovo dataportal</span>
+          </div>
+        </a>
+        {% else %}
+        <h1>
+          <a href="{{ h.url_for('home.index') }}">{{ g.site_title }}</a>
+        </h1>
+        {% if g.site_description %}
+        <h2>{{ g.site_description }}</h2>
+        {% endif %}
+        {% endif %}
+        {% endblock %}
+
+      </hgroup>
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-navigation-toggle"
+        aria-controls="main-navigation-toggle" aria-expanded="false" aria-label="{{ _('Toggle navigation') }}">
+        <span class="fa fa-bars text-white"></span>
+      </button>
+
+      <div class="main-navbar collapse navbar-collapse" id="main-navigation-toggle">
+        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
+          {% block header_site_navigation %}
+          {% block header_site_navigation_tabs %}
+          {% set org_type = h.default_group_type('organization') %}
+          {% 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", "resource"]),
+          (org_type ~ '.index',
+          h.humanize_entity_type('organization', org_type, 'main nav') or _('ORGANIZATIONS'), ['organization']),
+          (group_type ~ '.index',
+          h.humanize_entity_type('group', group_type, 'main nav') or _('GROUPS'), ['group']),
+          ('home.about', _('ABOUT US')) ) }}
+          {% endblock %}
+        </ul>
+
+        {% endblock %}
+        {% block header_site_search %}
+        <form class="d-flex site-search" action="{% url_for dataset_type ~ '.search' %}" method="get">
+          <label class="d-none" for="field-sitewide-search">{% block header_site_search_label %}{{
+            h.humanize_entity_type('package', dataset_type, 'search_placeholder') or _('Search Datasets...') }}{%
+            endblock %}</label>
+          <input id="field-sitewide-search" class="form-control me-2" type="text" name="q"
+            placeholder="{{ _('Search datasets') }}"
+            aria-label="{{ h.humanize_entity_type('package', dataset_type, 'search_placeholder') or _('Search datasets...') }}" />
+          <button class="btn" type="submit" aria-label="{{ _('Submit') }}"><i class="fa fa-search"></i></button>
+        </form>
+        {% endblock %}
+      </div>
+    </nav>
+  </div>
+</header>
+{% endblock %}