Skip to content

Instantly share code, notes, and snippets.

@heitzke

heitzke/TMR-login.html

Last active November 27, 2018 22:29
Show Gist options
  • Save heitzke/8ebc735ab06bbc792c70a1809700dc6b to your computer and use it in GitHub Desktop.
Save heitzke/8ebc735ab06bbc792c70a1809700dc6b to your computer and use it in GitHub Desktop.
Download ZIP
TMR-login
Raw
TMR-login.html
Appointment details:
.appointment__details p {
font-size: 1.2rem;
font-family: "sourcesans", sans-serif !important;
}
.appointment__details b, .appointment__details strong {
font-family: "sourcesansbold", sans-serif !important
}
// add padding-2x vs padding-1x present
<div class="grey-box padding-2x appointment__details">
<h4 class="h5 bold margin-bottom-1x">Appointment Details</h4>
<div class="row">
<div class="col-sm-6">
<p class=""><span class="loud"><b>
When:</b></span>
<br>
November 26, 2018
<br>
Between
4:00 PM - 5:00 PM
</p>
</div>
<div class="col-sm-6">
<p><span class="loud"><b>Where:</b></span>
<br>
21060 Dulles Town Cir
<br>
Dulles
,
VA
20166
</p>
</div>
</div>
<hr>
<p class="text-left"><span class="loud"><b>
Average repair time:</b></span>
less than an hour
</p>
</div>
Technician name
// add class of technician__name
<p class="h2 step__header__title technician__name">BRADLEY JOHN NELSON</p>
.technician__name {
font-size: 2.1rem;
}
TMR Green BTN
.btn-green {
color: green;
}
.btn-secondary.btn-green {
border-color: #2C9F00;
color: #2C9F00 !important;
}
.btn-secondary.btn-green:hover {
background: #2C9F00 !important;
}
// for example just add 'btn-green' to the class and it adjusts the color/border
<a id="js-next-button" href="trackMyTech!technicianStatus.action?claimNumber=1234&amp;mdn=710-209-7247&amp;refreshClicked=Y&amp;claimMdnValidationRequired=true" class="btn btn-secondary btn-ghost btn-green">Refresh Page</a>
TMR Login
// error state
.alert-bar__content {
padding: 1rem 0;
}
.alert-bar--danger .alert-bar__content {
background: #F1DEDB;
color: #983233;
}
.alert-bar__dismiss {
float: right;
margin: 4px 13px 0 0;
color: #999;
}
<div class="alert-bar alert-bar--danger text-center margin-bottom-2x">
<div class="alert-bar__wrapper">
<div class="alert-bar__content">
Error state messaging
<a class="alert-bar__dismiss icon-close" role="button"></a>
</div>
</div>
</div>
// icon - headline
<div class="text-accessible-blue text-center margin-bottom-1x margin-top-3x">
<!--?xml version="1.0" encoding="UTF-8" standalone="no"?-->
<svg width="88px" height="88px" viewBox="0 0 88 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="01_Status_Validation" transform="translate(-596.000000, -139.000000)">
<g id="adg_icon_96_device_repair.svg" transform="translate(597.000000, 140.000000)">
<circle id="Oval" stroke="#4A4A4A" stroke-width="2" cx="43" cy="43" r="43"></circle>
<path d="M65,28 C65,24.7 63.8,21.8 60.9,20.1 C60.2,19.7 59.4,20.2 59.4,20.9 L59.4,27.8 L55.4,29.8 L51.4,27.8 L51.4,21.2 C51.4,20.4 50.5,19.9 49.8,20.4 C47.5,22.1 45.8,24.9 45.8,28 C45.8,31.5 47.5,34.5 50.3,36.1 C51.6,36.9 52.4,38.1 52.4,39.6 L52.4,62.5 C52.4,63.4 52.7,64.3 53.4,64.9 C55.4,66.7 58.4,65.1 58.4,62.9 L58.4,39.6 C58.4,38.1 59.2,36.8 60.5,36.1 C63.3,34.5 65,31.5 65,28 Z" id="Shape" stroke="#4A4A4A" stroke-width="2"></path>
<g id="Group" transform="translate(27.000000, 20.000000)" stroke="#4A4A4A" stroke-linecap="round" stroke-width="2">
<path d="M22,46 L2.2,46 C1,46 0,45 0,43.7 L0,2.3 C0,1.1 1,0 2.2,0 L18,0" id="Shape"></path>
<path d="M0,38 L21,38" id="Shape"></path>
<path d="M0,7 L15,7" id="Shape"></path>
<path d="M13,3 L14,3" id="Shape"></path>
</g>
<circle id="Oval" fill="#4A4A4A" fill-rule="nonzero" cx="41.6" cy="61.7" r="2.2"></circle>
<g id="Group" transform="translate(35.000000, 39.000000)" stroke="#4A4A4A" stroke-linecap="round" stroke-width="2">
<path d="M0.2,4.1 L3.9,7.8" id="Shape"></path>
<path d="M3.9,7.8 L11.3,0.4" id="Shape"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<h1 class="h1 light step__header__title margin-bottom-1x">Track My Repair</h1>
<h2 class="h4 step__header__subtitle margin-bottom-1x">Please provide your information to access your appointment details.</h2>
// tooltip
.tooltip-wrapper {
position: relative;
display: inline-block;
}
.tooltip-text {
position: absolute;
top: 0px;
left: 20px;
z-index: 999;
background: rgb(74, 74, 74);
color: rgb(255, 255, 255);
padding: 1rem;
width: 250px;
border-radius: 5px;
font-size: 14px;
display: block;
}
.tooltip-headline {
text-align: center;
border-bottom: 1px solid;
margin: 4px 0 10px 0;
display: block;
padding: 0px 0 13px 0;
font-size: 16px;
font-weight: bold;
}
.tooltip-close {
display: block;
text-align: center;
color: #fff;
margin-top: 20px;
}
// replace tooltip content section with
<div class="tooltip-wrapper">
<a class="tooltip-trigger" href="#?"><img class=" width=" 15"="" height="15" src="/servicebenchv5/assets/consumerApp/img/questionicon.png">
</a>
<div class="tooltip-text">
<span class="tooltip-headline">Wireless Security Passcode</span>
<div class="tooltip-body loud"><p>Your passcode is 4 to 10 digit or character passcode associated with your AT&amp;T Account</p><p>Note:</strong><br> This is not your myAT&amp;T website password. This could be the last 4 digits of the account holder's Social Security number or TaxID</p></div>
<a href="#?" class="tooltip-close">Close</a>
</div>
</div>
// mocked js for function, needs testing
$('.tooltip-trigger').on('click', function() {
$('.tooltip-text').fadeIn();
});
$('.tooltip-trigger').on('mouseover', function() {
$('.tooltip-text').fadeIn();
});
$('.tooltip-close').on('click', function() {
$('.tooltip-text').fadeOut();
});
// technician is en-route
// main headline needs 'bold' vs 'loud'
<h2 class="h3 bold">Your technician is en-route.</h2>
// change headline class to 'h4', loud to 'bold' for these headlines and add 'margin-bottom-1x' for spacing
<h2 class="h4 bold text-center margin-bottom-1x">Your Asurion Tech</h2>
<h2 class="h4 bold margin-bottom-1x text-center">Your Tech's Location</h2>
// this will keep the layout together whent he image is missing
.alttext-container {
display: block;
background: rgba(0, 0, 0, .3);
height: 200px;
max-width: 200px;
text-align: center;
border-radius: 8px;
}
.AsurionLogoProfile {
height: auto;
max-width: 175px;
}
// border-radius for the map
.tracking__map #map_canvas {
border-radius: 8px;
height: 470px;
}
.tracking__info {
border-radius: 0 0 8px 8px
}
// appointment details block
<div class="col-sm-12">
<div class="grey-box padding-1x">
<h4 class="h5 bold margin-bottom-2x">Appointment Details</h4>
<div class="row">
<div class="col-sm-6"> <p class=""><span class="bold">When:</span> <br>
November 16, 2018 <br>
4:00 PM - 5:00 PM
</p>
</div>
<div class="col-sm-6">
<p><span class="bold">Where:</span>
<br>
21060 Dulles Town Cir
<br>
Dulles
,
VA
20166
</p>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<hr>
<span class="loud">Average repair time:</span>
less than an hour
</div>
</div>
</div>
</div>
// YOUR TECH HAS ARRIVED
<h2 class="h3 bold"> %technician% is working on your device.</h2>
<h2 class="h4 bold text-center margin-bottom-1x">Your Asurion Tech</h2>
<h2 class="h4 bold margin-bottom-1x text-center">Your Tech's Location</h2>
.location-block {}
.location-block--content {
border-top: 35px solid #3171BF;
}
.location-img {
text-align: center;
}
// this one also has an inline SVG image for the location selection. This styling works across a few different scenarios as well
<div class="padding-top-1x location-block">
<div class="grey-box padding-2x location-block--content">
<div class="location-img margin-bottom-1x margin-top-1x">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="65px" height="90px" viewBox="0 0 65 90" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="03_Status_Scheduled-Tech-Assigned" transform="translate(-746.000000, -750.000000)">
<g id="Group-5" transform="translate(564.000000, 651.000000)">
<g id="Big-Map-Pin" transform="translate(182.000000, 99.000000)">
<g id="Group-6">
<path d="M32.5,90 C54.1666667,62.7704558 65,43.3260114 65,31.6666667 C65,14.1776496 50.4492544,0 32.5,0 C14.5507456,0 0,14.1776496 0,31.6666667 C0,43.3260114 10.8333333,62.7704558 32.5,90 Z" id="Oval-2" fill="#3171BF"></path>
<ellipse id="Oval-3" fill="#FFFFFF" cx="33" cy="29.5" rx="17" ry="16.5"></ellipse>
</g>
</g>
</g>
</g>
</g>
</svg>
</div>
<h2 class="h4 bold text-center">Your tech has arrived!</h2>
<br><br>
<p class="tracking__info__item text-center">
Technician arrival time:</p>
<p class="tracking__info__item text-center">
Average repair time:
less than an hour</p>
</div>
</div>
//bottom block for appointment details, this one had excess padding from the classes, etc
<div class="col-sm-12">
<div class="padding-top-1x ">
<div class="grey-box padding-1x">
<h4 class="h5 bold margin-bottom-1x">Appointment Details</h4>
<div class="row">
<div class="col-sm-6">
<p class=""><span class="loud"><b>When:</b>
</span> <br>
Friday <br>
November 16, 2018 <br><br>
Between
4:00 PM - 5:00 PM
</p>
</div>
<div class="col-sm-6">
<p><span class="loud"><br><b>Where:</b></span>
<br>
21060 Dulles Town Cir
<br>
Dulles
,
VA
20166
</p>
</div>
</div>
<div class="col-sm-12">
<hr>
<p class="text-left"><span class="loud">
Average repair time:</span>
less than an hour</p>
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment