Skip to content

Commit

Permalink
Merge pull request #7 from piazzai/develop
Browse files Browse the repository at this point in the history
Revamp program layout
  • Loading branch information
Michele Piazzai authored Jun 13, 2024
2 parents c2a53e8 + c655970 commit 18682c9
Show file tree
Hide file tree
Showing 15 changed files with 775 additions and 399 deletions.
2 changes: 1 addition & 1 deletion _includes/footer.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{% assign year = site.time | date: '%Y' %}
{% if site.copyright and site.copyright != '' %}
<footer class="container mb-4">
<small class="text-muted">Copyright &copy;{{ year }} {{ site.copyright }}. All rights reserved.</small>
<small class="text-muted">&copy; {{ year }} {{ site.copyright }}. All rights reserved.</small>
</footer>
{% endif %}
162 changes: 76 additions & 86 deletions _layouts/program.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,103 +12,93 @@ <h1 class="display-5">{{ title }}</h1>
{% if site.data.program %}
<hr class="my-4">
<div class="row">
{% assign size = site.data.program.days.size %}
{% if size > 1 %}
<div class="col-lg-2">
{% assign directions = 'horizontal, vertical' | split: ', ' %}
{% for direction in directions %}
{% if direction == 'horizontal' %}
{% assign classes = 'd-block d-lg-none text-center mb-3' %}
{% assign control = 'btn-group' %}
{% else %}
{% assign classes = 'd-none d-lg-block' %}
{% assign control = 'btn-group-vertical' %}
{% endif %}
<div class="{{ classes }}">
<div class="btn {{ control }} p-0 aos-init aos-animate" role="tablist" data-aos="fade-up">
{% for day in site.data.program.days %}
{% assign id = forloop.index | prepend: 'day-' %}
{% assign classes = 'btn btn-secondary' %}
{% if forloop.first %}
{% assign classes = classes | append: ' active' %}
{% endif %}
<button type="button" class="{{ classes }}" data-bs-toggle="tab" data-bs-target="#{{ id }}" role="tab" aria-controls="{{ id }}" aria-selected="true">
<span class="fs-5">{{ day.name }}</span>
</button>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
{% assign width = 10 %}
{% else %}
{% assign width = 12 %}
{% endif %}
<div class="col-lg-{{ width }}">
<div class="accordion">
{% for day in site.data.program.days %}
{% assign id = forloop.index | prepend: 'day-' %}
{% assign classes = 'tab-pane fade' %}
{% if forloop.first %}
{% assign classes = classes | append: ' active show' %}
{% endif %}
<div class="tab-content aos-init aos-animate" data-aos="fade-up">
<div class="{{ classes }}" id="{{ id }}" role="tabpanel" aria-labelledby="{{ id }}-tab">
{% assign categories = site.data.program.legend.categories %}
<ul class="list-unstyled lh-sm">
{% for event in day.events %}
{% if event.category %}
{% assign category = categories | find: 'name', event.category %}
{% assign color = category.color %}
{% else %}
{% assign color = 'gray-4' %}
{% endif %}
{% assign start = event.time | split: ' to ' | slice: 0 %}
{% assign end = event.time | split: ' to ' | slice: 1 %}
{% if forloop.last %}
{% assign classes = color | append: ' mb-2' %}
{% else %}
{% assign classes = color | append: ' mb-4' %}
{% endif %}
<li class="d-flex flex-column flex-lg-row ms-2">
<div class="row col-lg-2 me-lg-4 text-lg-end mb-2">
<small class="fw-light text-muted">{{ start }}–{{ end }}</small>
</div>
<div class="row col-lg-10 border-start border-3 border-{{ classes }}">
{% if event.category %}
<h5 class="fw-normal m-0 mb-2">{{ event.title }}</h5>
<p class="fw-light m-0">{{ event.subtitle }}</p>
{% else %}
<h5 class="fw-light text-muted m-0 mb-2">{{ event.title }}</h5>
<p class="fw-light text-muted m-0">{{ event.subtitle }}</p>
{% endif %}
</div>
</li>
{% endfor %}
</ul>
<div class="text-center">
{% assign slug = day.name | slugify %}
<div class="accordion-item">
<h5 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#{{ slug }}" aria-expanded="false" aria-controls="{{ slug }}">
<span class="h5 m-0">{{ day.name }}</span>
</button>
</h5>
<div id="{{ slug }}" class="accordion-collapse collapse">
<div class="accordion-body mt-2">
{% assign categories = site.data.program.legend.categories %}
<ul class="list-unstyled ms-3 ms-lg-0 lh-sm">
{% for event in day.events %}
{% if event.category %}
{% assign category = categories | find: 'name', event.category %}
{% assign color = category.color %}
{% else %}
{% assign color = 'gray-4' %}
{% endif %}
{% assign start = event.time | split: ' to ' | slice: 0 %}
{% assign end = event.time | split: ' to ' | slice: 1 %}
<li class="d-flex flex-column flex-lg-row">
{% assign classes = color | prepend: 'border-start border-3 border-' %}
<div class="row col-lg-2 pb-2 {{ classes }} border-lg-0">
<small class="fw-light text-muted">{{ start }}–{{ end }}</small>
</div>
{% unless forloop.last %}
{% assign classes = classes | append: ' mb-4' %}
{% endunless %}
<div class="row col-lg-10 {{ classes }}">
<h5 class="fw-normal m-0 mb-2">{{ event.title }}</h5>
<p class="fw-light m-0">{{ event.subtitle }}</p>
<p class="fw-light m-0">
{% if event.paper.first %}
{% for paper in event.paper %}
<a href="{{ paper }}" target="_blank">[Paper {{ forloop.index }}]</a>
{% endfor %}
{% elsif event.paper %}
<a href="{{ event.paper }}" target="_blank">[Paper]</a>
{% endif %}
{% if event.poster.first %}
{% for poster in event.poster %}
<a href="{{ poster }}" target="_blank">[Poster {{ forloop.index }}]</a>
{% endfor %}
{% elsif event.poster %}
<a href="{{ event.poster }}" target="_blank">[Poster]</a>
{% endif %}
{% if event.slides.first %}
{% for slides in event.slides %}
<a href="{{ slides }}" target="_blank">[Slides {{ forloop.index }}]</a>
{% endfor %}
{% elsif event.slides %}
<a href="{{ event.slides }}" target="_blank">[Slides]</a>
{% endif %}
</p>
</div>
</li>
{% endfor %}
</ul>
{% assign legend = day.events | map: 'category' | compact | uniq %}
{% assign size = legend | size %}
{% if size > 0 %}
{% if site.data.program.legend.title %}
<h5 class="fw-normal">{{ site.data.program.legend.title }}</h5>
{% endif %}
{% for item in legend %}
{% assign border = categories | where: 'name', item | map: 'color' | first %}
{% assign bg = border | split: '-' | first | prepend: 'bg-' | append: '-1' %}
{% assign classes = border | prepend: ' border-' | prepend: bg %}
{% if border %}
<small class="d-block d-lg-inline-block mt-2 me-lg-2 px-3 py-1 border-start border-3 {{ classes }}">{{ item | upcase }}</small>
{% endif %}
{% endfor %}
<div class="mt-4 mb-2">
{% if site.data.program.legend.title %}
<h5 class="fw-normal">{{ site.data.program.legend.title }}</h5>
{% endif %}
{% for item in legend %}
{% assign border = categories | where: 'name', item | map: 'color' | first %}
{% assign bg = border | split: '-' | first | prepend: 'bg-' | append: '-1' %}
{% assign classes = border | prepend: ' border-' | prepend: bg %}
{% unless forloop.last %}
{% assign classes = classes | append: ' me-lg-2' %}
{% endunless %}
{% if border %}
<small class="d-block d-lg-inline-block mt-2 px-3 py-1 border-start border-3 {{ classes }}">{{ item | upcase }}</small>
{% endif %}
{% endfor %}
</div>
{% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
{% endif %}
</div>
{% endif %}
</div>
</main>

{% include footer.html %}
2 changes: 1 addition & 1 deletion _sass/_elements.scss
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
}

