Giter Site home page Giter Site logo

citizenos-web's Introduction

citizenos-web's People

Contributors

argoroots avatar ilmartyrk avatar liinaguiter avatar oksks avatar seppviljar avatar tiblu avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar

Forkers

liinaguiter tiblu blacurly ssin1901

citizenos-web's Issues

Search bar problems

Search bar problems
The problem (which Liina previously discussed with Argo) was that the way the search bar works is that if the word appears in the heading or the text then it shows up in the search results. But if the word is not typed exactly the same way as it is in the text, it doesn't appear. So for example, "invitation" brings up zero results, as I only use the shortened word "invites" in the texts. I assume one way to fix this would be the have hidden keywords (in the code but not visible to the user) that we add ourselves, so that they would be pulled up in search results. But just a guess, would need Argo to confirm how this could work.

image

The other problem is that for me (and I assume for others too - could someone confirm?) when I click in the search bar, it flashes up with suggestions from previous searches, but they are not all relevant to this site - they are searches I have made in other places (on Google for example, re the baby gifts):

image

And when I start typing, it does the same, for example when I type "P":

image

Earlier in the thread, after discussing these search issues with Argo, Liina said:
"I've agreed with Argo, that he will not do any work from now on unless you ask him to, @anettlinno (to keep spending in control). This is up to you Anett, to decide when and if to fix this search issue."
So @anettlinno what do you think, do we go ahead and ask Argo to fix these? Search is a very important element to get right I think..

Tagging @oksks too, just for info as it's website related :)

Originally posted by @BeccaMelhuish in citizenos/citizenos-fe#815 (comment)

TASK: Help Centre navigation update (2 tasks)

What needs to be done?
Help Centre's current navigation is confusing and lacks a way for the user to have an overview of their path to a certain article, and a way to understand how to get back to a category or items.

  • TASK 1 - We'd like the Help Centre to have a breadcrumbs-style navigation solution.

Example:
image

  • TASK 2 - When this is implemented, please remove the "Back" text with the arrow icon, as they will become obsolete.

image

Location
https://citizenos.com/help/

Deadline
A week from today - June 1.

CLEAN-UP: stop syncing languages that we don't support

There are a number of languages that are activated in Crowdin but do not get displayed in web.
Which means that every update creates quite a lot of "noise" by committing useless files

  • scope: NL, BE, DE, ES, UK

To do:

  • update Crowdin YML conf to YAML and exclude obsolete languages
  • remove existing language files from repo
  • test syncing

TASK: Event template improvements

What needs to be done?
We've reviewed the event page template, and found a few changes are needed - could you please make them a part of the style sheet, so any future events would have the same style?

  • - Add space between headers and the following text:
    image

  • - Make the right-hand summary box's headlines a smaller size by default
    It should fit into the box in one line.
    Screenshot 2022-04-18 at 10 48 20

  • - "Registration Deadline" additional info point design to summary box
    It wasn't a part of the style initially, but needs to become a default part of the template. Please make it as a separate smaller headline, and the registration deadline itself would be on a separate row and have an alarm bell icon - lmk if you need Kevin's help for that.
    Screenshot 2022-04-18 at 10 34 45

  • - Add a "Price" info point to summary box
    Please implement two solutions:

  • right where the date and time are displayed, with a minimal "coins" icon to signify cost.

  • make an additional headline "Price" and allow for text info to be added below, as with "Registration deadline" item.

  • - Make sure agenda section stands out from the rest of the text
    Please add "event agenda" to style sheet and make it light grey to avoid having the whole long page in the same text. Should be the same grey, as "Latest news" section on the front page.

  • - Make sure event page images are displayed correctly on mobile

278464457_400317668291535_5160146682390594602_n

  • - "Facilitators" - additional info point design
    Please add a separate style for facilitators - their image, cut into a circle, with a name, role and descriptive text blocks. Each facilitator's box should be separated from the following one visually, maybe by adding a shadow under each box, or something similar.

