From c85b0c3aec492cb0aace60751e56d24c190d8c33 Mon Sep 17 00:00:00 2001 From: Avichai Date: Thu, 15 Nov 2018 09:46:59 -0500 Subject: [PATCH] Add browse page --- app/assets/stylesheets/components/browse.scss | 85 +++++++++++++++++++ ...te_active_storage_tables.active_storage.rb | 26 ++++++ frontend/components/App.jsx | 4 +- frontend/components/browse/browse.jsx | 5 +- .../components/browse/browse_container.js | 19 +++++ frontend/components/splash/splash.jsx | 8 +- 6 files changed, 139 insertions(+), 8 deletions(-) create mode 100644 app/assets/stylesheets/components/browse.scss create mode 100644 db/migrate/20181115144513_create_active_storage_tables.active_storage.rb create mode 100644 frontend/components/browse/browse_container.js diff --git a/app/assets/stylesheets/components/browse.scss b/app/assets/stylesheets/components/browse.scss new file mode 100644 index 0000000..c49f3ef --- /dev/null +++ b/app/assets/stylesheets/components/browse.scss @@ -0,0 +1,85 @@ +.main-container { + height: 1000px; + background-color: red; /* For browsers that do not support gradients */ + background-image: linear-gradient(orange, red, black); +} + +// .main-container { +// /* Set rules to fill background */ +// min-height: 100%; +// min-width: 1024px; +// +// /* Set up proportionate scaling */ +// width: 100%; +// height: auto; +// +// /* Set up positioning */ +// position: fixed; +// top: 0; +// left: 0; +// } + +.main-container .nav-bar { + height: 100%; + width: 250px; + position: fixed; + z-index: 1; + top: 0; + left: 0; + background-color: #111; + overflow-x: hidden; + padding-top: 20px; + opacity: .9; +} + +// .main-container .nav-bar a { +// padding: 6px 8px 6px 16px; +// text-decoration: none; +// font-size: 25px; +// color: purple; +// display: block; +// } +// +// .main-container .nav-bar a:hover { +// color: #f1f1f1; +// } + +// @media screen and (max-width: 1024px) { /* Specific to this particular image */ +// .main-container { +// left: 50%; +// margin-left: -512px; /* 50% */ +// } +// } +// +// .main-container .nav-bar { +// padding: 24px 24px 5px; +// display: -webkit-box; +// display: -ms-flexbox; +// display: flex; +// -webkit-box-orient: vertical; +// -webkit-box-direction: normal; +// -ms-flex-direction: column; +// flex-direction: column; +// height: 100%; +// -webkit-user-select: none; +// -moz-user-select: none; +// -ms-user-select: none; +// user-select: none; +// width: 230px; +// cursor: default; +// } + + +// body { +// --glue-font-family: "spotify-circular","noto-arabic","Helvetica Neue",Helvetica,Arial,"Hiragino Kaku Gothic Pro","Meiryo","MS Gothic",sans-serif; +// } + +// body, button, input { +// font-size: 14px; +// line-height: 20px; +// letter-spacing: .015em; +// font-weight: var(--glue-font-weight-normal); +// color: #b3b3b3; +// text-transform: none; +// font-family: var(--glue-font-family); +// } diff --git a/db/migrate/20181115144513_create_active_storage_tables.active_storage.rb b/db/migrate/20181115144513_create_active_storage_tables.active_storage.rb new file mode 100644 index 0000000..360e0d1 --- /dev/null +++ b/db/migrate/20181115144513_create_active_storage_tables.active_storage.rb @@ -0,0 +1,26 @@ +# This migration comes from active_storage (originally 20170806125915) +class CreateActiveStorageTables < ActiveRecord::Migration[5.2] + def change + create_table :active_storage_blobs do |t| + t.string :key, null: false + t.string :filename, null: false + t.string :content_type + t.text :metadata + t.bigint :byte_size, null: false + t.string :checksum, null: false + t.datetime :created_at, null: false + + t.index [ :key ], unique: true + end + + create_table :active_storage_attachments do |t| + t.string :name, null: false + t.references :record, null: false, polymorphic: true, index: false + t.references :blob, null: false + + t.datetime :created_at, null: false + + t.index [ :record_type, :record_id, :name, :blob_id ], name: "index_active_storage_attachments_uniqueness", unique: true + end + end +end diff --git a/frontend/components/App.jsx b/frontend/components/App.jsx index 6fe66cd..bae7d40 100644 --- a/frontend/components/App.jsx +++ b/frontend/components/App.jsx @@ -4,7 +4,7 @@ import { Route, Switch } from 'react-router-dom'; import LoginFormContainer from './session/login_form_container'; import SignupFormContainer from './session/signup_form_container'; import SplashContainer from './splash/splash_container'; -// import Browse from './splash/splash'; +import Browse from './browse/browse'; const App = () => { return ( @@ -13,11 +13,11 @@ const App = () => { + ) }; -// export default App; diff --git a/frontend/components/browse/browse.jsx b/frontend/components/browse/browse.jsx index c004d14..9d16dd6 100644 --- a/frontend/components/browse/browse.jsx +++ b/frontend/components/browse/browse.jsx @@ -4,8 +4,9 @@ class Browse extends React.Component { render() { return ( -
-

Browse

+
+
); } diff --git a/frontend/components/browse/browse_container.js b/frontend/components/browse/browse_container.js new file mode 100644 index 0000000..a5f2e32 --- /dev/null +++ b/frontend/components/browse/browse_container.js @@ -0,0 +1,19 @@ +import { connect } from 'react-redux'; +import React from 'react'; +import { Link } from 'react-router-dom'; +import { login } from '../../actions/session_actions'; +import SessionForm from './session_form'; + +const mapStateToProps = (state) => { + return { + + }; +}; + +const mapDispatchToProps = dispatch => { + return { + + }; +}; + +export default connect(mapStateToProps, mapDispatchToProps)(SessionForm); diff --git a/frontend/components/splash/splash.jsx b/frontend/components/splash/splash.jsx index 1d17291..8ce846e 100644 --- a/frontend/components/splash/splash.jsx +++ b/frontend/components/splash/splash.jsx @@ -1,5 +1,8 @@ import React from 'react'; import { Link } from 'react-router-dom'; +import Browse from '../browse/browse'; +import { withRouter, Route, Redirect } from 'react-router-dom'; + const sessionLinks = () => (
@@ -31,10 +34,7 @@ const sessionLinks = () => ( const personalGreeting = (currentUser, logout) => { return ( -
-

Hi, {currentUser.username}!

- -
+ ) };