Enhance person view and make ANET more responsive

[cemalettin-work]

Person Page made two column layout and the fields order can be changed, and some parts of the ANET made more responsive.

Closes #3235
Closes #3293
Closes #3281
Closes #1916

User changes

• Users will see a more compact Person page and will be able to use ANET more easily on small width devices.

Super User changes

• The buttons and fields on a person page has been changed. So edit position and change assigned position buttons are in the person information block.

Admin changes

• The buttons and fields on a person page has been changed. So edit position and change assigned position buttons are in the person information block.

System admin changes

• anet.yml or anet-dictionary.yml needs change

  • There are 2 additional fields for fields.person and 2 additional fields for fields.principal.person and fields.advisor.person in the anet-dictionary.yml:

    • New fields for person (field: label_to_show_in_UI):

        person:
          position: Current Position
          prevPositions: Previous Positions
      

    • New fields for advisor.person and principal.person:

        advisor:
          person:
            # N is the number of fields after Avatar in the left column for advisors
            numberOfFieldsInLeftColumn: N
            showPageOrderedFields:
      

        principal:
          person:
            # N is the number of fields after Avatar in the left column for principals
            numberOfFieldsInLeftColumn: N
            showPageOrderedFields:
      

  • Admins need to select and order which person fields (custom fields included) and in what order they will be shown on the Person page by providing those fields under advisor.person.fields.showPageOrderedFields and principal.person.fields.showPageOrderedFields .

  Example usage, admins need to adjust the number of fields (N) so that two columns are somewhat balanced (Some fields can have a lot of data in them e.g previous positions can be long):

    advisor:
      person:
        # number of fields after Avatar in the left column for advisors
        numberOfFieldsInLeftColumn: N
        showPageOrderedFields:
          - position
          - prevPositions
          - emailAddress
          - multipleButtons
          ...
  
  

  The result for advisor pages would be:

  first column	second column
  «Avatar»	«N + 1»
  «position»	«N + 2»
  «prevPositions»	«N + 3»
  «emailAddress»	«N + 4»
  «multipleButtons»	«N + 5»
  «…»	«N + …»
  «N»	«N + …»

• db needs migration

• documentation has changed

• graphql schema has changed

Checklist

• Described the user behavior in PR body
• Referenced/updated all related issues
• commits follow a repo#issue: Title title format and these 7 rules
• commits have a clean history, otherwise PR may be squash-merged
• Added and/or updated unit tests
• Added and/or updated e2e tests
• Added and/or updated data migrations
• Updated documentation
• Resolved all build errors and warnings
• Opened debt issues for anything not resolved here

[midmarch]

LGTM