fluid-project / floeproject.org

The Floe Project website

What is the FLOE Project

FLOE is creating tools that help transform, augment, and personalize the learning experience.

FLOE provides the resources needed to enable inclusive access to personally relevant, engaging learning opportunities for the full diversity of learners and content producers.

This Repository

This repository contains the markup needed to deploy the floeproject.org website.

To Build Locally

1. Clone the project locally.
2. Go to the directory where you cloned the project.
3. Install dependencies: npm ci
4. Run locally: npm start.
5. Open http://localhost:8080/

To build locally using Docker

You can serve the website from a Docker container.

Once you have Docker installed, run the following commands to build a Docker image and start a container:

• Build the image: docker build -t floeproject .
• Run the container: docker run --name floeproject -p 8000:80 floeproject

The website will be available at http://localhost:8000

If you make changes to the website, repeat the steps to build the image and start a new container.

To deploy to a personal webserver

1. Run: npm run build
2. Copy the contents of the _site directory to your server.

Deploy preview

Changes in the dev branch can be previewed and tested via the deploy preview site hosted by Cloudflare Pages:

https://dev.floeproject-org.pages.dev/

Notes

• Modifications may be made to any source file or directory except for the contents of the _site/ directory. The _site directory and its contents are not to be versioned since it contains the generated output made by eleventy from the source files and are overwritten.
• Redirects may only work when deployed to a webserver or to Cloudflare Pages.

Third party resources included

Open Font License (OFL 1.1)

• Literata

Apache License, Version 2.0

• Open Sans Font

Creative Commons Attribution 4.0 International (CC BY 4.0)

• Creative Commons Icons

floeproject.org's Issues

Index Html margins are off on the left and right

Is your feature request related to a problem?

the page cannot fully cover the canvas the regular margins makes it a little off

Describe the solution you'd like

The design of this page can be improved if it covers the full page
I see that it is a design of the page but it can be improved if we stretch across the full canvas

##This is just my suggestion i just want to utilize this blank space may be social media ticker icon bar can be present here.

Merge changes from Master into 11ty static site PR #163

Is your feature request related to a problem?

The Floe Project master branch has changed since the PR was created and some of the content has changed.

See #169 (https://github.com/fluid-project/floeproject.org/pull/169/files) for all the changes.

Describe the solution you'd like

The following changes need to be merged into the 11ty Pull Request (#163 )

• Add news Posts:
  • news/2020-07-15-Platform-Co-op-Update.html
  • news/2020-07-14-New-Resources-from-Coding-to-Learn.html
  • news/2020-07-02-WeCountUpdate.html
  • news/2020-06-28-AIHEC-Update.html
  • news/2020-05-20-DEEP-Update.html
  • news/2020-03-27-ODAO-Update.html
• id=content added to <article> element in the news post template
• Front page index.html News list updated

Space should be reduced between "flexible learning for open" and "education"

Describe the bug

Space should be reduced between "flexible learning for open" and "education" as they are the part of the same heading or line.

Screenshots

Implement a nav toggler icon.

Describe the solution you'd like

As we resize the window to a minimum width the toggle icon will contain all the three navbar options.

This will fix the issue #123 in a more efficient way.

Contents of "Table of Contents" overlap with each other when line spacing is less than 1.

Describe the bug

Contents of "Table of Contents" overlap with each other when line spacing is less than 1.

To reproduce

Steps to reproduce the behavior:

1. Go to Preferences.
2. Turn on the table of contents.
3. Reduce the line spacing to some number less than 0.9
4. See error

Expected behavior

The different points in the table of contents should not overlap when line spacing is decreased.

Screenshots

Technical details

Desktop

• OS: Ubuntu 18.04
• Browser: Chrome
• Version: 80.0.3987.122 (Official Build) (64-bit)

Additional context or notes

A temporary solution to this problem would be to place a cap on the minimum value of line spacing.

Image is not alligned properly in mobile.

Image is not alligned properly when viewed in mobile(android device). Image are shifted or align more towards the right side and not the center.

Pointer not visible while viewing the website on a Mobile Phone.

Description

Unable to view the right pointer for the contrast preference while viewing it on Google Chrome on a mobile phone.

So basically you have to drag it towards the left, to see the pointer - and I feel like this needs to be fixed :)

Screenshots

Links overlapping in footer

Describe the bug

Links in the footer of website overlap on each other at line spacing values less than 1.

To reproduce

Steps to reproduce the behavior:

1. Go to www.floeproject.org
2. Scroll down to the bottom of the page.
3. See error

Expected behavior

Links should not overlap for a better viewing experience.

Screenshots

The problem gets worse when we hover over one of the links.

Technical details

The display property needs to be fixed.

Desktop

• OS: Ubuntu 18.04
• Browser : Chrome
• Version: Version 80.0.3987.122 (Official Build) (64-bit)

Some content changes needed

Spelling Mistakes

Some spelling mistakes and also some mistakes in using uppercase and lowercase letters are there in some files.

Update UI Options page

Is your feature request related to a problem?

Expand on the information provided in the UI Options page of the Floe Website.

Describe the solution you'd like

Some suggestions:

• first paragraph for non developer
• next paragraph for developer

Say something about UIO not being the start for web accessibility, it’s maybe the second step after having accessible content.

• maybe have an aside to point to web accessibility basics
• maybe link to external blogs like the one from Mike Gifford

Describe alternative solutions you've considered

Not applicable.

Additional context or notes

Replaces https://issues.fluidproject.org/browse/FLOE-583.

Add a page for UI Options

Currently there is no good way of finding where to download UI Options, or how to install it.

Add a page for UI Options that gives instructions on where to download different versions, and links to relevant documentation.

"UI Options" of navigation bar splits into UI and Options in mobile devices.

Describe the bug

"UI Options" of navigation bar splits into UI and Options in mobile devices making it look like News Options.

To reproduce

Steps to reproduce the behavior:

1. Go to floeproject.org on iPhone 5/SE
2. See error

Screenshots

Expected behavior

UI Options should not split and should move together if a new line is to be used to display the whole of navbar items.

Desktop

• OS: Ubuntu 18.04
• Browser : Chrome
• Version: Version 80.0.3987.122 (Official Build) (64-bit)

Additional context or notes

The links overlapped when the UI Options link goes into the next line as shown.
The overlapping UI Options and News link, when hovered over, is solved by adding a margin to links.

Update project partners and officers

Review list of project partners and officers, and edit the copy as needed.

404 error on network request for tableOFContents-enactor.json (related to infusion)

Describe the bug

Console shows 404 for network calls to request data from tableOfContents-enactor.json

To reproduce

Steps to reproduce the behavior:

1. Go to www.floeproject.org
2. Right Click anywhere and click on Inspect.
3. Go to Console
4. See error

Expected behavior

The error should be removed.

Screenshots

Technical details

###Desktop
OS: Ubuntu 18.04
Browser : Chrome
Version: Version 80.0.3987.122 (Official Build) (64-bit)

Typesetting Links.

When the cursor is over the links the padding is not present which.

By giving the padding to the link we can get better UI at various places in the webpage.

Example links in the navbar.
Before

After

Auto-generate the recent news list on the front page

Is your feature request related to a problem?

The recent / highlighted news on the front page is currently manually updated, creating a maintenance burden.

Describe the solution you'd like

The news item on the front page should be auto-generated from a collection. Depends on #163 being merged.

A UI change

Is your feature request related to a problem?

Dropdowns on the resources page does not have the cursor set to pointer which looks better and creates better user Experience.

Describe the solution you'd like

Convert the cursor to pointer.

Images are not responsive when the text size is decreased.

When the text size is decreased the home page images remains in the same size.
Their size does not decrease.

Screenshot

I think the images should be responsive as soon as the text size is decreased the images size should also decrease.

The Images on the home page when hovered did not show any change.

Is your feature request related to a problem?

The images on the home page when hovered did not have any effect.
This effect is not needed for the news pages as the images are too big in size.

Describe the solution you'd like

The images when hovered should show some change in them like we can decrease the opacity.
This will make things look better and for a good user experience.

