mission list page layout start

jamesperet 10 anos atrás
pai
commit
13851e1c35

+ 57 - 0
app/assets/stylesheets/bootstrap_and_overrides.css.less

@@ -84,4 +84,61 @@
84 84
 
85 85
 .form-bordered {
86 86
 	margin-bottom: 0px;
87
+}
88
+
89
+
90
+// Avalanche Theme
91
+
92
+.thumbnail {
93
+	display: block;
94
+	line-height: 20px;
95
+	border: 2px solid #D4D4DE;
96
+	border-radius: 4px; 
97
+	padding: 0px;
98
+	-webkit-transition: all 0.2s ease-in-out;
99
+	-moz-transition: all 0.2s ease-in-out;
100
+	-o-transition: all 0.2s ease-in-out;
101
+	transition: all 0.2s ease-in-out;
102
+}
103
+
104
+.thumbnail h3 {
105
+	font-family: Avenir-HeavyOblique;
106
+	font-size: 24px;
107
+	color: #000000;
108
+	line-height: 33px;
109
+	margin-bottom: 0px;
110
+	line-height: 28px;
111
+}
112
+
113
+.thumbnail p {
114
+	font-family: Avenir-Medium;
115
+	font-size: 16px;
116
+	color: #000000;
117
+	line-height: 22px;
118
+}
119
+
120
+.thumbnail div {
121
+	padding: 4px;
122
+}
123
+
124
+.thumbnail .mission-director-name {
125
+	margin-bottom: 8px;
126
+	/* James Peret: */
127
+	font-family: Avenir-Medium;
128
+	font-size: 14px;
129
+	color: #000000;
130
+	line-height: 22px;
131
+}
132
+
133
+.mission-status {
134
+	padding-left: 6px;
135
+	padding-right: 6px;
136
+	font-family: Avenir-Oblique;
137
+	font-size: 18px;
138
+	color: #000000;
139
+	line-height: 28px;
140
+}
141
+
142
+.status-planning {
143
+	background-color: #D4D4DE;
87 144
 }

+ 0 - 69
app/assets/stylesheets/scaffolds.css.scss

@@ -1,69 +0,0 @@
1
-body {
2
-  background-color: #fff;
3
-  color: #333;
4
-  font-family: verdana, arial, helvetica, sans-serif;
5
-  font-size: 13px;
6
-  line-height: 18px;
7
-}
8
-
9
-p, ol, ul, td {
10
-  font-family: verdana, arial, helvetica, sans-serif;
11
-  font-size: 13px;
12
-  line-height: 18px;
13
-}
14
-
15
-pre {
16
-  background-color: #eee;
17
-  padding: 10px;
18
-  font-size: 11px;
19
-}
20
-
21
-a {
22
-  color: #000;
23
-  &:visited {
24
-    color: #666;
25
-  }
26
-  &:hover {
27
-    color: #fff;
28
-    background-color: #000;
29
-  }
30
-}
31
-
32
-div {
33
-  &.field, &.actions {
34
-    margin-bottom: 10px;
35
-  }
36
-}
37
-
38
-#notice {
39
-  color: green;
40
-}
41
-
42
-.field_with_errors {
43
-  padding: 2px;
44
-  background-color: red;
45
-  display: table;
46
-}
47
-
48
-#error_explanation {
49
-  width: 450px;
50
-  border: 2px solid red;
51
-  padding: 7px;
52
-  padding-bottom: 0;
53
-  margin-bottom: 20px;
54
-  background-color: #f0f0f0;
55
-  h2 {
56
-    text-align: left;
57
-    font-weight: bold;
58
-    padding: 5px 5px 5px 15px;
59
-    font-size: 12px;
60
-    margin: -7px;
61
-    margin-bottom: 0px;
62
-    background-color: #c00;
63
-    color: #fff;
64
-  }
65
-  ul li {
66
-    font-size: 12px;
67
-    list-style: square;
68
-  }
69
-}

+ 1 - 1
app/helpers/application_helper.rb

@@ -1,5 +1,5 @@
1 1
 module ApplicationHelper
2 2
   def title(page_title)
3 3
       content_for(:title) { page_title }
4
-  end
4
+  end  
5 5
 end

+ 10 - 0
app/helpers/missions_helper.rb

@@ -1,2 +1,12 @@
1 1
 module MissionsHelper
2
+  def status(status_code)
3
+    case status_code.to_i
4
+    when 1
5
+      content_tag(:span, (t 'status.planning'), class: 'mission-status status-planning pull-right')
6
+    when 2
7
+      content_tag(:span, (t 'status.launched'), class: 'mission-status status-launched pull-right')
8
+    else
9
+      content_tag(:span, (t 'status.error'), class: 'mission-status status-error pull-right')
10
+    end
11
+  end
2 12
 end

+ 16 - 37
app/views/missions/index.html.erb

@@ -1,42 +1,21 @@
1 1
 <h1>Listing missions</h1>
2 2
 
3
-<table>
4
-  <thead>
5
-    <tr>
6
-      <th>Mission agents</th>
7
-      <th>Title</th>
8
-      <th>Objective</th>
9
-      <th>Briefing</th>
10
-      <th>Owner</th>
11
-      <th>Status</th>
12
-      <th>Launched</th>
13
-      <th>Language</th>
14
-      <th>Cover img</th>
15
-      <th></th>
16
-      <th></th>
17
-      <th></th>
18
-    </tr>
19
-  </thead>
20
-
21
-  <tbody>
22
-    <% @missions.each do |mission| %>
23
-      <tr>
24
-        <td><%= mission.mission_agents %></td>
25
-        <td><%= mission.title %></td>
26
-        <td><%= mission.objective %></td>
27
-        <td><%= mission.briefing %></td>
28
-        <td><%= mission.owner %></td>
29
-        <td><%= mission.status %></td>
30
-        <td><%= mission.launched %></td>
31
-        <td><%= mission.language %></td>
32
-        <td><%= mission.cover_img %></td>
33
-        <td><%= link_to 'Show', mission %></td>
34
-        <td><%= link_to 'Edit', edit_mission_path(mission) %></td>
35
-        <td><%= link_to 'Destroy', mission, method: :delete, data: { confirm: 'Are you sure?' } %></td>
36
-      </tr>
37
-    <% end %>
38
-  </tbody>
39
-</table>
3
+<%= content_tag(:ul, class: 'thumbnails') do %>
4
+	<% @missions.each do |mission| %>
5
+		<%= content_tag(:li, class: 'span4') do %>
6
+			<% content_tag(:div, class: 'thumbnail') do %>
7
+				<%= image_tag('http://placehold.it/400x300')%>
8
+				<%= content_tag(:div) do%>
9
+			          <%= content_tag(:h3, link_to(mission.title, mission)) %>
10
+					<%= content_tag(:p, mission.owner.full_name, class: 'mission-director-name') %>
11
+			          <%= content_tag(:p, mission.objective) %>
12
+					<%= status(mission.status) %>
13
+					<%= content_tag(:div, '', class: 'clearfix') %>
14
+				<% end %>
15
+			<% end %>
16
+		<% end %>
17
+	<% end %>
18
+<% end %>
40 19
 
41 20
 <br>
42 21