The iznik-nuxt from freegle

Settings improvements

Reload after profile pic upload is lame.
Use of this.me is dubious - computed property?
Provide a way to see the other email addresses associated with this account.
When you change an email setting, send you an email summary showing your current email settings.

File upload design

I'm always so relieved to have got photo upload working that I don't think much about whether it looks ok.

But filepond still looks quite busy. For example, you could have a thumbnail with a shading that progresses from left to right as a progress bar. The drop area doesn't need to show, especially on mobile.

Volunteer Ops / Community Events confirmation

In the old code we popped up confirm modals when the event/op was submitted. We should do the same.

                <p>One of our volunteers will check over your opportunity, and then we'll publicise it to other freeglers.</p>
                <p>Hope you find someone!  Please make sure you get back to everyone who replies, so that they feel good about your organisation
                (and Freegle!).</p>
                <p>Freegle is free to use, but not free to run.  If you can, <b>please donate &pound;1</b> to keep us running - but anything you can give is very welcome.</p>
                <a target="_blank" rel="noopener" data-realurl="true" href="https://freegle.in/paypalfundraiser">
                    <span class="btn btn-primary btn-lg">
                        <img alt="PayPal" class="img-thumbnail" src="https://www.paypalobjects.com/webstatic/mktg/logo/pp_cc_mark_37x23.jpg" />
                        &nbsp;Donate
                    </span>
                </a>

and

                <p>One of our volunteers will check over your event, and then we'll publicise it to other freeglers.  Hope it goes well!</p>
                <p>Freegle is free to use, but not free to run.  If you can, <b>please donate &pound;1</b> to keep us
                    running - but anything you can give is very welcome.</p>
                <a target="_blank" rel="noopener" data-realurl="true" href="https://freegle.in/paypalfundraiser">
                    <span class="btn btn-primary btn-lg">
                        <img alt="PayPal" class="img-thumbnail" src="https://www.paypalobjects.com/webstatic/mktg/logo/pp_cc_mark_37x23.jpg" />
                        &nbsp;Donate
                    </span>
                </a>

Chat design improvements

In ChatMessageNudge, should the icon shake in a buzzy kind of way?
The button layout in the bottom of ChatPane/ChatPopup might be improvable.
When we're loading chat messages in ChatPane we have a spinner at the top for our reverse infinite scroll. But this looks messy when we load a short chat, because we see the messages appear below the spinner and then move upwards once the infinite scroll completes. Maybe add a transition so that the spinner only appears after a while, which we do #serverloader.
How do we scroll to the bottom? In _updateAfterSend we have an approach, but it doesn't handle image uploading. If you add an image which will cause further scroll, then we can called before the image has loaded properly. We might need to add a placeholder based on the dimensions of the image (which we know at the point we uploaded it).
The maximise icon we use from font awesome for popup chat windows is not that obvious in meaning.
The unread notification on the chat icon for mobile doesn't look as though it's positioned quite right.

Prompt to install the mobile app

You can prompt users to install your mobile app if they're on mobile - we used to do this in the old client.

We might also want to suppress the nuxt PWA nudge to add to the home screen. We'd rather they installed the app.

Consolidate the use of colours

There are a lot of colours defined. Do we need all of them? Can we consolidate them?
Can we use some of the default bootstrap colours, especially for the grays e.g. $gray-400

Improve the way we override bootstrap styles

We should update the way we are overriding the bootstrap variables. If we would like to continue with the same style then we should follow the directions in "Using custom Bootstrap SCSS" in this doc https://bootstrap-vue.js.org/docs/. We could then override variables like $success in _variables.scss. This could be used for background colours, foreground colours, border colours, breakpoints etc.

The other option would be to not use the bootstrap default colours and just use regular classes.

My Posts improvements

Show Taken by?

Unsubscribe improvements

If you have to sign in, should go straight to confirmation once we return to the page signed in.

Message functional improvements

On Communities/Explore, use the visibility plugin to pick up new messages.
In Message sendReply, when replying, if the group approves membership, then we will not actually be a member after auth/joinGroup. We might be rejected. Probably in that case we shouldn't be allowed to reply to this message, but we will. I think this is the same behaviour as in the old version, but that needs testing and consideration of how to handle.
In MyMessage, there's a window we've seen in the past where the autorepost hasn't happened yet. Should say 'soon' if autorepost time is in the past.
In MyMessage, when we click to expand, the visible text may be off the top or bottom of the screen. Need to make it visible.

