Started work on Mission Page
4 gewijzigde bestanden met toevoegingen van 99 en 43 verwijderingen
+ 60
- 14
app/assets/stylesheets/avalanche_theme.css.less
@@ -1,5 +1,31 @@ |
||
| 1 |
+// Color Swatch |
|
| 2 |
+ |
|
| 3 |
+@black: #202020; |
|
| 4 |
+@dark-gray: #1D1D26; |
|
| 5 |
+@medium-gray: #737389; |
|
| 6 |
+@ligh-gray: #D4D4DE; |
|
| 7 |
+@red: #F26C63; |
|
| 8 |
+@blue: #55B3DA; |
|
| 9 |
+@yellow: #F2CB63; |
|
| 10 |
+@green: #92BC64; |
|
| 11 |
+@white: white; |
|
| 12 |
+ |
|
| 1 | 13 |
// Avalanche Theme |
| 2 | 14 |
|
| 15 |
+html, body {
|
|
| 16 |
+ height: 100%; |
|
| 17 |
+} |
|
| 18 |
+.wrapper {
|
|
| 19 |
+ min-height: 100%; |
|
| 20 |
+ height: auto !important; |
|
| 21 |
+ height: 100%; |
|
| 22 |
+ margin: 0 auto -222px; /* the bottom margin is the negative value of the footer's height */ |
|
| 23 |
+} |
|
| 24 |
+.footer, .push {
|
|
| 25 |
+ height: 192px; /* .push must be the same height as .footer */ |
|
| 26 |
+} |
|
| 27 |
+ |
|
| 28 |
+ |
|
| 3 | 29 |
.top-container {
|
| 4 | 30 |
margin-top: 85px |
| 5 | 31 |
} |
@@ -7,7 +33,7 @@ |
||
| 7 | 33 |
.page-header {
|
| 8 | 34 |
padding-bottom: 0; |
| 9 | 35 |
margin: 20px 0 30px; |
| 10 |
- border-bottom: 2px solid #D4D4DE; |
|
| 36 |
+ border-bottom: 2px solid @ligh-gray; |
|
| 11 | 37 |
} |
| 12 | 38 |
|
| 13 | 39 |
.page-header h1 {
|
@@ -21,6 +47,22 @@ |
||
| 21 | 47 |
margin-bottom: 0px; |
| 22 | 48 |
} |
| 23 | 49 |
|
| 50 |
+.page-header-type h1 {
|
|
| 51 |
+ font-size: 48px; |
|
| 52 |
+ line-height: 59px; |
|
| 53 |
+ margin-top: 0px; |
|
| 54 |
+} |
|
| 55 |
+ |
|
| 56 |
+.page-header-type small {
|
|
| 57 |
+ font-family: Avenir-MediumOblique; |
|
| 58 |
+ font-size: 18px; |
|
| 59 |
+ color: #1D1D26; |
|
| 60 |
+ line-height: 25px; |
|
| 61 |
+ text-transform: uppercase; |
|
| 62 |
+ font-style: italic; |
|
| 63 |
+ font-weight: 200; |
|
| 64 |
+} |
|
| 65 |
+ |
|
| 24 | 66 |
.page-header h1 .btn {
|
| 25 | 67 |
margin-bottom: 9px; |
| 26 | 68 |
} |
@@ -101,7 +143,7 @@ h2 {
|
||
| 101 | 143 |
/* James Peret: */ |
| 102 | 144 |
font-family: Avenir-Medium; |
| 103 | 145 |
font-size: 14px; |
| 104 |
- color: #000000; |
|
| 146 |
+ color: @black; |
|
| 105 | 147 |
line-height: 22px; |
| 106 | 148 |
} |
| 107 | 149 |
|
@@ -121,30 +163,34 @@ h2 {
|
||
| 121 | 163 |
padding-right: 6px; |
| 122 | 164 |
font-family: Avenir-Oblique; |
| 123 | 165 |
font-size: 18px; |
| 124 |
- color: #000000; |
|
| 166 |
+ color: @black; |
|
| 125 | 167 |
line-height: 28px; |
| 126 | 168 |
} |
| 127 | 169 |
|
| 170 |
+.page-header-type .mission-status {
|
|
| 171 |
+ margin-top: 12px; |
|
| 172 |
+} |
|
| 173 |
+ |
|
| 128 | 174 |
.status-planning {
|
| 129 |
- background-color: #D4D4DE; |
|
| 175 |
+ background-color: @ligh-gray; |
|
| 130 | 176 |
} |
| 131 | 177 |
|
| 132 | 178 |
.status-launched {
|
| 133 |
- background-color: #55B3DA; |
|
| 179 |
+ background-color: @blue; |
|
| 134 | 180 |
} |
| 135 | 181 |
|
| 136 | 182 |
.status-completed {
|
| 137 |
- background-color: #92BC64; |
|
| 183 |
+ background-color: @green; |
|
| 138 | 184 |
} |
| 139 | 185 |
|
| 140 | 186 |
.status-failed {
|
| 141 |
- background-color: #F26C63; |
|
| 187 |
+ background-color: @red; |
|
| 142 | 188 |
} |
| 143 | 189 |
|
| 144 | 190 |
.mission-counter {
|
| 145 | 191 |
font-family: Avenir-Medium; |
| 146 | 192 |
font-size: 18px; |
| 147 |
- color: #000000; |
|
| 193 |
+ color: @black; |
|
| 148 | 194 |
line-height: 28px; |
| 149 | 195 |
padding: 0px; |
| 150 | 196 |
} |
@@ -167,8 +213,8 @@ h2 {
|
||
| 167 | 213 |
// Buttons |
| 168 | 214 |
|
| 169 | 215 |
.btn.btn-success {
|
| 170 |
- color: #92BC64; |
|
| 171 |
- border-color: #92BC64; |
|
| 216 |
+ color: @green; |
|
| 217 |
+ border-color: @green; |
|
| 172 | 218 |
} |
| 173 | 219 |
|
| 174 | 220 |
.btn {
|
@@ -207,17 +253,17 @@ footer {
|
||
| 207 | 253 |
} |
| 208 | 254 |
|
| 209 | 255 |
.footer-black {
|
| 210 |
- background-color: #202020; |
|
| 256 |
+ background-color: @black; |
|
| 211 | 257 |
color: white; |
| 212 | 258 |
} |
| 213 | 259 |
|
| 214 | 260 |
.footer-white a {
|
| 215 |
- color: #1D1D26; |
|
| 261 |
+ color: @dark-gray; |
|
| 216 | 262 |
font-weight: bold; |
| 217 | 263 |
} |
| 218 | 264 |
|
| 219 | 265 |
.footer-white a:hover {
|
| 220 |
- color: #55B3DA; |
|
| 266 |
+ color: @blue; |
|
| 221 | 267 |
font-weight: bold; |
| 222 | 268 |
text-transform: underline; |
| 223 | 269 |
} |
@@ -229,7 +275,7 @@ footer {
|
||
| 229 | 275 |
} |
| 230 | 276 |
|
| 231 | 277 |
.footer-black a:hover {
|
| 232 |
- color: #55B3DA; |
|
| 278 |
+ color: @blue; |
|
| 233 | 279 |
font-weight: bold; |
| 234 | 280 |
text-transform: underline; |
| 235 | 281 |
background-color: transparent; |
+ 24
- 21
app/views/layouts/application.html.erb
@@ -37,33 +37,36 @@ |
||
| 37 | 37 |
<%= javascript_include_tag "application" %> |
| 38 | 38 |
</head> |
| 39 | 39 |
<body> |
| 40 |
+ <div class="wrapper"> |
|
| 41 |
+ <div class="navbar navbar-fixed-top"> |
|
| 42 |
+ <div class="navbar-inner past-main"> |
|
| 43 |
+ <div class="container"> |
|
| 44 |
+ <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse"> |
|
| 45 |
+ <span class="icon-bar"></span> |
|
| 46 |
+ <span class="icon-bar"></span> |
|
| 47 |
+ <span class="icon-bar"></span> |
|
| 48 |
+ </a> |
|
| 49 |
+ <%= render 'layouts/logo' %> |
|
| 40 | 50 |
|
| 41 |
- <div class="navbar navbar-fixed-top"> |
|
| 42 |
- <div class="navbar-inner past-main"> |
|
| 43 |
- <div class="container"> |
|
| 44 |
- <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse"> |
|
| 45 |
- <span class="icon-bar"></span> |
|
| 46 |
- <span class="icon-bar"></span> |
|
| 47 |
- <span class="icon-bar"></span> |
|
| 48 |
- </a> |
|
| 49 |
- <%= render 'layouts/logo' %> |
|
| 51 |
+ <%= render 'layouts/navigation_links' %> |
|
| 50 | 52 |
|
| 51 |
- <%= render 'layouts/navigation_links' %> |
|
| 53 |
+ </div> |
|
| 54 |
+ </div> |
|
| 55 |
+ </div> |
|
| 52 | 56 |
|
| 53 |
- </div> |
|
| 54 |
- </div> |
|
| 57 |
+ <div class="container top-container "> |
|
| 58 |
+ <div class="row"> |
|
| 59 |
+ <div class="span12"> |
|
| 60 |
+ <%= bootstrap_flash %> |
|
| 61 |
+ <%= yield %> |
|
| 62 |
+ </div> |
|
| 63 |
+ </div><!--/row--> |
|
| 64 |
+ </div> <!-- /container --> |
|
| 65 |
+ <div class="push"></div> |
|
| 55 | 66 |
</div> |
| 56 |
- |
|
| 57 |
- <div class="container top-container "> |
|
| 58 |
- <div class="row"> |
|
| 59 |
- <div class="span12"> |
|
| 60 |
- <%= bootstrap_flash %> |
|
| 61 |
- <%= yield %> |
|
| 62 |
- </div> |
|
| 63 |
- </div><!--/row--> |
|
| 64 |
- </div> <!-- /container --> |
|
| 65 | 67 |
|
| 66 | 68 |
<%= render 'layouts/footer' %> |
| 69 |
+ |
|
| 67 | 70 |
|
| 68 | 71 |
</body> |
| 69 | 72 |
</html> |
+ 6
- 3
app/views/missions/index.html.erb
@@ -1,6 +1,9 @@ |
||
| 1 |
-<div class="page-header"> |
|
| 2 |
- <h1>Missions <%= link_to 'New Mission', new_mission_path, class: 'btn btn-success' %></h1> |
|
| 3 |
-</div> |
|
| 1 |
+<%= content_tag(:div, class: 'page-header') do %> |
|
| 2 |
+ <%= content_tag(:h1) do %> |
|
| 3 |
+ <%= t 'mission.missions' %> |
|
| 4 |
+ <%= link_to 'New Mission', new_mission_path, class: 'btn btn-success' %> |
|
| 5 |
+ <% end %> |
|
| 6 |
+<% end %> |
|
| 4 | 7 |
|
| 5 | 8 |
<%= content_tag(:h2, (t 'mission.featured_missions'))%> |
| 6 | 9 |
|
+ 9
- 5
app/views/missions/show.html.erb
@@ -1,3 +1,12 @@ |
||
| 1 |
+<%= content_tag(:div, class: 'page-header page-header-type') do %> |
|
| 2 |
+ <%= content_tag(:small, (t 'mission.mission')+':') %> |
|
| 3 |
+ <%= content_tag(:h1) do %> |
|
| 4 |
+ <%= @mission.title %> |
|
| 5 |
+ <%= status(@mission.status) %> |
|
| 6 |
+ <% end %> |
|
| 7 |
+<% end %> |
|
| 8 |
+ |
|
| 9 |
+ |
|
| 1 | 10 |
<p id="notice"><%= notice %></p> |
| 2 | 11 |
|
| 3 | 12 |
<p> |
@@ -6,11 +15,6 @@ |
||
| 6 | 15 |
</p> |
| 7 | 16 |
|
| 8 | 17 |
<p> |
| 9 |
- <strong>Title:</strong> |
|
| 10 |
- <%= @mission.title %> |
|
| 11 |
-</p> |
|
| 12 |
- |
|
| 13 |
-<p> |
|
| 14 | 18 |
<strong>Objective:</strong> |
| 15 | 19 |
<%= @mission.objective %> |
| 16 | 20 |
</p> |