#map {
height: 65vh;
height: 70vh;
}

#roster {
Expand Down
24 changes: 23 additions & 1 deletion _sass/_utilities.scss
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,15 @@ $colors: (
"green",
"lime",
"yellow",
"orange"
"orange",
);

$breaks: (
"sm": 576,
"md": 768,
"lg": 992,
"xl": 1200,
"xxl": 1400,
);

@each $color in $colors {
Expand Down Expand Up @@ -41,3 +49,17 @@ $colors: (
}
}
}

@each $break, $break-value in $breaks {
@media (min-width: #{$break-value}px) {
.border-#{$break}-0 {
border-width: 0 !important;
}

@for $width from 1 through 5 {
.border-#{$break}-#{$width} {
border-width: #{$width}px !important;
}
}
}
}
105 changes: 105 additions & 0 deletions _sass/overrides/_bootstrap.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,62 @@ a {
}
}

.accordion-item {
border-color: $accordion-item_border;
border-width: 0.15rem;
color: inherit;
background-color: transparent;
}

.accordion-button {
color: inherit;
background-color: $accordion-button_bg;

&:focus {
box-shadow: none;
}

&:not(.collapsed) {
background-color: $accordion-button_bg;
box-shadow: none;
color: inherit;
}
}

.alert-primary {
background-color: $alert-primary_bg;
border-color: transparent !important;
color: inherit;
}

