CDLUC3 / dmptool

DMPTool version of the DMPRoadmap codebase
https://dmptool.org
MIT License
56 stars 13 forks source link

V5.16 rc2 #594

Closed briri closed 1 month ago

briri commented 1 month ago
jupiter007 commented 1 month ago

Hi Brian. The changes look good to me.

jupiter007 commented 1 month ago

@briri I'm wondering whether the "close" button might look better if outside of the content div.

I've included a screenshot of the before and after

image

I also added a hover effect on the close button to make it more visually interactive.

If you like the change, you can just update the css to be:

#quick-view-view h3 .form-actions button {
  border-radius: 50%;
  position: absolute;
  right: 10px;
  top: 10px;
  height: 32px;
  width: 32px;
  font-size: .8rem;
  padding: 0;
}

#quick-view-view h3 .form-actions button:hover {
  background-color: #ccc;
}
jupiter007 commented 1 month ago

Also, since we're using Sass, you can put the css in the sass nested format for more readability:

#quick-view-view {
  h3 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: nowrap;

    .form-actions {
      margin-top: 0;
      padding-top: 0;
      padding-left: 0;

      button {
        border-radius: 50%;
        position: absolute;
        right: 10px;
        top: 10px;
        height: 32px;
        width: 32px;
        font-size: .8rem;
        padding: 0;

        &:hover {
          background-color: #ccc;
        }
      }
    }
  }

  p.preview-grant {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}