user_courses.html

app/controllers/users_controller.rb

@@ -209,8 +209,6 @@ class UsersController < ApplicationController
     ## 判断课程是否过期 [需封装]
     @memberships_doing = []
     @memberships_done  = []
-    @OwningCouses =[]
-    @JoinCouses=[]
     now_time = Time.now.year
     @memberships.map { |e|
       end_time = e.project.course_extra.get_time.year
@@ -220,12 +218,6 @@ class UsersController < ApplicationController
       else
         @memberships_doing.push e
       end
-
-      if  e.project.course_extra.tea_id == User.current.id
-        @OwningCouses.push e
-      else
-        @JoinCouses.push e
-      end
     }
     # respond_to do |format|
       # format.html

app/views/users/_course_list_have_entity.html.erb

@@ -0,0 +1,40 @@
+<div class="user_course_list">
+  <div class="menu">
+  <%= link_to "#{l(:label_course_new)}", new_project_path(course: 1, project_type: 1), class: 'icon icon-add' if @user == User.current %>
+    <ul>
+      <li mode='doing' class="on">进行中</li>
+      <li mode='end'>已完结</li>
+    </ul>
+  </div>
+
+  <div class="dyn_list_wrapper" mode='doing'>
+    <div class='created_course'>
+      <%= render :partial => 'course_form', :locals => {:memberships => @memberships_doing} %>
+    </div>
+  </div>
+
+  <div class="dyn_list_wrapper hidden" mode='end'>
+    <div class="created_course ">
+      <%= render :partial => 'course_form', :locals => {:memberships => @memberships_done} %>
+    </div>
+  </div>
+</div>
+
+<script type="text/javascript">
+$(document).ready(function() {
+  var $menu = $('.user_course_list .menu');
+  var $li_tags = $menu.find('[mode]');
+  var $dyn_list = $('.dyn_list_wrapper');
+
+  $menu.find('[mode]').each(function(index, el) {
+    $(el).click(function() {
+      mode = $(el).attr('mode');
+      $menu.find('[mode]').removeClass( "on" );
+      $( this ).addClass( "on" );
+      var wrapper = $('[mode='+mode+']')
+      $dyn_list.addClass( "hidden" );
+      wrapper.removeClass('hidden')
+    })
+  });
+});
+</script>

app/views/users/_my_course.html.erb

@@ -1,5 +1,5 @@
 <div class="content-title-top">
-<% if @memberships.empty? %>
+  <% if @memberships.empty? %>
       <% if @user != User.current %>
           <p class="font_description">
             <%= l(:label_project_course_un) %>
@@ -7,32 +7,10 @@
       <% else %>
           <p class="font_description">
             <!--teacher could create the course directly-->
-			<%= l(:label_project_course_unadd) %><%= link_to"#{l(:label_course_new)}",{:controller=>'projects',:action=>'new', :course => 1, :project_type => 1}, :class => 'icon icon-add' %>									
+            <%= l(:label_project_course_unadd) %><%= link_to "#{l(:label_course_new)}", {:controller => 'projects', :action => 'new', :course => 1, :project_type => 1}, :class => 'icon icon-add' %>
           </p>
       <% end %>
-<% else %>
-	<p>
- 	<span><%=l(:label_course_doing)%>(<%=@memberships_doing.count%>)</span>
-	<%= link_to"#{l(:label_course_new)}",{:controller=>'projects',:action=>'new', :course => 1, :project_type => 1}, :class => 'icon icon-add'  if @user == User.current %>
-	</p>
-	<p>
-       <%=  l(:label_created_course) %>
-      <div>   <%= render :partial => 'course_form', :locals => {:memberships => @OwningCouses}%>
-	</div>     </p>
-      <div style="clear:both;"></div>
-      <p> <%=  l(:label_joined_course) %>
-      <div> <%= render :partial => 'course_form', :locals => {:memberships => @JoinCouses}%>
-      </div>     </p>
-
-	<div style="clear:both;"></div>
-
-	<p>
-	<%= link_to l(:label_course_done)+"("+@memberships_done.count.to_s+")", 'javascript:void(0);', :onclick => '$("#courses_history_block").slideToggle(400);' , style:"color:#666666" if User.current.logged? %>
-	</p>
-
-	<div id="courses_history_block" class="courses_history hidden" >
-		<%= render :partial => 'course_form', :locals => {:memberships => @memberships_done}%>
-	</div>
-
-<% end %>	
+  <% else %>
+    <%= render partial: 'course_list_have_entity' %>
+  <% end %>
 </div>

public/stylesheets/application.css

