Skip to content

Commit

Permalink
Merge pull request #673 from middlebury/cci-status-bar-v2
Browse files Browse the repository at this point in the history
CCI CTA bar
  • Loading branch information
poojagunturu96 authored Nov 14, 2024
2 parents 291eb7f + 60f9c63 commit a83907c
Show file tree
Hide file tree
Showing 10 changed files with 270 additions and 44 deletions.
2 changes: 1 addition & 1 deletion src/scss/components/_cta-bar.scss
Original file line number Diff line number Diff line change
Expand Up @@ -41,4 +41,4 @@
.cta-bar__button {
transition: opacity 0.2s;
background: $white;
}
}
106 changes: 106 additions & 0 deletions src/scss/components/_info-bar.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
.info-bar {
background: $blue-lighter;
@include breakpoint(md) {
padding-top: $spacing-2;
padding-bottom: $spacing-2;
}
}

.info-bar__list {
@include breakpoint(md) {
display: flex;
}
}

.info-bar__item {
font-size: $typescale-2;
padding-top: $spacing-2;
padding-bottom: $spacing-2;

@include breakpoint(md) {
padding-top: 0;
padding-bottom: 0;
margin-right: $spacing-4;
padding-right: $spacing-4;
}

&:not(:last-child) {
border-bottom: 1px solid $border-color;
@include breakpoint(md) {
border-bottom: 0;
border-right: 1px solid $border-color;
}
}
}

.info-bar.link-list {
padding-top: $spacing-2;
padding-bottom: $spacing-2;

@include breakpoint(lg) {
line-height: $line-height-solid;
}

.container {
display: flex;
flex-direction: column;
align-items: center;

@include breakpoint(lg) {
flex-direction: row;
justify-content: center;
align-items: baseline;
}
}

.info-bar__list {
display: initial;
text-align: center;
margin-bottom: $spacing-1;

@include breakpoint(sm) {
margin-bottom: 0;
}
}

.info-bar__item {
display: inline;
font-weight: $font-weight-semibold;
white-space: nowrap;
padding: 0;
border: 0;

&:not(:first-child) {
margin-left: $spacing-2;
padding-left: $spacing-2;

@include breakpoint(lg) {
margin-left: 0;
padding-left: 0;
}
}

@include breakpoint(lg) {
margin-right: $spacing-4;
padding-right: $spacing-4;
}

&:last-child {
@include breakpoint(lg) {
border-right: 1px solid $border-color;
}
}

a {
@include link-border;
}
}

ul.link-list {
li:first-child {
a {
padding-left: 0 !important;
}
}
}
}
34 changes: 0 additions & 34 deletions src/scss/components/_office-hours.scss

This file was deleted.

2 changes: 1 addition & 1 deletion src/scss/main.scss
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@
@import 'components/nav';
@import 'components/nav-dropdown';
@import 'components/non-discrimination-policy';
@import 'components/office-hours';
@import 'components/info-bar';
@import 'components/office-footer';
@import 'components/page-header';
@import 'components/page-image';
Expand Down
132 changes: 132 additions & 0 deletions src/templates/office-cci-home.twig
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
{% extends "anchor-layout.twig" %}

{% set page_title = 'Center for Careers and Internships' %}

{% set office_header_nav =
office_header_nav|default(
[
{
text: 'See An Advisor',
active: true,
items: [
{
text: 'Helpful Links'
},
{
text: 'How to apply'
},
{
text: 'Types of aid'
},
{
text: 'Education Loans'
}
]
},
{
text: 'Events and Programs',
items: [
{
text: 'Helpful Links'
},
{
text: 'How to apply'
},
{
text: 'Types of aid'
},
{
text: 'Education Loans'
}
]
},
{
text: 'CCI News'
},
{
text: 'I Want To...',
items: [
{
text: 'Helpful Links'
},
{
text: 'How to apply'
},
{
text: 'Types of aid'
},
{
text: 'Education Loans'
}
]
},
{
text: 'Alumni',
items: [
{
text: 'Helpful Links'
},
{
text: 'How to apply'
},
{
text: 'Types of aid'
},
{
text: 'Education Loans'
}
]
},
{
text: 'Faculty'
},
{
text: 'Employers',
items: [
{
text: 'Helpful Links'
},
{
text: 'How to apply'
},
{
text: 'Types of aid'
},
{
text: 'Education Loans'
}
]
},
{
text: 'Families'
}
]
)
%}

