Permalink
Browse files

basic styling for image tiles

  • Loading branch information...
hwilliams13 committed Dec 2, 2019
1 parent 0563598 commit 4cd1f494628c78a5b87e233e6051c0ee90eae4a4
@@ -126,4 +126,7 @@ venv.bak/
dmypy.json

# Pyre type checker
.pyre/
.pyre/

# sample images
barter_project/media/
BIN +109 KB Project Docs/ERD.JPG
Binary file not shown.
BIN +373 KB Project Docs/ERD.pdf
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,23 @@
# Generated by Django 2.2.7 on 2019-12-02 14:47

from django.db import migrations, models


class Migration(migrations.Migration):

dependencies = [
('barter_app', '0004_auto_20191125_1332'),
]

operations = [
migrations.AlterField(
model_name='item',
name='image',
field=models.TextField(),
),
migrations.AlterField(
model_name='message',
name='image',
field=models.TextField(),
),
]
@@ -10,7 +10,8 @@ def __str__(self):
class Item(models.Model):
name = models.CharField(max_length=100, default='n/a')
# photo = models.BinaryField() # remember to add back to serializers if activated
image = models.ImageField(upload_to='images/') # remember to add back to serializers if activated
# image = models.ImageField(upload_to='images/') # remember to add back to serializers if activated
image = models.TextField() # will use separate image hostin site like imgur
description = models.TextField(default='n/a')
category = models.CharField(max_length=50)
location = models.TextField()
@@ -30,5 +31,6 @@ class Message(models.Model):
time_stamp = models.DateTimeField(auto_now=True)
content = models.CharField(max_length=140, default='n/a')
# photo = models.BinaryField() # remember to add back to serializers if activated
image = models.ImageField(upload_to='images/') # remember to add back to serializers if activated
# image = models.ImageField(upload_to='images/') # remember to add back to serializers if activated
image = models.TextField()
conversation = models.ForeignKey(Conversation, on_delete=models.CASCADE, related_name='messages', blank=True, null=True)
@@ -20,3 +20,20 @@
.App-link {
color: #09d3ac;
}

#main {
width: 1000px;
margin: 0 auto;
}

#footer {
background-color: orange;
width: 100%;
height: 100px;
position: fixed;
bottom: 0;
}

::-webkit-scrollbar {
width: 0px;
}
@@ -1,13 +1,13 @@
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
// import { createStore } from 'redux';
// import { Provider } from 'react-redux';
import axios from 'axios';

import logo from './logo.svg';
import './App.css';

import DashBoard from './components/DashBoard.js';
import MainFeed from './components/MainFeed.js'

// const initialState = {
// itemList: []
@@ -51,14 +51,16 @@ class App extends React.Component {
<h1>BARTER</h1>
<nav></nav>
</header>
<Switch>
{/* <Route exact path='/'>
<DashBoard itemList={[{name: 'box'}, {name: 'knife'}, {name: 'tickets'}]} />
<DashBoard />
</Route> */}
<Route exact path='/' component={DashBoard} />
</Switch>
<footer>
<main id="main">
<Switch>
{/* <Route exact path='/'>
<DashBoard itemList={[{name: 'box'}, {name: 'knife'}, {name: 'tickets'}]} />
<DashBoard />
</Route> */}
<Route exact path='/' component={MainFeed} />
</Switch>
</main>
<footer id="footer">
<nav></nav>
</footer>
</Router>
@@ -0,0 +1,30 @@
#item-list-holder {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
}

.item-tile {
width: 300px;
height: 300px;
margin: 15px;
border-radius: 30px;
background-size: cover;
background-position: center;
display: flex;
justify-content: center;
align-items: flex-end;
}

.item-tile-name {
width: 100%;
height: 30px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
background-color: white;
opacity: 0.7;
display: flex;
align-items: center;
justify-content: center;
}
@@ -0,0 +1,14 @@
import React from 'react';

class CommandBar extends React.Component {

render() {
return (
<nav>
<ul>
<li>MAIN FEED</li>
</ul>
</nav>
)
}
}
@@ -0,0 +1,16 @@
import React from 'react';

import axios from 'axios';

class ItemTile extends React.Component {

render() {
return (
<div className="item-tile" style={{backgroundImage: `url(${this.props.image})`}}>
<p className="item-tile-name">{this.props.name}</p>
</div>
)
}
}

export default ItemTile;
@@ -1,10 +1,13 @@
import React from 'react';
import { connect } from 'react-redux';
// import { connect } from 'react-redux';
import axios from 'axios';
import ItemTile from './ItemTile.js'

import { Link } from 'react-router-dom';

class DashBoard extends React.Component {
import '../MainFeed.css'

class MainFeed extends React.Component {

state = {
itemList: []
@@ -38,16 +41,15 @@ class DashBoard extends React.Component {
// const itemList = this.itemList.map((item) => {
console.log(item)
return (
<div>
<img className="item-pic" src={item.image} />
<p>{item.name}</p>
</div>
<ItemTile name={item.name} image={item.image} />
)
})
return (
<div>
<div id="dashboard">
<h2>DashBoard</h2>
{itemList}
<div id="item-list-holder">
{itemList}
</div>
<button onClick={this.getItemList}>Refresh</button>
</div>
)
@@ -63,4 +65,4 @@ class DashBoard extends React.Component {
// }
// export default connect(mapStateToProps)(DashBoard);

export default DashBoard;
export default MainFeed;
@@ -1,13 +1,22 @@
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
width: 100%;
height: 100%;
background-color: yellow;
}

code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
}

0 comments on commit 4cd1f49

Please sign in to comment.