Adding smooth collapsed and expand at (https://floeproject.org/resources.html)

We can have smooth collapsed and expand at resources page for expand all,hide all and all the other buttons.

CSS Focus bug

Even if we move to another option on the resources page the option we clicked previously remain on focus.

text and the images overlapping in desktop

Describe the bug

when we decrease the text -sixe to 0.5 THE TEXT AND THE images are overlapping with each other in the deskto as well as the mobile view

To reproduce

Steps to reproduce the behavior:

1. Go to 'https://floeproject.org/'
2. do text- size to '0.5'
3. See error

Expected behavior

images and the text is not responsive overlaping with each other

Screenshot in desktop

Technical details

desktop

• • Browser [e.g. stock browser]

Additional context

this bug shows in desktop as well as in mobile

Migrate Floeproject.org to a static site generator (Eleventy)

Is your feature request related to a problem?

Floeproject.org should use a new static site generator like Eleventy, instead of hard-coded HTML files.

Describe the solution you'd like

Use a modern, supported static site generator like Eleventy to help rendering Floeproject

Index page not responsive on mobile view

Describe the bug

Visiting the index page https://floeproject.org/ on a mobile device is not responsive

To reproduce

Steps to reproduce the behavior:

1. Go to https://floeproject.org/ on a mobile device
2. See error

Screenshots

Technical details

Smartphone / tablet

• Device: Android
• OS: Android 8.1
• Browser Chrome
• Version : 80.0.3987.132

Ensure that all HTML passes validation in redesign

Describe the bug

Some HTML does not pass validation.

To reproduce

N/A.

Expected behavior

All generated HTML passes validation.

Additional context or notes

Replaces FLOE-166.

Include a back-to-top button on scrolling down

On scrolling the website, a back-to-top button can be included in the bottom-right corner to make it easier to navigate back to the top.
Please let me know if you need any help with this or if I can integrate this in the existing UI.

at text size 1.1 and greater option in "ui option" went down to News make it look like news option.

Describe the bug

at text size 1.1 and greater option in "ui option" went down to News make it look like news option.

To reproduce

Steps to reproduce the behavior:
1.click on preference
2. text size set to 1.1 or greater
3. See error

Expected behavior

option should be below ui so that it can feel sensible while reading.

Screenshots

• Browser [e.g. chrome]

The highlighted links overlaps when the line-spacing is decreased.

When the line-spacing is decreased the highlighted links (in yellow color) overlaps with the text placed above and beneath it.

Screenshot:-

Add analytics tracking code

Add the following code to the section:

<script type="text/javascript">
  var _paq = window._paq || [];
  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="https://analytics.inclusivedesign.ca/";
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', '8']);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
  })();
</script>

Highlighted links on the homepage are getting overlaped. (UI/UX)

Decreasing the line spacing (0.7/0.8) is causing the highlighted links on the homepage to overlap.

=>Above mentioned problem is evident in mobile devices as well as desktops.
=>Setting the contrast as yellow even worsens the problem. (class = "fl-theme-by" on body).

To reproduce

Steps to reproduce the behavior

1. Go to https://floeproject.org
2. Click on show preferences on the top.
3. Change the line spacing to 0.7.
4. See this error.

Expected Behavior

The highlighted links on the homepage should not overlap.

Screenshots

1. iPhone 6/7/8 plus [Chrome dev tools simulator]

2. iPhone 6/7/8 plus [Chrome dev tools simulator]

3. Desktop [OS: Windows10, Google Chrome: version 80.0]

Solution proposed

=> Background-color(#FFCB00) on links should be removed. Instead, we can use the text-decoration to highlight the links and that too with the same color(#FFCB00).
This would solve this problem in all the available size displays including (iPad, iPhones, Desktops, Laptops, etc.)

Alternative solutions considered

=> Changing the opacity of the highlighted links.

Are you working on this issue (Yes/No)?

Yes

Bug: Text overlapping to the image

Describe the bug

when we decrease the text -sixe to 0.5 THE TEXT AND THE images are overlapping with each other in the deskto as well as the mobile view

To reproduce

Steps to reproduce the behavior:

1. Go to 'https://floeproject.org/'
2. do text- size to '0.5'
3. See error

Expected behavior

images and the text is not responsive overlaping with each other

Screenshot in desktop

Technical details

desktop

• • Browser [e.g. stock browser]

Additional context

this bug shows in desktop as well as in mobile

images aligned to right in mobile view

Describe the bug

the all images are aligned to right not in center in the mobile view

To reproduce

Steps to reproduce the behavior:

1. Go to 'https://floeproject.org/'
2. Scroll down to '....'
3. See error

Expected behavior

image must be aligned in centre not to right

Screenshots

Smartphone / tablet

• Device: [e.g. iPhone6 , iphone5s, galxy fold , iphone6/7/8 plus]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser]
• Version [e.g. 22]

Update the Floeproject site to the updated design

The Floeproject site should be updated to include the new design elements as seen in the attached mock-up.

Waiting on design

• REVIEW Dev site
• feedback to Dev team
• REVIEW High Contrast styling and other UIO settings
• feedback to Dev team
• focus / hover states
• Desktop design page
• home page design (require direction on content)
• resources page
• projects page

