From c138b64a104ab1b8ad20289406790ad98499b621 Mon Sep 17 00:00:00 2001 From: Avichai Date: Thu, 13 Dec 2018 14:51:03 -0500 Subject: [PATCH] Mostly CSS changes --- app/assets/stylesheets/components/header.scss | 3 ++- .../stylesheets/components/main_content.scss | 23 ++++++++++++++--- .../stylesheets/components/music_player.scss | 2 ++ .../components/playlist_song_form.scss | 4 +-- app/assets/stylesheets/components/search.scss | 10 +++++--- .../components/show_box_content.scss | 25 +++++++++++++++++-- .../main/header/album_index_container.js | 2 +- .../components/main/header/grid_index.jsx | 6 ++--- .../main/header/grid_index_item.jsx | 1 + frontend/components/main/header/grid_show.jsx | 13 ++++++++-- .../main/header/playlist_index_container.js | 2 +- .../components/main/header/search/search.jsx | 6 ++--- .../main/header/search/search_results.jsx | 8 +++--- .../main/header/songs_index_item.jsx | 2 ++ frontend/components/main/main_content.jsx | 4 +-- .../components/main/playbar/music_player.jsx | 2 +- package-lock.json | 14 +++++++++++ package.json | 1 + 18 files changed, 100 insertions(+), 28 deletions(-) diff --git a/app/assets/stylesheets/components/header.scss b/app/assets/stylesheets/components/header.scss index f1c17ef..ed28c52 100644 --- 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 index a863aeb..011a213 100644 --- 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 index 7237008..6b7bf42 100644 --- 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 index 503ec15..644c688 100644 --- 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 index 3eada5c..507dc97 100644 --- a/app/assets/stylesheets/components/search.scss +++ b/app/assets/stylesheets/components/search.scss @@ -9,9 +9,9 @@ .search-header h2 { color: #FFFFFF; - font-size: 28px; + font-size: 29px; line-height: 36px; - margin-bottom: 10px; + margin-bottom: 15px; font-weight: 650; } @@ -19,6 +19,7 @@ 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 index 8c0658c..e3c50bf 100644 --- 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 index ec99508..14717bb 100644 --- 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 index 53f015d..08d99d3 100644 --- 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 index 69404ab..26ff3ed 100644 --- 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 = () } + debugger return (
  • diff --git a/frontend/components/main/header/grid_show.jsx b/frontend/components/main/header/grid_show.jsx index c5cccd2..e20aabf 100644 --- 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 ( diff --git a/frontend/components/main/header/playlist_index_container.js b/frontend/components/main/header/playlist_index_container.js index a121eba..244d09a 100644 --- 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 index 428fd55..c69b98f 100644 --- 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 index 96e24d8..90b00c5 100644 --- 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 (

    Top Results

    Albums

    - +

    Playlists

    - +

    Artists

    - +
    ); diff --git a/frontend/components/main/header/songs_index_item.jsx b/frontend/components/main/header/songs_index_item.jsx index b8d339c..58fd567 100644 --- 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 { ) : (
    + audiotrack

    { 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 index f35bf7a..8f9acbe 100644 --- 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 = (

    @@ -53,7 +53,7 @@ class MainContent extends React.Component { } let header = ''; - debugger + if (this.props.navpath.includes("search")){ header = ( ); } else { diff --git a/frontend/components/main/playbar/music_player.jsx b/frontend/components/main/playbar/music_player.jsx index e986af6..bcd2a08 100644 --- 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 }
    -