feat: Adjust panels spacing #448

janmichek · 2023-08-15T14:53:37Z

Description

fixes #394
fixes #23

Demo

Checklist:

I have read and followed the Contributing Guide
abstract panel components
unify blank panels spacing
adjust panel spacing by visual material

github-actions · 2023-08-15T14:58:08Z

Deployed to https://pr-448-aescan.stg.aepps.com

janmichek · 2023-08-15T15:01:32Z

Followup, I didn't dare because of many changes #449

janmichek · 2023-08-15T15:02:08Z

src/components/AccountDetailsPanel.vue

-          class="account-details-panel__copy-chip-ellipse"/>
-      </div>
-    </header>
+    <template #heading>


header styling was moved to AppPanel to release styles duplication

janmichek · 2023-08-15T15:02:36Z

src/components/AccountDetailsPanel.vue

@@ -142,33 +138,26 @@ const sanitizedPrice = computed(() =>

 <style scoped>
 .account-details-panel {
-  padding: var(--space-4) var(--space-1) var(--space-3);
-  margin-bottom: var(--space-7);
+  &__table-header {


Styles were sorted and ordered, which uncover a lot of dead code

janmichek · 2023-08-15T15:03:36Z

src/components/AppChip.vue

@@ -40,7 +40,7 @@ defineProps({
  @media (--desktop) {
    height: 32px;
    font-size: 14px;
-    padding: 6px var(--space-1);
+    padding: var(--space-0) var(--space-1);


updated minor chips tyles

janmichek · 2023-08-15T15:03:47Z

src/components/AppSelect.vue

@@ -83,13 +83,17 @@ const selectedValue = useVModel(props, 'modelValue', emit)
  &__tags {
    border-radius: 8px;
    border-color: var(--color-midnight);
+    border-width: 1.5px;


updated minor select tyles

janmichek · 2023-08-15T15:04:06Z

src/components/AppTabs.vue

@@ -73,9 +73,10 @@ function selectTab(tabIndex) {
    cursor: pointer;
    padding: var(--space-1);
    background: var(--color-midnight-15);
-    color: var(--color-gray);
+    color: var(--color-midnight-55);


updated colors of tabs

janmichek · 2023-08-15T15:04:31Z

src/components/AuctionsPanel.vue

@@ -2,7 +2,7 @@
  <app-panel class="auctions-panel">
    <panel-header
      level="h3"
-      title="Auctions ending soon"
+      title="AUCTIONS ENDING SOON"


Reverted last changes in dashboard headings after consultation

michele-franchi

Impressive work, really well done! 👏

I left some comments, could you have a look at them?

I personally don't like 1.5px borders and I don't understand where these come from, I checked Figma and it's always 1px. I didn't comment in the code because there are a lot of places but personally I would keep 1px everywhere, as It was before.

src/components/DashboardStateChannelsPanel.vue

src/components/StatsTile.vue

src/components/TransactionCellNameRevokeTx.vue

src/pages/keyblocks/[id].vue

src/pages/oracles/index.vue

src/pages/microblocks/[id].vue

src/pages/tokens/index.vue

janmichek · 2023-08-16T07:55:51Z

Impressive work, really well done! 👏

I left some comments, could you have a look at them?

I personally don't like 1.5px borders and I don't understand where these come from, I checked Figma and it's always 1px. I didn't comment in the code because there are a lot of places but personally I would keep 1px everywhere, as It was before.

Well, this is tricky. In code it is 1px, but in every zoomed scale looks like 1.5px,
It's surprising to me that such a mature tool as Figma cannot render correctly. I have been working with Figma several times before and I didn't face such render issues. Can you provide some feedback @danilosierrac ?

michele-franchi · 2023-08-16T07:59:36Z

Impressive work, really well done! 👏
I left some comments, could you have a look at them?
I personally don't like 1.5px borders and I don't understand where these come from, I checked Figma and it's always 1px. I didn't comment in the code because there are a lot of places but personally I would keep 1px everywhere, as It was before.

Well, this is tricky. In code it is 1px, but in every zoomed scale looks like 1.5px, It's surprising to me that such a mature tool as Figma cannot render correctly. I have been working with Figma several times before and I didn't face such render issues. Can you provide some feedback @danilosierrac ?

It's how Figma works and the goal is to have everything looks the same on different screens so a design looks the same for everyone but at the end I think the value that should be used is the one defined in the code / properties section.

Other than how it looks on Figma, on aeScan 1px looks a bit softer than 1.5px and I personally prefer it.

janmichek · 2023-08-16T08:03:04Z

@michele-franchi I don't think that is how Figma works. I didn't have that issue before. However, I fixed it. All borders aligned to 1px

michele-franchi · 2023-08-16T08:05:59Z

@janmichek for example for fonts:
https://forum.figma.com/t/why-does-a-font-weight-in-figma-seem-lighter-than-the-same-weight-in-the-browser/2207

Figma uses its own font rendering because each device renders fonts differently depending on the device, OS type and version, browser and its version, system settings, browser settings, display and maybe some other factors. Figma has to use one font rendering for all because it’s a collaborative tool with one source of truth.

michele-franchi

Very good job 🚀

lukeromanowicz

First of all, that's quite an amazing job you've done. After recent fixes I didn't find anything major to improve. The only thing I'm not very happy about some weird paddings like 7px or sub px values, but I suppose it's according to the designs. Well done, mate!

lukeromanowicz · 2023-08-16T12:08:04Z

src/styles/elements/_table.css

-    padding: var(--space-2) 0 var(--space-1);
+    line-height: 18px;
+    vertical-align: top;
+    padding: 10px 0 8px;


We could use --space-1 here

lukeromanowicz · 2023-08-16T12:08:31Z

src/styles/elements/_table.css

  vertical-align: middle;

  @media (--desktop) {
-    padding: var(--space-1) var(--space-0);
+    padding: 10px var(--space-0) 8px;


I would use --space-1 here

yea, I missed that. Fixed

janmichek · 2023-08-16T12:57:47Z

@Liubov-crypto Could you please go through the whole app and check if anything is obviously broken from UI side. Please don't compare to design material, as there are more misalignments. Thank you

Liubov-crypto

I found that the info is duplicated on Tokens details page, but I think this is middleware issue:

The rest, LGTM.

janmichek · 2023-08-16T15:07:09Z

I found that the info is duplicated on Tokens details page, but I think this is middleware issue:

The rest, LGTM.

Rigth, that's a know thing. Thanks for testing

Liubov-crypto · 2023-08-16T15:23:05Z

I found that the info is duplicated on Tokens details page, but I think this is middleware issue:
The rest, LGTM.

Rigth, that's a know thing. Thanks for testing

You are welcome! :)

janmichek and others added 22 commits August 10, 2023 09:18

roughly refactor all panels

faf17f9

adjust panel styles

ab3eb0a

adjust dashboard panels spacing

daa9bad

adjust tables in panels

f6c82b7

adjust mobile panels

576e51c

fix mobile panels spacing

94e6e56

fix code style

9170ff9

fix whitespacing in panel details

64e0132

shift palette colors

0c490e2

remove sizing from chips

64eac29

unite condensed panel spacing

11ac1fd

unite condensed panel spacing

2eeaf2c

adjust mobile views

4eceaaf

Merge branch 'develop' into Adjust-panels-spacing

b6dd5a0

fix code style

462738d

unify panels margins

6a8402a

unify panels margins

739b44b

code cleanup

001e54b

sort css styles

ca0a753

revert chip

9f22337

code cleanup

80a4757

fix imports

b132573

janmichek mentioned this pull request Aug 15, 2023

feat: Adjust panels spacing #431

Closed

4 tasks

janmichek changed the title ~~Adjust panels spacing~~ feat: Adjust panels spacing Aug 15, 2023

janmichek mentioned this pull request Aug 15, 2023

Reuse PanelHeader in AppPanel #449

Closed

janmichek commented Aug 15, 2023

View reviewed changes

remove console logging

64f0dd4

janmichek requested review from lukeromanowicz and michele-franchi and removed request for lukeromanowicz August 15, 2023 17:32

michele-franchi requested changes Aug 16, 2023

View reviewed changes

fix code consistency

5912ae7

janmichek requested a review from michele-franchi August 16, 2023 07:55

make border lines thinner

6302c37

michele-franchi approved these changes Aug 16, 2023

View reviewed changes

lukeromanowicz approved these changes Aug 16, 2023

View reviewed changes

fix variables

c66d249

janmichek requested review from Liubov-crypto and removed request for Liubov-crypto August 16, 2023 12:43

Liubov-crypto approved these changes Aug 16, 2023

View reviewed changes

janmichek merged commit e0ef32b into develop Aug 16, 2023
2 checks passed

janmichek deleted the Adjust-panels-spacing branch August 16, 2023 15:07

aeternity-bot mentioned this pull request Aug 25, 2023

chore(release/0.6.0): release 0.6.0 #478

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Adjust panels spacing #448

feat: Adjust panels spacing #448

janmichek commented Aug 15, 2023

github-actions bot commented Aug 15, 2023

janmichek commented Aug 15, 2023

janmichek Aug 15, 2023

janmichek Aug 15, 2023

janmichek Aug 15, 2023

janmichek Aug 15, 2023

janmichek Aug 15, 2023

janmichek Aug 15, 2023

michele-franchi left a comment

janmichek commented Aug 16, 2023

michele-franchi commented Aug 16, 2023

janmichek commented Aug 16, 2023

michele-franchi commented Aug 16, 2023

michele-franchi left a comment

lukeromanowicz left a comment

lukeromanowicz Aug 16, 2023

janmichek Aug 16, 2023

lukeromanowicz Aug 16, 2023

janmichek Aug 16, 2023

janmichek commented Aug 16, 2023

Liubov-crypto left a comment

janmichek commented Aug 16, 2023

Liubov-crypto commented Aug 16, 2023

feat: Adjust panels spacing #448

feat: Adjust panels spacing #448

Conversation

janmichek commented Aug 15, 2023

Description

Demo

Checklist:

github-actions bot commented Aug 15, 2023

janmichek commented Aug 15, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

michele-franchi left a comment

Choose a reason for hiding this comment

janmichek commented Aug 16, 2023

michele-franchi commented Aug 16, 2023

janmichek commented Aug 16, 2023

michele-franchi commented Aug 16, 2023

michele-franchi left a comment

Choose a reason for hiding this comment

lukeromanowicz left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

janmichek commented Aug 16, 2023

Liubov-crypto left a comment

Choose a reason for hiding this comment

janmichek commented Aug 16, 2023

Liubov-crypto commented Aug 16, 2023