Skip to content

Commit

Permalink
WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
@zarino @struan
zarino authored and struan committed Dec 12, 2023
1 parent 1383239 commit e9147bc
Show file tree
Hide file tree
Showing 10 changed files with 955 additions and 60 deletions.
97 changes: 87 additions & 10 deletions hub/static/css/_area.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,23 +33,100 @@
}
}

.area-section {
padding-top: 4rem; // leave space for the sticky subnav when jumping to section
.area-tabs {
overflow-x: auto;
background: linear-gradient(0deg, var(--bs-border-color-translucent) 1px, transparent 1px);

.nav {
--bs-nav-tabs-link-active-bg: var(--bs-light);
--bs-nav-tabs-border-color: var(--bs-border-color-translucent);
--bs-nav-tabs-link-active-border-color: var(--bs-nav-tabs-border-color) var(--bs-nav-tabs-border-color) var(--bs-light);
--bs-nav-link-padding-y: 1em;
--bs-nav-link-padding-x: 1.5em;

flex-wrap: nowrap;
align-items: flex-end;
border-bottom: none;
}

.nav-link {
margin-bottom: 0;
border-bottom: none;
white-space: nowrap;

display: flex;
align-items: center;
flex-wrap: nowrap;
gap: map-get($spacers, 2);

// TODO: Better :focus style
}
}

.area-data-grid {
display: grid;
grid-gap: 1rem;
grid-template-columns: 1fr;
grid-auto-flow: row dense;

@include media-breakpoint-up('md') {
grid-template-columns: repeat(2, 1fr);
grid-gap: $grid-gutter-width;
}

@include media-breakpoint-up('lg') {
padding-top: 2rem; // no sticky subnav, but still want a bit of clear space below window top when jumping
margin-top: 2rem; // compensate for smaller padding, still want lots of space between sections
grid-template-columns: repeat(3, 1fr);
}
}

.area-data--sm {
grid-row: span 1;
}

&:first-child {
margin-top: -4rem; // don't want to see the padding, but still want it there when we jump
.area-data--md {
grid-row: span 2;
}

@include media-breakpoint-up('lg') {
margin-top: -2rem;
.area-data--lg {
grid-row: span 3;
}

.area-data-more {
display: none; // will be shown later on
margin-top: map-get($spacers, 3);

a {
display: flex;
align-items: center;
justify-content: center;
gap: map-get($spacers, 1);
border-radius: $border-radius;
background: rgba(#fff, 0.5);
border: 1px solid rgba(#000, 0.1);
padding: $card-spacer-y $card-spacer-x;

&:hover, &:focus {
background: $card-bg;
border-color: $card-border-color;
}
}
}

@each $tab in ("mp", "opinion", "place", "movement") {
.area-content[data-section="#{$tab}"] {
.area-section:not(##{$tab}),
.area-data-more {
display: none;
}
}
}

.area-content[data-section="featured"] {
.area-data-more {
display: block;
}

.row .card + .card {
margin-top: var(--bs-gutter-y); // vertical space between cards in a column
.area-data-grid > :not(.area-data--featured) {
display: none;
}
}
81 changes: 46 additions & 35 deletions hub/static/css/_dataset-card.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,50 +37,61 @@
}
}
}
}

.dataset-card--favourite {
.js-unfavourite-this-dataset {
display: block;
}

.js-favourite-this-dataset {
display: none;
}
}

.dataset-card-header {
display: flex;

h5 {
margin-bottom: 0;
margin-right: auto;
padding: var(--bs-card-spacer-y) 0 var(--bs-card-spacer-y) var(--bs-card-spacer-x);

// If not followed by a favouriting control
&:last-child {
padding-right: var(--bs-card-spacer-x);
.card-header {
display: flex;
padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x) 0;
border-bottom: none;

h1, h2, h3, h4, h5 {
margin-bottom: 0;
margin-right: auto;
}

form {
margin: calc(var(--bs-card-spacer-y) * -1) calc(var(--bs-card-spacer-x) * -1);
}

button {
background: transparent;
border: none;
line-height: 1.25em; // match h5
font-size: 1em;
color: $gray-500;
padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);

&:focus {
color: inherit;
}

&:hover {
color: $link-color;
}
}
}

button {
background: transparent;
border: none;
line-height: 1.25em; // match h5
font-size: 1em;
color: $gray-500;
padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
.card-footer {
color: $text-muted;
font-size: map-get($font-sizes, 8);

&:focus {
a {
color: inherit;
}
text-decoration: none;

&:hover {
color: $link-color;
&:hover, &:focus {
color: $link-color;
text-decoration: underline;
}
}
}
}

& + .card-body {
padding-top: 0;
.dataset-card--favourite {
.js-unfavourite-this-dataset {
display: block;
}

.js-favourite-this-dataset {
display: none;
}
}
18 changes: 3 additions & 15 deletions hub/static/css/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,23 +106,8 @@ $link-hover-color: shift-color($link-color, $link-shade-percentage);

// Grid breakpoints

$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
);

// Grid containers

$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
);

// Grid columns

// Container padding
Expand Down Expand Up @@ -222,6 +207,9 @@ $navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3

// Cards

$card-cap-bg: $white;
$card-bg: $white;

// Accordion

// Tooltips
Expand Down
9 changes: 9 additions & 0 deletions hub/static/js/all.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,15 @@ $(function(){
});
}
})

if ( $('.area-content').length ) {
$(window).on('hashchange', function(e){
var $section = $(window.location.hash);
if ( $section.length ) {
$('.area-content').attr('data-section', window.location.hash.substring(1))
}
})
}
})

var makeChart = function() {
Expand Down
1 change: 1 addition & 0 deletions hub/templates/hub/includes/icons/chevron-right.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="{{ width|default:'1em' }}" height="{{ height|default:'1em' }}" viewBox="0 0 16 16" class="{{ classes }}" role="{{ role|default:'presentation' }}" fill="currentColor"><<path d="M11.793 7.041a1.332 1.332 0 0 1 0 1.862l-5.665 5.656a1.32 1.32 0 0 1-.983.441 1.322 1.322 0 0 1-1.316-1.315c0-.378.163-.738.447-.988L9 7.972 4.276 3.247a1.317 1.317 0 0 1-.386-.931C3.89 1.594 4.485 1 5.207 1c.349 0 .684.139.93.386l5.656 5.655z"/></svg>
1 change: 1 addition & 0 deletions hub/templates/hub/includes/icons/share.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="{{ width|default:'1em' }}" height="{{ height|default:'1em' }}" viewBox="0 0 16 16" class="{{ classes }}" role="{{ role|default:'presentation' }}" fill="currentColor"><path d="M7.293.293a1 1 0 0 1 1.414 0l3 3a1 1 0 0 1-1.414 1.414L9 3.414V10a1 1 0 1 1-2 0V3.414L5.707 4.707a1 1 0 0 1-1.414-1.414l3-3zM2 7a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2H4v5h8V8h-1a1 1 0 1 1 0-2h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7z"></path></svg>
Loading

0 comments on commit e9147bc

Please sign in to comment.