Added styling to each page

tamu-edu-students · Sep 11, 2024 · 61ab6de · 61ab6de
1 parent a3e7721
commit 61ab6de
Show file tree

Hide file tree

Showing 6 changed files with 275 additions and 38 deletions.
diff --git a/app/controllers/movies_controller.rb b/app/controllers/movies_controller.rb
@@ -5,11 +5,11 @@ class MoviesController < ApplicationController
 
   def index
     # Fetch sorting parameters from the URL
-    sort_attribute = params[:attribute] || 'title'
-    sort_order = params[:order] || 'asc'
+    @attribute = params[:attribute] || 'title'
+    @order = params[:order] || 'asc'
 
     # Fetch and sort movies based on parameters
-    @movies = Movie.sorted_by(sort_attribute, sort_order)
+    @movies = Movie.sorted_by(@attribute, @order)
   end
 
   # GET /movies/1 or /movies/1.json
@@ -25,9 +25,7 @@ def new
   def edit
   end
 
-  def sort
-
-  end
+
   # POST /movies or /movies.json
   def create
     @movie = Movie.new(movie_params)
@@ -58,10 +56,11 @@ def update
 
   # DELETE /movies/1 or /movies/1.json
   def destroy
+    @movie = Movie.find(params[:id])
     @movie.destroy!
 
     respond_to do |format|
-      format.html { redirect_to movies_url, notice: "Movie was successfully destroyed." }
+      format.html { redirect_to movies_path(attribute: @attribute, order: @order), notice: "Movie was successfully destroyed." }
       format.json { head :no_content }
     end
   end
@@ -77,9 +76,4 @@ def movie_params
       params.require(:movie).permit(:title, :rating, :description, :release_date)
     end
 
-    def sort
-      respond_to do |format|
-        format.html { redirect_to movies_url, notice: "Sorting is yet to be done" }
-      end
-    end
 end
diff --git a/app/views/movies/_movie.html.erb b/app/views/movies/_movie.html.erb
@@ -2,9 +2,15 @@
 <div id="<%= dom_id movie %>">
 
 <tr>
-    <td> <%= movie.title %> </td> 
-    <td> <%= movie.rating %> </td> 
-    <td> <%= movie.release_date %> </td> 
+    <td class="<%= params[:attribute] == 'title' && params[:order] == 'asc' ? 'highlight-asc' : params[:attribute] == 'title' && params[:order] == 'desc' ? 'highlight-desc' : '' %>">
+        <%= movie.title %> 
+    </td> 
+    <td class="<%= params[:attribute] == 'rating' && params[:order] == 'asc' ? 'highlight-asc' : params[:attribute] == 'rating' && params[:order] == 'desc' ? 'highlight-desc' : '' %>">
+        <%= movie.rating %> 
+    </td> 
+    <td class="<%= params[:attribute] == 'release_date' && params[:order] == 'asc' ? 'highlight-asc' : params[:attribute] == 'release_date' && params[:order] == 'desc' ? 'highlight-desc' : '' %>">
+        <%= movie.release_date %> 
+    </td> 
     <td> <%= link_to "Click here", movie %> </td> 
 </tr>
 

diff --git a/app/views/movies/edit.html.erb b/app/views/movies/edit.html.erb
@@ -1,12 +1,70 @@
-<% content_for :title, "Editing movie" %>
 
-<h1>Editing movie</h1>
 
-<%= render "form", movie: @movie %>
 
-<br>
 
-<div>
+
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Simple Styled Page</title>
+  <style>
+    /* General Styles */
+    body {
+      margin: 0;
+      font-family: Arial, sans-serif;
+      color: #333;
+    }
+
+    /* Header Style */
+    header {
+      background-color: #004D98; /* Deep blue background */
+      color: white;
+      padding: 10px 20px;
+      text-align: center;
+    }
+
+    /* Main Content Style */
+    .content {
+      padding: 20px;
+      background-color: #F5F5F5; /* Light grey background */
+    }
+
+    /* Footer Style */
+    footer {
+      background-color: #D97B9A; /* Light red background */
+      color: white;
+      text-align: center;
+      padding: 10px;
+      width: 100%;
+      bottom: 0;
+    }
+  </style>
+</head>
+<body>
+  <header>
+  <% content_for :title, "Editing movie" %>
+
+  <h1>Editing movie</h1>
+
+  </header>
+
+  <div class="content">
+  <%= render "form", movie: @movie %>
+
+  <br>
+
+  </div>
+
+  <footer>
+  <div>
   <%= link_to "Show this movie", @movie %> |
   <%= link_to "Back to movies", movies_path %>
 </div>
+
+
+  </footer>
+</body>
+</html>
diff --git a/app/views/movies/index.html.erb b/app/views/movies/index.html.erb
@@ -4,7 +4,6 @@
 
 <h1>Movies</h1>
 
-
 <head>
 
   <style>
@@ -25,47 +24,90 @@
     font-weight: bold; 
 }
 
