Make the app responsive
The app is hardly responsive at the moment. This makes it unusable on mobile in practise.
We should fix that. Not having a mobile app is one thing, but we should at least ensure the app can be used on mobile.
Activity
changed milestone to %Projects part I
By Alexandre on 2019-09-19T14:02:35 (imported from GitLab project)
mentioned in issue #62 (closed)
mentioned in issue #261 (closed)
@sophie I have to make the app responsive on mobile, but I have a question about the tables. How are these kinds of tables supposed to be displayed on mobile phones? https://invis.io/3POVGBKAQD8#/332923050_Administration_-_Projets
By Gaëlle Morin on 2019-11-26T09:11:41 (imported from GitLab project)
@gaelleM for a table on mobile, you can do this : https://invis.io/TYPEHH5AD9G#/395444522_Administration
User can scroll horizontaly to see the all table. When he scrolls verticaly columns names get sticky on top of the phone with header like this : https://invis.io/TYPEHH5AD9G#/395445226_Administration_2
Here is the design for another kind of table, the notification, save button should be sticky on the bottom of the screen : https://invis.io/TYPEHH5AD9G#/395446520_Notification
exemple : https://codepen.io/karks88/pen/jGrjdW/
Do you have everything u need ? Otherwise, just ask :)
Kuddos @sophie. I like it!
By Alexandre on 2019-11-27T19:15:01 (imported from GitLab project)
It seems good @sophie :) @alexandre I think I will work on the tables with Fred to make something that is as modular as possible (I see content that changes places depending on the screen resolution). This will also provide a good basis for opening an issue on the complexity of making tables with StartinBlox with a very concrete example.
By Gaëlle Morin on 2019-11-28T18:28:02 (imported from GitLab project)
Some questions here @sophie
- On this mock-up, what is "name" related to?
- Is the horizontal scroll be only on the table or the whole page?
- On desktop, we have a bell. When we click on it, we can see a menu with all our notifications. Where does this menu go?
By Gaëlle Morin on 2019-12-03T16:03:12 (imported from GitLab project)
@gaelleM : Regarding the name, https://git.happy-dev.fr/startinblox/djangoldp-packages/djangoldp-project/blob/master/djangoldp_project/models.py#L38, no?
By Alexandre on 2019-12-03T18:45:19 (imported from GitLab project)
-
@gaelleM Name is the project's name horizontal scroll only for the table
I have just updated the menu and designed notifications and search views, you can access from this page : https://invis.io/TYPEHH5AD9G#/334488032_Page_Devis
@alexandre I was talking about the name here :
But it has been removed today :)Thank you @sophie :)
By Gaëlle Morin on 2019-12-04T11:40:40 (imported from GitLab project)
@alexandre, @sophie, @sylvain I talked to Fred. We have divided the page into two elements because there is a lot of work to do:
- the header
- the content.
For now, we'd focus on the header. It is necessary to rework its display on mobile phones and find the right breakpoints. It remains the menus and other toggles:
- the bell: the details of the notifications will be done later because I don't have the mock-ups for desktop display. Mobile mock-up is different from the data displayed.
- the search field: the filter is not functional so this view will be stylized later.
- the user and burger menus will be displayed and stylized on mobile phones.
We estimated the working time at 1.5 days, the menu with the photo + name that appears/disappears requiring a slight adjustment. That's the worst-case estimate.
Two questions are remaining:
- Is the horizontal scroll be only on the table or the whole page?
- In the notification menu, why is there a name in purple?
By Gaëlle Morin on 2019-12-05T16:55:35 (imported from GitLab project)
-
@gaelleM my answers
Is the horizontal scroll be only on the table or the whole page? yes only in the table
In the notification menu, why is there a name in purple? You mean this one ? https://invis.io/TYPEHH5AD9G#/396154687_Notification_List If yes then here when user tag me in a circle/project, I receive a notification that appears like this.
the bell: the details of the notifications will be done later because I don't have the mock-ups for desktop display. You can now see on this page the notification pop up : https://invis.io/3POVGBKAQD8#/328712388_NEW_PROJECTS There 4 kind of notifications :
- your are tagged in a circle or project
- you receive a direct message
- You have been invited to a circle
- You have been invited to a project
- You have been promoted Administrator of a circle/project
- You have been excluded from the circle/project xxxx
See something I forgot, just tell me :)
When clicking on the notification, it redirects user on the right page, just like Facebook. https://invis.io/3POVGBKAQD8#/328712388_NEW_PROJECTS
mentioned in issue #326 (moved)
@sophie Oops, I got lost in all these pages. I meant in the "research" page. "Benoît Dupont" is in purple. Does he have anything special?https://projects.invisionapp.com/share/TYPEHH5AD9G#/screens/396154688
@alexandre @jbpasquier @sylvain There are some differences between the model and the component. How do we handle them (data are different, the HTML structure is not the same, invitations not yet visible, etc)?
By Gaëlle Morin on 2019-12-06T11:11:05 (imported from GitLab project)
@gaelleM Do not bother with this for now. Let's keep the notification component as it is today, we'll revamp it later on.
Could you create an issue so we don't forget it?
By Alexandre on 2019-12-06T11:11:05 (imported from GitLab project)
@alexandre Done here: https://git.happy-dev.fr/startinblox/applications/sib-app/issues/327
By Gaëlle Morin on 2019-12-06T12:58:44 (imported from GitLab project)
-
@gaelleM nop no difference, it was a mistakes, sorry about that
