Introduce styles for generic-lists

* Replace definition lists with ul tags on activities
9 years ago · f4df0b124a
parent 6d8fac2f65
commit f4df0b124a
5 changed files with 135 additions and 35 deletions
--- a/app/assets/stylesheets/_misc_legacy.sass
+++ b/app/assets/stylesheets/_misc_legacy.sass
@ -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

--- a/app/assets/stylesheets/content/_list.lsg
+++ b/app/assets/stylesheets/content/_list.lsg
@ -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>
+
+```
--- a/app/assets/stylesheets/content/_list.sass
+++ b/app/assets/stylesheets/content/_list.sass
@ -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
--- a/app/assets/stylesheets/default.css.sass
+++ b/app/assets/stylesheets/default.css.sass
@ -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
--- a/app/views/activities/index.html.erb
+++ b/app/views/activities/index.html.erb
@ -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>