Project

General

Profile

Actions
Copy link

Patch #17924

closed

Structured Document list for more flexible UI design with CSS

Added by Yonghwan SO about 10 years ago. Updated almost 3 years ago.

Status:
Closed
Priority:
Normal
Assignee:
Go MAEDA
Category:
Documents
Target version:
5.0.0
Start date:
Due date:
% Done:

0%

Estimated time:

Description

Current version of Document list is built with h4, p, and div for title, updated date and description on same depth with parent h3 in HTML structure.

h2. Document
h3. Technical documentation
h4. My First Document
p. updated time
div. description
h4. My Second Document
p. updated time
div. description

In this structure, page customizing is not easy and list scroll is heavy if there is so many documents. and someone like me want to see more structured view like:

h2. Document
` h3. Technical documentation
  | h4. My First Document
  | | p. updated time
  | ` div. description
  ` h4. My Second Document
    | p. updated time
    ` div. description

I Think, sometimes table view is more fit to document list and sometimes current Page-like view with indents is more fit for some project. so using div is more flexible for customizing the view per usage.

Attached patch includes view patch to add hirerachy for document elements and example css for alternate style is for table like inline view.

please consider this patch. I will make pull request on github too.

Files

Download all files
structured-document-list.patch (1.05 KB) structured-document-list.patch Yonghwan SO, 2014-09-22 05:15
0001-Structure-the-document-list.patch (2.52 KB) 0001-Structure-the-document-list.patch Mizuki ISHIKAWA, 2021-08-17 02:33
0002-Structure-the-document-show-page.patch (1.9 KB) 0002-Structure-the-document-show-page.patch Mizuki ISHIKAWA, 2021-08-17 02:33
0001-Structure-the-document-list.patch (4.9 KB) 0001-Structure-the-document-list.patch Mizuki ISHIKAWA, 2021-08-17 03:30
0002-Structure-the-document-show-page.patch (1.9 KB) 0002-Structure-the-document-show-page.patch Mizuki ISHIKAWA, 2021-08-17 03:30
0001-Structure-the-document-list.patch (4.88 KB) 0001-Structure-the-document-list.patch Mizuki ISHIKAWA, 2022-01-26 02:36
grouping_options.png (14.7 KB) grouping_options.png Mizuki ISHIKAWA, 2022-01-26 02:45
Actions
Copy link
 #1

Updated by Yonghwan SO about 10 years ago

Oops! I read wiki Contribute now. I will not make pull request on github. sorry.

Actions
Copy link
 #2

Updated by Mizuki ISHIKAWA over 3 years ago

+1
I'm developing a Redmine theme. Document module pages are difficult to customize.

I will attach a patch with a slightly increased hierarchy in consideration of customizing with the theme. I also added a class for each element.

h2. Document
div#document-list
  div.document-group
    h3.group-name Technical documentation
    div.document-item
      h4.title My First Document
      div.updated-on updated time
      div.description Description
    div.document-item
      h4.title My Second Document
      div.updated-on updated time
      div.description Description2
  div.document-group
    div.document-item
      ...

I think the document list and how the document display page should be structured.
0002-Structure-the-document-show-page.patch changes the structure of the document display page as follows:

h2.title My First Document
div#document-details
  div.attributes
    div.category-name
    div.created-on
    ul.document-custom-field-values
      li
  div.description
  div.attachemnts-area

Actions
Copy link
 #4

Updated by Mischa The Evil over 3 years ago

汪婷 汪: This seems a good improvement to me. Maybe you can add some screenshots to show the actual result?

Actions
Copy link
 #5

Updated by Mizuki ISHIKAWA over 3 years ago

Mischa The Evil wrote:

汪婷 汪: This seems a good improvement to me. Maybe you can add some screenshots to show the actual result?

Thanks for your feedback.
This patch changes the HTML structure, not the design of the documentation pages.
I think that attaching a screenshot of the screen is not helpful for the review as it is the same view as before the change.

Actions
Copy link
 #6

Updated by Mischa The Evil over 3 years ago

Mizuki ISHIKAWA wrote:

Mischa The Evil wrote:

汪婷 汪: This seems a good improvement to me. Maybe you can add some screenshots to show the actual result?

[...]
This patch changes the HTML structure, not the design of the documentation pages.
I think that attaching a screenshot of the screen is not helpful for the review as it is the same view as before the change.

My bad, you're right. I got distracted and finally mislead by the combination of the words increased hierarchy along with the indentation of the HTML structure examples given in the initial post and in your note. Nevermind me asking about this...

Actions
Copy link
 #7

Updated by Go MAEDA over 3 years ago

  • Category changed from UI to Documents
  • Target version set to Candidate for next major release
Actions
Copy link
 #8

Updated by Go MAEDA over 3 years ago

  • Target version changed from Candidate for next major release to 5.0.0

Setting the target version to 5.0.0.

Actions
Copy link
 #9

Updated by Go MAEDA almost 3 years ago

Thank you for posting the patch. I noticed the following points:

  • The CSS class "document-group-*" that includes the document category name does not work for Unicode characters. For example, if a document category has a name "未分類" (means "uncategorized" in Japanese), the class name will be "document-group-". If all category names are consist of Unicode characters, they will have the same class name "document-group-". How about using group.id instead of group.to_s.parameterize?
  • I think it is better to rename "document-group-*" to "document-category" (see source:trunk/config/locales/en.yml#L1316)
Actions
Copy link
 #10

Updated by Mizuki ISHIKAWA almost 3 years ago

Updated 0001-Structure-the-document-list.patch.

Go MAEDA wrote:

  • The CSS class "document-group-*" that includes the document category name does not work for Unicode characters. For example, if a document category has a name "未分類" (means "uncategorized" in Japanese), the class name will be "document-group-". If all category names are consist of Unicode characters, they will have the same class name "document-group-". How about using group.id instead of group.to_s.parameterize?

Thank you for your feedback.
I tried to use group.id, but when the sort condition is title or date, it returns a String object.
In particular, it was difficult to convert the title group to Unicode, so I decided not to give a unique class name to the group.
Even without class names like document-group-{}, I think the clean structure will be enough to make CSS easier to write.

The document category is one of the grouping options. You can also group by Author, Date, and Title. Therefore, I don't think it is appropriate to change .document-group to .document-category.

Actions
Copy link
 #11

Updated by Go MAEDA almost 3 years ago

  • Status changed from New to Closed
  • Assignee set to Go MAEDA

Committed the patch. Thank you.

Actions
Copy link

Also available in: Atom PDF