mirror of
https://github.com/nothingworksinc/ticketbeast.git
synced 2026-01-26 11:14:06 +00:00
(add order template mockup)
This commit is contained in:
Adam Wathan
@@ -18,6 +18,11 @@
|
|||||||
<directory suffix=".php">./app</directory>
|
<directory suffix=".php">./app</directory>
|
||||||
</whitelist>
|
</whitelist>
|
||||||
</filter>
|
</filter>
|
||||||
|
<groups>
|
||||||
|
<exclude>
|
||||||
|
<group>integration</group>
|
||||||
|
</exclude>
|
||||||
|
</groups>
|
||||||
<php>
|
<php>
|
||||||
<env name="APP_ENV" value="testing"/>
|
<env name="APP_ENV" value="testing"/>
|
||||||
<env name="CACHE_DRIVER" value="array"/>
|
<env name="CACHE_DRIVER" value="array"/>
|
||||||
|
|||||||
@@ -1,9 +1,11 @@
|
|||||||
@bg-light: @color-white;
|
@bg-light: @color-white;
|
||||||
@bg-soft: @color-gray-lightest;
|
@bg-soft: @color-gray-lightest;
|
||||||
@bg-muted: @color-gray-lighter;
|
@bg-muted: @color-gray-lighter;
|
||||||
|
@bg-gray: @color-gray-dark;
|
||||||
@bg-dark: @color-black;
|
@bg-dark: @color-black;
|
||||||
|
|
||||||
.bg-light { background-color: @bg-light; }
|
.bg-light { background-color: @bg-light; }
|
||||||
.bg-soft { background-color: @bg-soft; }
|
.bg-soft { background-color: @bg-soft; }
|
||||||
.bg-muted { background-color: @bg-muted; }
|
.bg-muted { background-color: @bg-muted; }
|
||||||
|
.bg-gray { background-color: @bg-gray; }
|
||||||
.bg-dark { background-color: @bg-dark; }
|
.bg-dark { background-color: @bg-dark; }
|
||||||
|
|||||||
@@ -17,6 +17,11 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.flex-baseline {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
.flex-y-end {
|
.flex-y-end {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
|
|||||||
@@ -2,10 +2,14 @@
|
|||||||
max-width: 33rem;
|
max-width: 33rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.constrain-sm {
|
||||||
|
max-width: 26rem;
|
||||||
|
}
|
||||||
|
|
||||||
.constrain-lg {
|
.constrain-lg {
|
||||||
max-width: 40rem;
|
max-width: 40rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.constrain-sm {
|
.constrain-xl {
|
||||||
max-width: 26rem;
|
max-width: 48em;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,2 +1,3 @@
|
|||||||
@import "typography/base";
|
@import "typography/base";
|
||||||
@import "typography/headings";
|
@import "typography/headings";
|
||||||
|
@import "typography/links";
|
||||||
|
|||||||
@@ -27,6 +27,8 @@
|
|||||||
@text-dark-soft: fade(@text-dark, 60%);
|
@text-dark-soft: fade(@text-dark, 60%);
|
||||||
@text-dark-muted: fade(@text-dark, 35%);
|
@text-dark-muted: fade(@text-dark, 35%);
|
||||||
@text-brand: hsv(@hue-brand-primary, 100%, 86%);
|
@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 {
|
small {
|
||||||
|
|||||||
73
resources/assets/less/typography/links.less
Normal file
73
resources/assets/less/typography/links.less
Normal file
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
@@ -18,6 +18,9 @@
|
|||||||
.text-dark { color: @text-dark; }
|
.text-dark { color: @text-dark; }
|
||||||
.text-dark-soft { color: @text-dark-soft; }
|
.text-dark-soft { color: @text-dark-soft; }
|
||||||
.text-dark-muted { color: @text-dark-muted; }
|
.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; }
|
.text-em { font-style: italic; }
|
||||||
|
|
||||||
|
|||||||
118
resources/views/orders/show.blade.php
Normal file
118
resources/views/orders/show.blade.php
Normal file
@@ -0,0 +1,118 @@
|
|||||||
|
@extends('layouts.master')
|
||||||
|
|
||||||
|
@section('body')
|
||||||
|
<div class="bg-soft p-xs-y-7 full-height">
|
||||||
|
<div class="container">
|
||||||
|
<div class="constrain-xl m-xs-auto">
|
||||||
|
<div class="m-xs-b-6">
|
||||||
|
<div class="flex-baseline flex-spaced p-xs-y-4 border-b">
|
||||||
|
<h1 class="text-xl">Order Summary</h1>
|
||||||
|
<a href="#" class="link-brand-soft">#0123456789</a>
|
||||||
|
</div>
|
||||||
|
<div class="p-xs-y-4 border-b">
|
||||||
|
<p>
|
||||||
|
<strong>Order Total: $65.00</strong>
|
||||||
|
</p>
|
||||||
|
<p class="text-dark-soft">Billed to Card #: **** **** **** 4242</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="m-xs-b-7">
|
||||||
|
<h2 class="text-lg wt-normal m-xs-b-4">Your Tickets</h2>
|
||||||
|
<div class="card m-xs-b-5">
|
||||||
|
<div class="card-section p-xs-y-3 flex-baseline flex-spaced text-light bg-gray">
|
||||||
|
<div>
|
||||||
|
<h1 class="text-xl wt-normal">No Warning</h1>
|
||||||
|
<p class="text-light-muted">with Cruel Hand and Backtrack</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<strong>General Admission</strong>
|
||||||
|
<p class="text-light-soft">Admit one</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-section border-b">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm">
|
||||||
|
<div class="media-object">
|
||||||
|
<div class="media-left">
|
||||||
|
@icon('calendar', 'text-brand-muted')
|
||||||
|
</div>
|
||||||
|
<div class="media-body p-xs-l-4">
|
||||||
|
<p class="wt-bold">Sunday, October 16, 2011</p>
|
||||||
|
<p class="text-dark-soft">Doors at 8:00PM</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm">
|
||||||
|
<div class="media-object">
|
||||||
|
<div class="media-left">
|
||||||
|
@icon('location', 'text-brand-muted')
|
||||||
|
</div>
|
||||||
|
<div class="media-body p-xs-l-4">
|
||||||
|
<p class="wt-bold">Music Hall of Williamsburg</p>
|
||||||
|
<div class="text-dark-soft">
|
||||||
|
<p>123 Main St. W</p>
|
||||||
|
<p>Brooklyn, New York 14259</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-section flex-baseline flex-spaced">
|
||||||
|
<p class="text-lg">DTJKCVUA</p>
|
||||||
|
<p>adam.wathan@example.com</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-section p-xs-y-3 flex-baseline flex-spaced text-light bg-gray">
|
||||||
|
<div>
|
||||||
|
<h1 class="text-xl wt-normal">No Warning</h1>
|
||||||
|
<p class="text-light-muted">with Cruel Hand and Backtrack</p>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<strong>General Admission</strong>
|
||||||
|
<p class="text-light-soft">Admit one</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-section border-b">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm">
|
||||||
|
<div class="media-object">
|
||||||
|
<div class="media-left">
|
||||||
|
@icon('calendar', 'text-brand-muted')
|
||||||
|
</div>
|
||||||
|
<div class="media-body p-xs-l-4">
|
||||||
|
<p class="wt-bold">Sunday, October 16, 2011</p>
|
||||||
|
<p class="text-dark-soft">Doors at 8:00PM</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm">
|
||||||
|
<div class="media-object">
|
||||||
|
<div class="media-left">
|
||||||
|
@icon('location', 'text-brand-muted')
|
||||||
|
</div>
|
||||||
|
<div class="media-body p-xs-l-4">
|
||||||
|
<p class="wt-bold">Music Hall of Williamsburg</p>
|
||||||
|
<div class="text-dark-soft">
|
||||||
|
<p>123 Main St. W</p>
|
||||||
|
<p>Brooklyn, New York 14259</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-section flex-baseline flex-spaced">
|
||||||
|
<p class="text-lg">MHVHELNB</p>
|
||||||
|
<p>adam.wathan@example.com</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center text-dark-soft wt-medium">
|
||||||
|
<p>Powered by TicketBeast</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
@endsection
|
||||||
@@ -11,6 +11,10 @@
|
|||||||
|
|
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
Route::get('/mockups/order', function () {
|
||||||
|
return view('orders.show');
|
||||||
|
});
|
||||||
|
|
||||||
Route::get('/concerts/{id}', 'ConcertsController@show');
|
Route::get('/concerts/{id}', 'ConcertsController@show');
|
||||||
|
|
||||||
Route::post('/concerts/{id}/orders', 'ConcertOrdersController@store');
|
Route::post('/concerts/{id}/orders', 'ConcertOrdersController@store');
|
||||||
|
|||||||
Reference in New Issue
Block a user