Skip to content

Commit

Permalink
UI fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@vidya-ram
vidya-ram committed Sep 1, 2020
1 parent 8e08081 commit b684656
Show file tree
Hide file tree
Showing 14 changed files with 148 additions and 78 deletions.
28 changes: 28 additions & 0 deletions funnel/assets/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,3 +119,31 @@ if (
Pace.stop();
};
}

if (navigator.share) {
const shareBtn = document.querySelector('.share-btn');
if (shareBtn) {
$('.share').hide();
$('.share-btn').removeClass('hide');

shareBtn.addEventListener('click', () => {
navigator
.share({
title: document.title,
text: $('meta[name="description"]').attr('content'),
url:
(document.querySelector('link[rel=canonical]') &&
document.querySelector('link[rel=canonical]').href) ||
window.location.href,
})
.then(() => {
console.log('Thanks for sharing!');
})
.catch((err) => {
console.log(`Couldn't share because of`, err.message);
});
});
}
} else {
console.log('web share not supported');
}
16 changes: 13 additions & 3 deletions funnel/assets/js/notification_list.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,16 @@ const Notification = {
next_num: 1,
waitingForResponse: false,
markReadUrl: markReadUrl,
observer: '',
lazyLoader: '',
};
},
methods: {
fetchResult(page, refresh = false) {
if (!refresh) {
// Stop observing the lazy loader element
notificationApp.observer.unobserve(notificationApp.lazyLoader);
}
if (!notificationApp.waitingForResponse) {
notificationApp.waitingForResponse = true;
$.ajax({
Expand All @@ -33,6 +39,8 @@ const Notification = {
} else {
notificationApp.next_num = 0;
}
// Start observing the lazy loader element to fetch next page when it comes into viewport
notificationApp.lazyoad();
}
notificationApp.waitingForResponse = false;
},
Expand All @@ -54,18 +62,19 @@ const Notification = {
});
},
lazyoad() {
const lazyLoader = document.querySelector('.js-lazy-loader');
if (lazyLoader) {
if (this.lazyLoader) {
this.handleObserver = this.handleObserver.bind(this);

const observer = new IntersectionObserver(this.handleObserver, {
rootMargin: '0px',
threshold: 0,
});
observer.observe(lazyLoader);
observer.observe(this.lazyLoader);
this.observer = observer;
}
},
handleObserver(entries) {
console.log('entries', entries);
entries.forEach((entry) => {
if (entry.isIntersecting) {
this.fetchResult(notificationApp.next_num);
Expand Down Expand Up @@ -112,6 +121,7 @@ const Notification = {
},
},
mounted() {
this.lazyLoader = document.querySelector('.js-lazy-loader');
this.lazyoad();
window.setInterval(() => {
this.fetchResult(1, true);
Expand Down
41 changes: 30 additions & 11 deletions funnel/static/css/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -815,6 +815,10 @@ a.loginbutton.hidden,
width: 50%;
}
}
.share-btn.hide {
display: none;
}

@media (max-width: 767px) {
#root_footer {
height: 0;
Expand Down Expand Up @@ -1171,9 +1175,7 @@ a.loginbutton.hidden,
.header__site-title
.header__site-title__title
.header__site-title__home__logo {
height: 28px;
margin-right: 16px;
margin-bottom: 0;
height: 30px;
}
.hg-app
.header--fixed
Expand Down Expand Up @@ -2871,6 +2873,7 @@ a.loginbutton.hidden,
position: absolute;
left: -16px;
line-height: 30px;
height: 36px;
}
.card__calendar--compact
.calendar
Expand All @@ -2880,6 +2883,7 @@ a.loginbutton.hidden,
position: absolute;
right: -16px;
line-height: 30px;
height: 36px;
}

.card--upcoming {
Expand Down Expand Up @@ -3227,7 +3231,8 @@ a.loginbutton.hidden,
}
.project-banner .project-banner__footer .bookmark,
.project-banner .project-banner__footer .add-calendar,
.project-banner .project-banner__footer .share {
.project-banner .project-banner__footer .share,
.project-banner .project-banner__footer .share-btn {
display: flex;
align-items: center;
padding: 0 8px;
Expand All @@ -3247,12 +3252,17 @@ a.loginbutton.hidden,
-webkit-animation: none;
animation: none;
}
.project-banner .project-banner__footer .share {
.project-banner .project-banner__footer .share,
.project-banner .project-banner__footer .share-btn {
border-right: none;
}
.project-banner .project-banner__footer .share-btn.hide {
display: none;
}
.project-banner .project-banner__footer .bookmark span.login-txt,
.project-banner .project-banner__footer .add-calendar span.txt,
.project-banner .project-banner__footer .share span.txt {
.project-banner .project-banner__footer .share span.txt,
.project-banner .project-banner__footer .share-btn span.txt {
padding-right: 5px;
}
.project-banner .project-banner__footer .mui-btn--nostyle + .mui-btn--nostyle {
Expand Down Expand Up @@ -4099,25 +4109,34 @@ a.loginbutton.hidden,
.comment .comment__header {
display: inline-block;
width: 100%;
margin-bottom: 16px;
}
.comment .comment__header button {
vertical-align: bottom;
vertical-align: top;
position: relative;
top: 17px;
}
.comment .comment__header .mui-btn--nostyle + .mui-btn--nostyle {
margin-left: 0;
}
.comment .comment__header .comment__header__details {
display: inline-block;
min-width: 300px;
min-width: 200px;
max-width: calc(100% - 40px);
margin-left: 8px;
}
.comment .comment__header .comment__header__details .commenter {
margin-right: 8px;
}
.comment .comment__header .comment__header__details .badge {
margin-left: 8px;
margin-right: 8px;
}
.comment .comment__header .comment__header__details .mui--d-inlineblock {
vertical-align: top;
}
.comment
.comment__header
.comment__header__details
.comment__header__details__user {
min-height: 40px;
}
.comment .comment__body {
Expand Down Expand Up @@ -4396,7 +4415,7 @@ a.loginbutton.hidden,
}
.schedule-grid .schedule .schedule__row .schedule__row__column {
position: relative;
background-image: url('../img/schedule-box-background.png?1553065764');
background-image: url('../img/schedule-box-background.png?1598540764');
background-size: 20px 10px;
}
.schedule-grid
Expand Down
2 changes: 2 additions & 0 deletions funnel/static/sass/_card.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -357,11 +357,13 @@
position: absolute;
left: -$mui-grid-padding;
line-height: 30px;
height: 36px;
}
.calendar__weekdays__dates__icon--right {
position: absolute;
right: -$mui-grid-padding;
line-height: 30px;
height: 36px;
}
}
}
Expand Down
14 changes: 10 additions & 4 deletions funnel/static/sass/_comments.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,24 +4,30 @@
.comment__header {
display: inline-block;
width: 100%;
margin-bottom: $mui-grid-padding;

button {
vertical-align: bottom;
vertical-align: top;
position: relative;
top: 17px;
}
.mui-btn--nostyle + .mui-btn--nostyle {
margin-left: 0;
}
.comment__header__details {
display: inline-block;
min-width: 300px;
min-width: 200px;
max-width: calc(100% - 40px);
margin-left: $mui-grid-padding/2;
.commenter {
margin-right: $mui-grid-padding/2;
}
.badge {
margin-left: $mui-grid-padding/2;
margin-right: $mui-grid-padding/2;
}
.mui--d-inlineblock {
vertical-align: top;
}
.comment__header__details__user {
min-height: 40px;
}
}
Expand Down
4 changes: 1 addition & 3 deletions funnel/static/sass/_header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -231,9 +231,7 @@
}

.header__site-title__home__logo {
height: 28px;
margin-right: 16px;
margin-bottom: 0;
height: 30px;
}

.header__nav-links--search {
Expand Down
4 changes: 4 additions & 0 deletions funnel/static/sass/_layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -885,3 +885,7 @@ a.loginbutton.hidden,
}
}
}

.share-btn.hide {
display: none;
}
12 changes: 9 additions & 3 deletions funnel/static/sass/_project.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,8 @@

.bookmark,
.add-calendar,
.share {
.share,
.share-btn {
display: flex;
align-items: center;
padding: 0 8px;
Expand All @@ -114,12 +115,17 @@
animation: none;
}
}
.share {
.share,
.share-btn {
border-right: none;
}
.share-btn.hide {
display: none;
}
.bookmark span.login-txt,
.add-calendar span.txt,
.share span.txt {
.share span.txt,
.share-btn span.txt {
padding-right: 5px;
}

Expand Down
4 changes: 2 additions & 2 deletions funnel/templates/layout.html.jinja2
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,11 +87,11 @@
{%- endif %}
{%- else -%}
<a href="{{ url_for('index') }}" class="header__site-title__title__home mui--hidden-xs mui--hidden-sm" data-cy="home-desktop" data-action="Home" aria-label="Home">
<img src="/static/img/hg-logo.svg" class="header__site-title__title__home__logo"/>
<img src="/static/img/hg-logo.svg" class="header__site-title__home__logo"/>
</a>
<a href="/about" class="logo-about"><span class="emoji-hand" aria-label="hidden">{{ faicon(icon='hand-point-down', icon_size='subhead', baseline=false, css_class='mui--align-middle') }} </span>{% trans %}What’s this about?{% endtrans %} </a>
<a href="{{ url_for('index') }}" class="header__nav-links mui--hidden-md mui--hidden-lg mui--hidden-xl {% if current_view.current_section == 'home' %}header__nav-links--active{% endif %}" aria-label="Home" data-cy="home" data-action="Home">
{% if current_view.current_section == 'home' %}<img src="/static/img/hg-logo.svg" class="header__site-title__logo"/>{%- else %}<img src="/static/img/hg-logo-grey.svg" class="header__site-title__logo"/>{%- endif %}<span class="header__nav-links__text">{% trans %}Home{% endtrans %}</span>
{% if current_view.current_section == 'home' %}<img src="/static/img/hg-logo.svg" class="header__site-title__home__logo"/>{%- else %}<img src="/static/img/hg-logo-grey.svg" class="header__site-title__home__logo"/>{%- endif %}<span class="header__nav-links__text">{% trans %}Home{% endtrans %}</span>
</a>
<form action="/search" class="search-form js-search-form">
<input type="text" name="q" aria-label="{% trans %}Search the site{% endtrans %}" placeholder="{% trans %}Search…{% endtrans %}" class="search-form__field js-search-field" id="header-search">
Expand Down
Loading

0 comments on commit b684656

Please sign in to comment.