@@ -493,7 +493,6 @@ a.bids_user {
 }
 
 .line{
-	width: 905px;
 	height: 1px;
 	margin: 0px;
 	background-color: #cacaca;

public/stylesheets/nyan.css

@@ -1,14 +1,17 @@
 /* TODO: base/common/page 准备封装一些基本样式组合调用 参考YUI
 *******************************************************************************/
-span[id^=valid_user]{
+span[id^=valid_user] {
     padding-left: 10px;
 }
-.red{
+
+.red {
     color: red;
 }
-.green{
+
+.green {
     color: green;
 }
+
 .border_box {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
@@ -1007,7 +1010,7 @@ div.issue {
 }
 
 #ver-zebra1 td {
-    padding: 8px ;
+    padding: 8px;
     border-right: 1px solid #fff;
     border-left: 1px solid #fff;
     color: #669;
@@ -1133,10 +1136,12 @@ div.pagination {
     -o-transition: 1s width;
     transition: 1s width;
 }
-.all_browse_div table .description{
+
+.all_browse_div table .description {
     border-bottom: 1px solid #efffff;
 }
-.all_browse_div table td{
+
+.all_browse_div table td {
     vertical-align: middle;
 }
 
@@ -1146,6 +1151,7 @@ div.pagination {
     margin: 0;
     padding: 0;
 }
+
 .softapplication-img {
     margin: 5px auto;
     width: 860px;
@@ -1154,25 +1160,29 @@ div.pagination {
     box-shadow: 5px 5px 20px 5px #ccc;
     border-radius: 5px;
 }
+
 .soft-application {
     width: 326px;
     height: 580px;
 }
-.softapplication-img .title{
+
+.softapplication-img .title {
     width: 326px;
     position: absolute;
     left: 0;
     bottom: 0;
 }
-.softapplication-img .title a{
+
+.softapplication-img .title a {
     display: block;
     text-decoration: none;
     color: #fff;
     font-size: 20px;
     padding: 20px;
-    background: rgba(0,0,0,0.5);
+    background: rgba(0, 0, 0, 0.5);
 }
-.softapplication-img li{
+
+.softapplication-img li {
     list-style-type: none;
     position: relative;
     float: left;
@@ -1182,11 +1192,98 @@ div.pagination {
     -ms-transition: all 0.5s;
     -o-transition: all 0.5s;
     transition: all 0.5s;
-    box-shadow: -1px 0 3px 1px rgba(0,0,0,0.3);
+    box-shadow: -1px 0 3px 1px rgba(0, 0, 0, 0.3);
 }
-.softapplication-img ul:hover li{
+
+.softapplication-img ul:hover li {
     width: 160px;
 }
-.softapplication-img ul li:hover{
+
+.softapplication-img ul li:hover {
     width: 326px;
 }
+
+/* user_courses
+*******************************************************************************/
+.user_course_list {
+    margin: 0;
+    padding: 0;
+    position: relative;
+    margin-top: -15px;
+}
+
+.user_course_list .menu{
+    display: block;
+    background-color: #f9f9f9;
+    border-radius: 2px 2px 0 0;
+    position: relative;
+    height: 40px;
+    line-height: 40px;
+    border-bottom: 1px solid #ddd;
+    text-align: left;
+    margin-left: -10px;
+    padding-left: 15px;
+}
+
+.user_course_list .menu:after {
+    content: ".";
+    visibility: hidden;
+    display: block;
+    height: 0;
+    clear: both;
+}
+
+.user_course_list .menu ul {
+    margin: 0;
+    padding: 0;
+    float: right;
+    margin-right: 30px; 
+}
+.user_course_list .menu ul {
+}
+
+.user_course_list .menu li {
+    display: inline-block;
+    position: relative;
+    width: 40px;
+    height: 40px;
+    line-height: 40px;
+    cursor: pointer;
+}
+
+.user_course_list .menu li:hover {
+    color: #00a1d6;
+}
+
+.user_course_list .menu li.on {
+    color: #00a1d6;
+    font-weight: bold;
+}
+
+
+.user_course_list .list_top {
+    margin: 20px auto 0px;
+}
+
+.user_course_list .created_course {
+    position: relative;
+    display: block;
+    padding-top: 20px;
+}
+
+.user_course_list .created_course:after {
+    content: ".";
+    visibility: hidden;
+    display: block;
+    height: 0;
+    clear: both;
+}
+
+.user_course_list .created_course .field {
+    position: absolute;
+    display: inline-block;
+    color: rgb(213, 213, 213);
+    top: 0;
+    right: 5%;
+}
+