Started on redesign of organiser page
This commit is contained in:
Dave Earley
parent
9e29a7fc22
commit
a0b0ead633
|
|
@ -16,7 +16,7 @@ class OrganiserPageDesignUpdate extends Migration
|
|||
$table->boolean('show_twitter_widget')->default(false);
|
||||
$table->boolean('show_facebook_widget')->default(false);
|
||||
|
||||
$table->string('page_header_bg_color', 20)->default('#009688');
|
||||
$table->string('page_header_bg_color', 20)->default('#76a867');
|
||||
$table->string('page_bg_color', 20)->default('#EEEEEE');
|
||||
$table->string('page_text_color', 20)->default('#FFFFFF');
|
||||
});
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -297,6 +297,7 @@ Small devices (tablets, 768px and up)
|
|||
#organiser_page_wrap {
|
||||
#intro {
|
||||
padding: 30px;
|
||||
margin-top: 0;
|
||||
}
|
||||
#intro h1 {
|
||||
font-size: 2.236em;
|
||||
|
|
@ -370,21 +371,148 @@ Small devices (tablets, 768px and up)
|
|||
|
||||
/*
|
||||
-----------------------------------------------------
|
||||
Event Listing
|
||||
Event Listing / Organiser Page
|
||||
-----------------------------------------------------
|
||||
*/
|
||||
.event-listing {
|
||||
.event .panel {
|
||||
min-height: 140px;
|
||||
.event-listing-heading {
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.event-list {
|
||||
list-style: none;
|
||||
font-family: 'Lato', sans-serif;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
.event-list > li {
|
||||
background-color: #F3F3F3;
|
||||
padding: 0px;
|
||||
margin: 0px 0px 20px;
|
||||
}
|
||||
.event-list > li > time {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.event-list > li > time > span {
|
||||
display: none;
|
||||
}
|
||||
.event-list > li > time > .day {
|
||||
display: block;
|
||||
font-size: 18pt;
|
||||
font-weight: 100;
|
||||
line-height: 1;
|
||||
}
|
||||
.event-list > li time > .month {
|
||||
display: block;
|
||||
font-size: 24pt;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
}
|
||||
.event-list > li > img {
|
||||
width: 100%;
|
||||
}
|
||||
.event-list > li > .info {
|
||||
padding-top: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.event-list > li > .info > .title {
|
||||
font-size: 15pt;
|
||||
font-weight: 500;
|
||||
margin: 0px;
|
||||
}
|
||||
.event-list > li > .info > .desc {
|
||||
font-size: 10pt;
|
||||
font-weight: 300;
|
||||
margin: 0px;
|
||||
}
|
||||
.event-list > li > .info > ul
|
||||
{
|
||||
display: table;
|
||||
list-style: none;
|
||||
margin: 10px 0px 0px;
|
||||
padding: 0px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: #DEDEDE;
|
||||
}
|
||||
|
||||
.event-list > li > .info > ul > li {
|
||||
display: table-cell;
|
||||
cursor: pointer;
|
||||
color: rgb(30, 30, 30);
|
||||
font-size: 11pt;
|
||||
font-weight: 300;
|
||||
padding: 3px 0px;
|
||||
}
|
||||
.event-list > li > .info > ul > li > a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: #6D6D6D;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
.event-list > li > .info > ul > li:hover {
|
||||
color: rgb(30, 30, 30);
|
||||
background-color: rgb(200, 200, 200);
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 768px) {
|
||||
|
||||
.event-list > li {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
padding: 0px;
|
||||
}
|
||||
.event-list > li > time,
|
||||
.event-list > li > img {
|
||||
display: inline-block;
|
||||
}
|
||||
.event-list > li > time,
|
||||
.event-list > li > img {
|
||||
width: 120px;
|
||||
float: left;
|
||||
}
|
||||
.event-list > li > .info {
|
||||
background-color: rgb(245, 245, 245);
|
||||
overflow: hidden;
|
||||
}
|
||||
.event-list > li > time,
|
||||
.event-list > li > img {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
.event-list > li > time > .day {
|
||||
font-size: 56pt;
|
||||
}
|
||||
.event-list > li > .info {
|
||||
position: relative;
|
||||
height: 120px;
|
||||
text-align: left;
|
||||
padding-right: 40px;
|
||||
padding-top: 30px;
|
||||
}
|
||||
.event-list > li > .info > .title,
|
||||
.event-list > li > .info > .desc {
|
||||
padding: 0px 10px;
|
||||
}
|
||||
.event-list > li > .info > ul {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
background-color: #D2D2D2;
|
||||
}
|
||||
|
||||
.event_flyer {
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
.event_flyer img {
|
||||
max-height: 140px;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -45,4 +45,5 @@
|
|||
{!!HTML::script('assets/javascript/frontend.js')!!}
|
||||
|
||||
@include('Shared.Partials.GlobalFooterJS')
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,11 @@
|
|||
background-color: {{$organiser->page_header_bg_color}} !important;
|
||||
color: {{$organiser->page_text_color}} !important;
|
||||
}
|
||||
.event-list > li > time {
|
||||
color: {{$organiser->page_text_color}};
|
||||
background-color: {{$organiser->page_header_bg_color}};
|
||||
}
|
||||
|
||||
</style>
|
||||
@stop
|
||||
|
||||
|
|
|
|||
|
|
@ -1,31 +1,33 @@
|
|||
<div class="panel event-listing">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">
|
||||
{{ $panel_title }}
|
||||
</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="row">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h1 class="event-listing-heading">{{ $panel_title }}</h1>
|
||||
<ul class="event-list">
|
||||
|
||||
@foreach($events as $event)
|
||||
<div class="col-md-12 event">
|
||||
<div class="panel widget">
|
||||
<div class="table-layout nm">
|
||||
<div class="col-xs-4 event_flyer">
|
||||
<img src="{{$event->images->first()['image_path'] ? URL::to($event->images->first()['image_path']) : 'http://placehold.it/200'}}" >
|
||||
</div>
|
||||
<div class="col-xs-8 valign-middle">
|
||||
<div class="panel-body">
|
||||
<h5 class="ellipsis semibold mt0 mb5">
|
||||
<a title="{{{$event->title}}}" href="{{$event->event_url}}">{{{$event->title}}}</a>
|
||||
</h5>
|
||||
<p class="ellipsis text-muted mb5"><i class="ico-clock mr5"></i> {{{ $event->start_date->toDayDateTimeString() }}}</p>
|
||||
<p class="text-muted nm"><i class="ico-location2 mr5"></i> {{{$event->venue_name}}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<li>
|
||||
<time datetime="{{ $event->start_date }}">
|
||||
<span class="day">{{ $event->start_date->format('d') }}</span>
|
||||
<span class="month">{{ $event->start_date->format('M') }}</span>
|
||||
<span class="year">{{ $event->start_date->format('Y') }}</span>
|
||||
<span class="time">{{ $event->start_date->format('h:i') }}</span>
|
||||
</time>
|
||||
@if(count($event->images))
|
||||
<img class="hide" alt="{{ $event->title }}" src="{{ asset($event->images->first()['image_path']) }}"/>
|
||||
@endif
|
||||
<div class="info">
|
||||
<h2 class="title ellipsis">
|
||||
<a href="{{$event->event_url }}">{{ $event->title }}</a>
|
||||
</h2>
|
||||
<p class="desc ellipsis">{{ $event->venue_name }}</p>
|
||||
<ul>
|
||||
<li style="width:50%;"><a href="{{$event->event_url }}">Tickets</a></li>
|
||||
<li style="width:50%;"><a href="{{$event->event_url }}">Information</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,4 @@
|
|||
<div class="panel">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">
|
||||
Facebook feed
|
||||
</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="row">
|
||||
|
||||
<div class="fb-page" data-href="https://www.facebook.com/{{$facebook_account}}"
|
||||
data-tabs="timeline" data-small-header="false"
|
||||
data-adapt-container-width="true"
|
||||
|
|
@ -17,6 +10,3 @@
|
|||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue