search

OpenWaterFoundation / owf-app-infomapper-ng

Open Water Foundation InfoMapper web application for menu-driven maps and visualizations, using Angular
GNU General Public License v3.0
1 stars 2 forks source link

Feedback on content page #317

Closed smalers closed 4 years ago

smalers commented 4 years ago

The content page, especially the home page, need some enhancements.

  1. The page is too wide on a widescreen monitor. It feels like the eye has to travel too far scanning left to right. I found an old article that says a line should be no more than 80-100 characters. I'm not sure if it is better to center the output on the display or use a narrow left buffer, followed by the text area, followed by whatever is left over.
  2. I wanted to include an image on the home page but could not get it to work. I tried putting the image file in the /app/img folder and then using path /app/image/abc.png but the image was not displayed. I tried putting the image in the same file as the markdown and using abc.png but that also did not display the image. Ideally both of these options would be available as well as perhaps ../img/abc.png. The image works for layer information page such as Recreation Trails, in which case the image is in the same folder as the markdown. Need to make sure whatever is done does not break that.
  3. Also, I was trying to use the info icon image but could not find it in the repository. I searched for "png" and other file extensions. Where do those icon files exist?
  4. Markdown formatting of table headers seems to vary. The style should probably use the same font as other text, but larger and bold. There seems to be a difference in font size for the home page and map information for basin page, or maybe I'm imagining this?
Nightsphere commented 4 years ago

Addressing the above issue as follows:

  1. I have pushed with some changes for now, but I'll keep looking into setting the margins for a div dynamically more. Right now the margin sizing is better than it used to be, but can be better in the future.
  2. I got a picture to show up in the home page by using ![ ](assets/app/img/file.png) so hopefully that will fix the issue
  3. I looked into how font-awesome works, and apparently they use fonts/unicode somehow? I looked in the font-awesome npm package in node_modules, and didn't find much. Other than some binary files, they have some fancy .scss files that they use. The only reference I could find for the info circle was 
    .fa-info-circle:before {
  content: "\f05a";
}

    Unfortunately I'm not quite sure what this scss file does or can do, and I'd have to do some more research.

  4. I changed how showdown table headers are displayed using font, font weight, font size, etc.. Justin still has some CSS sprinkled throughout the InfoMapper that overrides all fonts, and I didn't want to change them all if it changed font I didn't want changed. I'll look into this later.
smalers commented 4 years ago

Why do I need to indicate image locations relative to assets. For the Recreation - Trails page I can specify the location relative to the that of the markdown file. We've been trying to avoid putting /assets/app in any paths and treating app as the root for absolute paths. Please check.

Nightsphere commented 4 years ago

The new changes have been pushed and merged. Images from the home page, content pages, and the Information tab markdown files can have either absolute paths, or relative paths to where the markdown file resides.

Nightsphere commented 4 years ago

I believe the functionality of this issue has been done, including the fonts in Showdown converted text. Closing the issue.