Mostly CSS changes

dustin-chan · Dec 13, 2018 · c138b64 · c138b64
1 parent 31512eb
commit c138b64
Show file tree

Hide file tree

Showing 18 changed files with 100 additions and 28 deletions.
diff --git a/app/assets/stylesheets/components/header.scss b/app/assets/stylesheets/components/header.scss
@@ -81,6 +81,7 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
+  margin-bottom: 200px;
 }
 
 .x-button {
@@ -188,7 +189,7 @@
   justify-content: center;
   align-items: center;
   text-align: center;
-  margin-bottom: 25%;
+  margin-bottom: 15%;
   color: white;
 }
 

diff --git a/app/assets/stylesheets/components/main_content.scss b/app/assets/stylesheets/components/main_content.scss
@@ -123,6 +123,7 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
+  margin-top: 20px;
   padding-left: 20%;
 }
 
@@ -189,12 +190,28 @@
   color:white;
   padding-bottom: 5px;
   font-size: 14px;
+  font-weight: 450;
   font-family: Circular,Helvetica,Arial,sans-serif;
 }
 
-.artist-subtext, .album-subtext, .playlist-subtext span {
-  color: lightgray;
-  font-weight: 100;
+.album-item p {
+  color: white;
+  padding-bottom: 5px;
+  font-size: 14px;
+  font-weight: 450;
+  font-family: Circular,Helvetica,Arial,sans-serif;
+}
+
+.artist-subtext span {
+  color:white;
+  padding-bottom: 5px;
   font-size: 14px;
   font-family: Circular,Helvetica,Arial,sans-serif;
 }
+
+.album-subtext, .playlist-subtext span {
+  color: lightgray;
+  font-weight: 200;
+  font-size: 12px;
+  font-family: Circular,Helvetica,Arial,sans-serif;
+}
diff --git a/app/assets/stylesheets/components/music_player.scss b/app/assets/stylesheets/components/music_player.scss
@@ -133,6 +133,7 @@ progress[value]::-webkit-progress-value {
 
 #volume-control {
   transition: color .1s linear;
+  margin-bottom: 2px;
 }
  #volume-control:hover {
   color: #1db954;
@@ -141,6 +142,7 @@ progress[value]::-webkit-progress-value {
  #volume {
   margin: 0 5px 0 20px;
   transition: color .1s linear;
+  color: hsla(0, 0%, 100%, .6);
 }
  #volume:hover {
   cursor: pointer;

diff --git a/app/assets/stylesheets/components/playlist_song_form.scss b/app/assets/stylesheets/components/playlist_song_form.scss
@@ -7,8 +7,8 @@
 }
 
 .song-form-image {
-  width: 150px;
-  height: 150px;
+  width: 250px;
+  height: 250px;
 }
 
 .song-form-image {

diff --git a/app/assets/stylesheets/components/search.scss b/app/assets/stylesheets/components/search.scss
@@ -9,16 +9,17 @@
 
 .search-header h2 {
   color: #FFFFFF;
-  font-size: 28px;
+  font-size: 29px;
   line-height: 36px;
-  margin-bottom: 10px;
+  margin-bottom: 15px;
   font-weight: 650;
 }
 
 .search-header p {
   color: #f2f0ee;
   font-size: 14px;
   font-weight: 300;
+  margin-top: 32px;
 }
 
 .search-section {
@@ -27,15 +28,16 @@
 
 .search-section h2 {
   color: #FFFFFF;
-  font-size: 18px;
+  font-size: 29px;
   font-weight: 650;
   text-align: center;
   margin-bottom: 20px;
+  margin-top: 40px;
 }
 
 .search-section h3 {
   color: #FFFFFF;
-  font-size: 18px;
+  font-size: 23px;
   font-weight: 650;
   margin-left: 53px;
 }

diff --git a/app/assets/stylesheets/components/show_box_content.scss b/app/assets/stylesheets/components/show_box_content.scss
@@ -116,13 +116,20 @@
 //   display: flex;
 //   flex-direction: column;
 // }
+// .songItemInfo{
+//   display: flex;
+//   flex-direction: column;
+// }
+
 .song-index-title{
   margin-left: 16px;
 }
+
 .song-index-album{
   margin-left: 15px;
   font-size: 14px;
-  color: gray;
+  color: white;
+  opacity: .65;
 }
 
 div[class*="song-index"] {
@@ -133,7 +140,7 @@ div[class*="song-index"] {
   height: 60px;
   padding: 5px 5px 5px 15px;
   transition: background-color .2s linear;
-  width: 700px;
+  width: 1000px;
   padding-right: 40px;
 }
 
@@ -146,11 +153,25 @@ div[class*="song-index"] p {
   opacity: 0;
 }
 
+div[class*="song-index"] span {
+  margin-bottom: 12px;
+  margin-left: 15px;
+  opacity: .65;
+}
+
 div[class*="song-index"]:hover p {
   opacity: 1;
   cursor: pointer;
 }
 
+div[class*="song-index"]:hover span {
+  display: none;
+}
+
+div[class*="song-index-item"]:hover{
+  padding-left: 30px;
+}
+
 .index-button-container {
   display: flex;
   justify-content: center;

diff --git a/frontend/components/main/header/album_index_container.js b/frontend/components/main/header/album_index_container.js
@@ -5,7 +5,7 @@ import { fetchAlbums } from '../../../actions/album_actions';
 import { selectRandomAlbums } from '../../../reducers/selectors';
 
 const mapStateToProps = (state, ownProps) => {
-  debugger
+
   return {
     path: "album",
     navpath: ownProps.navpath,

diff --git a/frontend/components/main/header/grid_index.jsx b/frontend/components/main/header/grid_index.jsx
@@ -4,21 +4,21 @@ import GridIndexItem from './grid_index_item';
 class GridIndex extends React.Component {
 
   constructor(props){
-    debugger
+
     super(props);
     this.fetchElements = props.fetchPlaylists || props.fetchArtists || props.fetchAlbums;
     this.fetchElements = this.fetchElements.bind(this);
   }
 
   componentDidMount(){
-    debugger
+
     this.fetchElements(
       {search_term: this.props.searchTerm}
     );
   }
 
   componentWillReceiveProps(nextProps) {
-    debugger
+
     if (nextProps.searchTerm && this.props.searchTerm !== nextProps.searchTerm) {
       this.fetchElements({
         search_term: nextProps.searchTerm

diff --git a/frontend/components/main/header/grid_index_item.jsx b/frontend/components/main/header/grid_index_item.jsx
@@ -22,6 +22,7 @@ import { Link } from 'react-router-dom';
    } else {
      img = (<img src={element.photoUrl}></img>)
    }
+   debugger
    return (
      <li className={`${path}-item`} key={element.id}>
        <Link to={`/${navpath}/${path}s/${element.id}`}>

diff --git a/frontend/components/main/header/grid_show.jsx b/frontend/components/main/header/grid_show.jsx
@@ -12,18 +12,27 @@ class GridShow extends React.Component {
     this.fetchElement = this.props.fetchPlaylist || this.props.fetchAlbum;
     this.elementId = this.props.playlistId || this.props.albumId;
     this.fetchElement = this.fetchElement.bind(this);
+    this.timeout = this.timeout.bind(this);
+  }
+
+  timeout(){
+    setTimeout(() => this.setState({loading: false}), 700);
   }
 
   componentDidMount(){
     this.fetchElement(this.elementId)
-    .then( () => setTimeout(() => this.setState({loading: false}), 700));
+    .then( this.timeout );
   }
 
   render () {
+    function isDefined(song){
+      return song ? true : false;
+    }
+
     const {playlist, album, logout, songs} = this.props;
     let tracks = '';
     let element = playlist || album;
-    if(songs[0]){
+    if(songs.every(isDefined)){
        tracks = songs.map((song) => {
         return (
           <SongsIndexItem key={song.id} song={song} playlist={playlist} album={album}/>

diff --git a/frontend/components/main/header/playlist_index_container.js b/frontend/components/main/header/playlist_index_container.js
@@ -5,7 +5,7 @@ import { fetchPlaylists } from '../../../actions/playlist_actions';
 import { selectAllPlaylists } from '../../../reducers/selectors';
 
 const mapStateToProps = (state, ownProps) => {
-  debugger
+
   return {
     path: "playlist",
     navpath: ownProps.navpath,

diff --git a/frontend/components/main/header/search/search.jsx b/frontend/components/main/header/search/search.jsx
@@ -4,19 +4,19 @@ import SearchResults from './search_results';
 
 class Search extends React.Component {
   constructor(props) {
-    debugger
+
     super(props);
     this.state = { searchTerm: '' };
     this.handleChange = this.handleChange.bind(this);
   }
 
   handleChange(e) {
-    debugger
+
     this.setState({ searchTerm: e.target.value });
   }
 
   render () {
-    debugger
+
     let results;
     if (this.state.searchTerm) {
       results = (

diff --git a/frontend/components/main/header/search/search_results.jsx b/frontend/components/main/header/search/search_results.jsx
@@ -9,18 +9,20 @@ import { withRouter, Route, Link } from 'react-router-dom';
 import { connect } from 'react-redux';
 
 class SearchResults extends React.Component {
+
   render () {
+    const navpath = "browse";
     const section = this.props.match.params.section;
     return (
       <div className="search-results">
         <div className="search-section">
             <h2>Top Results</h2>
             <h3>Albums</h3>
-            <AlbumIndexContainer searchTerm={this.props.searchTerm} />
+            <AlbumIndexContainer searchTerm={this.props.searchTerm} navpath={navpath} />
             <h3>Playlists</h3>
-            <PlaylistIndexContainer searchTerm={this.props.searchTerm} />
+            <PlaylistIndexContainer searchTerm={this.props.searchTerm} navpath={navpath}/>
             <h3>Artists</h3>
-            <ArtistIndexContainer searchTerm={this.props.searchTerm} />
+            <ArtistIndexContainer searchTerm={this.props.searchTerm} navpath={navpath}/>
         </div>
       </div>
     );

diff --git a/frontend/components/main/header/songs_index_item.jsx b/frontend/components/main/header/songs_index_item.jsx
@@ -4,6 +4,7 @@ import { NavLink, withRouter } from 'react-router-dom';
 import { openModal } from '../../../actions/modal_actions';
 import { connect } from 'react-redux';
 import { receiveCurrentSong, pauseCurrentSong, putSongInState } from '../../../actions/song_actions';
+import { ContextMenu, MenuItem, ContextMenuTrigger } from "react-contextmenu";
 
 const mapStateToProps = state => {
   return {
@@ -75,6 +76,7 @@ class SongsIndexItem extends React.Component {
         </div>
       ) : (
         <div className="index-button-container">
+          <span className="material-icons">audiotrack</span>
           <p className="material-icons" onClick={() => {
               this.togglePlay(song.id, element.id, elementType);
             }}>play_arrow

diff --git a/frontend/components/main/main_content.jsx b/frontend/components/main/main_content.jsx
@@ -19,7 +19,7 @@ class MainContent extends React.Component {
     const {playlists, navpath, show, path, artists, albums} = this.props;
 
     let index = "";
-    debugger
+
     if (!path || path.includes("playlists") && !path.includes("search")) {
       index = (
         <div className="grid">
@@ -53,7 +53,7 @@ class MainContent extends React.Component {
     }
 
     let header = '';
-    debugger
+
     if (this.props.navpath.includes("search")){
       header = ( <Search/> );
     } else {

diff --git a/frontend/components/main/playbar/music_player.jsx b/frontend/components/main/playbar/music_player.jsx
@@ -192,7 +192,7 @@ class MusicPlayer extends React.Component {
               { playbar }
             </div>
 
-            <audio
+            <audio id="testing"
               ref={ tag => this.audio = tag }
               autoPlay
               src={ songInfo.trackUrl }

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "babel-loader": "^8.0.4",
     "lodash": "^4.17.11",
     "react": "^16.6.3",
+    "react-contextmenu": "^2.10.0",
     "react-dom": "^16.6.3",
     "react-redux": "^5.1.1",
     "react-router-dom": "^4.3.1",