Issue #16: Grid en search y recomended

src/components/Grid.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import './Grid.scss';
+
+export const Col = (props) => {
+ return <div className="col">{props.children}</div>
+}
+
+export const Row = (props) => {
+ return <div className="row">{props.children}</div>
+}
+
+export const Grid = (props) => {
+ return <div className="grid">{props.children}</div>
+}

src/components/Grid.scss

@@ -1,5 +1,5 @@
 .grid {
-  --gutter: 1em;
+  --gutter: 1rem;
   width: 100%;
 
   .row {

src/components/SearchBar.scss

@@ -1,7 +1,4 @@
 .searchbar {
-  margin-bottom: 2em;
-  margin-top: 1em;
-
   input {
     border: var(--line-width) solid var(--accent);
     border-right: none;

src/index.jsx

@@ -4,7 +4,6 @@ import ReactDOM from 'react-dom';
 
 import './styles/reset.css';
 import './styles/main.scss';
-import './styles/grid.scss';
 import './styles/tabs.scss';
 
 import {Nav} from "./components/Nav";

src/styles/tabs.scss

@@ -2,10 +2,10 @@ ul.tabs {
   display: flex;
   align-items: stretch;
   border-bottom: var(--line-width) var(--gray-1) solid;
-  margin: 1rem 0;
+  margin-top: 1em;
 
   li.tab {
-    padding: .5rem 1em;
+    padding: .5em 1em;
     margin-bottom: -2px;
     cursor: pointer;
 

src/views/Recomended.jsx

@@ -5,6 +5,7 @@ import {getArtist, getDisc, getSong} from '../services/entity_service';
 
 import {EntityList} from '../components/EntityList';
 import {CoverArt} from '../components/CoverArt';
+import {Grid, Row, Col} from '../components/Grid';
 
 const PopularArtists = () => {
   const artistIDs = ['fa3b825f-7c85-4377-b393-d28a2016e293', 'b2d122f9-eadb-4930-a196-8f221eeb0c66',
@@ -91,23 +92,23 @@ export const Recomended = () => {
   // TODO crear una forma de obtener cosas populares
   // Esto es un por mientras hago todo el resto y la pagina de inicio no se vea tan vacia
   return (
-    <div class='grid'>
+    <Grid>
-      <div class='row'>
+      <Row>
-        <div class='col'>
+        <Col>
           <h3>Artistas Populares</h3>
           <PopularArtists/>
-        </div>
+        </Col>
-        <div class='col'>
+        <Col>
           <h3>Canciones Populares</h3>
           <PopularSongs/>
-        </div>
+        </Col>
-      </div>
+      </Row>
-      <div className="row">
+      <Row>
-        <div className="col">
+        <Col>
           <h3>Discos Populares</h3>
           <PopularDiscs/>
-        </div>
+        </Col>
-      </div>
+      </Row>
-    </div>
+    </Grid>
   )
 }

src/views/Search.jsx

@@ -8,6 +8,7 @@ import {SearchBar} from "../components/SearchBar";
 import {Paginate} from "../components/Paginate";
 import {CoverArt} from "../components/CoverArt";
 import {EntityList} from "../components/EntityList";
+import {Grid, Col, Row} from '../components/Grid';
 
 
 const SearchSongs = (props) => {
@@ -188,12 +189,20 @@ const SearchArtists = (props) => {
   }
 
   return (
-        <Fragment>
+    <Grid>
+      <Row>
+        <Col>
           <ul className='entity_list'>
             {artistsContent}
           </ul>
+        </Col>
+      </Row>
+      <Row>
+        <Col>
           {paginateContent}
-        </Fragment>
+        </Col>
+      </Row>
+    </Grid>
   )
 }
 
@@ -258,19 +267,27 @@ export const Search = (props) => {
     navigateTo(who, query, page);
   };
 
-    const content = _ => {
+  const content = (() => {
     if (query) {
       return <SearchTabs query={query} onTabChanged={handleTabChange} onPageChange={handlePageChange} selected={who} page={page}/>
     } else {
       return null;
     }
-    }
+  })();
 
   return (
-        <Fragment>
+    <Grid>
-            <h1>Búsqueda</h1>
+      <Row><Col><h1>Búsqueda</h1></Col></Row>
+      <Row>
+        <Col>
           <SearchBar query={query} onQueryChanged={handleQueryChange} history={props.history}/>
-            {content()}
+        </Col>
-        </Fragment>
+      </Row>
+      <Row>
+        <Col>
+          {content}
+        </Col>
+      </Row>
+    </Grid>
   );
 }