-.button {
+.sort-button {
   display: inline-block;
   padding: 10px 20px;
-  font-size: 16px;
-  color: #fff;
-  background-color: #007bff;
+  background-color: #f39c12; /* Yellow */
+  color: white;
   border: none;
   border-radius: 5px;
-  text-align: center;
   cursor: pointer;
+  font-size: 16px;
+  text-align: center;
+}
+
+.sort-button:hover {
+  background-color: #e67e22; /* Darker orange for hover effect */
+}
+
+.hidden-text {
+  display: none;
+  margin-top: 10px;
+  padding: 10px;
+  background-color: #333;
+  color: white;
+  border-radius: 5px;
+  font-size: 14px;
+}
+
+.highlight-asc {
+  background-color: #7BAFD4; /* Light green */
+}
+
+.highlight-desc {
+  background-color: #D97B9A; /* Light red */
+}
+
+/* CSS file or <style> block */
+body {
+  background: linear-gradient(to right, #7BAFD4, #D97B9A); /* Light blue to light red gradient */
+  color: #333; /* Darker text color for better readability against the lighter background */
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+
+
 }
 
-.button:hover {
-  background-color: #0056b3;
+.content {
+      position: relative;
+      padding: 20px;
+      background: white; /* Background for content area */
 }
+
+
   </style
 </head>
 
+
+
+<div class="content">
+
 <% if params[:attribute].present? && params[:order].present? %>
   <div id="sort-message" class="alert">
     Items are sorted by <%= params[:attribute].humanize %> in <%= params[:order].humanize %> order.
   </div>
 <% end %>
 
+
 <table>
   <thead>
     <tr>
 
-      <th>
+      <th id="column-header" class="<%= params[:attribute] == 'title' && params[:order] == 'asc' ? 'highlight-asc' : params[:attribute] == 'title' && params[:order] == 'desc' ? 'highlight-desc' : '' %>">
+
         <%= link_to 'Title', movies_path(attribute: 'title', order: params[:order] == 'asc' ? 'desc' : 'asc') %>
         <% if params[:attribute] == 'title' %>
           <%= params[:order] == 'asc' ? '▲' : '▼' %>
         <% end %>
       </th>
-      <th>
+      <th id="column-header" class="<%= params[:attribute] == 'rating' && params[:order] == 'asc' ? 'highlight-asc' : params[:attribute] == 'rating' && params[:order] == 'desc' ? 'highlight-desc' : '' %>" >
         <%= link_to 'Rating', movies_path(attribute: 'rating', order: params[:order] == 'asc' ? 'desc' : 'asc') %>
         <% if params[:attribute] == 'rating' %>
           <%= params[:order] == 'asc' ? '▲' : '▼' %>
         <% end %>
       </th>
-      <th>
+      <th id="column-header" class="<%= params[:attribute] == 'release_date' && params[:order] == 'asc' ? 'highlight-asc' : params[:attribute] == 'release_date' && params[:order] == 'desc' ? 'highlight-desc' : '' %>" >
         <%= link_to 'Release Date', movies_path(attribute: 'release_date', order: params[:order] == 'asc' ? 'desc' : 'asc') %>
         <% if params[:attribute] == 'release_date' %>
           <%= params[:order] == 'asc' ? '▲' : '▼' %>
@@ -87,12 +129,37 @@
 
   <tfoot>
     <tr> 
-        <td colspan="4"> <%= link_to "New movie", new_movie_path %> </td>
+        <td colspan="4"> <%= link_to "New movie", new_movie_path(attribute: params[:attribute], order: params[:order]) %> </td>
     </tr>
   </tfoot>
 </table>
 
 
+</div>
+<!-- Add this in app/views/movies/index.html.erb, or in a dedicated JS file -->
+
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+  const button = document.getElementById('toggle-button');
+  const text = document.getElementById('toggle-text');
+
+  button.addEventListener('click', () => {
+    if (text.style.display === 'none' || text.style.display === '') {
+      text.style.display = 'block'; // Show text
+    } else {
+      text.style.display = 'none';  // Hide text
+    }
+  });
+});
+</script>
+
+<button id="toggle-button" class="sort-button">Sort</button>
+<div id="toggle-text" class="hidden-text">
+  Click on the attribute based on which you would like the data to be sorted, click on it again to change the sorting order.
+</div>
+
+
+
 
 
 

diff --git a/app/views/movies/new.html.erb b/app/views/movies/new.html.erb
@@ -1,11 +1,65 @@
 <% content_for :title, "New movie" %>
 
-<h1>New movie</h1>
 
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Simple Styled Page</title>
+  <style>
+    /* General Styles */
+    body {
+      margin: 0;
+      font-family: Arial, sans-serif;
+      color: #333;
+    }
+
+    /* Header Style */
+    header {
+      background-color: #004D98; /* Deep blue background */
+      color: white;
+      padding: 10px 20px;
+      text-align: center;
+    }
+
+    /* Main Content Style */
+    .content {
+      padding: 20px;
+      background-color: #F5F5F5; /* Light grey background */
+    }
+
+    /* Footer Style */
+    footer {
+      background-color: #D97B9A; /* Light red background */
+      color: white;
+      text-align: center;
+      padding: 10px;
+      width: 100%;
+      bottom: 0;
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>New movie</h1>
+  </header>
+
+  <div class="content">
+    <h2>Main Content</h2>
+
+
 <%= render "form", movie: @movie %>
 
 <br>
 
-<div>
-  <%= link_to "Back to movies", movies_path %>
+    </div>
+
+  <footer>
+
+  <div>
+  <%= link_to "Back to movies", movies_path(attribute: params[:attribute], order: params[:order]) %>
 </div>
+
+
+  </footer>
+</body>
+