Skip to content

Instantly share code, notes, and snippets.

@JonathanPorta
Created August 14, 2018 22:12
Show Gist options
  • Save JonathanPorta/d0519da4ee4e4eed0208341910fb4a5e to your computer and use it in GitHub Desktop.
Save JonathanPorta/d0519da4ee4e4eed0208341910fb4a5e to your computer and use it in GitHub Desktop.
Plopping a copy down here before the big ol'
import React from 'react'
import { Link } from 'react-router-dom'
const TableView = props => (
<div class="row m-b-20">
<div class="col-xs-12 col-lg-9">
<h4> Watches </h4>
<p>All watches</p>
</div>
<div class="col-xs-12 col-lg-3">
<div class="p-20">
<div class="input-daterange input-group" id="orders-date-picker">
<input type="text" class="input-sm form-control n-r" name="start" />
<span class="input-group-addon n-r">to</span>
<input type="text" class="input-sm form-control n-r" name="end" />
</div>
</div>
</div>
<div class="col-xs-12">
<div class="table-responsive demo-table">
<table class="table table-hover table-striped">
<thead>
<tr>
<th>Status</th>
<th>URL</th>
<th>Unseen diffs</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="tag tag-success">passing</span>
</td>
<td>{'https://google.com'}</td>
<td>
<div class="row m-b-20">
<div class="row">
<div class="grayscale-1 col">
<img
src="https://unsplash.it/900/600?image=872"
class="img-fluid"
style={{
height: 100,
width: 150,
marginRight: 10,
border: '#cecaca',
borderWidth: 5,
borderStyle: 'double',
borderRadius: 10
}}
/>
</div>
<div class="col">
<div
class="grayscale-1"
style={{
height: 100,
width: 150,
position: 'relative'
}}
>
<img
src="https://unsplash.it/900/600?image=872"
class="img-fluid"
style={{
height: 100,
width: 150,
border: '#cecaca',
borderWidth: 5,
borderStyle: 'double',
borderRadius: 10
}}
/>
<span
style={{ right: 7, left: 'auto', top: 7 }}
class="label label-rounded label-danger label-md zmdi-hc-stack-1x"
>
3
</span>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<span class="tag tag-warning">pending</span>
</td>
<td>{'https://google.com'}</td>
<td>
<div class="row m-b-20">
<div class="row">
<div class="grayscale-1 col">
<img
src="https://unsplash.it/900/600?image=872"
class="img-fluid"
style={{
height: 100,
width: 150,
marginRight: 10,
border: '#cecaca',
borderWidth: 5,
borderStyle: 'double',
borderRadius: 10
}}
/>
</div>
<div class="col">
<div
class="grayscale-1"
style={{
height: 100,
width: 150,
position: 'relative'
}}
>
<img
src="https://unsplash.it/900/600?image=872"
class="img-fluid"
style={{
height: 100,
width: 150,
border: '#cecaca',
borderWidth: 5,
borderStyle: 'double',
borderRadius: 10
}}
/>
<span
style={{ right: 7, left: 'auto', top: 7 }}
class="label label-rounded label-danger label-md zmdi-hc-stack-1x"
>
3
</span>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr style={{ opacity: 0.5 }}>
<td>
<span class="tag tag-default-outline">disabled</span>
</td>
<td>{'https://google.com'}</td>
<td />
</tr>
<tr>
<td>
<span class="tag tag-danger">failing</span>
</td>
<td>{'https://google.com'}</td>
<td />
</tr>
<tr>
<td>
<span class="tag tag-success">passing</span>
</td>
<td>{'https://google.com'}</td>
<td />
</tr>
<tr>
<td>
<span class="tag tag-success">passing</span>
</td>
<td>{'https://google.com'}</td>
<td />
</tr>
<tr>
<td>
<span class="tag tag-success">passing</span>
</td>
<td>{'https://google.com'}</td>
<td>
<div class="row m-b-20">
<div class="row">
<div class="grayscale-1 col">
<img
src="https://unsplash.it/900/600?image=872"
class="img-fluid"
style={{
height: 100,
width: 150,
marginRight: 10,
border: '#cecaca',
borderWidth: 5,
borderStyle: 'double',
borderRadius: 10
}}
/>
</div>
<div class="col">
<div
class="grayscale-1"
style={{
height: 100,
width: 150,
position: 'relative'
}}
>
<img
src="https://unsplash.it/900/600?image=872"
class="img-fluid"
style={{
height: 100,
width: 150,
border: '#cecaca',
borderWidth: 5,
borderStyle: 'double',
borderRadius: 10
}}
/>
<span
style={{ right: 7, left: 'auto', top: 7 }}
class="label label-rounded label-danger label-md zmdi-hc-stack-1x"
>
3
</span>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
)
export default TableView
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment