Finalized the styling for each page

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

Hide file tree

Showing 7 changed files with 74 additions and 101 deletions.
diff --git a/app/controllers/movies_controller.rb b/app/controllers/movies_controller.rb
@@ -4,12 +4,10 @@ class MoviesController < ApplicationController
   # GET /movies or /movies.json
 
   def index
-    # Fetch sorting parameters from the URL
     @attribute = params[:attribute] || 'title'
     @order = params[:order] || 'asc'
 
-    # Fetch and sort movies based on parameters
-    @movies = Movie.sorted_by(@attribute, @order)
+    @movies = Movie.sort_based(@attribute, @order)
   end
 
   # GET /movies/1 or /movies/1.json
@@ -23,16 +21,18 @@ def new
 
   # GET /movies/1/edit
   def edit
+    @movie = Movie.find(params[:id])
   end
 
 
   # POST /movies or /movies.json
+
+
   def create
     @movie = Movie.new(movie_params)
-
     respond_to do |format|
       if @movie.save
-        format.html { redirect_to movie_url(@movie), notice: "Movie was successfully created." }
+        format.html { redirect_to movies_path(attribute: params[:attribute], order: params[:order]), notice: "Movie was successfully created." }
         format.json { render :show, status: :created, location: @movie }
       else
         format.html { render :new, status: :unprocessable_entity }
@@ -41,6 +41,7 @@ def create
     end
   end
 
+
   # PATCH/PUT /movies/1 or /movies/1.json
   def update
     respond_to do |format|

diff --git a/app/models/movie.rb b/app/models/movie.rb
@@ -1,14 +1,5 @@
 class Movie < ActiveRecord::Base
-    # Class method to sort movies based on the attribute and order
-    def self.sorted_by(attribute, order)
-      valid_attributes = %w[title rating release_date]  # Allowed attributes for sorting
-      valid_order = %w[asc desc]                        # Allowed orders
-
-      # Default values if parameters are invalid
-      attribute = 'title' unless valid_attributes.include?(attribute)
-      order = 'asc' unless valid_order.include?(order)
-
-      # Apply sorting using ActiveRecord's `order` method
+    def self.sort_based(attribute, order)                 
       order("#{attribute} #{order}")
     end
   end

diff --git a/app/views/movies/_movie.html.erb b/app/views/movies/_movie.html.erb
@@ -2,13 +2,13 @@
 <div id="<%= dom_id movie %>">
 
 <tr>
-    <td class="<%= params[:attribute] == 'title' && params[:order] == 'asc' ? 'highlight-asc' : params[:attribute] == 'title' && params[:order] == 'desc' ? 'highlight-desc' : '' %>">
+    <td class="<%= params[:attribute] == 'title' && params[:order] == 'asc' ? 'order-asc' : params[:attribute] == 'title' && params[:order] == 'desc' ? 'order-desc' : '' %>">
         <%= movie.title %> 
     </td> 
-    <td class="<%= params[:attribute] == 'rating' && params[:order] == 'asc' ? 'highlight-asc' : params[:attribute] == 'rating' && params[:order] == 'desc' ? 'highlight-desc' : '' %>">
+    <td class="<%= params[:attribute] == 'rating' && params[:order] == 'asc' ? 'order-asc' : params[:attribute] == 'rating' && params[:order] == 'desc' ? 'order-desc' : '' %>">
         <%= movie.rating %> 
     </td> 
-    <td class="<%= params[:attribute] == 'release_date' && params[:order] == 'asc' ? 'highlight-asc' : params[:attribute] == 'release_date' && params[:order] == 'desc' ? 'highlight-desc' : '' %>">
+    <td class="<%= params[:attribute] == 'release_date' && params[:order] == 'asc' ? 'order-asc' : params[:attribute] == 'release_date' && params[:order] == 'desc' ? 'order-desc' : '' %>">
         <%= movie.release_date %> 
     </td> 
     <td> <%= link_to "Click here", movie %> </td> 

diff --git a/app/views/movies/edit.html.erb b/app/views/movies/edit.html.erb
@@ -1,51 +1,40 @@
-
-
-
-
-
-
-<!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 */
+      background-color: #004D98;
       color: white;
       padding: 10px 20px;
       text-align: center;
+      font-size : 20px
     }
 
-    /* Main Content Style */
     .content {
       padding: 20px;
-      background-color: #F5F5F5; /* Light grey background */
+      background-color: #F5F5F5;
+      font-size : 20px
     }
 
-    /* Footer Style */
     footer {
-      background-color: #D97B9A; /* Light red background */
+      background-color: #D97B9A;
       color: white;
       text-align: center;
       padding: 10px;
       width: 100%;
-      bottom: 0;
+      font-size : 20px
     }
   </style>
 </head>
+
+
+
 <body>
   <header>
-  <% content_for :title, "Editing movie" %>
+  <% content_for :title, "EDIT MOVIE" %>
 
   <h1>Editing movie</h1>
 

diff --git a/app/views/movies/index.html.erb b/app/views/movies/index.html.erb
@@ -2,22 +2,25 @@
 
 <% content_for :title, "Movies" %>
 
-<h1>Movies</h1>
+<h1>MOVIES</h1>
 
 <head>
 
   <style>