facilitator

  • - Add a "Sign up" button to the mobile view
    If the event page is viewed from a smaller screen, the Sign Up button is displayed at the bottom of a long page. Please display an additional "Sign up" button right under the main headline.
    signup

  • - Add a "Contact us" style box
    At the bottom of the page, please add a "For any enquiries, please email [email protected]" box. The text should be centered, email should be a link.

  • - Please add an option to turn text into a button in any part of the body text, like here:
    Screenshot 2022-09-27 at 20 15 02
    I think we're safe to use the same 3 button designs from the V2 template pages on Figma:

Screenshot 2022-09-27 at 22 21 03

Just please make sure I can choose which design to use every time I create a button.
  • - Please allow to fill/remove background colour for various sections of text. Right now, we have only planned this for "agenda", but it's needed throughout the event page. Please allow for the background colour to be changeable, but default to be grey.
  • - Please make the graphic in the body text smaller on bigger screens - not sure what the max size should be, pls define it yourself.
  • - Uploaded header image doesn't fit the screen - please make sure the header image always fits the width of the screen.
  • - Sponsor logos - I've added 3 images at the bottom of the DDA page, which don't show up for some reason. We need a block for 3-5 sponsor logos as well.
    ![Active Citizens Fund](/assets/images/events/dda/1. [email protected]){ .img-fluid } ![AEF logo](public/assets/images/events/dda/2. AEF_logo_mv.jpg){ .img-fluid } ![Vabaühenduste Liidu Logo](public/assets/images/events/dda/3. vabauhenduste-liidu-logo-800.png){ .img-fluid }

Location
https://citizenos.com/democracy-defenders-bootcamp
https://citizenos.com/civic-hackathon/

Deadline
10am Friday, April 22.

Enhancement: Make text not wrap on webinar landing page template

Make text not wrap on webinar landing page template.
Template is used for /et/e-kaasamiskoolitus, /pyln and /erasmus at the moment.

The main body of the text would be more easily readable if it did not wrap.
Applicable to after the 'Registration box', so starting from 'Koolituse eesmärk'.

Screenshot 2020-12-28 at 19 25 25

PAGE: Democracy Defenders Accelerator

What needs to be done and why?
1 main page with 2 sub-pages for the DDA project.

Location
URL should be www.citizenos.com/DDA
Should sit under "projects" in the website structure.
@ssin1901 shall we replace PYLN with this for now (as PYLN no longer exists? Or I'm mistaken?), on this page? But put it at the top?

Future path/style block name
@oksks Sorry I didn't understand this one - let me know if there's something else you need here :)

Main banner image
Banner (same for all 3 pages, main and subs) is here - one darkened, one clear, depending what you need.

