Skip to content

Instantly share code, notes, and snippets.

@andysolomon

andysolomon/index.html

Last active January 2, 2018 16:29
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save andysolomon/46cc5a6e9ab4a6f1558396851ae563b0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save andysolomon/46cc5a6e9ab4a6f1558396851ae563b0 to your computer and use it in GitHub Desktop.
Download ZIP
WOED
Raw
index.html
<div>
<div id="standardViewContent">
<div mui-row="">
<div id="detail-rail-container" class="details-page__sub-content mui-p-n-l mui-p-n-r animate-fast" mui-col="20/24">
<div mui-row="">
<header mui-col="1/5" class="detail-rail__info mui-p-l mui-m-b mui-p-t">
<h2 id="customer-name" class="gamma h2 mui-m-b">WO# 12344567</h2>
</header>
<header mui-col="4/5" class="mui-p-t mui-m-b mui-p-l">
<div mui-row="gutters">
<div mui-col="1/4">
<ul class="detail-listing__specs col-double col">
<li class="col__item">Auction Code</li>
<li class="col__item bold">4263310</li>
<li class="col__item">VIN</li>
<li class="col__item bold">4263310</li>
<li class="col__item ng-binding">SBLU</li>
<li class="col__item bold">10,000</li>
<li class="col__item">Sale Key</li>
<li class="col__item bold">BLACK</li>
<li class="col__item">Scode Status</li>
<li class="col__item bold">4263310</li>
</ul>
</div>
<div mui-col="1/4">
<ul class="detail-listing__specs col-double col">
<li class="col__item ng-binding">Seller Number</li>
<li class="col__item bold">10,000</li>
<li class="col__item">Buyer Number</li>
<li class="col__item bold ng-binding">BLACK</li>
<li class="col__item">Buyer SOI</li>
<li class="col__item bold ng-binding">RED</li>
<li class="col__item">Seller SOI</li>
<li class="col__item bold ng-binding">RED</li>
<li class="col__item">3rd Party?</li>
<li class="col__item bold">Y</li>
</ul>
</div>
<div mui-col="1/4">
<ul class="detail-listing__specs col-double col">
<li class="col__item">Check-Out Date</li>
<li class="col__item bold ng-binding">4263310</li>
<li class="col__item">Lot #</li>
<li class="col__item bold ng-binding">RED</li>
<li class="col__item ng-binding">Consignment ID</li>
<li class="col__item bold">10,000</li>
<li class="col__item">Purchase Date</li>
<li class="col__item bold">BLACK</li>
<li class="col__item">Redemption Date</li>
<li class="col__item bold">RED</li>
</ul>
</div>
<div mui-col="1/4">
<ul class="detail-listing__specs col-double col">
<li class="col__item">If Sale?</li>
<li class="col__item bold">Y</li>
<li class="col__item">Open or Close Sale?</li>
<li class="col__item bold">O</li>
<li class="col__item">Transfered?</li>
<li class="col__item bold">N</li>
<li class="col__item">ARB Status</li>
<li class="col__item bold">RED</li>
<li class="col__item">EBIZ Hold</li>
<li class="col__item bold ng-binding">Title</li>
</ul>
</div>
</div>
</header>
</div>
<div id="ifsale-tabs" class="mui-tabs tabs--fancy tabs--full-width mui-p">
<ul class="mui-tabs__controls">
<li id="needsaction" class="mui-tabs__item tabselected">
<a class="mui-tabs__link mui-tabs__link--text-wrap" href=""><span class="di">Seller Fee Difference</span></a>
</li>
<li id="pendingsales" class="mui-tabs__item">
<a class="mui-tabs__link mui-tabs__link--text-wrap" href=""><span class="di">Buyer Fee Difference</span></a>
</li>
<li id="completedsales" class="mui-tabs__item">
<a class="mui-tabs__link mui-tabs__link--text-wrap" href=""><span class="di">Customer Difference</span></a>
</li>
<li id="completedsales" class="mui-tabs__item">
<a class="mui-tabs__link mui-tabs__link--text-wrap" href=""><span class="di">Vehicle Status Difference</span></a>
</li>
<li id="completedsales" class="mui-tabs__item">
<a class="mui-tabs__link mui-tabs__link--text-wrap" href=""><span class="di">Vehicle Difference</span></a>
</li>
</ul>
<div class="mui-tabs tabs--full-width">
<div class="tabs mui-tabs__controls">
<div class="tab mui-tabs__item">
<input type="radio" id="tab-1" name="tab-group-1" checked="">
<label for="tab-1">Tab One</label>
<div class="content">
<p>Stuff for Tab One</p>
</div>
</div>
<div class="tab mui-tabs__item">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Tab Two</label>
<div class="content">
<p>Stuff for Tab Two</p>
<img src="//placekitten.com/200/100">
</div>
</div>
<div class="tab mui-tabs__item">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Tab Three</label>
<div class="content">
<p>Stuff for Tab Three</p>
<img src="//placedog.com/200/100">
</div>
</div>
</div>
</div>
<div class="mui-m-t" mui-row>
<div class="mui-p" mui-col="24/24">
<div mui-row>
<table class="mui-table">
<thead>
<tr>
<th class="text-center vam bg-near-white" colspan="3"><div class="text-center vam bold">XODS</div></th>
<th class="text-center vam bg-near-white" colspan="6"><div class="text-center vam bold">ODS</div></th>
<th class="text-center vam bg-near-white" colspan="6"><div class="text-center vam bold">EBIZ</div></th>
<th class="text-center vam bg-near-white" style="width:12%;">
<h3 class="bold split"><span class="split__title">Incident</span> <span> <label class="di normal"><span class="normal">Select All</span></label> <input type="checkbox" /></span></h3>
</th>
</tr>
<tr class="truToolTableHeight">
<th>Fee Class</th>
<th>Class Value</th>
<th>Amount</th>
<th>Fee Class</th>
<th>Value</th>
<th>Amount</th>
<th>Desc</th>
<th>Source</th>
<th>Inv / Order</th>
<th>Fee Class</th>
<th>Value</th>
<th>Amount</th>
<th>Desc</th>
<th>Source</th>
<th>Inv / Order</th>
<th>
<div mui-row>
<div mui-col="14/24">
<div class="text-center">Incident</div>
<div><input placeholder="1234567" style="height:25px;" class="wide-100" /></div>
</div>
<div mui-col="1/24"></div>
<div mui-col="9/24">
<div class="text-center">Type</div>
<div class="text-center"><select style="height:25px;" class="wide-100"><option>OP</option></select></div>
</div>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sale Price</td>
<td>–</td>
<td>3,800</td>
<td>Sale Price</td>
<td>Subclass</td>
<td>500,000</td>
<td>Sale Price</td>
<td>N/A</td>
<td>103950541</td>
<td>Sale Price</td>
<td>Data</td>
<td>1,000,000</td>
<td>Dealshield Rebursment</td>
<td>Data</td>
<td>Data</td>
<td><div class="align--center"><input type="checkbox" /></div></td>
</tr>
<tr>
<td>Subclass</td>
<td>250</td>
<td>3,800</td>
<td>Subclass</td>
<td>Data</td>
<td>3800</td>
<td>Sublet Transportation</td>
<td>N/A</td>
<td>Data</td>
<td>Subclass</td>
<td>Data</td>
<td>Data</td>
<td>Sale Price</td>
<td>Data</td>
<td>Data</td>
<td><div class="align--center"><input type="checkbox" /></div></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div id="sale-details" class="details-page__main-content mui-p-n-r animate-fast mui-p" mui-col="4/24">
<div class="mui-p" mui-row="">
<h2 class="detail-notes__header mui-m-h-b db">
<label class="bold" for="notes">Enter Comments</label>
</h2>
<textarea rows="8" class="textarea" id="notes"></textarea>
<p class="gray-color eta mui-p-h-t"><span id="note-text-count">2,000</span> characters remaining</p>
<div mui-col="11/24"></div>
<div mui-col="2/24"></div>
<div class="mui-m-b" mui-col="11/24">
<button class="mui-button--secondary wide-100">Send Note</button>
</div>
<div mui-row class="mui-m-b border-top mui-p-t">
<div mui-col="11/24">
<button class="mui-button--primary wide-100">False/Positive</button>
</div>
<div mui-col="2/24"></div>
<div mui-col="11/24">
<button class="mui-button--primary wide-100">Resolved</button>
</div>
</div>
<div mui-row="guttter" class="mui-m-b border-bottom mui-p-b">
<div mui-col="11/24">&nbsp;</div>
<div mui-col="2/24"></div>
<div mui-col="11/24">
<button class="mui-button--primary wide-100">Done</button>
</div>
</div>
<div mui-row="gutter" class="mui-m-b mui-p-b">
<div class="text-center" mui-col="1/2">
<a>Create Snow Ticket</a>
</div>
<div class="text-center" mui-col="1/2">
<a>Work Bench Link</a>
</div>
</div>
<div mui-row="gutter" class="mui-m-b mui-p-b">
<div class="text-center" mui-col="1/2">
<a>Soa Link</a>
</div>
<div class="text-center" mui-col="1/2">
<a>Salesforce Link</a>
</div>
</div>
<div mui-row="gutter" class="mui-m-b border-bottom mui-p-b">
<div class="text-center" mui-col="1/2">
<a>Wave Tool Link</a>
</div>
<div class="text-center" mui-col="1/2">
<a>BEEUTL Link</a>
</div>
</div>
<div class="mui-m-t mui-p-t mui-p-b">
<div>
<div class="detail-listing__history mui-p-l mui-p-r">
<h3 class="delta detail-listing__history__current-status">Activity</h3>
<div id="listing-history">
<div class="detail-listing__history__item offer-history-status--buyer_initial_offer" mui-row>
<div mui-row>
<span class="detail-listing__history__item__disposition bold" mui-col="1/3">Created</span>
<span class="lowercase ng-binding ng-scope" mui-col="1/3"><span>03/13</span></span>
<span class="lowercase ng-binding ng-scope" mui-col="1/3"><span>3:13p</span></span>
</div>
<div mui-row>
<span class="detail-listing__history__item__disposition bold" mui-col="1/3">Resolved</span>
<span class="lowercase ng-binding ng-scope" mui-col="1/3"><span>03/13</span></span>
<span class="lowercase ng-binding ng-scope" mui-col="1/3"><span>3:31a</span></span>
</div>
<div mui-row>
<span class="detail-listing__history__item__disposition bold" mui-col="1/3">Pending</span>
<span class="lowercase ng-binding ng-scope" mui-col="1/3"><span>03/13</span></span>
<span class="lowercase ng-binding ng-scope" mui-col="1/3"><span>4:38p</span></span>
</div>
<div mui-row>
<span class="detail-listing__history__item__disposition bold" mui-col="1/3">Updated</span>
<span class="lowercase ng-binding ng-scope" mui-col="1/3"><span>03/13</span></span>
<span class="lowercase ng-binding ng-scope" mui-col="1/3"><span>4:38p</span></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div mui-row="">
<div class="detail-notes__messages detail-notes__messages--compact mui-p">
<h3 class="detail-notes__messages__header delta mui-m-h-b">Comment History</h3>
<table class="mui-table detail-notes__table">
<tbody>
<tr class="notes-row">
<td class="detail-notes__messages__date"><div class="bold">Mary Oliver</div> 11/08 04:22PM<i class="icon-pencil detail-notes__messages__date__edit grow"></i> <i class="icon-bin detail-notes__messages__date__delete grow"></i></td>
<td class="detail-notes__messages__content text-right">Unable to process Accept at $10,000 from Seller</td>
</tr>
<tr class="notes-row">
<td class="detail-notes__messages__date"> <div class="bold">Mary B. Oliver</div>11/08 04:22PM<i class="icon-pencil detail-notes__messages__date__edit grow"></i> <i class="icon-bin detail-notes__messages__date__delete grow"></i> </td>
<td class="detail-notes__messages__content text-right">Process Accept Failed: 503 Service Unavailable</td>
</tr>
<tr class="notes-row">
<td class="detail-notes__messages__date"> <div class="bold">Mary Oliver</div>11/08 04:20PM<i class="icon-pencil detail-notes__messages__date__edit grow"></i> <i class="icon-bin detail-notes__messages__date__delete grow"></i> </td>
<td class="detail-notes__messages__content text-right">Unable to process Accept at $10,000 from Seller</td>
</tr>
<tr class="notes-row">
<td class="detail-notes__messages__date"> <div class="bold">Mary Oliver</div>11/08 04:20PM<i class="icon-pencil detail-notes__messages__date__edit"></i> <i class="icon-bin detail-notes__messages__date__delete"></i> </td>
<td class="detail-notes__messages__content text-right">Process Accept Failed: 503 Service Unavailable</td>
</tr>
<tr class="notes-row">
<td class="detail-notes__messages__date"> <div class="bold">Mary Oliver</div>10/02 12:18PM<i class="icon-pencil detail-notes__messages__date__edit grow"></i> <i class="icon-bin detail-notes__messages__date__delete grow"></i> </td>
<td class="detail-notes__messages__content text-right">Unable to process Accept at $10,000 from Seller</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
Raw
style.sass
tr
height: 70px
td
vertical-align: middle
.notes-row td
vertical-align: top
.vam
vertical-align: middle
.detail-notes__messages__date
position: relative
&__edit, &__delete
position: absolute
bottom: 8px
cursor: pointer
&__edit
left: 8px
&:hover
color: mediumseagreen
&__delete
left: 32px
&:hover
color: tomato
.detail-notes__messages__date:hover .detail-notes__messages__date__edit
visibility: visible
.detail-notes__messages__date:hover .detail-notes__messages__date__delete
visibility: visible
.detail-notes__messages__date__edit, .detail-notes__messages__date__delete
visibility: hidden
.mui-table tbody tr:nth-child(odd)
background-color: white
.tabs
position: relative
min-height: 200px
/* This part sucks
clear: both
margin: 25px 0
.tab
float: left
label
background: #eee
padding: 10px
border: 1px solid #ccc
margin-left: -1px
position: relative
left: 1px
[type=radio]
display: none
.content
position: absolute
top: 44px
left: 0
background: white
right: 0
bottom: 0
padding: 20px
border: 1px solid #ccc
overflow: hidden
> *
opacity: 0
-webkit-transform: translate3d(0, 0, 0)
-webkit-transform: translateX(-100%)
-moz-transform: translateX(-100%)
-ms-transform: translateX(-100%)
-o-transform: translateX(-100%)
-webkit-transition: all 0.6s ease
-moz-transition: all 0.6s ease
-ms-transition: all 0.6s ease
-o-transition: all 0.6s ease
[type=radio]:checked ~ label
background: white
border-bottom: 1px solid white
z-index: 2
~ .content
z-index: 1
> *
opacity: 1
-webkit-transform: translateX(0)
-moz-transform: translateX(0)
-ms-transform: translateX(0)
-o-transform: translateX(0)
Raw
styles
<link href="https://codepen.io/andysolomon/pen/aLgNmw" rel="stylesheet" />
<link href="//mui.aws.manheim.com/0.29.0/man-customer/css/mui.min.css" rel="stylesheet" />
<link href="https://unpkg.com/tachyons@4.9.0/css/tachyons.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment