Initial commit, menu added but additional styling needed

BrianM-85 · Aug 8, 2020 · 9b16d3e · 9b16d3e
1 parent 9223aa3
commit 9b16d3e
Show file tree

Hide file tree

Showing 14 changed files with 125 additions and 57 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/app/.DS_Store b/app/.DS_Store
diff --git a/app/assets/.DS_Store b/app/assets/.DS_Store
diff --git a/app/assets/stylesheets/Main.scss b/app/assets/stylesheets/Main.scss
@@ -0,0 +1,56 @@
+.top-bar.topbar-responsive {
+  padding-top: 0px;
+  padding-bottom: 0px;
+  height: 3%;
+  background-color: #66d7e6;
+  color: black;
+}
+
+.dropdown.menu {
+  background-color: #66d7e6;
+}
+
+.submenu.menu.vertical {
+  background-color: #24c4db;
+}
+
+.main-menu-item{
+  color: black;
+  font-family: 'Lobster';
+  font-size: 20px;
+  font-style: italic;
+  font-weight: bold;
+}
+
+#title-link {
+  padding-left: 10px;
+  color: black;
+  padding-left: 20px;
+  // justify-content: center;
+  font-family: 'Lobster';
+  font-weight: bold;
+}
+
+#sign-up {
+  color: black;
+}
+
+#sign-in {
+  color: black;
+}
+
+#sign-out {
+  color: black;
+}
+
+#sign-up:hover {
+  color: white;
+}
+
+#sign-in:hover {
+  color: white;
+}
+
+#sign-out:hover {
+  color: white;
+}
diff --git a/app/assets/stylesheets/_settings.scss b/app/assets/stylesheets/_settings.scss
@@ -69,7 +69,7 @@ $global-font-size: 100%;
 $global-width: rem-calc(1200);
 $global-lineheight: 1.5;
 $foundation-palette: (
-  primary: #1779ba,
+  primary: #66d7e6,
   secondary: #767676,
   success: #3adb76,
   warning: #ffae00,
@@ -849,8 +849,8 @@ $titlebar-background: $black;
 $titlebar-color: $white;
 $titlebar-padding: 0.5rem;
 $titlebar-text-font-weight: bold;
-$titlebar-icon-color: $white;
-$titlebar-icon-color-hover: $medium-gray;
+$titlebar-icon-color: $black;
+$titlebar-icon-color-hover: $white;
 $titlebar-icon-spacing: 0.25rem;
 
 // 54. Tooltip

diff --git a/app/javascript/react/components/App.js b/app/javascript/react/components/App.js
@@ -6,11 +6,11 @@ import ShowIndex from "./ShowIndex"
 export const App = (props) => {
   return (
     <BrowserRouter>
-    <Switch>
-      <Route exact path="/" component={MainIndex} />
-      <Route exact path="/shows" component={ShowIndex} />
-    </Switch>
-  </BrowserRouter>
+      <Switch>
+        <Route exact path="/" component={MainIndex} />
+        <Route exact path="/shows" component={ShowIndex} />
+      </Switch>
+    </BrowserRouter>
   )
 }
 

diff --git a/app/javascript/react/components/MainIndex.js b/app/javascript/react/components/MainIndex.js
@@ -8,32 +8,12 @@ const MainIndex = (props) => {
 
   const [getYear, setYear] = useState("None");
 
-  // useEffect(() => {
-  //   fetch("/api/v1/episodes")
-  //     .then((response) => {
-  //       if (response.ok) {
-  //         return response;
-  //       } else {
-  //         let errorMessage = `${response.status} (${response.statusText})`,
-  //           error = new Error(errorMessage);
-  //         throw error;
-  //       }
-  //     })
-  //     .then((response) => response.json())
-  //     .then((body) => {
-  //       let episodeList = body;
-  //       setEpisodes(episodeList.episodeData);
-  //     })
-  //     .catch((error) => console.error(`Error in fetch: ${error.message}`));
-  // }, []);
-
   function handleYearChange(event) {
     setYear(event.target.value);
   }
 
   const handleSubmit = () => {
     event.preventDefault();
-    // console.log("You pressed the submit button")
     fetch(`/api/v1/program_years`, {
       method: "POST",
       credentials: "same-origin",
@@ -57,7 +37,6 @@ const MainIndex = (props) => {
       let data = body;
       setEpisodes(data.episodeData)
       setWeeks(data.weekData);
-      // debugger
     })
     .catch(error => console.error(`Error in fetch: ${error.message}`))
   };
@@ -69,7 +48,6 @@ const MainIndex = (props) => {
       {
       episodes = getEpisodes[index]
       }
-    // debugger
     return (
       <ProgramTile
       key={week.id}
@@ -86,10 +64,8 @@ const MainIndex = (props) => {
 
   return (
     <div>
-      Welcome to the main index.
-      <ul>
-      <li><Link to={`/shows`}>View Shows</Link></li>
-      </ul>
+      Welcome to the main index.<br/><br/>
+
       <label>Choose Year
         <form id="yearSelect" onSubmit={handleSubmit}>
           <select defaultValue="none" onChange={handleYearChange}>

diff --git a/app/javascript/react/components/ShowIndex.js b/app/javascript/react/components/ShowIndex.js
@@ -4,6 +4,8 @@ import { Link } from "react-router-dom";
 const ShowIndex = (props) => {
 
   const [getShows, setShows] = useState([]);
+  const [getEpisodes, setEpisodes] = useState([]);
+
 
   useEffect(() => {
     fetch("/api/v1/shows")
@@ -20,11 +22,29 @@ const ShowIndex = (props) => {
       .then((body) => {
         let showList = body;
         setShows(showList.showData);
-        // debugger
       })
       .catch((error) => console.error(`Error in fetch: ${error.message}`));
   }, []);
 
+    // useEffect(() => {
+  //   fetch("/api/v1/episodes")
+  //     .then((response) => {
+  //       if (response.ok) {
+  //         return response;
+  //       } else {
+  //         let errorMessage = `${response.status} (${response.statusText})`,
+  //           error = new Error(errorMessage);
+  //         throw error;
+  //       }
+  //     })
+  //     .then((response) => response.json())
+  //     .then((body) => {
+  //       let episodeList = body;
+  //       setEpisodes(episodeList.episodeData);
+  //     })
+  //     .catch((error) => console.error(`Error in fetch: ${error.message}`));
+  // }, []);
+
 
 return (
   <p>Hello from Show Index</p>

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -8,19 +8,27 @@
 </head>
 <body>
 
-  <nav class="top-bar">
-    <h1><a href="/">TGIF Time Machine</a></h1>
-
-    <section class="top-bar-section">
-      <ul class="right">
-        <%- if current_user -%>
-          <li><%= link_to 'Sign Out', destroy_user_session_path, method: :delete %></li>
-        <%- else -%>
-          <li><%= link_to 'Sign Up', new_user_registration_path %></li>
-          <li><%= link_to 'Sign In', new_user_session_path %></li>
-        <%- end -%>
-      </ul>
-    </section>
+   <nav class="top-bar topbar-responsive">
+    <div>
+    <ul class="dropdown menu" data-dropdown-menu>
+      <li class="has-submenu">
+        <a href="#0"><span><button class="menu-icon" type="button"></button>
+        </span></a>
+        <ul class="submenu menu vertical" data-submenu>
+          <li ><a class="main-menu-item" href="/">Home</a></li>
+          <li ><a class="main-menu-item" href="/shows">Show & Episode Info</a></li>
+          <li ><a class="main-menu-item" href="#0">About</a></li>
+          <%- if current_user -%>
+          <li id="sign-out"><%= link_to 'Sign Out', destroy_user_session_path, method: :delete %></li>
+          <%- else -%>
+          <li id="sign-up"><%= link_to 'Sign Up', new_user_registration_path %></li>
+          <li id="sign-in"><%= link_to 'Sign In', new_user_session_path %></li>
+          <% end %>
+        </ul>
+      </li>
+    </ul>
+    </div>
+      <h1><a id="title-link" href="/">TGIF Time Machine</a></h1>
   </nav>
 
   <%- flash.each do |key, value| -%>

diff --git a/config/routes.rb b/config/routes.rb
@@ -3,6 +3,8 @@
   devise_for :users
   # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
 
+  get '/shows', to: "homes#index"
+
   namespace :api do 
     namespace :v1 do
       resources :shows, only: [:index, :show]

diff --git a/lib/.DS_Store b/lib/.DS_Store
diff --git a/open-menu.png b/open-menu.png
diff --git a/package.json b/package.json
@@ -6,10 +6,6 @@
     "yarn": ">=0.25.2"
   },
   "dependencies": {
-    "@rails/webpacker": "3.5",
-    "prop-types": "~15.6.0",
-    "react": "~16.8.0",
-    "react-dom": "~16.8.0",
     "@babel/core": "^7.5.5",
     "@babel/plugin-proposal-class-properties": "^7.0.0",
     "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
@@ -20,18 +16,23 @@
     "@babel/preset-env": "^7.5.5",
     "@babel/preset-react": "^7.0.0",
     "@babel/runtime": "^7.6.2",
+    "@rails/webpacker": "3.5",
     "babel-loader": "^8.0.6",
+    "foundation-sites": "^6.6.3",
+    "prop-types": "~15.6.0",
+    "react": "~16.8.0",
+    "react-dom": "~16.8.0",
     "react-router-dom": "5.0.0",
     "redbox-react": "1.6.0"
   },
   "devDependencies": {
-    "webpack-dev-server": "^2.11.1",
-    "webpack-cli": "^2.0.10",
     "babel-jest": "^24.9.0",
+    "enzyme": "~3.10.0",
+    "enzyme-adapter-react-16": "~1.14.0",
     "fetch-mock": "~5.13.1",
     "jest": "^24.9.0",
-    "enzyme": "~3.10.0",
-    "enzyme-adapter-react-16": "~1.14.0"
+    "webpack-cli": "^2.0.10",
+    "webpack-dev-server": "^2.11.1"
   },
   "scripts": {
     "start": "./bin/webpack-dev-server",
@@ -53,4 +54,4 @@
     ],
     "testURL": "http://localhost/"
   }
-}
+}
diff --git a/yarn.lock b/yarn.lock
@@ -5230,6 +5230,11 @@ forwarded@~0.1.2:
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
   integrity sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=
 
+foundation-sites@^6.6.3:
+  version "6.6.3"
+  resolved "https://registry.yarnpkg.com/foundation-sites/-/foundation-sites-6.6.3.tgz#8ca5f246357db69e6a0e73351ce06aa8acce6540"
+  integrity sha512-8X93wUAmUg1HhVv8uWMWnwoBLSQWSmFImJencneIZDctswn724Bq/MV1cbPZN/GFWGOB/9ngoQHztfzd4+ovCg==
+
 fragment-cache@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"