293 lines
7.9 KiB
Plaintext
293 lines
7.9 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;"
|
|
/>
|
|
{%- comment -%} <div class="profile-bio-header">
|
|
Account Details
|
|
</div> {%- endcomment -%}
|
|
<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>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="product-subscriptions-card-wrapper">
|
|
<div class="product-subscriptions-card">
|
|
{% assign sub_levels_length = current_person.properties.subscription_levels | size %}
|
|
{% if sub_levels_length > 0 %}
|
|
<div class="product-subscriptions-container">
|
|
<div class="product-subscriptions-banner">
|
|
<span class="subscription-name" style="border: none;">
|
|
Product Subscriptions
|
|
</span>
|
|
{%- comment -%} <span class="subscription-level">
|
|
PLAN
|
|
</span> {%- endcomment -%}
|
|
</div>
|
|
<ul class="product-subscriptions">
|
|
{% assign subscription_levels = current_person.properties.subscription_levels | split: "," %}
|
|
|
|
{% assign essentials_found_flag = false %}
|
|
{% for subscription_level in subscription_levels %}
|
|
{% assign name_level_pair = subscription_level | split: ":"%}
|
|
{% assign product_sub_level = name_level_pair | slice: 1 | strip %}
|
|
{% if product_sub_level contains 'Essential' %}
|
|
{% assign essentials_found_flag = true %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
{% if essentials_found_flag %}
|
|
<div class="product-subscription-level-header">
|
|
Core
|
|
</div>
|
|
<div style="background: #795CA0; height: 3px; margin: 5px; width: 20px;"></div>
|
|
{% endif %}
|
|
|
|
{% for subscription_level in subscription_levels %}
|
|
{% assign name_level_pair = subscription_level | split: ":"%}
|
|
{% assign product_sub_level = name_level_pair | slice: 1 | strip %}
|
|
|
|
{% if product_sub_level contains 'Essential' %}
|
|
{% include "profile_logo_calculator", product: name_level_pair[0] %}
|
|
{%- comment -%} <li class="product-subscription">
|
|
<span class="subscription-name">
|
|
{{ name_level_pair[0] }}
|
|
</span>
|
|
<span class="subscription-level">
|
|
{{ name_level_pair[1] }}
|
|
</span>
|
|
{% if '{{name_level_pair[1]}}' == 'ESS' %}
|
|
Essential
|
|
{% elsif '{{name_level_pair[1]}}' == 'ENH' %}
|
|
Enhanced
|
|
{% elsif '{{name_level_pair[1]}}' == 'ENH+' %}
|
|
Enhanced Plus
|
|
{% endif %}
|
|
</li> {%- endcomment -%}
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
{% assign enhanced_found_flag = false %}
|
|
{% for subscription_level in subscription_levels %}
|
|
{% assign name_level_pair = subscription_level | split: ":"%}
|
|
{% assign product_sub_level = name_level_pair | slice: 1 | strip %}
|
|
{% if product_sub_level contains 'Enhanced' %}
|
|
{% unless product_sub_level contains 'Enhanced+' %}
|
|
{% assign enhanced_found_flag = true %}
|
|
{% endunless %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
{% if enhanced_found_flag %}
|
|
<div class="product-subscription-level-header" style="margin-top: 20px;">
|
|
Core
|
|
</div>
|
|
<div style="background: #49A9E1; height: 3px; margin: 5px; width: 20px;"></div>
|
|
{% endif %}
|
|
|
|
{% for subscription_level in subscription_levels %}
|
|
{% assign name_level_pair = subscription_level | split: ":"%}
|
|
{% assign product_sub_level = name_level_pair | slice: 1 | strip %}
|
|
|
|
{% if product_sub_level contains 'Enhanced' %}
|
|
{% unless product_sub_level contains 'Enhanced+' %}
|
|
{% include "profile_logo_calculator", product: name_level_pair[0] %}
|
|
{% comment %} <li class="product-subscription">
|
|
</li> {% endcomment %}
|
|
{% endunless %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
{% assign enhanced_plus_found_flag = false %}
|
|
{% for subscription_level in subscription_levels %}
|
|
{% assign name_level_pair = subscription_level | split: ":"%}
|
|
{% assign product_sub_level = name_level_pair | slice: 1 | strip %}
|
|
{% if product_sub_level contains 'Enhanced+' %}
|
|
{% assign enhanced_plus_found_flag = true %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
{% if enhanced_plus_found_flag %}
|
|
<div class="product-subscription-level-header" style="margin-top: 20px;">
|
|
Premium
|
|
</div>
|
|
<div style="background: #E26B37; height: 3px; margin: 5px; width: 20px;"></div>
|
|
{% endif %}
|
|
|
|
{% for subscription_level in subscription_levels %}
|
|
{% assign name_level_pair = subscription_level | split: ":"%}
|
|
{% assign product_sub_level = name_level_pair | slice: 1 | strip %}
|
|
|
|
{% if product_sub_level contains 'Enhanced+' %}
|
|
{% include "profile_logo_calculator", product: name_level_pair[0] %}
|
|
{% comment %} <li class="product-subscription">
|
|
</li> {% endcomment %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.profile-card-container{
|
|
margin-bottom: 45px;
|
|
}
|
|
|
|
/* .profile-card-wrapper{
|
|
background: #AA7FB8;
|
|
border: 1px solid #EFEFEF;
|
|
padding-top: 14px;
|
|
} */
|
|
|
|
.profile-card{
|
|
background: #FFF;
|
|
border: 1px solid #f2f4f5;
|
|
box-shadow: 0 3px 5px rgba(0,0,0,.1);
|
|
margin-bottom: 25px;
|
|
/* padding: 12px;
|
|
padding-bottom: 32px; */
|
|
padding: 45px 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.profile-bio{
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.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{
|
|
line-height: 25px;
|
|
text-align: center;
|
|
}
|
|
|
|
.profile-bio-name{
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.profile-bio-email{
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
margin-bottom: 35px;
|
|
}
|
|
|
|
.profile-bio-account-settings-button{
|
|
background-color: #aa7fb8;
|
|
border-radius: 25px;
|
|
color: #FFF;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
margin: 20px 30px;
|
|
padding: 12px 18px 12px;
|
|
position: relative;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
transition: .3s ease all;
|
|
}
|
|
|
|
.product-subscriptions-card{
|
|
border: 1px solid #f2f4f5;
|
|
box-shadow: 0 3px 5px rgba(0,0,0,.1);
|
|
}
|
|
|
|
.product-subscriptions-banner{
|
|
align-items: center;
|
|
/* background: #EAEAEA; */
|
|
border-bottom: 1px solid #f2f4f5;
|
|
display: flex;
|
|
/* font-size: 14px;
|
|
font-weight: 400; */
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
height: 55px;
|
|
justify-content: center;
|
|
/* line-height: 25px; */
|
|
}
|
|
|
|
.product-subscriptions{
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding: 0;
|
|
}
|
|
|
|
.product-subscription-level-header{
|
|
color: #595959;
|
|
font-size: 1em;
|
|
/* margin-bottom: 10px; */
|
|
}
|
|
|
|
.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: 25px; */
|
|
margin: 3px 0;
|
|
}
|
|
|
|
.profile-card-product-logo{
|
|
height: 1.25em;
|
|
}
|
|
|
|
/* .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>
|