Skip to content

Commit

Permalink
Merge pull request #694 from arXiv/develop
Browse files Browse the repository at this point in the history 
deploy forum banner styling updates
  • Loading branch information
@kyokukou
kyokukou authored Aug 14, 2024
2 parents 01048c8 + 8e9a33c commit aa43e04
Show file tree
Hide file tree
Showing 3 changed files with 102 additions and 33 deletions.
92 changes: 80 additions & 12 deletions browse/static/css/slider.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/* latest update: 7/30/2024 */
/* latest update: 8/14/2024 */

body {
margin: 0;
Expand Down Expand Up @@ -104,11 +104,9 @@ body {
width: 155px;
}
.slider-wrapper .donate-cta a {
/* background-color: #fe9600; */
background-color: #F5A623;
border: 0 solid #9e9fa1;
border-radius: 5px;
/* color: #fff; */
color: #4C2F00;
display: inline-block;
font-size: 20px;
Expand Down Expand Up @@ -289,6 +287,8 @@ body {
text-decoration: none;
}



/*Forum banner style overrides*/
.slider-wrapper.bps-banner.forum {
background-color: #000;
Expand Down Expand Up @@ -316,6 +316,12 @@ body {
.slider-wrapper.bps-banner.forum .banner-btn-grad {
box-shadow: 0 0 20px #31533a;
}
@media (max-width: 769px) {
.slider-wrapper.bps-banner.forum {
display:none;
}
}

/*green banner variation */
.slider-wrapper.bps-banner.forum.green {
background-color: #c4d82e;
Expand All @@ -331,20 +337,82 @@ body {
margin-top: 8px;
margin-bottom: 8px;
}
.slider-wrapper.bps-banner.forum .copy-donation.bps-banner p {
.slider-wrapper.bps-banner.forum.green .copy-donation.bps-banner p {
color: #000;
text-shadow: none;
}
.slider-wrapper.bps-banner.forum .copy-donation.bps-banner p a {
color: #1B7CB0;
.slider-wrapper.bps-banner.forum.green .copy-donation.bps-banner p a {
color: blue;
text-shadow: none;
text-decoration: underline;
}
.slider-wrapper.bps-banner.forum .banner-btn-grad {
box-shadow: 0 0 20px #31533a;

/*blue banner variation*/
.slider-wrapper.bps-banner.forum.blue {
background-color: #a5d6fe;
color: #000;
}
@media (max-width: 769px) {
.slider-wrapper.bps-banner.forum {
display:none;
}
.slider-wrapper.bps-banner.forum.blue .bps-banner-image {
margin: 8px 32px 8px 15px;
height: 70px;
}
.slider-wrapper.bps-banner.forum.blue .copy-donation.bps-banner h2 {
color: #1f5e96;
font-size: 1.35em;
margin-top: 8px;
margin-bottom: 8px;
}
.slider-wrapper.bps-banner.forum.blue .copy-donation.bps-banner p a {
color: #0000FF;
}
.slider-wrapper.bps-banner.forum.blue .copy-donation.bps-banner p a:hover {
color: #000000;
}
.slider-wrapper.bps-banner.forum.blue .amount-donation.bps-banner .donate-cta a {
color: white;
}
.slider-wrapper.bps-banner.forum.blue .amount-donation.bps-banner .donate-cta .banner-btn-grad {
background-image: linear-gradient(to right, #062c4f 0%, #1f5e96 51%, #062c4f 100%);
}

/*grey banner variation*/
.slider-wrapper.bps-banner.forum.grey {
background-color: #e1e1e1;
color: #000;
}
.slider-wrapper.bps-banner.forum.grey .columns {
margin: 7px 12px;
}
.slider-wrapper.bps-banner.forum.grey .copy-donation.bps-banner {
border: 1px solid grey;
background-color: white;
padding: 2px 10px;
margin: 5px 15px 5px 5px;
font-family: monospace;
border-radius: 8px;
}
.slider-wrapper.bps-banner.forum.grey .bps-banner-image {
height: 50px;
}
.slider-wrapper.bps-banner.forum.grey .copy-donation.bps-banner h2 {
color: #000;
font-size: 1em;
margin: 8px 0px;
}
.slider-wrapper.bps-banner.forum.grey .copy-donation.bps-banner p {
font-size: 1em;
color:#000;
}
.slider-wrapper.bps-banner.forum.grey .copy-donation.bps-banner p a {
color:blue;
}
.slider-wrapper.bps-banner.forum.grey .copy-donation.bps-banner p a:hover {

}
.slider-wrapper.bps-banner.forum.grey .amount-donation.bps-banner .donate-cta .banner-btn-grad {
background-image: linear-gradient(to right, #b3bf35 0%, #dee68f 51%, #c1cf35 100%);
font-size: 16px;
padding: 10px 15px;
}

/*END banner variations*/
18 changes: 9 additions & 9 deletions browse/static/js/rotate_forum_info.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,21 @@ const forumSessionData = [
['Sonification', 'https://cornell.zoom.us/j/95303704836?pwd=bnIanuPLl7mJvdHGIq5VDsdiEhhuYT.1', new Date(Date.UTC(2024, 8, 10, 15 + timeZoneOffset, 5, 0))],
['SciELO y Accessibilidad', 'https://cornell.zoom.us/j/95978099995?pwd=TLFRHtobdTSpwJLDInZ8GNgVEFWUPB.1', new Date(Date.UTC(2024, 8, 11, 11 + timeZoneOffset, 5, 0))], // 17 CEST is 11 EST right?
['HTML Papers on arXiv', 'https://cornell.zoom.us/j/92772646280?pwd=nN9qJXOPnDZ9kdFUsVYDciuL5M4oXA.1', new Date(Date.UTC(2024, 8, 12, 20 + timeZoneOffset, 5, 0))],
['Disability Models', 'https://cornell.zoom.us/j/94263795591?pwd=2cni3kKjJiYHykTfAooNCIyYxTPB2p.1', new Date(Date.UTC(2024, 8, 13, 12 + timeZoneOffset, 5, 0))],
['Universal Designs for Research', 'https://cornell.zoom.us/j/94263795591?pwd=2cni3kKjJiYHykTfAooNCIyYxTPB2p.1', new Date(Date.UTC(2024, 8, 13, 12 + timeZoneOffset, 5, 0))],
];

const getFormattedDate = (date) => {
var year = date.getFullYear();

var month = (1 + date.getMonth()).toString();
month = month.length > 1 ? month : '0' + month;

var day = date.getDate().toString();
day = day.length > 1 ? day : '0' + day;

const estHours = (date.getHours() - 2 * timeZoneOffset);
return month + '/' + day + '/' + year + ', ' + (estHours % 12) + `:00${estHours > 12 ? 'PM' : 'AM'} EST`;

return month + '/' + day + '/' + year + ', ' + (estHours % 12) + `:00${estHours > 12 ? 'PM' : 'AM'} EDT`;
}

const displayCurrentData = () => {
Expand All @@ -34,13 +34,13 @@ const displayCurrentData = () => {
if (!set) {
const [title, link, start_time] = session;
if (now < start_time) {
title_node.textContent = `Coming up next: ${title} at ${getFormattedDate(start_time)}`;
join_link_small.innerHTML = '<a href="https://cornell.ca1.qualtrics.com/jfe/form/SV_eEZ1d27LF2fVM7Y" target="_blank">Signup</a> or watch this space for the join link';
title_node.textContent = `COMING UP NEXT: ${title} Session at ${getFormattedDate(start_time)}`;
join_link_small.innerHTML = '<a href="https://cornell.ca1.qualtrics.com/jfe/form/SV_eEZ1d27LF2fVM7Y" target="_blank">Sign up</a> or watch this space for the join link';
join_link_box.innerHTML = '<a class="banner_link banner-btn-grad" target="_blank" href="https://accessibility2024.arxiv.org/schedule"><b>View Schedule</b></a>';
set = true;
}
else if (now > start_time && now < new Date(start_time.getTime() + (55 * 60 * 1000))) {
title_node.textContent = `Happening now: ${title} at ${getFormattedDate(start_time)}`;
title_node.textContent = `HAPPENING NOW: ${title} Session at ${getFormattedDate(start_time)}`;
join_link_small.innerHTML = `<a href="${link}" target="_blank">Click here to join the session</a>. No registration required.`;
join_link_box.innerHTML = `<a class="banner_link banner-btn-grad" target="_blank" href="${link}"><b>Join Session</b></a>`;
set = true;
Expand All @@ -49,4 +49,4 @@ const displayCurrentData = () => {
});
}

displayCurrentData();
displayCurrentData();
25 changes: 13 additions & 12 deletions browse/templates/user_banner.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,39 +70,40 @@ <h2>Grab your spot!</h2>

{%- elif now >= BANNER_START_2 and now < BANNER_END_2 -%}
{# August 14 - 22 #}
<aside class="slider-wrapper bps-banner forum">
<aside class="slider-wrapper bps-banner forum blue">
<a class="close-slider bps-banner" href="#"><img src="{{ url_for('static', filename='images/icons/close-slider.png') }}" alt="close this message"></a>
<div class="columns">
<img role="presentation" class="bps-banner-image" src="{{ url_for('static', filename='images/events/arxiv-forum-logotype-title.png') }}" alt="arXiv Accessibility Forum 2024">
<img role="presentation" class="bps-banner-image" src="{{ url_for('static', filename='images/icons/smileybones-infinity-large.png') }}" alt="arXiv Accessibility Forum 2024">
<div class="copy-donation bps-banner">
<h2>The arXiv Accessibility Forum begins September 3<sup>rd</sup></h2>
<p>Free, fully remote and open to all. Because science is only open if it is accessible. <a href="https://accessibility2024.arxiv.org/" target="_blank">Learn more</a>. Because without accessibility Open Science is not truly open</p>
<h2>The Accessibility Forum is back!</h2>
<p>Coming this September, the Forum is free, virtual, and open to all. <a target="_blank" href="https://cornell.ca1.qualtrics.com/jfe/form/SV_eEZ1d27LF2fVM7Y">Sign Up</a> and <a href="https://accessibility2024.arxiv.org/" target="_blank">Learn more</a>.</p>
</div>
<div class="amount-donation bps-banner">
<div class="donate-cta"><a class="banner_link banner-btn-grad" target="_blank" href="https://accessibility2024.arxiv.org/schedule"><b>View Schedule</b></a></div>
<div class="donate-cta"><a class="banner_link banner-btn-grad" target="_blank" href="https://cornell.ca1.qualtrics.com/jfe/form/SV_eEZ1d27LF2fVM7Y"><b>Sign Up</b></a></div>
</div>
</div>
</aside>

{%- elif now >= BANNER_START_3 and now < BANNER_END_3 -%}
{# Aug 28 - Sept 2 #}
<aside class="slider-wrapper bps-banner forum">
<aside class="slider-wrapper bps-banner forum green">
<a class="close-slider bps-banner" href="#"><img src="{{ url_for('static', filename='images/icons/close-slider.png') }}" alt="close this message"></a>
<div class="columns">
<img role="presentation" class="bps-banner-image" src="{{ url_for('static', filename='images/icons/smileybones-pixel.png') }}" alt="arXiv Accessibility Forum 2024">
<div class="columns">
<img role="presentation" class="bps-banner-image" src="{{ url_for('static', filename='images/icons/smileybones-infinity-large.png') }}" alt="arXiv Accessibility Forum 2024">
<div class="copy-donation bps-banner">
<p>Join global leaders making scientific research more accessible. Free, fully remote and open to all. <a href="https://accessibility2024.arxiv.org/schedule" target="_blank">View the schedule</a> and <a href="https://cornell.ca1.qualtrics.com/jfe/form/SV_eEZ1d27LF2fVM7Y" target="_blank">signup</a>.</p>
<h2>The countdown begins!</h2>
<p>The <a href="https://accessibility2024.arxiv.org/" target="_blank">Accessibility Forum</a> starts next week! <a href="https://cornell.ca1.qualtrics.com/jfe/form/SV_eEZ1d27LF2fVM7Y" target="_blank">Sign up</a> and join us in September.</p>
</div>
<div class="amount-donation bps-banner">
<div class="donate-cta"><a class="banner_link banner-btn-grad" target="_blank" href="https://cornell.ca1.qualtrics.com/jfe/form/SV_eEZ1d27LF2fVM7Y"><b>Signup</b></a></div>
<div class="donate-cta"><a class="banner_link banner-btn-grad" target="_blank" href="https://cornell.ca1.qualtrics.com/jfe/form/SV_eEZ1d27LF2fVM7Y"><b>Sign Up</b></a></div>
</div>
</div>
</aside>

{%- elif now >= BANNER_START_4 and now < BANNER_END_4 -%}
{# Sept 2 - Sept 13, content filled in via dynamic script #}

<aside class="slider-wrapper bps-banner forum">
<aside class="slider-wrapper bps-banner forum grey">
<a class="close-slider bps-banner" href="#"><img src="{{ url_for('static', filename='images/icons/close-slider.png') }}" alt="close this message"></a>
<div class="columns">
<img role="presentation" class="bps-banner-image" src="{{ url_for('static', filename='images/events/arxiv-forum-logotype-title.png') }}" alt="arXiv Accessibility Forum 2024">
Expand Down Expand Up @@ -130,7 +131,7 @@ <h2 id="forum-session-title"></h2>
((BANNER_START_4|int <= now) and (BANNER_END_4|int > now)) -%}
{# only run this script while a banner is active #}

<link rel="stylesheet" type="text/css" media="screen" href="{{ url_for('static', filename='css/slider.css') }}?v=1.12" />
<link rel="stylesheet" type="text/css" media="screen" href="{{ url_for('static', filename='css/slider.css') }}?v=1.13" />
<script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/donate.js') }}?v=1.11"></script>
{%- endif -%}
Expand Down

0 comments on commit aa43e04

Please sign in to comment.