Use validation throughout

At least these places should use vuelidate:

LoginModal: check they've filled out the form before submit. We currently have a basic if test in place.
StartEndCollection: end date > start date (consider what happens when you change one of them to make this not true), no stupidly long events (3 days?), no overlapping dates, only one blank slot. Start times at 9am. #164
ChatReportModal: replace if with validation
MessageReportModal: replace if with validation
PosterModal: replace if with validation. name & position required, description not.
StoriesAddModal - headline & story required
Where we upload photos (check for OurFilePond) we should not be able to proceed while photo uploading is ongoing.
MessageEditModal - only allow edit to complete if we have an item and (body|photo).

There may be others - have a brief think.

Chat functional improvements

In ChatMessageModMail, the Edit button shouldn't always appear - it depends on the type of ModMail. Requires some server changes too.
Popup confirmation first time you use nudge, so that you know what it does. People just click on it to find out, and then feel bad.
Prevent nudges that are too frequent, or come too soon after a message. I've had one member who always sends me a nudge immediately after sending a message, either deliberately or otherwise. Pop up a "Come on, give 'em a chance" modal.
In ChatPane, we have a setTimeout because nextTick resulted in .chatContent not being found. What are we doing wrong?
Don't send images/spammy stuff out in emails, instead add a warning and direct to site? Especially for MT.
Allow favouriting of chat so that it sticks to the top.

Some code doesn't use Vue/nuxt properly or is just poor code

Stop laughing, at the back. But specifically:

Tablet main column would be better if wider

These screenshots are on an iPad2 Safari in portrait. If the main column were wider it would be less cramped in the middle.

UX of availability function

The way we ask people to specify their availabilty is clunky.

We display in slots; these don't work for everyone, but no slots will, and most people won't want to fill out lots of detail. If we could work out a good UX, we would allow something which allowed the user to expand to fill out more detail (hours, 15 minute segments) if they wanted. We'd need to also update the chat and email code which matches up when someone is available, so this is a substantial change.

@edwh is discussing this with UX volunteers.

Distinguish between FD and MT searches

If you search messages by keyword in ModTools, they'll show up in Freegle Direct in My Posts. They shouldn't.

createGroupRoute should use group short names

This is currently coded to use group ids, which has the effect that the URLs have numbers in them. They would look better if they used group.nameshort, which is unique. It's possible to fetch a group using name as well as id.

Async store persisting/loading issues

The store is persisted asynchronously - which means that there may be issues where we make a store change then lose it. This is probably ok now:

If we crash/close quickly and lose a change, that's acceptable.
If we navigate away from the page, e.g. during Yahoo social signin, then we have code in page destroy.
But this needs review and perhaps testing. Specific cases to consider:
Message, around line 375 where we force a signin.

The store is loaded asynchronously - which means that there may be issues where it has not been loaded before the rest of the code kicks in. Ideally we would be confident that it has been loaded on the client. @nicksellen did earlier work that means this may now be true, but needs review. Specific cases to consider:

communities/_id, around line 124, where we have a watch to handle this possibility
loginRequired, where we also have a watch.

Compose post improvements

Once the old client goes and we only have one set of code to worry about, we should simplify submission into a single server call rather than the current long process in store/compose.
ComposeGroup - In the old version we had some explicit code to spot when a group we find near to a postcode has been founded more recently than we saved our preferred group. This is so that when a new group has started, we will direct existing active members over to it rather than remember their last group and keep posting to it. We should do something similar.

Sidebar niggles

The jobs sidebar is slow to appear, because the data comes from a third party website. Should we have a slide transition or something to make its appearance less disruptive? Should we try to sync its appearance with the volunteer ops part of the sidebar?
The sidebars are a bit brutally cut off at the bottom. Make it look nicer.

Help page uses hard links

help.vue contains hard links (not nuxt-link) which don't work in mobile app and cause a page load on the web

DeprecationWarning: Tapable.plugin is deprecated.

When running the site with npm run dev, the following error message is displayed:

ERROR (node:22275) DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead

test

Add better page not found page

It looks like this:

Could be prettier.

Also log sentry exception.

ChitChat function improvements

Use bootstrap mixin breakpoints

