From 825a3da157d124cfddf1d7e4db50b83eb5b74b6d Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 8 Feb 2017 15:22:01 -0500 Subject: [PATCH] (add order template mockup) --- phpunit.xml | 5 + resources/assets/less/backgrounds.less | 2 + resources/assets/less/flex.less | 5 + resources/assets/less/layout.less | 8 +- resources/assets/less/typography.less | 1 + resources/assets/less/typography/base.less | 2 + resources/assets/less/typography/links.less | 73 +++++++++++ .../assets/less/typography/utilities.less | 3 + resources/views/orders/show.blade.php | 118 ++++++++++++++++++ routes/web.php | 4 + 10 files changed, 219 insertions(+), 2 deletions(-) create mode 100644 resources/assets/less/typography/links.less create mode 100644 resources/views/orders/show.blade.php diff --git a/phpunit.xml b/phpunit.xml index 7ff7452..eb05bcf 100644 --- a/phpunit.xml +++ b/phpunit.xml @@ -18,6 +18,11 @@ ./app + + + integration + + diff --git a/resources/assets/less/backgrounds.less b/resources/assets/less/backgrounds.less index d4c2b4a..c69f15e 100644 --- a/resources/assets/less/backgrounds.less +++ b/resources/assets/less/backgrounds.less @@ -1,9 +1,11 @@ @bg-light: @color-white; @bg-soft: @color-gray-lightest; @bg-muted: @color-gray-lighter; +@bg-gray: @color-gray-dark; @bg-dark: @color-black; .bg-light { background-color: @bg-light; } .bg-soft { background-color: @bg-soft; } .bg-muted { background-color: @bg-muted; } +.bg-gray { background-color: @bg-gray; } .bg-dark { background-color: @bg-dark; } diff --git a/resources/assets/less/flex.less b/resources/assets/less/flex.less index c8e5c9f..fc77a22 100644 --- a/resources/assets/less/flex.less +++ b/resources/assets/less/flex.less @@ -17,6 +17,11 @@ align-items: center; } +.flex-baseline { + display: flex; + align-items: baseline; +} + .flex-y-end { display: flex; align-items: flex-end; diff --git a/resources/assets/less/layout.less b/resources/assets/less/layout.less index 836476b..3757167 100644 --- a/resources/assets/less/layout.less +++ b/resources/assets/less/layout.less @@ -2,10 +2,14 @@ max-width: 33rem; } +.constrain-sm { + max-width: 26rem; +} + .constrain-lg { max-width: 40rem; } -.constrain-sm { - max-width: 26rem; +.constrain-xl { + max-width: 48em; } diff --git a/resources/assets/less/typography.less b/resources/assets/less/typography.less index 3536a89..4c0ed1d 100644 --- a/resources/assets/less/typography.less +++ b/resources/assets/less/typography.less @@ -1,2 +1,3 @@ @import "typography/base"; @import "typography/headings"; +@import "typography/links"; diff --git a/resources/assets/less/typography/base.less b/resources/assets/less/typography/base.less index 5d859f9..d4e082c 100644 --- a/resources/assets/less/typography/base.less +++ b/resources/assets/less/typography/base.less @@ -27,6 +27,8 @@ @text-dark-soft: fade(@text-dark, 60%); @text-dark-muted: fade(@text-dark, 35%); @text-brand: hsv(@hue-brand-primary, 100%, 86%); +@text-brand-soft: hsv(@hue-brand-primary, 85%, 86%); +@text-brand-muted: hsv(@hue-brand-primary, 65%, 86%); small { diff --git a/resources/assets/less/typography/links.less b/resources/assets/less/typography/links.less new file mode 100644 index 0000000..9364a88 --- /dev/null +++ b/resources/assets/less/typography/links.less @@ -0,0 +1,73 @@ +a, .link { + font-weight: @font-weight-normal; + color: @text-dark; + text-decoration: none; + + &:hover, &:focus { + color: darken(@text-dark, 15%); + text-decoration: underline; + } + &:focus { + .tab-focus; + } +} + +.link-brand { + color: @text-brand; + + &:hover, &:focus { + color: darken(@text-brand, 15%); + } +} + +.link-brand-soft { + color: @text-brand-soft; + + &:hover, &:focus { + color: darken(@text-brand-soft, 15%); + } +} + +.link-underline { + text-decoration: underline; +} + +.link-plain { + &:hover, &:focus { + text-decoration: none; + } +} + +.link-soft { + color: @text-dark-soft; + + &:hover, &:focus { + color: @text-dark; + } +} + +.link-muted { + color: @text-dark-muted; + + &:hover, &:focus { + color: @text-dark; + } +} + +.link-light { + color: @text-light; + + &:hover, &:focus { + color: @text-light; + } +} + +.link-light-muted { + color: @text-light-muted; + + &:hover, &:focus { + color: @text-light-soft; + } +} + + diff --git a/resources/assets/less/typography/utilities.less b/resources/assets/less/typography/utilities.less index 310a3b9..354c3ec 100644 --- a/resources/assets/less/typography/utilities.less +++ b/resources/assets/less/typography/utilities.less @@ -18,6 +18,9 @@ .text-dark { color: @text-dark; } .text-dark-soft { color: @text-dark-soft; } .text-dark-muted { color: @text-dark-muted; } +.text-brand { color: @text-brand; } +.text-brand-soft { color: @text-brand-soft; } +.text-brand-muted { color: @text-brand-muted; } .text-em { font-style: italic; } diff --git a/resources/views/orders/show.blade.php b/resources/views/orders/show.blade.php new file mode 100644 index 0000000..a899da5 --- /dev/null +++ b/resources/views/orders/show.blade.php @@ -0,0 +1,118 @@ +@extends('layouts.master') + +@section('body') +
+
+
+
+
+

Order Summary

+ #0123456789 +
+
+

+ Order Total: $65.00 +

+

Billed to Card #: **** **** **** 4242

+
+
+
+

Your Tickets

+
+
+
+

No Warning

+

with Cruel Hand and Backtrack

+
+
+ General Admission +

Admit one

+
+
+
+
+
+
+
+ @icon('calendar', 'text-brand-muted') +
+
+

Sunday, October 16, 2011

+

Doors at 8:00PM

+
+
+
+
+
+
+ @icon('location', 'text-brand-muted') +
+
+

Music Hall of Williamsburg

+
+

123 Main St. W

+

Brooklyn, New York 14259

+
+
+
+
+
+
+
+

DTJKCVUA

+

adam.wathan@example.com

+
+
+
+
+
+

No Warning

+

with Cruel Hand and Backtrack

+
+
+ General Admission +

Admit one

+
+
+
+
+
+
+
+ @icon('calendar', 'text-brand-muted') +
+
+

Sunday, October 16, 2011

+

Doors at 8:00PM

+
+
+
+
+
+
+ @icon('location', 'text-brand-muted') +
+
+

Music Hall of Williamsburg

+
+

123 Main St. W

+

Brooklyn, New York 14259

+
+
+
+
+
+
+
+

MHVHELNB

+

adam.wathan@example.com

+
+
+
+
+

Powered by TicketBeast

+
+
+
+
+@endsection diff --git a/routes/web.php b/routes/web.php index af1ddbb..a1159b0 100644 --- a/routes/web.php +++ b/routes/web.php @@ -11,6 +11,10 @@ | */ +Route::get('/mockups/order', function () { + return view('orders.show'); +}); + Route::get('/concerts/{id}', 'ConcertsController@show'); Route::post('/concerts/{id}/orders', 'ConcertOrdersController@store');