TheDude
/
openproject
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use HTML DL element instead of UL

Browse Source
pull/2099/head
Hagen Schink 10 years ago
parent 8c83c5c7cd
commit 87a9cb5c46
3 changed files with 120 additions and 147 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 180
      app/assets/stylesheets/content/work_package_details/_overview_tab.md
  2. 29
      app/assets/stylesheets/content/work_package_details/_overview_tab.sass
  3. 58
      public/templates/work_packages/tabs/overview.html

180
app/assets/stylesheets/content/work_package_details/_overview_tab.md
Unescape View File

@ -7,132 +7,112 @@
<div class="detail-panel-attributes-group">
<h3>Details</h3>
<ul>
<li>
<div class="work-package-attributes--label">Status</div>
<div class="work-package-attributes--value-container">
<div class="work-package-attributes--value -text">
<span title="New">New</span>
</div>
<dl>
<dt class="work-package-attributes--label">Status</dt>
<dd class="work-package-attributes--value-container">
<div class="work-package-attributes--value -text">
<span title="New">New</span>
</div>
</li>
<li>
<div class="work-package-attributes--label">Percentage done</div>
<div class="work-package-attributes--value-container">
<div class="work-package-attributes--value -text">
<span title="0">0</span>
</div>
</dd>
<dt class="work-package-attributes--label">Percentage done</dt>
<dd class="work-package-attributes--value-container">
<div class="work-package-attributes--value -text">
<span title="0">0</span>
</div>
</li>
<li>
<div class="work-package-attributes--label">Date</div>
<div class="work-package-attributes--value-container">
<div class="work-package-attributes--value -text">
<span title="">-</span>
</div>
</dd>
<dt class="work-package-attributes--label">Date</dt>
<dd class="work-package-attributes--value-container">
<div class="work-package-attributes--value -text">
<span title="">-</span>
</div>
</li>
<li>
<div class="work-package-attributes--label">Priority</div>
<div class="work-package-attributes--value-container">
<div class="work-package-attributes--value -text">
<span title="Normal">Normal</span>
</div>
</dd>
<dt class="work-package-attributes--label">Priority</dt>
<dd class="work-package-attributes--value-container">
<div class="work-package-attributes--value -text">
<span title="Normal">Normal</span>
</div>
</li>
</ul>
</dd>
</dl>
</div>
<div class="detail-panel-attributes-group">
<h3>People</h3>
<ul>
<li>
<div class="work-package-attributes--label">Assignee</div>
<div class="work-package-attributes--value-container">
<div class="work-package-attributes--value -user">
<span class="user-avatar--container">
<img class="user-avatar--avatar" alt="Avatar" title="testing.long.emails@openproject.org" src="http://gravatar.com/avatar/ae4878114ca94594589106efaad8890e?default=wavatar&amp;secure=false">
<span class="user-avatar--user-with-role">
<span class="user-avatar--user">
<a class="user-avatar--user-link" href="#">testing.long.emails@openproject.org</a>
</span>
<dl>
<dt class="work-package-attributes--label">Assignee</dt>
<dd class="work-package-attributes--value-container">
<div class="work-package-attributes--value -user">
<span class="user-avatar--container">
<img class="user-avatar--avatar" alt="Avatar" title="testing.long.emails@openproject.org" src="http://gravatar.com/avatar/ae4878114ca94594589106efaad8890e?default=wavatar&amp;secure=false">
<span class="user-avatar--user-with-role">
<span class="user-avatar--user">
<a class="user-avatar--user-link" href="#">testing.long.emails@openproject.org</a>
</span>
</span>
</div>
</span>
</div>
</li>
<li>
<div class="work-package-attributes--label">Responsible</div>
<div class="work-package-attributes--value-container">
<div class="work-package-attributes--value -user">
<span class="user-avatar--container">
<img class="user-avatar--avatar" alt="Avatar" title="testing.long.emails+filter-junk-away@openproject.org" src="http://gravatar.com/avatar/ae4878114ca94594589106efaad8890e?default=wavatar&amp;secure=false">
<span class="user-avatar--user-with-role">
<span class="user-avatar--user">
<a class="user-avatar--link" href="#">Karl-Theodor zu Guttenberg (copy)</a>
</span>
<span class="user-avatar--role">
Distinguished Statesman.
Former Minister for Economics and Technology.
</span>
</dd>
<dt class="work-package-attributes--label">Responsible</dt>
<dd class="work-package-attributes--value-container">
<div class="work-package-attributes--value -user">
<span class="user-avatar--container">
<img class="user-avatar--avatar" alt="Avatar" title="testing.long.emails+filter-junk-away@openproject.org" src="http://gravatar.com/avatar/ae4878114ca94594589106efaad8890e?default=wavatar&amp;secure=false">
<span class="user-avatar--user-with-role">
<span class="user-avatar--user">
<a class="user-avatar--link" href="#">Karl-Theodor zu Guttenberg (copy)</a>
</span>
<span class="user-avatar--role">
Distinguished Statesman.
Former Minister for Economics and Technology.
</span>
</span>
</div>
</span>
</div>
</li>
</ul>
</dd>
</dl>
</div>
<div class="detail-panel-attributes-group">
<h3>Other</h3>
<ul>
<li>
<div class="work-package-attributes--label">Custom Float</div>
<div class="work-package-attributes--value-container">
<div class="work-package-attributes--value -float">
<span title="12.00">12.00</span>
</div>
<dl>
<dt class="work-package-attributes--label">Custom Float</dt>
<dd class="work-package-attributes--value-container">
<div class="work-package-attributes--value -float">
<span title="12.00">12.00</span>
</div>
</li>
<li>
<div class="work-package-attributes--label">Custom Integer</div>
<div class="work-package-attributes--value-container">
<div class="work-package-attributes--value -int">
<span title="69">69</span>
</div>
</dd>
<dt class="work-package-attributes--label">Custom Integer</dt>
<dd class="work-package-attributes--value-container">
<div class="work-package-attributes--value -int">
<span title="69">69</span>
</div>
</li>
<li>
<div class="work-package-attributes--label">Custom Description</div>
<div class="work-package-attributes--value-container">
<div class="work-package-attributes--value -text">
<span title="Praesent id est eu velit molestie tincidunt. Quisque non dolor diam. Mauris vitae nunc felis. Integer vehicula molestie vehicula. Aliquam in magna eu lorem interdum tincidunt. Fusce egestas, enim vel luctus vulputate, augue tellus aliquam sem, tincidunt lacinia ante mauris at nisi. Vestibulum a magna et magna viverra efficitur. Vestibulum rhoncus ac ligula eget tristique. Vestibulum enim urna, varius eu turpis eget, pretium placerat neque. Vivamus et facilisis eros. Sed gravida lectus ac velit rutrum euismod. Etiam at ex condimentum, vestibulum elit non, aliquam ex.">
Praesent id est eu velit molestie tincidunt. Quisque non dolor diam. Mauris vitae nunc felis. Integer vehicula molestie vehicula. Aliquam in magna eu lorem interdum tincidunt. Fusce egestas, enim vel luctus vulputate, augue tellus aliquam sem, tincidunt lacinia ante mauris at nisi. Vestibulum a magna et magna viverra efficitur. Vestibulum rhoncus ac ligula eget tristique. Vestibulum enim urna, varius eu turpis eget, pretium placerat neque. Vivamus et facilisis eros. Sed gravida lectus ac velit rutrum euismod. Etiam at ex condimentum, vestibulum elit non, aliquam ex.
</span>
</div>
</dd>
<dt class="work-package-attributes--label">Custom Description</dt>
<dd class="work-package-attributes--value-container">
<div class="work-package-attributes--value -text">
<span title="Praesent id est eu velit molestie tincidunt. Quisque non dolor diam. Mauris vitae nunc felis. Integer vehicula molestie vehicula. Aliquam in magna eu lorem interdum tincidunt. Fusce egestas, enim vel luctus vulputate, augue tellus aliquam sem, tincidunt lacinia ante mauris at nisi. Vestibulum a magna et magna viverra efficitur. Vestibulum rhoncus ac ligula eget tristique. Vestibulum enim urna, varius eu turpis eget, pretium placerat neque. Vivamus et facilisis eros. Sed gravida lectus ac velit rutrum euismod. Etiam at ex condimentum, vestibulum elit non, aliquam ex.">
Praesent id est eu velit molestie tincidunt. Quisque non dolor diam. Mauris vitae nunc felis. Integer vehicula molestie vehicula. Aliquam in magna eu lorem interdum tincidunt. Fusce egestas, enim vel luctus vulputate, augue tellus aliquam sem, tincidunt lacinia ante mauris at nisi. Vestibulum a magna et magna viverra efficitur. Vestibulum rhoncus ac ligula eget tristique. Vestibulum enim urna, varius eu turpis eget, pretium placerat neque. Vivamus et facilisis eros. Sed gravida lectus ac velit rutrum euismod. Etiam at ex condimentum, vestibulum elit non, aliquam ex.
</span>
</div>
</li>
<li>
<div class="work-package-attributes--label">Custom User</div>
<div class="work-package-attributes--value-container">
<div class="work-package-attributes--value -user">
<span class="user-avatar--container">
<img class="user-avatar--avatar" alt="Avatar" title="Max Mustermann" src="http://gravatar.com/avatar/ae4878114ca94594589106efaad8890e?default=wavatar&amp;secure=false">
<span class="user-avatar--user-with-role">
<span class="user-avatar--user">
<a class="user-avatar--user-link" href="#">Max Mustermann</a>
</span>
<span class="user-avatar--role">
Fully Generic Person
</span>
</dd>
<dt class="work-package-attributes--label">Custom User</dt>
<dd class="work-package-attributes--value-container">
<div class="work-package-attributes--value -user">
<span class="user-avatar--container">
<img class="user-avatar--avatar" alt="Avatar" title="Max Mustermann" src="http://gravatar.com/avatar/ae4878114ca94594589106efaad8890e?default=wavatar&amp;secure=false">
<span class="user-avatar--user-with-role">
<span class="user-avatar--user">
<a class="user-avatar--user-link" href="#">Max Mustermann</a>
</span>
<span class="user-avatar--role">
Fully Generic Person
</span>
</span>
</div>
</span>
</div>
</li>
</ul>
</dd>
</dl>
</div>
</div>
```

29
app/assets/stylesheets/content/work_package_details/_overview_tab.sass
Unescape View File

@ -38,16 +38,8 @@
margin: 15px 0 0 0
width: 100%
ul
list-style-type: none
dl
margin: 0 0 24px 0
padding: 0
li
margin: 0 0 8px 0
padding: 0
+display(flex)
width: 100%
.detail-panel-attributes-toggler
float: left
@ -56,27 +48,26 @@
text-align: center
border-bottom: 1px solid #ddd
@mixin work-package-attribute-margin
margin: 0 0 12px 0
.work-package-attributes--label
@include work-package-attribute-margin
font-weight: bold
margin: 0 0 7px 0
padding: 0 4px 0 0
flex: 1
float: left
clear: left
width: 33%
text-overflow: ellipsis
overflow: hidden
white-space: nowrap
.work-package-attributes--value-container
@include work-package-attribute-margin
padding: 0 4px 0 0
display: block
flex: 2
overflow: hidden
.work-package-attributes--value
&.-dynamic,
&.-version,
&.-category,
&.-text,
+ellipsis
&.-user
overflow: hidden

58
public/templates/work_packages/tabs/overview.html
Unescape View File

@ -12,36 +12,38 @@
<div ng-repeat="group in groupedAttributes" ng-hide="isGroupEmpty(group) && toggleStates.hideAllAttributes" class="detail-panel-attributes-group">
<h3 ng-bind="I18n.t('js.work_packages.property_groups.' + group.groupName)"></h3>
<ul>
<li ng-repeat="propertyData in group.attributes"
ng-show="propertyData.value || !toggleStates.hideAllAttributes">
<div class="work-package-attributes--label" ng-bind="propertyData.label"></div>
<div class="work-package-attributes--value-container" ng-switch="propertyData.value">
<div ng-switch-when="null" class="work-package-attributes--value">
<empty-element></empty-element>
</div>
<div ng-switch-default ng-switch="propertyData.format">
<div ng-class="['work-package-attributes--value', '-' + propertyData.format]">
<user-field ng-switch-when="user" user="propertyData.value"></user-field>
<span ng-switch-when="dynamic" work-package-dynamic-attribute
html-element="propertyData.value"
work-package="workPackage">
</span>
<span ng-switch-when="version">
<a ng-if="propertyData.value.viewable" title="{{propertyData.value.title}}" ng-href="{{propertyData.value.href}}">{{propertyData.value.title}}</a>
<span ng-if="!propertyData.value.viewable" title="{{propertyData.value.title}}">{{propertyData.value.title}}</span>
</span>
<span ng-switch-when="category">{{ propertyData.value.props.name }}</span>
<span ng-switch-default
ng-bind="(propertyData.value !== undefined) ? propertyData.value : '-'"
ng-attr-title="{{propertyData.value}}"/>
</div>
<dl>
<dt ng-repeat-start="propertyData in group.attributes"
ng-show="propertyData.value || !toggleStates.hideAllAttributes"
ng-bind="propertyData.label"
class="work-package-attributes--label">
</dt>
<dd ng-repeat-end
ng-show="propertyData.value || !toggleStates.hideAllAttributes"
ng-switch="propertyData.value"
class="work-package-attributes--value-container">
<div ng-switch-when="null" class="work-package-attributes--value">
<empty-element></empty-element>
</div>
<div ng-switch-default ng-switch="propertyData.format">
<div ng-class="['work-package-attributes--value', '-' + propertyData.format]">
<user-field ng-switch-when="user" user="propertyData.value"></user-field>
<span ng-switch-when="dynamic" work-package-dynamic-attribute
html-element="propertyData.value"
work-package="workPackage">
</span>
<span ng-switch-when="version">
<a ng-if="propertyData.value.viewable" title="{{propertyData.value.title}}" ng-href="{{propertyData.value.href}}">{{propertyData.value.title}}</a>
<span ng-if="!propertyData.value.viewable" title="{{propertyData.value.title}}">{{propertyData.value.title}}</span>
</span>
<span ng-switch-when="category">{{ propertyData.value.props.name }}</span>
<span ng-switch-default
ng-bind="(propertyData.value !== undefined) ? propertyData.value : '-'"
ng-attr-title="{{propertyData.value}}"/>
</div>
</div>
</li>
</ul>
</dd>
</dl>
</div>
<panel-expander if="anyEmptyWorkPackageValue()"

Write Preview
Loading…
Cancel
Save