search

GeriLife / wellbeing-client

Client-only code for Wellbeing project.
Apache License 2.0
0 stars 0 forks source link

Front page #2

Closed shailee-m closed 4 years ago

shailee-m commented 4 years ago
  1. Added front-page screen
  2. Add feeling and add Activity modals added
  3. Common utils, services and some reusable components were also created in the process
brylie commented 4 years ago

The button text and icons skew to the right and, in some cases, clipped.

Screenshot from 2020-09-11 12-18-40

There is a lot of spacing between the top navigation menu and the "Quick add" panel.

Screenshot from 2020-09-11 12-16-11

Please be attentive to these kinds of details.

brylie commented 4 years ago

It looks like you are using Quasar Cards instead of Quasar buttons. Use the Quasar button for the buttons on the page.

<q-btn color="green-9" push>
    <div class="row items-center no-wrap">
        <q-icon left name="fa-heartbeat" />

        <div class="text-center">
            Add<br>activity
        </div>
    </div>
</q-btn>
shailee-m commented 4 years ago

It looks like you are using Quasar Cards instead of Quasar buttons. Use the Quasar button for the buttons on the page.

<q-btn color="green-9" push>
    <div class="row items-center no-wrap">
        <q-icon left name="fa-heartbeat" />

        <div class="text-center">
            Add<br>activity
        </div>
    </div>
</q-btn>

Buttons will not be good for that size, that's why used cards

shailee-m commented 4 years ago

The button text and icons skew to the right and, in some cases, clipped.

Screenshot from 2020-09-11 12-18-40

There is a lot of spacing between the top navigation menu and the "Quick add" panel.

Screenshot from 2020-09-11 12-16-11

Please be attentive to these kinds of details.

Happening for very small screen size. Added ellipsis for the same.

brylie commented 4 years ago

Buttons will not be good for that size, that's why used cards

We don't need the buttons to be the exact size as the current version. Padding within the button might make them larger if needed.

In any case, we should use the q-btn element since these are buttons and should behave as such. Scroll down the page of the q-btn documentation and you will find examples of larger buttons containing icons.

shailee-m commented 4 years ago

In any case, we should use the q-btn element since these are buttons and should behave as such. Scroll down the page of the q-btn documentation and you will find examples of larger buttons containing icons.

done. Also as it is a button, the icon and button text are on the same line. Separated by a small margin.