Ready to work on

• Add notice to the accessibility-sprint-2015 page
• Move security-architecture page to a news article
• Move preference-editing-tools page to a news article
• Copy for projects and etc (need to talk to Michelle and Jon)
• Focus/Hover styling take inspiration from guide site
• #236 - @BlueSlug
• Fonts across site - @BlueSlug
• News page - @jobara
• Header -- phase 1 version
• Add SVGs for Creative Commons and etc. (source SVGs with <use>) - @BlueSlug
• Integrate styling with UIO (consider using Enactors_base.css and setting styles by manually)
• Mobile Menu - take inspiration from guide site
• style pagination on news page
• General layout styling
• Style news cards
• Style resource cards
• Implement info architecture

Fonts

Literata family
Weights: 400, 500, 600, 700, 800
Styles: roman and italic

Open Sans
minimal use in breadcrumbs and prev/next

mobile visual design

link to Figma: https://www.figma.com/file/G259suL62L7z81p6JYOkxI/FLOE-website-v2?node-id=543%3A73

Migrate from Foundation to custom CSS and components

Is your feature request related to a problem?

The current version of Foundation used for the Floeproject site is old and does not accommodate flexible layouts well (for example see #178).

Describe the solution you'd like

As part of the work for #183, migrate from Foundation to custom CSS. Perhaps consider using Pinecone.

Text and images is overlapping to each other when we reduced text-size

Describe the bug

when we decrease the text -sixe to 0.5 THE TEXT AND THE images are overlapping with each other in the desktop,,
Due to the image because image is not responsive .
See in the screenshot which is given below for the better understanding,,
@colinbdclark i made this issue after the FLOE Website migrated into the static site generator.

To reproduce

Steps to reproduce the behavior:

1. Go to 'floeproject website'
2. do text- size to '0.5'
3. Scroll down
4. See error

Expected behavior

images and the text is not responsive overlaping with each other

Screenshot in desktop

Technical details

desktop

• • Browser [e.g. stock browser]

Additional context

this bug shows in desktop

Instead of 2 buttons(expand all and hide all)we can have one single button.

Currently we have 2 different buttons on resources page for show all and hide all. instead of two, we can have one button that will expand every toggle item when state is true and hide the item when state is false in toggleCategory.

We would be changing the name of the buttons as their functionality changes.

page link - https://floeproject.org/resources.html

need hyphens in elments of UI OPTIONS in Mobile view

Describe the bug

the UI OPTIONS need hyphens in mobile view to identify that this is one single word not the two words ,,,,,,,
like ui and options is not a twoword so add a hyphen in it to identify that this is single word not a two words plz see in the screenshot giiven below for the better understanding.....................

To reproduce

Steps to reproduce the behavior:

1. Go to 'http://floeproject.org/'
2. see in the elments on top 'UI OPTIONS'
3. See error

Expected behavior

ONLY ADD THE hyphens

Screenshots

Smartphone / tablet

• Device: [e.g. galaxy fold]
• Browser [chrome ]
• Version [latest]

Additional context or notes

i already fixed and create a pr for this @jobara @sachin10101998

Nav Bar should be more clear about pages it serves.

-> When user click on the any of the NavBar component then that component should be highlighted from rest of the components, for better user experience.

Add screen reader or other AT details to the Technical Details section

Describe the solution you'd like

Add a section to list ATs and their versions in the technical details section of a bug report.

Adding the social media icons in the footer.

Is your feature request related to a problem?

No this issue is not related to any problem. But by this issue the user can easily come to know more about the floeproject.org and can contribute to it too.

Describe the solution you'd like

We can add three icons or even more :-

1. Twitter icon :- This will help the user to read the tweets of the the organization.
2. Facebook icon :- This will help the user to go to the facebook page easily .
3. instagram icon :- This will help the user to go to the instagram page easily of the university.

Using cursor as pointer in resource page

When clicked on the resources the cursor should be a pointer.

There should be gap between footer and block

Describe the bug

A clear and concise description of what the bug is.

To reproduce

Steps to reproduce the behavior:

1. Go to 'https://floeproject.org/'
2. Click on '....'
3. Scroll down to 'footer'
4. See error

Expected behavior

A clear and concise description of what you expected to happen.
There should be a gap between the footer bar and block

Screenshots

If applicable, add screenshots to help explain your problem.

Technical details

Desktop

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone / tablet

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context or notes

Add any other context about the problem here.

Incorporate suggested content changes

Is your feature request related to a problem?

Jutta suggested some content changes: https://lists.idrc.ocad.ca/pipermail/fluid-work/2014-April/009363.html

Describe the solution you'd like

These should be incorporated if still relevant.

Describe alternative solutions you've considered

Not applicable.

Additional context or notes

Replaces FLOE-185.

Add Home link to site navigation

Is your feature request related to a problem?

It was getting difficult to switch between the Home page and the other pages of website quickly. Adding the home will make switching easier and landing page will look good.

Below is the screenshot of the current website.

How you will resolve the issue?

I would like to add the Home key to the website.
<li><a href="./index.html">Home</a></li>

here is the screenshot after changes made.

@jhung , @jobara I would like to make changes.

Text size of Hide/Show increases and decreases.

Describe the bug

On increasing the text size from the show preferences button, the size of the text also increases/ decreases in mobile view

To reproduce

Steps to reproduce the behavior:

1. Go to 'mobile website'
2. Click on 'show preferences'
3. Increase the text size
4. See error

Expected behavior

Ideally it should not happen.

Using LocalStorage instead of Cookies for storing User preferences data

Is your feature request related to a problem?

Cookies send server information back every time an HTTP request is made. localStorage is an implementation of the Storage Interface. Unlike with cookies, data does not have to be sent back and forth with every HTTP request. This reduces the overall traffic between the client and the server and the amount of wasted bandwidth. This is because data is stored on the user’s local disk and is not destroyed or cleared by the loss of an internet connection. Also, LocalStorage can hold up to 5MB of information. This is a whole lot more than the 4KB that cookies hold.

Describe the solution you'd like

Storing the values of preferences of a user (related to font size, colors, etc) in localstorage instead of Cookies. Also, with LocalStorage we can not only store strings but also Javascript primitives and objects.
TL;DR - Cookies are smaller and send server information back with every HTTP request, while LocalStorage is larger and can hold information on the client-side.

Describe alternative solutions you've considered

Apart from localstorage , sessionstorage can be used. However, every time a person closes a tab, the session data is erased. So, people visiting the site, again and again, would feel a hurdle to change their preferences again and again.

Additional context or notes

1. Cookies vs LocalStorage
2. localStorage vs sessionStorage vs Cookies – a Detailed Comparison

There is no spacing before and after the footer tag.

There is no spacing before and after the footer tag and it doesnt look good.

image overlap when text size is adjusted to 0.5.

Describe the bug

image overlap when text size is adjusted to 0.5.

To reproduce

Steps to reproduce the behavior:

1. click on preference
2. adjust the text size to 0.5
3. See error

Expected behavior

Image should not overlap with text

Screenshots

• Browser [e.g. chrome]

Show preferences panel bar doesn't fit the small screens.

The show preferences panel doesn't fit with the screen width.

Show preferences panel does not fit the width of the screen on small scale devices(width < 365px).

To reproduce

Steps to reproduce the behavior:

1. Go to https://floeproject.org
2. Open Chrome dev tools and click on the toggle device toolbar icon.
3. Scroll and set the width less than 365px and then see the error.

Expected behavior

The show preferences panel div should occupy the 100% width of the device screen.

Screenshots

1. iPhone 5/SE (Chrome dev tools simulator)

2. Samsung galaxy S5 (Chrome dev tools simulator)

Technical details

This bug is evident because the size of the images doesn't scale down when the width of the device goes small.

Are you working on this issue? (yes/no)

Yes

Add full Text Search feature to search among the various news articles published

Is your feature request related to a problem?

As the number of news articles published on floeproject.org increases, searching and finding a particular news article and some information inside the article becomes tougher and tougher.

Describe the solution you'd like

There are three ways to implement a search feature.

1. Using Client-side Javascript libraries such as Elasticlunr or Lunr.
   Since the data and news articles are not continually updated so we don't need a dedicated back end service. Since we have a small amount of simple textual data it’s possible to provide basic search functionality via simple string matching. For example, using JavaScript we could store product data for a website as an array of objects in a JSON file, then fetch the file and iterate over each object to find matches.

Describe alternative solutions you've considered

1. A dedicated back-end search engine such as Elasticsearch.
2. Using a database with built-in search functions such as MySQL or MongoDBMongoDB
3. If we can cache all of our data locally on the client (say less than 20MB) we could consider client-side search.

Additional context or notes

Since the number of articles is limited, so client-side javascript libraries can be used for full-text searching by string matching.