Atualiza página de acompanhamento da série

rafael-fernandes · Nov 27, 2017 · 64997a1 · 64997a1
1 parent 2598ec6
commit 64997a1
Show file tree

Hide file tree

Showing 6 changed files with 148 additions and 14 deletions.
diff --git a/app/assets/stylesheets/components/_series.scss b/app/assets/stylesheets/components/_series.scss
@@ -28,4 +28,31 @@
     font-size: 20px;
     color: rgba(51,51,51,0.8)
   }
+}
+
+.favorite {
+  .episode {
+    background-color: #3db39e;
+    padding: .5em;
+    text-align: center;
+    color: $color-white;
+    font-size: 18px;
+  }
+
+  .name {
+    font-size: 36px;
+    color: rgba(51,51,51,0.8);
+  }
+
+  .next-episode {
+    font-size: 18px;
+  }
+
+  .subtitle {
+    color: rgba(51,51,51,0.75);
+  }
+}
+
+.episode-info {
+  background-color: $color-white;
 }
diff --git a/app/views/layouts/_navbar.html.erb b/app/views/layouts/_navbar.html.erb
@@ -16,7 +16,7 @@
             <%= link_to "Séries", series_index_path, class: "nav-link" %>
           </li>
           <li class="nav-item">
-            <%= link_to "Minhas Séries", "", class: "nav-link" %>
+            <%= link_to "Minhas Séries", my_series_path, class: "nav-link" %>
           </li>
           <li class="nav-item">
             <%= link_to "", class: "nav-link" do %>

diff --git a/app/views/series/_serie.html.erb b/app/views/series/_serie.html.erb
diff --git a/app/views/series/show.html.erb b/app/views/series/show.html.erb
@@ -0,0 +1,61 @@
+<div class="series pt-4">
+  <div class="container pt-3">
+    <div class="row">
+      <div class="col-sm-6">
+        <div class="title">acompanhamento da série</div>
+      </div>
+
+      <div class="col-sm-3"></div>
+
+      <div class="col-sm-3">
+        <div class="back">
+          <%= link_to "voltar à minhas séries", my_series_path, class: "btn btn-info btn-block" %>
+        </div>
+      </div>
+    </div>
+
+    <div class="row pt-5">
+      <div class="col-sm-6 favorite">
+        <%= image_tag "american-horror-story.jpg", width: "100%", height: "auto" %>
+        <div class="episode">
+          S07E07
+        </div>
+      </div>
+      <div class="col-sm-6 favorite">
+        <div class="name">American Horror Story</div>
+        <div class="next-episode mt-2">Próximo episódio: hoje</div>
+        <p class="mt-5 mb-0">Seu progresso:</p>
+        <div class="progress mt-2" style="height: 25px">
+          <div class="progress-bar bg-info" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
+        </div>
+
+        <p class="subtitle mt-5 mb-0">Gênero</p>
+        <p>Drama, suspense</p>
+
+        <div class="row mt-4">
+          <div class="col-sm-4">
+            <div class="subtitle">No ar em</div>
+            <p>Canal</p>
+          </div>
+          <div class="col-sm-4">
+            <div class="subtitle">Duração</div>
+            <p>45 min</p>
+          </div>
+          <div class="col-sm-4">
+            <div class="subtitle">Status</div>
+            <p>Em exibição</p>
+          </div>
+        </div>
+
+        <%= link_to "", class: "mt-4 btn btn-outline-danger" do %>
+          remover da minha lista  
+          <%= fa_icon "times" %>
+        <% end %>
+      </div>
+    </div>
+
+    <!-- <div class="episode-info">
+
+    </div> -->
+  </div>
+</div>
diff --git a/app/views/static_pages/my_series.html.erb b/app/views/static_pages/my_series.html.erb
@@ -0,0 +1,58 @@
+<div class="series pt-4">
+	<div class="container pt-3">
+		<div class="row">
+			<div class="col-sm-3">
+				<div class="title">minhas séries</div>
+			</div>
+
+			<div class="col-sm-5"></div>
+
+			<div class="col-sm-2">
+				<div class="search">
+					<div class="form-group">
+						<input type="search" class="form-control" placeholder="pesquise por nome">
+					</div>
+				</div>
+			</div>
+
+			<div class="col-sm-2">
+				<div class="filter">
+					<div class="btn-group">
+						<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+							ordenar por
+						</button>
+						<div class="dropdown-menu">
+							<a class="dropdown-item" href="#">nome</a>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div class="row">
+			<% 20.times do %>
+				<div class="col-sm-3">
+					<div class="series-card -favorite">
+						<div class="photo">
+              <%= link_to series_path(Series.first) do %>
+                <%= image_tag "american-horror-story.jpg" %>
+              <% end %>
+						</div>
+						<div class="episode">
+							S07E07
+            </div>
+            <div class="progress mt-3">
+              <div class="progress-bar bg-info" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
+            </div>
+						<div class="name">
+							American Horror Story
+						</div>
+						<div class="next-episode">
+							Próximo episódio: amanhã
+						</div>
+					</div>
+				</div>
+			<% end %>
+		</div>
+	</div>
+</div>
diff --git a/config/routes.rb b/config/routes.rb
@@ -1,9 +1,7 @@
 Rails.application.routes.draw do
-  get 'static_pages/home'
-
   root 'static_pages#home'
 
-  get '/:page' => 'series#index'
+  get '/my-series' => 'static_pages#my_series'
 
   resources :series