Page content

  • Texts and graphics are here.
  • As discussed on Slack all the sections highlighted bright green are ready to go.
  • Paler green ones you could add the text already, they are only currently missing links at the moment which could be added later.
  • (Though I'm confused about why some of the sections I had previously made green were no longer green - had one of you changed them @oksks @ssin1901? Or maybe I am misremembering, also possible!)
  • I highlighted in blue and tagged @oksks in things that changed since I first shared the doc with @oksks, just to try and avoid confusion. @oksks - maybe you can reply "done" like you do in the HC doc once these changes have been made (or "noted" if you hadn't uploaded that text yet anyway)? Then I can remove the blue highlights.
  • As per the comment in the doc, the ******** shows where we would like a new background section to start, alternating between white and grey. Or adding in some other colours as the background to particularly important sections if this is possible @oksks? If so, please let me know and I can mark which are the more important sections to bring out with colour :) And just to be clear, this is what we mean by background sections:
    image

Page description for search results
The Democracy Defenders Accelerator is a 10-month civic engagement programme, bringing together young activists from diverse backgrounds to learn, exchange and grow together.

Page keywords
Civic Engagement
Participatory Leadership
Civil Society
Activism skills
Democracy training
Open society
Activism mentoring
Civil society training programme
Activist training
@oksks are these the right sort of thing? @ssin1901 any others to add?

Is the page translatable?
Yes it needs to be in Estonian as well as English - discussion started on Slack about this with @anettlinno and @ssin1901.

Deadline
Needs to be live by the end of the week very latest, but ideally sooner! But @oksks what are your working days this week and when do you think you might be able to show us a first version of how it's looking, so we can give feedback if anything needs adjusting before the end of the week?

BUGS: Mobile web review: 9 issues

  1. 1/3 of the front page text block (incl. link to video) gets cut off when text expands in translation:
    20190109_165931

  2. Yellow underline/emphasis doesn't get carried over to translations, becoming gibberish:
    20190109_160628

  3. As discussed in Slack, the blog blocks aren't translatable and look like 3 big buggy blocks in a row - blogs should probably be hidden in non-English websites:
    20190109_161034

  4. On the product page, parts of the image are cut off - on screenshot, one can see a white Google Translate overlay, but underneath it half of the image is missing, too. Not sure it's caused by GT:
    20190109_162143

  5. (Discussed with Liina already - she'll remove the blog block and ask Argo to create a new block to display the demo video)
    On the product page, the slider is dysfunctional - looks like a separate block and one can't really figure out the image is clickable left and right AND it changes the text underneath it, as the slider takes up the whole screen space and you can't really see the text and image simultaneously:
    20190109_162253

  6. Product page number tickers + button text:
    In the tickers, the numbers have disappeared - might be Google Translate messing with the interface? Translation breaks the page layout due to button's expanded text length.
    20190109_163032

  7. Translation will break another button + layout - I recommend to rephrase it as "Go to platform" or "To the app" or, even better, just "Platform" or "App" instead.
    20190109_163608

  8. Many large photos get chopped and become unrecognizable - Anu Välba should be here, but instead the page only shows a piece of leaves from top left corner of the photo, and some more leaves underneath, when you scroll down a bit:
    20190109_163942

  9. Team page doesn't allow position names to wrap when translated => page layout is broken and all names are hidden to the right from the screen:
    20190109_164245

Update logo on /pyln page to new logo

title: Update logo on /pyln page to new logo
assignees: @argoroots

Our logo has changed, please use new one with space between Citizen and OS.

I think this is the right logo, but not 100% sure:
I think this is the right logo, but not 100% sure.

Logo files can be found here:.

Thanks!

TASK: Get search keywords from the Help Centre

What needs to be done?
We would like to able to analyse what our users input into the search bar as part of our Know Our Users project.

Screenshot 2022-06-15 at 13 18 02

For our Know Our Users project, we need to collect aggregated and anonymised data about user activities such as search keywords. This helps us to better meet our users needs and improve their experience with the product.

Location
https://citizenos.com/help

Any additional files or info needed?
Maybe this is a helpful example of what we need – #https://citizenos.com/help/search?q=hello+world

Deadline
June 25th because the report will be presented by the end of June

Localisation - copy review

Overview

Review the website content from localisation perspective.

TODO

  • Review content
  • Make a bug/feature in GitHub for every shortcoming
  • Once done, notify related parties in #6

New 'Media bar'

Assigned to @argoroots

We have interviews published in media now, that we can showcase. Asked for a 'media bar' design from Kevin:

Kevin: " I suggest putting it under the news block."
I (Liina) think that the media bar could be present on most pages: landing page, product, news, vision, community.

Kevin: "I added 4 logos there so Argo can take them."
NB the 'Avatud Eesti fond' logo should be 'Kuku radio' logo instead.
NB there should be a 5th logo: World Cleanup Day (without date)
And the 6th logo rohelised

The logos / links should be clickable I think.

In English first, then Estonian and then Indonesian left to right in the bar:

in English:
World Cleanup Day
e-Estonia
rohelised

In Estonian:
Kuku radio
ERR
Hea Kodanik
rohelised

Oh and one In Indonesian:
ProBintan

BUG: Language drop-down hover is broken in Help Centre

What is the problem?
When in Help Centre, and hovering over language dropdown, it half-appears, while most of it is hidden behind the toolbar. It's unusable this way.

Screenshot 2022-01-27 at 12 25 59

Why is this a problem?
It's broken and doesn't allow user to choose another language. We don't have translations yet, but soon will.

Frontpage redesign - UX review

Background info:

We've decided to revamp the current website - reshuffle the structure and add a lot more content to all sections, as it's currently bare bones. We feel, that design should also be a bit more condensed, not as image-centered as it is now.

We're starting with the Frontpage, moving on to the next big sections later (Product page is next in line). We think it makes sense to make the landing page SaaS-centered, as that's currently our main value proposition and we need to keep users focused on that - current page has all sorts of bits and bobs and leaves the visitor baffled as to what we're actually about.
Additionally, top navigation will provide overview of other main areas at all times.

Here's the structure of the frontpage, that I've compiled - a bunch of screenshots - "chunks" from other pages (it's not stealing, it's getting inspired :D) with layouts that I think could work for the purpose, and headline above each chunk describes, what COS-based information it would contain.

Request:

@kevincrepin, could you please take a look at the document as a UX expert, and let us know:

  1. Whether that makes sense at all? As a first-time visitor on COS page.
    Maybe some chunks need reshuffling? Maybe something's missing, for the experience to be cohesive? Maybe all this doesn't make sense at all and should be approached differently?
  2. Do the chunks look OK if we were to reuse them more or less exactly as they are?

Location
https://citizenos.com/

Deadline
Is a week ok? 1-2 hours for UX review are signed off by Anett.

Enhancement: Please make 'Latest news' block viewable in all languages.

Please make 'Latest news' block viewable in all languages. Actually bring back, as they originally were viewable in all languges.

The justification earlier was that it is strange to see text in another language all of a sudden. But now we have the Indonesian website translated only partially, so it is justified to also be able to see the 'News' section, which is very important for our users to notice.

Screenshot 2021-03-31 at 18 16 02

BUG: Case study image too close to the edge (of the page)

What is the problem?
On the 'Product' page,
Case study image (first one, accompanies case study: "Estonia’s Citizen Initiatives Platform") is too close to the edge (of the page). I know I've created this, but unfortunately don't know how to make it align with the rest of the images.

Screenshot 2021-03-31 at 14 31 25

Website UI issues

A list of things that are (mainly visually) not yet on point on the website. Let's discuss these and work on them:

Homepage

  • If we keep only one button, it should be more like a button. But if we still want more cta’s there, then let’s bring them back.
  • If there are only 2 news items, let’s have them centered.
  • Read more in news items should be aligned to the bottom – everywhere the same.
  • Some texts don’t have punctuation.
  • "Use platform – it’s free" should be next to the button. The dash is the wrong one. Can we have an article here: "use the platform". Or otherwise "use our platform".
  • Some of the texts are written too much as list items. Doesn’t read well.

Product

  • Way too much copy in the header. How can we say this differently or place it somewhere else?
  • Features:
    • Checkmarks alignment.
    • Some of the list items needs to be expanded upon.
  • How does it work:
    • needs copy
    • videos not working
    • needs more top and bottom margin
  • Start using now more top and bottom margin
  • Case studies:
    • Images are falling too much to the sides. Size/ratio should be like on Research page.
    • more margins between the cases because now visually the grouping of the text and image is lost.
    • The pattern on the background is too heavy and also not the right pattern.

Movement

  • The animation from individual to group should still be implemented.
  • newsletter subscribe overlay isn’t working.

Research

  • Light bulb image in header seems too big

TASK: Help Center layout/navigation issues

Background info
We've gone through the Help Center and found a some behaviour/layout issues we'd like to iron out, for HC to function as intended and be convenient for users. Ticket with detailed info can be found here.

Issues to resolve

window.addEventListener('message', function (e){
	if (/citizenos\.com(:[0-9]{2,4})?$/.test(e.origin) && e.data === 'back') {
      window.history.back();
    }
}, false);

  • 2 - Margins
    The current live version has some margin issues. In some cases too much, in others too little, couple examples:

  • The margins all around the content feels a bit too tight, like it's all crammed into this small space.

  • start page after the first paragraph there's a big margin until the search and then another big margin until the topics. In design this is not so big.

  • The related or quick links need a bit more margin between the list items + the text should act like in a list, so if a wide sentence falls on a second line, it should be aligned with the first word of the sentence, behind the arrow.

  • 3 - White box overlay
    In the bottom there's a white box blocking the content for @kevincrepin, looks a bit weird :)

  • 4 - Reactive top title/label
    The idea was that the top title/label would change according to the second (not third) level. This would also reduce the need for the breadcrumbs.

  • 5 - Letter spacing
    Minor: The top title/label should have a bit extended letter spacing, like in design. It looks better :)
  • 6 - Level alignment
    Margin issues on the website: as Level 1 is aligned, but Level 2 indented. It looks quite odd when jumping back and forth between them, and isn't how it was in Kevin's original design.

Location
https://citizenos.com/help/

Deadline
@argoroots, could you please estimate the deadline?

Remove section from Landing page

Assigned: @argoroots

What? Propose to remove this section from the Landing page: both 'A word from the team' and 'Our Partners & Supporters'.

Why? 'About us' link is at the footer, where is it's logical place. The media bar replaces the function of the 'Our Partners & Supporters' section.

Screenshot 2020-12-17 at 01 47 05

Product/Company - statistics from Citizen OS API

Overview

Citizen OS web page needs to show live statistics from Citizen OS open statistics API - https://api.citizenos.com/api/stats

image

TODO:

Text-based page redesign

Current state:
Our website currently looks quite empty, with huge images, lots of air around them, and very (VERY) little text.
And where we do have some text-heavy pages on our website, they look weirdly put together - they have a huge empty blue block (that takes half the space) on the left-hand side, and loads of text on the right-hand side. Probably they were designed differently, but something went a bit off track along the way.

Few examples:

We have quite a few such pages, which will need improvement + we'll be creating new similar ones with more copy than on these pages.

Request:
We'd like to request a new design for a text-centered page: maybe a small intro/summary at the top, a considerable amount of copy (structured somehow?), maybe a couple of small graphic/images to illustrate and enliven the content - I'll leave that to you @kevincrepin, to decide, what's necessary :)

Also, would be great to have an option to add a section of 3-4 images with quotes where necessary (for example, a few quotes/user stories from our volunteers with their photos)

==================
@kevincrepin could you please kindly create such a template (or a few variations) to suit the pages mentioned above + future ones?

Is Wednesday, March 2, OK for a deadline? Thank you in advance 🙏
(cc @anettlinno)

Enhancement: 'request a demo' email address

We're getting a 'Request a demo' button on the website and the question is, which email should the request land on.

If we use [email protected], which is an alias to Margo, Anett and Liina, then if we put on 'out of office' reply to our personal email, then the demo request gets it as well, which is not good.

If we use [email protected], then the demo request get an automatic reply, which is directed towards bugs.

So option: we create a new email for demo requests (but that email needs to be checked separately then).
We use [email protected], and live with the fact that sometimes the out-of-office reply is on. Someone will always answer though.
Or we change the [email protected] automatic reply. Right now it is the following:

Dear CitizenOS user,

We have received the e-mail you sent to [email protected]. Critical issues and bugs will be dealt with immediately. Development requests, non-critical bugs and other enquiries will be answered within two working days.

Thank you for using CitizenOS!

Hea CitizenOS kasutaja,

Saime kätte teie saadetud e-kirja. Kriitiliste vigadega tegeleme koheselt. Arendussoovidele, mittekriitilistele veateadetele ja teistele päringutele vastame kahe tööpäeva jooksul.

Aitäh, et kasutate CitizenOSi oma otsuste tegemiseks!

Upgrade: Create 'All features' button on 'Product' page + separate page for features only

What is the problem?
Please create 'All features' button on 'Product' page under the 'features' list.
166589791_198150658432352_7019525597709655990_n

Also, please create a separate page for all features.
So that when the 'All features' button is clicked, one ends up on that new page.
For page design, perhaps use the most basic one like this: https://citizenos.com/about-us/
Text: https://docs.google.com/document/d/1ORJjfzrBWJ0SR4K2zgARAyT7rb6kZntqyd3D8QRZZRc/edit

Disappearing Yes/No field in the Help Center

Disappearing Yes/No field
After responding to the "Was this helpful? Yes/No" field, that section vanishes! My thoughts are that the flow should be that after submitting either Yes or No, there is confirmation that the responses was submitted, and then the box remains in the same place but with the Yes or No (whichever they chose) in a different shade. (We may also want to think through how it works if they want to change their mind and switch it to the other option - yes or no).
@anettlinno shall we ask Kevin to design this flow and then ask Argo to develop it?

Originally posted by @BeccaMelhuish in citizenos/citizenos-fe#815 (comment)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.