+
     table {
-      width: 75% ;
+      width: 100% ;
+      border-collapse: collapse
+
     }
     th {
-      border: 2px solid #333;
+      border: 2px solid #15D4F8;
       text-align: center
       padding: 20px
       font-weight: bold;
     }
     td {
-      border: 1px solid #ddd;
+      border: 1px solid #15D4F8;
       text-align: center
     }
     tfoot { 
@@ -26,53 +29,60 @@
 
 .sort-button {
   display: inline-block;
-  padding: 10px 20px;
-  background-color: #f39c12; /* Yellow */
+  background-color: #f39c12;
   color: white;
   border: none;
   border-radius: 5px;
   cursor: pointer;
-  font-size: 16px;
+  font-size: 20px;
   text-align: center;
+  padding: 10px 20px
+
 }
 
-.sort-button:hover {
-  background-color: #e67e22; /* Darker orange for hover effect */
+button {
+  text-align: center;
 }
 
+
 .hidden-text {
   display: none;
   margin-top: 10px;
   padding: 10px;
-  background-color: #333;
+  background-color: #f39c12;
   color: white;
   border-radius: 5px;
-  font-size: 14px;
+  font-size : 16px
+  text-align: center;
+
+
 }
 
-.highlight-asc {
-  background-color: #7BAFD4; /* Light green */
+.order-asc {
+  background-color: #7BAFD4; 
 }
 
-.highlight-desc {
-  background-color: #D97B9A; /* Light red */
+.order-desc {
+  background-color: #D97B9A; 
 }
 
-/* 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;
+  background: linear-gradient(to right, #7BAFD4, #D97B9A); 
+  color: #333; 
   margin: 0;
   padding: 0;
+  font-size : 20px
 
 
 }
+h1 {
+  text-align: center;
+}
 
 .content {
       position: relative;
       padding: 20px;
-      background: white; /* Background for content area */
+      background: #FFE5E5; 
 }
 
 
@@ -84,7 +94,7 @@ body {
 <div class="content">
 
 <% if params[:attribute].present? && params[:order].present? %>
-  <div id="sort-message" class="alert">
+  <div id="sort-message">
     Items are sorted by <%= params[:attribute].humanize %> in <%= params[:order].humanize %> order.
   </div>
 <% end %>
@@ -94,20 +104,20 @@ body {
   <thead>
     <tr>
 
-      <th id="column-header" class="<%= params[:attribute] == 'title' && params[:order] == 'asc' ? 'highlight-asc' : params[:attribute] == 'title' && params[:order] == 'desc' ? 'highlight-desc' : '' %>">
+      <th id="column-header" class="<%= params[:attribute] == 'title' && params[:order] == 'asc' ? 'order-asc' : params[:attribute] == 'title' && params[:order] == 'desc' ? 'order-desc' : '' %>">
 
         <%= link_to 'Title', movies_path(attribute: 'title', order: params[:order] == 'asc' ? 'desc' : 'asc') %>
         <% if params[:attribute] == 'title' %>
           <%= params[:order] == 'asc' ? '▲' : '▼' %>
         <% end %>
       </th>
-      <th id="column-header" class="<%= params[:attribute] == 'rating' && params[:order] == 'asc' ? 'highlight-asc' : params[:attribute] == 'rating' && params[:order] == 'desc' ? 'highlight-desc' : '' %>" >
+      <th id="column-header" class="<%= params[:attribute] == 'rating' && params[:order] == 'asc' ? 'order-asc' : params[:attribute] == 'rating' && params[:order] == 'desc' ? 'order-desc' : '' %>" >
         <%= link_to 'Rating', movies_path(attribute: 'rating', order: params[:order] == 'asc' ? 'desc' : 'asc') %>
         <% if params[:attribute] == 'rating' %>
           <%= params[:order] == 'asc' ? '▲' : '▼' %>
         <% end %>
       </th>
-      <th id="column-header" class="<%= params[:attribute] == 'release_date' && params[:order] == 'asc' ? 'highlight-asc' : params[:attribute] == 'release_date' && params[:order] == 'desc' ? 'highlight-desc' : '' %>" >
+      <th id="column-header" class="<%= params[:attribute] == 'release_date' && params[:order] == 'asc' ? 'order-asc' : params[:attribute] == 'release_date' && params[:order] == 'desc' ? 'order-desc' : '' %>" >
         <%= link_to 'Release Date', movies_path(attribute: 'release_date', order: params[:order] == 'asc' ? 'desc' : 'asc') %>
         <% if params[:attribute] == 'release_date' %>
           <%= params[:order] == 'asc' ? '▲' : '▼' %>
@@ -136,7 +146,6 @@ body {
 
 
 </div>
-<!-- Add this in app/views/movies/index.html.erb, or in a dedicated JS file -->
 
 <script>
 document.addEventListener('DOMContentLoaded', () => {
@@ -145,14 +154,15 @@ document.addEventListener('DOMContentLoaded', () => {
 
   button.addEventListener('click', () => {
     if (text.style.display === 'none' || text.style.display === '') {
-      text.style.display = 'block'; // Show text
+      text.style.display = 'block'; 
     } else {
-      text.style.display = 'none';  // Hide text
+      text.style.display = 'none'; 
     }
   });
 });
 </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.

diff --git a/app/views/movies/new.html.erb b/app/views/movies/new.html.erb
@@ -1,46 +1,40 @@
 <% content_for :title, "New movie" %>
 
-
 <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 */
+      background-color: #004D98;
       color: white;
       padding: 10px 20px;
       text-align: center;
+      font-size : 20px
     }
 
-    /* Main Content Style */
     .content {
       padding: 20px;
-      background-color: #F5F5F5; /* Light grey background */
+      background-color: #F5F5F5;
+      font-size : 20px
     }
 
-    /* Footer Style */
     footer {
-      background-color: #D97B9A; /* Light red background */
+      background-color: #D97B9A;
       color: white;
       text-align: center;
       padding: 10px;
       width: 100%;
-      bottom: 0;
+      font-size : 20px
+
     }
   </style>
 </head>
 <body>
   <header>
-    <h1>New movie</h1>
+    <h1>NEW MOVIE</h1>
   </header>
 
   <div class="content">