This is neater than redefining them. It applies in quite a few places.

global.scss where we define our own duplicates, and then when we use those definitions later in the file.
pages/stats/_groupname where we redefine $bootstrap-sm and use it
default.vue ditto
[ ]

Stats improvements

In authority/_id around line 672, really we should be checking if all the groups are low activity and then showing them all.
Heatmap needs a place search box.
Heatmap needs a "Crunching the numbers" indicator rather than showing a blank map. See how the authority pages work.
Where an authority is small, don't use the pro-rata approach, instead calculate directly by doing a join between locations_spatial and messages and authorities.

Explore improvements

The region buttons should cause us to zoom the map to the appropriate place.

Use of "appear" transitions?

In the old client, there was a lot of fade in/out.

When items instantly appear/disappear, it's easy not to notice the change. This is particularly true for our demographic.
That kind of gentleness arguably contributes to a warmer feel for the site.
It disguises server slowness a bit, because you're led not to expect stuff to happen instantly.

I don't know whether this was a good idea or a bad idea overall. Discuss.

There is a fade-enter transition in global.scss, but when I used it for messages the computed emessage property didn't appear for some reason I don't understand.

All components need a name

@JayyajGH spotted this:

https://vuejs.org/v2/api/#name

Presumably pages too, since they're components really.

It's quite tedious to add them manually into each component, though. And they are all going to be the same as the filename.

Is there any magic we can do to automatically get a name property added based on the filename? @nicksellen , this is your kind of build area.

ChitChat design improvements

Add progress indicator in NewsLoveComment when we love/unlove. Not sure how this should look - usually we have an icon which we replace with the spinning sync one, but we don't for these text links. Gently pulsing text?
NewsReply - when we scrollIntoView to an item we need some visual highlighting of it that fades after a while.
NewsThread - visual indication of items that are new since our last visit/refresh.
NewsThread/NewsReply - when newsfeed/send is in progress, need some visual indication as it can take a second or two.

Create different layouts for different page styles

Currently the site has a number of different major page layouts but this is dealt with on a page by page basis. I propose that we should deal with it using different nuxt page layouts.
For example:

Layout1

<template>
  <div>
    <site-header></site-header>
    <nuxt />
    <site-footer></site-footer>
  </div>
</template>

Layout2

<template>
  <div>
    <site-header></site-header>
    <sidebar option1>
    <nuxt />
     <sidebar option1 option2>
    <site-footer></site-footer>
  </div>
</template>

This would also involve refactoring the header and footer styles and logic out into separate components.

Design shrapnel

Little bits and pieces which could be slightly prettier, all fairly quick.

Styles tidy-up

Are we okay to create a central stylesheet / sass file to run all the styles from, rather than inline to the vue-components?

Availability checkmarks don't change state on click if schedule never edited before

I don't seem to be able to edit my availability on Freegle. Clicking the checkmarks doesn't seem to do anything (see below).

I get the same behavour on Safari, the latest Firefox, and Firefox ESR, across macOS and Linux.
I do not get any javascript console errors.
Same behaviour on a fresh checkout of master.

Cannot read property 'id' of null

Just getting my version up to date and I get the above error. Did you kill something @edwh

Landscape home screen boggling

On an old iPad2 in Safari in landscape mode the logged in home screen is too busy: mainly the sidebars. The old site has a similar layout - and worse with the advert at the top.

Message design improvements

In Message, the "Report this post" link looks lost.
In Message, if you're logged out and click send then when you've gone through signin, your eye might not be near the Send button. So the standard way of a spinning sync icon to indicate the send is in progress is probably too subtle to notice.
MyMessage - the appearance is less messy than the old site, but it still feels quite cold and functional, and needs some love.
MyMessageReply - I would like a way of indicating whether the last message, which we have in snippet, came from this user or not. We can work that out, but I can't think of a way of showing that which is obvious. On the other hand, the most important messages will be bold because they're unread, and all bold messages will be from the other party, so maybe that's fine as it is.
MyMessageReply - the unpromise icon is lame - can we do better? We use the same icon elsewhere (e.g. chat).
[ ]

New user intro

NewUser is basically the intro for new users. Should it be like this? A multi-step modal? Whatever
it is it should look better.

The tooltips should be prettier.

Old fashioned, staid, tably designs