{% block layout_header %}
{% include 'partials/midd-header.twig' %}
{% embed 'partials/anchor-header.twig' with {
is_front: true
}%}
{% block anchor_header_content %}
{% include 'partials/info-bar.twig' with {
class: 'link-list',
items: [
{ text: '<a href="#">Appointments and Drop-Ins</a>' },
{ text: '<a href="#">Handshake</a>' },
{ text: '<a href="#">Midd2Midd</a>' },
{ text: '<a href="#">Hire a MiddKid</a>' }
],
show_social_links: {
dark: true,
items: ['linkedin', 'instagram', 'youtube', 'facebook']
}
} %}
{% endblock %}
{% endembed %}
{% endblock %}

{% block page %}
{% include 'partials/top-level-layout.twig' %}
{% endblock %}
10 changes: 8 additions & 2 deletions src/templates/office-library-home.twig
Original file line number Diff line number Diff line change
@@ -1,13 +1,19 @@
{% extends "anchor-layout.twig" %}

{% set is_front = true %}
{% set is_front = false %}
{% set page_title = 'Library' %}

{% block layout_header %}
{% include 'partials/midd-header.twig' %}
{% embed 'partials/anchor-header.twig' %}
{% block anchor_header_content %}
{% include 'partials/office-hours.twig' %}
{% include 'partials/info-bar.twig' with {
items: [
{ text: '<strong>Davis Family Library: </strong> 9 a.m.-5 p.m.' },
{ text: '<strong>Armstrong Library: </strong> 9 a.m.-5 p.m.' },
{ text: '<a href="" class="link-underline">View Library hours</a>' }
]
} %}
{% endblock %}
{% endembed %}
{% endblock %}
Expand Down
2 changes: 1 addition & 1 deletion src/templates/partials/anchor-header.twig
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{% set is_front = false %}
{# {% set is_front = false %} #}
<section class="anchor-header{% if is_front %} anchor-header--front{% endif %}" aria-labelledby="midd-anchor-header-label">
<div class="container">
<div class="anchor-header__primary">
Expand Down
4 changes: 2 additions & 2 deletions src/templates/partials/cta-bar.twig
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<a href="{{ link }}" class="cta-bar">
<a href="{{ link }}" class="cta-bar">
<span class="cta-bar__text">{{ text }}</span>
<span class="cta-bar__button button button--sm">{{ button }}</span>
</a>
</a>
14 changes: 14 additions & 0 deletions src/templates/partials/info-bar.twig
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<div class="info-bar {{class}}">
<div class="container">
<div class="info-bar__list">
{% for item in items %}
<div class="info-bar__item">
{{item.text}}
</div>
{% endfor %}
</div>
{% if show_social_links %}
{% include 'partials/social-links.twig' with show_social_links %}
{% endif %}
</div>
</div>
8 changes: 5 additions & 3 deletions src/templates/partials/social-links.twig
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
{% set social_items = items|default(['discord', 'linkedin', 'instagram', 'tiktok', 'youtube', 'mastodon', 'pinterest', 'twitter', 'vimeo', 'facebook', 'wechat', 'weibo', 'x', 'threads']) %}

<ul class="d-inline-flex {{class}}">
{% for name in ['discord', 'linkedin', 'instagram', 'tiktok', 'youtube', 'mastodon', 'pinterest', 'twitter', 'vimeo', 'facebook', 'wechat', 'weibo', 'x', 'threads'] %}
{% if env.test or random(1) %}
{% for name in social_items %}
{% if items or random(1) %}
<li class="mr-1">
<a href="#" class="d-inline-block {% if light %}text-white hover-fadeout{% else %}hover-fadein{% endif %} {{office_footer ? " px-1" : " p-1"}}">
<a href="#" class="d-inline-block {% if light %}text-white hover-fadeout{% elseif dark %}hover-fadeout{% else %}hover-fadein{% endif %} {{office_footer ? " px-1" : " p-1"}}">
{% include 'partials/icon.twig' with {
name: name,
class: large ? 'f5' : null
Expand Down

0 comments on commit a83907c

Please sign in to comment.