Uploaded image for project: 'IGB'
  1. IGB
  2. IGBF-2812

Fix problems with App Store tile margins and whitespace

    Details

    • Type: Task
    • Status: Closed (View Workflow)
    • Priority: Major
    • Resolution: Done
    • Affects Version/s: None
    • Fix Version/s: None
    • Labels:
      None

      Description

      See atttached. Notice how text extends past the end of the tile. This should not happen.

      Also, note there is excessive vertical whitespace between adjacent lines of text. This also needs to be fixed.

      This was supposedly fixed previously but maybe wasn't or got broken later. See linked issues.

        Attachments

          Issue Links

            Activity

            Hide
            ann.loraine Ann Loraine added a comment - - edited

            Using "inspect" feature with Chrome developer tools reveals that the CSS for the tile is very hard to understand and alter. Using "inspect" feature to inspect the Grafana plugin site's tiles show that their code is much cleaner and easier to understand. Also note that one benefit of better design is that Grafana's page can support alternative views of the tiles - tile and list view.

            Can our code be improved using other App Store codes as a guide?

            Someone needs to spend a day or at least a few hours looking carefully at how the tile is styled both on our App Store and on the other App Stores we looked at when designing ours.

            Our code is not nearly as orderly and easy-to-follow. Also, it keeps breaking.

            Show
            ann.loraine Ann Loraine added a comment - - edited Using "inspect" feature with Chrome developer tools reveals that the CSS for the tile is very hard to understand and alter. Using "inspect" feature to inspect the Grafana plugin site's tiles show that their code is much cleaner and easier to understand. Also note that one benefit of better design is that Grafana's page can support alternative views of the tiles - tile and list view. Can our code be improved using other App Store codes as a guide? Someone needs to spend a day or at least a few hours looking carefully at how the tile is styled both on our App Store and on the other App Stores we looked at when designing ours. Our code is not nearly as orderly and easy-to-follow. Also, it keeps breaking.
            Hide
            chirag24 Chirag Chandrahas Shetty (Inactive) added a comment -

            To simply the structure like Grafana we need to change the position of elements inside our tile. I have truncated the text so that it won't overflow and adjusted the text size and color by taking reference from some other app store.
            link: https://devappstore5.bioviz.org/
            branch: https://bitbucket.org/chirag06/appstore/commits/e8f8bbba4774fcace7a214f5140bebc8e6003c1a

            Show
            chirag24 Chirag Chandrahas Shetty (Inactive) added a comment - To simply the structure like Grafana we need to change the position of elements inside our tile. I have truncated the text so that it won't overflow and adjusted the text size and color by taking reference from some other app store. link: https://devappstore5.bioviz.org/ branch: https://bitbucket.org/chirag06/appstore/commits/e8f8bbba4774fcace7a214f5140bebc8e6003c1a
            Hide
            ann.loraine Ann Loraine added a comment -

            Question for Chirag Chandrahas Shetty: Would it be a problem to change the position of elements inside our tile? If it makes the code easier to work with and more elegant, then it's fine with me.
            Does it look like Grafana and other app store style sites are using some 3rd party stylesheets we could purchase or use?

            Show
            ann.loraine Ann Loraine added a comment - Question for Chirag Chandrahas Shetty : Would it be a problem to change the position of elements inside our tile? If it makes the code easier to work with and more elegant, then it's fine with me. Does it look like Grafana and other app store style sites are using some 3rd party stylesheets we could purchase or use?
            Hide
            chirag24 Chirag Chandrahas Shetty (Inactive) added a comment -

            [~aloraine] I am working on rearranging the elements inside the box. I do not think Grafana is using paid CSS. Will it be okay if I remove authors from the box?

            Show
            chirag24 Chirag Chandrahas Shetty (Inactive) added a comment - [~aloraine] I am working on rearranging the elements inside the box. I do not think Grafana is using paid CSS. Will it be okay if I remove authors from the box?
            Hide
            ann.loraine Ann Loraine added a comment - - edited

            Please include the authors. Is the potentially larger number of authors causing a problem?

            If yes, you could get a more compact listing by using academia-friendly abbreviations, similar to citation formatting in research articles.

            You could write a python function that generates the text that would then be shown as something like "byline" in the Grafana css.

            Python code would have the following business logic:

            • If there are only two authors, write this: "by [surname] and [other surname]"
            • If there is only one author, write this: "by [surname]"
            • If there are three or more authors, write this: "by [surname], et al"
            • If there are no authors, write this "by [user that submitted the latest version of the app]" (assuming you can get access to this via model queries)

            Be sure to precisely match the punctuation style shown in the above examples. There's a comma in the third rule above.

            comment added upon discussion: This will NOT work because our database does not provide a way to identify surname.

            Show
            ann.loraine Ann Loraine added a comment - - edited Please include the authors. Is the potentially larger number of authors causing a problem? If yes, you could get a more compact listing by using academia-friendly abbreviations, similar to citation formatting in research articles. You could write a python function that generates the text that would then be shown as something like "byline" in the Grafana css. Python code would have the following business logic: If there are only two authors, write this: "by [surname] and [other surname] " If there is only one author, write this: "by [surname] " If there are three or more authors, write this: "by [surname] , et al" If there are no authors, write this "by [user that submitted the latest version of the app] " (assuming you can get access to this via model queries) Be sure to precisely match the punctuation style shown in the above examples. There's a comma in the third rule above. comment added upon discussion: This will NOT work because our database does not provide a way to identify surname.
            Hide
            ann.loraine Ann Loraine added a comment - - edited

            One thing I like about the Grafana css is that they use variable names that suggest what part of the text is being formatted. You can look at the tile in your Web browser and see easily how the data are structured into the visual, graphical format. It would be nice if our code were as elegant, or even more elegant. Our intended users are developers, and so we want to make the site look nice to them, and well built.

            In other words, we want to impress them.

            Show
            ann.loraine Ann Loraine added a comment - - edited One thing I like about the Grafana css is that they use variable names that suggest what part of the text is being formatted. You can look at the tile in your Web browser and see easily how the data are structured into the visual, graphical format. It would be nice if our code were as elegant, or even more elegant. Our intended users are developers, and so we want to make the site look nice to them, and well built. In other words, we want to impress them.
            Hide
            chirag24 Chirag Chandrahas Shetty (Inactive) added a comment -

            [~aloraine] I was asking about the authors so that we can reduce the height of the app-card. Please have a look at the changed design. I have already changed the class names so that we can easily tell what data are structured inside the HTML tag. I have also removed many tag hierarchy to simplify the structure.

            Show
            chirag24 Chirag Chandrahas Shetty (Inactive) added a comment - [~aloraine] I was asking about the authors so that we can reduce the height of the app-card. Please have a look at the changed design. I have already changed the class names so that we can easily tell what data are structured inside the HTML tag. I have also removed many tag hierarchy to simplify the structure.
            Hide
            ann.loraine Ann Loraine added a comment -

            The new look is nice.

            A small concern: There is a extra space separating the comma and "Daniel Narmi" in the top left tile.

            Show
            ann.loraine Ann Loraine added a comment - The new look is nice. A small concern: There is a extra space separating the comma and "Daniel Narmi" in the top left tile.
            Show
            chirag24 Chirag Chandrahas Shetty (Inactive) added a comment - diff: https://bitbucket.org/lorainelab/appstore/pull-requests/275/igbf-2812-improve-app-box-styling-and
            Hide
            ann.loraine Ann Loraine added a comment -

            Merged but not yet deployed.

            Show
            ann.loraine Ann Loraine added a comment - Merged but not yet deployed.
            Hide
            ann.loraine Ann Loraine added a comment -
            Show
            ann.loraine Ann Loraine added a comment - Deployed to https://devappstore5.bioviz.org . attn: Chirag Chandrahas Shetty
            Hide
            rweidenh Logan Weidenhammer (Inactive) added a comment -

            App tile margins and white space look appropriate. Closing issue.

            Show
            rweidenh Logan Weidenhammer (Inactive) added a comment - App tile margins and white space look appropriate. Closing issue.

              People

              • Assignee:
                chirag24 Chirag Chandrahas Shetty (Inactive)
                Reporter:
                ann.loraine Ann Loraine
              • Votes:
                0 Vote for this issue
                Watchers:
                3 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved: