Added some SPS Updates

This commit is contained in:
Norm Rasmussen
2022-11-23 14:28:58 -05:00
parent b0395b5293
commit f77086d19d
8 changed files with 208 additions and 99 deletions

View File

@ -0,0 +1,25 @@
<div class='np-card'>
<div class='event-header'>
<div class='event-header-left'>
<i class="far fa-thin fa-users"></i>
</div>
<div class='event-header-right'>
<div class='event-header-right-type'>
Other Event
</div>
<div class='event-header-right-title'>
{{ title }}
</div>
</div>
</div>
<div class='other-event-sessions'>
<div class='event-session'>
<div class='event-session-number'>
Click here for more information:
</div>
<a class='event-session-date' href="{{ link }}">
{{ link }}
</a>
</div>
</div>
</div>

View File

@ -34,88 +34,3 @@
</div>
<a class='event-button' href="{% route training_session, id: training_event.sessions.first.id %}">Select</a>
</div>
<style>
.row .np-card {
border: 1px solid #ccc;
padding: 35px;
}
.event-header {
display: flex;
padding-bottom: 25px;
height: 115px;
}
.event-header-left {
margin-right: 20px;
}
.fa-users {
font-size: 44px;
font-weight: 300;
}
.event-header-right-type {
color: #3b3f3d;
font-size: 18px;
}
.event-header-right-title {
color: #3b3f3d;
font-size: 26px;
font-weight: 600;
word-wrap: break-word;
}
.event-sessions {
height: 160px;
margin-bottom: 30px;
}
.event-session {
margin-bottom: 15px;
}
.event-session-number {
color: #606060;
font-weight: bold;
font-size: 18px;
}
.event-session-date {
color: #9b4b87;
text-decoration: none;
cursor: pointer;
font-size: 18px;
}
.event-session-date:hover {
color: #4b2346;
}
.event-additional-sessions {
color: #9b4b87;
text-decoration: none;
cursor: pointer;
}
.event-additional-sessions:hover {
color: #4b2346;
}
.event-button {
background: #9b4b87;
color: white;
border-radius: 4px;
border: none;
cursor: pointer;
padding: 10px 20px;
line-height: 39px;
min-height: 30px;
text-align: center;
margin-bottom: -10px;
text-decoration: none;
}
.event-button:hover {
background: #4b2346
}
@media screen and (max-width: 768px) {
.row .np-card {
width: 80%;
}
}
@media screen and (max-width: 450px) {
.row .np-card {
width: 90%;
padding: 25px;
}
}
</style>

View File

@ -0,0 +1,13 @@
<div class="np-dashboard-resources">
<div class="row row-with-thumbnails">
<div class="col-xs-12 col-sm-6 col-lg-4 event-card">
{% include "cards_other_event" title: "Test Webinar 1", link: "https://google.com" %}
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 event-card">
{% include "cards_other_event" title: "Test Webinar 2", link: "https://google.com" %}
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 event-card">
{% include "cards_other_event" title: "Test Webinar 3", link: "https://google.com" %}
</div>
</div>
</div>

View File

@ -15,12 +15,108 @@
</div>
</div>
{% include "training_events_index" %}
{%- comment -%} <div class="row">
<div class="col-xs-12 col-sm-12">
<div class="np-resource-title" style='font-size: 2rem;'>
Other Training Events
</div>
</div>
</div>
{% include "other_events_index" %} {%- endcomment -%}
</main>
{% include "footer" %}
<style>
.other-event-sessions {
height: 65px;
margin-bottom: 0;
}
.np-training-events {
background: white;
}
.row .np-card {
border: 1px solid #ccc;
padding: 35px;
}
.event-header {
display: flex;
padding-bottom: 25px;
height: 115px;
}
.event-header-left {
margin-right: 20px;
}
.fa-users {
font-size: 44px;
font-weight: 300;
}
.event-header-right-type {
color: #3b3f3d;
font-size: 18px;
}
.event-header-right-title {
color: #3b3f3d;
font-size: 26px;
font-weight: 600;
word-wrap: break-word;
}
.event-sessions {
height: 160px;
margin-bottom: 30px;
}
.event-session {
margin-bottom: 15px;
}
.event-session-number {
color: #606060;
font-weight: bold;
font-size: 18px;
}
.event-session-date {
color: #9b4b87;
text-decoration: none;
cursor: pointer;
font-size: 18px;
}
.event-session-date:hover {
color: #4b2346;
}
.event-additional-sessions {
color: #9b4b87;
text-decoration: none;
cursor: pointer;
}
.event-additional-sessions:hover {
color: #4b2346;
}
.event-button {
background: #9b4b87;
color: white;
border-radius: 4px;
border: none;
cursor: pointer;
padding: 10px 20px;
line-height: 39px;
min-height: 30px;
text-align: center;
margin-bottom: -10px;
text-decoration: none;
}
.event-button:hover {
background: #4b2346
}
@media screen and (max-width: 768px) {
.row .np-card {
width: 80%;
}
}
@media screen and (max-width: 450px) {
.row .np-card {
width: 90%;
padding: 25px;
}
}
</style>