There are some places where what we have feels old-fashioned, staid, table-driven, form-like, desktop. They need a better design for desktop, and might need to be different on mobile. Why do we have no gesture handling on the site at all?

Volunteering / Commmunity Event function improvements

Add hold/release function.
If you're logged out and click to add a volunteer op then you get the forced login modal, which you can't get out of. Ditto community events.
For volunteer ops, we used to have an "apply by" date. Add it back.
If you land on the page for volunteer ops/events for a group, which can happen if you're sent the link, and try to add one, then you need to be signed up to the group. Or perhaps more generally we should provide a way for people to select and join a group that they're not already a member of.
If you add a volunteer op with a date, then immediately add another, the dates are preserved from the old one, though the rest of the form is empty.

Add automated testing

We discussed the idea to add automated testing in slack already (last discussion is https://freegle.slack.com/archives/C6LCTJ280/p1576346351010700). There is broad agreement about the need to add some, but we need to work out the exact approach.

I recently evaluated frontend testing approaches for https://trustroots.org and you can see my evaluation in this comment. That concerns using react (whereas we use vue), but the philosophy is the same, and even the library we settled on there has a vue variant.

The key bit from my evaluation I think is:

Philosophy generally summed up as:

testing using user facing features instead of implementation details

Have a look at these articles:

You can see an example from trustroots how a test file might look, key points:

focus on what the user is doing, not the implementation
uses a lot of aria roles kind of stuff to find the correct elements on the page (so can trigger actually adding better accessibility aria stuff in the process)
assertions are based on what the user will see/do and the API calls made
only the API calls are mocked
no random waiting for elements to appear (or nextTick stuff)

Those tests are for quite focused individual components, whereas in iznik most of the code is in page level components that do quite a lot of different things, and interact with the store a lot, so it will be harder, we may need to split things out into more separate components (which would be good idea in general imo). But also would like to be test those full page-level components.

I welcome any discussion on these approaches! I think we should throw around ideas until we are happy with an approach, before starting work on this.

Error case handling

There are several error cases which need review to check we handle them.

Some may be mitigated by the global approach we have for spotting API errors and popping up a toast.

We should consider whether we need a similar toast approach for JS errors (both SSR and client).
Check we know what the axios behaviour is for API retries. In the past under high load or server flakiness we have benefited a lot from transparent retry of API calls. We should comment somewhere what the retry strategy is.

Specific error cases to review and perhaps test.

yahoologin around line 64 if server login fails
OurFilePond around line 142 if file upload fails
find/whoami and give/whoami if compose/submit fails
auth.js/loginModal when sign up fails - do we get an error?

Help page is very ugly

We're using a FAQ accordion plugin which is ok functionally, but it looks grim.
Because the data is inserted at run-time, it means we have to use anchor rather than nuxt-link, which causes problems for the mobile app.
Would be nice to be able do a direct link to each of them. The sectionScroll mixin could be used.

Accessibility

Various accessibility issues. We've not yet done a proper accessibility review; this issue is a placeholder for specific things we already know.

The availability modal isn't accessible. Note that this may change because of #123.
We should review all and to see if they require aria-label.
We should check if we have any image links without alt text. Can we lint this?
Remove title links in favour of alt and better link text (see here)

Poster improvements

Record who downloads a poster, then we can email a chaseup later.

Ask people to go and replace the poster after a while. Needs email chaseups

Profile design

In ProfileModal:

Header is messy - wallpaper should fill the whole thing; image should have a border round it with a gap.
The about me section needs nice big quotes round it.
I'm not sure whether there's any benefit in the current slight differences between what you see in the modal vs the whole profile. Consider.

In the actual profile page:

It just feels dull. Needs love.
What other info should we have? Chitchat activity? Events posted?

Handle broken images consistently

Wherever we have b-img, we should have a broken image handler. We don't do this consistently.

The type of image we should replace it with depends on the context in which it's used - which means probably we should be having components for these anyway.

We're starting this with a profile image component - we'll keep at it until we see what's left.

More infinite scrolls

Some pages don't have infinite scrolls, but probably should.

Stories, and stories for a group
Jobs for a location

May need server changes.

freegle / iznik-nuxt Goto Github PK

iznik-nuxt's People

Contributors

Stargazers

Watchers

Forkers

iznik-nuxt's Issues

Recommend Projects

Recommend Topics

Recommend Org