Skip to content

Commit

Permalink
[update][l]: Most Popular Dataset Section
Browse files Browse the repository at this point in the history
  • Loading branch information
sneha-sharma12 committed Aug 13, 2024
1 parent ea29800 commit 9bfd571
Show file tree
Hide file tree
Showing 11 changed files with 128 additions and 37 deletions.
29 changes: 27 additions & 2 deletions ckanext/ubdc/assets/css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -7393,6 +7393,10 @@ input[type=checkbox][name=consentName]:focus {
text-decoration: underline;
}

.btn-blue {
background-color: #6534DF;
}

.tag {
display: inline-block;
margin-bottom: 4px;
Expand Down Expand Up @@ -10507,7 +10511,7 @@ h4 small {
background-color: #effefa;
background-position: 50% 100%;
background-size: contain;
border-bottom-style: none;
border-bottom: 1px solid #dfe1e7;
flex-direction: column;
justify-content: center;
height: 300px;
Expand Down Expand Up @@ -10657,6 +10661,9 @@ h4 small {
font-size: 23px;
padding-bottom: 11px;
}
.homepage .latest-dataset {
border-bottom: 1px solid #dfe1e7;
}
.homepage .latest-dataset .full-height {
height: 520px;
align-items: center;
Expand All @@ -10680,6 +10687,7 @@ h4 small {
font-weight: 400;
font-size: 14px;
text-transform: capitalize;
border: none;
margin-top: 3rem;
padding: 12px 20px;
}
Expand All @@ -10695,6 +10703,18 @@ h4 small {
padding-top: 0;
padding-bottom: 0;
}
.homepage .latest-dataset .right-popular-dataset {
background-image: url("../../../base/images/popular-right.png"), url("../../../base/images/popular-left.png");
background-position: left bottom, right bottom;
background-repeat: no-repeat, no-repeat;
background-size: auto, auto;
background-color: #f2f1fe;
border-bottom-style: none;
flex-direction: column;
justify-content: center;
padding-top: 0;
padding-bottom: 0;
}
.homepage .latest-dataset .panel {
height: 104px;
margin: 20px;
Expand Down Expand Up @@ -10728,6 +10748,7 @@ h4 small {
font-size: 16px;
font-weight: 700;
color: #000000;
cursor: default;
}
.homepage .latest-dataset .panel .media-body {
text-align: left;
Expand Down Expand Up @@ -10986,7 +11007,7 @@ h4 small {
width: 520px;
margin: 0 auto;
text-align: left;
color: #0d0d12;
color: #04040f;
}

.hero-text {
Expand Down Expand Up @@ -11018,6 +11039,10 @@ input[type=search]::-webkit-search-cancel-button {
background-size: contain;
}

.bg-blue-400 {
background: #6534DF !important;
}

.account-masthead {
min-height: 30px;
color: #fff;
Expand Down
Binary file added ckanext/ubdc/public/base/images/icons/bag-blue.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ckanext/ubdc/public/base/images/popular-left.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ckanext/ubdc/public/base/images/popular-right.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions ckanext/ubdc/public/base/scss/_custom.scss
Original file line number Diff line number Diff line change
Expand Up @@ -302,4 +302,8 @@ input[type=checkbox][name="consentName"]:focus {
.link-selected:hover{
color: #bd4e0a;
text-decoration: underline;
}

.btn-blue {
background-color: $blue-400;
}
24 changes: 23 additions & 1 deletion ckanext/ubdc/public/base/scss/_homepage.scss
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@
background-color: #effefa;
background-position: 50% 100%;
background-size: contain;
border-bottom-style: none;
border-bottom: 1px solid #dfe1e7;
flex-direction: column;
justify-content: center;
height: 300px;
Expand Down Expand Up @@ -285,6 +285,7 @@
}

.latest-dataset {
border-bottom: 1px solid #dfe1e7;
.full-height {
height: 520px;
align-items: center;
Expand Down Expand Up @@ -313,6 +314,7 @@
font-weight: 400;
font-size: 14px;
text-transform: capitalize;
border: none;
margin-top: 3rem;
padding: 12px 20px;

Expand All @@ -330,6 +332,19 @@
padding-top: 0;
padding-bottom: 0;
}

.right-popular-dataset {
background-image: url("#{$imagePath}/popular-right.png"), url("#{$imagePath}/popular-left.png");
background-position: left bottom, right bottom;
background-repeat: no-repeat, no-repeat;
background-size: auto, auto;
background-color: $popular-dataset;
border-bottom-style: none;
flex-direction: column;
justify-content: center;
padding-top: 0;
padding-bottom: 0;
}
.panel {
height: 104px;
margin: 20px;
Expand Down Expand Up @@ -360,6 +375,7 @@
font-size: 16px;
font-weight: 700;
color: #000000;
cursor: default;
}
}
}
Expand All @@ -369,6 +385,8 @@
}
}
}


.themes {
.title {
display: flex;
Expand Down Expand Up @@ -687,3 +705,7 @@ input[type="search"]::-webkit-search-cancel-button {
background: url(/base/images/close.svg) no-repeat 50% 50%;
background-size: contain;
}

.bg-blue-400 {
background: $blue-400 !important;
}
7 changes: 5 additions & 2 deletions ckanext/ubdc/public/base/scss/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -153,14 +153,17 @@ $aqua-bg-primary: #effefa;
$blue-100: #1f69ff;
$blue-200: #093bae;
$blue-300: #07247e;
$blue-400: #6534DF;


// New from the Mockups
$heading-black-shade: #0d0d12;
$heading-black-shade: #04040f;
$text-black-shade: #36394a;

$orange-shade: #c2410c;
$hero-height: 500px;
$dark-green: #184e44;
$light-gray: #f2f2f2;
$medium-gray: #ccc;
$lighter-gray: #eee;
$lighter-gray: #eee;
$popular-dataset: #f2f1fe;
101 changes: 69 additions & 32 deletions ckanext/ubdc/templates/home/snippets/popular.html
Original file line number Diff line number Diff line change
@@ -1,36 +1,73 @@
<section class="popular-dataset">
<div class="container">
<div class="wrap">
<div class="row">
<div class="col-md-12">
<div class="title">
<h3>- {{ _('Most Popular Datasets') }} - </h3>
</div>
</div>
<section class="latest-dataset">
<div class="container-fluid">
<div class="row">
<!-- Left Section -->
<div class="col-md-6 col-sm-12 text-center">
<div class="row dataset-card-height">
<div
class="col-md-8 col-md-offset-1 col-sm-10 col-sm-offset-1 col-xs-12"
>
<div class="d-flex flex-column text-left">
<h1>Most Popular Datasets</h1>
<p class="dataset-tagline">
View the datasets which have the highest number of visits by data users.
</p>
<a href="/datasets">
<button class="btn btn-primary dataset-explore-btn bg-blue-400">
Explore Datasets
<span class="p-left"><i class="fa fa-arrow-right"></i></span>
</button>
</a>
</div>
<div class="row">
{% for dataset in h.popular_datasets(3) %}
<a href="{{ h.url_for('dataset.read', id=dataset.name) }}">
<div class="col-md-4">
<div class="icon">
{% if loop.index == 1 %}
<img src="/base/images/svg/unlocked.svg" alt="">
{% elif loop.index == 2 %}
<img src="/base/images/svg/checked.svg" alt="">
{% elif loop.index == 3 %}
<img src="/base/images/svg/unlocked.svg" alt="">
{% endif %}
</div>
<div class="item">

<span>{{ dataset.title }}</span>
<p> {{ dataset.notes | truncate(180) }} </p>
</div>
</div>
</a>
{% endfor %}
</div>
</div>
</div>
<!-- Right Section -->
<div class="col-md-6 col-sm-12 text-center right-popular-dataset">
<div class="row full-height">
<div
class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12 fix-size-dataset-card"
>
{% for dataset in h.popular_datasets(4) %}

<div class="panel panel-default">
<div class="panel-body">
<div class="media">
<div class="media-left">
{% if loop.index == 1 %}
<img src="/base/images/icons/bus-blue.png" alt="Bus" />
{% elif loop.index == 2 %}
<img src="/base/images/icons/home-blue.png" alt="Home" />
{% elif loop.index == 3 %}
<img src="/base/images/icons/bag-blue.png" alt="Bag" />
{% elif loop.index == 4 %}
<img src="/base/images/icons/leaf-blue.png" alt="Leaf" />
{% endif %}
</div>
<div class="media-body">
<h4 class="media-heading">
{% set title = dataset.title %} {% set trimmed_text =
title|trim %} {% if trimmed_text|length > 20 %} {{
trimmed_text[:20] ~ "..." }} {% else %} {{ trimmed_text }}
{% endif %}
</h4>
<a
href="/datasets/{{ dataset.name }}"
class="btn btn-default btn-sm explore-btn"
>Explore Dataset <span class="arrow"></span></a
>
</div>
</div>
</div>
</div>
<p class="more"><a href="/datasets/">More Datasets →</a> </p>

{% endfor %}
</div>
</div>
</div>


</div>
</section>
</div>
</section>

0 comments on commit 9bfd571

Please sign in to comment.