Introduce styles for generic-lists

* Replace definition lists with ul tags on activities
pull/3994/head
Magdalena Kafka 9 years ago
parent 6d8fac2f65
commit f4df0b124a
  1. 21
      app/assets/stylesheets/_misc_legacy.sass
  2. 49
      app/assets/stylesheets/content/_list.lsg
  3. 67
      app/assets/stylesheets/content/_list.sass
  4. 1
      app/assets/stylesheets/default.css.sass
  5. 32
      app/views/activities/index.html.erb

@ -124,37 +124,21 @@ div
p
margin-top: 0
margin-bottom: 1em
&#activity dl
margin-left: 2em
#search-results
margin-left: 2em
div#activity dd, #search-results dd
#search-results dd
margin-bottom: 1em
padding-left: 18px
font-size: 0.9em
div#activity
dt
&.me .time
border-bottom: 1px solid #999
.time
color: #777
font-size: 80%
dd .description
font-style: italic
#search-results dd .description
font-style: italic
div#activity span.project:after, #search-results span.project:after
content: " -"
div#activity dd span.description
display: block
color: #808080
#search-results dd
span.description
display: block
@ -325,9 +309,6 @@ input#user_search
&.attributes .label
font-weight: bold
#activity dt
clear: left
.journal-link
float: right

@ -0,0 +1,49 @@
# Generic lists
```
<ul class="generic-list">
<li class="work-package-edit">
<div class="title">
<span class="icon-context icon-work_package-edit"></span>
<span class="hidden-for-sighted">Edit work package</span>
<span class="time">16:00</span>
<a href="#">Phase #15: Go-Live (To be scheduled)</a>
</div>
<div class="description">Lorem ipsum</div>
<div class="author">
<img class="avatar-mini" src="/assets/default-avatar.png" />
Anonymus
</div>
</li>
<li class="news me">
<div class="title">
<span class="icon-context icon-news"></span>
<span class="hidden-for-sighted">News</span>
<span class="time">09:10</span>
<a href="#">Lorem ipsum dolor</a>
</div>
<div class="description"></div>
<div class="author">
<img src="http://gravatar.com/avatar/cb4f282fed12016bd18a879c1f27ff97" class="avatar-mini" />
<a href="#">Reinhold Weber</a>
</div>
</li>
<li class="message me">
<div class="title">
<span class="icon-context icon-message"></span>
<span class="hidden-for-sighted">Edit message</span>
<span class="time">20:24</span>
<a href="#">Demo Forum: RE: Hello world!</a>
</div>
<div class="description">
Reinhold Weber wrote:<br>
> Lorem ipsum dolor sit amet
</div>
<div class="author">
<img src="http://gravatar.com/avatar/cb4f282fed12016bd18a879c1f27ff97" class="avatar-mini" />
<a href="#">Reinhold Weber</a>
</div>
</li>
</ul>
```

@ -0,0 +1,67 @@
//-- copyright
// OpenProject is a project management system.
// Copyright (C) 2012-2015 the OpenProject Foundation (OPF)
//
// This program is free software; you can redistribute it and/or
// modify it under the terms of the GNU General Public License version 3.
//
// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
// Copyright (C) 2006-2013 Jean-Philippe Lang
// Copyright (C) 2010-2013 the ChiliProject Team
//
// This program is free software; you can redistribute it and/or
// modify it under the terms of the GNU General Public License
// as published by the Free Software Foundation; either version 2
// of the License, or (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program; if not, write to the Free Software
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
//
// See doc/COPYRIGHT.rdoc for more details.
//++
.generic-list
margin: 0
padding: 0
li
list-style: none
margin-bottom: 24px
.title
font-weight: bold
.icon-context:before
vertical-align: -2px
.me
.time
border-bottom: 1px solid $gray-dark
.time,
.description
color: $gray-dark
.time,
.description,
.author
font-size: 0.9em
.description,
.author
padding-left: 30px
.description
font-style: italic
.author
margin-bottom: 1em
.avatar-mini
margin: 0 10px 0 0

@ -71,6 +71,7 @@
@import content/attributes_table
@import content/information_section
@import content/widget_box
@import content/list
@import content/work_package_details/activities_tab
@import content/work_package_details/attachments_tab

@ -36,23 +36,25 @@ See doc/COPYRIGHT.rdoc for more details.
<div id="activity">
<% @events_by_day.keys.sort.reverse.each do |day| %>
<h3><%= format_activity_day(day) %></h3>
<dl>
<ul class="generic-list">
<% @events_by_day[day].sort {|x,y| y.event_datetime <=> x.event_datetime }.each do |e| -%>
<dt class="<%= e.event_type %> <%= User.current.logged? && e.respond_to?(:event_author) && User.current == e.event_author ? 'me' : nil %>">
<% event_type = e.event_type == 'meeting' ? 'meetings' : e.event_type %>
<% event_type = e.event_type == 'cost_object' ? 'budget' : event_type %>
<%= icon_wrapper("icon-context icon-#{event_type}", e.event_name) %>
<%= avatar(e.event_author) if e.respond_to?(:event_author) %>
<span class="time"><%= format_time(e.event_datetime.to_time, false) %></span>
<%= content_tag('span', link_to(e.project.name, e.project), class: 'project') if (@project.nil? || @project != e.project) && e.project %>
<%= link_to format_activity_title(e.event_title), e.event_path%>
</dt>
<dd>
<span class="description"><%= format_activity_description(e.event_description) %></span>
<span class="author"><%= link_to_user(e.event_author) if e.respond_to?(:event_author) %></span>
</dd>
<li class="<%= e.event_type %> <%= User.current.logged? && e.respond_to?(:event_author) && User.current == e.event_author ? 'me' : nil %>">
<div class="title">
<% event_type = e.event_type == 'meeting' ? 'meetings' : e.event_type %>
<% event_type = e.event_type == 'cost_object' ? 'budget' : event_type %>
<%= icon_wrapper("icon-context icon-#{event_type}", e.event_name) %>
<span class="time"><%= format_time(e.event_datetime.to_time, false) %></span>
<%= content_tag('span', link_to(e.project.name, e.project), class: 'project') if (@project.nil? || @project != e.project) && e.project %>
<%= link_to format_activity_title(e.event_title), e.event_path%>
</div>
<div class="description"><%= format_activity_description(e.event_description) %></div>
<div class="author">
<%= avatar(e.event_author, {class: 'avatar-mini'}) if e.respond_to?(:event_author) %>
<%= link_to_user(e.event_author) if e.respond_to?(:event_author) %>
</div>
</li>
<% end -%>
</dl>
</ul>
<% end -%>
</div>

Loading…
Cancel
Save