body {
background-color: $body_bg;
color: $body_color;
font-family: "Inter", var(--bs-font-sans-serif);
font-size: 1.15rem;
}

.btn-close:focus {
box-shadow: none;
}

.btn-outline-primary {
border-color: $btn-outline-primary_border !important;
color: $btn-outline-primary_color !important;

&:hover,
&:active,
&.active {
background-color: $btn-outline-primary_hover_bg !important;
color: $btn-outline-primary_hover_color !important;
}

&.disabled {
border-color: $btn-outline-primary_disabled_border !important;
color: $btn-outline-primary_disabled_color !important;
}
}

.btn-primary {
background-color: $btn-primary_bg !important;
border-color: transparent !important;
Expand Down Expand Up @@ -42,12 +91,57 @@ body {
}
}

caption {
color: $caption_color;
}

.card {
border-color: $card_border;
border-width: 0.15rem;
color: inherit;
background-color: transparent;
}

.card-footer,
.card-header {
border-width: 0;
color: inherit;
background-color: $card-header_bg;
}

.card-body,
.card-title {
color: inherit;
}

@for $level from 1 through 6 {
.display-#{$level} {
font-family: "Zilla Slab", var(--bs-font-sans-serif);
}
}

.form-control {
color: $form-control_color;
background-color: $form-control_bg;
border: var(--bs-border-width) solid $form-control_border;
}

.form-control:focus {
color: $form-control_focus_color;
background-color: $form-control_focus_bg;
border-color: $form-control_focus_border;
box-shadow: 0 0 0 0.25rem $form-control_focus_shadow;
}

.form-control::-moz-placeholder,
.form-control::placeholder {
color: $form-control_placeholder;
}

.invalid-feedback {
color: $invalid-feedback;
}

.lead {
font-size: 1.5rem;
}
Expand All @@ -68,6 +162,17 @@ body {
}
}

svg {
fill: $svg_fill;
}

.table td {
border-color: $table_td_border;
border-width: 0 0 0.15rem 0;
color: inherit;
background-color: transparent;
}

.text-muted {
color: $text-muted_color !important;

Expand Down
Loading

0 comments on commit 18682c9

Please sign in to comment.