search

code4romania / teacher-workout-android

Teacher Workout Android app
Mozilla Public License 2.0
5 stars 17 forks source link

Implement lesson themes screen #6

Closed catileptic closed 2 years ago

catileptic commented 3 years ago

The Figma document contains the entire UI of the project.

You can export any image (asset) directly from Figma. Here's how.

Please do not try to recreate the UI design exactly. Prioritize using de default UI mobile components, and following the material design guidelines. The UI objects should be positioned roughly the same as in the Figma screens.

The mobile flow can be found in the project Wiki.

Please define related colors and text & button styles in the corresponding values files. Please extract all text values in the corresponding xml files so we can easily adjust them. <3

The names of the lesson themes will be fetched from the corresponding endpoint in the backend. (We will link the staging env for the backend and list the endpoint as soon as we define them)

The search bar should only search though lesson theme titles. It will then only display lesson themes that contain the search keywords in the space below. If the search term is deleted, the list below will display all the themes once more.

Pressing the Descoperă button in the footer also takes the user to his screen. On this screen, the Descoperă button in the footer will have a highlight (it will be blue, instead of grey).

image

Related:

PanduruIonut commented 3 years ago

I'm currently working on this.

alexandru-calinoiu commented 2 years ago

Here is the graphql query to populate this screen https://teacher.heroesof.tech/ui/graphiql?query=query%20%7B%0A%20%20themes%20%7B%0A%20%20%20%20edges%20%7B%0A%20%20%20%20%20%20node%20%7B%0A%20%20%20%20%20%20%20%20id%0A%20%20%20%20%20%20%20%20title%0A%20%20%20%20%20%20%20%20thumbnail%20%7B%0A%20%20%20%20%20%20%20%20%20%20url%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D

AlexandraDamaschin commented 2 years ago

Here it might be better to split this into 2 PRs: one for implementing the UI as per design with dummy data and another PR in which we connect this screen to the API

Let's keep this issue for implementing the basic UI of the screen and tackle the rest in future PRs.

AlexandraDamaschin commented 2 years ago

@PanduruIonut did you get the chance to make some progress on this? Would you still like to work on it? We can chat more about this if you want to decide on further steps.

daniyelp commented 2 years ago

@AlexandraDamaschin I could tackle this.

AlexandraDamaschin commented 2 years ago

Sure, feel free to tackle it :+1:

daniyelp commented 2 years ago

Should I put the title in a top bar? along with the search icon (that expands into a search view)?

PanduruIonut commented 2 years ago

Sorry for blocking this task, i had multiple issues with android studio on my device every time i tried to work on this. I think it would be better to be picked up by someone else.

AlexandraDamaschin commented 2 years ago

@daniyelp Not sure about which title you're asking. That's how the design looks like for the lesson themes image