191 lines
4.2 KiB
Plaintext
191 lines
4.2 KiB
Plaintext
<div class="np-grid-spacing col-xs-12 col-sm-5 col-md-4 col-lg-3 profile-card-container">
|
|
<div class="profile-card-wrapper">
|
|
<div class="profile-card">
|
|
<div class="profile-bio">
|
|
<img
|
|
alt="{{ current_person.name }}"
|
|
class="np-header-avatar-image"
|
|
src="{{ current_person.avatar_url }}"
|
|
style="
|
|
height: 102px;
|
|
margin-bottom: 23px;
|
|
width: 102px;"
|
|
/>
|
|
<div class="profile-bio-header">
|
|
Account Details
|
|
</div>
|
|
<span class="profile-bio-name">{{ current_person.first_name }} {{current_person.last_name}}</span>
|
|
<span class="profile-bio-email">{{ current_person.email }}</span>
|
|
|
|
{% unless current_school.sso_active? %}
|
|
<a
|
|
class="profile-bio-account-settings-button"
|
|
href="{% route account %}"
|
|
>
|
|
Edit Profile
|
|
</a>
|
|
{% endunless %}
|
|
</div>
|
|
{% assign sub_level_length = current_person.properties.subscription_levels | size %}
|
|
{% if sub_level_length > 0 %}
|
|
<div class="product-subscriptions-container">
|
|
<div class="product-subscriptions-banner">
|
|
<div class="product-subscription-banner-content">
|
|
<span class="subscription-name" style="border: none;">
|
|
PRODUCT SUBSCRIPTION
|
|
</span>
|
|
<span class="subscription-level">
|
|
PLAN
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<ul class="product-subscriptions">
|
|
{% assign subscription_levels = current_person.properties.subscription_levels | split: "," %}
|
|
|
|
{% for subscription_level in subscription_levels %}
|
|
{% assign name_level_pair = subscription_level | split: ":"%}
|
|
|
|
<li class="product-subscription">
|
|
{% include "profile_logo_calculator", product: name_level_pair[0] %}
|
|
{%- comment -%} <span class="subscription-name">
|
|
{{ name_level_pair[0] }}
|
|
</span> {%- endcomment -%}
|
|
<span class="subscription-level">
|
|
{%- comment -%} {% if '{{name_level_pair[1]}}' == 'ESS' %}
|
|
Essential
|
|
{% elsif '{{name_level_pair[1]}}' == 'ENH' %}
|
|
Enhanced
|
|
{% elsif '{{name_level_pair[1]}}' == 'ENH+' %}
|
|
Enhanced Plus
|
|
{% endif %} {%- endcomment -%}
|
|
{{ name_level_pair[1] }}
|
|
</span>
|
|
</li>
|
|
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.profile-card-container{
|
|
margin-bottom: 45px;
|
|
}
|
|
|
|
.profile-card-wrapper{
|
|
background: #AA7FB8;
|
|
border: 1px solid #EAEAEA;
|
|
padding-top: 14px;
|
|
}
|
|
|
|
.profile-card{
|
|
background: #fafafa;
|
|
height: 100%;
|
|
padding: 12px;
|
|
padding-bottom: 32px;
|
|
width: 100%;
|
|
}
|
|
|
|
.profile-bio{
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding: 35px 0 85px
|
|
}
|
|
|
|
.profile-bio-header{
|
|
border-bottom: 1px solid #D9D9D9;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
line-height: 25px;
|
|
margin-bottom: 12px;
|
|
padding-bottom: 8px;
|
|
text-align: center;
|
|
width: 75%;
|
|
}
|
|
|
|
.profile-bio-name,
|
|
.profile-bio-email{
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 25px;
|
|
text-align: center;
|
|
}
|
|
|
|
.profile-bio-name{
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.profile-bio-email{
|
|
margin-bottom: 35px;
|
|
}
|
|
|
|
.profile-bio-account-settings-button{
|
|
color: #000;
|
|
border: 1px solid #000;
|
|
padding: 12px 25px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.product-subscriptions-banner{
|
|
align-items: center;
|
|
background: #EAEAEA;
|
|
display: flex;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
height: 36px;
|
|
justify-content: center;
|
|
line-height: 25px;
|
|
width: 100%;
|
|
}
|
|
|
|
.product-subscription-banner-content{
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: row;
|
|
height: 100%;
|
|
justify-content: space-between;
|
|
padding-right: 8px;
|
|
width: 100%;
|
|
}
|
|
|
|
.product-subscriptions{
|
|
padding: 0;
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.product-subscription{
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: row;
|
|
height: 35px;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.subscription-name{
|
|
align-items: center;
|
|
border-right: 2px solid #EAEAEA;
|
|
display: flex;
|
|
height: 100%;
|
|
width: 70%;
|
|
}
|
|
|
|
.subscription-level{
|
|
align-items: center;
|
|
display: flex;
|
|
height: 100%;
|
|
padding-left: 10px;
|
|
width: 30%;
|
|
}
|
|
|
|
@media screen and (min-width: 768px){
|
|
.profile-card-container{
|
|
padding: 0;
|
|
padding-right: 3%;
|
|
}
|
|
}
|
|
</style> |